@0xsquid/ui 0.19.0 → 0.19.2

package/dist/cjs/index.js

@@ -2986,24 +2986,25 @@ const buttonVariantClassMap = {
 // 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';
+const loadingClassname = 'tw-invisible tw-opacity-0';
 function Button$1(_a) {
-    var { label, disabled, size, variant, icon, link } = _a, props = __rest$1(_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 ? (
+    var { label, disabled, size, variant, icon, link, isLoading = false } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading"]);
+    const children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!disabled && !isLoading && (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, { className: isLoading ? loadingClassname : '', size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
                 // label only
-                jsxRuntime.jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
+                jsxRuntime.jsx(BodyText, { className: isLoading ? loadingClassname : '', size: "small", children: label })) : !label && icon ? (
                 // icon only
-                icon) : (
+                isLoading ? null : (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], 'tw-border-material-light-thin', !disabled && 'hover:tw-border-material-light-average', roundedClassMap[size], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && !isLoading && 'hover:tw-border-material-light-average', roundedClassMap[size], 
     // disabled styles
-    disabled && buttonDisabledClass, 
+    disabled && buttonDisabledClass, isLoading && 'tw-cursor-not-allowed', 
     // 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 })));
+    return (jsxRuntime.jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, 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) }));
@@ -3111,28 +3112,33 @@ 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({ chain, token, onClick, variant = 'primary', }) {
-    var _a, _b;
+function AssetsButton({ chain, token, onClick, variant = 'primary', isLoading = false, }) {
+    var _a;
     const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
     const chainBgColor = (_a = (chain && chain.bgColor)) !== null && _a !== void 0 ? _a : defaultBgColor;
-    const tokenBgColor = (_b = (chain && token && token.bgColor)) !== null && _b !== void 0 ? _b : defaultBgColor;
+    const tokenBgColor = (chain && token && !isLoading && token.bgColor) || defaultBgColor;
     const bgGradient = React.useMemo(() => {
-        if (!chain) {
+        if (!chain || isLoading) {
             return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
         }
         if (!token) {
             return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
         }
         return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
-    }, [chainBgColor, tokenBgColor, chain, token]);
-    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', chain && token ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    }, [chainBgColor, tokenBgColor, chain, token, isLoading]);
+    const ButtonTag = isLoading ? 'div' : 'button';
+    return (jsxRuntime.jsxs(ButtonTag, { onClick: isLoading ? undefined : onClick, disabled: isLoading, "aria-disabled": isLoading, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant], isLoading && 'tw-cursor-not-allowed'), children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] 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-items-center tw-justify-between', chain && token && !isLoading
+                    ? 'tw-w-[90px]'
+                    : 'tw-w-full tw-max-w-[72px]'), style: {
                     backgroundImage: bgGradient,
-                }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chain ? (jsxRuntime.jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), chain && token ? (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: chain && !isLoading ? (jsxRuntime.jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (!isLoading && (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) }))) }) }), chain && token && !isLoading ? (jsxRuntime.jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl 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: token.iconUrl, alt: token.symbol, 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', chain && token && 'tw-pl-[7px]'), style: {
+                        } }), jsxRuntime.jsx("img", { src: token.iconUrl, alt: token.symbol, 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-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', chain && token && !isLoading && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
                     color: token === null || token === void 0 ? void 0 : token.textColor,
-                }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain) && 'tw-w-[135px]'), children: chain && token ? token.symbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
+                }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain || isLoading) && 'tw-w-[135px]'), children: chain && token && !isLoading
+                            ? token.symbol
+                            : !isLoading && 'Select token' }), !isLoading && jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
 }
 
 const CSS_VARS = {
@@ -16896,16 +16902,16 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
     const state = React.useMemo(() => {
         if (errorMessage)
             return 'error';
-        if (isLoading)
-            return 'loading';
         if (isEmpty)
             return 'empty';
+        if (isLoading)
+            return 'loading';
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[157px] mobile-lg:tw-w-[190px]', detailStateClassMap[state]);
     return (jsxRuntime.jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-full tw-items-center tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500 mobile-lg:tw-w-card-large', state === 'error'
             ? 'tw-px-squid-m mobile-lg:tw-px-squid-l'
-            : 'tw-px-squid-xs mobile-lg:tw-px-squid-m', isEmpty ? 'tw-justify-center' : 'tw-justify-between'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button$1, { 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: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
+            : 'tw-px-squid-xs mobile-lg:tw-px-squid-m', isEmpty ? 'tw-justify-center' : 'tw-justify-between'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button$1, { 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: isLoading ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
                             ? flipButton.disabledMessage
                             : undefined, tooltipWidth: "max", displayDelayMs: flipButton === null || flipButton === void 0 ? void 0 : flipButton.tooltipDisplayDelayMs, children: jsxRuntime.jsx("button", { disabled: flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled, 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', !(flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled) &&
                                     '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 }) })] })) }));
@@ -17522,12 +17528,12 @@ function ModalContentDivider() {
     return (jsxRuntime.jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
 }
 
-function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
+function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, isLoading = false, }) {
     return (jsxRuntime.jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton
                     ? 'tw-px-squid-m'
                     : 'tw-pl-squid-m tw-pr-squid-m mobile-lg:tw-pl-squid-l'), children: [displayBackButton ? (jsxRuntime.jsx(Button$1, { className: displayButtonShadows
                             ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                            : undefined, variant: "tertiary", size: "md", icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", label: typeof action.labelOrIcon === 'string'
+                            : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", isLoading: isLoading, label: typeof action.labelOrIcon === 'string'
                                 ? action.labelOrIcon
                                 : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
                                 ? null
@@ -18120,9 +18126,12 @@ function LogoContainer({ children }) {
     return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
 }
 
-function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive = true, isLoading = true, }) {
+function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = 'from', onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive = true, isLoading = false, }) {
     var _a, _b;
-    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", 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-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chain: chain, token: token, variant: assetsButtonVariant }) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", 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: {
+    const isWalletButtonInteractive = !isLoading && !!onWalletButtonClick;
+    const WalletButtonTag = isWalletButtonInteractive ? 'button' : 'div';
+    const isFetching = isFetchingProp || isLoading;
+    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxRuntime.jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? onWalletButtonClick : undefined, className: cn('-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', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), !isLoading && (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-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chain: chain, token: token, isLoading: isLoading, variant: assetsButtonVariant }) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", 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,
@@ -18131,7 +18140,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain,
                 }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
                     token: '0.001',
                     usd: '0.01',
-                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd, isInteractive: isInputInteractive })] }));
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd, isInteractive: isInputInteractive && !isLoading })] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -24243,6 +24252,7 @@ const buttonClassName = 'tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-roun
 // checks that the value includes at least one character different than `0` (zero), or `.` (dot)
 const RegExpNonZeroValue = /[^0.]/;
 const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
+const notInteractiveClassName = 'tw-opacity-50';
 var InputMode;
 (function (InputMode) {
     InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
@@ -24251,10 +24261,11 @@ var InputMode;
 function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
     token: '0.001',
     usd: '0.01',
-}, showDetails = true, isLoading = false, direction, amountUsd, isInteractive = false, }) {
+}, showDetails = true, isLoading = false, direction, amountUsd, isInteractive: isInteractiveProp = false, }) {
     var _a;
     const [inputValue, setInputValue] = React.useState('');
     const [inputMode, setInputMode] = React.useState(InputMode.TOKEN);
+    const isInteractive = isInteractiveProp && !isLoading;
     const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
     React.useEffect(() => {
         if (forcedAmount !== undefined) {
@@ -24373,7 +24384,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     }, [balance]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive ? (jsxRuntime.jsxs("form", { className: "tw-relative tw-h-[80.6px] tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-h-[75px] mobile-lg:tw-px-squid-m", onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', isLoading && '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: inputValue }) }) })), !showDetails ? 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-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && 'tw-opacity-50'), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
+                }, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', !isInteractive && notInteractiveClassName), 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: inputValue || 0 }) }) })), !showDetails ? 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-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', !isInteractive && notInteractiveClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
                                                 ? formatIfVerySmall.token
                                                 : amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
                                             ? formatIfVerySmall.token
@@ -24691,8 +24702,8 @@ const List = ({ children }) => {
     return (jsxRuntime.jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
 };
 
-function MainView() {
-    return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { title: "Swap", actions: [
+function MainView({ isLoading }) {
+    return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { isLoading: isLoading, title: "Swap", actions: [
                     {
                         labelOrIcon: jsxRuntime.jsx(ClockOutlineIcon, {}),
                         id: 'history',
@@ -24701,7 +24712,7 @@ function MainView() {
                         labelOrIcon: jsxRuntime.jsx(SettingsGearIcon, {}),
                         id: 'settings',
                     },
-                ] }), jsxRuntime.jsx(SwapConfiguration, { direction: "from", chain: {
+                ] }), jsxRuntime.jsx(SwapConfiguration, { isLoading: isLoading, direction: "from", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/blast.svg',
                     bgColor: '#fcfc03',
                 }, token: {
@@ -24714,7 +24725,7 @@ function MainView() {
                     isDisabled: true,
                     disabledMessage: 'Not enough USDC to flip the swap',
                     tooltipDisplayDelayMs: 0,
-                }, boostDisabledMessage: "Boost not supported for this route" }), jsxRuntime.jsx(SwapConfiguration, { isFetching: true, direction: "to", chain: {
+                }, boostDisabledMessage: "Boost not supported for this route", isLoading: isLoading, isEmpty: isLoading }), jsxRuntime.jsx(SwapConfiguration, { isLoading: isLoading, direction: "to", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/avax.svg',
                     bgColor: '#e84142',
                 }, token: {
@@ -24723,7 +24734,7 @@ function MainView() {
                     bgColor: '#2775ca',
                     textColor: '#fff',
                     decimals: 6,
-                }, priceImpactPercentage: '7.2', balance: '2854', address: "so-so.eth", amount: "100" }), jsxRuntime.jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsxRuntime.jsx(Button$1, { variant: "primary", size: "lg", label: "Swap" }) })] }));
+                }, priceImpactPercentage: isLoading ? undefined : '7.2', balance: '2854', address: "so-so.eth", amount: isLoading ? undefined : '100' }), jsxRuntime.jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsxRuntime.jsx(Button$1, { variant: isLoading ? 'tertiary' : 'primary', size: "lg", label: "Swap", isLoading: isLoading }) })] }));
 }
 
 function PunkIcon({ size = '16' }) {

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

@@ -12,6 +12,7 @@ interface AssetsButtonProps {
     };
     onClick?: () => void;
     variant?: AssetsButtonVariant;
+    isLoading?: boolean;
 }
-export declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chain, token, onClick, variant, isLoading, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -25,5 +25,5 @@ interface NumericInputProps {
     maxUsdDecimals?: number;
     isInteractive?: boolean;
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive: isInteractiveProp, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -12,6 +12,7 @@ interface NavigationBarProps {
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
     actions?: ActionButton[];
+    isLoading?: boolean;
 }
-export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, isLoading, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -33,5 +33,5 @@ interface SwapConfigurationProps {
     isInputInteractive?: boolean;
     isLoading?: boolean;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1 +1,3 @@
-export declare function MainView(): import("react/jsx-runtime").JSX.Element;
+export declare function MainView({ isLoading }: {
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -3,6 +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 PrimaryVariantLoading: Story;
+export declare const AccentVariantLoading: Story;
 export declare const PrimaryVariantEmpty: Story;
 export declare const AccentVariantEmpty: Story;
 export declare const ChainOnly: Story;

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

@@ -23,3 +23,8 @@ export declare const LargeTertiary: Story;
 export declare const LargeDisabled: Story;
 export declare const LargeAndLink: Story;
 export declare const LargeAndLinkDisabled: Story;
+export declare const MediumWithIconLoading: Story;
+export declare const MediumWithLabelLoading: Story;
+export declare const MediumWithLongLabelLoading: Story;
+export declare const LargeWithLabelLoading: Story;
+export declare const LargeWithLongLabelLoading: Story;

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

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Loading: Story;
 export declare const Empty: Story;
+export declare const EmptyLoading: Story;
 export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
 export declare const BoostDisabled: Story;

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

@@ -9,4 +9,5 @@ export declare const BackButton: Story;
 export declare const Logo: Story;
 export declare const WithActions: Story;
 export declare const AllProps: Story;
+export declare const Loading: Story;
 export declare const Transparent: Story;

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

@@ -5,6 +5,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const EmptyVariantPrimary: Story;
 export declare const EmptyVariantAccent: Story;
+export declare const Loading: Story;
+export declare const InputNotInteractive: Story;
+export declare const LoadingWithAllProps: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndToken: Story;
 export declare const WithSwapAmountUsd: Story;

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof MainView>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Loading: Story;

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

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

package/dist/esm/index.js

@@ -2966,24 +2966,25 @@ const buttonVariantClassMap = {
 // 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';
+const loadingClassname = 'tw-invisible tw-opacity-0';
 function Button$1(_a) {
-    var { label, disabled, size, variant, icon, link } = _a, props = __rest$1(_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 ? (
+    var { label, disabled, size, variant, icon, link, isLoading = false } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading"]);
+    const children = (jsxs(Fragment, { children: [!disabled && !isLoading && (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, { className: isLoading ? loadingClassname : '', size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
                 // label only
-                jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
+                jsx(BodyText, { className: isLoading ? loadingClassname : '', size: "small", children: label })) : !label && icon ? (
                 // icon only
-                icon) : (
+                isLoading ? null : (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], 'tw-border-material-light-thin', !disabled && 'hover:tw-border-material-light-average', roundedClassMap[size], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && !isLoading && 'hover:tw-border-material-light-average', roundedClassMap[size], 
     // disabled styles
-    disabled && buttonDisabledClass, 
+    disabled && buttonDisabledClass, isLoading && 'tw-cursor-not-allowed', 
     // 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 })));
+    return (jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, 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) }));
@@ -3091,28 +3092,33 @@ 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({ chain, token, onClick, variant = 'primary', }) {
-    var _a, _b;
+function AssetsButton({ chain, token, onClick, variant = 'primary', isLoading = false, }) {
+    var _a;
     const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
     const chainBgColor = (_a = (chain && chain.bgColor)) !== null && _a !== void 0 ? _a : defaultBgColor;
-    const tokenBgColor = (_b = (chain && token && token.bgColor)) !== null && _b !== void 0 ? _b : defaultBgColor;
+    const tokenBgColor = (chain && token && !isLoading && token.bgColor) || defaultBgColor;
     const bgGradient = useMemo(() => {
-        if (!chain) {
+        if (!chain || isLoading) {
             return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
         }
         if (!token) {
             return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
         }
         return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
-    }, [chainBgColor, tokenBgColor, chain, token]);
-    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', chain && token ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    }, [chainBgColor, tokenBgColor, chain, token, isLoading]);
+    const ButtonTag = isLoading ? 'div' : 'button';
+    return (jsxs(ButtonTag, { onClick: isLoading ? undefined : onClick, disabled: isLoading, "aria-disabled": isLoading, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant], isLoading && 'tw-cursor-not-allowed'), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] 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-items-center tw-justify-between', chain && token && !isLoading
+                    ? 'tw-w-[90px]'
+                    : 'tw-w-full tw-max-w-[72px]'), style: {
                     backgroundImage: bgGradient,
-                }, children: jsx("div", { className: clsx(imageClass), children: chain ? (jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) })) }) }), chain && token ? (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: chain && !isLoading ? (jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (!isLoading && (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) }))) }) }), chain && token && !isLoading ? (jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-overflow-hidden'), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
                             backgroundColor: tokenBgColor,
-                        } }), jsx("img", { src: token.iconUrl, alt: token.symbol, 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', chain && token && 'tw-pl-[7px]'), style: {
+                        } }), jsx("img", { src: token.iconUrl, alt: token.symbol, 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-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', chain && token && !isLoading && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
                     color: token === null || token === void 0 ? void 0 : token.textColor,
-                }, children: [jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain) && 'tw-w-[135px]'), children: chain && token ? token.symbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
+                }, children: [jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain || isLoading) && 'tw-w-[135px]'), children: chain && token && !isLoading
+                            ? token.symbol
+                            : !isLoading && 'Select token' }), !isLoading && jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
 }
 
 const CSS_VARS = {
@@ -16876,16 +16882,16 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
     const state = useMemo(() => {
         if (errorMessage)
             return 'error';
-        if (isLoading)
-            return 'loading';
         if (isEmpty)
             return 'empty';
+        if (isLoading)
+            return 'loading';
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[157px] mobile-lg:tw-w-[190px]', detailStateClassMap[state]);
     return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-full tw-items-center tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500 mobile-lg:tw-w-card-large', state === 'error'
             ? 'tw-px-squid-m mobile-lg:tw-px-squid-l'
-            : 'tw-px-squid-xs mobile-lg:tw-px-squid-m', isEmpty ? 'tw-justify-center' : 'tw-justify-between'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button$1, { 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: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
+            : 'tw-px-squid-xs mobile-lg:tw-px-squid-m', isEmpty ? 'tw-justify-center' : 'tw-justify-between'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button$1, { 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: isLoading ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
                             ? flipButton.disabledMessage
                             : undefined, tooltipWidth: "max", displayDelayMs: flipButton === null || flipButton === void 0 ? void 0 : flipButton.tooltipDisplayDelayMs, children: jsx("button", { disabled: flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled, 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', !(flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled) &&
                                     '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 }) })] })) }));
@@ -17502,12 +17508,12 @@ function ModalContentDivider() {
     return (jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
 }
 
-function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
+function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, isLoading = false, }) {
     return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton
                     ? 'tw-px-squid-m'
                     : 'tw-pl-squid-m tw-pr-squid-m mobile-lg:tw-pl-squid-l'), children: [displayBackButton ? (jsx(Button$1, { className: displayButtonShadows
                             ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                            : undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsx(Button$1, { size: "md", variant: "tertiary", label: typeof action.labelOrIcon === 'string'
+                            : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsx(Button$1, { size: "md", variant: "tertiary", isLoading: isLoading, label: typeof action.labelOrIcon === 'string'
                                 ? action.labelOrIcon
                                 : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
                                 ? null
@@ -18100,9 +18106,12 @@ function LogoContainer({ children }) {
     return (jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
 }
 
-function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive = true, isLoading = true, }) {
+function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = 'from', onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive = true, isLoading = false, }) {
     var _a, _b;
-    return (jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", 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-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chain: chain, token: token, variant: assetsButtonVariant }) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
+    const isWalletButtonInteractive = !isLoading && !!onWalletButtonClick;
+    const WalletButtonTag = isWalletButtonInteractive ? 'button' : 'div';
+    const isFetching = isFetchingProp || isLoading;
+    return (jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? onWalletButtonClick : undefined, className: cn('-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', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), !isLoading && (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-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chain: chain, token: token, isLoading: isLoading, variant: assetsButtonVariant }) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", 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,
@@ -18111,7 +18120,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain,
                 }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
                     token: '0.001',
                     usd: '0.01',
-                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd, isInteractive: isInputInteractive })] }));
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd, isInteractive: isInputInteractive && !isLoading })] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -24223,6 +24232,7 @@ const buttonClassName = 'tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-roun
 // checks that the value includes at least one character different than `0` (zero), or `.` (dot)
 const RegExpNonZeroValue = /[^0.]/;
 const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
+const notInteractiveClassName = 'tw-opacity-50';
 var InputMode;
 (function (InputMode) {
     InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
@@ -24231,10 +24241,11 @@ var InputMode;
 function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
     token: '0.001',
     usd: '0.01',
-}, showDetails = true, isLoading = false, direction, amountUsd, isInteractive = false, }) {
+}, showDetails = true, isLoading = false, direction, amountUsd, isInteractive: isInteractiveProp = false, }) {
     var _a;
     const [inputValue, setInputValue] = useState('');
     const [inputMode, setInputMode] = useState(InputMode.TOKEN);
+    const isInteractive = isInteractiveProp && !isLoading;
     const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
     useEffect(() => {
         if (forcedAmount !== undefined) {
@@ -24353,7 +24364,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     }, [balance]);
     return (jsxs(Fragment, { children: [isInteractive ? (jsxs("form", { className: "tw-relative tw-h-[80.6px] tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-h-[75px] mobile-lg:tw-px-squid-m", onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', isLoading && '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: inputValue }) }) })), !showDetails ? 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-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && 'tw-opacity-50'), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
+                }, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', !isInteractive && notInteractiveClassName), 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: inputValue || 0 }) }) })), !showDetails ? 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-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', !isInteractive && notInteractiveClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
                                                 ? formatIfVerySmall.token
                                                 : amountFormatted })] }) })) : (jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsx(CaptionText, { children: isTokenAmountVerySmall
                                             ? formatIfVerySmall.token
@@ -24671,8 +24682,8 @@ const List = ({ children }) => {
     return (jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
 };
 
-function MainView() {
-    return (jsxs(ProductCard, { children: [jsx(NavigationBar, { title: "Swap", actions: [
+function MainView({ isLoading }) {
+    return (jsxs(ProductCard, { children: [jsx(NavigationBar, { isLoading: isLoading, title: "Swap", actions: [
                     {
                         labelOrIcon: jsx(ClockOutlineIcon, {}),
                         id: 'history',
@@ -24681,7 +24692,7 @@ function MainView() {
                         labelOrIcon: jsx(SettingsGearIcon, {}),
                         id: 'settings',
                     },
-                ] }), jsx(SwapConfiguration, { direction: "from", chain: {
+                ] }), jsx(SwapConfiguration, { isLoading: isLoading, direction: "from", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/blast.svg',
                     bgColor: '#fcfc03',
                 }, token: {
@@ -24694,7 +24705,7 @@ function MainView() {
                     isDisabled: true,
                     disabledMessage: 'Not enough USDC to flip the swap',
                     tooltipDisplayDelayMs: 0,
-                }, boostDisabledMessage: "Boost not supported for this route" }), jsx(SwapConfiguration, { isFetching: true, direction: "to", chain: {
+                }, boostDisabledMessage: "Boost not supported for this route", isLoading: isLoading, isEmpty: isLoading }), jsx(SwapConfiguration, { isLoading: isLoading, direction: "to", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/avax.svg',
                     bgColor: '#e84142',
                 }, token: {
@@ -24703,7 +24714,7 @@ function MainView() {
                     bgColor: '#2775ca',
                     textColor: '#fff',
                     decimals: 6,
-                }, priceImpactPercentage: '7.2', balance: '2854', address: "so-so.eth", amount: "100" }), jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsx(Button$1, { variant: "primary", size: "lg", label: "Swap" }) })] }));
+                }, priceImpactPercentage: isLoading ? undefined : '7.2', balance: '2854', address: "so-so.eth", amount: isLoading ? undefined : '100' }), jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsx(Button$1, { variant: isLoading ? 'tertiary' : 'primary', size: "lg", label: "Swap", isLoading: isLoading }) })] }));
 }
 
 function PunkIcon({ size = '16' }) {

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

@@ -12,6 +12,7 @@ interface AssetsButtonProps {
     };
     onClick?: () => void;
     variant?: AssetsButtonVariant;
+    isLoading?: boolean;
 }
-export declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chain, token, onClick, variant, isLoading, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -25,5 +25,5 @@ interface NumericInputProps {
     maxUsdDecimals?: number;
     isInteractive?: boolean;
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive: isInteractiveProp, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -12,6 +12,7 @@ interface NavigationBarProps {
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
     actions?: ActionButton[];
+    isLoading?: boolean;
 }
-export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, isLoading, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -33,5 +33,5 @@ interface SwapConfigurationProps {
     isInputInteractive?: boolean;
     isLoading?: boolean;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1 +1,3 @@
-export declare function MainView(): import("react/jsx-runtime").JSX.Element;
+export declare function MainView({ isLoading }: {
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -3,6 +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 PrimaryVariantLoading: Story;
+export declare const AccentVariantLoading: Story;
 export declare const PrimaryVariantEmpty: Story;
 export declare const AccentVariantEmpty: Story;
 export declare const ChainOnly: Story;

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

@@ -23,3 +23,8 @@ export declare const LargeTertiary: Story;
 export declare const LargeDisabled: Story;
 export declare const LargeAndLink: Story;
 export declare const LargeAndLinkDisabled: Story;
+export declare const MediumWithIconLoading: Story;
+export declare const MediumWithLabelLoading: Story;
+export declare const MediumWithLongLabelLoading: Story;
+export declare const LargeWithLabelLoading: Story;
+export declare const LargeWithLongLabelLoading: Story;

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

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Loading: Story;
 export declare const Empty: Story;
+export declare const EmptyLoading: Story;
 export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
 export declare const BoostDisabled: Story;

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

@@ -9,4 +9,5 @@ export declare const BackButton: Story;
 export declare const Logo: Story;
 export declare const WithActions: Story;
 export declare const AllProps: Story;
+export declare const Loading: Story;
 export declare const Transparent: Story;

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

@@ -5,6 +5,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const EmptyVariantPrimary: Story;
 export declare const EmptyVariantAccent: Story;
+export declare const Loading: Story;
+export declare const InputNotInteractive: Story;
+export declare const LoadingWithAllProps: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndToken: Story;
 export declare const WithSwapAmountUsd: Story;

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof MainView>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Loading: Story;

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

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

package/dist/index.d.ts

@@ -143,8 +143,9 @@ interface AssetsButtonProps {
     };
     onClick?: () => void;
     variant?: AssetsButtonVariant;
+    isLoading?: boolean;
 }
-declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
+declare function AssetsButton({ chain, token, onClick, variant, isLoading, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
 
 interface BoostButtonProps {
     boostMode: BoostMode;
@@ -162,8 +163,9 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     size: ButtonSize;
     disabled?: boolean;
     link?: string;
+    isLoading?: boolean;
 }
-declare function Button({ label, disabled, size, variant, icon, link, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ label, disabled, size, variant, icon, link, isLoading, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -233,7 +235,7 @@ interface NumericInputProps {
     maxUsdDecimals?: number;
     isInteractive?: boolean;
 }
-declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive, }: NumericInputProps): react_jsx_runtime.JSX.Element;
+declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive: isInteractiveProp, }: NumericInputProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
     value: number | undefined;
@@ -1371,8 +1373,9 @@ interface NavigationBarProps {
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
     actions?: ActionButton[];
+    isLoading?: boolean;
 }
-declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
+declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, isLoading, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
 declare function PipeSeparator({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 
@@ -1418,7 +1421,7 @@ interface SwapConfigurationProps {
     isInputInteractive?: boolean;
     isLoading?: boolean;
 }
-declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;
@@ -1747,7 +1750,9 @@ interface AssetsViewProps {
 declare function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }: AssetsViewProps): react_jsx_runtime.JSX.Element;
 declare const List: ({ children }: react__default.PropsWithChildren) => react_jsx_runtime.JSX.Element;
 
-declare function MainView(): react_jsx_runtime.JSX.Element;
+declare function MainView({ isLoading }: {
+    isLoading?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 type WalletViewType = 'paymentMethod' | 'recipientEmpty' | 'recipientTypingEns' | 'recipientTypingAddress';
 interface WalletsViewProps {
@@ -1987,4 +1992,4 @@ declare const MEDIA_QUERIES: Record<MediaQuery, {
     value: string;
 }>;
 
-export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, type HistoryItemStatus, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SizeTransition, SquidConfigProvider, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, type SwapHeaderProps, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapTransactionView, Switch, TextSkeleton, type ThemeType, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
+export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, type AssetsButtonVariant, AssetsView, BadgeImage, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, type HistoryItemStatus, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SizeTransition, SquidConfigProvider, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, type SwapHeaderProps, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapTransactionView, Switch, TextSkeleton, type ThemeType, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };

package/package.json

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