@0xsquid/ui 0.15.5 → 0.16.0

package/dist/cjs/index.js

@@ -2588,7 +2588,7 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
                             setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badgeLoaded: true })));
                         }, className: cn(badgeImageClassName, 
                         // hide badge image while it is loading, and display it when it is loaded
-                        imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
+                        imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
 }
 
 function LoadingSkeleton({ className, height = '20', }) {
@@ -2845,8 +2845,22 @@ function PlusIcon() {
 }
 
 const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
-const defaultBgColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
-function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, onClick, }) {
+const themeKeyVariantMap = {
+    primary: 'grey-800',
+    accent: 'royal-500',
+};
+const buttonTextClassNameMap = {
+    primary: 'tw-text-grey-300',
+    accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
+};
+const emptyChainIconTextClassNameMap = {
+    primary: 'tw-text-grey-100',
+    accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
+};
+function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant = 'primary', }) {
+    const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
+    const chainBgColor = _chainBgColor !== null && _chainBgColor !== void 0 ? _chainBgColor : defaultBgColor;
+    const tokenBgColor = _tokenBgColor !== null && _tokenBgColor !== void 0 ? _tokenBgColor : defaultBgColor;
     const bgGradient = React.useMemo(() => {
         if (!chainImageUrl) {
             return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
@@ -2856,9 +2870,9 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
         }
         return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
     }, [chainBgColor, tokenBgColor]);
-    return (jsxRuntime.jsxs("button", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100 focus:tw-outline-none", children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    return (jsxRuntime.jsxs("button", { onClick: onClick, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant]), children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
                     backgroundImage: bgGradient,
-                }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
+                }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
                             backgroundColor: tokenBgColor,
                         } }), jsxRuntime.jsx("img", { src: tokenImageUrl, alt: tokenSymbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n            tw-border-t tw-border-material-light-thin" })] })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
@@ -2904,11 +2918,12 @@ function SearchIcon() {
 }
 
 function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, isError = false, onPasteButtonClick, containerClassName } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "isError", "onPasteButtonClick", "containerClassName"]);
-    return (jsxRuntime.jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), 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] }));
+    var { placeholder = 'Search', showIcon = true, className, icon, isError = false, containerClassName, actionButtonProps } = _a, props = __rest(_a, ["placeholder", "showIcon", "className", "icon", "isError", "containerClassName", "actionButtonProps"]);
+    const showActionButton = !!actionButtonProps;
+    return (jsxRuntime.jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), 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-[40px]' : 'tw-px-2.5', showActionButton ? 'tw-pr-[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, showActionButton ? (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(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
 }
-const PasteButton = ({ onClick }) => {
-    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 InputActionButton = ({ onClick, variant = 'tertiary', label = 'Paste', }) => {
+    return (jsxRuntime.jsx(Button, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
 };
 
 /*
@@ -6502,7 +6517,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(Tooltip, { tooltipContent: isFlipButtonDisabled ? flipButtonDisabledMessage : undefined, tooltipWidth: "max", children: jsxRuntime.jsx("button", { disabled: isFlipButtonDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !isFlipButtonDisabled &&
+    return (jsxRuntime.jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-card tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Tooltip, { tooltipContent: isFlipButtonDisabled ? flipButtonDisabledMessage : undefined, tooltipWidth: "max", children: jsxRuntime.jsx("button", { disabled: isFlipButtonDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !isFlipButtonDisabled &&
                                     'group-hover/flip-button:tw-rotate-180') }) }) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
@@ -6670,7 +6685,7 @@ function ListItem(_a) {
     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.jsxs(CaptionText, { className: subtitleClassName, children: [jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover }), 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
+                            ((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.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), 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', 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] })))] })) })));
 }
@@ -6858,7 +6873,7 @@ function NavigationBar({ title, displayBackButton = false, logoUrl, transparent
 }
 
 function ProductCard({ children }) {
-    return (jsxRuntime.jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
+    return (jsxRuntime.jsx("div", { className: "group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-3 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-3 tw-relative tw-flex tw-h-card tw-min-h-card tw-w-card tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin", children: children }));
 }
 function BorderedContainer({ children, className, }) {
     return (jsxRuntime.jsx("section", { className: cn('tw-border-t tw-border-t-material-light-thin', className), children: children }));
@@ -6882,7 +6897,7 @@ function LogoContainer({ children }) {
 
 function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, }) {
     var _a, _b;
-    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" }) })), jsxRuntime.jsx(NumericInput, { token: {
+    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-card 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" }) })), jsxRuntime.jsx(NumericInput, { token: {
                     decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
                     symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : '',
                     price: tokenPrice,
@@ -7140,18 +7155,65 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                                             : amountFormatted }), ' ', jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: cn('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(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
 }
 
-function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsx("input", { min: min !== null && min !== void 0 ? min : 0, max: max !== null && max !== void 0 ? max : 99, step: hasDecimals ? 0.1 : 1, placeholder: "0", type: "number", onChange: (e) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(Number(e.target.value));
-                }, className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-bg-transparent tw-p-squid-xs tw-text-caption !tw-font-medium tw-leading-[10px] tw-text-grey-300 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', type === 'percentage'
-                    ? 'tw-w-[84px] tw-pr-[52px] tw-text-right'
-                    : 'tw-w-[80px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsxRuntime.jsx(PercentageDecorator, {}), type === 'amount' && jsxRuntime.jsx(AmountDecorator, {})] }));
-}
-function PercentageDecorator() {
-    return (jsxRuntime.jsxs("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: [jsxRuntime.jsx(CaptionText, { className: "tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "%" }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
-}
-function AmountDecorator() {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-absolute tw-left-squid-xs tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "$" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) })] }));
+function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }) {
+    const [isInputVisible, setIsInputVisible] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState(String(value !== null && value !== void 0 ? value : 0));
+    React.useEffect(() => {
+        if (!isInputVisible)
+            return;
+        const handleOutsideClick = (event) => {
+            var _a;
+            const clickedElementIsDifferentThanMenu = event.target !== menuRef.current;
+            const clickedElementIsDifferentThanSlider = event.target !== sliderRef.current;
+            const sliderContainsClickedElement = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
+            const hideInput = clickedElementIsDifferentThanMenu &&
+                (!clickedElementIsDifferentThanSlider || !sliderContainsClickedElement);
+            if (hideInput) {
+                handleCloseInput();
+            }
+        };
+        document.addEventListener('click', handleOutsideClick);
+        return () => {
+            document.removeEventListener('click', handleOutsideClick);
+        };
+    }, [isInputVisible]);
+    const menuRef = React.useRef(null);
+    const sliderRef = React.useRef(null);
+    const handleSubmit = React.useCallback((value) => {
+        handleCloseInput();
+        onChange === null || onChange === void 0 ? void 0 : onChange(value === '' ? undefined : Number(value));
+    }, [onChange]);
+    const handleKeyDown = React.useCallback((e) => {
+        // block unwanted (but still valid) characters
+        if (['e', 'E', '+', '-'].includes(e.key))
+            return e.preventDefault();
+        // close input when pressing escape
+        if (e.key === 'Escape')
+            return handleCloseInput();
+    }, []);
+    const handleOpenInput = React.useCallback(() => {
+        setIsInputVisible(true);
+    }, []);
+    const handleCloseInput = React.useCallback(() => {
+        setIsInputVisible(false);
+    }, []);
+    return (jsxRuntime.jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsxs("button", { className: cn('tw-relative tw-flex tw-h-[32px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xs tw-pr-[40px] tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', value === 0 || value === undefined
+                    ? 'tw-text-grey-600'
+                    : 'tw-text-grey-300', isInputVisible ? 'tw-bg-material-light-thin' : 'tw-bg-transparent'), children: [value !== null && value !== void 0 ? value : 0, jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === 'percentage' ? '%' : '$' })] }), jsxRuntime.jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsxRuntime.jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsxRuntime.jsx("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        handleSubmit(inputValue);
+                    }, children: jsxRuntime.jsx(Input, { autoFocus: true, min: min, max: max, onKeyDown: handleKeyDown, step: decimalsFormat, placeholder: "0", type: "number", defaultValue: value, value: inputValue, onChange: (e) => {
+                            const isValid = e.target.checkValidity();
+                            if (!isValid)
+                                return;
+                            setInputValue(e.target.value);
+                        }, showIcon: false, actionButtonProps: {
+                            label: 'Ok',
+                            onClick: () => {
+                                handleSubmit(inputValue);
+                            },
+                            variant: 'primary',
+                        } }) }) }))] }));
 }
 
 const switchSizeClassMap = {
@@ -42409,8 +42471,8 @@ const lightTheme = {
     // content
     'content-100': '#17191C',
     'content-200': '#292C32',
-    'content-300': '#4C515D',
-    'content-400': '#626784',
+    'content-300': '#292C32',
+    'content-400': '#676B7E',
     'content-500': '#8A8FA8',
     'content-600': '#A7ABBE',
     'content-700': '#D1D6E0',
@@ -42420,7 +42482,7 @@ const lightTheme = {
     'accent-400': '#9E79D2',
     'accent-500': '#B893EC',
     // status
-    'status-positive': '#11D421',
+    'status-positive': '#17CF26',
     'status-negative': '#FF5B4D',
     'status-warning': '#EC9213',
 };

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

@@ -1,3 +1,4 @@
+type AssetsButtonVariant = 'primary' | 'accent';
 interface AssetsButtonProps {
     tokenImageUrl?: string;
     chainImageUrl?: string;
@@ -6,6 +7,7 @@ interface AssetsButtonProps {
     tokenBgColor?: string;
     tokenTextColor?: string;
     onClick?: () => void;
+    variant?: AssetsButtonVariant;
 }
-export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, onClick, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,12 +1,17 @@
 /// <reference types="react" />
+import { ButtonVariant } from '../../types/components';
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
     showIcon?: boolean;
-    showPasteButton?: boolean;
     icon?: React.ReactNode;
     isError?: boolean;
-    onPasteButtonClick?: () => void;
     containerClassName?: string;
+    actionButtonProps?: InputActionButtonProps;
 }
-export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, containerClassName, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+type InputActionButtonProps = {
+    onClick?: () => void;
+    variant?: ButtonVariant;
+    label?: string;
+};
 export {};

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

@@ -1,9 +1,9 @@
 export interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
-    onChange?: (value: number) => void;
-    hasDecimals?: boolean;
+    onChange?: (value: number | undefined) => void;
+    decimalsFormat?: number;
     min?: number;
     max?: number;
 }
-export declare function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DropdownMenuItemProps } from './DropdownMenuItem';
-type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
+import { HistoryItemStatus } from '../../types/components';
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;

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

@@ -3,7 +3,8 @@ import { AssetsButton } from '../../components/buttons/AssetsButton';
 declare const meta: Meta<typeof AssetsButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
+export declare const PrimaryVariantEmpty: Story;
+export declare const AccentVariantEmpty: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndTokenLightText: Story;
 export declare const ChainAndTokenDarkText: Story;

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

@@ -5,5 +5,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithoutIcon: Story;
-export declare const WithPasteButton: Story;
+export declare const WithActionButton: Story;
 export declare const Error: Story;

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

@@ -5,3 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Percentage: Story;
 export declare const Amount: Story;
+export declare const PercentageWith1DecimalPlaceAllowed: Story;
+export declare const AmountWith2DecimalPlacesAllowed: Story;
+export declare const PercentageMax50: Story;
+export declare const AmountMax999: Story;

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

@@ -4,6 +4,7 @@ export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 export type ButtonSize = 'md' | 'lg';
 export type SwapDirection = 'from' | 'to';
 export type BoostMode = 'normal' | 'boost';
+export type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
 export type SwapStepDescriptionBlock = {
     type: 'string';
     value: string;

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

@@ -1,2 +1,2 @@
 export type { SquidTheme } from './config';
-export type { SwapState, ThemeType, SwapStep, SwapStepItemStatus, } from './components';
+export type { SwapState, ThemeType, SwapStep, SwapStepItemStatus, HistoryItemStatus, } from './components';

package/dist/esm/index.js

@@ -2568,7 +2568,7 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
                             setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badgeLoaded: true })));
                         }, className: cn(badgeImageClassName, 
                         // hide badge image while it is loading, and display it when it is loaded
-                        imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
+                        imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
 }
 
 function LoadingSkeleton({ className, height = '20', }) {
@@ -2825,8 +2825,22 @@ function PlusIcon() {
 }
 
 const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
-const defaultBgColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
-function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, onClick, }) {
+const themeKeyVariantMap = {
+    primary: 'grey-800',
+    accent: 'royal-500',
+};
+const buttonTextClassNameMap = {
+    primary: 'tw-text-grey-300',
+    accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
+};
+const emptyChainIconTextClassNameMap = {
+    primary: 'tw-text-grey-100',
+    accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
+};
+function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant = 'primary', }) {
+    const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
+    const chainBgColor = _chainBgColor !== null && _chainBgColor !== void 0 ? _chainBgColor : defaultBgColor;
+    const tokenBgColor = _tokenBgColor !== null && _tokenBgColor !== void 0 ? _tokenBgColor : defaultBgColor;
     const bgGradient = useMemo(() => {
         if (!chainImageUrl) {
             return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
@@ -2836,9 +2850,9 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
         }
         return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
     }, [chainBgColor, tokenBgColor]);
-    return (jsxs("button", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100 focus:tw-outline-none", children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    return (jsxs("button", { onClick: onClick, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant]), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
                     backgroundImage: bgGradient,
-                }, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
+                }, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
                             backgroundColor: tokenBgColor,
                         } }), jsx("img", { src: tokenImageUrl, alt: tokenSymbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n            tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
@@ -2884,11 +2898,12 @@ function SearchIcon() {
 }
 
 function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, isError = false, onPasteButtonClick, containerClassName } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "isError", "onPasteButtonClick", "containerClassName"]);
-    return (jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), 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] }));
+    var { placeholder = 'Search', showIcon = true, className, icon, isError = false, containerClassName, actionButtonProps } = _a, props = __rest(_a, ["placeholder", "showIcon", "className", "icon", "isError", "containerClassName", "actionButtonProps"]);
+    const showActionButton = !!actionButtonProps;
+    return (jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), 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-[40px]' : 'tw-px-2.5', showActionButton ? 'tw-pr-[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, showActionButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
 }
-const PasteButton = ({ onClick }) => {
-    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 InputActionButton = ({ onClick, variant = 'tertiary', label = 'Paste', }) => {
+    return (jsx(Button, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0", children: jsx(CaptionText, { children: label }) }));
 };
 
 /*
@@ -6482,7 +6497,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(Tooltip, { tooltipContent: isFlipButtonDisabled ? flipButtonDisabledMessage : undefined, tooltipWidth: "max", children: jsx("button", { disabled: isFlipButtonDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !isFlipButtonDisabled &&
+    return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-card tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: isFlipButtonDisabled ? flipButtonDisabledMessage : undefined, tooltipWidth: "max", children: jsx("button", { disabled: isFlipButtonDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !isFlipButtonDisabled &&
                                     'group-hover/flip-button:tw-rotate-180') }) }) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
@@ -6650,7 +6665,7 @@ function ListItem(_a) {
     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 ? (jsxs(CaptionText, { className: subtitleClassName, children: [jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover }), 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
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), 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', 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] })))] })) })));
 }
@@ -6838,7 +6853,7 @@ function NavigationBar({ title, displayBackButton = false, logoUrl, transparent
 }
 
 function ProductCard({ children }) {
-    return (jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur/10 tw-backdrop-saturate-150", children: jsx("div", { className: "tw-relative tw-flex tw-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
+    return (jsx("div", { className: "group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-3 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-3 tw-relative tw-flex tw-h-card tw-min-h-card tw-w-card tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin", children: children }));
 }
 function BorderedContainer({ children, className, }) {
     return (jsx("section", { className: cn('tw-border-t tw-border-t-material-light-thin', className), children: children }));
@@ -6862,7 +6877,7 @@ function LogoContainer({ children }) {
 
 function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, }) {
     var _a, _b;
-    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" }) })), jsx(NumericInput, { token: {
+    return (jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-card 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" }) })), jsx(NumericInput, { token: {
                     decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
                     symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : '',
                     price: tokenPrice,
@@ -7120,18 +7135,65 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                                             : amountFormatted }), ' ', jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsx(MaxIcon, {})] })] }))] }));
 }
 
-function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }) {
-    return (jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsx("input", { min: min !== null && min !== void 0 ? min : 0, max: max !== null && max !== void 0 ? max : 99, step: hasDecimals ? 0.1 : 1, placeholder: "0", type: "number", onChange: (e) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(Number(e.target.value));
-                }, className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-bg-transparent tw-p-squid-xs tw-text-caption !tw-font-medium tw-leading-[10px] tw-text-grey-300 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', type === 'percentage'
-                    ? 'tw-w-[84px] tw-pr-[52px] tw-text-right'
-                    : 'tw-w-[80px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsx(PercentageDecorator, {}), type === 'amount' && jsx(AmountDecorator, {})] }));
-}
-function PercentageDecorator() {
-    return (jsxs("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: [jsx(CaptionText, { className: "tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "%" }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
-}
-function AmountDecorator() {
-    return (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-absolute tw-left-squid-xs tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "$" }), jsx("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) })] }));
+function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }) {
+    const [isInputVisible, setIsInputVisible] = useState(false);
+    const [inputValue, setInputValue] = useState(String(value !== null && value !== void 0 ? value : 0));
+    useEffect(() => {
+        if (!isInputVisible)
+            return;
+        const handleOutsideClick = (event) => {
+            var _a;
+            const clickedElementIsDifferentThanMenu = event.target !== menuRef.current;
+            const clickedElementIsDifferentThanSlider = event.target !== sliderRef.current;
+            const sliderContainsClickedElement = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
+            const hideInput = clickedElementIsDifferentThanMenu &&
+                (!clickedElementIsDifferentThanSlider || !sliderContainsClickedElement);
+            if (hideInput) {
+                handleCloseInput();
+            }
+        };
+        document.addEventListener('click', handleOutsideClick);
+        return () => {
+            document.removeEventListener('click', handleOutsideClick);
+        };
+    }, [isInputVisible]);
+    const menuRef = useRef(null);
+    const sliderRef = useRef(null);
+    const handleSubmit = useCallback((value) => {
+        handleCloseInput();
+        onChange === null || onChange === void 0 ? void 0 : onChange(value === '' ? undefined : Number(value));
+    }, [onChange]);
+    const handleKeyDown = useCallback((e) => {
+        // block unwanted (but still valid) characters
+        if (['e', 'E', '+', '-'].includes(e.key))
+            return e.preventDefault();
+        // close input when pressing escape
+        if (e.key === 'Escape')
+            return handleCloseInput();
+    }, []);
+    const handleOpenInput = useCallback(() => {
+        setIsInputVisible(true);
+    }, []);
+    const handleCloseInput = useCallback(() => {
+        setIsInputVisible(false);
+    }, []);
+    return (jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxs("button", { className: cn('tw-relative tw-flex tw-h-[32px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xs tw-pr-[40px] tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', value === 0 || value === undefined
+                    ? 'tw-text-grey-600'
+                    : 'tw-text-grey-300', isInputVisible ? 'tw-bg-material-light-thin' : 'tw-bg-transparent'), children: [value !== null && value !== void 0 ? value : 0, jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === 'percentage' ? '%' : '$' })] }), jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsx("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        handleSubmit(inputValue);
+                    }, children: jsx(Input, { autoFocus: true, min: min, max: max, onKeyDown: handleKeyDown, step: decimalsFormat, placeholder: "0", type: "number", defaultValue: value, value: inputValue, onChange: (e) => {
+                            const isValid = e.target.checkValidity();
+                            if (!isValid)
+                                return;
+                            setInputValue(e.target.value);
+                        }, showIcon: false, actionButtonProps: {
+                            label: 'Ok',
+                            onClick: () => {
+                                handleSubmit(inputValue);
+                            },
+                            variant: 'primary',
+                        } }) }) }))] }));
 }
 
 const switchSizeClassMap = {
@@ -42389,8 +42451,8 @@ const lightTheme = {
     // content
     'content-100': '#17191C',
     'content-200': '#292C32',
-    'content-300': '#4C515D',
-    'content-400': '#626784',
+    'content-300': '#292C32',
+    'content-400': '#676B7E',
     'content-500': '#8A8FA8',
     'content-600': '#A7ABBE',
     'content-700': '#D1D6E0',
@@ -42400,7 +42462,7 @@ const lightTheme = {
     'accent-400': '#9E79D2',
     'accent-500': '#B893EC',
     // status
-    'status-positive': '#11D421',
+    'status-positive': '#17CF26',
     'status-negative': '#FF5B4D',
     'status-warning': '#EC9213',
 };

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

@@ -1,3 +1,4 @@
+type AssetsButtonVariant = 'primary' | 'accent';
 interface AssetsButtonProps {
     tokenImageUrl?: string;
     chainImageUrl?: string;
@@ -6,6 +7,7 @@ interface AssetsButtonProps {
     tokenBgColor?: string;
     tokenTextColor?: string;
     onClick?: () => void;
+    variant?: AssetsButtonVariant;
 }
-export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, onClick, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,12 +1,17 @@
 /// <reference types="react" />
+import { ButtonVariant } from '../../types/components';
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
     showIcon?: boolean;
-    showPasteButton?: boolean;
     icon?: React.ReactNode;
     isError?: boolean;
-    onPasteButtonClick?: () => void;
     containerClassName?: string;
+    actionButtonProps?: InputActionButtonProps;
 }
-export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, containerClassName, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+type InputActionButtonProps = {
+    onClick?: () => void;
+    variant?: ButtonVariant;
+    label?: string;
+};
 export {};

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

@@ -1,9 +1,9 @@
 export interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
-    onChange?: (value: number) => void;
-    hasDecimals?: boolean;
+    onChange?: (value: number | undefined) => void;
+    decimalsFormat?: number;
     min?: number;
     max?: number;
 }
-export declare function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DropdownMenuItemProps } from './DropdownMenuItem';
-type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
+import { HistoryItemStatus } from '../../types/components';
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;

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

@@ -3,7 +3,8 @@ import { AssetsButton } from '../../components/buttons/AssetsButton';
 declare const meta: Meta<typeof AssetsButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
+export declare const PrimaryVariantEmpty: Story;
+export declare const AccentVariantEmpty: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndTokenLightText: Story;
 export declare const ChainAndTokenDarkText: Story;

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

@@ -5,5 +5,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithoutIcon: Story;
-export declare const WithPasteButton: Story;
+export declare const WithActionButton: Story;
 export declare const Error: Story;

package/dist/esm/types/stories/controls/SettingsSlider.stories.d.ts

@@ -5,3 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Percentage: Story;
 export declare const Amount: Story;
+export declare const PercentageWith1DecimalPlaceAllowed: Story;
+export declare const AmountWith2DecimalPlacesAllowed: Story;
+export declare const PercentageMax50: Story;
+export declare const AmountMax999: Story;

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

@@ -4,6 +4,7 @@ export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 export type ButtonSize = 'md' | 'lg';
 export type SwapDirection = 'from' | 'to';
 export type BoostMode = 'normal' | 'boost';
+export type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
 export type SwapStepDescriptionBlock = {
     type: 'string';
     value: string;

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

@@ -1,2 +1,2 @@
 export type { SquidTheme } from './config';
-export type { SwapState, ThemeType, SwapStep, SwapStepItemStatus, } from './components';
+export type { SwapState, ThemeType, SwapStep, SwapStepItemStatus, HistoryItemStatus, } from './components';

package/dist/index.css

@@ -693,10 +693,6 @@ video {
   left: 1.875rem;
 }
 
-.tw-left-squid-xs {
-  left: 0.625rem;
-}
-
 .tw-right-0 {
   right: 0px;
 }
@@ -928,10 +924,18 @@ video {
   height: 240px;
 }
 
+.tw-h-\[26px\] {
+  height: 26px;
+}
+
 .tw-h-\[30px\] {
   height: 30px;
 }
 
+.tw-h-\[32px\] {
+  height: 32px;
+}
+
 .tw-h-\[40px\] {
   height: 40px;
 }
@@ -972,10 +976,6 @@ video {
   height: 640px;
 }
 
-.tw-h-\[660px\] {
-  height: 660px;
-}
-
 .tw-h-\[94px\] {
   height: 94px;
 }
@@ -989,7 +989,7 @@ video {
 }
 
 .tw-h-card {
-  height: 680px;
+  height: 660px;
 }
 
 .tw-h-full {
@@ -1085,7 +1085,7 @@ video {
 }
 
 .tw-min-h-card {
-  min-height: 680px;
+  min-height: 660px;
 }
 
 .tw-min-h-squid-l {
@@ -1161,6 +1161,10 @@ video {
   width: 150px;
 }
 
+.tw-w-\[160px\] {
+  width: 160px;
+}
+
 .tw-w-\[180px\] {
   width: 180px;
 }
@@ -1173,6 +1177,10 @@ video {
   width: 22px;
 }
 
+.tw-w-\[26px\] {
+  width: 26px;
+}
+
 .tw-w-\[299px\] {
   width: 299px;
 }
@@ -1205,10 +1213,6 @@ video {
   width: 470px;
 }
 
-.tw-w-\[480px\] {
-  width: 480px;
-}
-
 .tw-w-\[500px\] {
   width: 500px;
 }
@@ -1237,14 +1241,6 @@ video {
   width: 72px;
 }
 
-.tw-w-\[80px\] {
-  width: 80px;
-}
-
-.tw-w-\[84px\] {
-  width: 84px;
-}
-
 .tw-w-\[90px\] {
   width: 90px;
 }
@@ -1258,7 +1254,7 @@ video {
 }
 
 .tw-w-card {
-  width: 500px;
+  width: 480px;
 }
 
 .tw-w-fit {
@@ -1295,8 +1291,8 @@ video {
   width: 3.75rem;
 }
 
-.tw-min-w-0 {
-  min-width: 0px;
+.\!tw-min-w-0 {
+  min-width: 0px !important;
 }
 
 .tw-min-w-96 {
@@ -1386,11 +1382,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.tw-translate-y-\[0\.5px\] {
-  --tw-translate-y: 0.5px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .tw-rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1754,10 +1745,6 @@ video {
   border-radius: 0.9375rem;
 }
 
-.tw-rounded-squid-xl {
-  border-radius: 2.5rem;
-}
-
 .tw-rounded-squid-xs {
   border-radius: 0.625rem;
 }
@@ -1850,10 +1837,6 @@ video {
   border-color: var(--squid-theme-grey-900);
 }
 
-.tw-border-material-light-thick {
-  border-color: var(--squid-theme-material-light-thick);
-}
-
 .tw-border-material-light-thin {
   border-color: var(--squid-theme-material-light-thin);
 }
@@ -1927,10 +1910,6 @@ video {
   background-color: var(--squid-theme-material-dark-thin);
 }
 
-.tw-bg-material-light-thick {
-  background-color: var(--squid-theme-material-light-thick);
-}
-
 .tw-bg-material-light-thin {
   background-color: var(--squid-theme-material-light-thin);
 }
@@ -2057,11 +2036,6 @@ video {
   padding: 3.75rem;
 }
 
-.\!tw-px-2 {
-  padding-left: 0.5rem !important;
-  padding-right: 0.5rem !important;
-}
-
 .\!tw-px-4 {
   padding-left: 1rem !important;
   padding-right: 1rem !important;
@@ -2102,11 +2076,6 @@ video {
   padding-right: 3px;
 }
 
-.tw-px-\[70px\] {
-  padding-left: 70px;
-  padding-right: 70px;
-}
-
 .tw-px-squid-l {
   padding-left: 1.875rem;
   padding-right: 1.875rem;
@@ -2208,16 +2177,12 @@ video {
   padding-left: 0.25rem;
 }
 
-.tw-pl-\[20px\] {
-  padding-left: 20px;
-}
-
 .tw-pl-\[33px\] {
   padding-left: 33px;
 }
 
-.tw-pl-\[44px\] {
-  padding-left: 44px;
+.tw-pl-\[40px\] {
+  padding-left: 40px;
 }
 
 .tw-pl-\[7px\] {
@@ -2248,12 +2213,12 @@ video {
   padding-right: 1rem;
 }
 
-.tw-pr-\[32px\] {
-  padding-right: 32px;
+.tw-pr-\[40px\] {
+  padding-right: 40px;
 }
 
-.tw-pr-\[52px\] {
-  padding-right: 52px;
+.tw-pr-\[70px\] {
+  padding-right: 70px;
 }
 
 .tw-pr-squid-m {
@@ -2992,12 +2957,24 @@ input[type='number'] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-shadow-elevation-dark-3 {
+  --tw-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20), 0px 5px 50px -1px rgba(0, 0, 0, 0.33);
+  --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color), 0px 5px 50px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-shadow-elevation-light-2 {
   --tw-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.10), 0px 5px 20px -1px rgba(0, 0, 0, 0.10);
   --tw-shadow-colored: 0px 2px 5px 1px var(--tw-shadow-color), 0px 5px 20px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-shadow-elevation-light-3 {
+  --tw-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px 5px 50px -1px rgba(0, 0, 0, 0.20);
+  --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color), 0px 5px 50px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .tw-peer[data-boost-mode=boost] ~ .peer-data-\[boost-mode\=boost\]\:tw-bg-status-positive {
   background-color: var(--squid-theme-status-positive);
 }

package/dist/index.d.ts

@@ -37,6 +37,7 @@ interface ArrowButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 }
 declare function ArrowButton({ label, disabled, ...props }: ArrowButtonProps): react_jsx_runtime.JSX.Element;
 
+type AssetsButtonVariant = 'primary' | 'accent';
 interface AssetsButtonProps {
     tokenImageUrl?: string;
     chainImageUrl?: string;
@@ -45,8 +46,9 @@ interface AssetsButtonProps {
     tokenBgColor?: string;
     tokenTextColor?: string;
     onClick?: () => void;
+    variant?: AssetsButtonVariant;
 }
-declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, onClick, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
+declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
 
 type TextSize = 'small' | 'medium' | 'large';
 type SwitchSize = 'small' | 'large';
@@ -54,6 +56,7 @@ type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 type ButtonSize = 'md' | 'lg';
 type SwapDirection = 'from' | 'to';
 type BoostMode = 'normal' | 'boost';
+type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
 type SwapStepDescriptionBlock = {
     type: 'string';
     value: string;
@@ -121,13 +124,17 @@ declare function SettingsButton({ label, isSelected, onClick, }: SettingsButtonP
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
     showIcon?: boolean;
-    showPasteButton?: boolean;
     icon?: React.ReactNode;
     isError?: boolean;
-    onPasteButtonClick?: () => void;
     containerClassName?: string;
+    actionButtonProps?: InputActionButtonProps;
 }
-declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, containerClassName, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+type InputActionButtonProps = {
+    onClick?: () => void;
+    variant?: ButtonVariant;
+    label?: string;
+};
 
 interface Token$1 {
     price: number;
@@ -162,12 +169,12 @@ declare function NumericInput({ priceImpactPercentage, balance, error, criticalP
 interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
-    onChange?: (value: number) => void;
-    hasDecimals?: boolean;
+    onChange?: (value: number | undefined) => void;
+    decimalsFormat?: number;
     min?: number;
     max?: number;
 }
-declare function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
+declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchProps {
     checked?: boolean;
@@ -236,7 +243,6 @@ interface DropdownMenuItemProps {
 }
 declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
 
-type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;
@@ -575,4 +581,4 @@ declare function useDropdownMenu(props?: {
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, STEP_ITEM_HEIGHT, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressView, SwapProgressViewHeader, SwapState, type SwapStep, SwapStepItem, type SwapStepItemStatus, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, Switch, type ThemeType, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, type HistoryItemStatus, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, STEP_ITEM_HEIGHT, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressView, SwapProgressViewHeader, SwapState, type SwapStep, SwapStepItem, type SwapStepItemStatus, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, Switch, type ThemeType, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };

package/package.json

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