@0xsquid/ui 2.5.0 → 2.5.1-beta.1

package/dist/esm/index.js

@@ -2996,6 +2996,10 @@ const backgrounds = {
     rgba(180, 143, 233, 1) 100%
   )`,
 };
+const transitionDuration = Object.entries(ANIMATION_DURATIONS).reduce((finalObj, [key, value]) => {
+    finalObj[key.toLowerCase().replaceAll("_", "-")] = String(value);
+    return finalObj;
+}, {});
 const baseTailwindConfig = {
     prefix: "tw-",
     content: ["./src/**/*.{ts,tsx,js,jsx}", ".storybook/**/*.{ts,tsx,js,jsx}"],
@@ -3259,6 +3263,7 @@ const baseTailwindConfig = {
             backgroundImage: backgrounds,
             backdropBlur,
             colors: mapToCssVariables(themeKeysToCssVariables.color),
+            transitionDuration,
         },
     },
     plugins: [
@@ -3993,6 +3998,12 @@ function StarLinesIcon({ size = "20", className, }) {
 function QrCodeIcon({ size = "24", className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M14 14V16H16M18 14H20M20 18H18V20M14 19.99V20M16 10H18C19.1046 10 20 9.10457 20 8V6C20 4.89543 19.1046 4 18 4H16C14.8954 4 14 4.89543 14 6V8C14 9.10457 14.8954 10 16 10ZM6 20H8C9.10457 20 10 19.1046 10 18V16C10 14.8954 9.10457 14 8 14H6C4.89543 14 4 14.8954 4 16V18C4 19.1046 4.89543 20 6 20ZM6 10H8C9.10457 10 10 9.10457 10 8V6C10 4.89543 9.10457 4 8 4H6C4.89543 4 4 4.89543 4 6V8C4 9.10457 4.89543 10 6 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
+function ArrowExpandIcon({ className, size = "24", }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M18 8L22 12M22 12L18 16M22 12H2M6 8L2 12M2 12L6 16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function MoneyBagIcon({ className, size = "24", }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M9.5 8H14.5M9.5 8C9.5 8 3.99996 11 4 16C4.00003 20.0207 7.97931 21 12 21C16.0207 21 20 20.0207 20 16C20 11 14.5 8 14.5 8M9.5 8L8.55725 5.48601C8.23089 4.6157 8.56249 3.64123 9.45158 3.37016C10.1074 3.1702 10.9686 3 12 3C13.0314 3 13.8926 3.1702 14.5484 3.37016C15.4375 3.64123 15.7691 4.6157 15.4427 5.48601L14.5 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 
 function EmptyHeartIcon({ className }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M21 10C21 15.75 12.75 20 12 20C11.25 20 3 15.75 3 10C3 6 5.5 4 8 4C10.5 4 12 5.5 12 5.5C12 5.5 13.5 4 16 4C18.5 4 21 6 21 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }));
@@ -4333,21 +4344,19 @@ const extraPaddingMap = {
     "outline-lg": "3px",
 };
 function ImageStack(_a) {
-    var { imageUrls, spacing, stackOnTop = true, addExtraPadding, removeDuplicates = false } = _a, imageProps = __rest$1(_a, ["imageUrls", "spacing", "stackOnTop", "addExtraPadding", "removeDuplicates"]);
+    var { imageUrls, spacing, stackOnTop = true, addExtraPadding, removeDuplicates = false, containerProps } = _a, imageProps = __rest$1(_a, ["imageUrls", "spacing", "stackOnTop", "addExtraPadding", "removeDuplicates", "containerProps"]);
     const imagesToRender = removeDuplicates ? [...new Set(imageUrls)] : imageUrls;
-    return (jsx("div", { style: {
+    return (jsx("div", Object.assign({}, containerProps, { style: Object.assign(Object.assign({}, containerProps === null || containerProps === void 0 ? void 0 : containerProps.style), { 
             // @ts-expect-error Custom CSS property
-            "--image-stack-spacing": spacing,
-            padding: addExtraPadding && imageProps.border
+            "--image-stack-spacing": spacing, padding: addExtraPadding && imageProps.border
                 ? extraPaddingMap[imageProps.border]
-                : undefined,
-        }, className: "tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", children: imagesToRender.map((url, index, self) => (jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
+                : undefined }), className: cn("tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: imagesToRender.map((url, index, self) => (jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
                 ? {
                     style: {
                         zIndex: self.length - index,
                     },
                 }
-                : undefined }, imageProps), index))) }));
+                : undefined }, imageProps), index))) })));
 }
 
 function Chip(_a) {
@@ -19472,7 +19481,7 @@ function MenuItem({ label, imageUrl, icon }) {
     return (jsxs("li", { className: "tw-mx-squid-xxs tw-inline-flex tw-max-h-list-item-small tw-items-center tw-justify-start tw-gap-squid-xxs tw-rounded-squid-xs tw-bg-grey-900 tw-py-squid-xxs tw-pl-squid-xxs tw-pr-squid-xl tw-text-grey-300", children: [jsx("div", { className: "tw-h-squid-m tw-w-squid-m", children: imageUrl ? (jsx("img", { className: "tw-h-full tw-w-full tw-rounded-squid-xxs", src: imageUrl, alt: "" })) : icon ? (icon) : null }), jsx(CaptionText, { children: label })] }));
 }
 
-const containerVariantClassNameMap = {
+const containerPaddingClassNameMap = {
     small: "tw-px-squid-xs",
     large: "tw-px-squid-0",
 };
@@ -19484,9 +19493,15 @@ function SmallBodyText(props) {
     return jsx(BodyText, Object.assign({ size: "small" }, props));
 }
 function PropertyListItem(_a) {
-    var { isLoading = false, label, detail, icon, className, variant = "small", showGradientBg = true, labelClassName, iconClassName, detailClassName, tooltip } = _a, props = __rest$1(_a, ["isLoading", "label", "detail", "icon", "className", "variant", "showGradientBg", "labelClassName", "iconClassName", "detailClassName", "tooltip"]);
+    var { isLoading = false, label, detail, icon, className, variant = "small", showGradientBg = true, labelClassName, iconClassName, detailClassName, tooltip, collapsibleContent, addExtraPadding = true } = _a, props = __rest$1(_a, ["isLoading", "label", "detail", "icon", "className", "variant", "showGradientBg", "labelClassName", "iconClassName", "detailClassName", "tooltip", "collapsibleContent", "addExtraPadding"]);
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const handleToggleCollapsed = useCallback(() => {
+        setIsCollapsed((prev) => !prev);
+    }, []);
     const Text = variant === "small" ? CaptionText : SmallBodyText;
-    return (jsx("li", Object.assign({}, props, { className: cn("tw-flex tw-w-full tw-gap-squid-xs tw-rounded-squid-xs tw-text-grey-300", showGradientBg && "squid-property-row-bg", containerVariantClassNameMap[variant], className), children: jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs", childrenVariantClassNameMap[variant]), children: [jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsx(TextSkeleton, { isLoading: isLoading, children: label }), !!tooltip && (jsx(Tooltip, Object.assign({}, tooltip, { children: jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsx(TextSkeleton, { isLoading: isLoading, children: detail }) })] }) })));
+    const isCollapsible = !!collapsibleContent;
+    const ContentWrapperTag = isCollapsible ? "button" : "div";
+    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", addExtraPadding && containerPaddingClassNameMap[variant], className), children: jsxs(ContentWrapperTag, { onClick: isCollapsible ? handleToggleCollapsed : undefined, className: "tw-w-full tw-rounded-squid-xs", children: [jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs", childrenVariantClassNameMap[variant]), children: [jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsx(TextSkeleton, { isLoading: isLoading, children: label }), !!tooltip && (jsx(Tooltip, Object.assign({}, tooltip, { children: jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsx(TextSkeleton, { isLoading: isLoading, children: detail }) }), isCollapsible && (jsx(ChevronLargeRightIcon, { className: cn("tw-text-grey-600 tw-duration-generic", !isCollapsed && "tw-rotate-90"), size: "16" }))] }), isCollapsible && (jsx(Collapse, { collapsed: isCollapsed, children: collapsibleContent }))] }) })));
 }
 
 function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
@@ -27782,22 +27797,6 @@ function Tab(_a) {
         }, children: [jsx(BodyText, { size: size, children: label }), !props.disabled && (jsx("span", { className: cn("tw-absolute tw-w-[calc(100%+20px)] tw-rounded-squid-s tw-p-squid-xs group-hover/tab-button:tw-bg-material-light-thin", size === "small" ? "tw-h-squid-l" : "tw-h-squid-xl") }))] })));
 }
 
-function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }) {
-    const matchesMobileLg = useMediaQuery(MEDIA_QUERIES.MOBILE_LG.media);
-    return (jsxs(ProductCard, { children: [jsx(NavigationBar, { displayBackButton: true, subtitle: "Select a token to receive" }), jsx("div", { className: "tw-max-h-[60px] tw-px-squid-m tw-py-squid-xs", children: jsx(Input, {}) }), jsx(BorderedContainer, { className: "!tw-grid tw-overflow-hidden", children: jsxs("div", { className: cn("tw-grid tw-overflow-hidden", matchesMobileLg
-                        ? "tw-grid-cols-[180px_299px]"
-                        : "tw-grid-cols-[70px_1fr]"), children: [jsxs("div", { style: {
-                                scrollbarWidth: "none",
-                            }, className: cn("tw-flex tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden", matchesMobileLg
-                                ? "tw-w-[180px] tw-max-w-[180px] tw-pt-0"
-                                : "tw-w-[70px] tw-max-w-[70px] tw-pt-squid-xs"), children: [jsx(SectionTitle, { title: "Chains", icon: jsx(ChainLink, {}), className: cn(matchesMobileLg ? "tw-flex" : "tw-hidden") }), jsxs(List, { children: [jsx(ListItem, { size: "small", mainIcon: jsx("span", { className: "tw-flex tw-h-squid-l tw-w-squid-l tw-flex-1 tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-[#FBFBFD]", children: jsx(ChainLink, { size: "24" }) }), itemTitle: "All Chains", compactOnMobile: true, onClick: () => { } }), chains.map((item) => (jsx(ListItem, { size: "small", mainImageUrl: item.iconUrl, itemTitle: item.name, detail: item.name, compactOnMobile: true, onClick: () => { } }, item.name)))] })] }), jsxs("div", { style: {
-                                scrollbarWidth: "none",
-                            }, className: cn("tw-flex tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden", matchesMobileLg ? "tw-w-[299px] tw-max-w-[299px]" : "tw-w-full"), children: [jsx(SectionTitle, { title: "Favorite tokens", icon: jsx(HeartSmallIcon, {}) }), jsx(List, { children: favoriteTokens.map((favToken) => (jsx(ListItem, { size: "large", mainImageUrl: favToken.iconUrl, secondaryImageUrl: favToken.iconUrl, itemTitle: favToken.name, subtitle: favToken.symbol, rounded: "full", onClick: () => { }, dropdownMenuContent: jsx(Fragment, { children: jsx(DropdownMenuItem, { label: "Add to favorites", icon: jsx(FilledHeartIcon, {}) }) }) }, favToken.name))) }), jsx(SectionTitle, { title: "Your tokens loading", icon: jsx(CoinsIcon, {}) }), jsx(List, { children: userTokens.map((userToken) => (jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), rounded: "full", onClick: () => { }, loading: { subtitle: userToken.symbol } }, userToken.name))) }), jsx(SectionTitle, { title: "Your tokens & balance", icon: jsx(CoinsIcon, {}) }), jsx(List, { children: userTokens.map((userToken) => (jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), rounded: "full", onClick: () => { } }, userToken.name))) }), jsx(SectionTitle, { title: "Popular tokens", icon: jsx(SparkleIcon, {}) }), jsx(List, { children: popularTokens.map((popToken) => (jsx(ListItem, { size: "large", mainImageUrl: popToken.iconUrl, secondaryImageUrl: popToken.iconUrl, itemTitle: popToken.name, subtitle: popToken.symbol, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), rounded: "full", onClick: () => { } }, popToken.name))) })] })] }) })] }));
-}
-const List = ({ children }) => {
-    return (jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
-};
-
 function useCountdown(initialSeconds) {
     const [secondsLeft, setSecondsLeft] = useState(initialSeconds);
     useEffect(() => {
@@ -27820,7 +27819,7 @@ function DepositAddressView({ isOpen = true, fromToken, toToken, handleClose, fr
                 }, borderType: "outline", children: [jsxs("div", { className: "tw-relative tw-flex tw-h-[160px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-modal tw-rounded-tr-modal tw-bg-grey-900 tw-py-squid-s tw-text-material-light-thin", style: {
                             // box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
                             boxShadow: "0 1px 0 currentColor",
-                        }, children: [jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsx(Button$1, { size: "md", variant: "secondary", label: "Copy" }) }), headerContent] }), jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", shadow: true, size: "xlarge" }) }), jsx(TxProgressViewHeader, { title: title, description: description, isWarning: true }), jsxs("ul", { className: "tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-start tw-gap-squid-xxs tw-overflow-auto tw-rounded-squid-l tw-pb-squid-s tw-scrollbar-hidden", children: [jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Deposit address", detail: jsx(HashLink, { className: "tw-text-royal-500", formattedHash: depositAddressFormatted, hash: depositAddress, showCopyButton: true, copyIconSize: "24" }), tooltip: (tooltips === null || tooltips === void 0 ? void 0 : tooltips.depositAddress)
+                        }, children: [jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsx(Button$1, { size: "md", variant: "secondary", label: "Copy" }) }), headerContent] }), jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", shadow: true, size: "xlarge" }) }), jsx(TxProgressViewHeader, { title: title, description: description, isWarning: true }), jsxs("ul", { className: "squid-property-gradient-bg-even-container tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-start tw-gap-squid-xxs tw-overflow-auto tw-rounded-squid-l tw-pb-squid-s tw-scrollbar-hidden", children: [jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Deposit address", detail: jsx(HashLink, { className: "tw-text-royal-500", formattedHash: depositAddressFormatted, hash: depositAddress, showCopyButton: true, copyIconSize: "24" }), tooltip: (tooltips === null || tooltips === void 0 ? void 0 : tooltips.depositAddress)
                                     ? {
                                         tooltipContent: tooltips.depositAddress,
                                         tooltipWidth: "max",
@@ -27837,164 +27836,6 @@ function TimeRemaining({ timeRemainingSeconds, tooltipContent, }) {
             : undefined }));
 }
 
-function MainView({ isLoading = false }) {
-    return (jsxs(ProductCard, { children: [jsx(NavigationBar, { isLoading: isLoading, title: "Swap", actions: [
-                    {
-                        labelOrIcon: jsx(ClockOutlineIcon, {}),
-                        id: "history",
-                        tooltip: {
-                            tooltipContent: "Swap history",
-                        },
-                    },
-                    {
-                        labelOrIcon: jsx(SettingsGearIcon, {}),
-                        id: "settings",
-                        tooltip: {
-                            tooltipContent: "Swap preferences",
-                        },
-                    },
-                ] }), jsx(SwapConfiguration, { isLoading: isLoading, direction: "from", chain: {
-                    iconUrl: "https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/blast.svg",
-                    bgColor: "#fcfc03",
-                }, token: {
-                    iconUrl: "https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/eth.svg",
-                    symbol: "ETH",
-                    bgColor: "#627eea",
-                    textColor: "#fff",
-                    decimals: 18,
-                }, priceImpactPercentage: "0.3", balance: "4.57", walletButton: {
-                    address: "so-so.eth",
-                    onClick: () => { },
-                    tooltip: {
-                        tooltipContent: "Connect wallet",
-                    },
-                }, assetsButton: {
-                    tooltip: {
-                        tooltipContent: "Select token",
-                    },
-                }, balanceButton: {
-                    tooltip: {
-                        tooltipContent: "Max balance",
-                    },
-                }, inputModeButton: {
-                    usdModeTooltip: {
-                        tooltipContent: "Enter token amount",
-                    },
-                    tokenModeTooltip: {
-                        tooltipContent: "Enter in USD",
-                    },
-                } }), jsx(DetailsToolbar, { flipButton: {
-                    isDisabled: true,
-                    tooltip: {
-                        tooltipContent: "Not enough USDC to flip the swap",
-                        displayDelayMs: 0,
-                    },
-                }, stopsButton: {
-                    providers: [
-                        {
-                            logoUrl: "https://raw.githubusercontent.com/0xsquid/assets/main/images/png128/providers/uniswap.png",
-                            key: "uniswap",
-                        },
-                        {
-                            logoUrl: "https://raw.githubusercontent.com/0xsquid/assets/main/images/png128/providers/axelar.png",
-                            key: "axelar",
-                        },
-                    ],
-                    tooltip: {
-                        tooltipContent: "Open route preview",
-                        displayDelayMs: 700,
-                    },
-                }, feeButton: {
-                    feeInUsd: "0.4",
-                    onClick: () => { },
-                    tooltip: {
-                        tooltipContent: "View fees",
-                    },
-                }, isLoading: isLoading, isEmpty: isLoading }), jsx(SwapConfiguration, { isLoading: isLoading, direction: "to", chain: {
-                    iconUrl: "https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/avax.svg",
-                    bgColor: "#e84142",
-                }, token: {
-                    iconUrl: "https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/usdc.svg",
-                    symbol: "USDC",
-                    bgColor: "#2775ca",
-                    textColor: "#fff",
-                    decimals: 6,
-                }, priceImpactPercentage: isLoading ? undefined : "7.2", balance: "2854", walletButton: {
-                    address: "so-so.eth",
-                    onClick: () => { },
-                    tooltip: {
-                        tooltipContent: "Connect wallet",
-                    },
-                }, amount: isLoading ? undefined : "100", assetsButton: {
-                    tooltip: {
-                        tooltipContent: "Select token",
-                    },
-                }, balanceButton: {
-                    tooltip: {
-                        tooltipContent: "Max balance",
-                    },
-                }, inputModeButton: {
-                    usdModeTooltip: {
-                        tooltipContent: "Enter token amount",
-                    },
-                    tokenModeTooltip: {
-                        tooltipContent: "Enter in USD",
-                    },
-                } }), jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsx(Button$1, { variant: isLoading ? "tertiary" : "primary", size: "lg", label: "Swap", isLoading: isLoading }) })] }));
-}
-
-function RecipientView({ type }) {
-    return (jsxs(ProductCard, { children: [jsx(NavigationBar, { title: type === "paymentMethod" ? "Pay" : "Receive", displayBackButton: true }), jsx(BorderedContainer, { children: jsx(FlexContainer, { children: type === "paymentMethod" || type === "recipientEmpty" ? (jsxs(Fragment, { children: [jsx(SectionTitle, { title: "Your wallet", icon: jsx(PunkIcon, {}) }), jsx(ListItem, { itemTitle: "so-so.eth", subtitle: "0x2276\u2026F3c56", mainImageUrl: "/assets/images/avatar.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { }, detail: "Connected" }), jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsx(Button$1, { size: "md", variant: "primary", label: "Change wallet", className: "tw-w-full", containerClassName: "tw-w-full" }) })] })) : type === "recipientTypingEns" ? (jsxs(Fragment, { children: [jsx(SearchAddress, { type: type }), jsx(ListItem, { itemTitle: "souljabags.eth", subtitle: "0x25c9\u202623d5", mainImageUrl: "/assets/images/punks.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsx(ListItem, { itemTitle: "souljaboy.eth", subtitle: "0x0ec8\u202604c1", mainIcon: jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsx(PunkIcon, { size: "30" }) }), size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } })] })) : type === "recipientTypingAddress" ? (jsx(SearchAddress, { type: type })) : null }) }), type === "paymentMethod" ? (jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxs(FlexContainer, { children: [jsx(SectionTitle, { title: "Centralized Exchange", icon: type === "paymentMethod" ? jsx(BankIcon, {}) : jsx(WalletIcon, {}) }), jsx(DepositSection, {})] }) })) : type === "recipientEmpty" ? (jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxs(FlexContainer, { children: [jsx(SearchAddress, { type: type }), jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch tw-px-squid-xxl tw-py-squid-xl", children: jsx(CaptionText, { className: "tw-max-w-[200px] tw-text-center tw-text-grey-500", children: "Wallets you add and swap to will appear here" }) })] }) })) : type === "recipientTypingEns" || type === "recipientTypingAddress" ? (jsx("div", {})) : null, " "] }));
-}
-const FlexContainer = ({ children }) => (jsx("div", { className: "tw-flex tw-h-full tw-flex-1 tw-flex-col tw-items-center tw-gap-squid-xxs tw-px-0 mobile-lg:tw-px-squid-xs", children: children }));
-const DepositSection = () => {
-    return (jsxs(Fragment, { children: [jsx(ListItem, { itemTitle: "Deposit", mainIcon: jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsx(CoinsAddIcon, {}) }), className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsx(CaptionText, { className: "tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: "In case of swapping from a centralized exchange, you can send your tokens to a temporary deposit account that will handle the swap instead." }), jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsx(Button$1, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-w-full", containerClassName: "tw-w-full" }) })] }));
-};
-const SearchAddress = ({ type }) => {
-    return (jsxs(Fragment, { children: [jsx(SectionTitle, { title: "Custom wallet", icon: jsx(WalletIcon, {}), accessory: type === "recipientTypingEns"
-                    ? null
-                    : "CEX addresses are not supported" }), jsxs("nav", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs tw-px-squid-m tw-py-squid-xxs", children: [type === "recipientEmpty" ? (jsx(Input, { className: "tw-flex-1", placeholder: "Address on Blast", actionButtonProps: {
-                            label: "Paste",
-                            variant: "tertiary",
-                        }, icon: jsx("img", { src: "/assets/images/blast.jpg", className: "tw-rounded-squid-xxs" }) })) : type === "recipientTypingEns" ? (jsx(Input, { className: "tw-flex-1", placeholder: "Address on Blast", value: "souljab", actionButtonProps: {
-                            label: "Paste",
-                            variant: "tertiary",
-                        }, icon: jsx(Loader, {}) })) : type === "recipientTypingAddress" ? (jsx(Input, { className: "tw-flex-1", placeholder: "Address on Blast", value: "0xA7D7079b0FEaD91F3e65f86E8915Cb59c1a4C664", actionButtonProps: {
-                            label: "Paste",
-                            variant: "tertiary",
-                        }, icon: jsx("img", { src: "/assets/images/blast.jpg", className: "tw-rounded-squid-xxs" }) })) : null, jsx(Button$1, { size: "md", variant: "primary", icon: jsx(ArrowRightIcon, {}), disabled: type === "recipientEmpty" })] })] }));
-};
-
-const ROUTING_TOKEN_SUPPORT_ARTICLE = "https://support.squidrouter.com/squid-overview/liquidity-pools/what-is-a-routing-token";
-
-function SwapDetailsView({ isLoading, canToggleBoostMode = true, displayBoostMode = false, }) {
-    const [isModalOpen, setIsModalOpen] = useState(true);
-    return (jsx(Fragment, { children: jsxs(Modal, { isOpen: isModalOpen, onBackdropClick: () => {
-                setIsModalOpen(false);
-            }, children: [jsxs(ModalContent, { children: [displayBoostMode && (jsx(Settings, { canToggleBoostMode: canToggleBoostMode })), jsxs("ul", { className: "tw-flex tw-flex-col tw-items-start tw-gap-squid-xxs tw-self-stretch tw-py-squid-m", children: [jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowBottomTopIcon, {}), label: "Exchange rate", detail: "1 ETH = 4,031.05 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowWallDownIcon, {}), label: "Receive minimum", detail: "750.5 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(GasIcon, {}), label: "Cross-chain gas fees", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.02534 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$9.92" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReorderIcon, {}), label: "Expected gas refund", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "-0.06336 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "-$2.48" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReceiptBillIcon, {}), label: "Total fee", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.0177 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$7.43" })] }) })] }), jsx("span", { children: jsx(InfoBox, { icon: jsx(SnapIcon, {}), title: "Squid's price commitment", description: jsx(Fragment, { children: jsxs(CaptionText, { className: "tw-text-grey-500", children: ["In case of market prices fluctuating significantly, your transaction may revert and you will receive one of Squid's routing tokens on the destination chain instead.", " ", jsx("a", { className: "tw-text-grey-300", href: ROUTING_TOKEN_SUPPORT_ARTICLE, target: "_blank", rel: "noreferrer", children: "Learn more" })] }) }) }) })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Close", onClick: () => {
-                        setIsModalOpen(false);
-                    } })] }) }));
-}
-function Settings({ canToggleBoostMode }) {
-    return (jsx("div", { className: "tw-flex tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs tw-self-stretch tw-py-squid-xxs", children: jsx(SettingsItem, { icon: jsx(LightningIcon, { className: "tw-text-grey-500" }), label: "Boost", control: {
-                type: "switch",
-                checked: false,
-                disabled: !canToggleBoostMode,
-                onChange: console.log,
-                tooltip: canToggleBoostMode
-                    ? undefined
-                    : {
-                        tooltipWidth: "max",
-                        containerClassName: "tw-h-[30px]",
-                        tooltipContent: "Boost not supported for this route",
-                    },
-            }, transparent: true, helpTooltip: {
-                tooltipWidth: "max",
-                tooltipClassName: "tw-left-[15px]",
-                tooltipContent: (jsxs(Fragment, { children: [jsx(CaptionText, { children: "Boost by Squid reduces transaction times across chains down to" }), " ", jsx(CaptionText, { className: "tw-text-status-positive", children: "5-30 seconds" }), jsx(CaptionText, { children: ". It\u2019s currently only available for swaps below a value of" }), " ", jsx(CaptionText, { className: "tw-text-status-positive", children: "$20,000 USD" }), "."] })),
-            } }) }));
-}
-
 var v$6 = "5.10.0";
 var fr$6 = 25;
 var ip$6 = 0;
@@ -69409,7 +69250,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 logoURI: toToken.logoUrl,
-                            } })) }), jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxs("ul", { className: "tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-pb-squid-s tw-pt-squid-xs mobile-xs-height:tw-h-[195px] mobile-sm-height:tw-py-squid-s", children: [jsx(PropertyListItem, { icon: jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) }) }), jsx(PropertyListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsx(Transfer, { from: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsx(PropertyListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
+                            } })) }), jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxs("ul", { className: "squid-property-gradient-bg-odd-container tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-pb-squid-s tw-pt-squid-xs mobile-xs-height:tw-h-[195px] mobile-sm-height:tw-py-squid-s", children: [jsx(PropertyListItem, { icon: jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) }) }), jsx(PropertyListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsx(Transfer, { from: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsx(PropertyListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
                     stopTimer();
                 }, onTxStart: () => {
                     startTimer();
@@ -69499,10 +69340,6 @@ function PropertiesSkeleton() {
     return (jsx(PropertiesLayout, { children: Array.from({ length: 5 }, (_, i) => (jsx(PropertyListItem, { variant: "large", isLoading: true }, i))) }));
 }
 
-function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, }) {
-    return (jsx(TransactionViewLayout, { header: jsx(BridgeHeader, { tokenLogoURI: token.logoURI, chainLogoURI: toChain.logoURI, title: title, hash: hash, url: url, status: status }), properties: jsx(BridgeProperties, { amount: amount, token: token, fromChain: fromChain, toChain: toChain, wallet: address, boosted: boosted, timeToComplete: timeToComplete }), actions: actions, fees: fees }));
-}
-
 function BuyNFTTransactionView({ title, hash, status, url, imageURI, collection, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, tokenId, nftType, actions, fees, }) {
     return (jsx(TransactionViewLayout, { header: jsx(BuyNFTHeader, { imageUrl: imageURI, title: title, hash: hash, url: url, status: status }), properties: jsx(BuyNFTProperties, { title: title, imageURI: imageURI, collection: collection, price: price, token: token, marketplace: marketplace, fromChain: fromChain, toChain: toChain, fromAddress: fromAddress, toAddress: toAddress, boosted: boosted, timeToComplete: timeToComplete, tokenId: tokenId, nftType: nftType }), actions: actions, fees: fees }));
 }
@@ -69515,6 +69352,10 @@ function SwapTransactionView({ title, hash, status, url, fromAmount, fromToken,
     return (jsx(TransactionViewLayout, { header: jsx(SwapHeader, { fromToken: fromToken, toToken: toToken, title: title, hash: hash, url: url, status: status }), properties: jsx(SwapProperties, { fromAmount: fromAmount, fromToken: fromToken, toAmount: toAmount, toToken: toToken, fromChain: fromChain, toChain: toChain, fromAddress: fromAddress, toAddress: toAddress, exchangeRate: exchangeRate, boosted: boosted, timeToComplete: timeToComplete }), actions: actions, fees: fees }));
 }
 
+function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, }) {
+    return (jsx(TransactionViewLayout, { header: jsx(BridgeHeader, { tokenLogoURI: token.logoURI, chainLogoURI: toChain.logoURI, title: title, hash: hash, url: url, status: status }), properties: jsx(BridgeProperties, { amount: amount, token: token, fromChain: fromChain, toChain: toChain, wallet: address, boosted: boosted, timeToComplete: timeToComplete }), actions: actions, fees: fees }));
+}
+
 const componentMap = {
     swap: SwapTransactionView,
     buy_nft: BuyNFTTransactionView,
@@ -69526,10 +69367,6 @@ function TransactionView({ type, props }) {
     return jsx(Component, Object.assign({}, props));
 }
 
-function WalletsView() {
-    return (jsxs(Modal, { maxHeight: true, children: [jsxs(ModalContent, { addGap: true, children: [jsx("div", { className: "tw-px-squid-xs tw-py-squid-xxs", children: jsx(Input, { placeholder: "Select your wallet" }) }), jsxs("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-py-squid-xxs", children: [jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", detail: "Installed", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", detail: "Installed", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), jsx("span", { className: "tw-text-material-light-thin", children: jsx(ModalContentDivider, {}) }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", subtitle: "Connect with an Injected Wallet", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Browser Extension" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), " ", jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), " ", jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), " ", jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" })] })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel" })] }));
-}
-
 var isMergeableObject = function isMergeableObject(value) {
 	return isNonNullObject(value)
 		&& !isSpecial(value)
@@ -69866,4 +69703,4 @@ function ThemeProvider(_a) {
     return (jsx("div", Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), parsedStyle), "data-squid-theme-type": themeType, className: cn("tw-group tw-relative tw-flex tw-font-squid-main tw-h-d-screen mobile-lg:tw-h-auto", props.className), children: children })));
 }
 
-export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, ImageSparkle, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, adjustColorForContrast, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocial, adjustColorForContrast, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };

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

@@ -105,3 +105,11 @@ export declare function QrCodeIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowExpandIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MoneyBagIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ImageProps } from "../badges";
 interface ImageStackProps extends ImageProps {
     imageUrls: string[];
@@ -8,6 +9,7 @@ interface ImageStackProps extends ImageProps {
     stackOnTop?: boolean;
     addExtraPadding?: boolean;
     removeDuplicates?: boolean;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
 }
-export declare function ImageStack({ imageUrls, spacing, stackOnTop, addExtraPadding, removeDuplicates, ...imageProps }: ImageStackProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageStack({ imageUrls, spacing, stackOnTop, addExtraPadding, removeDuplicates, containerProps, ...imageProps }: ImageStackProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,6 +10,7 @@ export * from "./DetailsToolbar";
 export * from "./DropdownMenu";
 export * from "./ErrorMessage";
 export * from "./HashLink";
+export * from "./ImageStack";
 export * from "./InfoBox";
 export * from "./Join";
 export * from "./Menu";

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

@@ -12,5 +12,7 @@ export interface PropertyListItemProps extends ComponentProps<"li"> {
     iconClassName?: string;
     detailClassName?: string;
     tooltip?: Omit<TooltipProps, "children">;
+    collapsibleContent?: React.ReactNode;
+    addExtraPadding?: boolean;
 }
-export declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, showGradientBg, labelClassName, iconClassName, detailClassName, tooltip, ...props }: PropertyListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, showGradientBg, labelClassName, iconClassName, detailClassName, tooltip, collapsibleContent, addExtraPadding, ...props }: PropertyListItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,3 @@
-export * from "./AssetsView";
 export * from "./DepositAddressView";
-export * from "./MainView";
-export * from "./RecipientView";
-export * from "./SwapDetailsView";
 export * from "./SwapProgressView";
-export * from "./TransactionView/BaseTransactionViewProps";
-export * from "./TransactionView/BridgeTransactionView";
-export * from "./TransactionView/BuyNFTTransactionView";
-export * from "./TransactionView/InteractionTransactionView";
-export * from "./TransactionView/SwapTransactionView";
-export * from "./TransactionView/TransactionView";
-export * from "./TransactionView/TransactionViewLayout";
-export * from "./WalletsView";
+export * from "./TransactionView";

package/dist/esm/types/stories/lists/PropertyListItem.stories.d.ts

@@ -9,3 +9,4 @@ export declare const CustomColors: Story;
 export declare const TextDetail: Story;
 export declare const CustomDetail: Story;
 export declare const Loading: Story;
+export declare const CollapsibleContent: Story;