@0xsquid/ui 0.10.2 → 0.11.1

package/dist/esm/index.js

@@ -2562,7 +2562,7 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
 }
 
 function LoadingSkeleton({ className, height = '20', }) {
-    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsx("g", { mask: "url(#mask0_1083_18992)", children: jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsx("clipPath", { id: "clip0_1083_18992", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsx("g", { "clip-path": "url(#clip0_1246_29063)", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsx("stop", { "stop-color": "currentColor" }), jsx("stop", { offset: "0.395881", "stop-color": "currentColor" }), jsx("stop", { offset: "0.597867", "stop-color": "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsx("stop", { offset: "0.697004", "stop-color": "currentColor" })] }), jsx("clipPath", { id: "clip0_1246_29063", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
 }
 
 /******************************************************************************
@@ -2625,10 +2625,31 @@ function BodyText(_a) {
     return (jsx("span", Object.assign({}, props, { className: cn(textClassMap$1[size], fontWeightClass, props.className), children: children })));
 }
 
-function Loader({ size = '24' }) {
-    return (
-    // <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
-    jsxs("svg", { width: size, height: size, viewBox: "0 0 38 38", xmlns: "http://www.w3.org/2000/svg", children: [jsx("defs", { children: jsxs("linearGradient", { x1: "8.042%", y1: "0%", x2: "65.682%", y2: "23.865%", id: "a", children: [jsx("stop", { stopColor: "currentColor", stopOpacity: "0", offset: "0%" }), jsx("stop", { stopColor: "currentColor", stopOpacity: ".631", offset: "63.146%" }), jsx("stop", { stopColor: "currentColor", offset: "100%" })] }) }), jsx("g", { fill: "none", fillRule: "evenodd", children: jsxs("g", { transform: "translate(1 1)", children: [jsx("path", { d: "M36 18c0-9.94-8.06-18-18-18", id: "Oval-2", stroke: "url(#a)", strokeWidth: "2", children: jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "0.9s", repeatCount: "indefinite" }) }), jsx("circle", { fill: "currentColor", cx: "36", cy: "18", r: "1", children: jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "0.9s", repeatCount: "indefinite" }) })] }) })] }));
+function Loader({ size = '24', strokeWidth = '1' }) {
+    return (jsxs("svg", { className: "squid-animated-loader", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: [jsx("style", { children: `
+    .squid-animated-loader-dash {
+      animation: squid-animated-loader-dash-grow 0.5s infinite alternate;
+    }
+    @keyframes squid-animated-loader-dash-grow {
+      0% {
+        stroke-dasharray: 10, 5;
+      }
+      100% {
+        stroke-dasharray: 5, 20;
+      }
+    }
+    @keyframes squid-animated-loader-rotate {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(-360deg);
+      }
+    }
+    .squid-animated-loader {
+      animation: squid-animated-loader-rotate 1s linear infinite;
+      transform-origin: center;
+    }` }), jsxs("g", { "clip-path": "url(#clip0_1387_2296)", children: [jsx("circle", { cx: "7.99967", cy: "8.00004", r: "6.66667", stroke: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-thin group-data-[squid-theme-type=light]:tw-text-material-dark-thin", "stroke-width": strokeWidth }), jsx("path", { className: "squid-animated-loader-dash group-data-[squid-theme-type=dark]:tw-text-material-light-thick group-data-[squid-theme-type=light]:tw-text-material-dark-thick", d: "M14.6663 8.00004C14.6663 7.12456 14.4939 6.25766 14.1589 5.44882C13.8238 4.63998 13.3328 3.90505 12.7137 3.286C12.0947 2.66694 11.3597 2.17588 10.5509 1.84084C9.74206 1.50581 8.87515 1.33337 7.99967 1.33337", stroke: "currentColor", "stroke-width": strokeWidth, "stroke-linecap": "round" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_1387_2296", children: jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
 }
 
 function AddressButton(_a) {
@@ -2922,12 +2943,12 @@ function HeadingText({ children, bold, size }) {
     return (jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
 }
 
-function SettingsSlider({ value, type, onChange }) {
-    return (jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsx("input", { min: 0, max: 99, placeholder: "0", type: "number", onChange: (e) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }) {
+    return (jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsx("input", { min: min !== null && min !== void 0 ? min : 0, max: max !== null && max !== void 0 ? max : 99, step: hasDecimals ? 0.1 : 1, placeholder: "0", type: "number", onChange: (e) => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(Number(e.target.value));
                 }, className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-bg-transparent tw-p-squid-xs tw-text-caption !tw-font-medium tw-leading-[10px] tw-text-grey-300 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', type === 'percentage'
-                    ? 'tw-w-[80px] tw-pr-[52px] tw-text-right'
-                    : 'tw-w-[76px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsx(PercentageDecorator, {}), type === 'amount' && jsx(AmountDecorator, {})] }));
+                    ? 'tw-w-[84px] tw-pr-[52px] tw-text-right'
+                    : 'tw-w-[80px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsx(PercentageDecorator, {}), type === 'amount' && jsx(AmountDecorator, {})] }));
 }
 function PercentageDecorator() {
     return (jsxs("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: [jsx(CaptionText, { className: "tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "%" }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
@@ -2940,10 +2961,20 @@ const switchSizeClassMap = {
     small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
     large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
 };
-const switchCircleSizeClassMap = {
+const switchKnobSizeClassMap = {
     small: 'tw-w-4 tw-h-4',
     large: 'tw-w-6 tw-h-6',
 };
+const switchKnobCheckedClassMap = {
+    large: {
+        checked: 'tw-left-[26px]',
+        unchecked: 'tw-left-[2px]',
+    },
+    small: {
+        checked: 'tw-left-[17px]',
+        unchecked: 'tw-left-[1px]',
+    },
+};
 function Switch({ checked = false, onChange, size, disabled = false, }) {
     return (
     // Switch container
@@ -2957,11 +2988,11 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
                     filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
                 }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all', 
                 // size styles
-                switchCircleSizeClassMap[size], 
-                // disabled and checked styles
-                checked
-                    ? 'tw-translate-x-0 tw-bg-[#FBFBFD]'
-                    : '-tw-translate-x-full tw-bg-grey-500') })] }));
+                switchKnobSizeClassMap[size], 
+                // checked styles
+                switchKnobCheckedClassMap[size][checked ? 'checked' : 'unchecked'], checked
+                    ? 'group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
+                    : 'tw-bg-grey-500') })] }));
 }
 
 const borderRadiusClassMap = {
@@ -3079,8 +3110,8 @@ function FeeButton(_a) {
     return (jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsx(Chip, { label: chipLabel }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: feeInUsd })] })] })));
 }
 
-function SettingsButton({ label, isSelected = false, }) {
-    return (jsx("button", { className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
+function SettingsButton({ label, isSelected = false, onClick, }) {
+    return (jsx("button", { onClick: onClick, className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
 function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, boostTooltipDisplayDelayMs = 0, }) {
@@ -3089,8 +3120,8 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessa
                     : 'tw-bg-status-positive') })] }));
 }
 
-function EmojiSadIcon() {
-    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
+function EmojiSadIcon({ className }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", className: className, children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
 }
 
 function ErrorMessage({ message, showIcon = true }) {
@@ -3114,7 +3145,7 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsx("aside", { className: cn('tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
+    return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
@@ -3164,11 +3195,46 @@ const dropdownPositionClassMap = {
     bottom: 'tw-right-[calc(100%-10px)] tw-top-7',
     center: 'tw-right-[40px] -tw-top-[55px]',
 };
-function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', dropdownMenuItems, itemsContainerRef, }) {
+const statusBadge = {
+    completed: {},
+    pending: {
+        badge: jsx(Loader, { size: "16", strokeWidth: "2" }),
+        containerClassName: 'tw-bg-royal-400',
+    },
+    failed: {
+        badge: (jsx("span", { className: "group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900", children: jsx(EmojiSadIcon, { className: "tw-text-status-negative" }) })),
+        containerClassName: 'tw-bg-status-negative',
+    },
+};
+function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, }) {
     const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown } = useDropdownMenu();
     const [dropdownPosition, setDropdownPosition] = useState(null);
     const itemRef = useRef(null);
     const menuRef = useRef(null);
+    const statusInfo = useMemo(() => {
+        switch (status) {
+            case 'completed':
+                return {
+                    label: dateCompleted,
+                    className: '',
+                };
+            case 'pending':
+                return {
+                    label: 'Pending',
+                    className: 'tw-text-royal-400',
+                };
+            case 'failed':
+                return {
+                    label: 'Failed',
+                    className: 'tw-text-status-negative',
+                };
+            default:
+                return {
+                    label: '',
+                    className: '',
+                };
+        }
+    }, [status, dateCompleted]);
     // Effect to find the best position for the dropdown menu, so it's always visible for the user
     useEffect(() => {
         var _a;
@@ -3213,8 +3279,8 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
             setDropdownPosition('top');
         }
     }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
-    return (jsx("li", { ref: itemRef, 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-cursor-pointer 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 })] }), !!dropdownMenuItems && (jsx("button", { className: "tw-peer 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 focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsx("div", { className: cn(!!dropdownMenuItems &&
-                                        'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) })] }), 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 })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, 
+    return (jsx("li", { ref: itemRef, 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-cursor-pointer 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: [!!statusBadge[status].badge && (jsx("span", { className: cn('tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5', statusBadge[status].containerClassName), children: statusBadge[status].badge })), 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 })] }), !!dropdownMenuItems && (jsx("button", { className: "tw-peer 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 focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsx("div", { className: cn(!!dropdownMenuItems &&
+                                        'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: statusInfo.label && (jsx(CaptionText, { className: statusInfo.className, children: statusInfo.label })) })] }), 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 })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, 
                     // only show dropdown menu if there is a position defined for it
                     isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
 }
@@ -3224,10 +3290,10 @@ const listItemSizeMap = {
     large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading"]);
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
-    return (jsx("li", { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), 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: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", 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-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+    return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), 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: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", 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-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
                     // 'large' variant has extra padding
                     size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[17px]", children: itemTitle })) : (itemTitle), size === 'large' &&
                             ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs tw-max-w-full tw-truncate !tw-leading-[11px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxs("button", { onClick: (event) => {
@@ -3236,22 +3302,23 @@ function ListItem(_a) {
                         onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
                     }, className: cn('tw-flex tw-w-fit tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
                         ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
-                        : 'tw-flex', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) }));
+                        : 'tw-flex', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
     return (jsxs("li", { className: "tw-mx-squid-xxs tw-inline-flex tw-max-h-list-item-small tw-items-center tw-justify-start tw-gap-squid-xxs tw-rounded-squid-xs tw-bg-grey-900 tw-py-squid-xxs tw-pl-squid-xxs tw-pr-squid-xl tw-text-grey-300", children: [jsx("div", { className: "tw-h-squid-m tw-w-squid-m", children: imageUrl ? (jsx("img", { className: "tw-h-full tw-w-full tw-rounded-squid-xxs", src: imageUrl, alt: "" })) : icon ? (icon) : null }), jsx(CaptionText, { children: label })] }));
 }
 
-function SectionTitle({ title, icon, accessory, actionIcon, className, }) {
-    return (jsxs("header", { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] }));
+function SectionTitle(_a) {
+    var { title, icon, accessory, actionIcon, className } = _a, props = __rest(_a, ["title", "icon", "accessory", "actionIcon", "className"]);
+    return (jsxs("header", Object.assign({}, props, { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] })));
 }
 
 function HelpIcon({ size = '20', className, }) {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("g", { "clip-path": "url(#clip0_457_36778)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM6 7C6 4.46214 8.03736 3 10 3C12.1193 3 14 4.66531 14 7C14 7.93746 13.7596 8.6603 13.368 9.2586C13.0353 9.76679 12.6034 10.1601 12.2697 10.4639L12.1757 10.5497C11.8041 10.8904 11.534 11.1593 11.337 11.504C11.1513 11.8288 11 12.2794 11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 11.9706 9.22366 11.1712 9.60051 10.5117C9.96604 9.87199 10.4459 9.42214 10.8243 9.07535L10.8834 9.02116L10.8834 9.02116L10.8834 9.02115C11.2572 8.67885 11.5066 8.45039 11.6945 8.16328C11.8654 7.9022 12 7.56254 12 7C12 5.83469 11.0807 5 10 5C8.96264 5 8 5.73786 8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7ZM10 15C9.44771 15 9 15.4477 9 16C9 16.5523 9.44771 17 10 17C10.5523 17 11 16.5523 11 16C11 15.4477 10.5523 15 10 15Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_457_36778", children: jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
 }
 
-function SettingsItem({ icon, label, controls = [], link, transparent = false, helpTooltip, }) {
+function SettingsItem({ icon, label, control, link, transparent = false, helpTooltip, }) {
     const ContentTag = link ? 'a' : 'div';
     const contentTagProps = link
         ? {
@@ -3260,25 +3327,10 @@ function SettingsItem({ icon, label, controls = [], link, transparent = false, h
         }
         : {};
     const helpIcon = !!helpTooltip && (jsx(HelpIcon, { className: cn('tw-text-grey-600', 'tw-cursor-help tw-transition-colors tw-duration-200 hover:tw-text-grey-400') }));
-    const showDetailsBorder = controls.length > 0 &&
-        !link &&
-        !controls.some((control) => control.type === 'switch');
+    const showDetailsBorder = !!control && !link && !(control.type === 'switch');
     return (jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsx(Fragment, { children: helpIcon }))] }), jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
-                        'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (controls.map((control, index) => {
-                        if (control.type === 'switch') {
-                            const switchControl = (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }, index));
-                            if (control.tooltip) {
-                                return jsx(Tooltip, Object.assign({}, control.tooltip, { children: switchControl }));
-                            }
-                            return switchControl;
-                        }
-                        if (control.type === 'percentage') {
-                            return (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.isSelected }), jsx(SettingsSlider, { value: control.value, type: "percentage" })] }));
-                        }
-                        if (control.type === 'amount') {
-                            return (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.isSelected }), control.options.map(({ value, isSelected }, index, _controls) => (jsx(SettingsButton, { label: '$' + value, isSelected: isSelected }, index))), jsx(SettingsSlider, { type: control.type, value: 0 })] }));
-                        }
-                    })) })] })) }));
+                        'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (!!control && (jsxs(Fragment, { children: [control.type === 'amount' && (jsxs(Fragment, { children: [jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsx(SettingsSlider, { type: control.type, value: control.value, onChange: control.onChange, hasDecimals: false, max: 999 })] })), control.type === 'switch' &&
+                                (control.tooltip ? (jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === 'percentage' && (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", hasDecimals: control.hasDecimals, max: control.max, min: control.min })] }))] }))) })] })) }));
 }
 
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
@@ -3377,7 +3429,10 @@ function NavigationBar({ title, displayBackButton = false, logoUrl, transparent
 }
 
 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 }) }));
+    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-[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 BorderedContainer({ children, className, }) {
+    return (jsx("section", { className: cn('tw-border-t tw-border-t-material-light-thin', className), children: children }));
 }
 
 function SquidLogo() {
@@ -3414,7 +3469,7 @@ function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAm
     const BalanceChipTag = isBalanceChipInteractive ? 'button' : 'div';
     const isSwapAmountChipInteractive = !!onSwapAmountButtonClick;
     const SwapAmountChipTag = isSwapAmountChipInteractive ? 'button' : 'div';
-    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 tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), 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 }) }), direction === 'from' ? (jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center 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", children: jsx("span", { children: amount }) }) })), !(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: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs(SwapAmountChipTag, { onClick: onSwapAmountButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isSwapAmountChipInteractive && interactiveChipClassName), 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(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isBalanceChipInteractive && interactiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
+    return (jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-[480px] tw-overflow-hidden tw-border-t tw-border-t-material-light-thin 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 tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), 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 }) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-animate-move-loading-cover-to-right tw-bg-dark-cover tw-h-[94px] tw-w-[1260px]" }) })), direction === 'from' ? (jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsx("div", { className: cn('tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]', isFetching && 'tw-opacity-50'), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center 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", children: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) ? null : (jsxs("footer", { className: cn('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', isFetching && 'tw-opacity-50'), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs(SwapAmountChipTag, { onClick: onSwapAmountButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isSwapAmountChipInteractive && interactiveChipClassName), 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(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isBalanceChipInteractive && interactiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -3603,4 +3658,4 @@ function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light'
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };

package/dist/esm/types/components/buttons/SettingsButton.d.ts

@@ -1,5 +1,6 @@
 export interface SettingsButtonProps {
     label: string;
     isSelected?: boolean;
+    onClick?: () => void;
 }
-export declare function SettingsButton({ label, isSelected, }: SettingsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsButton({ label, isSelected, onClick, }: SettingsButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/controls/SettingsSlider.d.ts

@@ -1,6 +1,9 @@
 export interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
-    onChange?: (value: string) => void;
+    onChange?: (value: number) => void;
+    hasDecimals?: boolean;
+    min?: number;
+    max?: number;
 }
-export declare function SettingsSlider({ value, type, onChange }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1,3 @@
-export declare function EmojiSadIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function EmojiSadIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 interface LoaderProps {
     size?: string;
+    strokeWidth?: string;
 }
-export declare function Loader({ size }: LoaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Loader({ size, strokeWidth }: LoaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,2 +1,6 @@
 /// <reference types="react" />
 export declare function ProductCard({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function BorderedContainer({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,17 +1,17 @@
 /// <reference types="react" />
 import { DropdownMenuItemProps } from './DropdownMenuItem';
+type HistoryItemStatus = 'completed' | 'pending' | 'failed';
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;
-    isPending?: boolean;
+    status: HistoryItemStatus;
     fromLabel: string;
     toLabel: string;
-    pendingLabel?: string;
     dateCompleted: string;
     fromAmount: string;
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
     itemsContainerRef?: React.RefObject<HTMLElement>;
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, itemsContainerRef, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -17,7 +17,8 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     loading?: {
         subtitle?: boolean;
     };
+    containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-interface SectionTitleProps {
+interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
     icon?: React.ReactNode;
     accessory?: string | null;
     actionIcon?: React.ReactNode;
     className?: string;
 }
-export declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionTitle({ title, icon, accessory, actionIcon, className, ...props }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,22 +4,24 @@ export type SettingsControl = {
     type: 'percentage';
     value: number;
     onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    hasDecimals?: boolean;
     resetValueControl: {
         label: string;
         onSelect: () => void;
-        isSelected?: boolean;
+        value: number;
     };
 } | {
     type: 'amount';
+    value: number;
+    onChange: (value: number) => void;
     options: {
         value: number;
-        isSelected?: boolean;
-        onSelect?: () => void;
     }[];
     resetValueControl: {
         label: string;
-        onSelect: () => void;
-        isSelected?: boolean;
+        value: number;
     };
 } | {
     type: 'switch';
@@ -31,9 +33,9 @@ export type SettingsControl = {
 export interface SettingsItemProps {
     icon: React.ReactNode;
     label: string;
-    controls?: SettingsControl[];
+    control?: SettingsControl;
     link?: string;
     transparent?: boolean;
     helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-export declare function SettingsItem({ icon, label, controls, link, transparent, helpTooltip, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsItem({ icon, label, control, link, transparent, helpTooltip, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1 @@
 export declare function MainView(): import("react/jsx-runtime").JSX.Element;
-export declare const BorderedContainer: ({ children, className, }: {
-    children: React.ReactNode;
-    className?: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/stories/badges/BadgeImage.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BadgeImage } from '../../components/badges/BadgeImage';
+declare const meta: Meta<typeof BadgeImage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ImageOnly: Story;
+export declare const BadgeAndImage: Story;
+export declare const ExtraMarginForBadge: Story;
+export declare const Rounded: Story;
+export declare const SizeMedium: Story;
+export declare const SizeSmall: Story;

package/dist/esm/types/stories/badges/LoadingSkeleton.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { LoadingSkeleton } from '../../components/badges/LoadingSkeleton';
+declare const meta: Meta<typeof LoadingSkeleton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts

@@ -3,11 +3,11 @@ import { SwapConfiguration } from '../../components/layout/SwapConfiguration';
 declare const meta: Meta<typeof SwapConfiguration>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Empty: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndToken: Story;
-export declare const WithAmount: Story;
 export declare const WithSwapAmountUsd: Story;
+export declare const Address: Story;
 export declare const WithBalance: Story;
 export declare const LowPriceImpact: Story;
 export declare const HighPriceImpact: Story;

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

@@ -3,6 +3,7 @@ import { HistoryItem } from '../../components/lists/HistoryItem';
 declare const meta: Meta<typeof HistoryItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Completed: Story;
 export declare const Pending: Story;
+export declare const Failed: Story;
 export declare const WithActions: Story;