@0xsquid/ui 0.17.3 → 0.17.4

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useState, createContext, useContext, useMemo, useRef, useEffect, Children, Fragment as Fragment$1, isValidElement, useLayoutEffect, cloneElement, useCallback, forwardRef, useImperativeHandle, useId as useId$1 } from 'react';
+import { forwardRef, createElement, useState, createContext, useContext, useMemo, useRef, useEffect, Children, Fragment as Fragment$1, isValidElement, useLayoutEffect, cloneElement, useCallback, useImperativeHandle, useId as useId$1 } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2581,6 +2581,12 @@ const formatRelativeDate = (timestampSeconds) => {
 function truncateHash(hash) {
     return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
 }
+const styled = (tag, className) => {
+    const Component = forwardRef((props, ref) => createElement(tag, mergeProps({ ref, className }, props)));
+    Component.displayName = `styled ${tag}`;
+    return Component;
+};
+const mergeProps = (a, b) => (Object.assign(Object.assign(Object.assign({}, a), b), { className: cn(a.className, b.className), style: Object.assign(Object.assign({}, a.style), b.style) }));
 
 const badgeSizeClassMap = {
     sm: 'tw-w-4 tw-h-4',
@@ -2720,9 +2726,9 @@ const LoadingProvider = LoadingContext.Provider;
 function LoadingSkeleton({ className, height = '20', isLoading: isLoadingProp, children, width = '100', }) {
     const contextValue = useContext(LoadingContext);
     const isLoading = isLoadingProp !== undefined ? isLoadingProp : contextValue;
-    if (isLoading === false)
+    if (children && !isLoading)
         return children;
-    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsx("stop", { stopColor: "currentColor" }), jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsx("clipPath", { id: "clip0_1246_29063", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsx("stop", { stopColor: "currentColor" }), jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsx("clipPath", { id: "clip0_1246_29063", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
 }
 
 function Checkmark1Icon() {
@@ -2895,7 +2901,7 @@ function Copy(_a) {
 }
 
 function HashLink({ showTx = false, hash, showCopyButton = false, url, children, }) {
-    return (jsxs("div", { className: "tw-flex tw-items-center", children: [showTx && jsx("span", { className: "tw-text-grey-700", children: "TX" }), jsxs("a", { href: url, target: "_blank", className: cn('tw-flex tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xxs', url && 'hover:tw-bg-material-light-thin'), children: [children !== null && children !== void 0 ? children : truncateHash(hash), url && (jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }))] }), showCopyButton && (jsx(Copy, { size: "16", strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-cursor-pointer tw-text-royal-500", onClick: () => navigator.clipboard.writeText(hash) }))] }));
+    return (jsxs("div", { className: "tw-flex tw-items-center", children: [showTx && jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : truncateHash(hash), url && (jsx("a", { href: url, target: "_blank", className: 'tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin', children: jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }) })), showCopyButton && (jsx("span", { className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", children: jsx(Copy, { size: "16", strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-cursor-pointer tw-text-royal-500", onClick: () => navigator.clipboard.writeText(hash) }) }))] }));
 }
 
 function WalletLink({ imageURI, address }) {
@@ -6713,9 +6719,10 @@ function useOnResize(ref, callback) {
         const observer = new ResizeObserver(([entry]) => {
             if (!entry)
                 return;
-            callback(entry.contentRect);
+            callbackRef.current(entry.contentRect);
         });
         observer.observe(ref.current);
+        callbackRef.current(ref.current.getBoundingClientRect());
         return () => observer.disconnect();
     }, [ref.current]);
 }
@@ -6742,7 +6749,7 @@ function Collapse(_a) {
     const containerRef = useRef(null);
     const contentsRef = useRef(null);
     const contentsRect = useRect(contentsRef);
-    const expandedHeight = contentsRect.height;
+    const expandedHeight = Math.max(contentsRect.height, collapsedHeight);
     return (jsx("div", Object.assign({ ref: containerRef, style: {
             [expandednessVar]: collapsed ? 0 : 1,
             transition: `${expandednessVar} ${duration}ms ${ANIMATION_TIMINGS.SHOW_ROUTE}`,
@@ -7209,7 +7216,7 @@ function ActionRow(_a) {
     return (jsx("div", Object.assign({}, props, { className: cn('tw-grid tw-grid-cols-[40px,1fr,60px] tw-gap-squid-xs tw-pl-squid-m', className) })));
 }
 function ActionWrapper({ children, status, className, }) {
-    return (jsx("div", { className: cn('tw-relative tw-flex tw-flex-col tw-gap-squid-xxs', status === 'waiting' ? 'tw-bg-grey-800' : 'tw-bg-grey-900', className), children: children }));
+    return (jsx("div", { className: cn('tw-relative tw-flex tw-flex-col tw-gap-squid-xxs', status === 'waiting' && 'tw-bg-grey-800', className), children: children }));
 }
 function Timestamp({ time }) {
     return (jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [formatRelativeDate(time), jsx("span", { className: "tw-text-grey-700", children: "\u2022" }), formatTime(time)] }));
@@ -7224,7 +7231,7 @@ function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, ch
 }
 
 function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }) {
-    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(SquareArrowTopLeftIcon, {}), description: jsxs(Inline, { children: ["Bridge", jsx(IconLabel, { src: token.logoURI, variant: "round", children: token.symbol }), "to", jsx(IconLabel, { src: chain.logoURI, children: chain.name }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
+    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(SquareArrowTopLeftIcon, {}), description: jsxs(Inline, { children: ["Bridge", jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: token.symbol }) }), "to", jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
 }
 
 function TagIcon({ size = '20' }) {
@@ -7245,8 +7252,8 @@ function FeesLines({ status, lines, showTimeline = false, }) {
                         ? statusTextClassMap[status]
                         : '!tw-text-[transparent]'), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })] }));
 }
-function FeesRow({ label, usd, eth, collapsed = false }) {
-    return (jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsx(SizeTransition, { children: jsx(BodyText, { size: "small", tight: true, className: cn('tw-block tw-text-nowrap tw-text-grey-300', !collapsed && 'tw-w-[100px]'), children: label }) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(PipeSeparator, { className: "tw-text-grey-700" }) }), jsx(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: usd }), jsx(CaptionText, { className: "tw-text-right tw-text-grey-500", children: eth })] }));
+function FeesRow({ label, usd, amount, symbol, collapsed = false, }) {
+    return (jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsx(SizeTransition, { children: jsx(BodyText, { size: "small", tight: true, className: cn('tw-block tw-truncate tw-text-grey-300', !collapsed && 'tw-w-[100px]'), children: label }) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(PipeSeparator, { className: "tw-text-grey-700" }) }), jsxs(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: ["$", usd] }), jsxs(CaptionText, { className: "tw-text-right tw-text-grey-500", children: [amount, " ", symbol] })] }));
 }
 
 function IncompleteAction({ status, nextStatus, message, buttons, }) {
@@ -7262,11 +7269,11 @@ function linkActionTimelineProps(actions, collapsed) {
 }
 
 function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }) {
-    return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsx(ImageIcon, { src: nft.imageURI, variant: "square", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsx(PipeSeparator, { className: "tw-text-grey-700" }), jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
+    return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsx(ImageIcon, { src: nft.imageURI, variant: "square", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), jsx(PipeSeparator, { className: "tw-text-grey-700" }), jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
 }
 
 function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
-    return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsx(ImageIcon, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), ' ', jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
+    return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsx(ImageIcon, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), ' ', jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
 }
 
 function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
@@ -7280,9 +7287,9 @@ function PieChartIcon() {
 function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }) {
     return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(PieChartIcon, {}), description: jsx(Inline, { children: [
                 'Stake',
-                jsx(IconLabel, { src: token.logoURI, variant: "round", children: token.symbol }),
+                jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: token.symbol }) }),
                 'on',
-                jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name }),
+                jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) }),
             ] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
 }
 
@@ -7302,22 +7309,15 @@ function StartAction({ status, nextStatus, showTimeline = false, showBody = fals
 function SuccessAction({ nextStatus, status, description = status === 'error'
     ? 'Transaction failed'
     : 'Transaction successful', showTimeline, showBody, timestamp, hash, url, }) {
-    return (jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
+    return (jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: (timestamp || hash) && (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
 }
 
 function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
-    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxs(Inline, { children: ["Swap", jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: fromToken.symbol }), "to", jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: toToken.symbol }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
+    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxs(Inline, { children: ["Swap", jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
 }
 
 function WrapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
-    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsx(Inline, { children: [
-                'Wrap',
-                jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: fromToken.symbol }),
-                'to',
-                jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: toToken.symbol }),
-                'via',
-                jsx(IconLabel, { src: provider.logoURI, variant: "round", children: provider.name }),
-            ] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
+    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxs(Inline, { children: ["Wrap", jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
 }
 
 const actionComponentMap = {
@@ -7362,9 +7362,8 @@ function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false
     return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: !isHidden && (jsx("ul", { className: cn('tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs', listClassName), children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item), item.label))) })) }) }));
 }
 
-function ExploreLayout({ navigation, children }) {
-    return (jsxs("div", { className: "tw-overflow-hidden tw-rounded-squid-l tw-shadow-elevation-light-3", children: [jsx("div", { className: "tw-flex tw-min-h-squid-xl tw-items-center tw-border-b tw-border-b-material-dark-thin tw-bg-grey-800 tw-px-squid-m tw-text-grey-500 dark:tw-border-b-material-light-thin", children: navigation }), jsx("div", { className: "tw-bg-grey-900", children: children })] }));
-}
+const ExploreLayout = styled('div', 'tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-shadow-elevation-light-3');
+const ExploreNav = styled('div', 'tw-flex tw-min-h-squid-xl tw-items-center tw-border-b tw-border-b-material-dark-thin tw-bg-grey-800 tw-px-squid-m tw-text-grey-500 dark:tw-border-b-material-light-thin');
 
 function InfoBox({ title, description, icon }) {
     return (jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
@@ -13322,13 +13321,13 @@ function Tick({ className }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "7", fill: "none", viewBox: "0 0 9 7", className: className, children: jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M7.497 1l-4.5 4.5-2-2" }) }));
 }
 
-function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status, setStatus, chains, }) {
-    return (jsxs("div", { className: "tw-flex tw-w-[300px] tw-flex-col tw-border-l tw-border-material-light-thin tw-bg-material-dark-thin tw-py-squid-xxl tw-backdrop-blur-2xl dark:tw-bg-material-dark-thick", children: [jsx(FilterSection, { title: "Chain", children: jsx(ChainsFilter, { chainType: chainType, setChainType: setChainType, chain: chain, setChain: setChain, chains: chains }) }), jsx(FilterSection, { title: "Date", initCollapsed: true, children: jsx(DateFilters, { fromDate: fromDate, setFromDate: setFromDate, toDate: toDate, setToDate: setToDate }) }), jsx(FilterSection, { title: "Status", initCollapsed: true, children: jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: status.map((s) => (jsx(StatusFilter, { status: s, selected: status.includes(s), onChange: () => setStatus(arrayToggle(status, s)), icon: s === 'ongoing' ? jsx(DotGrid1x3HorizontalIcon, {}) : undefined }, s))) }) })] }));
+function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status = [], setStatus, chains, }) {
+    return (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(FilterSection, { title: "Chain", children: jsx(ChainsFilter, { chainType: chainType, setChainType: setChainType, chain: chain, setChain: setChain, chains: chains }) }), jsx(FilterSection, { title: "Date", initCollapsed: true, children: jsx(DateFilters, { fromDate: fromDate, setFromDate: setFromDate, toDate: toDate, setToDate: setToDate }) }), jsx(FilterSection, { title: "Status", initCollapsed: true, children: jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: ['success', 'ongoing', 'error'].map((s) => (jsx(StatusFilter, { status: s, selected: status.length === 0 || status.includes(s), onChange: () => setStatus(arrayToggle(status, s)), icon: s === 'ongoing' ? jsx(DotGrid1x3HorizontalIcon, {}) : undefined }, s))) }) })] }));
 }
 const arrayToggle = (array, value) => array.includes(value) ? array.filter((v) => v !== value) : [...array, value];
 function ChainsFilter({ chainType, setChainType, chain, setChain, chains, }) {
     const [search, setSearch] = useState('');
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "tw-flex tw-gap-squid-xxs", children: [jsxs(Toggle, { selected: chainType === 'source', onClick: () => setChainType('source'), children: [jsx(ArrowRightUpCircleIcon, {}), "Source"] }), jsxs(Toggle, { selected: chainType === 'destination', onClick: () => setChainType('destination'), children: [jsx(ArrowRightDownCircleIcon, {}), "Destination"] })] }), jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value) }), jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: [jsx(ChainFilter, { name: "All Chains", logoURI: chainDataURL, selected: chain === null, onClick: () => setChain(null) }), chains
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "tw-flex tw-gap-squid-xxs", children: [jsxs(Toggle, { selected: chainType === 'source', onClick: () => setChainType('source'), children: [jsx(ArrowRightUpCircleIcon, {}), "Source"] }), jsxs(Toggle, { selected: chainType === 'destination', onClick: () => setChainType('destination'), children: [jsx(ArrowRightDownCircleIcon, {}), "Destination"] })] }), jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value) }), jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: [jsx(ChainFilter, { name: "All Chains", logoURI: chainDataURL, selected: chain === null, onClick: () => setChain(undefined) }), chains
                         .filter(({ name }) => search === '' ||
                         name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
                         .map(({ logoURI, name }, index) => (jsx(ChainFilter, { name: name, logoURI: logoURI, selected: chain === name, onClick: () => setChain(name) }, index)))] })] }));
@@ -13360,7 +13359,7 @@ function DateFilter({ label, placeholder, fromDate, toDate, type, onChange, expa
     const onDayPickerSelect = (date) => {
         if (!date) {
             setInputValue('');
-            onChange(null);
+            onChange(undefined);
         }
         else {
             onChange(date);
@@ -13376,7 +13375,7 @@ function DateFilter({ label, placeholder, fromDate, toDate, type, onChange, expa
             setMonth(date);
         }
         else {
-            onChange(null);
+            onChange(undefined);
         }
     };
     return (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-200", children: label }), jsx(Input, { className: "date-input-no-icon", icon: jsx(Calendar, {}), placeholder: placeholder, value: inputValue, onClick: () => setExpanded(true), type: "date", onChange: onInputChange }), jsx(Collapse, { collapsed: !expanded, children: jsx(DayPicker, { weekStartsOn: 1, formatters: {
@@ -13408,16 +13407,16 @@ function Checkbox({ checked, onChange, children, className }) {
 }
 const chainDataURL = "data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' fill='%239E79D2'/%3E%3Cpath d='M13.125 8.90625L13.8295 8.21098C16.0274 6.01301 19.5911 6.01301 21.789 8.21098C23.987 10.4089 23.987 13.9726 21.789 16.1705L21.0938 16.875M8.90625 13.125L8.21097 13.8295C6.01301 16.0274 6.01301 19.5911 8.21098 21.789C10.4089 23.987 13.9726 23.987 16.1705 21.789L16.875 21.0938M13.125 16.875L16.875 13.125' stroke='%23FBFBFD' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'/%3E%3C/svg%3E%0A";
 
-function TransactionHeaderLayout({ status, title, image = jsx("span", {}), children, }) {
-    return (jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-bg-grey-900 tw-py-squid-l tw-pl-[75px] tw-pr-squid-l", children: [jsxs("div", { className: "tw-flex tw-justify-between", children: [image, status && jsx(TransactionState, { status: status })] }), jsx(HeadingText, { size: "small", className: "tw-text-grey-300", children: title }), jsx("div", { children: children })] }));
+function TransactionHeaderLayout({ status, title, image = jsx("span", {}), children, isLoading, }) {
+    return (jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs tw-bg-grey-900 tw-py-squid-l tw-pl-[75px] tw-pr-squid-l", children: [jsxs("div", { className: "tw-flex tw-justify-between", children: [image, status && jsx(TransactionState, { status: status })] }), jsx(LoadingSkeleton, { isLoading: isLoading, children: jsx(HeadingText, { size: "small", className: "tw-text-grey-300", children: title }) }), jsx("div", { children: jsx(LoadingSkeleton, { isLoading: isLoading, children: children }) })] }));
 }
 
 function BridgeHeader({ tokenLogoURI, chainLogoURI, title = 'Bridge', hash, url, status, }) {
-    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxs("div", { className: "tw-relative", children: [jsx(ImageIcon, { src: tokenLogoURI, size: "xlarge", variant: "round" }), jsx(ImageIcon, { src: chainLogoURI, className: "tw-absolute -tw-right-squid-xxs tw-bottom-0" })] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
+    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxs("div", { className: "tw-relative", children: [jsx(ImageIcon, { src: tokenLogoURI, size: "xlarge", variant: "round" }), jsx(ImageIcon, { src: chainLogoURI, className: "tw-absolute -tw-right-squid-xxs tw-bottom-0" })] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
 }
 
 function BuyNFTHeader({ imageUrl, title = 'Buy NFT', hash, url, status, }) {
-    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsx(ImageIcon, { src: imageUrl, size: "xlarge" }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
+    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsx(ImageIcon, { src: imageUrl, size: "xlarge" }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
 }
 
 function Approve() {
@@ -13425,7 +13424,7 @@ function Approve() {
 }
 
 function InteractionHeader({ title = 'Interaction', image = jsx(Approve, {}), hash, url, status, }) {
-    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: image, children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
+    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: image, children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
 }
 
 function CoinsIcon() {
@@ -13446,7 +13445,7 @@ function ProfilePicture({ src }) {
 }
 
 function SwapHeader({ fromToken, toToken, title = 'Swap', hash, url, status, }) {
-    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsx(TokenPair, { firstToken: fromToken, secondToken: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
+    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsx(TokenPair, { firstToken: fromToken, secondToken: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), ' '] }) }));
 }
 
 const headerComponentsMap = {
@@ -13528,8 +13527,8 @@ function TransactionProperties({ type, props, }) {
     return jsx(Component, Object.assign({}, props));
 }
 
-function TransactionSearch({ query, setQuery, children, }) {
-    return (jsx("div", { className: "tw-relative tw-h-[50px]", children: jsxs("div", { className: "tw-l-0 tw-absolute tw-top-0 tw-flex tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-[25px] tw-border-material-light-thin tw-bg-material-dark-thin tw-p-squid-xxs tw-backdrop-blur-2xl dark:tw-bg-material-dark-thick", children: [jsx(Input, { placeholder: "Transaction hash or address", value: query, onChange: (e) => setQuery(e.target.value), actionButtonProps: {
+function TransactionSearch({ query, setQuery, children, className, }) {
+    return (jsx("div", { className: cn('tw-relative tw-h-[50px]', className), children: jsxs("div", { className: "tw-l-0 tw-absolute tw-top-0 tw-flex tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-[25px] tw-border-material-light-thin tw-bg-material-dark-thin tw-p-squid-xxs tw-backdrop-blur-2xl dark:tw-bg-material-dark-thick", children: [jsx(Input, { placeholder: "Transaction hash or address", value: query, onChange: (e) => setQuery(e.target.value), actionButtonProps: {
                         label: 'Paste',
                         onClick: () => __awaiter$1(this, void 0, void 0, function* () { return setQuery(yield navigator.clipboard.readText()); }),
                     } }), children && (jsx("div", { className: "tw-max-h-[80vh] tw-overflow-y-auto tw-overflow-x-hidden tw-rounded-[20px]", children: children }))] }) }));
@@ -13826,10 +13825,10 @@ function FilterIcon() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "16", fill: "none", viewBox: "0 0 20 16", children: jsx("path", { fill: "currentColor", fillOpacity: "0.66", fillRule: "evenodd", d: "M0 1a1 1 0 011-1h18a1 1 0 110 2H1a1 1 0 01-1-1zm3 7a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3 7a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z", clipRule: "evenodd" }) }));
 }
 
-function FilterButton({ selected, numApplied = 0 }) {
+function FilterButton({ selected, numApplied = 0, onClick, }) {
     return (jsxs("div", { className: "tw-relative", children: [jsx(Button$1, { variant: "tertiary", size: "md", className: cn(selected
                     ? '!tw-bg-grey-500 !tw-text-grey-800'
-                    : '!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500'), children: jsx(FilterIcon, {}) }), numApplied > 0 && (jsx("div", { className: "tw-absolute tw-right-0 tw-top-0 tw-h-squid-m tw-w-squid-xl -tw-translate-y-1/2 tw-translate-x-1/2 tw-rounded-full tw-bg-[#E4FE53] tw-text-center tw-leading-[1] tw-text-grey-200 dark:tw-text-grey-900", children: jsx(CaptionText, { children: numApplied }) }))] }));
+                    : '!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500'), onClick: onClick, children: jsx(FilterIcon, {}) }), numApplied > 0 && (jsx("div", { className: "tw-absolute tw-right-0 tw-top-0 tw-h-squid-m tw-w-squid-xl -tw-translate-y-1/2 tw-translate-x-1/2 tw-rounded-full tw-bg-[#E4FE53] tw-text-center tw-leading-[1] tw-text-grey-200 dark:tw-text-grey-900", children: jsx(CaptionText, { children: numApplied }) }))] }));
 }
 
 function SettingsButton({ label, isSelected = false, onClick, }) {
@@ -49076,13 +49075,15 @@ function TransactionViewLayout(_a) {
     return (jsxs("div", Object.assign({ className: "tw-divide-y tw-divide-material-light-thin" }, props, { children: [header, properties, jsx(CollapsingSection, { collapsed: actionsCollapsed, setCollapsed: setActionsCollapsed, children: linkActionTimelineProps(actions, actionsCollapsed).map((props, i) => (jsx("div", { className: cn(i > 0 && 'tw-border-t tw-border-t-material-light-thin'), children: jsx(TransactionAction, Object.assign({}, props)) }, i))) }), jsxs(CollapsingSection, { collapsed: feesCollapsed, setCollapsed: setFeesCollapsed, children: [jsx(FeesTotal, Object.assign({ collapsed: feesCollapsed, showTimeline: true }, fees)), jsx(FeesLines, Object.assign({}, fees))] })] })));
 }
 function CollapsingSection({ children, collapsed, setCollapsed, collapsedHeight = 50, }) {
-    return (jsx("div", { className: cn('tw-relative', collapsed ? 'tw-cursor-pointer' : ''), onClick: () => {
+    return (jsx("div", { className: cn('tw-group/collapsing-section tw-relative tw-bg-grey-900', collapsed ? 'tw-cursor-pointer' : ''), onClick: () => {
             if (collapsed)
                 setCollapsed(false);
         }, children: jsxs("div", { className: cn('tw-relative tw-border-material-light-thin tw-transition-[border-width] tw-duration-200', !collapsed && 'tw-border-y-[4px]'), children: [jsx("div", { className: "cursor-pointer tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-flex tw-h-full tw-cursor-pointer tw-items-center tw-pr-squid-m", style: { height: `${collapsedHeight}px` }, onClick: () => {
                         if (!collapsed)
                             setCollapsed(true);
-                    }, children: jsx(ChevronLargeDownIcon, { className: cn('tw-origin-center tw-text-grey-300 tw-transition-transform tw-duration-200', collapsed && '-tw-rotate-90') }) }), jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, className: collapsed ? 'tw-pointer-events-none' : '', children: children })] }) }));
+                    }, children: jsx(ChevronLargeDownIcon, { className: cn('tw-origin-center tw-text-grey-300 tw-transition-transform tw-duration-200', collapsed && '-tw-rotate-90') }) }), jsx("div", { 
+                    // hover highlight
+                    className: "tw-pointer-events-none tw-absolute tw-left-0 tw-top-0 tw-h-[50px] tw-w-full", children: jsx("div", { className: cn('tw-absolute tw-bottom-squid-xxs tw-left-squid-xs tw-right-squid-xs tw-top-squid-xxs tw-rounded-squid-xs tw-bg-material-light-thin tw-opacity-0 tw-transition-opacity tw-duration-200', collapsed && 'group-hover/collapsing-section:tw-opacity-100') }) }), jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, children: children })] }) }));
 }
 
 function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, }) {
@@ -49301,4 +49302,4 @@ function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light'
     return (jsx("div", { style: Object.assign(Object.assign({}, parsedStyle), { justifyContent: 'center', alignItems: 'center', display: 'flex' }), "data-squid-theme-type": themeType, className: "mobile-lg:tw-h-auto tw-group tw-relative tw-h-screen tw-font-geist", children: children }));
 }
 
-export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, ExploreLayout, FeeButton, FeesAction, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, SettingsItem, SettingsSlider, SizeTransition, SquidConfigProvider, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepsCollapsed, SwapTransactionView, Switch, Timestamp, TokenPair, Tooltip, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu };
+export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, ExploreLayout, ExploreNav, FeeButton, FeesAction, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, SettingsItem, SettingsSlider, SizeTransition, SquidConfigProvider, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepsCollapsed, SwapTransactionView, Switch, Timestamp, TokenPair, Tooltip, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu };

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

@@ -7,5 +7,5 @@ interface LoadingSkeletonProps {
     children?: React.ReactNode;
     width?: string;
 }
-export declare function LoadingSkeleton({ className, height, isLoading: isLoadingProp, children, width, }: LoadingSkeletonProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
+export declare function LoadingSkeleton({ className, height, isLoading: isLoadingProp, children, width, }: LoadingSkeletonProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 interface FilterButtonProps {
     selected: boolean;
     numApplied?: number;
+    onClick?: () => void;
 }
-export declare function FilterButton({ selected, numApplied }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterButton({ selected, numApplied, onClick, }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface AppContainerProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function AppContainer({ children, className, ...props }: AppContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,7 +1,3 @@
-import { ReactNode } from 'react';
-interface ExploreLayoutProps {
-    navigation?: ReactNode;
-    children?: ReactNode;
-}
-export declare function ExploreLayout({ navigation, children }: ExploreLayoutProps): import("react/jsx-runtime").JSX.Element;
-export {};
+/// <reference types="react" />
+export declare const ExploreLayout: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<import("react").ElementType<"div">>>;
+export declare const ExploreNav: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<import("react").ElementType<"div">>>;

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

@@ -1,16 +1,16 @@
 import 'react-day-picker/dist/style.css';
 import { ChainTypeFilter, StatusFilter as TStatusFilter } from '../../types/components';
 interface TransactionFiltersProps {
-    chainType: ChainTypeFilter;
+    chainType?: ChainTypeFilter;
     setChainType: (chainType: ChainTypeFilter) => void;
-    chain: string | null;
-    setChain: (chain: string | null) => void;
-    fromDate: Date | null;
-    setFromDate: (fromDate: Date | null) => void;
-    toDate: Date | null;
-    setToDate: (toDate: Date | null) => void;
-    status: TStatusFilter[];
-    setStatus: (status: TStatusFilter[]) => void;
+    chain?: string;
+    setChain: (chain?: string) => void;
+    fromDate?: Date;
+    setFromDate: (fromDate?: Date) => void;
+    toDate?: Date;
+    setToDate: (toDate?: Date) => void;
+    status?: TStatusFilter[];
+    setStatus: (status?: TStatusFilter[]) => void;
     chains: {
         name: string;
         logoURI: string;

package/dist/esm/types/components/layout/TransactionHeader/TransactionHeaderLayout.d.ts

@@ -2,9 +2,10 @@ import { ReactNode } from 'react';
 import { ActionStatus } from '../../../types/components';
 interface TransactionHeaderLayoutProps {
     status?: ActionStatus;
-    title: string;
+    title?: string;
     image?: ReactNode;
     children?: ReactNode;
+    isLoading?: boolean;
 }
-export declare function TransactionHeaderLayout({ status, title, image, children, }: TransactionHeaderLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function TransactionHeaderLayout({ status, title, image, children, isLoading, }: TransactionHeaderLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,6 +3,7 @@ interface TransactionSearchProps {
     query: string;
     setQuery: (query: string) => void;
     children?: ReactNode;
+    className?: string;
 }
-export declare function TransactionSearch({ query, setQuery, children, }: TransactionSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare function TransactionSearch({ query, setQuery, children, className, }: TransactionSearchProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/lists/TransactionAction/FeesAction.d.ts

@@ -21,8 +21,9 @@ interface FeesLinesProps {
 export declare function FeesLines({ status, lines, showTimeline, }: FeesLinesProps): import("react/jsx-runtime").JSX.Element;
 interface FeesRowProps {
     label: string;
-    usd: string;
-    eth: string;
+    amount: number | string;
+    symbol: string;
+    usd: number | string;
     collapsed?: boolean;
 }
 export {};

package/dist/esm/types/components/lists/TransactionAction/SuccessAction.d.ts

@@ -1,9 +1,9 @@
 import { BaseActionProps } from './BaseActionProps';
 interface SuccessActionProps extends BaseActionProps {
     description?: string;
-    timestamp: number;
-    hash: string;
-    url: string;
+    timestamp?: number;
+    hash?: string;
+    url?: string;
 }
 export declare function SuccessAction({ nextStatus, status, description, showTimeline, showBody, timestamp, hash, url, }: SuccessActionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/lists/TransactionAction/SwapAction.d.ts

@@ -12,9 +12,9 @@ interface SwapActionProps extends BaseActionProps {
         logoURI: string;
         name: string;
     };
-    timestamp: number;
-    hash: string;
-    url: string;
+    timestamp?: number;
+    hash?: string;
+    url?: string;
 }
 export declare function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }: SwapActionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 import { TextSize } from '../../types/components';
 interface HeadingTextProps {
-    children: string;
+    children?: ReactNode;
     size: TextSize;
     bold?: boolean;
     className?: string;

package/dist/esm/types/core/utils.d.ts

@@ -1,4 +1,5 @@
 import { ClassValue } from 'clsx';
+import { ComponentProps, ElementType } from 'react';
 /**
  * Combines multiple class names into a single string
  *
@@ -21,4 +22,6 @@ export declare function capitalize(text: string): string;
 type Falsy = false | null | undefined | 0 | '';
 export declare function truthy<T>(value: T): value is Exclude<T, Falsy>;
 export declare function truncateHash(hash: string): string;
+export declare const styled: <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, className: string) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ComponentProps<Tag>> & import("react").RefAttributes<ElementType<Tag>>>;
+export declare const mergeProps: <Tag extends keyof JSX.IntrinsicElements = any>(a: ComponentProps<Tag>, b: ComponentProps<Tag>) => ComponentProps<Tag>;
 export {};

package/dist/esm/types/stories/data/actions.d.ts

@@ -201,13 +201,15 @@ export declare const transactionActions: {
             status: "executed";
             total: {
                 label: string;
-                usd: string;
-                eth: string;
+                usd: number;
+                amount: number;
+                symbol: string;
             };
             lines: {
                 label: string;
-                usd: string;
-                eth: string;
+                usd: number;
+                amount: number;
+                symbol: string;
             }[];
         };
     };

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+declare const meta: Meta<typeof SwitchingAppContainer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+declare function SwitchingAppContainer(): import("react/jsx-runtime").JSX.Element;
+export declare const Default: Story;