@0xsquid/ui 0.9.5 → 0.10.0

package/dist/cjs/index.js

@@ -2765,6 +2765,11 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
                 }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
 }
 
+const CSS_VARS = {
+    MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
+    DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
+};
+
 function SearchIcon() {
     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: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 }
@@ -2967,7 +2972,7 @@ const borderRadiusClassMap = {
 };
 function Menu(_a) {
     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]) })] }) })));
+    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 tw-text-caption", 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 = {
@@ -2983,19 +2988,25 @@ const tooltipThresholdClassMap = {
     xl: 'tw-pb-squid-xl',
     xxl: 'tw-pb-squid-xxl',
 };
-function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, }) {
-    return (jsxRuntime.jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsxRuntime.jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsxRuntime.jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
+function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, displayDelayMs = 0, }) {
+    return (jsxRuntime.jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsxRuntime.jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsxRuntime.jsx(Menu, { style: {
+                    [CSS_VARS.DISPLAY_DELAYED_DURATION]: `${displayDelayMs}ms`,
+                }, containerClassName: cn(
+                // general styles
+                'tw-absolute tw-z-40 tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', 
+                // visibility styles. Display only on hover
+                'tw-opacity-0 hover:tw-animate-display-delayed peer-hover:tw-animate-display-delayed', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
 }
 
 const animationDuration = '500ms';
-function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', }) {
+function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, }) {
     const boostIndicatorRef = react.useRef(null);
     function handleToggleBoostMode() {
         if (!boostIndicatorRef.current || !canToggleBoostMode)
             return;
         // we don't want to trigger the animation when the component is mounted
         // so we set the animation duration only when user clicks the button
-        boostIndicatorRef.current.style.setProperty('--boost-animation-duration', animationDuration);
+        boostIndicatorRef.current.style.setProperty(CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION, animationDuration);
         if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
             boostIndicatorRef.current.dataset.boostMode = 'boost';
             onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
@@ -3005,7 +3016,7 @@ function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode = true,
             onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
         }
     }
-    return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: "tw-group tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between tw-transition-transform group-disabled:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+    return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: "tw-group tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between tw-transition-transform group-disabled:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
                                 boxShadow: generateMarkerLines(40),
                             } })] }), jsxRuntime.jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors group-disabled:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
                         transitionDuration: animationDuration,
@@ -3024,30 +3035,35 @@ function generateMarkerLines(count) {
 }
 
 const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
-    lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
+    md: 'tw-flex tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
+    lg: 'tw-flex tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full tw-flex tw-items-center',
 };
 const buttonVariantClassMap = {
-    primary: 'tw-bg-royal-500 tw-text-grey-100 tw-border-material-light-thin',
+    primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100 tw-border-material-light-thin',
     secondary: 'tw-bg-grey-100 tw-text-grey-800 tw-border-material-light-thin',
     tertiary: 'tw-bg-grey-800 tw-text-grey-300 tw-border-material-light-thin',
 };
 // right now all variants have the same disabled styles
 // in the future, we can add more disabled styles for different variants
-const buttonDisabledClass = 'disabled:tw-bg-grey-800 disabled:tw-text-grey-600';
+const buttonDisabledClass = 'tw-bg-grey-800 tw-text-grey-600 tw-cursor-not-allowed';
 function Button(_a) {
-    var { label, disabled, size, variant, icon } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon"]);
-    return (jsxRuntime.jsx("button", Object.assign({}, props, { disabled: disabled, className: clsx(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
-        // disabled styles
-        buttonDisabledClass, 
-        // custom classes from props
-        props.className), children: size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
+    var { label, disabled, size, variant, icon, link } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
+    const children = (jsxRuntime.jsx(jsxRuntime.Fragment, { children: size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
         // label only
         jsxRuntime.jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
         // icon only
         icon) : (
         // icon and label
-        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })));
+        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null }));
+    const className = cn(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
+    // disabled styles
+    disabled && buttonDisabledClass, 
+    // custom classes from props
+    props.className);
+    if (link) {
+        return (jsxRuntime.jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }));
+    }
+    return (jsxRuntime.jsx("button", Object.assign({}, props, { "aria-disabled": disabled, className: className, disabled: disabled, children: children })));
 }
 
 function Chip(_a) {
@@ -3068,8 +3084,8 @@ function SettingsButton({ label, isSelected = false, }) {
     return (jsxRuntime.jsx("button", { className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
-function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsxRuntime.jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
+function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, boostTooltipDisplayDelayMs = 0, }) {
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsxRuntime.jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode, tooltipDisplayDelayMs: boostTooltipDisplayDelayMs }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
                     ? 'tw-bg-grey-300'
                     : 'tw-bg-status-positive') })] }));
 }
@@ -3088,7 +3104,7 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, }) {
     const state = react.useMemo(() => {
         if (errorMessage)
             return 'error';
@@ -3099,11 +3115,11 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    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 }) })] })) }));
+    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, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
 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 })] }) }));
+    return (jsxRuntime.jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxRuntime.jsxs("button", { onClick: onClick, className: "tw-flex tw-h-squid-l tw-w-full 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 useDropdownMenu(props) {
@@ -3210,16 +3226,18 @@ const listItemSizeMap = {
 };
 function ListItem(_a) {
     var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading"]);
-    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("div", { className: cn('tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+    // 'small' variant does not have detail
+    const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
+    return (jsxRuntime.jsx("li", { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
                     // 'large' variant has extra padding
-                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null)] }), jsxRuntime.jsxs("button", { onClick: (event) => {
+                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[14px]", children: itemTitle })) : (itemTitle), size === 'large' &&
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs tw-max-w-full tw-truncate !tw-leading-[11px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxRuntime.jsxs("button", { onClick: (event) => {
                         // prevent click event from bubbling up to parent
                         event.stopPropagation();
                         onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
-                    }, className: cn('tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
-                        ? 'tw-hidden group-hover/list-item:tw-flex'
-                        : 'tw-flex', detailButtonClassName), children: [size === 'large' && detail ? (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })] }) })));
+                    }, className: cn('tw-flex tw-w-fit tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
+                        ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
+                        : 'tw-flex', detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) }));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
@@ -3287,8 +3305,9 @@ const separatorClassMap = {
     progress: 'tw-text-grey-600',
     pending: 'tw-text-grey-600',
 };
+const colorsTransitionClass = 'tw-transition-colors tw-duration-300';
 function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, link, status = 'pending', }) {
-    return (jsxRuntime.jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-bg-grey-800 tw-text-grey-300", children: [showStepSeparator && (jsxRuntime.jsx("span", { className: separatorClassMap[status], children: jsxRuntime.jsx(SwapStepSeparator, {}) })), jsxRuntime.jsxs("a", { href: link, target: "_blank", className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClassMap[status]), children: [jsxRuntime.jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsxRuntime.jsx(Chip, { className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: typeof chipContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
+    return (jsxRuntime.jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-text-grey-300", children: [showStepSeparator && (jsxRuntime.jsx("span", { className: cn(separatorClassMap[status], colorsTransitionClass, 'tw-duration-100'), children: jsxRuntime.jsx(SwapStepSeparator, {}) })), jsxRuntime.jsxs("a", { href: link, target: "_blank", className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClassMap[status], colorsTransitionClass), children: [jsxRuntime.jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsxRuntime.jsx(Chip, { className: cn('tw-w-squid-xl', statusBgClassMap[status], colorsTransitionClass), icon: typeof chipContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
                             if (type === 'string') {
                                 return (
                                 // Instead of displaying the string into a single <BodyText />
@@ -3434,12 +3453,11 @@ 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-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-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
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { className: "tw-group/swap-step-item-button 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 tw-transition-colors tw-duration-[50ms] hover:tw-bg-grey-700", onClick: () => {
+                    // mount route component and start animation
+                    setIsRouteVisible(true);
+                    setIsShowRouteAnimationRunning(true);
+                }, 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 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), 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 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] }), 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'
@@ -3459,6 +3477,32 @@ function TokenPair({ firstToken, secondToken }) {
                 }, children: [jsxRuntime.jsx("img", { className: "tw-ml-[1px] tw-aspect-square tw-w-10", src: firstToken.imageUrl }), jsxRuntime.jsx("img", { className: "tw-mr-[1px] tw-aspect-square tw-w-10", src: secondToken.imageUrl })] })] }));
 }
 
+const lightTheme = {
+    // content
+    'content-100': '#17191C',
+    'content-200': '#292C32',
+    'content-300': '#4C515D',
+    'content-400': '#626784',
+    'content-500': '#8A8FA8',
+    'content-600': '#A7ABBE',
+    'content-700': '#D1D6E0',
+    'content-800': '#EDEEF3',
+    'content-900': '#FBFBFD',
+    // accent
+    'accent-400': '#9E79D2',
+    'accent-500': '#B893EC',
+    // status
+    'status-positive': '#11D421',
+    'status-negative': '#FF5B4D',
+    // transparent
+    'transparent-light-thin': '#17191C1A', // 10% opacity
+    'transparent-light-average': '#17191C54', // 33% opacity
+    'transparent-light-thick': '#17191CA8', // 66% opacity
+    'transparent-dark-thin': '#FBFBFD1A', // 10% opacity
+    'transparent-dark-average': '#FBFCFD54', // 33% opacity
+    'transparent-dark-thick': '#FBFCFDA8', // 66% opacity
+};
+
 const themeKeysToReplace = [
     {
         userKey: 'content',
@@ -3504,6 +3548,9 @@ const parseSquidTheme = (userTheme) => {
             const newKey = userKey.replace(keyToReplace.userKey, keyToReplace.internalKey);
             internalKeys[newKey] = userValue;
         }
+        else {
+            internalKeys[userKey] = userValue;
+        }
         return internalKeys;
     }, {});
     const styleKeys = Object.keys(themeTypesKeys);
@@ -3552,7 +3599,7 @@ function getHexColorFromOpacityPercentage(color, opacity) {
             .padStart(2, '0')).toUpperCase();
 }
 
-function SquidConfigProvider({ theme, children, themeType = 'light', }) {
+function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light', }) {
     const parsedStyle = parseSquidTheme(theme);
     return (jsxRuntime.jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }

package/dist/cjs/types/components/buttons/BoostButton.d.ts

@@ -6,6 +6,7 @@ interface BoostButtonProps {
         boostMode: BoostMode;
     }) => void;
     boostDisabledMessage?: string;
+    tooltipDisplayDelayMs?: number;
 }
-export declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/buttons/Button.d.ts

@@ -6,6 +6,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     variant: ButtonVariant;
     size: ButtonSize;
     disabled?: boolean;
+    link?: string;
 }
-export declare function Button({ label, disabled, size, variant, icon, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ label, disabled, size, variant, icon, link, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,5 +9,6 @@ export interface TooltipProps {
     containerClassName?: string;
     childrenClassName?: string;
     tooltipClassName?: string;
+    displayDelayMs?: number;
 }
-export declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, displayDelayMs, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -7,6 +7,7 @@ interface BoostProps {
     estimatedTime: string;
     boostDisabledMessage?: string;
     canToggleBoostMode?: boolean;
+    boostTooltipDisplayDelayMs?: number;
 }
-export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): import("react/jsx-runtime").JSX.Element;
+export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, boostTooltipDisplayDelayMs, }: BoostProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -17,6 +17,7 @@ interface DetailsToolbarProps {
         label: string;
         onClick: () => void;
     };
+    boostTooltipDisplayDelayMs?: number;
 }
-export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;

package/dist/cjs/types/core/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const CSS_VARS: {
+    MOVE_WITH_SPRING_BOUNCE_DURATION: string;
+    DISPLAY_DELAYED_DURATION: string;
+};

package/dist/cjs/types/core/themes.d.ts

@@ -7,4 +7,5 @@ export type Theme = {
     theme: SquidTheme;
     type: ThemeType;
 };
+export declare const lightTheme: SquidTheme;
 export declare const themes: Theme[];

package/dist/cjs/types/providers/SquidConfigProvider.d.ts

@@ -2,7 +2,7 @@
 import { ThemeType } from '../types/components';
 import { SquidTheme } from '../types/config';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {
-    theme: SquidTheme;
+    theme?: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
 export declare const Boost: Story;
 export declare const Disabled: Story;
+export declare const DisabledWithDelayedTooltip: Story;

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

@@ -19,3 +19,5 @@ export declare const LargePrimary: Story;
 export declare const LargeSecondary: Story;
 export declare const LargeTertiary: Story;
 export declare const LargeDisabled: Story;
+export declare const LargeAndLink: Story;
+export declare const LargeAndLinkDisabled: Story;

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

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Boosted: Story;
 export declare const Disabled: Story;
+export declare const DisabledWithDelayedTooltip: Story;

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

@@ -9,3 +9,4 @@ export declare const Empty: Story;
 export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
 export declare const BoostDisabled: Story;
+export declare const BoostDisabledWithDelayedTooltip: Story;

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

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
 export declare const LargeWithLongTitle: Story;
+export declare const LargeWithLongTitleAndSubtitle: Story;
 export declare const LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;

package/dist/esm/index.js

@@ -2763,6 +2763,11 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
                 }, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
 }
 
+const CSS_VARS = {
+    MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
+    DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
+};
+
 function SearchIcon() {
     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: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 }
@@ -2965,7 +2970,7 @@ const borderRadiusClassMap = {
 };
 function Menu(_a) {
     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]) })] }) })));
+    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 tw-text-caption", 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 = {
@@ -2981,19 +2986,25 @@ const tooltipThresholdClassMap = {
     xl: 'tw-pb-squid-xl',
     xxl: 'tw-pb-squid-xxl',
 };
-function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, }) {
-    return (jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
+function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, displayDelayMs = 0, }) {
+    return (jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsx(Menu, { style: {
+                    [CSS_VARS.DISPLAY_DELAYED_DURATION]: `${displayDelayMs}ms`,
+                }, containerClassName: cn(
+                // general styles
+                'tw-absolute tw-z-40 tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', 
+                // visibility styles. Display only on hover
+                'tw-opacity-0 hover:tw-animate-display-delayed peer-hover:tw-animate-display-delayed', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
 }
 
 const animationDuration = '500ms';
-function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', }) {
+function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, }) {
     const boostIndicatorRef = useRef(null);
     function handleToggleBoostMode() {
         if (!boostIndicatorRef.current || !canToggleBoostMode)
             return;
         // we don't want to trigger the animation when the component is mounted
         // so we set the animation duration only when user clicks the button
-        boostIndicatorRef.current.style.setProperty('--boost-animation-duration', animationDuration);
+        boostIndicatorRef.current.style.setProperty(CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION, animationDuration);
         if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
             boostIndicatorRef.current.dataset.boostMode = 'boost';
             onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
@@ -3003,7 +3014,7 @@ function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode = true,
             onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
         }
     }
-    return (jsx(Tooltip, { tooltipWidth: "max", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: "tw-group tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between tw-transition-transform group-disabled:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+    return (jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: "tw-group tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between tw-transition-transform group-disabled:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
                                 boxShadow: generateMarkerLines(40),
                             } })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors group-disabled:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
                         transitionDuration: animationDuration,
@@ -3022,30 +3033,35 @@ function generateMarkerLines(count) {
 }
 
 const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
-    lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
+    md: 'tw-flex tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
+    lg: 'tw-flex tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full tw-flex tw-items-center',
 };
 const buttonVariantClassMap = {
-    primary: 'tw-bg-royal-500 tw-text-grey-100 tw-border-material-light-thin',
+    primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100 tw-border-material-light-thin',
     secondary: 'tw-bg-grey-100 tw-text-grey-800 tw-border-material-light-thin',
     tertiary: 'tw-bg-grey-800 tw-text-grey-300 tw-border-material-light-thin',
 };
 // right now all variants have the same disabled styles
 // in the future, we can add more disabled styles for different variants
-const buttonDisabledClass = 'disabled:tw-bg-grey-800 disabled:tw-text-grey-600';
+const buttonDisabledClass = 'tw-bg-grey-800 tw-text-grey-600 tw-cursor-not-allowed';
 function Button(_a) {
-    var { label, disabled, size, variant, icon } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon"]);
-    return (jsx("button", Object.assign({}, props, { disabled: disabled, className: clsx(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
-        // disabled styles
-        buttonDisabledClass, 
-        // custom classes from props
-        props.className), children: size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
+    var { label, disabled, size, variant, icon, link } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
+    const children = (jsx(Fragment, { children: size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
         // label only
         jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
         // icon only
         icon) : (
         // icon and label
-        jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })));
+        jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null }));
+    const className = cn(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
+    // disabled styles
+    disabled && buttonDisabledClass, 
+    // custom classes from props
+    props.className);
+    if (link) {
+        return (jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }));
+    }
+    return (jsx("button", Object.assign({}, props, { "aria-disabled": disabled, className: className, disabled: disabled, children: children })));
 }
 
 function Chip(_a) {
@@ -3066,8 +3082,8 @@ function SettingsButton({ label, isSelected = false, }) {
     return (jsx("button", { className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
-function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, }) {
-    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
+function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, boostTooltipDisplayDelayMs = 0, }) {
+    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode, tooltipDisplayDelayMs: boostTooltipDisplayDelayMs }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
                     ? 'tw-bg-grey-300'
                     : 'tw-bg-status-positive') })] }));
 }
@@ -3086,7 +3102,7 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, }) {
     const state = useMemo(() => {
         if (errorMessage)
             return 'error';
@@ -3097,11 +3113,11 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsx("aside", { className: cn('tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
+    return (jsx("aside", { className: cn('tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
 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 })] }) }));
+    return (jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxs("button", { onClick: onClick, className: "tw-flex tw-h-squid-l tw-w-full 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 useDropdownMenu(props) {
@@ -3208,16 +3224,18 @@ const listItemSizeMap = {
 };
 function ListItem(_a) {
     var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading"]);
-    return (jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("div", { className: cn('tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+    // 'small' variant does not have detail
+    const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
+    return (jsx("li", { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
                     // 'large' variant has extra padding
-                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null)] }), jsxs("button", { onClick: (event) => {
+                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[14px]", children: itemTitle })) : (itemTitle), size === 'large' &&
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs tw-max-w-full tw-truncate !tw-leading-[11px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxs("button", { onClick: (event) => {
                         // prevent click event from bubbling up to parent
                         event.stopPropagation();
                         onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
-                    }, className: cn('tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
-                        ? 'tw-hidden group-hover/list-item:tw-flex'
-                        : 'tw-flex', detailButtonClassName), children: [size === 'large' && detail ? (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })] }) })));
+                    }, className: cn('tw-flex tw-w-fit tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
+                        ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
+                        : 'tw-flex', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) }));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
@@ -3285,8 +3303,9 @@ const separatorClassMap = {
     progress: 'tw-text-grey-600',
     pending: 'tw-text-grey-600',
 };
+const colorsTransitionClass = 'tw-transition-colors tw-duration-300';
 function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, link, status = 'pending', }) {
-    return (jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-bg-grey-800 tw-text-grey-300", children: [showStepSeparator && (jsx("span", { className: separatorClassMap[status], children: jsx(SwapStepSeparator, {}) })), jsxs("a", { href: link, target: "_blank", className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClassMap[status]), children: [jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsx(Chip, { className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: typeof chipContent === 'string' ? (jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
+    return (jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-text-grey-300", children: [showStepSeparator && (jsx("span", { className: cn(separatorClassMap[status], colorsTransitionClass, 'tw-duration-100'), children: jsx(SwapStepSeparator, {}) })), jsxs("a", { href: link, target: "_blank", className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClassMap[status], colorsTransitionClass), children: [jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsx(Chip, { className: cn('tw-w-squid-xl', statusBgClassMap[status], colorsTransitionClass), icon: typeof chipContent === 'string' ? (jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
                             if (type === 'string') {
                                 return (
                                 // Instead of displaying the string into a single <BodyText />
@@ -3432,12 +3451,11 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }) {
         };
     }, [isShowRouteAnimationRunning]);
     const collapseRouteSteps = () => setIsShowRouteAnimationRunning(false);
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full", childrenClassName: "tw-w-full tw-rounded-full", children: 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 && (jsx("div", { className: "tw-absolute -tw-top-full tw-left-0 tw-w-full tw-animate-translate-to-bottom", children: jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), 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 && (jsx("div", { className: "tw-absolute tw-left-0 tw-top-full tw-w-full tw-animate-translate-to-top", children: jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), 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" }), 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 && (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: [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
+    return (jsxs(Fragment, { children: [jsxs("button", { className: "tw-group/swap-step-item-button 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 tw-transition-colors tw-duration-[50ms] hover:tw-bg-grey-700", onClick: () => {
+                    // mount route component and start animation
+                    setIsRouteVisible(true);
+                    setIsShowRouteAnimationRunning(true);
+                }, children: [newStepIndex > currentStepIndex && (jsx("div", { className: "tw-absolute -tw-top-full tw-left-0 tw-w-full tw-animate-translate-to-bottom", children: jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), 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 && (jsx("div", { className: "tw-absolute tw-left-0 tw-top-full tw-w-full tw-animate-translate-to-top", children: jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), 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 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), 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 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] }), isRouteVisible && (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: [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 }), 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'
@@ -3457,6 +3475,32 @@ function TokenPair({ firstToken, secondToken }) {
                 }, children: [jsx("img", { className: "tw-ml-[1px] tw-aspect-square tw-w-10", src: firstToken.imageUrl }), jsx("img", { className: "tw-mr-[1px] tw-aspect-square tw-w-10", src: secondToken.imageUrl })] })] }));
 }
 
+const lightTheme = {
+    // content
+    'content-100': '#17191C',
+    'content-200': '#292C32',
+    'content-300': '#4C515D',
+    'content-400': '#626784',
+    'content-500': '#8A8FA8',
+    'content-600': '#A7ABBE',
+    'content-700': '#D1D6E0',
+    'content-800': '#EDEEF3',
+    'content-900': '#FBFBFD',
+    // accent
+    'accent-400': '#9E79D2',
+    'accent-500': '#B893EC',
+    // status
+    'status-positive': '#11D421',
+    'status-negative': '#FF5B4D',
+    // transparent
+    'transparent-light-thin': '#17191C1A', // 10% opacity
+    'transparent-light-average': '#17191C54', // 33% opacity
+    'transparent-light-thick': '#17191CA8', // 66% opacity
+    'transparent-dark-thin': '#FBFBFD1A', // 10% opacity
+    'transparent-dark-average': '#FBFCFD54', // 33% opacity
+    'transparent-dark-thick': '#FBFCFDA8', // 66% opacity
+};
+
 const themeKeysToReplace = [
     {
         userKey: 'content',
@@ -3502,6 +3546,9 @@ const parseSquidTheme = (userTheme) => {
             const newKey = userKey.replace(keyToReplace.userKey, keyToReplace.internalKey);
             internalKeys[newKey] = userValue;
         }
+        else {
+            internalKeys[userKey] = userValue;
+        }
         return internalKeys;
     }, {});
     const styleKeys = Object.keys(themeTypesKeys);
@@ -3550,7 +3597,7 @@ function getHexColorFromOpacityPercentage(color, opacity) {
             .padStart(2, '0')).toUpperCase();
 }
 
-function SquidConfigProvider({ theme, children, themeType = 'light', }) {
+function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light', }) {
     const parsedStyle = parseSquidTheme(theme);
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }

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

@@ -6,6 +6,7 @@ interface BoostButtonProps {
         boostMode: BoostMode;
     }) => void;
     boostDisabledMessage?: string;
+    tooltipDisplayDelayMs?: number;
 }
-export declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,6 +6,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     variant: ButtonVariant;
     size: ButtonSize;
     disabled?: boolean;
+    link?: string;
 }
-export declare function Button({ label, disabled, size, variant, icon, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ label, disabled, size, variant, icon, link, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,5 +9,6 @@ export interface TooltipProps {
     containerClassName?: string;
     childrenClassName?: string;
     tooltipClassName?: string;
+    displayDelayMs?: number;
 }
-export declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, displayDelayMs, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -7,6 +7,7 @@ interface BoostProps {
     estimatedTime: string;
     boostDisabledMessage?: string;
     canToggleBoostMode?: boolean;
+    boostTooltipDisplayDelayMs?: number;
 }
-export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): import("react/jsx-runtime").JSX.Element;
+export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, boostTooltipDisplayDelayMs, }: BoostProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -17,6 +17,7 @@ interface DetailsToolbarProps {
         label: string;
         onClick: () => void;
     };
+    boostTooltipDisplayDelayMs?: number;
 }
-export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;

package/dist/esm/types/core/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const CSS_VARS: {
+    MOVE_WITH_SPRING_BOUNCE_DURATION: string;
+    DISPLAY_DELAYED_DURATION: string;
+};

package/dist/esm/types/core/themes.d.ts

@@ -7,4 +7,5 @@ export type Theme = {
     theme: SquidTheme;
     type: ThemeType;
 };
+export declare const lightTheme: SquidTheme;
 export declare const themes: Theme[];

package/dist/esm/types/providers/SquidConfigProvider.d.ts

@@ -2,7 +2,7 @@
 import { ThemeType } from '../types/components';
 import { SquidTheme } from '../types/config';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {
-    theme: SquidTheme;
+    theme?: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/stories/buttons/BoostButton.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
 export declare const Boost: Story;
 export declare const Disabled: Story;
+export declare const DisabledWithDelayedTooltip: Story;

package/dist/esm/types/stories/buttons/Button.stories.d.ts

@@ -19,3 +19,5 @@ export declare const LargePrimary: Story;
 export declare const LargeSecondary: Story;
 export declare const LargeTertiary: Story;
 export declare const LargeDisabled: Story;
+export declare const LargeAndLink: Story;
+export declare const LargeAndLinkDisabled: Story;

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

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Boosted: Story;
 export declare const Disabled: Story;
+export declare const DisabledWithDelayedTooltip: Story;

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

@@ -9,3 +9,4 @@ export declare const Empty: Story;
 export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
 export declare const BoostDisabled: Story;
+export declare const BoostDisabledWithDelayedTooltip: Story;

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

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
 export declare const LargeWithLongTitle: Story;
+export declare const LargeWithLongTitleAndSubtitle: Story;
 export declare const LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;

package/dist/index.css

@@ -788,10 +788,6 @@ video {
   margin-left: -0.25rem;
 }
 
-.-tw-ml-\[5px\] {
-  margin-left: -5px;
-}
-
 .-tw-ml-squid-xs {
   margin-left: -0.625rem;
 }
@@ -888,10 +884,6 @@ video {
   height: 195px;
 }
 
-.tw-h-\[200px\] {
-  height: 200px;
-}
-
 .tw-h-\[205px\] {
   height: 205px;
 }
@@ -900,10 +892,6 @@ video {
   height: 21px;
 }
 
-.tw-h-\[22px\] {
-  height: 22px;
-}
-
 .tw-h-\[240px\] {
   height: 240px;
 }
@@ -948,10 +936,6 @@ video {
   height: 60px;
 }
 
-.tw-h-\[90px\] {
-  height: 90px;
-}
-
 .tw-h-\[95px\] {
   height: 95px;
 }
@@ -1760,10 +1744,6 @@ video {
   border-width: 1px;
 }
 
-.tw-border-\[5px\] {
-  border-width: 5px;
-}
-
 .tw-border-b {
   border-bottom-width: 1px;
 }
@@ -1792,10 +1772,6 @@ video {
   border-color: var(--squid-theme-grey-900);
 }
 
-.tw-border-material-dark-average {
-  border-color: var(--squid-theme-material-dark-average);
-}
-
 .tw-border-material-light-thick {
   border-color: var(--squid-theme-material-light-thick);
 }
@@ -1989,10 +1965,6 @@ video {
   padding: 0.625rem;
 }
 
-.tw-p-squid-xxs {
-  padding: 0.3125rem;
-}
-
 .\!tw-px-squid-m {
   padding-left: 1.25rem !important;
   padding-right: 1.25rem !important;
@@ -2296,10 +2268,18 @@ video {
   line-height: 10px !important;
 }
 
+.\!tw-leading-\[11px\] {
+  line-height: 11px !important;
+}
+
 .\!tw-leading-\[13px\] {
   line-height: 13px !important;
 }
 
+.\!tw-leading-\[14px\] {
+  line-height: 14px !important;
+}
+
 .\!tw-leading-\[18px\] {
   line-height: 18px !important;
 }
@@ -2542,6 +2522,10 @@ video {
   transition-duration: 150ms;
 }
 
+.tw-duration-100 {
+  transition-duration: 100ms;
+}
+
 .tw-duration-200 {
   transition-duration: 200ms;
 }
@@ -2550,6 +2534,10 @@ video {
   transition-duration: 300ms;
 }
 
+.tw-duration-\[50ms\] {
+  transition-duration: 50ms;
+}
+
 .tw-ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2603,13 +2591,15 @@ li {
 }
 
 button,
-input {
+input,
+a {
   outline: 2px solid transparent;
   outline-offset: -1px;
 }
 
 button:focus,
-input:focus {
+input:focus,
+a:focus {
   outline-width: 2px;
   outline-color: var(--squid-theme-royal-500);
 }
@@ -2648,8 +2638,26 @@ input[type='number'] {
   outline-color: var(--squid-theme-status-negative);
 }
 
-.hover\:tw-block:hover {
-  display: block;
+@keyframes tw-display-delayed {
+  0%, 90% {
+    display: none;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  100% {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.hover\:tw-animate-display-delayed:hover {
+  animation: tw-display-delayed var(--squid-animation-display-delayed-duration) ease-out forwards;
+}
+
+.hover\:tw-bg-grey-700:hover {
+  background-color: var(--squid-theme-grey-700);
 }
 
 .hover\:tw-bg-material-light-thin:hover {
@@ -2660,6 +2668,10 @@ input[type='number'] {
   color: var(--squid-theme-grey-400);
 }
 
+.hover\:tw-opacity-100:hover {
+  opacity: 1;
+}
+
 .focus\:tw-bg-material-light-thin:focus {
   background-color: var(--squid-theme-material-light-thin);
 }
@@ -2693,14 +2705,16 @@ input[type='number'] {
   display: block;
 }
 
-.tw-group\/list-item:hover .group-hover\/list-item\:tw-flex {
-  display: flex;
-}
-
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-hidden {
   display: none;
 }
 
+.tw-group\/swap-step-item-button:hover .group-hover\/swap-step-item-button\:tw-from-grey-700 {
+  --tw-gradient-from: var(--squid-theme-grey-700) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-opacity-0 {
   opacity: 0;
 }
@@ -2709,13 +2723,35 @@ input[type='number'] {
   opacity: 1;
 }
 
+.tw-group\/list-item:hover .group-hover\/list-item\:tw-opacity-100 {
+  opacity: 1;
+}
+
+.tw-group\/list-item:focus .group-focus\/list-item\:tw-opacity-100 {
+  opacity: 1;
+}
+
 .tw-group:disabled .group-disabled\:tw-grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.tw-peer:hover ~ .peer-hover\:tw-block {
-  display: block;
+@keyframes tw-display-delayed {
+  0%, 90% {
+    display: none;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  100% {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.tw-peer:hover ~ .peer-hover\:tw-animate-display-delayed {
+  animation: tw-display-delayed var(--squid-animation-display-delayed-duration) ease-out forwards;
 }
 
 .tw-peer:focus ~ .peer-focus\:tw-hidden {
@@ -2753,7 +2789,7 @@ input[type='number'] {
 }
 
 .data-\[boost-mode\=boost\]\:tw-animate-move-to-left-with-spring-bounce[data-boost-mode=boost] {
-  animation: tw-move-to-left-with-spring-bounce var(--boost-animation-duration, 0s) ease-out both;
+  animation: tw-move-to-left-with-spring-bounce var(--squid-animation-move-with-spring-bounce-duration, 0s) ease-out both;
 }
 
 @keyframes tw-move-to-right-with-spring-bounce {
@@ -2775,7 +2811,7 @@ input[type='number'] {
 }
 
 .data-\[boost-mode\=normal\]\:tw-animate-move-to-right-with-spring-bounce[data-boost-mode=normal] {
-  animation: tw-move-to-right-with-spring-bounce var(--boost-animation-duration, 0s) ease-out both;
+  animation: tw-move-to-right-with-spring-bounce var(--squid-animation-move-with-spring-bounce-duration, 0s) ease-out both;
 }
 
 .tw-group[data-boost-mode=boost] .group-data-\[boost-mode\=boost\]\:tw-left-\[calc\(50\%-2px\)\] {
@@ -2794,6 +2830,14 @@ input[type='number'] {
   background-image: linear-gradient(180deg, #A577D8 0%, #BF91F2 100%);
 }
 
+.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-grey-100 {
+  color: var(--squid-theme-grey-100);
+}
+
+.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-grey-900 {
+  color: var(--squid-theme-grey-900);
+}
+
 .tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-shadow-elevation-dark-2 {
   --tw-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.20), 0px 5px 20px -1px rgba(0, 0, 0, 0.33);
   --tw-shadow-colored: 0px 2px 5px 1px var(--tw-shadow-color), 0px 5px 20px -1px var(--tw-shadow-color);

package/dist/index.d.ts

@@ -72,8 +72,9 @@ interface BoostButtonProps {
         boostMode: BoostMode;
     }) => void;
     boostDisabledMessage?: string;
+    tooltipDisplayDelayMs?: number;
 }
-declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
+declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     label?: string;
@@ -81,8 +82,9 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     variant: ButtonVariant;
     size: ButtonSize;
     disabled?: boolean;
+    link?: string;
 }
-declare function Button({ label, disabled, size, variant, icon, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ label, disabled, size, variant, icon, link, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -147,8 +149,9 @@ interface TooltipProps {
     containerClassName?: string;
     childrenClassName?: string;
     tooltipClassName?: string;
+    displayDelayMs?: number;
 }
-declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, displayDelayMs, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 interface BoostProps {
     boostMode: BoostMode;
@@ -158,8 +161,9 @@ interface BoostProps {
     estimatedTime: string;
     boostDisabledMessage?: string;
     canToggleBoostMode?: boolean;
+    boostTooltipDisplayDelayMs?: number;
 }
-declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): react_jsx_runtime.JSX.Element;
+declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, boostTooltipDisplayDelayMs, }: BoostProps): react_jsx_runtime.JSX.Element;
 
 interface DetailsToolbarProps {
     errorMessage?: string;
@@ -179,8 +183,9 @@ interface DetailsToolbarProps {
         label: string;
         onClick: () => void;
     };
+    boostTooltipDisplayDelayMs?: number;
 }
-declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;
@@ -206,7 +211,7 @@ interface HistoryItemProps {
 }
 declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, itemsContainerRef, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
-interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;
@@ -466,7 +471,7 @@ type SquidTheme = {
 };
 
 declare function SquidConfigProvider({ theme, children, themeType, }: {
-    theme: SquidTheme;
+    theme?: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): react_jsx_runtime.JSX.Element;

package/package.json

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

package/dist/cjs/types/components/views/ProfileView.d.ts

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

package/dist/cjs/types/stories/views/ProfileView.stories.d.ts

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

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

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

package/dist/esm/types/stories/views/ProfileView.stories.d.ts

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