@0xsquid/ui 0.13.8 → 0.13.10

package/dist/cjs/index.js

@@ -2831,6 +2831,12 @@ const themeTypesKeys = {
     'status-partial': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
     },
+    'grey-100-005': {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
+    },
+    'material-light-blend-grey-900': {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
+    },
 };
 
 function PlusIcon() {
@@ -2882,6 +2888,7 @@ const ANIMATION_DURATIONS = {
     CHANGE_SWAP_STEP: 300,
     SHOW_MODAL: 400,
     HIDE_MODAL: 400,
+    BOOST_BUTTON: 500,
 };
 const ANIMATION_TIMINGS = {
     EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
@@ -3107,7 +3114,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 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]) })] }) })));
+    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-xs 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 !tw-leading-[10px]", 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 = {
@@ -3133,28 +3140,13 @@ function Tooltip({ children, tooltipContent, tooltipWidth = 'container', thresho
                 'tw-animate-hide peer-hover:tw-animate-display-delayed 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', 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(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' });
-        }
-        else {
-            boostIndicatorRef.current.dataset.boostMode = 'normal';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
-        }
-    }
-    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: {
+function BoostButton({ boostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, boostIndicatorRef, }) {
+    return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-rounded-squid-m tw-pb-squid-xxs tw-text-grey-300 focus:tw-outline-none", children: [jsxRuntime.jsx("span", { className: cn('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', canToggleBoostMode &&
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxRuntime.jsx("span", { className: cn('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', canToggleBoostMode &&
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), 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/boost-toggle: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/boost-toggle: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/boost-toggle: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,
+                            } })] }), 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/boost-toggle:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
+                        transitionDuration: `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`,
                     } })] }) }));
 }
 function generateMarkerLines(count) {
@@ -3188,9 +3180,25 @@ function SettingsButton({ label, isSelected = false, onClick, }) {
 }
 
 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') })] }));
+    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(CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION, `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`);
+        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
+            boostIndicatorRef.current.dataset.boostMode = 'boost';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
+        }
+        else {
+            boostIndicatorRef.current.dataset.boostMode = 'normal';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
+        }
+    }
+    return (jsxRuntime.jsx("div", { className: "tw-bg-grey-900", children: jsxRuntime.jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: cn('tw-group/boost-toggle tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-rounded-squid-m tw-bg-grey-900 tw-pr-squid-xs', canToggleBoostMode && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, 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') })] }) }));
 }
 
 function EmojiSadIcon({ className }) {
@@ -3210,7 +3218,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, boostTooltipDisplayDelayMs = 0, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, isFlipButtonDisabled, flipButtonDisabledMessage, }) {
     const state = React.useMemo(() => {
         if (errorMessage)
             return 'error';
@@ -3221,7 +3229,8 @@ 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-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (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-group/arrow-button tw-border-transparent tw-bg-transparent", icon: jsxRuntime.jsx(ChevronLargeDownIcon, { className: "tw-transition-transform tw-duration-150 group-hover/arrow-button:tw-rotate-180" }) })) }), 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 }) })] })) }));
+    return (jsxRuntime.jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (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(Tooltip, { tooltipContent: isFlipButtonDisabled ? flipButtonDisabledMessage : undefined, tooltipWidth: "max", children: jsxRuntime.jsx("button", { disabled: isFlipButtonDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !isFlipButtonDisabled &&
+                                    'group-hover/flip-button:tw-rotate-180') }) }) })) }), 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, }) {
@@ -38875,6 +38884,7 @@ const themeKeysToReplace = [
  * @param style
  */
 const parseSquidTheme = (userTheme) => {
+    var _a;
     if (!userTheme)
         return undefined;
     const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
@@ -38914,7 +38924,11 @@ const parseSquidTheme = (userTheme) => {
     //   })
     // })
     parsed.push({
-        [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+        [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+    });
+    // color representing the blend of material-light and grey-900
+    parsed.push({
+        [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
     });
     return parsed.reduce((a, v) => {
         const key = Object.keys(v)[0];
@@ -38936,6 +38950,46 @@ function getHexColorFromOpacityPercentage(color, opacity) {
             .toString(16)
             .padStart(2, '0')).toUpperCase();
 }
+function hexToRgb(hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
+    hex = hex.replace(shorthandRegex, function (m, r, g, b, a) {
+        return r + r + g + g + b + b + (a ? a + a : '');
+    });
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+            a: result[4] ? parseInt(result[4], 16) / 255 : 1,
+        }
+        : null;
+}
+function rgbToHex(r, g, b) {
+    return ('#' +
+        [r, g, b]
+            .map((x) => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        })
+            .join(''));
+}
+// Example usage:
+// let foregroundColor = '#FBFBFD1A'
+// let bgColor = '#17191C'
+// let resultingColor = blendColors(foregroundColor, bgColor)
+// console.log(resultingColor) // Output: ~#2f3033
+function blendColors(foreground, background) {
+    let fg = hexToRgb(foreground);
+    let bg = hexToRgb(background);
+    if (!fg || !bg)
+        return null;
+    let r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
+    let g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
+    let b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
+    return rgbToHex(r, g, b);
+}
 
 function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light', }) {
     const parsedStyle = parseSquidTheme(theme);

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

@@ -1,12 +1,11 @@
+/// <reference types="react" />
 import { BoostMode } from '../../types/components';
 interface BoostButtonProps {
     boostMode: BoostMode;
     canToggleBoostMode?: boolean;
-    onToggleBoostMode?: ({ boostMode }: {
-        boostMode: BoostMode;
-    }) => void;
     boostDisabledMessage?: string;
     tooltipDisplayDelayMs?: number;
+    boostIndicatorRef: React.RefObject<HTMLDivElement>;
 }
-export declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoostButton({ boostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, boostIndicatorRef, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,6 +7,8 @@ interface DetailsToolbarProps {
     }) => void;
     onInvertSwapButtonClick?: () => void;
     onFeeButtonClick?: () => void;
+    isFlipButtonDisabled?: boolean;
+    flipButtonDisabledMessage?: string;
     feeInUsd?: string;
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
@@ -19,5 +21,5 @@ interface DetailsToolbarProps {
     };
     boostTooltipDisplayDelayMs?: number;
 }
-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 declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, isFlipButtonDisabled, flipButtonDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -21,6 +21,7 @@ export declare const ANIMATION_DURATIONS: {
     CHANGE_SWAP_STEP: number;
     SHOW_MODAL: number;
     HIDE_MODAL: number;
+    BOOST_BUTTON: number;
 };
 export declare const ANIMATION_TIMINGS: {
     EXPAND_ROUTE: string;

package/dist/cjs/types/services/internal/colorService.d.ts

@@ -36,3 +36,4 @@ export declare function getContrastColor({ r, g, b, }: {
  * @returns {string} The hexadecimal color with opacity.
  */
 export declare function getHexColorFromOpacityPercentage(color: string, opacity: number): string;
+export declare function blendColors(foreground: string, background: string): string | null;

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

@@ -3,7 +3,8 @@ import { Boost } from '../../components/layout/Boost';
 declare const meta: Meta<typeof Boost>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Normal: Story;
 export declare const Boosted: Story;
-export declare const Disabled: Story;
+export declare const NormalDisabled: Story;
+export declare const BoostedDisabled: Story;
 export declare const DisabledWithDelayedTooltip: Story;

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

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

package/dist/cjs/types/types/config.d.ts

@@ -23,6 +23,8 @@ export interface InternalSquidTheme {
     'material-dark-thin': string;
     'material-dark-average': string;
     'material-dark-thick': string;
+    'grey-100-005': string;
+    'material-light-blend-grey-900': string;
 }
 export type SquidTheme = {
     'content-100': string;

package/dist/esm/index.js

@@ -2811,6 +2811,12 @@ const themeTypesKeys = {
     'status-partial': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
     },
+    'grey-100-005': {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
+    },
+    'material-light-blend-grey-900': {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
+    },
 };
 
 function PlusIcon() {
@@ -2862,6 +2868,7 @@ const ANIMATION_DURATIONS = {
     CHANGE_SWAP_STEP: 300,
     SHOW_MODAL: 400,
     HIDE_MODAL: 400,
+    BOOST_BUTTON: 500,
 };
 const ANIMATION_TIMINGS = {
     EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
@@ -3087,7 +3094,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 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]) })] }) })));
+    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-xs 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 !tw-leading-[10px]", 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 = {
@@ -3113,28 +3120,13 @@ function Tooltip({ children, tooltipContent, tooltipWidth = 'container', thresho
                 'tw-animate-hide peer-hover:tw-animate-display-delayed 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', 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(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' });
-        }
-        else {
-            boostIndicatorRef.current.dataset.boostMode = 'normal';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
-        }
-    }
-    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: {
+function BoostButton({ boostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, boostIndicatorRef, }) {
+    return (jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-rounded-squid-m tw-pb-squid-xxs tw-text-grey-300 focus:tw-outline-none", children: [jsx("span", { className: cn('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', canToggleBoostMode &&
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsx("span", { className: cn('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', canToggleBoostMode &&
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), 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/boost-toggle: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/boost-toggle: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/boost-toggle: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,
+                            } })] }), 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/boost-toggle:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
+                        transitionDuration: `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`,
                     } })] }) }));
 }
 function generateMarkerLines(count) {
@@ -3168,9 +3160,25 @@ function SettingsButton({ label, isSelected = false, onClick, }) {
 }
 
 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') })] }));
+    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(CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION, `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`);
+        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
+            boostIndicatorRef.current.dataset.boostMode = 'boost';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
+        }
+        else {
+            boostIndicatorRef.current.dataset.boostMode = 'normal';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
+        }
+    }
+    return (jsx("div", { className: "tw-bg-grey-900", children: jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: cn('tw-group/boost-toggle tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-rounded-squid-m tw-bg-grey-900 tw-pr-squid-xs', canToggleBoostMode && 'hover:tw-bg-material-light-thin'), children: [jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, 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') })] }) }));
 }
 
 function EmojiSadIcon({ className }) {
@@ -3190,7 +3198,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, boostTooltipDisplayDelayMs = 0, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, isFlipButtonDisabled, flipButtonDisabledMessage, }) {
     const state = useMemo(() => {
         if (errorMessage)
             return 'error';
@@ -3201,7 +3209,8 @@ 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-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-group/arrow-button tw-border-transparent tw-bg-transparent", icon: jsx(ChevronLargeDownIcon, { className: "tw-transition-transform tw-duration-150 group-hover/arrow-button:tw-rotate-180" }) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
+    return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: isFlipButtonDisabled ? flipButtonDisabledMessage : undefined, tooltipWidth: "max", children: jsx("button", { disabled: isFlipButtonDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !isFlipButtonDisabled &&
+                                    'group-hover/flip-button:tw-rotate-180') }) }) })) }), 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, }) {
@@ -38855,6 +38864,7 @@ const themeKeysToReplace = [
  * @param style
  */
 const parseSquidTheme = (userTheme) => {
+    var _a;
     if (!userTheme)
         return undefined;
     const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
@@ -38894,7 +38904,11 @@ const parseSquidTheme = (userTheme) => {
     //   })
     // })
     parsed.push({
-        [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+        [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+    });
+    // color representing the blend of material-light and grey-900
+    parsed.push({
+        [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
     });
     return parsed.reduce((a, v) => {
         const key = Object.keys(v)[0];
@@ -38916,6 +38930,46 @@ function getHexColorFromOpacityPercentage(color, opacity) {
             .toString(16)
             .padStart(2, '0')).toUpperCase();
 }
+function hexToRgb(hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
+    hex = hex.replace(shorthandRegex, function (m, r, g, b, a) {
+        return r + r + g + g + b + b + (a ? a + a : '');
+    });
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+            a: result[4] ? parseInt(result[4], 16) / 255 : 1,
+        }
+        : null;
+}
+function rgbToHex(r, g, b) {
+    return ('#' +
+        [r, g, b]
+            .map((x) => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        })
+            .join(''));
+}
+// Example usage:
+// let foregroundColor = '#FBFBFD1A'
+// let bgColor = '#17191C'
+// let resultingColor = blendColors(foregroundColor, bgColor)
+// console.log(resultingColor) // Output: ~#2f3033
+function blendColors(foreground, background) {
+    let fg = hexToRgb(foreground);
+    let bg = hexToRgb(background);
+    if (!fg || !bg)
+        return null;
+    let r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
+    let g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
+    let b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
+    return rgbToHex(r, g, b);
+}
 
 function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light', }) {
     const parsedStyle = parseSquidTheme(theme);

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

@@ -1,12 +1,11 @@
+/// <reference types="react" />
 import { BoostMode } from '../../types/components';
 interface BoostButtonProps {
     boostMode: BoostMode;
     canToggleBoostMode?: boolean;
-    onToggleBoostMode?: ({ boostMode }: {
-        boostMode: BoostMode;
-    }) => void;
     boostDisabledMessage?: string;
     tooltipDisplayDelayMs?: number;
+    boostIndicatorRef: React.RefObject<HTMLDivElement>;
 }
-export declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoostButton({ boostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, boostIndicatorRef, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,6 +7,8 @@ interface DetailsToolbarProps {
     }) => void;
     onInvertSwapButtonClick?: () => void;
     onFeeButtonClick?: () => void;
+    isFlipButtonDisabled?: boolean;
+    flipButtonDisabledMessage?: string;
     feeInUsd?: string;
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
@@ -19,5 +21,5 @@ interface DetailsToolbarProps {
     };
     boostTooltipDisplayDelayMs?: number;
 }
-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 declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, isFlipButtonDisabled, flipButtonDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -21,6 +21,7 @@ export declare const ANIMATION_DURATIONS: {
     CHANGE_SWAP_STEP: number;
     SHOW_MODAL: number;
     HIDE_MODAL: number;
+    BOOST_BUTTON: number;
 };
 export declare const ANIMATION_TIMINGS: {
     EXPAND_ROUTE: string;

package/dist/esm/types/services/internal/colorService.d.ts

@@ -36,3 +36,4 @@ export declare function getContrastColor({ r, g, b, }: {
  * @returns {string} The hexadecimal color with opacity.
  */
 export declare function getHexColorFromOpacityPercentage(color: string, opacity: number): string;
+export declare function blendColors(foreground: string, background: string): string | null;

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

@@ -3,7 +3,8 @@ import { Boost } from '../../components/layout/Boost';
 declare const meta: Meta<typeof Boost>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Normal: Story;
 export declare const Boosted: Story;
-export declare const Disabled: Story;
+export declare const NormalDisabled: Story;
+export declare const BoostedDisabled: Story;
 export declare const DisabledWithDelayedTooltip: Story;

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

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

package/dist/esm/types/types/config.d.ts

@@ -23,6 +23,8 @@ export interface InternalSquidTheme {
     'material-dark-thin': string;
     'material-dark-average': string;
     'material-dark-thick': string;
+    'grey-100-005': string;
+    'material-light-blend-grey-900': string;
 }
 export type SquidTheme = {
     'content-100': string;

package/dist/index.css

@@ -1137,10 +1137,6 @@ video {
   width: 140px;
 }
 
-.tw-w-\[144px\] {
-  width: 144px;
-}
-
 .tw-w-\[150px\] {
   width: 150px;
 }
@@ -1366,11 +1362,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.tw-translate-x-1\/4 {
-  --tw-translate-x: 25%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .tw-translate-y-\[0\.5px\] {
   --tw-translate-y: 0.5px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1383,8 +1374,8 @@ video {
 
 @keyframes tw-blur-in {
   0% {
-    -webkit-backdrop-filter: blur(0px) saturate(0%);
-            backdrop-filter: blur(0px) saturate(0%);
+    -webkit-backdrop-filter: blur(0px);
+            backdrop-filter: blur(0px);
   }
 
   100% {
@@ -1406,8 +1397,8 @@ video {
   }
 
   100% {
-    -webkit-backdrop-filter: blur(0px) saturate(0%);
-            backdrop-filter: blur(0px) saturate(0%);
+    -webkit-backdrop-filter: blur(0px);
+            backdrop-filter: blur(0px);
   }
 }
 
@@ -2209,10 +2200,6 @@ video {
   padding-right: 0.625rem;
 }
 
-.tw-pr-squid-xxs {
-  padding-right: 0.3125rem;
-}
-
 .tw-pt-\[5px\] {
   padding-top: 5px;
 }
@@ -2755,6 +2742,10 @@ input[type='number'] {
   outline-offset: 2px;
 }
 
+.disabled\:tw-cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
 .tw-group\/base-button:hover .group-hover\/base-button\:tw-block {
   display: block;
 }
@@ -2763,11 +2754,17 @@ input[type='number'] {
   display: none;
 }
 
-.tw-group\/arrow-button:hover .group-hover\/arrow-button\:tw-rotate-180 {
+.tw-group\/flip-button:hover .group-hover\/flip-button\:tw-rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.tw-group\/boost-toggle:hover .group-hover\/boost-toggle\:tw-from-material-light-blend-grey-900 {
+  --tw-gradient-from: var(--squid-theme-material-light-blend-grey-900) 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\/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);
@@ -2790,7 +2787,7 @@ input[type='number'] {
   opacity: 1;
 }
 
-.tw-group:disabled .group-disabled\:tw-grayscale {
+.tw-group\/boost-toggle:disabled .group-disabled\/boost-toggle\: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);
 }

package/dist/index.d.ts

@@ -79,13 +79,11 @@ type SwapStepItemStatus = 'executed' | 'progress' | 'pending';
 interface BoostButtonProps {
     boostMode: BoostMode;
     canToggleBoostMode?: boolean;
-    onToggleBoostMode?: ({ boostMode }: {
-        boostMode: BoostMode;
-    }) => void;
     boostDisabledMessage?: string;
     tooltipDisplayDelayMs?: number;
+    boostIndicatorRef: React.RefObject<HTMLDivElement>;
 }
-declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
+declare function BoostButton({ boostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, boostIndicatorRef, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     label?: string;
@@ -189,6 +187,8 @@ interface DetailsToolbarProps {
     }) => void;
     onInvertSwapButtonClick?: () => void;
     onFeeButtonClick?: () => void;
+    isFlipButtonDisabled?: boolean;
+    flipButtonDisabledMessage?: string;
     feeInUsd?: string;
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
@@ -201,7 +201,7 @@ interface DetailsToolbarProps {
     };
     boostTooltipDisplayDelayMs?: number;
 }
-declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, isFlipButtonDisabled, flipButtonDisabledMessage, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;

package/package.json

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

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

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { BoostButton } from '../../components/buttons/BoostButton';
-declare const meta: Meta<typeof BoostButton>;
-export default meta;
-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/BoostButton.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { BoostButton } from '../../components/buttons/BoostButton';
-declare const meta: Meta<typeof BoostButton>;
-export default meta;
-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;