@0xsquid/ui 0.8.2 → 0.9.0

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

@@ -1,9 +1,13 @@
 /// <reference types="react" />
+import { TooltipProps } from '../controls';
 export interface SettingsItemProps {
     icon: React.ReactNode;
     label: string;
     controls?: React.ReactNode;
     transparentControls?: boolean;
     showHelpIcon?: boolean;
+    link?: string;
+    transparent?: boolean;
+    helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-export declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, }: 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';

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare function useDropdownMenu(props?: {
+    initialIsModalOpen?: boolean;
+}): {
+    isDropdownOpen: boolean;
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    dropdownRef: React.RefObject<HTMLDivElement>;
+    openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
+};

package/dist/cjs/types/stories/buttons/AssetsButton.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Empty: Story;
 export declare const ChainOnly: Story;
-export declare const ChainAndToken: Story;
+export declare const ChainAndTokenLightText: Story;
+export declare const ChainAndTokenDarkText: Story;
 export declare const LongTokenSymbol: Story;

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

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithoutIcon: Story;
 export declare const WithPasteButton: Story;
+export declare const Error: Story;

package/dist/cjs/types/stories/layout/ErrorMessage.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ErrorMessage>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithoutIcon: Story;

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

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

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Pending: Story;
+export declare const WithActions: Story;

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

@@ -7,3 +7,6 @@ export declare const Default: Story;
 export declare const WithControls: Story;
 export declare const WithoutHelpIcon: Story;
 export declare const TransparentControls: Story;
+export declare const Link: Story;
+export declare const Transparent: Story;
+export declare const WithHelpTooltip: Story;

package/dist/esm/index.js

@@ -2561,6 +2561,10 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
     return imageUrl ? (jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [jsx("img", { src: imageUrl, alt: "", className: cn('tw-h-full tw-w-full', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs') }), badgeUrl ? (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 (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" }) })] })] }));
+}
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -2666,10 +2670,6 @@ function ArrowButton(_a) {
                 'aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800'), children: jsx(ArrowRightIcon, {}) })] })));
 }
 
-function PlusIcon() {
-    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: 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
@@ -2776,6 +2776,10 @@ const themeTypesKeys = {
     },
 };
 
+function PlusIcon() {
+    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: 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, }) {
@@ -2795,7 +2799,7 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
                 }, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px] tw-rounded-full" }) })) : null, 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: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-text-material-light-thick" })] })] }));
+                }, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
 }
 
 function SearchIcon() {
@@ -2803,11 +2807,11 @@ function SearchIcon() {
 }
 
 function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon"]);
-    return (jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [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 focus:tw-outline-royal-500', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', className), placeholder: placeholder })), showIcon ? (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 || jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, {}) })) : 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 (jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [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 ? (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 || jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
 }
-const PasteButton = () => {
-    return (jsx("button", { 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: jsx(CaptionText, { children: "Paste" }) }));
+const PasteButton = ({ onClick }) => {
+    return (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: jsx(CaptionText, { children: "Paste" }) }));
 };
 
 const NumericInput = (_a) => {
@@ -2953,7 +2957,7 @@ function HeadingText({ children, bold, size }) {
 }
 
 function SettingsSlider({ value, type }) {
-    return (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: [jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) }), jsx(CaptionText, { className: "tw-text-grey-300", children: "%" })] })) : (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-300", children: "$" }), jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) })] })) }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
+    return (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: [jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxs(Fragment, { children: [jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-600", children: String(value) }), jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-300", children: "%" })] })) : (jsxs(Fragment, { children: [jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-300", children: "$" }), jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-600", children: String(value) })] })) }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
 }
 
 const switchSizeClassMap = {
@@ -2989,8 +2993,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 (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: 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 ? (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: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsx("div", { className: "tw-z-20", children: children })), displayControls ? (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: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, 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 (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: 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 ? (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: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsx("div", { className: "tw-z-20 tw-max-w-full", children: children })), displayControls ? (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: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, 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 = {
@@ -3088,7 +3092,7 @@ function FeeButton(_a) {
 }
 
 function SettingsButton({ label }) {
-    return (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: jsx(CaptionText, { children: label }) }));
+    return (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: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
 function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, }) {
@@ -3101,8 +3105,8 @@ 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 ErrorMessage({ message }) {
-    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsx(EmojiSadIcon, {}), jsx(CaptionText, { children: message })] }));
+function ErrorMessage({ message, showIcon = true }) {
+    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [showIcon ? jsx(EmojiSadIcon, {}) : null, jsx(CaptionText, { children: message })] }));
 }
 
 const detailStateClassMap = {
@@ -3125,21 +3129,21 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
     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 }) })] })) }));
 }
 
-function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }) {
-    return (jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-pl-squid-xxs hover:tw-bg-material-light-thin", children: [jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsx(CaptionText, { className: labelClassName, children: label })] }) }));
+function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
+    return (jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", onClick: onClick, children: 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: [jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsx(CaptionText, { className: cn(labelClassName, 'tw-max-w-full tw-truncate !tw-leading-[18px]'), children: label })] }) }));
 }
 
-function useModal(props) {
-    const [isModalOpen, setIsModalOpen] = useState(Boolean(props === null || props === void 0 ? void 0 : props.initialIsModalOpen));
-    const modalRef = useRef(null);
-    const openModalButtonRef = useRef(null);
+function useDropdownMenu(props) {
+    const [isDropdownOpen, setIsModalOpen] = useState(Boolean(props === null || props === void 0 ? void 0 : props.initialIsModalOpen));
+    const dropdownRef = useRef(null);
+    const openDropdownButtonRef = useRef(null);
     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);
             }
         };
@@ -3147,58 +3151,83 @@ function useModal(props) {
         return () => {
             document.removeEventListener('click', handleClickOutside);
         };
-    }, [modalRef]);
-    const openModal = useCallback(() => {
+    }, [dropdownRef]);
+    const openDropdown = useCallback(() => {
         setIsModalOpen((prev) => !prev);
     }, []);
-    const closeModal = useCallback(() => {
+    const closeDropdown = useCallback(() => {
         setIsModalOpen(false);
     }, []);
     return {
-        isModalOpen,
-        openModal,
-        closeModal,
-        modalRef,
-        openModalButtonRef,
+        isDropdownOpen,
+        openDropdown,
+        closeDropdown,
+        dropdownRef,
+        openDropdownButtonRef,
     };
 }
 
-function CompassRound({ 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("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" }), 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 (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: 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 (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: 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 (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [jsx("path", { d: "M10.8333 17.4999C11.2936 17.4999 11.6667 17.1269 11.6667 16.6666C11.6667 16.2064 11.2936 15.8333 10.8333 15.8333C10.3731 15.8333 10 16.2064 10 16.6666C10 17.1269 10.3731 17.4999 10.8333 17.4999Z", fill: "currentColor" }), jsx("path", { d: "M17.5 9.16661C17.5 8.70638 17.1269 8.33328 16.6667 8.33328C16.2064 8.33328 15.8333 8.70638 15.8333 9.16661C15.8333 9.62685 16.2064 9.99995 16.6667 9.99995C17.1269 9.99995 17.5 9.62685 17.5 9.16661Z", fill: "currentColor" }), jsx("path", { d: "M16.6079 11.8899C17.0065 12.12 17.143 12.6297 16.9129 13.0283C16.6828 13.4268 16.1731 13.5634 15.7746 13.3333C15.376 13.1032 15.2394 12.5935 15.4695 12.1949C15.6997 11.7964 16.2093 11.6598 16.6079 11.8899Z", fill: "currentColor" }), jsx("path", { d: "M14.473 16.0785C14.8716 15.8483 15.0081 15.3387 14.778 14.9401C14.5479 14.5415 14.0382 14.405 13.6397 14.6351C13.2411 14.8652 13.1045 15.3749 13.3347 15.7734C13.5648 16.172 14.0744 16.3086 14.473 16.0785Z", fill: "currentColor" }), jsx("path", { d: "M15.7725 6.66661C15.3739 6.89673 14.8642 6.76017 14.6341 6.36159C14.404 5.96301 14.5405 5.45335 14.9391 5.22323C15.3377 4.99312 15.8474 5.12968 16.0775 5.52826C16.3076 5.92683 16.171 6.43649 15.7725 6.66661Z", fill: "currentColor" }), jsx("path", { d: "M7.70833 12.2917V16.875H3.125M7.5 16.4063C4.93915 15.4062 3.125 12.915 3.125 10C3.125 6.20304 6.20304 3.125 10 3.125C10.9614 3.125 11.8768 3.32235 12.7077 3.67876", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-}
-
-function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', }) {
-    const { isModalOpen, modalRef, openModalButtonRef, openModal } = useModal();
-    return (jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-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 })] }), jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
-                        {
-                            label: 'Repeat swap',
-                            icon: jsx(RefreshIcon, {}),
-                        },
-                        {
-                            label: 'View on xyz',
-                            icon: jsx(CompassRound, {}),
-                        },
-                        {
-                            label: 'Clear',
-                            labelClassName: 'tw-text-status-negative',
-                            icon: jsx(CircleX, { className: "tw-text-status-negative" }),
-                        },
-                    ] })) : null] }) }));
-}
-
-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" }) })] })] }));
+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] = useState(null);
+    const itemRef = useRef(null);
+    const menuRef = useRef(null);
+    // Effect to find the best position for the dropdown menu, so it's always visible for the user
+    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 (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 })] }), jsx("div", { className: cn(!!dropdownMenuItems &&
+                                        'tw-transition-opacity group-hover/history-item:tw-opacity-0'), children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), !!dropdownMenuItems && (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: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) }))] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), 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] }) }));
 }
 
 const listItemSizeMap = {
@@ -3231,8 +3260,19 @@ 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, transparentControls = false, showHelpIcon = true, }) {
-    return (jsxs("li", { className: "tw-flex tw-h-[50px] tw-scroll-px-5 tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-grey-900 tw-px-5 tw-py-squid-xs tw-text-grey-300", 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 }), showHelpIcon ? jsx(HelpIcon, { className: "tw-text-grey-600" }) : null] }), 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 SettingsItem({ icon, label, controls, transparentControls = false, showHelpIcon = true, link, transparent = false, helpTooltip, }) {
+    const ContentTag = link ? 'a' : 'div';
+    const contentTagProps = link
+        ? {
+            href: link,
+            target: '_blank',
+        }
+        : {};
+    const helpIcon = showHelpIcon && (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 (jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900 '), 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', transparentControls ? '' : 'tw-bg-grey-800'), children: controls })] })) }));
 }
 
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
@@ -3277,8 +3317,12 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
                         }) }), !!link && (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 (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item), item.label))) }) }) }));
+function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false, listClassName, }) {
+    return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: !isHidden && (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) => (jsx(DropdownMenuItem, Object.assign({}, item), item.label))) })) }) }));
+}
+
+function InfoBox({ title, description, icon }) {
+    return (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, 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: [jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
 }
 
 function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }) {
@@ -3316,6 +3360,22 @@ function ProductCard({ children }) {
     return (jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
 }
 
+function SquidLogo() {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_133_44979)", children: jsx("path", { d: "M39.7776 17.0119L39.7737 16.9863L39.6631 16.9902C39.6631 16.9902 39.6608 17.0237 39.6601 17.027L39.6233 17.0286C39.5751 17.6494 39.4736 18.2391 39.3215 18.7807C38.9488 20.1143 38.3241 21.4615 37.5632 22.5742C36.7215 23.8061 35.7416 24.719 34.7288 25.2142C34.0969 25.5239 33.4703 25.7509 32.8673 25.8894C32.3993 25.9949 31.9376 26.0477 31.4969 26.0477C29.9688 26.0477 28.5688 25.4047 27.4473 24.1886C25.7136 22.3078 24.7097 19.075 24.9488 16.143C25.0319 15.1173 25.196 14.163 25.3544 13.2405C25.6913 11.2822 25.9816 9.59092 25.4384 7.82282C25.1471 6.87567 24.532 6.14133 23.7048 5.7539C23.1416 5.48987 22.5537 5.35623 21.956 5.35623C20.0352 5.35623 18.4503 6.70896 17.6775 7.86752C16.4976 9.63632 15.9094 11.8636 16.0657 13.9772C16.2112 15.9555 16.8969 17.2596 17.9257 19.0251C18.4417 19.9099 18.9793 20.6915 19.4545 21.3818C20.2577 22.5499 20.9513 23.5588 21.2936 24.6652C21.7681 26.1988 21.4384 26.9364 21.2743 27.1828C21.0719 27.4868 20.7471 27.6619 20.3078 27.7036C20.2517 27.7092 20.1965 27.7115 20.143 27.7115C18.8021 27.7115 18.7765 25.881 18.7614 24.7867V24.7621C18.7607 24.6899 18.759 24.6212 18.7581 24.5555C18.7125 22.4123 17.8892 21.1315 16.8461 19.5092C16.1916 18.4915 15.4501 17.3388 14.7988 15.7683C13.7572 13.2596 13.4957 10.8396 14.0221 8.57625C14.0405 8.49546 14.0605 8.41467 14.0813 8.33294C14.7204 5.81374 16.3004 2.58743 20.1949 1.5241C20.9325 1.32247 21.6901 1.22002 22.4461 1.22002C24.7357 1.22002 26.7302 2.16251 27.9173 3.80489C28.8782 5.13364 29.3735 6.64005 29.4326 8.40978C29.447 8.8305 29.4359 9.27148 29.3998 9.72014C29.3157 10.7322 29.1013 11.8417 28.7453 13.1113C28.0254 15.6778 27.851 17.8522 28.2277 19.573C28.5166 20.8929 29.1478 21.8987 29.959 22.3313C30.6165 22.6817 31.3173 22.8594 32.0414 22.8594C33.891 22.8594 35.5758 21.6794 36.4254 20.5106C37.7613 18.6722 38.4654 15.4305 38.3502 13.481C38.3078 12.7658 38.247 12.1602 38.163 11.6242L38.1607 11.6163L38.159 11.6123C36.5781 8.19395 34.071 5.29639 30.9085 3.23306C27.6647 1.11921 23.892 0 20 0C14.6575 0 9.63516 2.08009 5.85751 5.85751C2.08079 9.63516 0 14.6575 0 20C0 21.5527 0.179278 23.1015 0.533644 24.6049L0.53993 24.6312L0.651222 24.6151C0.651222 24.6151 0.649593 24.5823 0.648894 24.58L0.685681 24.5744C0.616997 23.3839 0.724796 22.2377 0.99837 21.2591C1.37113 19.9264 1.99604 18.5783 2.75669 17.4657C3.59837 16.2345 4.57835 15.3208 5.59115 14.8256C6.21839 14.5183 6.84144 14.292 7.44237 14.1527C7.91432 14.0456 8.37998 13.9919 8.82468 13.9919C10.3527 13.9919 11.7534 14.6342 12.8743 15.8503C14.6079 17.7304 15.6119 20.9639 15.3728 23.8966C15.2896 24.9229 15.1255 25.8766 14.9662 26.7991C14.6293 28.7574 14.339 30.4487 14.8822 32.2165C15.1725 33.1637 15.7886 33.8983 16.6158 34.2854C17.179 34.5495 17.7669 34.6829 18.3646 34.6829C20.2854 34.6829 21.8703 33.3302 22.6431 32.1709C23.8231 30.4021 24.4109 28.1749 24.2549 26.0615C24.1094 24.0838 23.4237 22.779 22.3949 21.0133C21.8806 20.1308 21.342 19.3476 20.8668 18.6566C20.0636 17.4885 19.37 16.4799 19.0277 15.3725C18.5532 13.8389 18.8829 13.1013 19.0461 12.8556C19.2484 12.5516 19.5732 12.3765 20.0126 12.3348C20.0687 12.3292 20.1246 12.3269 20.1774 12.3269C21.5183 12.3269 21.5439 14.1558 21.559 15.2477L21.5597 15.2789C21.5604 15.3502 21.562 15.4172 21.563 15.4822C21.6086 17.6254 22.4319 18.9062 23.475 20.5285C24.1295 21.5462 24.871 22.6997 25.5222 24.2694C26.5311 26.6983 26.8077 29.0461 26.3462 31.2477C26.3334 31.3085 26.3197 31.3693 26.3062 31.4303C25.695 34.0589 24.1262 37.4221 20.1255 38.515C19.3879 38.7166 18.6303 38.8182 17.8743 38.8189C15.5846 38.8189 13.5902 37.8766 12.403 36.2342C11.4421 34.9055 10.9471 33.3991 10.8878 31.6293C10.8789 31.3725 10.8799 31.1069 10.8894 30.8414C10.9357 29.6894 11.1607 28.4093 11.5758 26.9278C12.2957 24.3614 12.4703 22.187 12.0934 20.4661C11.8047 19.1453 11.1735 18.1404 10.3623 17.7078C9.70477 17.3574 9.00466 17.1797 8.27986 17.1797C6.43097 17.1797 4.74552 18.3597 3.89593 19.5285C2.55995 21.3669 1.85588 24.6086 1.97113 26.5581C2.04237 27.7693 2.16554 28.6598 2.37183 29.4494L2.37416 29.4559L2.37579 29.4589C5.87008 35.9597 12.6247 39.9998 19.9998 39.9998C25.3423 39.9998 30.3646 37.9197 34.1423 34.1423C37.9197 30.3646 39.9998 25.3423 39.9998 19.9998C39.9998 19.0014 39.9253 17.9958 39.7774 17.0116L39.7776 17.0119Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_133_44979", children: jsx("rect", { width: "40", height: "40", fill: "white" }) }) })] }));
+}
+
+function ProfileHeaderBackground() {
+    return (jsxs("div", { className: "tw-relative tw-flex tw-min-h-[195px] tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-overflow-hidden tw-rounded-bl-squid-l  tw-rounded-br-squid-l tw-rounded-tl-[25px] tw-rounded-tr-[25px] tw-pb-squid-s group-data-[squid-theme-type='dark']:tw-bg-royal-dark group-data-[squid-theme-type='light']:tw-bg-royal-light", children: [jsx("div", { className: "tw-h-[240px]", children: [...Array(4)].map((_, i) => (jsx(HeaderBackgroundDecorationRow, { index: i }, i))) }), jsx("div", { className: "z-10 tw-absolute tw-inset-0 tw-h-[195px] tw-shadow-inset-royal" })] }));
+}
+function HeaderBackgroundDecorationRow({ index }) {
+    const logoWithImage = (jsx(LogoContainer, { children: jsx(SquidLogo, {}) }));
+    const emptyLogo = jsx(LogoContainer, {});
+    return (jsxs("div", { className: "tw-flex tw-h-[60px] tw-w-[470px] tw-items-center tw-justify-center tw-self-stretch tw-overflow-hidden tw-text-royal-500", children: [index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage] }));
+}
+function LogoContainer({ children }) {
+    return (jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
+}
+
 function MaxIcon() {
     return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_41_20801)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_41_20801", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
@@ -3324,7 +3384,7 @@ function SwapInputsIcon() {
     return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_40_7936", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
 
-function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage = 5, }) {
+function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage = 5, emptyAddressLabel = 'Connect wallet', }) {
     var _a;
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
@@ -3332,7 +3392,7 @@ function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAm
     const isInteractive = direction === 'from';
     // improve accessibility
     const BalanceButtonTag = isInteractive ? '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 : 'Connect wallet' }), 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("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceButtonTag, { 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', isInteractive
+    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("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceButtonTag, { 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', isInteractive
                             ? 'hover:tw-bg-material-light-thin'
                             : 'tw-pointer-events-none'), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
 }
@@ -3455,4 +3515,4 @@ function SquidConfigProvider({ theme, 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, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useModal };
+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, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };

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

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

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

@@ -4,6 +4,8 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     showIcon?: boolean;
     showPasteButton?: boolean;
     icon?: React.ReactNode;
+    isError?: boolean;
+    onPasteButtonClick?: () => void;
 }
-export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, ...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/esm/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/esm/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/esm/types/components/layout/ErrorMessage.d.ts

@@ -1,3 +1,6 @@
-export declare function ErrorMessage({ message }: {
+type ErrorMessageProps = {
     message: string;
-}): import("react/jsx-runtime").JSX.Element;
+    showIcon?: boolean;
+};
+export declare function ErrorMessage({ message, showIcon }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/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/esm/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/esm/types/components/layout/ProfileHeaderBackground.d.ts

@@ -0,0 +1 @@
+export declare function ProfileHeaderBackground(): import("react/jsx-runtime").JSX.Element;

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

@@ -26,6 +26,7 @@ interface SwapConfigurationProps {
         message: string;
     };
     criticalPriceImpactPercentage?: number;
+    emptyAddressLabel?: string;
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,10 +2,12 @@ export * from './Boost';
 export * from './DetailsToolbar';
 export * from './DropdownMenu';
 export * from './ErrorMessage';
+export * from './InfoBox';
 export * from './Menu';
 export * from './Modal';
 export * from './NavigationBar';
 export * from './ProductCard';
+export * from './ProfileHeaderBackground';
 export * from './SwapConfiguration';
 export * from './SwapProgressViewHeader';
 export * from './SwapStepsCollapsed';