@0xsquid/ui 0.4.3 → 0.5.0

package/dist/cjs/index.js

@@ -2965,56 +2965,6 @@ const ErrorMessage = ({ message }) => {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsxRuntime.jsx(EmojiSadIcon, {}), jsxRuntime.jsx(CaptionText, { children: message })] }));
 };
 
-function Modal({ children }) {
-    return (
-    // modal container
-    jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
-}
-
-function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, }) {
-    return (jsxRuntime.jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsxRuntime.jsx(Button, { className: displayButtonShadows
-                            ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                            : undefined, variant: "tertiary", size: "md", icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsxRuntime.jsx(AddressButton, { className: displayButtonShadows
-                                ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                                : undefined, label: "Connect" }) })] }), title ? (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
-}
-
-function ProductCard({ children }) {
-    return (jsxRuntime.jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
-}
-
-function MaxIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_41_20801)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_41_20801", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
-}
-
-function SwapInputsIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
-}
-
-function WalletAddress({ address, ens }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", children: ens
-                    ? ens
-                    : address
-                        ? (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4))
-                        : '' }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronArrowIcon, {}) })] }));
-}
-
-function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
-    var _a;
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
-        ? 'tw-text-status-negative'
-        : 'tw-text-grey-300';
-    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsxRuntime.jsx(WalletAddress, { ens: address })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) }), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
-}
-
-function SwapProgressViewHeader({ title, description, }) {
-    return (jsxRuntime.jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsxRuntime.jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
-}
-
-function SwapStepSeparator() {
-    return (jsxRuntime.jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsxRuntime.jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
-}
-
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }) {
     return (jsxRuntime.jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-pl-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsxRuntime.jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsxRuntime.jsx(CaptionText, { className: labelClassName, children: label })] }) }));
 }
@@ -3068,10 +3018,6 @@ function RefreshIcon() {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [jsxRuntime.jsx("path", { d: "M10.8333 17.4999C11.2936 17.4999 11.6667 17.1269 11.6667 16.6666C11.6667 16.2064 11.2936 15.8333 10.8333 15.8333C10.3731 15.8333 10 16.2064 10 16.6666C10 17.1269 10.3731 17.4999 10.8333 17.4999Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M17.5 9.16661C17.5 8.70638 17.1269 8.33328 16.6667 8.33328C16.2064 8.33328 15.8333 8.70638 15.8333 9.16661C15.8333 9.62685 16.2064 9.99995 16.6667 9.99995C17.1269 9.99995 17.5 9.62685 17.5 9.16661Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M16.6079 11.8899C17.0065 12.12 17.143 12.6297 16.9129 13.0283C16.6828 13.4268 16.1731 13.5634 15.7746 13.3333C15.376 13.1032 15.2394 12.5935 15.4695 12.1949C15.6997 11.7964 16.2093 11.6598 16.6079 11.8899Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M14.473 16.0785C14.8716 15.8483 15.0081 15.3387 14.778 14.9401C14.5479 14.5415 14.0382 14.405 13.6397 14.6351C13.2411 14.8652 13.1045 15.3749 13.3347 15.7734C13.5648 16.172 14.0744 16.3086 14.473 16.0785Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M15.7725 6.66661C15.3739 6.89673 14.8642 6.76017 14.6341 6.36159C14.404 5.96301 14.5405 5.45335 14.9391 5.22323C15.3377 4.99312 15.8474 5.12968 16.0775 5.52826C16.3076 5.92683 16.171 6.43649 15.7725 6.66661Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M7.70833 12.2917V16.875H3.125M7.5 16.4063C4.93915 15.4062 3.125 12.915 3.125 10C3.125 6.20304 6.20304 3.125 10 3.125C10.9614 3.125 11.8768 3.32235 12.7077 3.67876", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 }
 
-function DropdownMenu({ dropdownRef, items, className, }) {
-    return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
-}
-
 function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', }) {
     const { isModalOpen, modalRef, openModalButtonRef, openModal } = useModal();
     return (jsxRuntime.jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsxRuntime.jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), jsxRuntime.jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) }), jsxRuntime.jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsxRuntime.jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
@@ -3095,10 +3041,11 @@ const listItemSizeMap = {
     small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs tw-mx-squid-xs',
     large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs tw-mx-squid-xs',
 };
-function ListItem({ title, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, }) {
-    return (jsxRuntime.jsxs("li", { className: cn('tw-flex tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-300', listItemSizeMap[size], className), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: false })) })) : (jsxRuntime.jsx("div", { className: "tw-h-[30px] tw-w-[30px]", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+function ListItem(_a) {
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className"]);
+    return (jsxRuntime.jsxs("li", Object.assign({}, props, { className: cn('tw-flex tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-300', listItemSizeMap[size], className), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: false })) })) : (jsxRuntime.jsx("div", { className: "tw-h-[30px] tw-w-[30px]", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
                 // 'large' variant has extra padding
-                size === 'large' && 'tw-px-squid-xxs'), children: [typeof title === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: title })) : (title), size === 'large' && subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxRuntime.jsxs("span", { className: "tw-flex tw-max-h-4 tw-items-center", children: [size === 'large' ? (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, jsxRuntime.jsx("span", { className: "min-tw-w-4 min-tw-h-4", children: icon ? icon : null })] })] }));
+                size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxRuntime.jsxs("span", { className: "tw-flex tw-max-h-4 tw-items-center", children: [size === 'large' ? (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, jsxRuntime.jsx("span", { className: "min-tw-w-4 min-tw-h-4", children: icon ? icon : null })] })] })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
@@ -3121,6 +3068,10 @@ function SwapDetailListItem({ label, detail, icon, }) {
     return (jsxRuntime.jsx("li", { className: "tw-swap-detail-list-item-gradient tw-h-squid-l tw-w-full tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs tw-px-squid-xs", children: [jsxRuntime.jsx("div", { className: "tw-h-6 tw-w-6 tw-text-grey-500", children: icon }), jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-grey-500", children: label }), typeof detail === 'string' ? (jsxRuntime.jsx(CaptionText, { children: detail })) : (detail)] }) }));
 }
 
+function SwapStepSeparator() {
+    return (jsxRuntime.jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsxRuntime.jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
+}
+
 function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, }) {
     return (jsxRuntime.jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-bg-grey-800 tw-text-grey-300", children: [showStepSeparator && jsxRuntime.jsx(SwapStepSeparator, {}), jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-text-royal-400", children: [jsxRuntime.jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsxRuntime.jsx(Chip, { className: "tw-w-squid-xl tw-bg-royal-400 tw-text-grey-900", icon: typeof chipContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
                             if (type === 'string') {
@@ -3140,6 +3091,52 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
                         }) })] })] }));
 }
 
+function DropdownMenu({ dropdownRef, items, className, }) {
+    return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
+}
+
+function Modal({ children }) {
+    return (
+    // modal container
+    jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
+}
+
+function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {
+    return (jsxRuntime.jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsxRuntime.jsx(Button, { className: displayButtonShadows
+                            ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
+                            : undefined, variant: "tertiary", size: "md", icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsxRuntime.jsx(AddressButton, { isLoading: isLoading, onClick: onAddressButtonClick, className: displayButtonShadows
+                                ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
+                                : undefined, label: label }) })] }), title ? (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
+}
+
+function ProductCard({ children }) {
+    return (jsxRuntime.jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
+}
+
+function MaxIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_41_20801)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_41_20801", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
+}
+
+function SwapInputsIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
+}
+
+function WalletAddress({ address, ens }) {
+    return (jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-gap-1", children: ens || address ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", children: ens ? ens : (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4)) }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronArrowIcon, {}) })] })) : null }));
+}
+
+function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
+    var _a;
+    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
+        ? 'tw-text-status-negative'
+        : 'tw-text-grey-300';
+    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsxRuntime.jsx(WalletAddress, { ens: address })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) }), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
+}
+
+function SwapProgressViewHeader({ title, description, }) {
+    return (jsxRuntime.jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsxRuntime.jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
+}
+
 function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
     // handles if route component is mounted
     const [isRouteVisible, setIsRouteVisible] = react.useState(false);
@@ -3245,6 +3242,7 @@ exports.Button = Button;
 exports.CaptionText = CaptionText;
 exports.Chip = Chip;
 exports.DetailsToolbar = DetailsToolbar;
+exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuItem = DropdownMenuItem;
 exports.FeeButton = FeeButton;
 exports.HeadingText = HeadingText;

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

@@ -5,6 +5,9 @@ interface NavigationBarProps {
     transparent?: boolean;
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
+    onAddressButtonClick?: () => void;
+    label?: string;
+    isLoading?: boolean;
 }
-export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, label, onAddressButtonClick, isLoading, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 export * from './Boost';
 export * from './DetailsToolbar';
+export * from './DropdownMenu';
 export * from './Menu';
 export * from './Modal';
 export * from './NavigationBar';

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-interface ListItemProps {
-    title: string | React.ReactNode;
+interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;
     subtitle?: string;
@@ -11,5 +11,5 @@ interface ListItemProps {
     className?: string;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ title, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/index.js

@@ -2963,56 +2963,6 @@ const ErrorMessage = ({ message }) => {
     return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsx(EmojiSadIcon, {}), jsx(CaptionText, { children: message })] }));
 };
 
-function Modal({ children }) {
-    return (
-    // modal container
-    jsx("div", { className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
-}
-
-function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, }) {
-    return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button, { className: displayButtonShadows
-                            ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                            : undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsx(AddressButton, { className: displayButtonShadows
-                                ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                                : undefined, label: "Connect" }) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
-}
-
-function ProductCard({ children }) {
-    return (jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
-}
-
-function MaxIcon() {
-    return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_41_20801)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_41_20801", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
-}
-
-function SwapInputsIcon() {
-    return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_40_7936", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
-}
-
-function WalletAddress({ address, ens }) {
-    return (jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", children: ens
-                    ? ens
-                    : address
-                        ? (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4))
-                        : '' }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronArrowIcon, {}) })] }));
-}
-
-function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
-    var _a;
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
-        ? 'tw-text-status-negative'
-        : 'tw-text-grey-300';
-    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: address })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) }), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
-}
-
-function SwapProgressViewHeader({ title, description, }) {
-    return (jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
-}
-
-function SwapStepSeparator() {
-    return (jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
-}
-
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }) {
     return (jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-pl-squid-xxs hover:tw-bg-material-light-thin", children: [jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsx(CaptionText, { className: labelClassName, children: label })] }) }));
 }
@@ -3066,10 +3016,6 @@ function RefreshIcon() {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [jsx("path", { d: "M10.8333 17.4999C11.2936 17.4999 11.6667 17.1269 11.6667 16.6666C11.6667 16.2064 11.2936 15.8333 10.8333 15.8333C10.3731 15.8333 10 16.2064 10 16.6666C10 17.1269 10.3731 17.4999 10.8333 17.4999Z", fill: "currentColor" }), jsx("path", { d: "M17.5 9.16661C17.5 8.70638 17.1269 8.33328 16.6667 8.33328C16.2064 8.33328 15.8333 8.70638 15.8333 9.16661C15.8333 9.62685 16.2064 9.99995 16.6667 9.99995C17.1269 9.99995 17.5 9.62685 17.5 9.16661Z", fill: "currentColor" }), jsx("path", { d: "M16.6079 11.8899C17.0065 12.12 17.143 12.6297 16.9129 13.0283C16.6828 13.4268 16.1731 13.5634 15.7746 13.3333C15.376 13.1032 15.2394 12.5935 15.4695 12.1949C15.6997 11.7964 16.2093 11.6598 16.6079 11.8899Z", fill: "currentColor" }), jsx("path", { d: "M14.473 16.0785C14.8716 15.8483 15.0081 15.3387 14.778 14.9401C14.5479 14.5415 14.0382 14.405 13.6397 14.6351C13.2411 14.8652 13.1045 15.3749 13.3347 15.7734C13.5648 16.172 14.0744 16.3086 14.473 16.0785Z", fill: "currentColor" }), jsx("path", { d: "M15.7725 6.66661C15.3739 6.89673 14.8642 6.76017 14.6341 6.36159C14.404 5.96301 14.5405 5.45335 14.9391 5.22323C15.3377 4.99312 15.8474 5.12968 16.0775 5.52826C16.3076 5.92683 16.171 6.43649 15.7725 6.66661Z", fill: "currentColor" }), jsx("path", { d: "M7.70833 12.2917V16.875H3.125M7.5 16.4063C4.93915 15.4062 3.125 12.915 3.125 10C3.125 6.20304 6.20304 3.125 10 3.125C10.9614 3.125 11.8768 3.32235 12.7077 3.67876", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 }
 
-function DropdownMenu({ dropdownRef, items, className, }) {
-    return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
-}
-
 function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', }) {
     const { isModalOpen, modalRef, openModalButtonRef, openModal } = useModal();
     return (jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
@@ -3093,10 +3039,11 @@ const listItemSizeMap = {
     small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs tw-mx-squid-xs',
     large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs tw-mx-squid-xs',
 };
-function ListItem({ title, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, }) {
-    return (jsxs("li", { className: cn('tw-flex tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-300', listItemSizeMap[size], className), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: false })) })) : (jsx("div", { className: "tw-h-[30px] tw-w-[30px]", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+function ListItem(_a) {
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className"]);
+    return (jsxs("li", Object.assign({}, props, { className: cn('tw-flex tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-300', listItemSizeMap[size], className), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: false })) })) : (jsx("div", { className: "tw-h-[30px] tw-w-[30px]", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
                 // 'large' variant has extra padding
-                size === 'large' && 'tw-px-squid-xxs'), children: [typeof title === 'string' ? (jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: title })) : (title), size === 'large' && subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxs("span", { className: "tw-flex tw-max-h-4 tw-items-center", children: [size === 'large' ? (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, jsx("span", { className: "min-tw-w-4 min-tw-h-4", children: icon ? icon : null })] })] }));
+                size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxs("span", { className: "tw-flex tw-max-h-4 tw-items-center", children: [size === 'large' ? (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, jsx("span", { className: "min-tw-w-4 min-tw-h-4", children: icon ? icon : null })] })] })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
@@ -3119,6 +3066,10 @@ function SwapDetailListItem({ label, detail, icon, }) {
     return (jsx("li", { className: "tw-swap-detail-list-item-gradient tw-h-squid-l tw-w-full tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs tw-px-squid-xs", children: [jsx("div", { className: "tw-h-6 tw-w-6 tw-text-grey-500", children: icon }), jsx(CaptionText, { className: "tw-flex-1 tw-text-grey-500", children: label }), typeof detail === 'string' ? (jsx(CaptionText, { children: detail })) : (detail)] }) }));
 }
 
+function SwapStepSeparator() {
+    return (jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
+}
+
 function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, }) {
     return (jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-bg-grey-800 tw-text-grey-300", children: [showStepSeparator && jsx(SwapStepSeparator, {}), jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-text-royal-400", children: [jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsx(Chip, { className: "tw-w-squid-xl tw-bg-royal-400 tw-text-grey-900", icon: typeof chipContent === 'string' ? (jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
                             if (type === 'string') {
@@ -3138,6 +3089,52 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
                         }) })] })] }));
 }
 
+function DropdownMenu({ dropdownRef, items, className, }) {
+    return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
+}
+
+function Modal({ children }) {
+    return (
+    // modal container
+    jsx("div", { className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
+}
+
+function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {
+    return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button, { className: displayButtonShadows
+                            ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
+                            : undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsx(AddressButton, { isLoading: isLoading, onClick: onAddressButtonClick, className: displayButtonShadows
+                                ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
+                                : undefined, label: label }) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
+}
+
+function ProductCard({ children }) {
+    return (jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
+}
+
+function MaxIcon() {
+    return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_41_20801)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_41_20801", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
+}
+
+function SwapInputsIcon() {
+    return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_40_7936", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
+}
+
+function WalletAddress({ address, ens }) {
+    return (jsx("div", { className: "tw-flex tw-items-center tw-gap-1", children: ens || address ? (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", children: ens ? ens : (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4)) }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronArrowIcon, {}) })] })) : null }));
+}
+
+function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
+    var _a;
+    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
+        ? 'tw-text-status-negative'
+        : 'tw-text-grey-300';
+    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: address })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) }), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
+}
+
+function SwapProgressViewHeader({ title, description, }) {
+    return (jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
+}
+
 function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
     // handles if route component is mounted
     const [isRouteVisible, setIsRouteVisible] = useState(false);
@@ -3232,4 +3229,4 @@ function SquidConfigProvider({ theme, children, themeType = 'light', }) {
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: clsx('tw-text-base-content tw-group tw-relative tw-font-geist'), children: children }));
 }
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenuItem, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, WalletAddress, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, WalletAddress, useModal };

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

@@ -5,6 +5,9 @@ interface NavigationBarProps {
     transparent?: boolean;
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
+    onAddressButtonClick?: () => void;
+    label?: string;
+    isLoading?: boolean;
 }
-export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, label, onAddressButtonClick, isLoading, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 export * from './Boost';
 export * from './DetailsToolbar';
+export * from './DropdownMenu';
 export * from './Menu';
 export * from './Modal';
 export * from './NavigationBar';

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-interface ListItemProps {
-    title: string | React.ReactNode;
+interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;
     subtitle?: string;
@@ -11,5 +11,5 @@ interface ListItemProps {
     className?: string;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ title, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -143,6 +143,87 @@ interface DetailsToolbarProps {
 }
 declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
+interface DropdownMenuItemProps {
+    label: string;
+    labelClassName?: string;
+    imageUrl?: string;
+    icon?: React.ReactNode;
+}
+declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+
+interface HistoryItemProps {
+    firstImageUrl: string;
+    secondImageUrl: string;
+    isPending?: boolean;
+    fromLabel: string;
+    toLabel: string;
+    pendingLabel?: string;
+    dateCompleted: string;
+    fromAmount: string;
+    toAmount: string;
+}
+declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+
+interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    itemTitle: string | React.ReactNode;
+    mainImageUrl?: string;
+    secondaryImageUrl?: string;
+    subtitle?: string;
+    detail?: string;
+    icon?: React.ReactNode;
+    size?: ListItemSize;
+    mainIcon?: React.ReactNode;
+    className?: string;
+}
+type ListItemSize = 'small' | 'large';
+declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+
+interface MenuItemProps {
+    label: string;
+    imageUrl?: string;
+    icon?: React.ReactNode;
+}
+declare function MenuItem({ label, imageUrl, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
+
+interface SectionTitleProps {
+    title: string;
+    icon?: React.ReactNode;
+    accessory?: string | null;
+    actionIcon?: React.ReactNode;
+    className?: string;
+}
+declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsItemProps {
+    icon: React.ReactNode;
+    label: string;
+    controls?: React.ReactNode;
+    transparentControls?: boolean;
+    showHelpIcon?: boolean;
+}
+declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
+
+interface SwapDetailListItemProps {
+    label: string;
+    icon: React.ReactNode;
+    detail?: React.ReactNode;
+}
+declare function SwapDetailListItem({ label, detail, icon, }: SwapDetailListItemProps): react_jsx_runtime.JSX.Element;
+
+interface SwapStepItemProps {
+    descriptionBlocks: SwapStepDescriptionBlock[];
+    chipContent: React.ReactNode;
+    showStepSeparator?: boolean;
+}
+declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator, }: SwapStepItemProps): react_jsx_runtime.JSX.Element;
+
+interface DropdownMenuProps {
+    dropdownRef?: React.RefObject<HTMLDivElement>;
+    items: DropdownMenuItemProps[];
+    className?: string;
+}
+declare function DropdownMenu({ dropdownRef, items, className, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+
 type Rounded = 'sm' | 'lg';
 interface MenuProps extends React$1.ComponentProps<'div'> {
     containerClassName?: string;
@@ -165,8 +246,11 @@ interface NavigationBarProps {
     transparent?: boolean;
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
+    onAddressButtonClick?: () => void;
+    label?: string;
+    isLoading?: boolean;
 }
-declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
+declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, label, onAddressButtonClick, isLoading, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
 interface ProductCardProps {
     children?: React.ReactNode;
@@ -226,80 +310,6 @@ interface WalletAddressProps {
 }
 declare function WalletAddress({ address, ens }: WalletAddressProps): react_jsx_runtime.JSX.Element;
 
-interface DropdownMenuItemProps {
-    label: string;
-    labelClassName?: string;
-    imageUrl?: string;
-    icon?: React.ReactNode;
-}
-declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
-
-interface HistoryItemProps {
-    firstImageUrl: string;
-    secondImageUrl: string;
-    isPending?: boolean;
-    fromLabel: string;
-    toLabel: string;
-    pendingLabel?: string;
-    dateCompleted: string;
-    fromAmount: string;
-    toAmount: string;
-}
-declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
-
-interface ListItemProps {
-    title: string | React.ReactNode;
-    mainImageUrl?: string;
-    secondaryImageUrl?: string;
-    subtitle?: string;
-    detail?: string;
-    icon?: React.ReactNode;
-    size?: ListItemSize;
-    mainIcon?: React.ReactNode;
-    className?: string;
-}
-type ListItemSize = 'small' | 'large';
-declare function ListItem({ title, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, }: ListItemProps): react_jsx_runtime.JSX.Element;
-
-interface MenuItemProps {
-    label: string;
-    imageUrl?: string;
-    icon?: React.ReactNode;
-}
-declare function MenuItem({ label, imageUrl, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
-
-interface SectionTitleProps {
-    title: string;
-    icon?: React.ReactNode;
-    accessory?: string | null;
-    actionIcon?: React.ReactNode;
-    className?: string;
-}
-declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
-
-interface SettingsItemProps {
-    icon: React.ReactNode;
-    label: string;
-    controls?: React.ReactNode;
-    transparentControls?: boolean;
-    showHelpIcon?: boolean;
-}
-declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
-
-interface SwapDetailListItemProps {
-    label: string;
-    icon: React.ReactNode;
-    detail?: React.ReactNode;
-}
-declare function SwapDetailListItem({ label, detail, icon, }: SwapDetailListItemProps): react_jsx_runtime.JSX.Element;
-
-interface SwapStepItemProps {
-    descriptionBlocks: SwapStepDescriptionBlock[];
-    chipContent: React.ReactNode;
-    showStepSeparator?: boolean;
-}
-declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator, }: SwapStepItemProps): react_jsx_runtime.JSX.Element;
-
 interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: string | undefined;
     size: TextSize;
@@ -372,4 +382,4 @@ declare function useModal(props?: {
     openModalButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenuItem, type DropdownMenuItemProps, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, WalletAddress, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, WalletAddress, useModal };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "author": "",
   "license": "MIT",
   "scripts": {