@0xsquid/ui 2.7.0 → 2.7.1-dex-beta.1

package/dist/cjs/index.js

@@ -4701,14 +4701,23 @@ const priceChangeSignToIconMap = {
     [PriceChangeSign.NEGATIVE]: (jsxRuntime.jsx(ArrowTriangle, { className: "tw-text-status-negative" })),
     [PriceChangeSign.NEUTRAL]: jsxRuntime.jsx(PauseIcon, {}),
 };
-function PriceChange({ value: rawValue = 0, variant = "small", }) {
+const priceChangeSignToTextColorMap = {
+    [PriceChangeSign.POSITIVE]: "tw-text-status-positive",
+    [PriceChangeSign.NEGATIVE]: "tw-text-status-negative",
+    [PriceChangeSign.NEUTRAL]: "tw-text-grey-500",
+};
+function PriceChange({ value: rawValue = 0, variant = "small", highlightText = false, triangleAsPrefix = false, }) {
     const valueFormatted = Math.abs(Number(rawValue)).toFixed(2);
     const sign = Number(rawValue) > 0
         ? PriceChangeSign.POSITIVE
         : Number(rawValue) < 0
             ? PriceChangeSign.NEGATIVE
             : PriceChangeSign.NEUTRAL;
-    return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xs tw-items-center tw-justify-end tw-text-grey-500", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center", children: [variant === "small" ? (jsxRuntime.jsx(CaptionText, { className: valueWrapperClassName, children: valueFormatted })) : (jsxRuntime.jsx(BodyText, { size: "small", className: valueWrapperClassName, children: valueFormatted })), jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px] tw-text-grey-600", children: "%" }), priceChangeSignToIconMap[sign]] }) }));
+    const textColorClass = highlightText
+        ? priceChangeSignToTextColorMap[sign]
+        : "tw-text-grey-500";
+    const triangle = priceChangeSignToIconMap[sign];
+    return (jsxRuntime.jsx("div", { className: cn("tw-flex tw-h-squid-xs tw-items-center tw-justify-end", textColorClass), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-[2px]", children: [triangleAsPrefix && triangle, variant === "small" ? (jsxRuntime.jsx(CaptionText, { className: valueWrapperClassName, children: valueFormatted })) : (jsxRuntime.jsx(BodyText, { size: "small", className: valueWrapperClassName, children: valueFormatted })), variant === "small" ? (jsxRuntime.jsx(CaptionText, { className: cn("!tw-leading-[10px]", highlightText ? textColorClass : "tw-text-grey-600"), children: "%" })) : (jsxRuntime.jsx(BodyText, { size: "small", className: cn("!tw-leading-[10px]", highlightText ? textColorClass : "tw-text-grey-600"), children: "%" }))] }) }));
 }
 
 const statusBgClassMap$1 = {
@@ -4982,7 +4991,7 @@ function LargeNumericInput({ onChange, value }) {
         if (isValidAmount)
             onChange(value || "");
     }, [onChange]);
-    return (jsxRuntime.jsxs("section", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-squid-l tw-pb-squid-m", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-1 tw-items-center tw-justify-center tw-self-stretch tw-text-7xl tw-text-royal-500", children: [jsxRuntime.jsx("span", { ref: inputValueSpyRef, className: "tw-pointer-events-none tw-absolute tw-opacity-0", children: value || placeholder }), jsxRuntime.jsx("span", { children: "$" }), jsxRuntime.jsx("input", { inputMode: "decimal", pattern: "[0-9.,]*", ref: inputRef, value: value, onChange: handleInputChange, className: "tw-max-w-full tw-bg-transparent tw-placeholder-royal-500 tw-outline-none focus:tw-outline-none", placeholder: placeholder })] }), jsxRuntime.jsx("footer", { className: "tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch", children: suggestedAmounts.map((amount) => (jsxRuntime.jsx(Chip, { label: `$${amount}`, onClick: () => {
+    return (jsxRuntime.jsxs("section", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-squid-l tw-pb-squid-m", children: [jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-w-full tw-flex-1 tw-items-center tw-justify-center tw-self-stretch tw-text-7xl tw-text-royal-500", children: jsxRuntime.jsxs("label", { className: "tw-flex tw-max-w-full tw-cursor-text tw-items-center tw-overflow-hidden tw-rounded-squid-l tw-px-squid-s tw-py-squid-xxs focus-within:tw-bg-material-light-thin hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx("span", { ref: inputValueSpyRef, className: "tw-pointer-events-none tw-absolute tw-opacity-0", children: value || placeholder }), jsxRuntime.jsx("span", { children: "$" }), jsxRuntime.jsx("input", { inputMode: "decimal", pattern: "[0-9.,]*", ref: inputRef, value: value, onChange: handleInputChange, className: "tw-max-w-[calc(100%-3.125rem)] tw-bg-transparent tw-placeholder-royal-500 tw-outline-none focus:tw-outline-none", placeholder: placeholder })] }) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch", children: suggestedAmounts.map((amount) => (jsxRuntime.jsx(Chip, { label: `$${amount}`, onClick: () => {
                         onChange(amount);
                     } }, amount))) })] }));
 }
@@ -19421,7 +19430,7 @@ function ModalContentDivider() {
 }
 
 function ModalTitle({ title }) {
-    return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-py-squid-xs", children: jsxRuntime.jsx(BodyText, { size: "small", children: title }) }));
+    return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-min-h-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-py-squid-xs", children: jsxRuntime.jsx(BodyText, { size: "small", children: title }) }));
 }
 
 function NavigationBar(_a) {
@@ -19496,7 +19505,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                                                     ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
                                                     : walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? "tw-text-grey-600"
-                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-2 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, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", 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,
@@ -20493,8 +20502,8 @@ const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) =
                 } }) }), jsxRuntime.jsxs("span", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(IconButton, { className: "tw-group/token-detail-fav-icon tw-text-grey-300", onClick: onLikeToken, icon: isFavorite ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilledHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsxRuntime.jsx(BrokenHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EmptyHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsxRuntime.jsx(FilledHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) }), jsxRuntime.jsx(IconButton, { className: "tw-text-grey-300", onClick: onClose, icon: jsxRuntime.jsx(CircleXFilledIcon, {}) })] })] }));
 const TokenInfo = ({ token, tokenPrice, priceChange, loading, }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(BodyText, { size: "large", loading: { isLoading: loading, width: "100px" }, children: tokenPrice.toLocaleString() }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-items-center tw-justify-between", children: [jsxRuntime.jsx(BodyText, { size: "small", children: token.name }), jsxRuntime.jsx(PriceChange, { value: priceChange, variant: "large" })] })] }));
 const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: "Balance" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx("img", { src: token.image, alt: token.name, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }), jsxRuntime.jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance, " ", token.symbol] })] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-grey-500", loading: { isLoading: loading, width: "60px" }, children: [jsxRuntime.jsx("span", { className: "tw-opacity-66", children: "$" }), balanceUSD] })] })] }));
-const MarketDataItem = ({ label, value, showDollar, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: label }), jsxRuntime.jsxs(CaptionText, { loading: { isLoading: loading, width: "60px" }, children: [showDollar && jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: "$" }), value] })] }));
-const TokenMarketData = ({ volume24h, marketCap, totalSupply, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-mb-squid-xs tw-flex tw-h-full tw-w-full tw-flex-row tw-items-center tw-justify-between", children: [jsxRuntime.jsx(MarketDataItem, { label: "24h volume", value: volume24h, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem, { label: "Market cap", value: marketCap, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem, { label: "Total supply", value: totalSupply, loading: loading })] }));
+const MarketDataItem$1 = ({ label, value, showDollar, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: label }), jsxRuntime.jsxs(CaptionText, { loading: { isLoading: loading, width: "60px" }, children: [showDollar && jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: "$" }), value] })] }));
+const TokenMarketData = ({ volume24h, marketCap, totalSupply, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-mb-squid-xs tw-flex tw-h-full tw-w-full tw-flex-row tw-items-center tw-justify-between", children: [jsxRuntime.jsx(MarketDataItem$1, { label: "24h volume", value: volume24h, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem$1, { label: "Market cap", value: marketCap, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem$1, { label: "Total supply", value: totalSupply, loading: loading })] }));
 const FooterButton = (_a) => {
     var { icon, label } = _a, props = __rest$1(_a, ["icon", "label"]);
     return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-p-squid-xxs", children: jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn("tw-flex tw-h-full tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m", !props.disabled && "hover:tw-bg-material-light-thin"), children: [jsxRuntime.jsx("span", { className: "tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-material-light-thin tw-text-grey-900 tw-shadow-elevation-light-1", style: props.disabled
@@ -27935,9 +27944,9 @@ function NumericInput(_a) {
     }, [userInputType, balance, token.price]);
     const containerClassname = "tw-px-squid-xs !tw-h-full tw-pt-squid-xxs mobile-xs-height:tw-pb-squid-s tw-text-heading-small tw-font-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
     const inputRef = React$1.useRef(null);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive && !isLoading ? (jsxRuntime.jsxs("form", { className: containerClassname, onSubmit: (e) => {
+    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-col", children: [isLoading && (jsxRuntime.jsx("div", { className: "tw-pointer-events-none tw-absolute tw-inset-0 tw-top-squid-xxs tw-z-10 tw-overflow-hidden", children: jsxRuntime.jsx("div", { className: "tw-h-full tw-w-[78.75rem] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), isInteractive && !isLoading ? (jsxRuntime.jsxs("form", { className: containerClassname, onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [userInputType === UserInputType.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", Object.assign({ ref: inputRef, 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-500 focus:tw-outline-none", userInputType === UserInputType.USD && "tw-pl-[33px]") }, props))] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsxRuntime.jsx("div", { className: "tw-font-regular 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-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", isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [userInputType === UserInputType.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", Object.assign({ ref: inputRef, 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-500 focus:tw-outline-none", userInputType === UserInputType.USD && "tw-pl-[33px]") }, props))] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsxRuntime.jsx("div", { className: "tw-font-regular tw-flex tw-h-[55px] tw-w-full tw-cursor-default tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small 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", isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
                         : userInputType === UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
@@ -28302,8 +28311,11 @@ function FilterButton({ selected, numApplied = 0, onClick, }) {
 }
 
 const IconButton = React$1.forwardRef((_a, ref) => {
-    var { icon, disabled = false } = _a, props = __rest$1(_a, ["icon", "disabled"]);
-    return (jsxRuntime.jsx("button", Object.assign({}, props, { ref: ref, disabled: disabled, className: cn("tw-flex tw-h-8 tw-w-8 tw-min-w-8 tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin", disabled ? "tw-text-grey-600" : "tw-text-grey-300", props.className), children: icon })));
+    var { icon, disabled = false, size = 32, variant = "rounded" } = _a, props = __rest$1(_a, ["icon", "disabled", "size", "variant"]);
+    return (jsxRuntime.jsx("button", Object.assign({}, props, { ref: ref, disabled: disabled, className: cn("tw-flex tw-items-center tw-justify-center hover:tw-bg-material-light-thin", {
+            "tw-rounded-squid-xs": variant === "rounded",
+            "tw-rounded-full": variant === "circle",
+        }, disabled ? "tw-text-grey-600" : "tw-text-grey-300", props.className), style: Object.assign({ height: size, width: size, minWidth: size }, props.style), children: icon })));
 });
 IconButton.displayName = "IconButton";
 
@@ -28313,7 +28325,7 @@ function SettingsButton({ label, isSelected = false, onClick, }) {
 
 const DEFAULT_TIMING_FUNCTION = "ease-out";
 const DEFAULT_ANIMATION_DURATION = 0.3;
-function Tabs({ tabs, size = "large", onTabChange, activeTab, }) {
+function Tabs({ tabs, size = "large", onTabChange, activeTab, isDisabled = false, }) {
     const [activeTabInfo, setActiveTabInfo] = React$1.useState({
         translateX: 0,
         width: 0,
@@ -28348,7 +28360,7 @@ function Tabs({ tabs, size = "large", onTabChange, activeTab, }) {
     return (jsxRuntime.jsxs("nav", { ref: navRef, className: "tw-relative tw-flex tw-items-center tw-gap-squid-m", children: [tabs.map((tab, index) => (React$1.createElement(Tab, Object.assign({}, tab, { key: index, size: size, onClick: (event) => {
                     handleTabClick(event);
                     onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
-                }, isActive: activeTab === index })))), jsxRuntime.jsx(motion.div, { className: "tw-absolute tw-bottom-0 tw-h-0.5 tw-rounded-[1px] tw-bg-royal-500", animate: {
+                }, isActive: activeTab === index, isDisabled: !!tab.isDisabled || !!isDisabled })))), !isDisabled && (jsxRuntime.jsx(motion.div, { className: "tw-absolute tw-bottom-0 tw-h-0.5 tw-rounded-[1px] tw-bg-royal-500", animate: {
                     transform: `translateX(${activeTabInfo.translateX}px)`,
                     width: activeTabInfo.width,
                     animationTimingFunction: DEFAULT_TIMING_FUNCTION,
@@ -28357,14 +28369,14 @@ function Tabs({ tabs, size = "large", onTabChange, activeTab, }) {
                     stiffness: 300,
                     damping: 30,
                     duration: DEFAULT_ANIMATION_DURATION,
-                } })] }));
+                } }))] }));
 }
 function Tab(_a) {
-    var { label, isActive, size } = _a, props = __rest$1(_a, ["label", "isActive", "size"]);
-    return (jsxRuntime.jsxs("button", Object.assign({}, props, { "aria-current": isActive ? "true" : undefined, className: cn("tw-group/tab-button tw-relative tw-flex tw-w-fit tw-items-center tw-justify-center tw-self-stretch", isActive ? "tw-text-grey-300" : "tw-text-grey-600", size === "small" ? "tw-h-[50px]" : "tw-h-squid-xxl", props.className), style: {
+    var { label, isActive, size, isDisabled } = _a, props = __rest$1(_a, ["label", "isActive", "size", "isDisabled"]);
+    return (jsxRuntime.jsxs("button", Object.assign({}, props, { disabled: isDisabled, "aria-current": isActive ? "true" : undefined, className: cn("tw-group/tab-button tw-relative tw-flex tw-w-fit tw-items-center tw-justify-center tw-self-stretch", isActive ? "tw-text-grey-300" : "tw-text-grey-600", size === "small" ? "tw-h-[50px]" : "tw-h-squid-xxl", props.className), style: {
             transition: `color ${DEFAULT_ANIMATION_DURATION}s`,
             transitionTimingFunction: DEFAULT_TIMING_FUNCTION,
-        }, children: [jsxRuntime.jsx(BodyText, { size: size, children: label }), !props.disabled && (jsxRuntime.jsx("span", { className: cn("tw-absolute tw-w-[calc(100%+20px)] tw-rounded-squid-s tw-p-squid-xs group-hover/tab-button:tw-bg-material-light-thin", size === "small" ? "tw-h-squid-l" : "tw-h-squid-xl") }))] })));
+        }, children: [jsxRuntime.jsx(BodyText, { size: size, children: label }), !props.disabled && (jsxRuntime.jsx("span", { className: cn("tw-absolute tw-w-[calc(100%+20px)] tw-rounded-squid-s tw-p-squid-xs", size === "small" ? "tw-h-squid-l" : "tw-h-squid-xl", !isDisabled && "group-hover/tab-button:tw-bg-material-light-thin") }))] })));
 }
 
 function useCountdown(initialSeconds) {
@@ -69963,6 +69975,30 @@ function TransactionView({ type, props }) {
     return jsxRuntime.jsx(Component, Object.assign({}, props));
 }
 
+function MarketHeader({ price, priceChange, selectedTimeSpan, onTimeSpanChange, menuItems, onMenuItemClick, onSettingsOpen, isMenuOpen, menuRef, dropdownRef, openDropdownButtonRef, isLoading, timeSpanOptions: customTimeSpanOptions, }) {
+    const defaultTimeSpanOptions = ["15M", "1H", "4H", "1D", "1W"];
+    const timeSpanOptions = customTimeSpanOptions !== null && customTimeSpanOptions !== void 0 ? customTimeSpanOptions : defaultTimeSpanOptions;
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-[80px] tw-flex-row tw-items-start tw-justify-between tw-gap-squid-xs tw-p-squid-xs", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-start tw-justify-between tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: [jsxRuntime.jsx(BodyText, { tight: true, size: "large", className: "tw-text-grey-100", loading: { isLoading }, children: price }), isLoading ? (jsxRuntime.jsx(TextSkeleton, { width: "60px", className: "tw-h-5", isLoading: true })) : (jsxRuntime.jsx(PriceChange, { value: priceChange, variant: "small", highlightText: true, triangleAsPrefix: true }))] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-items-center tw-justify-center", children: [timeSpanOptions.map((timeSpan) => (jsxRuntime.jsx(TimeframeChip, { label: timeSpan, isSelected: selectedTimeSpan === timeSpan, onClick: () => {
+                            onTimeSpanChange(timeSpan);
+                        } }, timeSpan))), jsxRuntime.jsx("div", { className: "tw-w-squid-xxs" }), menuItems && menuItems.length > 0 && (jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(IconButton, { ref: openDropdownButtonRef, icon: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "15" }), size: 20, variant: "circle", className: "tw-bg-grey-300 tw-text-grey-900", onClick: onSettingsOpen, "aria-label": "Open chart settings" }), isMenuOpen && (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, dropdownRef: dropdownRef, className: "tw-absolute tw-z-50", children: menuItems.map((item) => (jsxRuntime.jsx(DropdownMenuItem, { icon: item.icon, label: item.label, onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(item.id) }, item.id))) }))] }))] })] }));
+}
+function MarketChart({ children, isLoading, }) {
+    if (isLoading) {
+        return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center", children: jsxRuntime.jsx(Loader, { className: "tw-text-grey-500", size: "48" }) }));
+    }
+    if (children) {
+        return jsxRuntime.jsx("div", { className: "tw-h-full tw-w-full", children: children });
+    }
+    return (jsxRuntime.jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center", children: jsxRuntime.jsx(BodyText, { size: "medium", className: "tw-px-squid-l tw-text-grey-500", children: "Chart placeholder - Will be implemented with a third-party library" }) }));
+}
+const MarketDataItem = ({ label, value, isLoading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xs tw-px-squid-xs tw-py-squid-s", children: [jsxRuntime.jsx(CaptionText, { tight: true, className: "tw-text-grey-500", loading: { isLoading }, children: label }), jsxRuntime.jsx(BodyText, { tight: true, size: "small", className: "tw-text-grey-300", loading: { isLoading }, children: value })] }));
+function MarketStats({ stats, isLoading, }) {
+    return (jsxRuntime.jsx("div", { className: "tw-flex tw-items-end tw-justify-start tw-border-t tw-border-material-light-thin tw-px-squid-xs tw-py-squid-xxs", children: stats.map((stat, index) => (jsxRuntime.jsx(MarketDataItem, { label: stat.label, value: stat.value, isLoading: isLoading }, index))) }));
+}
+function DexChart({ price, priceChange, selectedTimeSpan, onTimeSpanChange, menuItems, onMenuItemClick, onSettingsOpen, isMenuOpen, menuRef, dropdownRef, openDropdownButtonRef, stats, children, isLoading, className, timeSpanOptions, }) {
+    return (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-min-h-[300px] tw-w-full tw-min-w-[200px] tw-max-w-[1200px] tw-rounded-squid-l tw-shadow-elevation-dark-2", className), children: [jsxRuntime.jsx(MarketHeader, { price: price, priceChange: priceChange, selectedTimeSpan: selectedTimeSpan, onTimeSpanChange: onTimeSpanChange, menuItems: menuItems, onMenuItemClick: onMenuItemClick, onSettingsOpen: onSettingsOpen, isMenuOpen: isMenuOpen, menuRef: menuRef, dropdownRef: dropdownRef, openDropdownButtonRef: openDropdownButtonRef, isLoading: isLoading, timeSpanOptions: timeSpanOptions }), jsxRuntime.jsx(MarketChart, { isLoading: isLoading, children: children }), jsxRuntime.jsx(MarketStats, { stats: stats, isLoading: isLoading })] }));
+}
+
 function ThemeProvider(_a) {
     var { theme = lightTheme, children, themeType = "light", settings } = _a, props = __rest$1(_a, ["theme", "children", "themeType", "settings"]);
     const parsedStyle = parseSquidTheme(theme, themeType);
@@ -70075,6 +70111,7 @@ exports.DashboardFast = DashboardFast;
 exports.DepositAddressView = DepositAddressView;
 exports.DescriptionBlocks = DescriptionBlocks;
 exports.DetailsToolbar = DetailsToolbar;
+exports.DexChart = DexChart;
 exports.DiscordIcon = DiscordIcon;
 exports.DockIconAnalytics = DockIconAnalytics;
 exports.DockIconCheckout = DockIconCheckout;
@@ -70250,6 +70287,7 @@ exports.ThemeProvider = ThemeProvider;
 exports.ThumbsUp = ThumbsUp;
 exports.Tick = Tick;
 exports.TimeFliesIcon = TimeFliesIcon;
+exports.TimeframeChip = TimeframeChip;
 exports.Timeline = Timeline;
 exports.Timestamp = Timestamp;
 exports.Toast = Toast;

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

@@ -1,6 +1,8 @@
 interface PriceChangeProps {
     variant?: "small" | "large";
     value: string | number;
+    highlightText?: boolean;
+    triangleAsPrefix?: boolean;
 }
-export declare function PriceChange({ value: rawValue, variant, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
+export declare function PriceChange({ value: rawValue, variant, highlightText, triangleAsPrefix, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export interface IconButtonProps extends React.ComponentProps<"button"> {
     icon: React.ReactNode;
+    size?: number;
+    variant?: "rounded" | "circle";
 }
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { type Timeframe } from "../layout/TokenDetailsView";
+interface MarketStat {
+    label: string;
+    value: string;
+}
+export interface ChartMenuItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface DexChartProps {
+    price: string;
+    priceChange: string | number;
+    isPositive?: boolean;
+    selectedTimeSpan: Timeframe;
+    onTimeSpanChange: (timeSpan: Timeframe) => void;
+    menuItems?: ChartMenuItem[];
+    onMenuItemClick?: (itemId: string) => void;
+    onSettingsOpen?: () => void;
+    isMenuOpen?: boolean;
+    menuRef?: React.RefObject<HTMLDivElement>;
+    dropdownRef?: React.RefObject<HTMLDivElement>;
+    openDropdownButtonRef?: React.RefObject<HTMLButtonElement>;
+    stats: MarketStat[];
+    children?: React.ReactNode;
+    isLoading?: boolean;
+    className?: string;
+    timeSpanOptions?: Timeframe[];
+}
+export declare function DexChart({ price, priceChange, selectedTimeSpan, onTimeSpanChange, menuItems, onMenuItemClick, onSettingsOpen, isMenuOpen, menuRef, dropdownRef, openDropdownButtonRef, stats, children, isLoading, className, timeSpanOptions, }: DexChartProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export * from "./DexChart";

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

@@ -7,3 +7,4 @@ export * from "./lists";
 export * from "./navigation";
 export * from "./typography";
 export * from "./views";
+export * from "./charts";

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

@@ -10,7 +10,7 @@ interface Chain {
     name: string;
     image: string;
 }
-export type Timeframe = "1H" | "1D" | "1W" | "1Y";
+export type Timeframe = "15M" | "1H" | "4H" | "1D" | "1W" | "1M" | "1Y";
 interface TokenDetailsViewProps {
     isOpen: boolean;
     onClose: () => void;
@@ -42,5 +42,10 @@ interface FooterButtonProps extends React.ComponentProps<"button"> {
     label: string;
     icon: React.ReactNode;
 }
+export declare const TimeframeChip: ({ label, isSelected, onClick, }: {
+    label: Timeframe;
+    isSelected: boolean;
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const TokenDetailsView: ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, isFavorite, Chart, initialTimeframe, onTimeframeChange, footerButtons, backdropStyle, colors, }: TokenDetailsViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,16 +3,19 @@ type TabSize = "small" | "large";
 interface TabsProps {
     tabs: Array<{
         label: string;
+        isDisabled?: boolean;
     }>;
     size?: TabSize;
     activeTab?: number;
     onTabChange?: (tabIndex: number) => void;
+    isDisabled?: boolean;
 }
-export declare function Tabs({ tabs, size, onTabChange, activeTab, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs({ tabs, size, onTabChange, activeTab, isDisabled, }: TabsProps): import("react/jsx-runtime").JSX.Element;
 interface TabProps extends React.ComponentProps<"button"> {
     label: string;
     size: TabSize;
     isActive?: boolean;
+    isDisabled?: boolean;
 }
-export declare function Tab({ label, isActive, size, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tab({ label, isActive, size, isDisabled, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { IconButton } from "../../components/buttons/IconButton";
 declare const meta: Meta<typeof IconButton>;
 export default meta;

package/dist/cjs/types/stories/charts/DexChart.stories.d.ts

@@ -0,0 +1,10 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { DexChart } from "../../components/charts/DexChart";
+declare const meta: Meta<typeof DexChart>;
+export default meta;
+type Story = StoryObj<typeof DexChart>;
+export declare const Default: Story;
+export declare const Negative: Story;
+export declare const WithoutMenu: Story;
+export declare const Loading: Story;
+export declare const MinimalTimeSpans: Story;

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { Input } from "../../components/controls/Input";
 declare const meta: Meta<typeof Input>;
 export default meta;

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

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { LargeNumericInput } from "../../components/controls/LargeNumericInput";
+declare const meta: Meta<typeof LargeNumericInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -4,7 +4,9 @@ declare const meta: Meta<typeof SwapConfiguration>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const EmptyVariantPrimary: Story;
+export declare const EmptyVariantPrimaryLoading: Story;
 export declare const EmptyVariantWithoutNumericInputDetails: Story;
+export declare const WithoutNumericInputDetailsLoading: Story;
 export declare const EmptyVariantAccent: Story;
 export declare const Loading: Story;
 export declare const LoadingWithAllProps: Story;

package/dist/cjs/types/stories/navigation/Tabs.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Small: Story;
 export declare const Large: Story;
+export declare const Disabled: Story;

package/dist/esm/index.js

@@ -4681,14 +4681,23 @@ const priceChangeSignToIconMap = {
     [PriceChangeSign.NEGATIVE]: (jsx(ArrowTriangle, { className: "tw-text-status-negative" })),
     [PriceChangeSign.NEUTRAL]: jsx(PauseIcon, {}),
 };
-function PriceChange({ value: rawValue = 0, variant = "small", }) {
+const priceChangeSignToTextColorMap = {
+    [PriceChangeSign.POSITIVE]: "tw-text-status-positive",
+    [PriceChangeSign.NEGATIVE]: "tw-text-status-negative",
+    [PriceChangeSign.NEUTRAL]: "tw-text-grey-500",
+};
+function PriceChange({ value: rawValue = 0, variant = "small", highlightText = false, triangleAsPrefix = false, }) {
     const valueFormatted = Math.abs(Number(rawValue)).toFixed(2);
     const sign = Number(rawValue) > 0
         ? PriceChangeSign.POSITIVE
         : Number(rawValue) < 0
             ? PriceChangeSign.NEGATIVE
             : PriceChangeSign.NEUTRAL;
-    return (jsx("div", { className: "tw-flex tw-h-squid-xs tw-items-center tw-justify-end tw-text-grey-500", children: jsxs("div", { className: "tw-flex tw-items-center tw-justify-center", children: [variant === "small" ? (jsx(CaptionText, { className: valueWrapperClassName, children: valueFormatted })) : (jsx(BodyText, { size: "small", className: valueWrapperClassName, children: valueFormatted })), jsx(CaptionText, { className: "!tw-leading-[10px] tw-text-grey-600", children: "%" }), priceChangeSignToIconMap[sign]] }) }));
+    const textColorClass = highlightText
+        ? priceChangeSignToTextColorMap[sign]
+        : "tw-text-grey-500";
+    const triangle = priceChangeSignToIconMap[sign];
+    return (jsx("div", { className: cn("tw-flex tw-h-squid-xs tw-items-center tw-justify-end", textColorClass), children: jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-[2px]", children: [triangleAsPrefix && triangle, variant === "small" ? (jsx(CaptionText, { className: valueWrapperClassName, children: valueFormatted })) : (jsx(BodyText, { size: "small", className: valueWrapperClassName, children: valueFormatted })), variant === "small" ? (jsx(CaptionText, { className: cn("!tw-leading-[10px]", highlightText ? textColorClass : "tw-text-grey-600"), children: "%" })) : (jsx(BodyText, { size: "small", className: cn("!tw-leading-[10px]", highlightText ? textColorClass : "tw-text-grey-600"), children: "%" }))] }) }));
 }
 
 const statusBgClassMap$1 = {
@@ -4962,7 +4971,7 @@ function LargeNumericInput({ onChange, value }) {
         if (isValidAmount)
             onChange(value || "");
     }, [onChange]);
-    return (jsxs("section", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-squid-l tw-pb-squid-m", children: [jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-1 tw-items-center tw-justify-center tw-self-stretch tw-text-7xl tw-text-royal-500", children: [jsx("span", { ref: inputValueSpyRef, className: "tw-pointer-events-none tw-absolute tw-opacity-0", children: value || placeholder }), jsx("span", { children: "$" }), jsx("input", { inputMode: "decimal", pattern: "[0-9.,]*", ref: inputRef, value: value, onChange: handleInputChange, className: "tw-max-w-full tw-bg-transparent tw-placeholder-royal-500 tw-outline-none focus:tw-outline-none", placeholder: placeholder })] }), jsx("footer", { className: "tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch", children: suggestedAmounts.map((amount) => (jsx(Chip, { label: `$${amount}`, onClick: () => {
+    return (jsxs("section", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-squid-l tw-pb-squid-m", children: [jsx("div", { className: "tw-relative tw-flex tw-w-full tw-flex-1 tw-items-center tw-justify-center tw-self-stretch tw-text-7xl tw-text-royal-500", children: jsxs("label", { className: "tw-flex tw-max-w-full tw-cursor-text tw-items-center tw-overflow-hidden tw-rounded-squid-l tw-px-squid-s tw-py-squid-xxs focus-within:tw-bg-material-light-thin hover:tw-bg-material-light-thin", children: [jsx("span", { ref: inputValueSpyRef, className: "tw-pointer-events-none tw-absolute tw-opacity-0", children: value || placeholder }), jsx("span", { children: "$" }), jsx("input", { inputMode: "decimal", pattern: "[0-9.,]*", ref: inputRef, value: value, onChange: handleInputChange, className: "tw-max-w-[calc(100%-3.125rem)] tw-bg-transparent tw-placeholder-royal-500 tw-outline-none focus:tw-outline-none", placeholder: placeholder })] }) }), jsx("footer", { className: "tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch", children: suggestedAmounts.map((amount) => (jsx(Chip, { label: `$${amount}`, onClick: () => {
                         onChange(amount);
                     } }, amount))) })] }));
 }
@@ -19401,7 +19410,7 @@ function ModalContentDivider() {
 }
 
 function ModalTitle({ title }) {
-    return (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-py-squid-xs", children: jsx(BodyText, { size: "small", children: title }) }));
+    return (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-min-h-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-py-squid-xs", children: jsx(BodyText, { size: "small", children: title }) }));
 }
 
 function NavigationBar(_a) {
@@ -19476,7 +19485,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                                                     ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
                                                     : walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? "tw-text-grey-600"
-                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 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, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", 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,
@@ -20473,8 +20482,8 @@ const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) =
                 } }) }), jsxs("span", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(IconButton, { className: "tw-group/token-detail-fav-icon tw-text-grey-300", onClick: onLikeToken, icon: isFavorite ? (jsxs(Fragment, { children: [jsx(FilledHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsx(BrokenHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) : (jsxs(Fragment, { children: [jsx(EmptyHeartIcon, { className: "tw-block group-hover/token-detail-fav-icon:tw-hidden" }), jsx(FilledHeartIcon, { className: "tw-hidden group-hover/token-detail-fav-icon:tw-block" })] })) }), jsx(IconButton, { className: "tw-text-grey-300", onClick: onClose, icon: jsx(CircleXFilledIcon, {}) })] })] }));
 const TokenInfo = ({ token, tokenPrice, priceChange, loading, }) => (jsxs("div", { children: [jsx(BodyText, { size: "large", loading: { isLoading: loading, width: "100px" }, children: tokenPrice.toLocaleString() }), jsxs("div", { className: "tw-flex tw-flex-row tw-items-center tw-justify-between", children: [jsx(BodyText, { size: "small", children: token.name }), jsx(PriceChange, { value: priceChange, variant: "large" })] })] }));
 const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(CaptionText, { className: "tw-text-grey-500", children: "Balance" }), jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsx("img", { src: token.image, alt: token.name, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }), jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance, " ", token.symbol] })] }), jsxs(CaptionText, { className: "tw-text-grey-500", loading: { isLoading: loading, width: "60px" }, children: [jsx("span", { className: "tw-opacity-66", children: "$" }), balanceUSD] })] })] }));
-const MarketDataItem = ({ label, value, showDollar, loading, }) => (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(CaptionText, { className: "tw-text-grey-500", children: label }), jsxs(CaptionText, { loading: { isLoading: loading, width: "60px" }, children: [showDollar && jsx("span", { className: "tw-text-grey-500", children: "$" }), value] })] }));
-const TokenMarketData = ({ volume24h, marketCap, totalSupply, loading, }) => (jsxs("div", { className: "tw-mb-squid-xs tw-flex tw-h-full tw-w-full tw-flex-row tw-items-center tw-justify-between", children: [jsx(MarketDataItem, { label: "24h volume", value: volume24h, showDollar: true, loading: loading }), jsx(MarketDataItem, { label: "Market cap", value: marketCap, showDollar: true, loading: loading }), jsx(MarketDataItem, { label: "Total supply", value: totalSupply, loading: loading })] }));
+const MarketDataItem$1 = ({ label, value, showDollar, loading, }) => (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(CaptionText, { className: "tw-text-grey-500", children: label }), jsxs(CaptionText, { loading: { isLoading: loading, width: "60px" }, children: [showDollar && jsx("span", { className: "tw-text-grey-500", children: "$" }), value] })] }));
+const TokenMarketData = ({ volume24h, marketCap, totalSupply, loading, }) => (jsxs("div", { className: "tw-mb-squid-xs tw-flex tw-h-full tw-w-full tw-flex-row tw-items-center tw-justify-between", children: [jsx(MarketDataItem$1, { label: "24h volume", value: volume24h, showDollar: true, loading: loading }), jsx(MarketDataItem$1, { label: "Market cap", value: marketCap, showDollar: true, loading: loading }), jsx(MarketDataItem$1, { label: "Total supply", value: totalSupply, loading: loading })] }));
 const FooterButton = (_a) => {
     var { icon, label } = _a, props = __rest$1(_a, ["icon", "label"]);
     return (jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-p-squid-xxs", children: jsxs("button", Object.assign({}, props, { className: cn("tw-flex tw-h-full tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m", !props.disabled && "hover:tw-bg-material-light-thin"), children: [jsx("span", { className: "tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-material-light-thin tw-text-grey-900 tw-shadow-elevation-light-1", style: props.disabled
@@ -27915,9 +27924,9 @@ function NumericInput(_a) {
     }, [userInputType, balance, token.price]);
     const containerClassname = "tw-px-squid-xs !tw-h-full tw-pt-squid-xxs mobile-xs-height:tw-pb-squid-s tw-text-heading-small tw-font-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
     const inputRef = useRef(null);
-    return (jsxs(Fragment, { children: [isInteractive && !isLoading ? (jsxs("form", { className: containerClassname, onSubmit: (e) => {
+    return (jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-col", children: [isLoading && (jsx("div", { className: "tw-pointer-events-none tw-absolute tw-inset-0 tw-top-squid-xxs tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-h-full tw-w-[78.75rem] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), isInteractive && !isLoading ? (jsxs("form", { className: containerClassname, onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [userInputType === UserInputType.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", Object.assign({ ref: inputRef, 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-500 focus:tw-outline-none", userInputType === UserInputType.USD && "tw-pl-[33px]") }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-font-regular 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-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", isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [userInputType === UserInputType.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", Object.assign({ ref: inputRef, 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-500 focus:tw-outline-none", userInputType === UserInputType.USD && "tw-pl-[33px]") }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-font-regular tw-flex tw-h-[55px] tw-w-full tw-cursor-default tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small 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", isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
                         : userInputType === UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
@@ -28282,8 +28291,11 @@ function FilterButton({ selected, numApplied = 0, onClick, }) {
 }
 
 const IconButton = forwardRef((_a, ref) => {
-    var { icon, disabled = false } = _a, props = __rest$1(_a, ["icon", "disabled"]);
-    return (jsx("button", Object.assign({}, props, { ref: ref, disabled: disabled, className: cn("tw-flex tw-h-8 tw-w-8 tw-min-w-8 tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin", disabled ? "tw-text-grey-600" : "tw-text-grey-300", props.className), children: icon })));
+    var { icon, disabled = false, size = 32, variant = "rounded" } = _a, props = __rest$1(_a, ["icon", "disabled", "size", "variant"]);
+    return (jsx("button", Object.assign({}, props, { ref: ref, disabled: disabled, className: cn("tw-flex tw-items-center tw-justify-center hover:tw-bg-material-light-thin", {
+            "tw-rounded-squid-xs": variant === "rounded",
+            "tw-rounded-full": variant === "circle",
+        }, disabled ? "tw-text-grey-600" : "tw-text-grey-300", props.className), style: Object.assign({ height: size, width: size, minWidth: size }, props.style), children: icon })));
 });
 IconButton.displayName = "IconButton";
 
@@ -28293,7 +28305,7 @@ function SettingsButton({ label, isSelected = false, onClick, }) {
 
 const DEFAULT_TIMING_FUNCTION = "ease-out";
 const DEFAULT_ANIMATION_DURATION = 0.3;
-function Tabs({ tabs, size = "large", onTabChange, activeTab, }) {
+function Tabs({ tabs, size = "large", onTabChange, activeTab, isDisabled = false, }) {
     const [activeTabInfo, setActiveTabInfo] = useState({
         translateX: 0,
         width: 0,
@@ -28328,7 +28340,7 @@ function Tabs({ tabs, size = "large", onTabChange, activeTab, }) {
     return (jsxs("nav", { ref: navRef, className: "tw-relative tw-flex tw-items-center tw-gap-squid-m", children: [tabs.map((tab, index) => (createElement(Tab, Object.assign({}, tab, { key: index, size: size, onClick: (event) => {
                     handleTabClick(event);
                     onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
-                }, isActive: activeTab === index })))), jsx(motion.div, { className: "tw-absolute tw-bottom-0 tw-h-0.5 tw-rounded-[1px] tw-bg-royal-500", animate: {
+                }, isActive: activeTab === index, isDisabled: !!tab.isDisabled || !!isDisabled })))), !isDisabled && (jsx(motion.div, { className: "tw-absolute tw-bottom-0 tw-h-0.5 tw-rounded-[1px] tw-bg-royal-500", animate: {
                     transform: `translateX(${activeTabInfo.translateX}px)`,
                     width: activeTabInfo.width,
                     animationTimingFunction: DEFAULT_TIMING_FUNCTION,
@@ -28337,14 +28349,14 @@ function Tabs({ tabs, size = "large", onTabChange, activeTab, }) {
                     stiffness: 300,
                     damping: 30,
                     duration: DEFAULT_ANIMATION_DURATION,
-                } })] }));
+                } }))] }));
 }
 function Tab(_a) {
-    var { label, isActive, size } = _a, props = __rest$1(_a, ["label", "isActive", "size"]);
-    return (jsxs("button", Object.assign({}, props, { "aria-current": isActive ? "true" : undefined, className: cn("tw-group/tab-button tw-relative tw-flex tw-w-fit tw-items-center tw-justify-center tw-self-stretch", isActive ? "tw-text-grey-300" : "tw-text-grey-600", size === "small" ? "tw-h-[50px]" : "tw-h-squid-xxl", props.className), style: {
+    var { label, isActive, size, isDisabled } = _a, props = __rest$1(_a, ["label", "isActive", "size", "isDisabled"]);
+    return (jsxs("button", Object.assign({}, props, { disabled: isDisabled, "aria-current": isActive ? "true" : undefined, className: cn("tw-group/tab-button tw-relative tw-flex tw-w-fit tw-items-center tw-justify-center tw-self-stretch", isActive ? "tw-text-grey-300" : "tw-text-grey-600", size === "small" ? "tw-h-[50px]" : "tw-h-squid-xxl", props.className), style: {
             transition: `color ${DEFAULT_ANIMATION_DURATION}s`,
             transitionTimingFunction: DEFAULT_TIMING_FUNCTION,
-        }, children: [jsx(BodyText, { size: size, children: label }), !props.disabled && (jsx("span", { className: cn("tw-absolute tw-w-[calc(100%+20px)] tw-rounded-squid-s tw-p-squid-xs group-hover/tab-button:tw-bg-material-light-thin", size === "small" ? "tw-h-squid-l" : "tw-h-squid-xl") }))] })));
+        }, children: [jsx(BodyText, { size: size, children: label }), !props.disabled && (jsx("span", { className: cn("tw-absolute tw-w-[calc(100%+20px)] tw-rounded-squid-s tw-p-squid-xs", size === "small" ? "tw-h-squid-l" : "tw-h-squid-xl", !isDisabled && "group-hover/tab-button:tw-bg-material-light-thin") }))] })));
 }
 
 function useCountdown(initialSeconds) {
@@ -69943,6 +69955,30 @@ function TransactionView({ type, props }) {
     return jsx(Component, Object.assign({}, props));
 }
 
+function MarketHeader({ price, priceChange, selectedTimeSpan, onTimeSpanChange, menuItems, onMenuItemClick, onSettingsOpen, isMenuOpen, menuRef, dropdownRef, openDropdownButtonRef, isLoading, timeSpanOptions: customTimeSpanOptions, }) {
+    const defaultTimeSpanOptions = ["15M", "1H", "4H", "1D", "1W"];
+    const timeSpanOptions = customTimeSpanOptions !== null && customTimeSpanOptions !== void 0 ? customTimeSpanOptions : defaultTimeSpanOptions;
+    return (jsxs("div", { className: "tw-flex tw-h-[80px] tw-flex-row tw-items-start tw-justify-between tw-gap-squid-xs tw-p-squid-xs", children: [jsxs("div", { className: "tw-flex tw-flex-col tw-items-start tw-justify-between tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: [jsx(BodyText, { tight: true, size: "large", className: "tw-text-grey-100", loading: { isLoading }, children: price }), isLoading ? (jsx(TextSkeleton, { width: "60px", className: "tw-h-5", isLoading: true })) : (jsx(PriceChange, { value: priceChange, variant: "small", highlightText: true, triangleAsPrefix: true }))] }), jsxs("div", { className: "tw-flex tw-flex-row tw-items-center tw-justify-center", children: [timeSpanOptions.map((timeSpan) => (jsx(TimeframeChip, { label: timeSpan, isSelected: selectedTimeSpan === timeSpan, onClick: () => {
+                            onTimeSpanChange(timeSpan);
+                        } }, timeSpan))), jsx("div", { className: "tw-w-squid-xxs" }), menuItems && menuItems.length > 0 && (jsxs("div", { className: "tw-relative", children: [jsx(IconButton, { ref: openDropdownButtonRef, icon: jsx(DotGrid1x3HorizontalIcon, { size: "15" }), size: 20, variant: "circle", className: "tw-bg-grey-300 tw-text-grey-900", onClick: onSettingsOpen, "aria-label": "Open chart settings" }), isMenuOpen && (jsx(DropdownMenu, { menuRef: menuRef, dropdownRef: dropdownRef, className: "tw-absolute tw-z-50", children: menuItems.map((item) => (jsx(DropdownMenuItem, { icon: item.icon, label: item.label, onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(item.id) }, item.id))) }))] }))] })] }));
+}
+function MarketChart({ children, isLoading, }) {
+    if (isLoading) {
+        return (jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center", children: jsx(Loader, { className: "tw-text-grey-500", size: "48" }) }));
+    }
+    if (children) {
+        return jsx("div", { className: "tw-h-full tw-w-full", children: children });
+    }
+    return (jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center", children: jsx(BodyText, { size: "medium", className: "tw-px-squid-l tw-text-grey-500", children: "Chart placeholder - Will be implemented with a third-party library" }) }));
+}
+const MarketDataItem = ({ label, value, isLoading, }) => (jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xs tw-px-squid-xs tw-py-squid-s", children: [jsx(CaptionText, { tight: true, className: "tw-text-grey-500", loading: { isLoading }, children: label }), jsx(BodyText, { tight: true, size: "small", className: "tw-text-grey-300", loading: { isLoading }, children: value })] }));
+function MarketStats({ stats, isLoading, }) {
+    return (jsx("div", { className: "tw-flex tw-items-end tw-justify-start tw-border-t tw-border-material-light-thin tw-px-squid-xs tw-py-squid-xxs", children: stats.map((stat, index) => (jsx(MarketDataItem, { label: stat.label, value: stat.value, isLoading: isLoading }, index))) }));
+}
+function DexChart({ price, priceChange, selectedTimeSpan, onTimeSpanChange, menuItems, onMenuItemClick, onSettingsOpen, isMenuOpen, menuRef, dropdownRef, openDropdownButtonRef, stats, children, isLoading, className, timeSpanOptions, }) {
+    return (jsxs("div", { className: cn("tw-relative tw-min-h-[300px] tw-w-full tw-min-w-[200px] tw-max-w-[1200px] tw-rounded-squid-l tw-shadow-elevation-dark-2", className), children: [jsx(MarketHeader, { price: price, priceChange: priceChange, selectedTimeSpan: selectedTimeSpan, onTimeSpanChange: onTimeSpanChange, menuItems: menuItems, onMenuItemClick: onMenuItemClick, onSettingsOpen: onSettingsOpen, isMenuOpen: isMenuOpen, menuRef: menuRef, dropdownRef: dropdownRef, openDropdownButtonRef: openDropdownButtonRef, isLoading: isLoading, timeSpanOptions: timeSpanOptions }), jsx(MarketChart, { isLoading: isLoading, children: children }), jsx(MarketStats, { stats: stats, isLoading: isLoading })] }));
+}
+
 function ThemeProvider(_a) {
     var { theme = lightTheme, children, themeType = "light", settings } = _a, props = __rest$1(_a, ["theme", "children", "themeType", "settings"]);
     const parsedStyle = parseSquidTheme(theme, themeType);
@@ -69954,4 +69990,4 @@ function ThemeProvider(_a) {
     return (jsx("div", Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), parsedStyle), "data-squid-theme-type": themeType, className: cn("tw-group tw-relative tw-flex tw-font-squid-main tw-h-d-screen mobile-lg:tw-h-auto", props.className), children: children })));
 }
 
-export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationCard, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownLeftIcon, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EscKeyIcon, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, FireIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LargeNumericInput, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, ModalTitle, MoneyBagIcon, MoneyBagSolidIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SearchMenuIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarFilledIcon, StarLinesIcon, StarOutlinedIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TrophyIcon, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, WalletIcon, WalletLink, WalletOutlinedIcon, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationCard, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownLeftIcon, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DexChart, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EscKeyIcon, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, FireIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LargeNumericInput, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, ModalTitle, MoneyBagIcon, MoneyBagSolidIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SearchMenuIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarFilledIcon, StarLinesIcon, StarOutlinedIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, TimeframeChip, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TrophyIcon, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, WalletIcon, WalletLink, WalletOutlinedIcon, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };

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

@@ -1,6 +1,8 @@
 interface PriceChangeProps {
     variant?: "small" | "large";
     value: string | number;
+    highlightText?: boolean;
+    triangleAsPrefix?: boolean;
 }
-export declare function PriceChange({ value: rawValue, variant, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
+export declare function PriceChange({ value: rawValue, variant, highlightText, triangleAsPrefix, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export interface IconButtonProps extends React.ComponentProps<"button"> {
     icon: React.ReactNode;
+    size?: number;
+    variant?: "rounded" | "circle";
 }
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;