@0xsquid/ui 0.9.4 → 0.10.0

package/dist/cjs/index.js

@@ -2680,12 +2680,6 @@ const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
 const themeTypesKeys = {
-    'accent-gold': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-gold`,
-    },
-    'accent-salmon': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-salmon`,
-    },
     'grey-100': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
     },
@@ -2731,54 +2725,18 @@ const themeTypesKeys = {
     'material-light-thin': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
     },
-    'royal-100': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-100`,
-    },
-    'royal-200': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-200`,
-    },
-    'royal-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-300`,
-    },
     'royal-400': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
     },
     'royal-500': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
     },
-    'royal-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-600`,
-    },
-    'royal-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-700`,
-    },
-    'royal-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-800`,
-    },
     'status-negative': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
     },
     'status-positive': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
     },
-    'volt-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-300`,
-    },
-    'volt-400': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-400`,
-    },
-    'volt-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-600`,
-    },
-    'volt-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-700`,
-    },
-    'volt-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-800`,
-    },
-    'volt-900': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-900`,
-    },
 };
 
 function PlusIcon() {
@@ -2807,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" }) }));
 }
@@ -3009,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 = {
@@ -3025,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' });
@@ -3047,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,
@@ -3066,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) {
@@ -3110,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') })] }));
 }
@@ -3130,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';
@@ -3141,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) {
@@ -3252,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 }) {
@@ -3329,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 />
@@ -3476,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'
@@ -3501,42 +3477,111 @@ 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',
+        internalKey: 'grey',
+    },
+    {
+        userKey: 'accent',
+        internalKey: 'royal',
+    },
+    {
+        userKey: 'transparent',
+        internalKey: 'material',
+    },
+];
 /**
  * Parsing the user readable config to css variables
+ * Also maps the public theme variables to the internal theme variables
+ * example user theme:
+ * {
+ *   'content-100': '#000',
+ *   'content-200': '#000',
+ *   'accent-400': '#000',
+ *   'transparent-light-thin': '#000'
+ * }
+ * Resulting in:
+ * {
+ *   'grey-100': '#000',
+ *   'grey-200': '#000',
+ *   'royal-400': '#000',
+ *   'material-light-thin': '#000'
+ * }
  * @param style
  */
-const getParsedStyle = (style) => {
-    if (style) {
-        const styleKeys = Object.keys(themeTypesKeys);
-        const parsed = styleKeys.map((sk) => {
-            const themeItem = themeTypesKeys[sk];
-            let userValue = style[sk];
-            return {
-                [themeItem.cssVariable]: userValue,
-            };
-        });
-        // adds a variant with 0.05 opacity for each color
-        // will result in variables like this:
-        // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
-        // styleKeys.forEach((sk) => {
-        //   const themeItem = themeTypesKeys[sk]
-        //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
-        //     style[sk], // i.e "#ffffff"
-        //     0.05,
-        //   )
-        //   // { "--squid-theme-grey-100-005": "#ffffff80" }
-        //   parsed.push({
-        //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
-        //   })
-        // })
-        parsed.push({
-            [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
-        });
-        return parsed.reduce((a, v) => {
-            const key = Object.keys(v)[0];
-            return Object.assign(Object.assign({}, a), { [key]: v[key] });
-        });
-    }
+const parseSquidTheme = (userTheme) => {
+    if (!userTheme)
+        return undefined;
+    const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
+        // content-* -> grey-*
+        // accent-* -> royal-*
+        // transparent-* -> material-*
+        const keyToReplace = themeKeysToReplace.find((k) => userKey.includes(k.userKey));
+        if (keyToReplace) {
+            const newKey = userKey.replace(keyToReplace.userKey, keyToReplace.internalKey);
+            internalKeys[newKey] = userValue;
+        }
+        else {
+            internalKeys[userKey] = userValue;
+        }
+        return internalKeys;
+    }, {});
+    const styleKeys = Object.keys(themeTypesKeys);
+    const parsed = styleKeys.map((sk) => {
+        const themeItem = themeTypesKeys[sk];
+        let userValue = squidTheme[sk];
+        return {
+            [themeItem.cssVariable]: userValue,
+        };
+    });
+    // adds a variant with 0.05 opacity for each color
+    // will result in variables like this:
+    // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
+    // styleKeys.forEach((sk) => {
+    //   const themeItem = themeTypesKeys[sk]
+    //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
+    //     style[sk], // i.e "#ffffff"
+    //     0.05,
+    //   )
+    //   // { "--squid-theme-grey-100-005": "#ffffff80" }
+    //   parsed.push({
+    //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
+    //   })
+    // })
+    parsed.push({
+        [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+    });
+    return parsed.reduce((a, v) => {
+        const key = Object.keys(v)[0];
+        return Object.assign(Object.assign({}, a), { [key]: v[key] });
+    });
 };
 /**
  * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
@@ -3554,8 +3599,8 @@ function getHexColorFromOpacityPercentage(color, opacity) {
             .padStart(2, '0')).toUpperCase();
 }
 
-function SquidConfigProvider({ theme, children, themeType = 'light', }) {
-    const parsedStyle = getParsedStyle(theme);
+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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { SquidTheme } from '../types/config';
 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/services/internal/colorService.d.ts

@@ -1,9 +1,24 @@
 import { SquidTheme } from '../../types/config';
 /**
  * Parsing the user readable config to css variables
+ * Also maps the public theme variables to the internal theme variables
+ * example user theme:
+ * {
+ *   'content-100': '#000',
+ *   'content-200': '#000',
+ *   'accent-400': '#000',
+ *   'transparent-light-thin': '#000'
+ * }
+ * Resulting in:
+ * {
+ *   'grey-100': '#000',
+ *   'grey-200': '#000',
+ *   'royal-400': '#000',
+ *   'material-light-thin': '#000'
+ * }
  * @param style
  */
-export declare const getParsedStyle: (style?: SquidTheme) => {
+export declare const parseSquidTheme: (userTheme?: SquidTheme) => {
     [key: string]: string | undefined;
 } | undefined;
 export declare function getContrastColor({ r, g, b, }: {

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;