@0xsquid/ui 0.8.3 → 0.9.1

package/README.md

@@ -71,6 +71,28 @@ yarn format:fix
 yarn lint:fix
 ```
 
+### Folder structure
+
+```
+- src
+  - index.ts <- barrel file
+  - components
+    - index.ts <- barrel file
+    - buttons
+      - index.ts <- barrel file
+      - Button.tsx
+    - lists
+      - index.ts <- barrel file
+      - HistoryItem.tsx
+  - stories
+    - buttons
+      - Button.stories.tsx
+    - lists
+      - HistoryItem.stories.tsx
+```
+
+When creating a new component, don't forget to update the barrel file, exporting your component in the `index.ts` file in the corresponding component folder. You can also install the [AutoBarrel VSCode extension](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel).
+
 ### Images
 
 In case you need to add images somewhere that need to be included in the final bundle, convert them to base64 instead.

package/dist/cjs/index.js

@@ -2563,6 +2563,10 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
     return imageUrl ? (jsxRuntime.jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [jsxRuntime.jsx("img", { src: imageUrl, alt: "", className: cn('tw-h-full tw-w-full', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs') }), badgeUrl ? (jsxRuntime.jsx("img", { src: badgeUrl, alt: "", className: cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]) })) : null] })) : null;
 }
 
+function LoadingSkeleton({ className, height = '20', }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsxRuntime.jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsxRuntime.jsx("g", { mask: "url(#mask0_1083_18992)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsxRuntime.jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsxRuntime.jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1083_18992", children: jsxRuntime.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" }) })] })] }));
+}
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -2668,10 +2672,6 @@ function ArrowButton(_a) {
                 'aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800'), children: jsxRuntime.jsx(ArrowRightIcon, {}) })] })));
 }
 
-function PlusIcon() {
-    return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }) }));
-}
-
 const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
@@ -2778,6 +2778,10 @@ const themeTypesKeys = {
     },
 };
 
+function PlusIcon() {
+    return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }) }));
+}
+
 const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
 const defaultBgColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
 function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, onClick, }) {
@@ -2797,7 +2801,7 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
                 }, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px] tw-rounded-full" }) })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
                     color: tokenTextColor,
-                }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-material-light-thick" })] })] }));
+                }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
 }
 
 function SearchIcon() {
@@ -2805,8 +2809,8 @@ function SearchIcon() {
 }
 
 function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, error, onPasteButtonClick } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "error", "onPasteButtonClick"]);
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', error ? 'tw-outline-status-negative' : 'focus:tw-outline-royal-500', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
+    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, isError = false, onPasteButtonClick } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "isError", "onPasteButtonClick"]);
+    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError ? 'tw-outline-status-negative' : 'focus:tw-outline-royal-500', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
 }
 const PasteButton = ({ onClick }) => {
     return (jsxRuntime.jsx("button", { onClick: onClick, className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
@@ -2955,7 +2959,7 @@ function HeadingText({ children, bold, size }) {
 }
 
 function SettingsSlider({ value, type }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-300", children: "%" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-300", children: "$" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) })] })) }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-600", children: String(value) }), jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-300", children: "%" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-300", children: "$" }), jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-600", children: String(value) })] })) }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
 }
 
 const switchSizeClassMap = {
@@ -2982,7 +2986,7 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
                 switchCircleSizeClassMap[size], 
                 // disabled and checked styles
                 checked
-                    ? 'tw-translate-x-0 tw-bg-grey-100'
+                    ? 'tw-translate-x-0 tw-bg-[#FBFBFD]'
                     : '-tw-translate-x-full tw-bg-grey-500') })] }));
 }
 
@@ -2991,8 +2995,8 @@ const borderRadiusClassMap = {
     lg: 'tw-rounded-squid-m',
 };
 function Menu(_a) {
-    var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
+    var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg', menuRef } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded", "menuRef"]);
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20 tw-max-w-full", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
 }
 
 const tooltipWidthClassMap = {
@@ -3090,7 +3094,7 @@ function FeeButton(_a) {
 }
 
 function SettingsButton({ label }) {
-    return (jsxRuntime.jsx("button", { className: "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", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
+    return (jsxRuntime.jsx("button", { className: "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", children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
 function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, }) {
@@ -3127,21 +3131,21 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
     return (jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsxRuntime.jsx(ChevronLargeDownIcon, {}) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
 }
 
-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-cursor-pointer 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 })] }) }));
+function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
+    return (jsxRuntime.jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", onClick: onClick, children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-px-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: cn(labelClassName, 'tw-max-w-full tw-truncate !tw-leading-[18px]'), children: label })] }) }));
 }
 
-function useModal(props) {
-    const [isModalOpen, setIsModalOpen] = react.useState(Boolean(props === null || props === void 0 ? void 0 : props.initialIsModalOpen));
-    const modalRef = react.useRef(null);
-    const openModalButtonRef = react.useRef(null);
+function useDropdownMenu(props) {
+    const [isDropdownOpen, setIsModalOpen] = react.useState(Boolean(props === null || props === void 0 ? void 0 : props.initialIsModalOpen));
+    const dropdownRef = react.useRef(null);
+    const openDropdownButtonRef = react.useRef(null);
     react.useEffect(() => {
         const handleClickOutside = (event) => {
             var _a;
             // close modal if the user clicked outside of it
-            if (modalRef.current &&
-                !modalRef.current.contains(event.target) &&
-                !((_a = openModalButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                !((_a = openDropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
                 setIsModalOpen(false);
             }
         };
@@ -3149,58 +3153,83 @@ function useModal(props) {
         return () => {
             document.removeEventListener('click', handleClickOutside);
         };
-    }, [modalRef]);
-    const openModal = react.useCallback(() => {
+    }, [dropdownRef]);
+    const openDropdown = react.useCallback(() => {
         setIsModalOpen((prev) => !prev);
     }, []);
-    const closeModal = react.useCallback(() => {
+    const closeDropdown = react.useCallback(() => {
         setIsModalOpen(false);
     }, []);
     return {
-        isModalOpen,
-        openModal,
-        closeModal,
-        modalRef,
-        openModalButtonRef,
+        isDropdownOpen,
+        openDropdown,
+        closeDropdown,
+        dropdownRef,
+        openDropdownButtonRef,
     };
 }
 
-function CompassRound({ size = '20', className, }) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("path", { d: "M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }), jsxRuntime.jsx("path", { d: "M12.2135 7.27515L8.79307 8.208C8.5084 8.28564 8.286 8.50803 8.20837 8.7927L7.27552 12.2132C7.19069 12.5242 7.47609 12.8096 7.78713 12.7248L11.2076 11.7919C11.4923 11.7143 11.7146 11.4919 11.7923 11.2072L12.7251 7.78677C12.81 7.47573 12.5246 7.19032 12.2135 7.27515Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" })] }));
-}
-function CircleX({ size = '20', className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M12.5003 7.49996L7.50033 12.5M12.5003 12.5L7.50033 7.49996M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) }));
-}
-
 function DotGrid1x3HorizontalIcon({ className, size = '16', }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.33325 8.00008C1.33325 7.2637 1.93021 6.66675 2.66659 6.66675C3.40297 6.66675 3.99992 7.2637 3.99992 8.00008C3.99992 8.73646 3.40297 9.33341 2.66659 9.33341C1.93021 9.33341 1.33325 8.73646 1.33325 8.00008ZM6.66659 8.00008C6.66659 7.2637 7.26354 6.66675 7.99992 6.66675C8.7363 6.66675 9.33325 7.2637 9.33325 8.00008C9.33325 8.73646 8.7363 9.33341 7.99992 9.33341C7.26354 9.33341 6.66659 8.73646 6.66659 8.00008ZM11.9999 8.00008C11.9999 7.2637 12.5969 6.66675 13.3333 6.66675C14.0696 6.66675 14.6666 7.2637 14.6666 8.00008C14.6666 8.73646 14.0696 9.33341 13.3333 9.33341C12.5969 9.33341 11.9999 8.73646 11.9999 8.00008Z", fill: "currentColor" }) }));
 }
 
-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 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-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: [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: [
-                        {
-                            label: 'Repeat swap',
-                            icon: jsxRuntime.jsx(RefreshIcon, {}),
-                        },
-                        {
-                            label: 'View on xyz',
-                            icon: jsxRuntime.jsx(CompassRound, {}),
-                        },
-                        {
-                            label: 'Clear',
-                            labelClassName: 'tw-text-status-negative',
-                            icon: jsxRuntime.jsx(CircleX, { className: "tw-text-status-negative" }),
-                        },
-                    ] })) : null] }) }));
-}
-
-function LoadingSkeleton({ className, height = '20', }) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsxRuntime.jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsxRuntime.jsx("g", { mask: "url(#mask0_1083_18992)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsxRuntime.jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsxRuntime.jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1083_18992", children: jsxRuntime.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" }) })] })] }));
+const dropdownPositionClassMap = {
+    top: 'tw-right-[calc(100%-10px)] tw-bottom-7',
+    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, }) {
+    const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown } = useDropdownMenu();
+    const [dropdownPosition, setDropdownPosition] = react.useState(null);
+    const itemRef = react.useRef(null);
+    const menuRef = react.useRef(null);
+    // Effect to find the best position for the dropdown menu, so it's always visible for the user
+    react.useEffect(() => {
+        if (!isDropdownOpen) {
+            // when the dropdown is closed, we want to reset its position
+            // because user may scroll, and the old position may be out of view, so we'll need to recalculate it
+            setDropdownPosition(null);
+            return;
+        }
+        const item = itemRef.current;
+        const itemsContainer = item === null || item === void 0 ? void 0 : item.parentElement;
+        const dropdownMenu = menuRef.current;
+        if (!item || !dropdownRef.current || !itemsContainer || !dropdownMenu) {
+            return;
+        }
+        // Get the bounding rectangle of the item
+        const itemRect = item.getBoundingClientRect();
+        // Get the bounding rectangle of the container element
+        const containerRect = itemsContainer.getBoundingClientRect();
+        // Calculate the bottom position of the visible area of the the items container
+        const containerVisibleBottom = containerRect.top + containerRect.height;
+        // Calculate the distance from the bottom of the item to the visible bottom of the items container
+        const distanceBetweenItemBottomAndContainerBottomEdge = containerVisibleBottom - itemRect.bottom;
+        // the same but for the top
+        const distanceBetweenItemTopAndContainerTopEdge = itemRect.top - containerRect.top;
+        const dropdownMenuHeight = dropdownMenu.clientHeight;
+        // check if the height of the dropdown is less than the longest distance, either top or bottom
+        // if so, means that the dropdown keeps visible when positioned at the top or bottom of the item
+        const isDropdownVisibleAtItemTopOrBottom = dropdownMenuHeight <=
+            Math.max(distanceBetweenItemBottomAndContainerBottomEdge, distanceBetweenItemTopAndContainerTopEdge);
+        // if the dropdown is not visible at top or bottom of the item
+        // we just center it
+        if (!isDropdownVisibleAtItemTopOrBottom) {
+            return setDropdownPosition('center');
+        }
+        // finally, if the dropdown fits, position it where it has more space
+        if (distanceBetweenItemBottomAndContainerBottomEdge >=
+            distanceBetweenItemTopAndContainerTopEdge) {
+            setDropdownPosition('bottom');
+        }
+        else {
+            setDropdownPosition('top');
+        }
+    }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
+    return (jsxRuntime.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: jsxRuntime.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: [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 })] }), !!dropdownMenuItems && (jsxRuntime.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: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsxRuntime.jsx("div", { className: cn(!!dropdownMenuItems &&
+                                        'tw-transition-opacity group-hover/history-item:tw-opacity-0 peer-focus:tw-opacity-0'), children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) })] }), 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 })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.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] }) }));
 }
 
 const listItemSizeMap = {
@@ -3233,7 +3262,7 @@ function HelpIcon({ size = '20', className, }) {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_457_36778)", children: jsxRuntime.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" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_457_36778", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
 }
 
-function SettingsItem({ icon, label, controls, transparentControls = false, showHelpIcon = true, link, }) {
+function SettingsItem({ icon, label, controls, transparentControls = false, showHelpIcon = true, link, transparent = false, helpTooltip, }) {
     const ContentTag = link ? 'a' : 'div';
     const contentTagProps = link
         ? {
@@ -3241,7 +3270,11 @@ function SettingsItem({ icon, label, controls, transparentControls = false, show
             target: '_blank',
         }
         : {};
-    return (jsxRuntime.jsx("li", { className: "tw-h-[50px] tw-self-stretch tw-bg-grey-900 tw-px-squid-xs", children: jsxRuntime.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, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), showHelpIcon ? jsxRuntime.jsx(HelpIcon, { className: "tw-text-grey-600" }) : null] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', transparentControls ? '' : 'tw-bg-grey-800'), children: controls })] })) }));
+    const helpIcon = showHelpIcon && (jsxRuntime.jsx(HelpIcon, { className: cn('tw-text-grey-600', 
+        // only add hover styles if helpTooltip is provided
+        !!helpTooltip &&
+            'tw-cursor-help tw-transition-colors tw-duration-200 hover:tw-text-grey-400') }));
+    return (jsxRuntime.jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900 '), children: jsxRuntime.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, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpIcon }))] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', transparentControls ? '' : 'tw-bg-grey-800'), children: controls })] })) }));
 }
 
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
@@ -3286,11 +3319,15 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
                         }) }), !!link && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-mr-squid-xxs tw-hidden tw-text-material-light-average group-hover/swap-step-item:tw-block" }))] })] }));
 }
 
-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), item.label))) }) }) }));
+function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false, listClassName, }) {
+    return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: !isHidden && (jsxRuntime.jsx("ul", { className: cn('tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs', listClassName), children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item), item.label))) })) }) }));
+}
+
+function InfoBox({ title, description, icon }) {
+    return (jsxRuntime.jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
 }
 
-function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }) {
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, }) {
     const [isOpen, setIsOpen] = react.useState(_isOpen);
     react.useEffect(() => {
         if (_isOpen)
@@ -3310,15 +3347,17 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }
                     onBackdropClick();
                 }
             }
-            : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom'), children: children }) })));
+            : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full'), children: children }) })));
 }
 
-function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {
+function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
     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] }));
+                            : 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 tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: typeof action.labelOrIcon === 'string'
+                                ? action.labelOrIcon
+                                : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
+                                ? null
+                                : action.labelOrIcon, onClick: action.onClick }))) })] }), 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 }) {
@@ -3397,12 +3436,12 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }) {
         };
     }, [isShowRouteAnimationRunning]);
     const collapseRouteSteps = () => setIsShowRouteAnimationRunning(false);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxRuntime.jsxs("button", { className: "tw-relative tw-max-h-button tw-overflow-hidden tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800", onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxRuntime.jsxs("button", { className: "tw-relative tw-max-h-button tw-max-w-[400px] tw-overflow-hidden tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800", onClick: () => {
                         // mount route component and start animation
                         setIsRouteVisible(true);
                         setIsShowRouteAnimationRunning(true);
-                    }, children: [newStepIndex > currentStepIndex && (jsxRuntime.jsx("div", { className: "tw-animate-translate-to-bottom tw-absolute -tw-top-full tw-left-0 tw-w-full", children: jsxRuntime.jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsxRuntime.jsx(CurrentStep, { className: cn(newStepIndex > currentStepIndex &&
-                                'tw-animate-translate-to-bottom', newStepIndex < currentStepIndex && 'tw-animate-translate-to-top'), currentStep: currentStep, isFirstStep: isFirstStep, isLastStep: isLastStep }), newStepIndex < currentStepIndex && (jsxRuntime.jsx("div", { className: "tw-animate-translate-to-top tw-absolute tw-left-0 tw-top-full tw-w-full", children: jsxRuntime.jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800" })] }) }), isRouteVisible && (jsxRuntime.jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
+                    }, children: [newStepIndex > currentStepIndex && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-top-full tw-left-0 tw-w-full tw-animate-translate-to-bottom", children: jsxRuntime.jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsxRuntime.jsx(CurrentStep, { className: cn(newStepIndex > currentStepIndex &&
+                                'tw-animate-translate-to-bottom', newStepIndex < currentStepIndex && 'tw-animate-translate-to-top'), currentStep: currentStep, isFirstStep: isFirstStep, isLastStep: isLastStep }), newStepIndex < currentStepIndex && (jsxRuntime.jsx("div", { className: "tw-absolute tw-left-0 tw-top-full tw-w-full tw-animate-translate-to-top", children: jsxRuntime.jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800" })] }) }), isRouteVisible && (jsxRuntime.jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
                             ? 'tw-animate-fade-in'
                             : 'tw-animate-fade-out'), onClick: collapseRouteSteps }), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-max-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
                             ? 'tw-animate-slide-to-top'
@@ -3497,8 +3536,10 @@ exports.ErrorMessage = ErrorMessage;
 exports.FeeButton = FeeButton;
 exports.HeadingText = HeadingText;
 exports.HistoryItem = HistoryItem;
+exports.InfoBox = InfoBox;
 exports.Input = Input;
 exports.ListItem = ListItem;
+exports.LoadingSkeleton = LoadingSkeleton;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
@@ -3520,4 +3561,4 @@ exports.Switch = Switch;
 exports.TokenPair = TokenPair;
 exports.Tooltip = Tooltip;
 exports.UsdAmount = UsdAmount;
-exports.useModal = useModal;
+exports.useDropdownMenu = useDropdownMenu;

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

@@ -1,2 +1,3 @@
 export * from './BadgeImage';
+export * from './LoadingSkeleton';
 export * from './UsdAmount';

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

@@ -4,8 +4,8 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     showIcon?: boolean;
     showPasteButton?: boolean;
     icon?: React.ReactNode;
-    error?: string;
+    isError?: boolean;
     onPasteButtonClick?: () => void;
 }
-export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, error, onPasteButtonClick, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 export type TooltipWidth = 'max' | 'container';
 export type TooltipThreshold = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
-interface TooltipProps {
+export interface TooltipProps {
     children: React.ReactNode;
     tooltipContent: React.ReactNode;
     threshold?: TooltipThreshold;
@@ -11,4 +11,3 @@ interface TooltipProps {
     tooltipClassName?: string;
 }
 export declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -6,3 +6,7 @@ export declare function ClockOutlineIcon({ className, size, }: {
     className?: string;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare const SettingsGearIcon: ({ size, className, }: {
+    className?: string;
+    size?: string;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,8 +2,11 @@
 import { DropdownMenuItemProps } from '../lists';
 interface DropdownMenuProps {
     dropdownRef?: React.RefObject<HTMLDivElement>;
+    menuRef?: React.RefObject<HTMLDivElement>;
     items: DropdownMenuItemProps[];
     className?: string;
+    isHidden?: boolean;
+    listClassName?: string;
 }
-export declare function DropdownMenu({ dropdownRef, items, className, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden, listClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface InfoBoxProps {
+    title: string;
+    description: string;
+    icon?: React.ReactNode;
+}
+export declare function InfoBox({ title, description, icon }: InfoBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -6,6 +6,7 @@ interface MenuProps extends React.ComponentProps<'div'> {
     title?: string;
     displayControls?: boolean;
     rounded?: Rounded;
+    menuRef?: React.RefObject<HTMLDivElement>;
 }
-export declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, menuRef, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type ModalContentBorderType = 'border' | 'outline';
+export declare function ModalContent({ children, addGap, borderType, }: {
+    children?: React.ReactNode;
+    addGap?: boolean;
+    borderType?: ModalContentBorderType;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,3 +1,8 @@
+/// <reference types="react" />
+type ActionButton = {
+    labelOrIcon: string | React.ReactNode;
+    onClick?: () => void;
+};
 interface NavigationBarProps {
     title?: string;
     displayBackButton?: boolean;
@@ -5,9 +10,7 @@ interface NavigationBarProps {
     transparent?: boolean;
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
-    onAddressButtonClick?: () => void;
-    label?: string;
-    isLoading?: boolean;
+    actions?: ActionButton[];
 }
-export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, label, onAddressButtonClick, isLoading, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,6 +2,7 @@ export * from './Boost';
 export * from './DetailsToolbar';
 export * from './DropdownMenu';
 export * from './ErrorMessage';
+export * from './InfoBox';
 export * from './Menu';
 export * from './Modal';
 export * from './NavigationBar';

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

@@ -4,5 +4,6 @@ export interface DropdownMenuItemProps {
     labelClassName?: string;
     imageUrl?: string;
     icon?: React.ReactNode;
+    onClick?: () => void;
 }
-export declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { DropdownMenuItemProps } from './DropdownMenuItem';
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;
@@ -8,6 +9,7 @@ interface HistoryItemProps {
     dateCompleted: string;
     fromAmount: string;
     toAmount: string;
+    dropdownMenuItems?: DropdownMenuItemProps[];
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { TooltipProps } from '../controls';
 export interface SettingsItemProps {
     icon: React.ReactNode;
     label: string;
@@ -6,5 +7,7 @@ export interface SettingsItemProps {
     transparentControls?: boolean;
     showHelpIcon?: boolean;
     link?: string;
+    transparent?: boolean;
+    helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-export declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, link, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, link, transparent, helpTooltip, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-export * from './useModal';
+export * from './useDropdownMenu';