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

package/dist/cjs/index.js

@@ -3016,6 +3016,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}"],
@@ -3279,6 +3283,7 @@ const baseTailwindConfig = {
             backgroundImage: backgrounds,
             backdropBlur,
             colors: mapToCssVariables(themeKeysToCssVariables.color),
+            transitionDuration,
         },
     },
     plugins: [
@@ -4013,6 +4018,12 @@ function StarLinesIcon({ size = "20", className, }) {
 function QrCodeIcon({ size = "24", className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M14 14V16H16M18 14H20M20 18H18V20M14 19.99V20M16 10H18C19.1046 10 20 9.10457 20 8V6C20 4.89543 19.1046 4 18 4H16C14.8954 4 14 4.89543 14 6V8C14 9.10457 14.8954 10 16 10ZM6 20H8C9.10457 20 10 19.1046 10 18V16C10 14.8954 9.10457 14 8 14H6C4.89543 14 4 14.8954 4 16V18C4 19.1046 4.89543 20 6 20ZM6 10H8C9.10457 10 10 9.10457 10 8V6C10 4.89543 9.10457 4 8 4H6C4.89543 4 4 4.89543 4 6V8C4 9.10457 4.89543 10 6 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
+function ArrowExpandIcon({ className, size = "24", }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M18 8L22 12M22 12L18 16M22 12H2M6 8L2 12M2 12L6 16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function MoneyBagIcon({ className, size = "24", }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M9.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 (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M21 10C21 15.75 12.75 20 12 20C11.25 20 3 15.75 3 10C3 6 5.5 4 8 4C10.5 4 12 5.5 12 5.5C12 5.5 13.5 4 16 4C18.5 4 21 6 21 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }));
@@ -4353,21 +4364,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 (jsxRuntime.jsx("div", { style: {
+    return (jsxRuntime.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) => (jsxRuntime.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) => (jsxRuntime.jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
                 ? {
                     style: {
                         zIndex: self.length - index,
                     },
                 }
-                : undefined }, imageProps), index))) }));
+                : undefined }, imageProps), index))) })));
 }
 
 function Chip(_a) {
@@ -19492,7 +19501,7 @@ function MenuItem({ label, imageUrl, icon }) {
     return (jsxRuntime.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: [jsxRuntime.jsx("div", { className: "tw-h-squid-m tw-w-squid-m", children: imageUrl ? (jsxRuntime.jsx("img", { className: "tw-h-full tw-w-full tw-rounded-squid-xxs", src: imageUrl, alt: "" })) : icon ? (icon) : null }), jsxRuntime.jsx(CaptionText, { children: label })] }));
 }
 
-const containerVariantClassNameMap = {
+const containerPaddingClassNameMap = {
     small: "tw-px-squid-xs",
     large: "tw-px-squid-0",
 };
@@ -19504,9 +19513,15 @@ function SmallBodyText(props) {
     return jsxRuntime.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] = React$1.useState(true);
+    const handleToggleCollapsed = React$1.useCallback(() => {
+        setIsCollapsed((prev) => !prev);
+    }, []);
     const Text = variant === "small" ? CaptionText : SmallBodyText;
-    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn("tw-flex tw-w-full tw-gap-squid-xs tw-rounded-squid-xs tw-text-grey-300", showGradientBg && "squid-property-row-bg", containerVariantClassNameMap[variant], className), children: jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs", childrenVariantClassNameMap[variant]), children: [jsxRuntime.jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxRuntime.jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: label }), !!tooltip && (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { children: jsxRuntime.jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsxRuntime.jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: detail }) })] }) })));
+    const isCollapsible = !!collapsibleContent;
+    const ContentWrapperTag = isCollapsible ? "button" : "div";
+    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn("tw-flex tw-w-full tw-gap-squid-xs tw-rounded-squid-xs tw-text-grey-300", showGradientBg && "squid-property-row-bg", addExtraPadding && containerPaddingClassNameMap[variant], className), children: jsxRuntime.jsxs(ContentWrapperTag, { onClick: isCollapsible ? handleToggleCollapsed : undefined, className: "tw-w-full tw-rounded-squid-xs", children: [jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs", childrenVariantClassNameMap[variant]), children: [jsxRuntime.jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxRuntime.jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: label }), !!tooltip && (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { children: jsxRuntime.jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsxRuntime.jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: detail }) }), isCollapsible && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: cn("tw-text-grey-600 tw-duration-generic", !isCollapsed && "tw-rotate-90"), size: "16" }))] }), isCollapsible && (jsxRuntime.jsx(Collapse, { collapsed: isCollapsed, children: collapsibleContent }))] }) })));
 }
 
 function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
@@ -27802,22 +27817,6 @@ function Tab(_a) {
         }, children: [jsxRuntime.jsx(BodyText, { size: size, children: label }), !props.disabled && (jsxRuntime.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 (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { displayBackButton: true, subtitle: "Select a token to receive" }), jsxRuntime.jsx("div", { className: "tw-max-h-[60px] tw-px-squid-m tw-py-squid-xs", children: jsxRuntime.jsx(Input, {}) }), jsxRuntime.jsx(BorderedContainer, { className: "!tw-grid tw-overflow-hidden", children: jsxRuntime.jsxs("div", { className: cn("tw-grid tw-overflow-hidden", matchesMobileLg
-                        ? "tw-grid-cols-[180px_299px]"
-                        : "tw-grid-cols-[70px_1fr]"), children: [jsxRuntime.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: [jsxRuntime.jsx(SectionTitle, { title: "Chains", icon: jsxRuntime.jsx(ChainLink, {}), className: cn(matchesMobileLg ? "tw-flex" : "tw-hidden") }), jsxRuntime.jsxs(List, { children: [jsxRuntime.jsx(ListItem, { size: "small", mainIcon: jsxRuntime.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: jsxRuntime.jsx(ChainLink, { size: "24" }) }), itemTitle: "All Chains", compactOnMobile: true, onClick: () => { } }), chains.map((item) => (jsxRuntime.jsx(ListItem, { size: "small", mainImageUrl: item.iconUrl, itemTitle: item.name, detail: item.name, compactOnMobile: true, onClick: () => { } }, item.name)))] })] }), jsxRuntime.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: [jsxRuntime.jsx(SectionTitle, { title: "Favorite tokens", icon: jsxRuntime.jsx(HeartSmallIcon, {}) }), jsxRuntime.jsx(List, { children: favoriteTokens.map((favToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: favToken.iconUrl, secondaryImageUrl: favToken.iconUrl, itemTitle: favToken.name, subtitle: favToken.symbol, rounded: "full", onClick: () => { }, dropdownMenuContent: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(DropdownMenuItem, { label: "Add to favorites", icon: jsxRuntime.jsx(FilledHeartIcon, {}) }) }) }, favToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Your tokens loading", icon: jsxRuntime.jsx(CoinsIcon, {}) }), jsxRuntime.jsx(List, { children: userTokens.map((userToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), rounded: "full", onClick: () => { }, loading: { subtitle: userToken.symbol } }, userToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Your tokens & balance", icon: jsxRuntime.jsx(CoinsIcon, {}) }), jsxRuntime.jsx(List, { children: userTokens.map((userToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), rounded: "full", onClick: () => { } }, userToken.name))) }), jsxRuntime.jsx(SectionTitle, { title: "Popular tokens", icon: jsxRuntime.jsx(SparkleIcon, {}) }), jsxRuntime.jsx(List, { children: popularTokens.map((popToken) => (jsxRuntime.jsx(ListItem, { size: "large", mainImageUrl: popToken.iconUrl, secondaryImageUrl: popToken.iconUrl, itemTitle: popToken.name, subtitle: popToken.symbol, icon: jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), rounded: "full", onClick: () => { } }, popToken.name))) })] })] }) })] }));
-}
-const List = ({ children }) => {
-    return (jsxRuntime.jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
-};
-
 function useCountdown(initialSeconds) {
     const [secondsLeft, setSecondsLeft] = React$1.useState(initialSeconds);
     React$1.useEffect(() => {
@@ -27840,7 +27839,7 @@ function DepositAddressView({ isOpen = true, fromToken, toToken, handleClose, fr
                 }, borderType: "outline", children: [jsxRuntime.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: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", label: "Copy" }) }), headerContent] }), jsxRuntime.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: jsxRuntime.jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", shadow: true, size: "xlarge" }) }), jsxRuntime.jsx(TxProgressViewHeader, { title: title, description: description, isWarning: true }), jsxRuntime.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: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Deposit address", detail: jsxRuntime.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: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", label: "Copy" }) }), headerContent] }), jsxRuntime.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: jsxRuntime.jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", shadow: true, size: "xlarge" }) }), jsxRuntime.jsx(TxProgressViewHeader, { title: title, description: description, isWarning: true }), jsxRuntime.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: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Deposit address", detail: jsxRuntime.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",
@@ -27857,164 +27856,6 @@ function TimeRemaining({ timeRemainingSeconds, tooltipContent, }) {
             : undefined }));
 }
 
-function MainView({ isLoading = false }) {
-    return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { isLoading: isLoading, title: "Swap", actions: [
-                    {
-                        labelOrIcon: jsxRuntime.jsx(ClockOutlineIcon, {}),
-                        id: "history",
-                        tooltip: {
-                            tooltipContent: "Swap history",
-                        },
-                    },
-                    {
-                        labelOrIcon: jsxRuntime.jsx(SettingsGearIcon, {}),
-                        id: "settings",
-                        tooltip: {
-                            tooltipContent: "Swap preferences",
-                        },
-                    },
-                ] }), jsxRuntime.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",
-                    },
-                } }), jsxRuntime.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 }), jsxRuntime.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",
-                    },
-                } }), jsxRuntime.jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsxRuntime.jsx(Button$1, { variant: isLoading ? "tertiary" : "primary", size: "lg", label: "Swap", isLoading: isLoading }) })] }));
-}
-
-function RecipientView({ type }) {
-    return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { title: type === "paymentMethod" ? "Pay" : "Receive", displayBackButton: true }), jsxRuntime.jsx(BorderedContainer, { children: jsxRuntime.jsx(FlexContainer, { children: type === "paymentMethod" || type === "recipientEmpty" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionTitle, { title: "Your wallet", icon: jsxRuntime.jsx(PunkIcon, {}) }), jsxRuntime.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" }), jsxRuntime.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: jsxRuntime.jsx(Button$1, { size: "md", variant: "primary", label: "Change wallet", className: "tw-w-full", containerClassName: "tw-w-full" }) })] })) : type === "recipientTypingEns" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SearchAddress, { type: type }), jsxRuntime.jsx(ListItem, { itemTitle: "souljabags.eth", subtitle: "0x25c9\u202623d5", mainImageUrl: "/assets/images/punks.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsxRuntime.jsx(ListItem, { itemTitle: "souljaboy.eth", subtitle: "0x0ec8\u202604c1", mainIcon: jsxRuntime.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: jsxRuntime.jsx(PunkIcon, { size: "30" }) }), size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } })] })) : type === "recipientTypingAddress" ? (jsxRuntime.jsx(SearchAddress, { type: type })) : null }) }), type === "paymentMethod" ? (jsxRuntime.jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SectionTitle, { title: "Centralized Exchange", icon: type === "paymentMethod" ? jsxRuntime.jsx(BankIcon, {}) : jsxRuntime.jsx(WalletIcon, {}) }), jsxRuntime.jsx(DepositSection, {})] }) })) : type === "recipientEmpty" ? (jsxRuntime.jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SearchAddress, { type: type }), jsxRuntime.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: jsxRuntime.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" ? (jsxRuntime.jsx("div", {})) : null, " "] }));
-}
-const FlexContainer = ({ children }) => (jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ListItem, { itemTitle: "Deposit", mainIcon: jsxRuntime.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: jsxRuntime.jsx(CoinsAddIcon, {}) }), className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsxRuntime.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." }), jsxRuntime.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: jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-w-full", containerClassName: "tw-w-full" }) })] }));
-};
-const SearchAddress = ({ type }) => {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionTitle, { title: "Custom wallet", icon: jsxRuntime.jsx(WalletIcon, {}), accessory: type === "recipientTypingEns"
-                    ? null
-                    : "CEX addresses are not supported" }), jsxRuntime.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" ? (jsxRuntime.jsx(Input, { className: "tw-flex-1", placeholder: "Address on Blast", actionButtonProps: {
-                            label: "Paste",
-                            variant: "tertiary",
-                        }, icon: jsxRuntime.jsx("img", { src: "/assets/images/blast.jpg", className: "tw-rounded-squid-xxs" }) })) : type === "recipientTypingEns" ? (jsxRuntime.jsx(Input, { className: "tw-flex-1", placeholder: "Address on Blast", value: "souljab", actionButtonProps: {
-                            label: "Paste",
-                            variant: "tertiary",
-                        }, icon: jsxRuntime.jsx(Loader, {}) })) : type === "recipientTypingAddress" ? (jsxRuntime.jsx(Input, { className: "tw-flex-1", placeholder: "Address on Blast", value: "0xA7D7079b0FEaD91F3e65f86E8915Cb59c1a4C664", actionButtonProps: {
-                            label: "Paste",
-                            variant: "tertiary",
-                        }, icon: jsxRuntime.jsx("img", { src: "/assets/images/blast.jpg", className: "tw-rounded-squid-xxs" }) })) : null, jsxRuntime.jsx(Button$1, { size: "md", variant: "primary", icon: jsxRuntime.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] = React$1.useState(true);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Modal, { isOpen: isModalOpen, onBackdropClick: () => {
-                setIsModalOpen(false);
-            }, children: [jsxRuntime.jsxs(ModalContent, { children: [displayBoostMode && (jsxRuntime.jsx(Settings, { canToggleBoostMode: canToggleBoostMode })), jsxRuntime.jsxs("ul", { className: "tw-flex tw-flex-col tw-items-start tw-gap-squid-xxs tw-self-stretch tw-py-squid-m", children: [jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(ArrowBottomTopIcon, {}), label: "Exchange rate", detail: "1 ETH = 4,031.05 USDC" }), jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(ArrowWallDownIcon, {}), label: "Receive minimum", detail: "750.5 USDC" }), jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(GasIcon, {}), label: "Cross-chain gas fees", detail: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { children: "0.02534 ETH" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "$9.92" })] }) }), jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(ReorderIcon, {}), label: "Expected gas refund", detail: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { children: "-0.06336 ETH" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "-$2.48" })] }) }), jsxRuntime.jsx(PropertyListItem, { isLoading: isLoading, icon: jsxRuntime.jsx(ReceiptBillIcon, {}), label: "Total fee", detail: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { children: "0.0177 ETH" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "$7.43" })] }) })] }), jsxRuntime.jsx("span", { children: jsxRuntime.jsx(InfoBox, { icon: jsxRuntime.jsx(SnapIcon, {}), title: "Squid's price commitment", description: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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.", " ", jsxRuntime.jsx("a", { className: "tw-text-grey-300", href: ROUTING_TOKEN_SUPPORT_ARTICLE, target: "_blank", rel: "noreferrer", children: "Learn more" })] }) }) }) })] }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: "Close", onClick: () => {
-                        setIsModalOpen(false);
-                    } })] }) }));
-}
-function Settings({ canToggleBoostMode }) {
-    return (jsxRuntime.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: jsxRuntime.jsx(SettingsItem, { icon: jsxRuntime.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: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { children: "Boost by Squid reduces transaction times across chains down to" }), " ", jsxRuntime.jsx(CaptionText, { className: "tw-text-status-positive", children: "5-30 seconds" }), jsxRuntime.jsx(CaptionText, { children: ". It\u2019s currently only available for swaps below a value of" }), " ", jsxRuntime.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;
@@ -69429,7 +69270,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 logoURI: toToken.logoUrl,
-                            } })) }), jsxRuntime.jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.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: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
+                            } })) }), jsxRuntime.jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.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: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
                     stopTimer();
                 }, onTxStart: () => {
                     startTimer();
@@ -69519,10 +69360,6 @@ function PropertiesSkeleton() {
     return (jsxRuntime.jsx(PropertiesLayout, { children: Array.from({ length: 5 }, (_, i) => (jsxRuntime.jsx(PropertyListItem, { variant: "large", isLoading: true }, i))) }));
 }
 
-function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, }) {
-    return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(BridgeHeader, { tokenLogoURI: token.logoURI, chainLogoURI: toChain.logoURI, title: title, hash: hash, url: url, status: status }), properties: jsxRuntime.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 (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(BuyNFTHeader, { imageUrl: imageURI, title: title, hash: hash, url: url, status: status }), properties: jsxRuntime.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 }));
 }
@@ -69535,6 +69372,10 @@ function SwapTransactionView({ title, hash, status, url, fromAmount, fromToken,
     return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(SwapHeader, { fromToken: fromToken, toToken: toToken, title: title, hash: hash, url: url, status: status }), properties: jsxRuntime.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 (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(BridgeHeader, { tokenLogoURI: token.logoURI, chainLogoURI: toChain.logoURI, title: title, hash: hash, url: url, status: status }), properties: jsxRuntime.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,
@@ -69546,10 +69387,6 @@ function TransactionView({ type, props }) {
     return jsxRuntime.jsx(Component, Object.assign({}, props));
 }
 
-function WalletsView() {
-    return (jsxRuntime.jsxs(Modal, { maxHeight: true, children: [jsxRuntime.jsxs(ModalContent, { addGap: true, children: [jsxRuntime.jsx("div", { className: "tw-px-squid-xs tw-py-squid-xxs", children: jsxRuntime.jsx(Input, { placeholder: "Select your wallet" }) }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-py-squid-xxs", children: [jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", detail: "Installed", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", detail: "Installed", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), jsxRuntime.jsx("span", { className: "tw-text-material-light-thin", children: jsxRuntime.jsx(ModalContentDivider, {}) }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", subtitle: "Connect with an Injected Wallet", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Browser Extension" }), mainImageUrl: "/assets/images/avatar.png" }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), " ", jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), " ", jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), " ", jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-500", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" })] })] }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel" })] }));
-}
-
 var isMergeableObject = function isMergeableObject(value) {
 	return isNonNullObject(value)
 		&& !isSpecial(value)
@@ -69905,6 +69742,7 @@ exports.ArrowBottomTopIcon = ArrowBottomTopIcon;
 exports.ArrowButton = ArrowButton;
 exports.ArrowCornerDownRightIcon = ArrowCornerDownRightIcon;
 exports.ArrowDownIcon = ArrowDownIcon;
+exports.ArrowExpandIcon = ArrowExpandIcon;
 exports.ArrowLeftIcon = ArrowLeftIcon;
 exports.ArrowOutOfBoxIcon = ArrowOutOfBoxIcon;
 exports.ArrowRightDownCircleIcon = ArrowRightDownCircleIcon;
@@ -69919,7 +69757,6 @@ exports.ArrowUpIcon = ArrowUpIcon;
 exports.ArrowWallDownIcon = ArrowWallDownIcon;
 exports.ArrowsSwapIcon = ArrowsSwapIcon;
 exports.AssetsButton = AssetsButton;
-exports.AssetsView = AssetsView;
 exports.AtomIcon = AtomIcon;
 exports.BackpackIcon = BackpackIcon;
 exports.BadgeImage = BadgeImage;
@@ -69935,7 +69772,6 @@ exports.Breadcrumb = Breadcrumb;
 exports.BridgeAction = BridgeAction;
 exports.BridgeHeader = BridgeHeader;
 exports.BridgeProperties = BridgeProperties;
-exports.BridgeTransactionView = BridgeTransactionView;
 exports.BrokenHeartIcon = BrokenHeartIcon;
 exports.BubblesIcon = BubblesIcon;
 exports.Button = Button$1;
@@ -70035,6 +69871,7 @@ exports.Image = Image$1;
 exports.ImageGroup = ImageGroup;
 exports.ImageIcon = ImageIcon;
 exports.ImageSparkle = ImageSparkle;
+exports.ImageStack = ImageStack;
 exports.IncompleteAction = IncompleteAction;
 exports.InfinityIcon = InfinityIcon;
 exports.InfoBox = InfoBox;
@@ -70048,14 +69885,12 @@ exports.LaptopIcon = LaptopIcon;
 exports.LightningIcon = LightningIcon;
 exports.LimitIcon = LimitIcon;
 exports.LinkIcon = LinkIcon;
-exports.List = List;
 exports.ListItem = ListItem;
 exports.ListItemActionsButton = ListItemActionsButton;
 exports.Loader = Loader;
 exports.LoadingProvider = LoadingProvider;
 exports.LoadingSkeleton = LoadingSkeleton;
 exports.MEDIA_QUERIES = MEDIA_QUERIES;
-exports.MainView = MainView;
 exports.MarketCapIcon = MarketCapIcon;
 exports.MaxIcon = MaxIcon;
 exports.Menu = Menu;
@@ -70065,6 +69900,7 @@ exports.MirrorIcon = MirrorIcon;
 exports.Modal = Modal;
 exports.ModalContent = ModalContent;
 exports.ModalContentDivider = ModalContentDivider;
+exports.MoneyBagIcon = MoneyBagIcon;
 exports.MoonIcon = MoonIcon;
 exports.NavigationBar = NavigationBar;
 exports.NewsIcon = NewsIcon;
@@ -70092,7 +69928,6 @@ exports.RangeInput = RangeInput;
 exports.ReceiptBillIcon = ReceiptBillIcon;
 exports.ReceiveNFTAction = ReceiveNFTAction;
 exports.ReceiveTokensAction = ReceiveTokensAction;
-exports.RecipientView = RecipientView;
 exports.RefreshIcon = RefreshIcon;
 exports.ReorderIcon = ReorderIcon;
 exports.RouteStep = RouteStep;
@@ -70129,7 +69964,6 @@ exports.SunriseIcon = SunriseIcon;
 exports.SunriseSmallIcon = SunriseSmallIcon;
 exports.SwapAction = SwapAction;
 exports.SwapConfiguration = SwapConfiguration;
-exports.SwapDetailsView = SwapDetailsView;
 exports.SwapErrorIcon = SwapErrorIcon;
 exports.SwapHeader = SwapHeader;
 exports.SwapIcon = SwapIcon;
@@ -70180,7 +70014,6 @@ exports.UsdAmount = UsdAmount;
 exports.WalletFilledIcon = WalletFilledIcon;
 exports.WalletIcon = WalletIcon;
 exports.WalletLink = WalletLink;
-exports.WalletsView = WalletsView;
 exports.WrapAction = WrapAction;
 exports.XSocial = XSocial;
 exports.adjustColorForContrast = adjustColorForContrast;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;