@0xsquid/ui 0.13.0 → 0.13.2

package/dist/cjs/index.js

@@ -2613,20 +2613,6 @@ function UsdAmount({ usdAmount }) {
     return (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" }), jsxRuntime.jsx(CaptionText, { children: usdAmount.toString() })] }));
 }
 
-// font size, line height, and letter spacing classes
-const textClassMap$1 = {
-    small: 'tw-text-body-small tw-tracking-body-small tw-leading-body-small',
-    medium: 'tw-text-body-medium tw-tracking-body-medium tw-leading-body-medium',
-    large: 'tw-text-body-large tw-tracking-body-large tw-leading-body-large',
-};
-function BodyText(_a) {
-    var { size, children, bold } = _a, props = __rest(_a, ["size", "children", "bold"]);
-    const fontWeightClass = bold
-        ? 'tw-font-typography-bold'
-        : 'tw-font-typography-regular';
-    return (jsxRuntime.jsx("span", Object.assign({}, props, { className: cn(textClassMap$1[size], fontWeightClass, props.className), children: children })));
-}
-
 function Loader({ size = '24', strokeWidth = '1' }) {
     return (jsxRuntime.jsxs("svg", { className: "squid-animated-loader", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: [jsxRuntime.jsx("style", { children: `
     .squid-animated-loader-dash {
@@ -2654,9 +2640,63 @@ function Loader({ size = '24', strokeWidth = '1' }) {
     }` }), jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_1387_2296)", children: [jsxRuntime.jsx("circle", { cx: "7.99967", cy: "8.00004", r: "6.66667", stroke: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-thin group-data-[squid-theme-type=light]:tw-text-material-dark-thin", "stroke-width": strokeWidth }), jsxRuntime.jsx("path", { className: "squid-animated-loader-dash group-data-[squid-theme-type=dark]:tw-text-material-light-thick group-data-[squid-theme-type=light]:tw-text-material-dark-thick", d: "M14.6663 8.00004C14.6663 7.12456 14.4939 6.25766 14.1589 5.44882C13.8238 4.63998 13.3328 3.90505 12.7137 3.286C12.0947 2.66694 11.3597 2.17588 10.5509 1.84084C9.74206 1.50581 8.87515 1.33337 7.99967 1.33337", stroke: "currentColor", "stroke-width": strokeWidth, "stroke-linecap": "round" })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_1387_2296", children: jsxRuntime.jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
 }
 
+// font size, line height, and letter spacing classes
+const textClassMap$1 = {
+    small: 'tw-text-body-small tw-tracking-body-small tw-leading-body-small',
+    medium: 'tw-text-body-medium tw-tracking-body-medium tw-leading-body-medium',
+    large: 'tw-text-body-large tw-tracking-body-large tw-leading-body-large',
+};
+function BodyText(_a) {
+    var { size, children, bold } = _a, props = __rest(_a, ["size", "children", "bold"]);
+    const fontWeightClass = bold
+        ? 'tw-font-typography-bold'
+        : 'tw-font-typography-regular';
+    return (jsxRuntime.jsx("span", Object.assign({}, props, { className: cn(textClassMap$1[size], fontWeightClass, props.className), children: children })));
+}
+
+const baseButtonClassName = 'tw-border tw-relative tw-overflow-hidden tw-group/base-button tw-flex tw-items-center tw-justify-center';
+const buttonSizeClassMap = {
+    md: 'tw-px-squid-xs tw-py-squid-xxs tw-min-w-[60px] tw-h-squid-xl',
+    lg: 'tw-p-1 tw-h-button tw-w-full',
+};
+const roundedClassMap = {
+    md: 'tw-rounded-squid-m',
+    lg: 'tw-rounded-squid-xxl',
+};
+const buttonVariantClassMap = {
+    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 = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
+function Button(_a) {
+    var { label, disabled, size, variant, icon, link } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
+    const children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!disabled && jsxRuntime.jsx(ButtonHoverOverlay, { className: roundedClassMap[size] }), jsxRuntime.jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: !label && !icon ? (props.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 })] }));
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], roundedClassMap[size], 
+    // 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 })));
+}
+const ButtonHoverOverlay = ({ className }) => {
+    return (jsxRuntime.jsx("span", { className: cn('tw-absolute tw-inset-0 tw-z-0 tw-hidden tw-h-full tw-w-full tw-bg-material-light-thin group-hover/base-button:tw-block', className) }));
+};
+
 function AddressButton(_a) {
     var { label, imageUrl, badgeUrl, isLoading } = _a, props = __rest(_a, ["label", "imageUrl", "badgeUrl", "isLoading"]);
-    return (jsxRuntime.jsx("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xxl tw-items-center tw-gap-1.5 tw-rounded-squid-m tw-border  tw-border-material-light-thin tw-bg-grey-800 tw-text-grey-300', !isLoading && imageUrl ? 'tw-pl-1 tw-pr-4' : 'tw-px-4', props.className), children: isLoading ? (jsxRuntime.jsx("span", { className: "tw-mx-auto tw-px-4", children: jsxRuntime.jsx(Loader, {}) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BadgeImage, { imageUrl: imageUrl, badgeUrl: badgeUrl, extraMarginForBadge: true, rounded: true }), jsxRuntime.jsx(BodyText, { size: "small", children: label })] })) })));
+    return (jsxRuntime.jsx(Button, Object.assign({ size: "md", variant: "tertiary" }, props, { disabled: isLoading, className: !isLoading && imageUrl ? 'tw-pl-1 tw-pr-4' : '!tw-px-4', children: isLoading ? (jsxRuntime.jsx("span", { className: "tw-mx-auto tw-px-4", children: jsxRuntime.jsx(Loader, {}) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BadgeImage, { imageUrl: imageUrl, badgeUrl: badgeUrl, extraMarginForBadge: true, rounded: true }), jsxRuntime.jsx(BodyText, { size: "small", children: label })] })) })));
 }
 
 function ArrowRightIcon() {
@@ -2689,9 +2729,7 @@ function SquareArrowTopRight2Icon({ className, size = '16', }) {
 
 function ArrowButton(_a) {
     var { label, disabled } = _a, props = __rest(_a, ["label", "disabled"]);
-    return (jsxRuntime.jsxs("button", Object.assign({}, props, { disabled: disabled, className: clsx('tw-flex tw-h-button tw-w-full tw-items-center tw-justify-between tw-gap-1 tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800 tw-p-1 tw-text-grey-300', 
-        // disabled styles
-        'disabled:tw-bg-grey-800 disabled:tw-text-grey-600'), children: [jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) }), jsxRuntime.jsx("span", { "aria-disabled": disabled, className: clsx('tw-flex tw-aspect-square tw-h-[52px] tw-w-[52px] tw-items-center tw-justify-center tw-rounded-full tw-bg-royal-500 tw-text-grey-100', 
+    return (jsxRuntime.jsxs(Button, Object.assign({ size: "lg", variant: "tertiary" }, props, { disabled: disabled, children: [jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) }), jsxRuntime.jsx("span", { "aria-disabled": disabled, className: clsx('tw-flex tw-aspect-square tw-h-[52px] tw-w-[52px] tw-items-center tw-justify-center tw-rounded-full tw-bg-royal-500 tw-text-grey-100', 
                 // disabled styles
                 'aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800'), children: jsxRuntime.jsx(ArrowRightIcon, {}) })] })));
 }
@@ -2800,15 +2838,15 @@ function SearchIcon() {
 
 function Input(_a) {
     var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, isError = false, onPasteButtonClick } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "isError", "onPasteButtonClick"]);
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
 }
 const PasteButton = ({ onClick }) => {
-    return (jsxRuntime.jsx("button", { onClick: onClick, className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
+    return (jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", onClick: onClick, className: "!tw-h-[30px] !tw-w-fit tw-min-w-0 !tw-px-2", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
 };
 
 const NumericInput = (_a) => {
     var _b;
-    var { onParsedValueChanged, initialValue = '', forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice } = _a, props = __rest(_a, ["onParsedValueChanged", "initialValue", "forcedUpdateValue", "maxDecimals", "balance", "sourceTokenUsdPrice"]);
+    var { onParsedValueChanged, initialValue = '', forcedUpdateValue, maxDecimals, balance = '0', tokenPrice = 0 } = _a, props = __rest(_a, ["onParsedValueChanged", "initialValue", "forcedUpdateValue", "maxDecimals", "balance", "tokenPrice"]);
     const [inputValue, setInputValue] = react.useState(initialValue);
     // Probably a better way to handle this
     // This was introduce to handle the "MAX" button setting an amount
@@ -2924,8 +2962,12 @@ const NumericInput = (_a) => {
         }
         if (inputValue.includes('$')) {
             const usdAmount = Number(inputValue.replace('$', ''));
-            if (usdAmount > 0) {
-                const newValue = usdAmount / Number(sourceTokenUsdPrice !== null && sourceTokenUsdPrice !== void 0 ? sourceTokenUsdPrice : 0);
+            if (tokenPrice === 0 || usdAmount === 0) {
+                setInputValue('0');
+                onParsedValueChanged('0');
+            }
+            else if (usdAmount > 0) {
+                const newValue = usdAmount / Number(tokenPrice);
                 const newValueFormatted = newValue.toFixed(4);
                 setInputValue(newValueFormatted);
                 onParsedValueChanged(newValueFormatted);
@@ -3068,39 +3110,6 @@ function generateMarkerLines(count) {
     return allShadows.join(', ');
 }
 
-const baseButtonClassName = 'tw-flex tw-items-center tw-gap-squid-xxs tw-justify-center tw-border';
-const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-min-w-[60px] tw-h-squid-xl',
-    lg: 'tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
-};
-const buttonVariantClassMap = {
-    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 = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
-function Button(_a) {
-    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 }));
-    const className = cn(baseButtonClassName, 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) {
     var { label, icon } = _a, props = __rest(_a, ["label", "icon"]);
     return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsxRuntime.jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
@@ -3153,7 +3162,7 @@ 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 hover:tw-bg-material-light-thin", 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(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 }) })] })) }));
 }
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
@@ -3295,23 +3304,33 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
 }
 
 const listItemSizeMap = {
-    small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs',
-    large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
+    small: 'tw-h-list-item-small tw-px-squid-xs',
+    large: 'tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
     var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
-    return (jsxRuntime.jsx("li", Object.assign({}, containerProps, { 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-xxs', 
+    const isDetailInteractive = !!onDetailClick;
+    const DetailTag = isDetailInteractive ? 'button' : 'div';
+    const detailProps = isDetailInteractive
+        ? {
+            onClick: (event) => {
+                // prevent click event from bubbling up to parent
+                event.stopPropagation();
+                onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
+            },
+        }
+        : {};
+    const isInteractive = !!props.onClick;
+    const ItemTag = isInteractive ? 'button' : 'div';
+    const itemProps = isInteractive ? props : {};
+    return (jsxRuntime.jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover: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-xxs', 
                     // '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: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]'), 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-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] 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-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
+                            ((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-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxRuntime.jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', 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] }))] })) })));
+                        : 'tw-flex', isDetailInteractive && 'hover:tw-bg-material-light-thin', 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 }) {
@@ -3335,7 +3354,7 @@ function SettingsItem({ icon, label, control, link, transparent = false, helpToo
             target: '_blank',
         }
         : {};
-    const helpIcon = !!helpTooltip && (jsxRuntime.jsx(HelpIcon, { className: cn('tw-text-grey-600', 'tw-cursor-help tw-transition-colors tw-duration-200 hover:tw-text-grey-400') }));
+    const helpIcon = !!helpTooltip && (jsxRuntime.jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-400" }));
     const showDetailsBorder = !!control && !link && !(control.type === 'switch');
     return (jsxRuntime.jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxRuntime.jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpIcon }))] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
                         'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsxRuntime.jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (!!control && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [control.type === 'amount' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsxRuntime.jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsxRuntime.jsx(SettingsSlider, { type: control.type, value: control.value, onChange: control.onChange, hasDecimals: false, max: 999 })] })), control.type === 'switch' &&
@@ -3469,8 +3488,8 @@ function SwapInputsIcon() {
 }
 
 const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
-function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage = 5, emptyAddressLabel = 'Connect wallet', }) {
-    var _a;
+function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage = 5, emptyAddressLabel = 'Connect wallet', }) {
+    var _a, _b;
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
@@ -3478,7 +3497,7 @@ function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAm
     const BalanceChipTag = isBalanceChipInteractive ? 'button' : 'div';
     const isSwapAmountChipInteractive = !!onSwapAmountButtonClick;
     const SwapAmountChipTag = isSwapAmountChipInteractive ? 'button' : 'div';
-    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-[480px] tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", children: jsxRuntime.jsx("div", { className: "tw-animate-move-loading-cover-to-right tw-bg-dark-cover tw-h-[94px] tw-w-[1260px]" }) })), direction === 'from' ? (jsxRuntime.jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]', isFetching && 'tw-opacity-50'), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500', isFetching && 'tw-opacity-50'), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs(SwapAmountChipTag, { onClick: onSwapAmountButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isSwapAmountChipInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isBalanceChipInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
+    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-[480px] tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), direction === 'from' ? (jsxRuntime.jsx(NumericInput, { balance: balance, tokenPrice: tokenPrice, forcedUpdateValue: forcedAmount, initialValue: amount, maxDecimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]', isFetching && 'tw-opacity-50'), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500', isFetching && 'tw-opacity-50'), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs(SwapAmountChipTag, { onClick: onSwapAmountButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isSwapAmountChipInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isBalanceChipInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs(CaptionText, { children: [balance, " ", token.symbol] }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -3516,7 +3535,7 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }) {
         };
     }, [isShowRouteAnimationRunning]);
     const collapseRouteSteps = () => setIsShowRouteAnimationRunning(false);
-    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: () => {
+    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 hover:tw-bg-grey-700", onClick: () => {
                     // mount route component and start animation
                     setIsRouteVisible(true);
                     setIsShowRouteAnimationRunning(true);

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

@@ -5,7 +5,7 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
     forcedUpdateValue?: string;
     maxDecimals?: number;
     balance?: string;
-    sourceTokenUsdPrice?: number;
+    tokenPrice?: number;
 }
-export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ interface SwapConfigurationProps {
     amount?: string;
     forcedAmount?: string;
     swapAmountUsd?: string;
+    tokenPrice?: number;
     balance?: string;
     isFetching?: boolean;
     chain?: {
@@ -16,6 +17,7 @@ interface SwapConfigurationProps {
         symbol: string;
         bgColor: string;
         textColor: string;
+        decimals: number;
     };
     address?: string;
     onAmountChange?: (amount: string) => void;
@@ -29,5 +31,5 @@ interface SwapConfigurationProps {
     emptyAddressLabel?: string;
     onSwapAmountButtonClick?: () => void;
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,6 +7,8 @@ export declare const MediumPrimary: Story;
 export declare const MediumSecondary: Story;
 export declare const MediumTertiary: Story;
 export declare const MediumDisabled: Story;
+export declare const MediumAndLink: Story;
+export declare const MediumAndLinkDisabled: Story;
 export declare const MediumPrimaryIconOnly: Story;
 export declare const MediumSecondaryIconOnly: Story;
 export declare const MediumTertiaryIconOnly: Story;

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

@@ -4,21 +4,21 @@ declare const meta: Meta<typeof ListItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
+export declare const LargeInteractive: 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;
 export declare const LargeWithIcon: Story;
-export declare const LargeWithDetailAndIcon: Story;
+export declare const LargeWithDetailAndIconInteractive: Story;
 export declare const LargeShowDetailOnHoverOnly: Story;
 export declare const LargeWithSecondaryImage: Story;
 export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
 export declare const LargeLoading: Story;
 export declare const Small: Story;
+export declare const SmallInteractive: Story;
 export declare const SmallWithLongTitle: Story;
-export declare const SmallWithIcon: Story;
-export declare const SmallShowDetailOnHoverOnly: Story;
 export declare const SmallSelected: Story;
 export declare const SmallWithCustomIconAsImage: Story;

package/dist/esm/index.js

@@ -2611,20 +2611,6 @@ function UsdAmount({ usdAmount }) {
     return (jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "$" }), jsx(CaptionText, { children: usdAmount.toString() })] }));
 }
 
-// font size, line height, and letter spacing classes
-const textClassMap$1 = {
-    small: 'tw-text-body-small tw-tracking-body-small tw-leading-body-small',
-    medium: 'tw-text-body-medium tw-tracking-body-medium tw-leading-body-medium',
-    large: 'tw-text-body-large tw-tracking-body-large tw-leading-body-large',
-};
-function BodyText(_a) {
-    var { size, children, bold } = _a, props = __rest(_a, ["size", "children", "bold"]);
-    const fontWeightClass = bold
-        ? 'tw-font-typography-bold'
-        : 'tw-font-typography-regular';
-    return (jsx("span", Object.assign({}, props, { className: cn(textClassMap$1[size], fontWeightClass, props.className), children: children })));
-}
-
 function Loader({ size = '24', strokeWidth = '1' }) {
     return (jsxs("svg", { className: "squid-animated-loader", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: [jsx("style", { children: `
     .squid-animated-loader-dash {
@@ -2652,9 +2638,63 @@ function Loader({ size = '24', strokeWidth = '1' }) {
     }` }), jsxs("g", { "clip-path": "url(#clip0_1387_2296)", children: [jsx("circle", { cx: "7.99967", cy: "8.00004", r: "6.66667", stroke: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-thin group-data-[squid-theme-type=light]:tw-text-material-dark-thin", "stroke-width": strokeWidth }), jsx("path", { className: "squid-animated-loader-dash group-data-[squid-theme-type=dark]:tw-text-material-light-thick group-data-[squid-theme-type=light]:tw-text-material-dark-thick", d: "M14.6663 8.00004C14.6663 7.12456 14.4939 6.25766 14.1589 5.44882C13.8238 4.63998 13.3328 3.90505 12.7137 3.286C12.0947 2.66694 11.3597 2.17588 10.5509 1.84084C9.74206 1.50581 8.87515 1.33337 7.99967 1.33337", stroke: "currentColor", "stroke-width": strokeWidth, "stroke-linecap": "round" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_1387_2296", children: jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
 }
 
+// font size, line height, and letter spacing classes
+const textClassMap$1 = {
+    small: 'tw-text-body-small tw-tracking-body-small tw-leading-body-small',
+    medium: 'tw-text-body-medium tw-tracking-body-medium tw-leading-body-medium',
+    large: 'tw-text-body-large tw-tracking-body-large tw-leading-body-large',
+};
+function BodyText(_a) {
+    var { size, children, bold } = _a, props = __rest(_a, ["size", "children", "bold"]);
+    const fontWeightClass = bold
+        ? 'tw-font-typography-bold'
+        : 'tw-font-typography-regular';
+    return (jsx("span", Object.assign({}, props, { className: cn(textClassMap$1[size], fontWeightClass, props.className), children: children })));
+}
+
+const baseButtonClassName = 'tw-border tw-relative tw-overflow-hidden tw-group/base-button tw-flex tw-items-center tw-justify-center';
+const buttonSizeClassMap = {
+    md: 'tw-px-squid-xs tw-py-squid-xxs tw-min-w-[60px] tw-h-squid-xl',
+    lg: 'tw-p-1 tw-h-button tw-w-full',
+};
+const roundedClassMap = {
+    md: 'tw-rounded-squid-m',
+    lg: 'tw-rounded-squid-xxl',
+};
+const buttonVariantClassMap = {
+    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 = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
+function Button(_a) {
+    var { label, disabled, size, variant, icon, link } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
+    const children = (jsxs(Fragment, { children: [!disabled && jsx(ButtonHoverOverlay, { className: roundedClassMap[size] }), jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: !label && !icon ? (props.children) : size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
+                // label only
+                jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
+                // icon only
+                icon) : (
+                // icon and label
+                jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], roundedClassMap[size], 
+    // disabled styles
+    disabled && buttonDisabledClass, 
+    // custom classes from props
+    props.className);
+    if (link) {
+        return (jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }));
+    }
+    return (jsx("button", Object.assign({}, props, { "aria-disabled": disabled, className: className, disabled: disabled, children: children })));
+}
+const ButtonHoverOverlay = ({ className }) => {
+    return (jsx("span", { className: cn('tw-absolute tw-inset-0 tw-z-0 tw-hidden tw-h-full tw-w-full tw-bg-material-light-thin group-hover/base-button:tw-block', className) }));
+};
+
 function AddressButton(_a) {
     var { label, imageUrl, badgeUrl, isLoading } = _a, props = __rest(_a, ["label", "imageUrl", "badgeUrl", "isLoading"]);
-    return (jsx("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xxl tw-items-center tw-gap-1.5 tw-rounded-squid-m tw-border  tw-border-material-light-thin tw-bg-grey-800 tw-text-grey-300', !isLoading && imageUrl ? 'tw-pl-1 tw-pr-4' : 'tw-px-4', props.className), children: isLoading ? (jsx("span", { className: "tw-mx-auto tw-px-4", children: jsx(Loader, {}) })) : (jsxs(Fragment, { children: [jsx(BadgeImage, { imageUrl: imageUrl, badgeUrl: badgeUrl, extraMarginForBadge: true, rounded: true }), jsx(BodyText, { size: "small", children: label })] })) })));
+    return (jsx(Button, Object.assign({ size: "md", variant: "tertiary" }, props, { disabled: isLoading, className: !isLoading && imageUrl ? 'tw-pl-1 tw-pr-4' : '!tw-px-4', children: isLoading ? (jsx("span", { className: "tw-mx-auto tw-px-4", children: jsx(Loader, {}) })) : (jsxs(Fragment, { children: [jsx(BadgeImage, { imageUrl: imageUrl, badgeUrl: badgeUrl, extraMarginForBadge: true, rounded: true }), jsx(BodyText, { size: "small", children: label })] })) })));
 }
 
 function ArrowRightIcon() {
@@ -2687,9 +2727,7 @@ function SquareArrowTopRight2Icon({ className, size = '16', }) {
 
 function ArrowButton(_a) {
     var { label, disabled } = _a, props = __rest(_a, ["label", "disabled"]);
-    return (jsxs("button", Object.assign({}, props, { disabled: disabled, className: clsx('tw-flex tw-h-button tw-w-full tw-items-center tw-justify-between tw-gap-1 tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800 tw-p-1 tw-text-grey-300', 
-        // disabled styles
-        'disabled:tw-bg-grey-800 disabled:tw-text-grey-600'), children: [jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) }), jsx("span", { "aria-disabled": disabled, className: clsx('tw-flex tw-aspect-square tw-h-[52px] tw-w-[52px] tw-items-center tw-justify-center tw-rounded-full tw-bg-royal-500 tw-text-grey-100', 
+    return (jsxs(Button, Object.assign({ size: "lg", variant: "tertiary" }, props, { disabled: disabled, children: [jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) }), jsx("span", { "aria-disabled": disabled, className: clsx('tw-flex tw-aspect-square tw-h-[52px] tw-w-[52px] tw-items-center tw-justify-center tw-rounded-full tw-bg-royal-500 tw-text-grey-100', 
                 // disabled styles
                 'aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800'), children: jsx(ArrowRightIcon, {}) })] })));
 }
@@ -2798,15 +2836,15 @@ function SearchIcon() {
 
 function Input(_a) {
     var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, isError = false, onPasteButtonClick } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "isError", "onPasteButtonClick"]);
-    return (jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
+    return (jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
 }
 const PasteButton = ({ onClick }) => {
-    return (jsx("button", { onClick: onClick, className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsx(CaptionText, { children: "Paste" }) }));
+    return (jsx(Button, { size: "md", variant: "tertiary", onClick: onClick, className: "!tw-h-[30px] !tw-w-fit tw-min-w-0 !tw-px-2", children: jsx(CaptionText, { children: "Paste" }) }));
 };
 
 const NumericInput = (_a) => {
     var _b;
-    var { onParsedValueChanged, initialValue = '', forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice } = _a, props = __rest(_a, ["onParsedValueChanged", "initialValue", "forcedUpdateValue", "maxDecimals", "balance", "sourceTokenUsdPrice"]);
+    var { onParsedValueChanged, initialValue = '', forcedUpdateValue, maxDecimals, balance = '0', tokenPrice = 0 } = _a, props = __rest(_a, ["onParsedValueChanged", "initialValue", "forcedUpdateValue", "maxDecimals", "balance", "tokenPrice"]);
     const [inputValue, setInputValue] = useState(initialValue);
     // Probably a better way to handle this
     // This was introduce to handle the "MAX" button setting an amount
@@ -2922,8 +2960,12 @@ const NumericInput = (_a) => {
         }
         if (inputValue.includes('$')) {
             const usdAmount = Number(inputValue.replace('$', ''));
-            if (usdAmount > 0) {
-                const newValue = usdAmount / Number(sourceTokenUsdPrice !== null && sourceTokenUsdPrice !== void 0 ? sourceTokenUsdPrice : 0);
+            if (tokenPrice === 0 || usdAmount === 0) {
+                setInputValue('0');
+                onParsedValueChanged('0');
+            }
+            else if (usdAmount > 0) {
+                const newValue = usdAmount / Number(tokenPrice);
                 const newValueFormatted = newValue.toFixed(4);
                 setInputValue(newValueFormatted);
                 onParsedValueChanged(newValueFormatted);
@@ -3066,39 +3108,6 @@ function generateMarkerLines(count) {
     return allShadows.join(', ');
 }
 
-const baseButtonClassName = 'tw-flex tw-items-center tw-gap-squid-xxs tw-justify-center tw-border';
-const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-min-w-[60px] tw-h-squid-xl',
-    lg: 'tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
-};
-const buttonVariantClassMap = {
-    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 = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
-function Button(_a) {
-    var { label, disabled, size, variant, icon, link } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
-    const children = (jsx(Fragment, { children: size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
-        // label only
-        jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
-        // icon only
-        icon) : (
-        // icon and label
-        jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null }));
-    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 
-    // disabled styles
-    disabled && buttonDisabledClass, 
-    // custom classes from props
-    props.className);
-    if (link) {
-        return (jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }));
-    }
-    return (jsx("button", Object.assign({}, props, { "aria-disabled": disabled, className: className, disabled: disabled, children: children })));
-}
-
 function Chip(_a) {
     var { label, icon } = _a, props = __rest(_a, ["label", "icon"]);
     return (jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
@@ -3151,7 +3160,7 @@ 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 hover:tw-bg-material-light-thin", 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(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 }) })] })) }));
 }
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
@@ -3293,23 +3302,33 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
 }
 
 const listItemSizeMap = {
-    small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs',
-    large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
+    small: 'tw-h-list-item-small tw-px-squid-xs',
+    large: 'tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
     var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
-    return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
+    const isDetailInteractive = !!onDetailClick;
+    const DetailTag = isDetailInteractive ? 'button' : 'div';
+    const detailProps = isDetailInteractive
+        ? {
+            onClick: (event) => {
+                // prevent click event from bubbling up to parent
+                event.stopPropagation();
+                onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
+            },
+        }
+        : {};
+    const isInteractive = !!props.onClick;
+    const ItemTag = isInteractive ? 'button' : 'div';
+    const itemProps = isInteractive ? props : {};
+    return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
                     // 'large' variant has extra padding
                     size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]'), children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxs("button", { onClick: (event) => {
-                        // prevent click event from bubbling up to parent
-                        event.stopPropagation();
-                        onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
-                    }, className: cn('tw-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
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
                         ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
-                        : 'tw-flex', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) })));
+                        : 'tw-flex', isDetailInteractive && 'hover:tw-bg-material-light-thin', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })) })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
@@ -3333,7 +3352,7 @@ function SettingsItem({ icon, label, control, link, transparent = false, helpToo
             target: '_blank',
         }
         : {};
-    const helpIcon = !!helpTooltip && (jsx(HelpIcon, { className: cn('tw-text-grey-600', 'tw-cursor-help tw-transition-colors tw-duration-200 hover:tw-text-grey-400') }));
+    const helpIcon = !!helpTooltip && (jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-400" }));
     const showDetailsBorder = !!control && !link && !(control.type === 'switch');
     return (jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsx(Fragment, { children: helpIcon }))] }), jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
                         'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (!!control && (jsxs(Fragment, { children: [control.type === 'amount' && (jsxs(Fragment, { children: [jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsx(SettingsSlider, { type: control.type, value: control.value, onChange: control.onChange, hasDecimals: false, max: 999 })] })), control.type === 'switch' &&
@@ -3467,8 +3486,8 @@ function SwapInputsIcon() {
 }
 
 const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
-function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage = 5, emptyAddressLabel = 'Connect wallet', }) {
-    var _a;
+function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage = 5, emptyAddressLabel = 'Connect wallet', }) {
+    var _a, _b;
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
@@ -3476,7 +3495,7 @@ function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAm
     const BalanceChipTag = isBalanceChipInteractive ? 'button' : 'div';
     const isSwapAmountChipInteractive = !!onSwapAmountButtonClick;
     const SwapAmountChipTag = isSwapAmountChipInteractive ? 'button' : 'div';
-    return (jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-[480px] tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-animate-move-loading-cover-to-right tw-bg-dark-cover tw-h-[94px] tw-w-[1260px]" }) })), direction === 'from' ? (jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsx("div", { className: cn('tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]', isFetching && 'tw-opacity-50'), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500', isFetching && 'tw-opacity-50'), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs(SwapAmountChipTag, { onClick: onSwapAmountButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isSwapAmountChipInteractive && interactiveChipClassName), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isBalanceChipInteractive && interactiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
+    return (jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-[480px] tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), direction === 'from' ? (jsx(NumericInput, { balance: balance, tokenPrice: tokenPrice, forcedUpdateValue: forcedAmount, initialValue: amount, maxDecimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsx("div", { className: cn('tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]', isFetching && 'tw-opacity-50'), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500', isFetching && 'tw-opacity-50'), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs(SwapAmountChipTag, { onClick: onSwapAmountButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isSwapAmountChipInteractive && interactiveChipClassName), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isBalanceChipInteractive && interactiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxs(CaptionText, { children: [balance, " ", token.symbol] }), jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -3514,7 +3533,7 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }) {
         };
     }, [isShowRouteAnimationRunning]);
     const collapseRouteSteps = () => setIsShowRouteAnimationRunning(false);
-    return (jsxs(Fragment, { children: [jsxs("button", { className: "tw-group/swap-step-item-button tw-relative tw-max-h-button tw-max-w-[400px] tw-overflow-hidden tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800 tw-transition-colors tw-duration-[50ms] hover:tw-bg-grey-700", onClick: () => {
+    return (jsxs(Fragment, { children: [jsxs("button", { className: "tw-group/swap-step-item-button tw-relative tw-max-h-button tw-max-w-[400px] tw-overflow-hidden tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800 hover:tw-bg-grey-700", onClick: () => {
                     // mount route component and start animation
                     setIsRouteVisible(true);
                     setIsShowRouteAnimationRunning(true);

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

@@ -5,7 +5,7 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
     forcedUpdateValue?: string;
     maxDecimals?: number;
     balance?: string;
-    sourceTokenUsdPrice?: number;
+    tokenPrice?: number;
 }
-export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ interface SwapConfigurationProps {
     amount?: string;
     forcedAmount?: string;
     swapAmountUsd?: string;
+    tokenPrice?: number;
     balance?: string;
     isFetching?: boolean;
     chain?: {
@@ -16,6 +17,7 @@ interface SwapConfigurationProps {
         symbol: string;
         bgColor: string;
         textColor: string;
+        decimals: number;
     };
     address?: string;
     onAmountChange?: (amount: string) => void;
@@ -29,5 +31,5 @@ interface SwapConfigurationProps {
     emptyAddressLabel?: string;
     onSwapAmountButtonClick?: () => void;
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,6 +7,8 @@ export declare const MediumPrimary: Story;
 export declare const MediumSecondary: Story;
 export declare const MediumTertiary: Story;
 export declare const MediumDisabled: Story;
+export declare const MediumAndLink: Story;
+export declare const MediumAndLinkDisabled: Story;
 export declare const MediumPrimaryIconOnly: Story;
 export declare const MediumSecondaryIconOnly: Story;
 export declare const MediumTertiaryIconOnly: Story;

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

@@ -4,21 +4,21 @@ declare const meta: Meta<typeof ListItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
+export declare const LargeInteractive: 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;
 export declare const LargeWithIcon: Story;
-export declare const LargeWithDetailAndIcon: Story;
+export declare const LargeWithDetailAndIconInteractive: Story;
 export declare const LargeShowDetailOnHoverOnly: Story;
 export declare const LargeWithSecondaryImage: Story;
 export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
 export declare const LargeLoading: Story;
 export declare const Small: Story;
+export declare const SmallInteractive: Story;
 export declare const SmallWithLongTitle: Story;
-export declare const SmallWithIcon: Story;
-export declare const SmallShowDetailOnHoverOnly: Story;
 export declare const SmallSelected: Story;
 export declare const SmallWithCustomIconAsImage: Story;

package/dist/index.css

@@ -781,6 +781,10 @@ video {
   z-index: 50;
 }
 
+.tw-z-\[5\] {
+  z-index: 5;
+}
+
 .tw-m-0 {
   margin: 0px;
 }
@@ -860,6 +864,10 @@ video {
   aspect-ratio: 1 / 1;
 }
 
+.\!tw-h-\[30px\] {
+  height: 30px !important;
+}
+
 .tw-h-1 {
   height: 0.25rem;
 }
@@ -924,10 +932,6 @@ video {
   height: 30px;
 }
 
-.tw-h-\[34px\] {
-  height: 34px;
-}
-
 .tw-h-\[40px\] {
   height: 40px;
 }
@@ -1076,6 +1080,11 @@ video {
   min-height: 1.875rem;
 }
 
+.\!tw-w-fit {
+  width: -moz-fit-content !important;
+  width: fit-content !important;
+}
+
 .tw-w-1\/2 {
   width: 50%;
 }
@@ -1156,10 +1165,6 @@ video {
   width: 30px;
 }
 
-.tw-w-\[34px\] {
-  width: 34px;
-}
-
 .tw-w-\[36px\] {
   width: 36px;
 }
@@ -1274,6 +1279,10 @@ video {
   width: 3.75rem;
 }
 
+.tw-min-w-0 {
+  min-width: 0px;
+}
+
 .tw-min-w-96 {
   min-width: 24rem;
 }
@@ -1294,10 +1303,6 @@ video {
   min-width: 2.5rem;
 }
 
-.tw-min-w-squid-xxl {
-  min-width: 3.75rem;
-}
-
 .tw-max-w-\[180px\] {
   max-width: 180px;
 }
@@ -1326,14 +1331,6 @@ video {
   max-width: 100%;
 }
 
-.tw-max-w-list-item-large {
-  max-width: 23.75rem;
-}
-
-.tw-max-w-list-item-small {
-  max-width: 21.25rem;
-}
-
 .tw-max-w-none {
   max-width: none;
 }
@@ -1805,10 +1802,6 @@ video {
   border-style: solid;
 }
 
-.tw-border-grey-700 {
-  border-color: var(--squid-theme-grey-700);
-}
-
 .tw-border-grey-800 {
   border-color: var(--squid-theme-grey-800);
 }
@@ -2021,6 +2014,16 @@ video {
   padding: 0.625rem;
 }
 
+.\!tw-px-2 {
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
+.\!tw-px-4 {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
 .\!tw-px-squid-m {
   padding-left: 1.25rem !important;
   padding-right: 1.25rem !important;
@@ -2304,10 +2307,6 @@ video {
   font-weight: 400;
 }
 
-.tw-font-medium {
-  font-weight: 500;
-}
-
 .tw-font-semibold {
   font-weight: 600;
 }
@@ -2594,18 +2593,10 @@ video {
   transition-duration: 150ms;
 }
 
-.tw-duration-200 {
-  transition-duration: 200ms;
-}
-
 .tw-duration-300 {
   transition-duration: 300ms;
 }
 
-.tw-duration-\[50ms\] {
-  transition-duration: 50ms;
-}
-
 .tw-ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2749,18 +2740,14 @@ input[type='number'] {
   outline-offset: 2px;
 }
 
-.disabled\:tw-bg-grey-800:disabled {
-  background-color: var(--squid-theme-grey-800);
-}
-
-.disabled\:tw-text-grey-600:disabled {
-  color: var(--squid-theme-grey-600);
-}
-
 .disabled\:tw-opacity-60:disabled {
   opacity: 0.6;
 }
 
+.tw-group\/base-button:hover .group-hover\/base-button\:tw-block {
+  display: block;
+}
+
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-hidden {
   display: none;
 }

package/dist/index.d.ts

@@ -121,9 +121,9 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
     forcedUpdateValue?: string;
     maxDecimals?: number;
     balance?: string;
-    sourceTokenUsdPrice?: number;
+    tokenPrice?: number;
 }
-declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice, ...props }: Props) => react_jsx_runtime.JSX.Element;
+declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, tokenPrice, ...props }: Props) => react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
     value: number;
@@ -394,6 +394,7 @@ interface SwapConfigurationProps {
     amount?: string;
     forcedAmount?: string;
     swapAmountUsd?: string;
+    tokenPrice?: number;
     balance?: string;
     isFetching?: boolean;
     chain?: {
@@ -405,6 +406,7 @@ interface SwapConfigurationProps {
         symbol: string;
         bgColor: string;
         textColor: string;
+        decimals: number;
     };
     address?: string;
     onAmountChange?: (amount: string) => void;
@@ -418,7 +420,7 @@ interface SwapConfigurationProps {
     emptyAddressLabel?: string;
     onSwapAmountButtonClick?: () => void;
 }
-declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: 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.0",
+  "version": "0.13.2",
   "author": "",
   "license": "MIT",
   "scripts": {