@0xsquid/ui 2.2.9 → 2.2.11

package/dist/cjs/index.js

@@ -4186,10 +4186,26 @@ function CrossedOutSunSolidIcon({ size = "20", className, }) {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_3313_9942)", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 0.833313C10.4603 0.833313 10.8334 1.20641 10.8334 1.66665V2.49998C10.8334 2.96022 10.4603 3.33331 10 3.33331C9.5398 3.33331 9.16671 2.96022 9.16671 2.49998V1.66665C9.16671 1.20641 9.5398 0.833313 10 0.833313ZM10 16.6667C10.4603 16.6667 10.8334 17.0398 10.8334 17.5V18.3333C10.8334 18.7936 10.4603 19.1667 10 19.1667C9.5398 19.1667 9.16671 18.7936 9.16671 18.3333V17.5C9.16671 17.0398 9.5398 16.6667 10 16.6667ZM16.6667 10C16.6667 9.53976 17.0398 9.16666 17.5 9.16666H18.3334C18.7936 9.16666 19.1667 9.53976 19.1667 10C19.1667 10.4602 18.7936 10.8333 18.3334 10.8333H17.5C17.0398 10.8333 16.6667 10.4602 16.6667 10ZM0.833374 10C0.833374 9.53976 1.20647 9.16666 1.66671 9.16666H2.50004C2.96028 9.16666 3.33337 9.53976 3.33337 10C3.33337 10.4602 2.96028 10.8333 2.50004 10.8333H1.66671C1.20647 10.8333 0.833374 10.4602 0.833374 10ZM14.7107 14.7107C15.0361 14.3853 15.5637 14.3853 15.8892 14.7107L16.4808 15.3024C16.8063 15.6278 16.8063 16.1554 16.4808 16.4809C16.1554 16.8063 15.6278 16.8063 15.3023 16.4809L14.7107 15.8892C14.3852 15.5638 14.3852 15.0361 14.7107 14.7107ZM3.51925 3.5191C3.84469 3.19366 4.37232 3.19366 4.69776 3.5191L5.28943 4.11077C5.61486 4.43621 5.61486 4.96384 5.28943 5.28928C4.96399 5.61472 4.43635 5.61472 4.11091 5.28928L3.51925 4.69761C3.19381 4.37218 3.19381 3.84454 3.51925 3.5191ZM6.46451 6.46445C7.91429 5.01466 10.0329 4.64131 11.8271 5.34441L5.34447 11.8271C4.64137 10.0328 5.01472 7.91423 6.46451 6.46445ZM8.17288 14.6555L14.6556 8.17282C15.3587 9.96708 14.9854 12.0857 13.5356 13.5355C12.0858 14.9853 9.96714 15.3587 8.17288 14.6555ZM17.2071 4.20709C17.5976 3.81657 17.5976 3.1834 17.2071 2.79288C16.8166 2.40235 16.1834 2.40235 15.7929 2.79288L2.79289 15.7929C2.40237 16.1834 2.40237 16.8166 2.79289 17.2071C3.18342 17.5976 3.81658 17.5976 4.20711 17.2071L17.2071 4.20709Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_3313_9942", children: jsxRuntime.jsx("rect", { width: size, height: size, fill: "currentColor" }) }) })] }));
 }
 
-function PriceChange({ sign, value }) {
-    return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xs tw-items-center tw-justify-end tw-text-grey-500", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center", children: [jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px]", children: value }), jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px] tw-text-grey-600", children: "%" }), sign === "neutral" ? (jsxRuntime.jsx(PauseIcon, {})) : (jsxRuntime.jsx(ArrowTriangle, { className: sign === "positive"
-                        ? "tw-rotate-180 tw-text-status-positive"
-                        : "tw-text-status-negative" }))] }) }));
+const valueWrapperClassName = "!tw-leading-[10px]";
+var PriceChangeSign;
+(function (PriceChangeSign) {
+    PriceChangeSign[PriceChangeSign["POSITIVE"] = 0] = "POSITIVE";
+    PriceChangeSign[PriceChangeSign["NEGATIVE"] = 1] = "NEGATIVE";
+    PriceChangeSign[PriceChangeSign["NEUTRAL"] = 2] = "NEUTRAL";
+})(PriceChangeSign || (PriceChangeSign = {}));
+const priceChangeSignToIconMap = {
+    [PriceChangeSign.POSITIVE]: (jsxRuntime.jsx(ArrowTriangle, { className: "tw-rotate-180 tw-text-status-positive" })),
+    [PriceChangeSign.NEGATIVE]: (jsxRuntime.jsx(ArrowTriangle, { className: "tw-text-status-negative" })),
+    [PriceChangeSign.NEUTRAL]: jsxRuntime.jsx(PauseIcon, {}),
+};
+function PriceChange({ value: rawValue, variant = "small", }) {
+    const valueFormatted = Math.abs(Number(rawValue)).toFixed(2);
+    const sign = Number(rawValue) > 0
+        ? PriceChangeSign.POSITIVE
+        : Number(rawValue) < 0
+            ? PriceChangeSign.NEGATIVE
+            : PriceChangeSign.NEUTRAL;
+    return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xs tw-items-center tw-justify-end tw-text-grey-500", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center", children: [variant === "small" ? (jsxRuntime.jsx(CaptionText, { className: valueWrapperClassName, children: valueFormatted })) : (jsxRuntime.jsx(BodyText, { size: "small", className: valueWrapperClassName, children: valueFormatted })), jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px] tw-text-grey-600", children: "%" }), priceChangeSignToIconMap[sign]] }) }));
 }
 
 const statusBgClassMap$1 = {
@@ -18742,7 +18758,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", }) {
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, width = "large", animateOpacity = false, }) {
     const [isOpen, setIsOpen] = React$1.useState(_isOpen);
     React$1.useEffect(() => {
         if (_isOpen) {
@@ -18770,7 +18786,10 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
         }, className: cn("tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m", _isOpen ? "tw-animate-blur-in" : "tw-animate-blur-out"), children: jsxRuntime.jsx("div", { style: {
                 [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
                 [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
-            }, 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", maxHeight && "tw-h-full", modalWidthClassMap[width]), children: children }) })));
+                [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 }) })));
 }
 
 const borderTypeClassMap = {
@@ -19183,11 +19202,20 @@ 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 extraPaddingMap = {
+    "outline-sm": "1px",
+    "outline-lg": "3px",
+};
 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
+    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 (jsxRuntime.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) => (jsxRuntime.jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
                 ? {
                     style: {
                         zIndex: self.length - index,
@@ -19470,13 +19498,13 @@ 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 MAX_PREVIEW_ITEMS = 5;
 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", }) {
+function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, balanceUsd, extraSpacing = true, chainImageUrl, imageUrl, symbol, name, onClick, variant = "large", className, onChildClick, }) {
     var _a;
     const [isCollapsed, setIsCollapsed] = React$1.useState(true);
     const isCollapsible = tokenItems && tokenItems.length > 0;
@@ -19489,36 +19517,41 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
         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"), children: [jsxRuntime.jsxs(ContentTag, { onClick: (event) => {
+            "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
+                }, style: isCollapsible
+                    ? {
+                        transition: `${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
+                        transitionProperty: "height",
+                    }
+                    : 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
                         ? "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.GENERIC}`,
-                                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-h-squid-m 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 && "tw-h-squid-m"), 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((props) => (jsxRuntime.jsx(TokenGroup, Object.assign({}, props, { extraSpacing: false, variant: isCompactVariant ? "small" : "large" }), props.chainImageUrl))) }) })] }));
+                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$1, { src: imageUrl, size: isLargeVariant && !isCollapsed
+                                    ? "medium"
+                                    : (_a = mainImageSizeMap[variant]) !== null && _a !== void 0 ? _a : "medium", rounded: isCompactVariant ? "xxs" : "full", style: {
+                                    transition: `${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
+                                    transitionProperty: "width, height",
+                                } }), isLargeVariant && (jsxRuntime.jsx("div", { style: isCollapsible
+                                    ? {
+                                        transition: `${ANIMATION_DURATIONS.GENERIC / 4}ms ${ANIMATION_TIMINGS.GENERIC}`,
+                                        transitionProperty: "opacity",
+                                        transitionDelay: isCollapsed
+                                            ? `${ANIMATION_DURATIONS.GENERIC / 10}ms`
+                                            : undefined,
+                                        opacity: isCollapsed ? 1 : 0,
+                                    }
+                                    : undefined, className: cn("tw-absolute", isCollapsible
+                                    ? "-tw-bottom-0 -tw-right-0"
+                                    : "-tw-bottom-[3px] -tw-right-[3px]"), children: jsxRuntime.jsx(ImageStack, { spacing: "-10px", removeDuplicates: true, addExtraPadding: !isCollapsible, size: "medium", rounded: "xxs", border: "outline-lg", imageUrls: isCollapsible
+                                        ? tokenItems === null || tokenItems === void 0 ? void 0 : tokenItems.slice(0, MAX_PREVIEW_ITEMS).map((item) => item.chainImageUrl)
+                                        : [chainImageUrl] }) }))] }), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-text-grey-300", isCollapsed &&
+                            (isSmallVariant ? "tw-gap-squid-xs" : "tw-gap-squid-xxs"), isSmallVariant && "tw-h-[45px]"), children: [jsxRuntime.jsxs("div", { className: cn("tw-flex tw-gap-squid-xxs tw-self-stretch", isSmallVariant ? "tw-h-[13px] tw-items-end" : "tw-items-center", isLargeVariant && "tw-h-squid-m"), children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-h-fit !tw-leading-[13px]", children: name }), (!isCollapsed || isCompactVariant) && (jsxRuntime.jsx(ChevronTopIcon, { className: cn("tw-text-grey-500", isCollapsed ? "tw-rotate-90" : "tw-rotate-180") })), balanceUsd ? (jsxRuntime.jsx("span", { className: cn("tw-flex tw-flex-1 tw-items-center tw-justify-end", isCollapsed ? "tw-text-grey-300" : "tw-text-grey-500"), children: isSmallVariant ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px] tw-opacity-66", children: "$" }), jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px]", children: balanceUsd })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[10px] tw-opacity-66", children: "$" }), jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[10px]", children: balanceUsd })] })) })) : null] }), !isCompactVariant && (jsxRuntime.jsx(Collapse, { collapsed: !isCollapsed, contentsClassName: "tw-flex tw-w-full tw-items-start tw-justify-between", className: "tw-w-full", children: jsxRuntime.jsxs("div", { className: cn("tw-flex tw-w-full tw-items-center tw-justify-between tw-self-stretch", isLargeVariant && "tw-h-squid-m"), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-grey-400", children: jsxRuntime.jsxs(CaptionText, { className: "!tw-leading-[10px]", children: [balance, symbol] }) }), priceChange && jsxRuntime.jsx(PriceChange, { value: priceChange })] }) }))] })] }), jsxRuntime.jsx(Collapse, { collapsed: isCollapsed, children: jsxRuntime.jsx("ul", { className: cn("tw-flex tw-flex-col tw-items-start tw-justify-end tw-self-stretch", isCompactVariant && "tw-gap-squid-xs tw-pt-squid-xs"), children: tokenItems === null || tokenItems === void 0 ? void 0 : tokenItems.map((token) => (jsxRuntime.jsx(TokenGroup, Object.assign({}, token, { extraSpacing: false, variant: isCompactVariant ? "small" : "large", onClick: () => onChildClick === null || onChildClick === void 0 ? void 0 : onChildClick(token) }), token.chainImageUrl))) }) })] }));
 }
 
 function ActionLayout({ lineCap = jsxRuntime.jsx(Timeline.CapTop, {}), status = "executed", showTimeline = true, showBody = true, nextStatus, statusIcon, description, title, icon, children, }) {
@@ -19781,19 +19814,19 @@ function Toast({ headerContent, actionsContent, description, chipLabel, title, }
 
 const DEFAULT_TIMEFRAME = "1D";
 const DefaultChart = ({ timeframe, }) => (jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center", children: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Chart (", timeframe, ")"] }) }));
-const TokenModalHeader = ({ token, chain, onLikeToken, onClose, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-pb-squid-xs", children: jsxRuntime.jsx(BadgeImage, { image: {
+const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-pb-squid-xs", children: jsxRuntime.jsx(BadgeImage, { image: {
                     src: token.image,
                     size: "xxlarge",
                     rounded: "full",
                     shadow: true,
                 }, badge: {
                     src: chain.image,
-                    size: "large",
+                    size: "medium",
                     rounded: "xxs",
-                    border: "outline-sm",
-                } }) }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(IconButton, { className: "tw-text-grey-300", onClick: onLikeToken, icon: jsxRuntime.jsx(EmptyHeartIcon, {}) }), jsxRuntime.jsx(IconButton, { className: "tw-text-grey-300", onClick: onClose, icon: jsxRuntime.jsx(CircleXFilledIcon, {}) })] })] }));
-const TokenInfo = ({ token, tokenPrice, priceChange, loading, }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(BodyText, { size: "large", loading: { isLoading: loading, width: "100px" }, children: ["$", tokenPrice.toLocaleString()] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsx(BodyText, { size: "small", children: token.name }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsxs(BodyText, { size: "small", className: "tw-text-grey-500", loading: { isLoading: loading, width: "40px" }, children: [Math.abs(priceChange).toFixed(2), "%"] }), !loading && (jsxRuntime.jsx(ArrowTriangle, { className: `${priceChange >= 0 ? "tw-rotate-180 tw-text-status-positive" : "tw-text-status-negative"}` }))] })] })] }));
-const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-400", children: "Balance" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx("img", { src: token.image, alt: token.name, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }), jsxRuntime.jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance.toFixed(6), " ", token.symbol] })] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-grey-400", loading: { isLoading: loading, width: "60px" }, children: ["$", balanceUSD.toFixed(2)] })] })] }));
+                    border: "outline-lg",
+                } }) }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(IconButton, { className: "tw-group/token-detail-fav-icon tw-text-grey-300", onClick: onLikeToken, icon: isFavorite ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilledHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsxRuntime.jsx(BrokenHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsxRuntime.jsx(FilledHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) }), jsxRuntime.jsx(IconButton, { className: "tw-text-grey-300", onClick: onClose, icon: jsxRuntime.jsx(CircleXFilledIcon, {}) })] })] }));
+const TokenInfo = ({ token, tokenPrice, priceChange, loading, }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(BodyText, { size: "large", loading: { isLoading: loading, width: "100px" }, children: tokenPrice.toLocaleString() }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsx(BodyText, { size: "small", children: token.name }), jsxRuntime.jsx(PriceChange, { value: priceChange, variant: "large" })] })] }));
+const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-400", children: "Balance" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx("img", { src: token.image, alt: token.name, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }), jsxRuntime.jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance, " ", token.symbol] })] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-grey-500", loading: { isLoading: loading, width: "60px" }, children: [jsxRuntime.jsx("span", { className: "tw-opacity-66", children: "$" }), balanceUSD] })] })] }));
 const MarketDataItem = ({ label, value, showDollar, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: label }), jsxRuntime.jsxs(CaptionText, { loading: { isLoading: loading, width: "60px" }, children: [showDollar && jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: "$" }), value] })] }));
 const TokenMarketData = ({ volume24h, marketCap, totalSupply, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-row tw-items-center tw-justify-between", children: [jsxRuntime.jsx(MarketDataItem, { label: "24h volume", value: volume24h, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem, { label: "Market cap", value: marketCap, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem, { label: "Total supply", value: totalSupply, loading: loading })] }));
 const SwapButton = ({ label, color, icon, onClick, textColor, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", children: [jsxRuntime.jsx(IconButton, { icon: icon, className: "tw-text-grey-900", style: {
@@ -19817,13 +19850,13 @@ const ChartTimeframeSelector = ({ selectedTimeframe, onTimeframeChange, }) => {
                 onTimeframeChange(timeframe);
             } }, timeframe))) }));
 };
-const TokenDetailsView = ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, 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 = () => { }, onSwapFrom, onSwapTo, }) => {
     const [selectedTimeframe, setSelectedTimeframe] = React$1.useState(initialTimeframe);
     const handleTimeframeChange = (timeframe) => {
         setSelectedTimeframe(timeframe);
         onTimeframeChange(timeframe);
     };
-    return (jsxRuntime.jsx(Modal, { isOpen: isOpen, onBackdropClick: onClose, width: "extra-large", className: "tw-my-auto", children: jsxRuntime.jsxs(ModalContent, { className: "tw-flex tw-min-h-[631px] tw-flex-col !tw-bg-grey-900 tw-pt-squid-m", children: [jsxRuntime.jsxs("div", { className: "tw-px-squid-m", children: [jsxRuntime.jsx(TokenModalHeader, { token: token, chain: chain, loading: loading, onLikeToken: onLikeToken, onClose: onClose }), jsxRuntime.jsx(TokenInfo, { token: token, tokenPrice: tokenPrice, priceChange: priceChange, loading: loading })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-grow tw-flex-col tw-justify-between tw-text-center", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-h-full tw-grow tw-items-center tw-justify-center", children: loading ? jsxRuntime.jsx(Loader, {}) : jsxRuntime.jsx(Chart, { timeframe: selectedTimeframe }) }), jsxRuntime.jsx(ChartTimeframeSelector, { selectedTimeframe: selectedTimeframe, onTimeframeChange: handleTimeframeChange })] }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsxs("div", { className: "tw-gap-squid-sm tw-flex tw-flex-col tw-px-squid-m", children: [jsxRuntime.jsx(BalanceInfo, { balance: balance, balanceUSD: balanceUSD, token: token, loading: loading }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsx(TokenMarketData, { volume24h: volume24h, marketCap: marketCap, totalSupply: totalSupply, loading: loading })] }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsx(SwapButtons, { token: token, onSwapFrom: onSwapFrom, onSwapTo: onSwapTo })] })] }) }));
+    return (jsxRuntime.jsx(Modal, { animateOpacity: true, isOpen: isOpen, onBackdropClick: onClose, width: "extra-large", className: "tw-my-auto", children: jsxRuntime.jsxs(ModalContent, { className: "tw-flex tw-min-h-[631px] tw-flex-col !tw-bg-grey-900 tw-pt-squid-m", children: [jsxRuntime.jsxs("div", { className: "tw-px-squid-m", children: [jsxRuntime.jsx(TokenModalHeader, { token: token, chain: chain, onLikeToken: onLikeToken, isFavorite: isFavorite, onClose: onClose }), jsxRuntime.jsx(TokenInfo, { token: token, tokenPrice: tokenPrice, priceChange: priceChange, loading: loading })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-grow tw-flex-col tw-justify-between tw-text-center", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-h-full tw-grow tw-items-center tw-justify-center", children: loading ? jsxRuntime.jsx(Loader, {}) : jsxRuntime.jsx(Chart, { timeframe: selectedTimeframe }) }), jsxRuntime.jsx(ChartTimeframeSelector, { selectedTimeframe: selectedTimeframe, onTimeframeChange: handleTimeframeChange })] }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsxs("div", { className: "tw-gap-squid-sm tw-flex tw-flex-col tw-px-squid-m", children: [jsxRuntime.jsx(BalanceInfo, { balance: balance, balanceUSD: balanceUSD, token: token, loading: loading }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsx(TokenMarketData, { volume24h: volume24h, marketCap: marketCap, totalSupply: totalSupply, loading: loading })] }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsx(SwapButtons, { token: token, onSwapFrom: onSwapFrom, onSwapTo: onSwapTo })] })] }) }));
 };
 
 const WIDTH_SM = "69";
@@ -69581,6 +69614,7 @@ function ThemeProvider(_a) {
     return (jsxRuntime.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 })));
 }
 
+exports.ANIMATION_DURATIONS = ANIMATION_DURATIONS;
 exports.ActionLayout = ActionLayout;
 exports.ActionLineOutRow = ActionLineOutRow;
 exports.ActionProperties = ActionProperties;

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

@@ -1,5 +1,6 @@
-import { type PriceChange as TPriceChange } from "../../types/components";
-interface PriceChangeProps extends TPriceChange {
+interface PriceChangeProps {
+    variant?: "small" | "large";
+    value: string | number;
 }
-export declare function PriceChange({ sign, value }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
+export declare function PriceChange({ value: rawValue, variant, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,11 @@
 import { type ImageProps } from "../badges";
-export declare function ImageStack({ imageUrls, spacing, stackOnTop, ...imageProps }: {
+export declare function ImageStack({ imageUrls, spacing, stackOnTop, addExtraPadding, removeDuplicates, ...imageProps }: {
     imageUrls: string[];
     spacing: string;
     border?: ImageProps["border"];
     rounded?: ImageProps["rounded"];
     size?: ImageProps["size"];
     stackOnTop?: boolean;
+    addExtraPadding?: boolean;
+    removeDuplicates?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -18,15 +18,16 @@ interface TokenDetailsViewProps {
     onClose: () => void;
     token: Token;
     chain: Chain;
-    tokenPrice: number;
-    priceChange: number;
-    balance: number;
-    balanceUSD: number;
+    tokenPrice: string;
+    priceChange: string | number;
+    balance: string;
+    balanceUSD: string;
     volume24h: string;
     marketCap: string;
     totalSupply: string;
     loading: boolean;
     onLikeToken: () => void;
+    isFavorite?: boolean;
     Chart?: React.ComponentType<{
         timeframe: Timeframe;
     }>;
@@ -35,5 +36,5 @@ interface TokenDetailsViewProps {
     onSwapFrom: (token: Pick<Token, "address" | "chainId">) => void;
     onSwapTo: (token: Pick<Token, "address" | "chainId">) => void;
 }
-export declare const TokenDetailsView: ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, Chart, initialTimeframe, onTimeframeChange, onSwapFrom, onSwapTo, }: TokenDetailsViewProps) => import("react/jsx-runtime").JSX.Element;
+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;
 export {};

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

@@ -1,7 +1,6 @@
 /// <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>> {
     isSelected?: boolean;
     imageUrl: string;
     symbol: string;
@@ -9,12 +8,14 @@ export interface TokenGroupProps {
     chainImageUrl: string;
     balance?: string;
     balanceUsd?: string;
-    priceChange?: TPriceChange;
-    tokenItems?: TokenGroupProps[];
+    priceChange?: string | number;
+    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, variant, className, onChildClick, }: TokenGroupProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/core/index.d.ts

@@ -1,4 +1,4 @@
-export { MEDIA_QUERIES, CSS_VARS } from "./constants";
+export { MEDIA_QUERIES, CSS_VARS, ANIMATION_DURATIONS } from "./constants";
 export { darkTheme, lightTheme } from "./themes";
 export { baseTailwindConfig, spacing } from "./design-system";
 export { cn } from "./utils";

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

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Positive: Story;
 export declare const Negative: Story;
 export declare const Neutral: Story;
+export declare const LargeVariant: Story;

package/dist/cjs/types/stories/layout/ImageStack.stories.d.ts

@@ -4,5 +4,6 @@ declare const meta: Meta<typeof ImageStack>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const RemoveDuplicates: Story;
 export declare const NegativeSpacing: Story;
 export declare const LargeImages: Story;

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

@@ -10,4 +10,5 @@ export declare const HighBalance: Story;
 export declare const DifferentToken: Story;
 export declare const Closed: Story;
 export declare const Loading: Story;
+export declare const MarkedFavorite: Story;
 export declare const WithFakeChart: Story;

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

@@ -43,7 +43,3 @@ export type StatusFilter = "success" | "ongoing" | "error";
 export type AssetsButtonVariant = "primary" | "accent";
 export type PropertyListItemSize = "small" | "large";
 export type DropdownPosition = "top" | "bottom" | "center";
-export interface PriceChange {
-    value: string;
-    sign: "positive" | "negative" | "neutral";
-}