@0xsquid/ui 0.23.2-beta.1 → 0.23.2-beta.2

package/dist/cjs/index.js

@@ -2813,7 +2813,7 @@ function Checkmark1Icon({ className, size = '16', }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.8809 2.82977C13.3432 3.13201 13.4729 3.75174 13.1706 4.21399L7.50398 12.8807C7.3318 13.144 7.04572 13.3109 6.73174 13.3313C6.41777 13.3517 6.11252 13.2231 5.90775 12.9842L2.90775 9.4842C2.54833 9.06487 2.59689 8.43357 3.01622 8.07415C3.43554 7.71473 4.06684 7.76329 4.42627 8.18262L6.55918 10.671L11.4967 3.11949C11.7989 2.65725 12.4187 2.52753 12.8809 2.82977Z", fill: "currentColor" }) }));
 }
 function Checkmark2Icon({ className, size = '16', style, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z", fill: "none", className: className, style: style }) }));
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z", fill: "none", className: className, style: style }) }));
 }
 
 function DotGrid1x3HorizontalIcon({ className, size = '16', }) {
@@ -2854,10 +2854,6 @@ const statusTextClassMap = {
     waiting: 'tw-text-grey-500',
     warning: 'tw-text-status-partial',
 };
-const statusColorClassMap = {
-    bg: statusBgClassMap$1,
-    text: statusTextClassMap,
-};
 const statusTextMap = {
     pending: 'Pending',
     success: 'Success',
@@ -2870,6 +2866,7 @@ const statusTextMap = {
 const variantClassMap = {
     full: 'tw-h-squid-l tw-min-w-squid-xxl tw-pl-squid-xxs tw-pr-squid-xs',
     compact: 'tw-h-squid-m tw-w-squid-m mobile-lg:tw-w-squid-xl mobile-lg:tw-px-squid-xxs',
+    small: 'tw-flex tw-h-squid-m tw-gap-squid-xxs tw-items-center tw-justify-center',
 };
 function renderIcon(status, variant) {
     switch (status) {
@@ -2878,7 +2875,7 @@ function renderIcon(status, variant) {
         case 'error':
             return jsxRuntime.jsx(NotAllowedIcon, {});
         case 'ongoing':
-            const size = { full: '20', compact: '16' }[variant];
+            const size = { full: '20', compact: '16', small: '16' }[variant];
             return jsxRuntime.jsx(Loader, { size: size, strokeWidth: "4" });
         case 'waiting':
             return jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {});
@@ -2888,7 +2885,9 @@ function renderIcon(status, variant) {
 }
 function TransactionState(_a) {
     var { status, variant = 'full', icon } = _a, props = __rest$1(_a, ["status", "variant", "icon"]);
-    return (jsxRuntime.jsxs("div", Object.assign({}, props, { className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-m tw-text-grey-900', variantClassMap[variant], statusBgClassMap$1[status], props.className), children: [icon !== null && icon !== void 0 ? icon : renderIcon(status, variant), variant === 'full' && (jsxRuntime.jsx(BodyText, { size: "small", children: statusTextMap[status] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({}, props, { className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-m', variantClassMap[variant], variant === 'small' ? statusTextClassMap[status] : 'tw-text-grey-900', 
+        // 'small' variant has transparent background
+        variant !== 'small' && statusBgClassMap$1[status], props.className), children: [icon !== null && icon !== void 0 ? icon : renderIcon(status, variant), variant === 'full' ? (jsxRuntime.jsx(BodyText, { size: "small", children: statusTextMap[status] })) : variant === 'small' ? (jsxRuntime.jsx(CaptionText, { children: statusTextMap[status] })) : null] })));
 }
 
 function UsdAmount({ usdAmount }) {
@@ -2962,7 +2961,7 @@ function ArrowUpIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "14", fill: "none", viewBox: "0 0 10 14", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M1 5.667l4-4 4 4M5 2.334v10" }) }));
 }
 function ArrowCornerDownRightIcon({ size = '24', className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4 4C4.55228 4 5 4.44772 5 5V13C5 13.5523 5.44772 14 6 14H17.5858L15.2929 11.7071C14.9024 11.3166 14.9024 10.6834 15.2929 10.2929C15.6834 9.90237 16.3166 9.90237 16.7071 10.2929L20.7071 14.2929C21.0976 14.6834 21.0976 15.3166 20.7071 15.7071L16.7071 19.7071C16.3166 20.0976 15.6834 20.0976 15.2929 19.7071C14.9024 19.3166 14.9024 18.6834 15.2929 18.2929L17.5858 16H6C4.34315 16 3 14.6569 3 13V5C3 4.44772 3.44772 4 4 4Z", fill: "currentColor" }) }));
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 4C4.55228 4 5 4.44772 5 5V13C5 13.5523 5.44772 14 6 14H17.5858L15.2929 11.7071C14.9024 11.3166 14.9024 10.6834 15.2929 10.2929C15.6834 9.90237 16.3166 9.90237 16.7071 10.2929L20.7071 14.2929C21.0976 14.6834 21.0976 15.3166 20.7071 15.7071L16.7071 19.7071C16.3166 20.0976 15.6834 20.0976 15.2929 19.7071C14.9024 19.3166 14.9024 18.6834 15.2929 18.2929L17.5858 16H6C4.34315 16 3 14.6569 3 13V5C3 4.44772 3.44772 4 4 4Z", fill: "currentColor" }) }));
 }
 
 function Copy(_a) {
@@ -3080,74 +3079,6 @@ const themeTypesKeys = Object.fromEntries(INTERNAL_SQUID_THEME_KEYS.map((key) =>
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}${key}`,
     },
 ]));
-// {
-//   'grey-100': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
-//   },
-//   'grey-200': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
-//   },
-//   'grey-300': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
-//   },
-//   'grey-400': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
-//   },
-//   'grey-500': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
-//   },
-//   'grey-600': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
-//   },
-//   'grey-700': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
-//   },
-//   'grey-800': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
-//   },
-//   'grey-900': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
-//   },
-//   'material-dark-average': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
-//   },
-//   'material-dark-thick': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
-//   },
-//   'material-dark-thin': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
-//   },
-//   'material-light-average': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
-//   },
-//   'material-light-thick': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
-//   },
-//   'material-light-thin': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
-//   },
-//   'royal-400': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
-//   },
-//   'royal-500': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
-//   },
-//   'status-negative': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
-//   },
-//   'status-positive': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
-//   },
-//   'status-partial': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
-//   },
-//   'grey-100-005': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
-//   },
-//   'material-light-blend-grey-900': {
-//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
-//   },
-// }
 
 function SearchIcon() {
     return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
@@ -16726,6 +16657,10 @@ const CSS_VARS = {
     SLIDE_TO_BOTTOM_DURATION: '--squid-animation-slide-to-bottom-duration',
     BLUR_IN_DURATION: '--squid-animation-blur-in-duration',
     BLUR_OUT_DURATION: '--squid-animation-blur-out-duration',
+    COLLAPSIBLE_MENU_OPEN_WIDTH: '--squid-collapsible-menu-open-width',
+    COLLAPSIBLE_MENU_OPEN_HEIGHT: '--squid-collapsible-menu-open-height',
+    COLLAPSIBLE_MENU_CLOSED_WIDTH: '--squid-collapsible-menu-closed-width',
+    COLLAPSIBLE_MENU_CLOSED_HEIGHT: '--squid-collapsible-menu-closed-height',
 };
 const ANIMATION_DURATIONS = {
     SHOW_ROUTE: 300,
@@ -16927,6 +16862,9 @@ function EmojiSadIcon({ className, size = '20', }) {
 function EmojiMeh({ className, size = '20', }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM7.25 9C7.94036 9 8.5 8.32843 8.5 7.5C8.5 6.67157 7.94036 6 7.25 6C6.55964 6 6 6.67157 6 7.5C6 8.32843 6.55964 9 7.25 9ZM14 7.5C14 8.32843 13.4404 9 12.75 9C12.0596 9 11.5 8.32843 11.5 7.5C11.5 6.67157 12.0596 6 12.75 6C13.4404 6 14 6.67157 14 7.5ZM7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14H13C13.5523 14 14 13.5523 14 13C14 12.4477 13.5523 12 13 12H7Z", fill: "currentColor" }) }));
 }
+function SmileIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { clipPath: "url(#clip0_2573_74090)", children: [jsxRuntime.jsx("path", { d: "M12 22.9875C18.0751 22.9875 23 18.0653 23 11.9935C23 5.92168 18.0751 0.999512 12 0.999512C5.92487 0.999512 1 5.92168 1 11.9935C1 18.0653 5.92487 22.9875 12 22.9875Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M7.31374 11.0095C6.94478 9.96836 7.48967 8.82526 8.53079 8.45629C9.57192 8.08732 10.715 8.63222 11.084 9.67334", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M13.9119 8.67122C13.5429 7.6301 14.0878 6.487 15.1289 6.11803C16.1701 5.74907 17.3132 6.29396 17.6821 7.33508", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M8.6499 14.7798C10.0385 16.7323 12.6907 17.5915 15.1705 16.7127C17.6503 15.8339 19.1696 13.4963 19.0181 11.1054", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_2573_74090", children: jsxRuntime.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+}
 
 function ErrorMessage({ message, showIcon = true }) {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [showIcon ? jsxRuntime.jsx(EmojiSadIcon, {}) : null, jsxRuntime.jsx(CaptionText, { children: message })] }));
@@ -17048,6 +16986,57 @@ function useMediaQuery(query, { defaultValue = false, initializeWithValue = true
     return matches;
 }
 
+function useCollapsibleMenu() {
+    const [isMenuOpen, setIsMenuOpen] = React$1.useState(false);
+    const menuRef = React$1.useRef(null);
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
+    React$1.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsMenuOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    return {
+        isMenuOpen,
+        toggleMenu,
+        menuRef,
+    };
+}
+
+const useTimer = ({ immediateStart = true, }) => {
+    const [timer, setTimer] = React$1.useState('0s');
+    const intervalRef = React$1.useRef(null);
+    const startTimer = () => {
+        if (intervalRef.current !== null)
+            return; // Prevent multiple intervals
+        const startTime = Date.now();
+        intervalRef.current = window.setInterval(() => {
+            const elapsedTime = Date.now() - startTime;
+            setTimer(formatDuration(elapsedTime));
+        }, 1000);
+    };
+    const stopTimer = () => {
+        if (intervalRef.current !== null) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+    };
+    React$1.useEffect(() => {
+        if (immediateStart) {
+            startTimer();
+        }
+        return () => {
+            stopTimer();
+        };
+    }, [immediateStart]);
+    return { timer, stopTimer, startTimer };
+};
+
 const dropdownPositionClassMap = {
     top: 'tw-right-[calc(100%-10px)] tw-bottom-7',
     bottom: 'tw-right-[calc(100%-10px)] tw-top-7',
@@ -17505,9 +17494,29 @@ function Transfer({ isLoading, from, to, className }) {
     return (jsxRuntime.jsx("div", { className: cn('tw-flex tw-items-center tw-gap-squid-xxs', className), children: jsxRuntime.jsxs(Join, { glue: () => jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-grey-500" }), children: [isLoading ? jsxRuntime.jsx(TextSkeleton, {}) : from, isLoading ? jsxRuntime.jsx(TextSkeleton, {}) : to] }) }));
 }
 
-function TransactionItem({ className, isLoading = false, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, }) {
-    return (jsxRuntime.jsxs("div", { className: cn('tw-flex tw-items-stretch tw-gap-squid-xs tw-bg-grey-900 tw-p-squid-xs', className), children: [jsxRuntime.jsxs("div", { className: "tw-timeline-gradient-mask tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs", children: [jsxRuntime.jsxs(Timeline, { className: "tw-flex-grow tw-text-grey-700", children: [jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.CapBottom, {})] }), jsxRuntime.jsx(TransactionState, { status: !status || isLoading ? 'pending' : status, variant: "compact" }), jsxRuntime.jsxs(Timeline, { className: "tw-flex-grow tw-text-grey-700", children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] })] }), jsxRuntime.jsx("div", { className: "tw-flex tw-w-[50px] tw-items-center tw-justify-center", children: image }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-grow tw-flex-col tw-gap-squid-xxs", children: [jsxRuntime.jsx(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: jsxRuntime.jsxs(Join, { glue: () => jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-600" }), children: [isLoading ? (jsxRuntime.jsx(TextSkeleton, {})) : type ? (jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-[2px] tw-text-royal-500", children: [type === null || type === void 0 ? void 0 : type.icon, " ", type === null || type === void 0 ? void 0 : type.name] })) : null, isLoading ? (jsxRuntime.jsx(TextSkeleton, {})) : hash ? (jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: truncateHash(hash) })) : null] }) }), (isLoading || fromChain || toChain) && (jsxRuntime.jsx(CaptionText, { className: "tw-block tw-h-squid-m", children: jsxRuntime.jsx(Transfer, { className: "tw-text-grey-400", isLoading: isLoading, from: fromChain && (jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: fromChain.name })), to: toChain && (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: toChain.name })) }) })), (isLoading || fromAmount || toAmount) && (jsxRuntime.jsx(Transfer, { className: "tw-text-grey-300", isLoading: isLoading, from: fromAmount ? (jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount })) : undefined, to: toAmount ? (jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })) : undefined }))] }), timestamp && (jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: formatRelativeTime(timestamp) }))] }));
+function TransactionItem({ className, isLoading = false, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant = 'full', }) {
+    return (jsxRuntime.jsxs("div", { className: cn('tw-flex tw-items-stretch tw-gap-squid-xs tw-bg-grey-900 tw-p-squid-xs', className), children: [variant === 'full' && (jsxRuntime.jsxs("div", { className: "tw-timeline-gradient-mask tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs", children: [jsxRuntime.jsxs(Timeline, { className: "tw-flex-grow tw-text-grey-700", children: [jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.CapBottom, {})] }), jsxRuntime.jsx(TransactionState, { status: !status || isLoading ? 'pending' : status, variant: "compact" }), jsxRuntime.jsxs(Timeline, { className: "tw-flex-grow tw-text-grey-700", children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] })] })), jsxRuntime.jsx("div", { className: "tw-flex tw-w-[50px] tw-items-center tw-justify-center", children: image }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-grow tw-flex-col tw-gap-squid-xxs", children: [jsxRuntime.jsx(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: jsxRuntime.jsx(TransactionItemHeader, { hash: hash, status: status, type: type, isLoading: isLoading, variant: variant }) }), (isLoading || fromChain || toChain) && (jsxRuntime.jsx(CaptionText, { className: "tw-block tw-h-squid-m", children: jsxRuntime.jsx(Transfer, { className: "tw-text-grey-400", isLoading: isLoading, from: fromChain && (jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: fromChain.name })), to: toChain && (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: toChain.name })) }) })), (isLoading || fromAmount || toAmount) && (jsxRuntime.jsx(Transfer, { className: "tw-text-grey-300", isLoading: isLoading, from: fromAmount ? (jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount })) : undefined, to: toAmount ? (jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })) : undefined }))] }), timestamp && variant === 'full' && (jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: formatRelativeTime(timestamp) }))] }));
 }
+const TransactionItemHeaderWrapper = ({ children, }) => {
+    return (jsxRuntime.jsx(Join, { glue: () => jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-600" }), children: children }));
+};
+const TransactionItemHeader = ({ isLoading, variant, type, hash, status, }) => {
+    if (isLoading) {
+        return (jsxRuntime.jsxs(TransactionItemHeaderWrapper, { children: [jsxRuntime.jsx(TextSkeleton, {}), jsxRuntime.jsx(TextSkeleton, {})] }));
+    }
+    if (variant === 'full') {
+        if (!type || !hash)
+            return null;
+        return (jsxRuntime.jsxs(TransactionItemHeaderWrapper, { children: [jsxRuntime.jsx(TxTypeLabel, { type: type }), jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: truncateHash(hash) })] }));
+    }
+    if (status && type) {
+        return (jsxRuntime.jsxs(TransactionItemHeaderWrapper, { children: [jsxRuntime.jsx(TransactionState, { status: status, variant: "small" }), jsxRuntime.jsx(TxTypeLabel, { type: type })] }));
+    }
+    return null;
+};
+const TxTypeLabel = ({ type }) => {
+    return (jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-[2px] tw-text-royal-500", children: [type === null || type === void 0 ? void 0 : type.icon, " ", type === null || type === void 0 ? void 0 : type.name] }));
+};
 
 const borderRadiusClassMap = {
     sm: 'tw-rounded-squid-s',
@@ -17588,6 +17597,20 @@ function NavigationBar(_a) {
                     : 'tw-flex'), children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
+function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
+    return (jsxRuntime.jsx("aside", { style: Object.assign({ transitionDuration, transitionTimingFunction: isOpen
+                ? 'cubic-bezier(0.4, 1.3, 0.4, 1)'
+                : undefined, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH]: size.open.width, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT]: size.open.height, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH]: size.closed.width, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT]: size.closed.height }, (isOpen
+            ? {
+                width: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH})`,
+                height: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT})`,
+            }
+            : {
+                width: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH})`,
+                height: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT})`,
+            })), className: cn('tw-fixed tw-z-40 tw-flex tw-flex-col tw-overflow-hidden tw-bg-grey-900 tw-text-grey-200 tw-shadow-elevation-light-3 tw-outline-material-light-thin', className), ref: menuRef, children: children }));
+}
+
 const lightTheme = {
     // content
     'content-100': '#17191C',
@@ -18520,8 +18543,8 @@ function BorderedContainer({ children, className, }) {
     return (jsxRuntime.jsx("section", { className: cn('tw-border-t tw-border-t-material-light-thin', className), children: children }));
 }
 
-function SquidLogo() {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_133_44979)", children: jsxRuntime.jsx("path", { d: "M39.7776 17.0119L39.7737 16.9863L39.6631 16.9902C39.6631 16.9902 39.6608 17.0237 39.6601 17.027L39.6233 17.0286C39.5751 17.6494 39.4736 18.2391 39.3215 18.7807C38.9488 20.1143 38.3241 21.4615 37.5632 22.5742C36.7215 23.8061 35.7416 24.719 34.7288 25.2142C34.0969 25.5239 33.4703 25.7509 32.8673 25.8894C32.3993 25.9949 31.9376 26.0477 31.4969 26.0477C29.9688 26.0477 28.5688 25.4047 27.4473 24.1886C25.7136 22.3078 24.7097 19.075 24.9488 16.143C25.0319 15.1173 25.196 14.163 25.3544 13.2405C25.6913 11.2822 25.9816 9.59092 25.4384 7.82282C25.1471 6.87567 24.532 6.14133 23.7048 5.7539C23.1416 5.48987 22.5537 5.35623 21.956 5.35623C20.0352 5.35623 18.4503 6.70896 17.6775 7.86752C16.4976 9.63632 15.9094 11.8636 16.0657 13.9772C16.2112 15.9555 16.8969 17.2596 17.9257 19.0251C18.4417 19.9099 18.9793 20.6915 19.4545 21.3818C20.2577 22.5499 20.9513 23.5588 21.2936 24.6652C21.7681 26.1988 21.4384 26.9364 21.2743 27.1828C21.0719 27.4868 20.7471 27.6619 20.3078 27.7036C20.2517 27.7092 20.1965 27.7115 20.143 27.7115C18.8021 27.7115 18.7765 25.881 18.7614 24.7867V24.7621C18.7607 24.6899 18.759 24.6212 18.7581 24.5555C18.7125 22.4123 17.8892 21.1315 16.8461 19.5092C16.1916 18.4915 15.4501 17.3388 14.7988 15.7683C13.7572 13.2596 13.4957 10.8396 14.0221 8.57625C14.0405 8.49546 14.0605 8.41467 14.0813 8.33294C14.7204 5.81374 16.3004 2.58743 20.1949 1.5241C20.9325 1.32247 21.6901 1.22002 22.4461 1.22002C24.7357 1.22002 26.7302 2.16251 27.9173 3.80489C28.8782 5.13364 29.3735 6.64005 29.4326 8.40978C29.447 8.8305 29.4359 9.27148 29.3998 9.72014C29.3157 10.7322 29.1013 11.8417 28.7453 13.1113C28.0254 15.6778 27.851 17.8522 28.2277 19.573C28.5166 20.8929 29.1478 21.8987 29.959 22.3313C30.6165 22.6817 31.3173 22.8594 32.0414 22.8594C33.891 22.8594 35.5758 21.6794 36.4254 20.5106C37.7613 18.6722 38.4654 15.4305 38.3502 13.481C38.3078 12.7658 38.247 12.1602 38.163 11.6242L38.1607 11.6163L38.159 11.6123C36.5781 8.19395 34.071 5.29639 30.9085 3.23306C27.6647 1.11921 23.892 0 20 0C14.6575 0 9.63516 2.08009 5.85751 5.85751C2.08079 9.63516 0 14.6575 0 20C0 21.5527 0.179278 23.1015 0.533644 24.6049L0.53993 24.6312L0.651222 24.6151C0.651222 24.6151 0.649593 24.5823 0.648894 24.58L0.685681 24.5744C0.616997 23.3839 0.724796 22.2377 0.99837 21.2591C1.37113 19.9264 1.99604 18.5783 2.75669 17.4657C3.59837 16.2345 4.57835 15.3208 5.59115 14.8256C6.21839 14.5183 6.84144 14.292 7.44237 14.1527C7.91432 14.0456 8.37998 13.9919 8.82468 13.9919C10.3527 13.9919 11.7534 14.6342 12.8743 15.8503C14.6079 17.7304 15.6119 20.9639 15.3728 23.8966C15.2896 24.9229 15.1255 25.8766 14.9662 26.7991C14.6293 28.7574 14.339 30.4487 14.8822 32.2165C15.1725 33.1637 15.7886 33.8983 16.6158 34.2854C17.179 34.5495 17.7669 34.6829 18.3646 34.6829C20.2854 34.6829 21.8703 33.3302 22.6431 32.1709C23.8231 30.4021 24.4109 28.1749 24.2549 26.0615C24.1094 24.0838 23.4237 22.779 22.3949 21.0133C21.8806 20.1308 21.342 19.3476 20.8668 18.6566C20.0636 17.4885 19.37 16.4799 19.0277 15.3725C18.5532 13.8389 18.8829 13.1013 19.0461 12.8556C19.2484 12.5516 19.5732 12.3765 20.0126 12.3348C20.0687 12.3292 20.1246 12.3269 20.1774 12.3269C21.5183 12.3269 21.5439 14.1558 21.559 15.2477L21.5597 15.2789C21.5604 15.3502 21.562 15.4172 21.563 15.4822C21.6086 17.6254 22.4319 18.9062 23.475 20.5285C24.1295 21.5462 24.871 22.6997 25.5222 24.2694C26.5311 26.6983 26.8077 29.0461 26.3462 31.2477C26.3334 31.3085 26.3197 31.3693 26.3062 31.4303C25.695 34.0589 24.1262 37.4221 20.1255 38.515C19.3879 38.7166 18.6303 38.8182 17.8743 38.8189C15.5846 38.8189 13.5902 37.8766 12.403 36.2342C11.4421 34.9055 10.9471 33.3991 10.8878 31.6293C10.8789 31.3725 10.8799 31.1069 10.8894 30.8414C10.9357 29.6894 11.1607 28.4093 11.5758 26.9278C12.2957 24.3614 12.4703 22.187 12.0934 20.4661C11.8047 19.1453 11.1735 18.1404 10.3623 17.7078C9.70477 17.3574 9.00466 17.1797 8.27986 17.1797C6.43097 17.1797 4.74552 18.3597 3.89593 19.5285C2.55995 21.3669 1.85588 24.6086 1.97113 26.5581C2.04237 27.7693 2.16554 28.6598 2.37183 29.4494L2.37416 29.4559L2.37579 29.4589C5.87008 35.9597 12.6247 39.9998 19.9998 39.9998C25.3423 39.9998 30.3646 37.9197 34.1423 34.1423C37.9197 30.3646 39.9998 25.3423 39.9998 19.9998C39.9998 19.0014 39.9253 17.9958 39.7774 17.0116L39.7776 17.0119Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_133_44979", children: jsxRuntime.jsx("rect", { width: "40", height: "40", fill: "white" }) }) })] }));
+function SquidLogo({ size = '40', className, }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 40 40", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_133_44979)", children: jsxRuntime.jsx("path", { d: "M39.7776 17.0119L39.7737 16.9863L39.6631 16.9902C39.6631 16.9902 39.6608 17.0237 39.6601 17.027L39.6233 17.0286C39.5751 17.6494 39.4736 18.2391 39.3215 18.7807C38.9488 20.1143 38.3241 21.4615 37.5632 22.5742C36.7215 23.8061 35.7416 24.719 34.7288 25.2142C34.0969 25.5239 33.4703 25.7509 32.8673 25.8894C32.3993 25.9949 31.9376 26.0477 31.4969 26.0477C29.9688 26.0477 28.5688 25.4047 27.4473 24.1886C25.7136 22.3078 24.7097 19.075 24.9488 16.143C25.0319 15.1173 25.196 14.163 25.3544 13.2405C25.6913 11.2822 25.9816 9.59092 25.4384 7.82282C25.1471 6.87567 24.532 6.14133 23.7048 5.7539C23.1416 5.48987 22.5537 5.35623 21.956 5.35623C20.0352 5.35623 18.4503 6.70896 17.6775 7.86752C16.4976 9.63632 15.9094 11.8636 16.0657 13.9772C16.2112 15.9555 16.8969 17.2596 17.9257 19.0251C18.4417 19.9099 18.9793 20.6915 19.4545 21.3818C20.2577 22.5499 20.9513 23.5588 21.2936 24.6652C21.7681 26.1988 21.4384 26.9364 21.2743 27.1828C21.0719 27.4868 20.7471 27.6619 20.3078 27.7036C20.2517 27.7092 20.1965 27.7115 20.143 27.7115C18.8021 27.7115 18.7765 25.881 18.7614 24.7867V24.7621C18.7607 24.6899 18.759 24.6212 18.7581 24.5555C18.7125 22.4123 17.8892 21.1315 16.8461 19.5092C16.1916 18.4915 15.4501 17.3388 14.7988 15.7683C13.7572 13.2596 13.4957 10.8396 14.0221 8.57625C14.0405 8.49546 14.0605 8.41467 14.0813 8.33294C14.7204 5.81374 16.3004 2.58743 20.1949 1.5241C20.9325 1.32247 21.6901 1.22002 22.4461 1.22002C24.7357 1.22002 26.7302 2.16251 27.9173 3.80489C28.8782 5.13364 29.3735 6.64005 29.4326 8.40978C29.447 8.8305 29.4359 9.27148 29.3998 9.72014C29.3157 10.7322 29.1013 11.8417 28.7453 13.1113C28.0254 15.6778 27.851 17.8522 28.2277 19.573C28.5166 20.8929 29.1478 21.8987 29.959 22.3313C30.6165 22.6817 31.3173 22.8594 32.0414 22.8594C33.891 22.8594 35.5758 21.6794 36.4254 20.5106C37.7613 18.6722 38.4654 15.4305 38.3502 13.481C38.3078 12.7658 38.247 12.1602 38.163 11.6242L38.1607 11.6163L38.159 11.6123C36.5781 8.19395 34.071 5.29639 30.9085 3.23306C27.6647 1.11921 23.892 0 20 0C14.6575 0 9.63516 2.08009 5.85751 5.85751C2.08079 9.63516 0 14.6575 0 20C0 21.5527 0.179278 23.1015 0.533644 24.6049L0.53993 24.6312L0.651222 24.6151C0.651222 24.6151 0.649593 24.5823 0.648894 24.58L0.685681 24.5744C0.616997 23.3839 0.724796 22.2377 0.99837 21.2591C1.37113 19.9264 1.99604 18.5783 2.75669 17.4657C3.59837 16.2345 4.57835 15.3208 5.59115 14.8256C6.21839 14.5183 6.84144 14.292 7.44237 14.1527C7.91432 14.0456 8.37998 13.9919 8.82468 13.9919C10.3527 13.9919 11.7534 14.6342 12.8743 15.8503C14.6079 17.7304 15.6119 20.9639 15.3728 23.8966C15.2896 24.9229 15.1255 25.8766 14.9662 26.7991C14.6293 28.7574 14.339 30.4487 14.8822 32.2165C15.1725 33.1637 15.7886 33.8983 16.6158 34.2854C17.179 34.5495 17.7669 34.6829 18.3646 34.6829C20.2854 34.6829 21.8703 33.3302 22.6431 32.1709C23.8231 30.4021 24.4109 28.1749 24.2549 26.0615C24.1094 24.0838 23.4237 22.779 22.3949 21.0133C21.8806 20.1308 21.342 19.3476 20.8668 18.6566C20.0636 17.4885 19.37 16.4799 19.0277 15.3725C18.5532 13.8389 18.8829 13.1013 19.0461 12.8556C19.2484 12.5516 19.5732 12.3765 20.0126 12.3348C20.0687 12.3292 20.1246 12.3269 20.1774 12.3269C21.5183 12.3269 21.5439 14.1558 21.559 15.2477L21.5597 15.2789C21.5604 15.3502 21.562 15.4172 21.563 15.4822C21.6086 17.6254 22.4319 18.9062 23.475 20.5285C24.1295 21.5462 24.871 22.6997 25.5222 24.2694C26.5311 26.6983 26.8077 29.0461 26.3462 31.2477C26.3334 31.3085 26.3197 31.3693 26.3062 31.4303C25.695 34.0589 24.1262 37.4221 20.1255 38.515C19.3879 38.7166 18.6303 38.8182 17.8743 38.8189C15.5846 38.8189 13.5902 37.8766 12.403 36.2342C11.4421 34.9055 10.9471 33.3991 10.8878 31.6293C10.8789 31.3725 10.8799 31.1069 10.8894 30.8414C10.9357 29.6894 11.1607 28.4093 11.5758 26.9278C12.2957 24.3614 12.4703 22.187 12.0934 20.4661C11.8047 19.1453 11.1735 18.1404 10.3623 17.7078C9.70477 17.3574 9.00466 17.1797 8.27986 17.1797C6.43097 17.1797 4.74552 18.3597 3.89593 19.5285C2.55995 21.3669 1.85588 24.6086 1.97113 26.5581C2.04237 27.7693 2.16554 28.6598 2.37183 29.4494L2.37416 29.4559L2.37579 29.4589C5.87008 35.9597 12.6247 39.9998 19.9998 39.9998C25.3423 39.9998 30.3646 37.9197 34.1423 34.1423C37.9197 30.3646 39.9998 25.3423 39.9998 19.9998C39.9998 19.0014 39.9253 17.9958 39.7774 17.0116L39.7776 17.0119Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_133_44979", children: jsxRuntime.jsx("rect", { width: "40", height: "40", fill: "white" }) }) })] }));
 }
 
 function ProfileHeaderBackground() {
@@ -18650,26 +18673,26 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
 });
 
 const WIDTH_SM = '69';
-const HEIGHT_SM = '30';
+const HEIGHT_SM = '31';
 const WIDTH_MD = '94';
 const HEIGHT_MD = '42';
 const SCALE = Number(WIDTH_SM) / Number(WIDTH_MD);
-const widthMap = {
+const borderSvgWidthMap = {
     horizontal: { small: WIDTH_SM, medium: WIDTH_MD },
     vertical: { small: HEIGHT_SM, medium: HEIGHT_MD },
 };
-const heightMap = {
+const borderSvgHeightMap = {
     horizontal: { small: HEIGHT_SM, medium: HEIGHT_MD },
     vertical: { small: WIDTH_SM, medium: WIDTH_MD },
 };
 const SHAPE_PATH = 'M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z';
 const containerVariantClassMap = {
     horizontal: {
-        small: 'tw-h-[30px] tw-w-[69px]',
+        small: 'tw-h-[31px] tw-w-[69px]',
         medium: 'tw-h-[42px] tw-w-[94px]',
     },
     vertical: {
-        small: 'tw-h-[69px] tw-w-[30px]',
+        small: 'tw-h-[69px] tw-w-[31px]',
         medium: 'tw-h-[94px] tw-w-[42px]',
     },
 };
@@ -18685,12 +18708,12 @@ function TokenPair({ firstToken, secondToken, variant = 'horizontal', size = 'me
     var _a, _b;
     const id = React$1.useId();
     const maskId = `token_pair_mask_${id}`;
-    const width = widthMap[variant][size];
-    const height = heightMap[variant][size];
+    const width = borderSvgWidthMap[variant][size];
+    const height = borderSvgHeightMap[variant][size];
     const shapeTransform = [
         size === 'small' ? `scale(${SCALE})` : undefined,
         variant === 'vertical'
-            ? `rotate(90) translate(0 -${heightMap.horizontal.medium})`
+            ? `rotate(90) translate(0 -${borderSvgHeightMap.horizontal.medium})`
             : undefined,
     ]
         .filter(Boolean)
@@ -24598,6 +24621,9 @@ function BridgeProperties({ amount, token, fromChain, toChain, wallet, boosted,
 function BagIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none", viewBox: "0 0 18 18", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2", d: "M12 5a3 3 0 01-6 0M1.883 2.875l-.75 12A2 2 0 003.129 17h11.742a2 2 0 001.996-2.125l-.75-12A2 2 0 0014.121 1H3.88a2 2 0 00-1.996 1.875z" }) }));
 }
+function BackpackIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M15 11H17C18.6569 11 20 9.65685 20 8V7C20 5.89543 19.1046 5 18 5H15M15 11H9M15 11V13M9 11H7C5.34315 11 4 9.65685 4 8V7C4 5.89543 4.89543 5 6 5H9M9 11V13M5 11V18C5 19.6569 6.34315 21 8 21H16C17.6569 21 19 19.6569 19 18V11M9 5H15M9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5M10 17H14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 
 function CollectionIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "square", strokeLinejoin: "round", strokeWidth: "2", d: "M7.9 12l-4.307 2.101a1 1 0 000 1.798l7.969 3.887a1 1 0 00.877 0l7.969-3.887a1 1 0 000-1.798L16.1 12m-8.2 0L3.593 9.899a1 1 0 010-1.798l7.969-3.887a1 1 0 01.877 0L20.408 8.1a1 1 0 010 1.798L16.1 12m-8.2 0l3.662 1.786a1 1 0 00.877 0L16.1 12" }) }));
@@ -26195,10 +26221,10 @@ function CircleX({ size = '20', className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M12.5003 7.49996L7.50033 12.5M12.5003 12.5L7.50033 7.49996M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
 }
 function CircleMinusIcon({ size = '24', className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16 12.9999C16.5523 12.9999 17 12.5522 17 11.9999C17 11.4476 16.5523 10.9999 16 10.9999L7.99997 11.0001C7.44769 11.0001 6.99998 11.4479 7 12.0001C7.00002 12.5524 7.44774 13.0001 8.00003 13.0001L16 12.9999Z", fill: "currentColor" }) }));
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16 12.9999C16.5523 12.9999 17 12.5522 17 11.9999C17 11.4476 16.5523 10.9999 16 10.9999L7.99997 11.0001C7.44769 11.0001 6.99998 11.4479 7 12.0001C7.00002 12.5524 7.44774 13.0001 8.00003 13.0001L16 12.9999Z", fill: "currentColor" }) }));
 }
 function CirclePlusIcon({ size = '24', className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16 12.9999C16.5523 12.9999 17 12.5522 17 11.9999C17 11.4476 16.5523 10.9999 16 10.9999L13 11V8.00012C13 7.44784 12.5523 7.00012 12 7.00012C11.4477 7.00012 11 7.44784 11 8.00012V11L7.99997 11.0001C7.44769 11.0001 6.99998 11.4479 7 12.0001C7.00002 12.5524 7.44774 13.0001 8.00003 13.0001L11 13V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V13L16 12.9999Z", fill: "currentColor" }) }));
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16 12.9999C16.5523 12.9999 17 12.5522 17 11.9999C17 11.4476 16.5523 10.9999 16 10.9999L13 11V8.00012C13 7.44784 12.5523 7.00012 12 7.00012C11.4477 7.00012 11 7.44784 11 8.00012V11L7.99997 11.0001C7.44769 11.0001 6.99998 11.4479 7 12.0001C7.00002 12.5524 7.44774 13.0001 8.00003 13.0001L11 13V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V13L16 12.9999Z", fill: "currentColor" }) }));
 }
 
 function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarning = false, }) {
@@ -26404,6 +26430,18 @@ function HeartSmallIcon() {
 function HomeIcon({ className }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "19", fill: "none", viewBox: "0 0 18 19", className: className, children: jsxRuntime.jsx("path", { fill: "currentColor", fillOpacity: "0.66", d: "M11.335 1.697a4 4 0 00-4.67 0l-5 3.593A4 4 0 000 8.538V15a4 4 0 004 4h1.5a1 1 0 001-1v-3.5a2.5 2.5 0 015 0V18a1 1 0 001 1H14a4 4 0 004-4V8.538a4 4 0 00-1.666-3.248l-5-3.593z" }) }));
 }
+function MenuSwapIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { clipPath: "url(#clip0_2573_73593)", children: [jsxRuntime.jsx("path", { d: "M16 9H20C21.6569 9 23 10.3431 23 12V20C23 21.6569 21.6569 23 20 23H12C10.3431 23 9 21.6569 9 20V16", stroke: "currentColor", strokeWidth: "2" }), jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "7.5", stroke: "currentColor", strokeWidth: "2" }), jsxRuntime.jsx("path", { d: "M6 11V6H11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M19 14L19 19L14 19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("line", { x1: "6.70711", y1: "6.29289", x2: "18.7071", y2: "18.2929", stroke: "currentColor", strokeWidth: "2" })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_2573_73593", children: jsxRuntime.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+}
+function ColorPaletteIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M7.4 11.25H6.4V13.25H7.4V11.25ZM7.6 13.25H8.6V11.25H7.6V13.25ZM15.4 8.5H14.4V10.5H15.4V8.5ZM15.6 10.5H16.6V8.5H15.6V10.5ZM10.4 7H9.4V9H10.4V7ZM10.6 9H11.6V7H10.6V9ZM7 12.25C7 11.9739 7.22386 11.75 7.5 11.75V13.75C8.32843 13.75 9 13.0784 9 12.25H7ZM7.5 11.75C7.77614 11.75 8 11.9739 8 12.25H6C6 13.0784 6.67157 13.75 7.5 13.75V11.75ZM8 12.25C8 12.5261 7.77614 12.75 7.5 12.75V10.75C6.67157 10.75 6 11.4216 6 12.25H8ZM7.5 12.75C7.22386 12.75 7 12.5261 7 12.25H9C9 11.4216 8.32843 10.75 7.5 10.75V12.75ZM15 9.5C15 9.22386 15.2239 9 15.5 9V11C16.3284 11 17 10.3284 17 9.5H15ZM15.5 9C15.7761 9 16 9.22386 16 9.5H14C14 10.3284 14.6716 11 15.5 11V9ZM16 9.5C16 9.77614 15.7761 10 15.5 10V8C14.6716 8 14 8.67157 14 9.5H16ZM15.5 10C15.2239 10 15 9.77614 15 9.5H17C17 8.67157 16.3284 8 15.5 8V10ZM12 19.5C7.5271 19.5 4 16.0891 4 12H2C2 17.2998 6.53177 21.5 12 21.5V19.5ZM4 12C4 7.91095 7.5271 4.5 12 4.5V2.5C6.53177 2.5 2 6.70021 2 12H4ZM12 4.5C16.4729 4.5 20 7.91095 20 12H22C22 6.70021 17.4682 2.5 12 2.5V4.5ZM20 12C20 13.5786 19.581 14.0563 19.2921 14.2361C18.9042 14.4775 18.2607 14.5224 17.2336 14.3889C16.7375 14.3243 16.2569 14.236 15.7115 14.1503C15.1923 14.0687 14.6354 13.9936 14.1011 13.9858C13.0367 13.9703 11.7662 14.2315 11.1056 15.5528L12.8944 16.4472C13.04 16.156 13.2977 15.9743 14.0719 15.9856C14.457 15.9912 14.8971 16.0469 15.401 16.126C15.8788 16.2011 16.4476 16.3035 16.9757 16.3722C17.9971 16.505 19.3012 16.5862 20.3489 15.934C21.4956 15.2203 22 13.8745 22 12H20ZM11.1056 15.5528C10.6885 16.3868 10.8107 17.2221 11.0282 17.8666C11.2381 18.4885 11.5952 19.0909 11.8078 19.4797C11.9271 19.6979 12.0018 19.847 12.0433 19.9569C12.0928 20.0878 12.0416 20.0281 12.0725 19.8775C12.1227 19.6322 12.3012 19.5021 12.3753 19.4702C12.3936 19.4623 12.3055 19.5 12 19.5V21.5C12.4013 21.5 12.8121 21.4596 13.1661 21.3072C13.576 21.1307 13.9272 20.7897 14.0318 20.2788C14.117 19.8626 14.0021 19.4825 13.9142 19.2501C13.8185 18.9968 13.6825 18.7396 13.5626 18.5203C13.2968 18.0341 13.0613 17.6365 12.9232 17.2271C12.7927 16.8404 12.8115 16.6132 12.8944 16.4472L11.1056 15.5528ZM7.4 13.25H7.6V11.25H7.4V13.25ZM15.4 10.5H15.6V8.5H15.4V10.5ZM10 8C10 7.72386 10.2239 7.5 10.5 7.5V9.5C11.3284 9.5 12 8.82843 12 8H10ZM10.5 7.5C10.7761 7.5 11 7.72386 11 8H9C9 8.82843 9.67157 9.5 10.5 9.5V7.5ZM11 8C11 8.27614 10.7761 8.5 10.5 8.5V6.5C9.67157 6.5 9 7.17157 9 8H11ZM10.5 8.5C10.2239 8.5 10 8.27614 10 8H12C12 7.17157 11.3284 6.5 10.5 6.5V8.5ZM10.4 9H10.6V7H10.4V9Z", fill: "currentColor" }) }));
+}
+function ConsoleIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M7.5 8L9.25 9.75L7.5 11.5M12 11.5H14M7 20H17C18.6569 20 20 18.6569 20 17V7C20 5.34315 18.6569 4 17 4H7C5.34315 4 4 5.34315 4 7V17C4 18.6569 5.34315 20 7 20Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function BubblesIcon({ size = '30', className, }) {
+    return (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [jsxRuntime.jsx("path", { d: "M16 11C16 13.7614 13.7614 16 11 16C8.23858 16 6 13.7614 6 11C6 8.23858 8.23858 6 11 6C13.7614 6 16 8.23858 16 11Z", stroke: "currentColor", strokeWidth: "2" }), jsxRuntime.jsx("path", { d: "M21 20.5C21 22.433 19.433 24 17.5 24C15.567 24 14 22.433 14 20.5C14 18.567 15.567 17 17.5 17C19.433 17 21 18.567 21 20.5Z", stroke: "currentColor", strokeWidth: "2" }), jsxRuntime.jsx("path", { d: "M24 12.5C24 13.8807 22.8807 15 21.5 15C20.1193 15 19 13.8807 19 12.5C19 11.1193 20.1193 10 21.5 10C22.8807 10 24 11.1193 24 12.5Z", stroke: "currentColor", strokeWidth: "2" })] }));
+}
 
 function ImageSparkle() {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", viewBox: "0 0 16 16", children: [jsxRuntime.jsxs("mask", { id: "path-1-inside-1_1967_138", fill: "#fff", children: [jsxRuntime.jsx("path", { d: "M9.05 5.567l.319-.637a.333.333 0 01.596 0l.319.637a.334.334 0 00.149.15l.637.318a.333.333 0 010 .596l-.637.32a.334.334 0 00-.15.148l-.318.638a.333.333 0 01-.596 0l-.32-.638a.333.333 0 00-.148-.149l-.638-.319a.333.333 0 010-.596l.638-.319a.333.333 0 00.149-.149z" }), jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M2 4.667A2.667 2.667 0 014.667 2h6.666A2.667 2.667 0 0114 4.667v6.666A2.667 2.667 0 0111.333 14H4.667A2.667 2.667 0 012 11.333V4.667zm2.667-1.334c-.737 0-1.334.597-1.334 1.334v4.39l.115-.114a2.667 2.667 0 013.771 0l3.724 3.724h.39c.737 0 1.334-.597 1.334-1.334V4.667c0-.737-.597-1.334-1.334-1.334H4.667zm4.39 9.334l-2.78-2.781a1.333 1.333 0 00-1.886 0l-1.058 1.057v.39c0 .737.597 1.334 1.334 1.334h4.39z", clipRule: "evenodd" })] }), jsxRuntime.jsx("path", { fill: "currentColor", d: "M9.369 4.93l-1.342-.671 1.342.67zm-.32.637l-1.34-.67 1.34.67zm-.148.15L8.23 4.374l.67 1.341zm-.638.318l.67 1.342-.67-1.342zm0 .596l-.67 1.342.67-1.342zm.638.32L8.23 8.291 8.9 6.95zm.149.148l-1.342.671L9.05 7.1zm.319.638l1.341-.67-1.341.67zm.596 0l1.341.67-1.341-.67zm.319-.638l-1.342-.67 1.342.67zm0-1.532l1.341-.67-1.341.67zm-.32-.637l-1.34.67 1.34-.67zm-6.63 4.127h-1.5a1.5 1.5 0 002.56 1.06l-1.06-1.06zm.114-.114l1.06 1.06-1.06-1.06zm7.495 3.724l-1.06 1.06a1.5 1.5 0 001.06.44v-1.5zM6.276 9.886l1.06-1.061-1.06 1.06zm2.781 2.78v1.5a1.5 1.5 0 001.06-2.56l-1.06 1.06zm-4.666-2.78L3.33 8.825l1.06 1.06zm-1.058 1.057l-1.06-1.06a1.5 1.5 0 00-.44 1.06h1.5zm4.694-6.684l-.319.637 2.683 1.342.32-.638L8.026 4.26zm.203.116l-.638.319 1.342 2.683.637-.319L8.23 4.375zm-.638 3.598l.638.319L9.57 5.609l-.637-.32-1.342 2.684zm.116-.203l.319.638 2.683-1.342-.319-.637L7.708 7.77zm3.598.638l.32-.638L8.941 6.43l-.319.637 2.684 1.342zm-.202-.116l.637-.319L10.4 5.29l-.638.319 1.341 2.683zm.637-3.598l-.637-.32-1.342 2.684.638.319 1.341-2.683zm-.116.202l-.319-.637L8.623 5.6l.319.638 2.683-1.342zm-.521-.521c.225.113.408.296.521.521L8.942 6.238c.177.355.465.643.82.82l1.341-2.683zm.637 3.598c1.351-.676 1.351-2.604 0-3.28L10.4 7.378a1.167 1.167 0 010-2.087l1.341 2.683zm-.116-.203a1.167 1.167 0 01-.521.522L9.761 5.609a1.833 1.833 0 00-.82.82l2.683 1.341zm-3.598.638c.676 1.351 2.604 1.351 3.28 0L8.622 7.066c.43-.86 1.657-.86 2.087 0L8.027 8.408zm.203-.116a1.167 1.167 0 01-.522-.522l2.683-1.341a1.833 1.833 0 00-.82-.82L8.23 8.292zm-.638-3.598c-1.351.675-1.351 2.603 0 3.28L8.934 5.29c.86.43.86 1.657 0 2.087L7.592 4.694zm.116.202c.113-.225.296-.408.522-.521L9.57 7.058c.355-.177.643-.465.82-.82L7.708 4.896zm3.002.704c-.43.86-1.657.86-2.087 0l2.683-1.341c-.675-1.351-2.603-1.351-3.28 0L10.71 5.6zM4.667.5A4.167 4.167 0 00.5 4.667h3c0-.645.522-1.167 1.167-1.167v-3zm6.666 0H4.667v3h6.666v-3zM15.5 4.667A4.167 4.167 0 0011.333.5v3c.645 0 1.167.522 1.167 1.167h3zm0 6.666V4.667h-3v6.666h3zM11.333 15.5a4.167 4.167 0 004.167-4.167h-3c0 .645-.522 1.167-1.167 1.167v3zm-6.666 0h6.666v-3H4.667v3zM.5 11.333A4.167 4.167 0 004.667 15.5v-3A1.167 1.167 0 013.5 11.333h-3zm0-6.666v6.666h3V4.667h-3zm4.333 0a.167.167 0 01-.166.166v-3a2.833 2.833 0 00-2.834 2.834h3zm0 4.39v-4.39h-3v4.39h3zM2.387 7.882l-.114.115 2.121 2.12.114-.114-2.12-2.12zm5.893 0a4.167 4.167 0 00-5.893 0l2.121 2.122a1.167 1.167 0 011.65 0L8.28 7.882zm3.724 3.724L8.28 7.882l-2.122 2.122 3.724 3.723 2.122-2.121zm-.67-.44h-.391v3h.39v-3zm-.167.167c0-.092.074-.166.166-.166v3a2.833 2.833 0 002.834-2.834h-3zm0-6.666v6.666h3V4.667h-3zm.166.166a.167.167 0 01-.166-.166h3a2.833 2.833 0 00-2.834-2.834v3zm-6.666 0h6.666v-3H4.667v3zm.548 6.113l2.782 2.781 2.12-2.121-2.78-2.781-2.122 2.121zm.236 0a.167.167 0 01-.236 0l2.122-2.121a2.833 2.833 0 00-4.007 0l2.121 2.121zm-1.057 1.058l1.057-1.058L3.33 8.825 2.273 9.882l2.121 2.122zm.44-.67v-.391h-3v.39h3zm-.167-.167c.092 0 .166.074.166.166h-3a2.833 2.833 0 002.834 2.834v-3zm4.39 0h-4.39v3h4.39v-3z", mask: "url(#path-1-inside-1_1967_138)" })] }));
@@ -26435,6 +26473,15 @@ function PathSquareIcon({ size = '24', className, }) {
 function XSocial({ className, size = '24', }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M17.4033 3.5H20.2852L13.989 10.701L21.396 20.5H15.5964L11.054 14.557L5.85637 20.5H2.97269L9.70709 12.7977L2.60156 3.5H8.54839L12.6544 8.93215L17.4033 3.5ZM16.3918 18.7738H17.9887L7.68067 5.13549H5.96702L16.3918 18.7738Z", fill: "currentColor" }) }));
 }
+function GithubIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M12 1.95068C17.525 1.95068 22 6.42568 22 11.9507C21.9995 14.0459 21.3419 16.0883 20.1198 17.7902C18.8977 19.4922 17.1727 20.768 15.1875 21.4382C14.6875 21.5382 14.5 21.2257 14.5 20.9632C14.5 20.6257 14.5125 19.5507 14.5125 18.2132C14.5125 17.2757 14.2 16.6757 13.8375 16.3632C16.0625 16.1132 18.4 15.2632 18.4 11.4257C18.4 10.3257 18.0125 9.43818 17.375 8.73818C17.475 8.48818 17.825 7.46318 17.275 6.08818C17.275 6.08818 16.4375 5.81318 14.525 7.11318C13.725 6.88818 12.875 6.77568 12.025 6.77568C11.175 6.77568 10.325 6.88818 9.525 7.11318C7.6125 5.82568 6.775 6.08818 6.775 6.08818C6.225 7.46318 6.575 8.48818 6.675 8.73818C6.0375 9.43818 5.65 10.3382 5.65 11.4257C5.65 15.2507 7.975 16.1132 10.2 16.3632C9.9125 16.6132 9.65 17.0507 9.5625 17.7007C8.9875 17.9632 7.55 18.3882 6.65 16.8757C6.4625 16.5757 5.9 15.8382 5.1125 15.8507C4.275 15.8632 4.775 16.3257 5.125 16.5132C5.55 16.7507 6.0375 17.6382 6.15 17.9257C6.35 18.4882 7 19.5632 9.5125 19.1007C9.5125 19.9382 9.525 20.7257 9.525 20.9632C9.525 21.2257 9.3375 21.5257 8.8375 21.4382C6.8458 20.7752 5.11342 19.502 3.88611 17.799C2.65881 16.096 1.9989 14.0498 2 11.9507C2 6.42568 6.475 1.95068 12 1.95068Z", fill: "currentColor" }) }));
+}
+function DiscordIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M19.6361 5.0228C18.1907 4.35756 16.6648 3.88561 15.0973 3.61902C14.8828 4.00447 14.6888 4.40105 14.5159 4.8071C12.8463 4.55418 11.1484 4.55418 9.47881 4.8071C9.30587 4.4011 9.1118 4.00452 8.8974 3.61902C7.32897 3.88786 5.80205 4.36093 4.35518 5.02628C1.48276 9.29851 0.70409 13.4646 1.09342 17.5716C2.77558 18.821 4.6584 19.7712 6.66003 20.3809C7.11074 19.7715 7.50956 19.1251 7.85226 18.4483C7.20135 18.2039 6.57311 17.9024 5.9748 17.5473C6.13227 17.4325 6.28627 17.3142 6.43508 17.1994C8.17601 18.0224 10.0761 18.4491 12 18.4491C13.9238 18.4491 15.8239 18.0224 17.5648 17.1994C17.7154 17.3229 17.8694 17.4412 18.0251 17.5473C17.4257 17.903 16.7963 18.2051 16.1442 18.4501C16.4865 19.1265 16.8853 19.7724 17.3364 20.3809C19.3398 19.7737 21.224 18.8239 22.9065 17.5734C23.3633 12.8106 22.1261 8.68273 19.6361 5.0228ZM8.34541 15.0459C7.26047 15.0459 6.36414 14.0561 6.36414 12.8384C6.36414 11.6208 7.22932 10.6223 8.34195 10.6223C9.45458 10.6223 10.344 11.6208 10.325 12.8384C10.3059 14.0561 9.45112 15.0459 8.34541 15.0459ZM15.6545 15.0459C14.5678 15.0459 13.675 14.0561 13.675 12.8384C13.675 11.6208 14.5401 10.6223 15.6545 10.6223C16.7689 10.6223 17.6514 11.6208 17.6323 12.8384C17.6133 14.0561 16.7602 15.0459 15.6545 15.0459Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }));
+}
+function MirrorIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M6 9C6 5.68629 8.68629 3 12 3C15.3137 3 18 5.68629 18 9V20C18 20.5523 17.5523 21 17 21H7C6.44771 21 6 20.5523 6 20V9Z", stroke: "currentColor", strokeWidth: "2" }) }));
+}
 
 function SortIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M3 5H21M9 19H15M6 12H18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
@@ -26462,7 +26509,7 @@ function SwapErrorIcon() {
     return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", strokeOpacity: "0.33" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52502" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
 }
 function SwapWarningIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsxRuntime.jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_588_15630" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_588_15630", children: jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
+    return (jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsxRuntime.jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsxs("g", { clipPath: "url(#clip0_588_15630)", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_588_15630" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_588_15630", children: jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
 }
 
 function TradingViewStepsIcon({ size = '24', className, }) {
@@ -26473,6 +26520,38 @@ function TriangleExclamation() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.27146 2.30512C7.04321 0.982115 8.95481 0.982112 9.72657 2.30512L14.4052 10.3256C15.183 11.6589 14.2212 13.3334 12.6776 13.3334H3.3204C1.77682 13.3334 0.81507 11.6589 1.59284 10.3256L6.27146 2.30512ZM7.99967 5.33337C8.36786 5.33337 8.66634 5.63185 8.66634 6.00004V8.00004C8.66634 8.36823 8.36786 8.66671 7.99967 8.66671C7.63148 8.66671 7.33301 8.36823 7.33301 8.00004V6.00004C7.33301 5.63185 7.63148 5.33337 7.99967 5.33337ZM7.16634 10C7.16634 9.5398 7.53944 9.16671 7.99967 9.16671C8.45991 9.16671 8.83301 9.5398 8.83301 10C8.83301 10.4603 8.45991 10.8334 7.99967 10.8334C7.53944 10.8334 7.16634 10.4603 7.16634 10Z", fill: "currentColor" }) }));
 }
 
+function CrossAnimatedIcon({ size = 24, isOpen, transitionDuration, className, }) {
+    const rotateDegrees = isOpen ? 45 : 0;
+    return (jsxRuntime.jsxs("div", { style: {
+            width: size,
+            height: size * 0.585,
+        }, className: cn('tw-relative tw-rotate-0 tw-transition-transform', className), children: [jsxRuntime.jsx("span", { style: {
+                    height: size * 0.1,
+                    top: isOpen ? size * -0.05 : 0,
+                    transformOrigin: 'left center',
+                    left: isOpen ? size * 0.13 : 0,
+                    transitionDuration,
+                    transform: isOpen ? `rotate(${rotateDegrees}deg)` : 'rotate(0)',
+                }, className: "tw-absolute tw-block tw-w-full tw-rounded-sm tw-bg-current tw-opacity-100 tw-transition-transform" }), jsxRuntime.jsx("span", { style: {
+                    height: size * 0.1,
+                    top: isOpen ? size * 0.65 : size * 0.6,
+                    transformOrigin: 'left center',
+                    left: isOpen ? size * 0.13 : 0,
+                    transitionDuration,
+                    transform: isOpen ? `rotate(-${rotateDegrees}deg)` : 'rotate(0)',
+                }, className: "tw-absolute tw-block tw-w-full tw-rounded-sm tw-bg-current tw-opacity-100 tw-transition-transform" })] }));
+}
+
+function SunriseIcon({ size = '32', className, }) {
+    return (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16 6C16.5523 6 17 6.44772 17 7V8C17 8.55228 16.5523 9 16 9C15.4477 9 15 8.55228 15 8V7C15 6.44772 15.4477 6 16 6ZM6 16C6 15.4477 6.44772 15 7 15H8C8.55228 15 9 15.4477 9 16C9 16.5523 8.55228 17 8 17H7C6.44772 17 6 16.5523 6 16ZM23 16C23 15.4477 23.4477 15 24 15H25C25.5523 15 26 15.4477 26 16C26 16.5523 25.5523 17 25 17H24C23.4477 17 23 16.5523 23 16Z", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.9491 11.0503C20.5586 10.6597 20.5586 10.0266 20.9491 9.63604L21.6562 8.92893C22.0468 8.53841 22.6799 8.53841 23.0705 8.92893C23.461 9.31946 23.461 9.95262 23.0705 10.3431L22.3634 11.0503C21.9728 11.4408 21.3397 11.4408 20.9491 11.0503Z", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 20C6 19.4477 6.44772 19 7 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H7C6.44772 21 6 20.5523 6 20ZM10 24C10 23.4477 10.4477 23 11 23H21C21.5523 23 22 23.4477 22 24C22 24.5523 21.5523 25 21 25H11C10.4477 25 10 24.5523 10 24Z", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.92961 8.92893C9.32014 8.53841 9.9533 8.53841 10.3438 8.92893L11.0509 9.63604C11.4415 10.0266 11.4415 10.6597 11.0509 11.0503C10.6604 11.4408 10.0272 11.4408 9.63672 11.0503L8.92961 10.3431C8.53909 9.95262 8.53909 9.31946 8.92961 8.92893Z", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 17C11.4477 17 11 16.5523 11 16C11 13.2386 13.2386 11 16 11C18.7614 11 21 13.2386 21 16C21 16.5523 20.5523 17 20 17C18.3023 17 13.6977 17 12 17Z", fill: "currentColor" })] }));
+}
+function SunIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M10.8335 1.66671C10.8335 1.20647 10.4604 0.833374 10.0002 0.833374C9.53992 0.833374 9.16683 1.20647 9.16683 1.66671V2.50004C9.16683 2.96028 9.53992 3.33337 10.0002 3.33337C10.4604 3.33337 10.8335 2.96028 10.8335 2.50004V1.66671Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M10.8335 17.5001C10.8335 17.0398 10.4604 16.6667 10.0002 16.6667C9.53992 16.6667 9.16683 17.0398 9.16683 17.5001V18.3334C9.16683 18.7936 9.53992 19.1667 10.0002 19.1667C10.4604 19.1667 10.8335 18.7936 10.8335 18.3334V17.5001Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M16.481 3.51916C16.8064 3.8446 16.8064 4.37224 16.481 4.69767L15.8893 5.28934C15.5638 5.61478 15.0362 5.61478 14.7108 5.28934C14.3853 4.9639 14.3853 4.43627 14.7108 4.11083L15.3024 3.51916C15.6279 3.19373 16.1555 3.19373 16.481 3.51916Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M5.28955 15.8893C5.61499 15.5638 5.61499 15.0362 5.28955 14.7108C4.96411 14.3853 4.43647 14.3853 4.11104 14.7108L3.51937 15.3024C3.19393 15.6279 3.19393 16.1555 3.51937 16.4809C3.84481 16.8064 4.37244 16.8064 4.69788 16.4809L5.28955 15.8893Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M16.6668 10.0001C16.6668 9.53982 17.0399 9.16672 17.5002 9.16672H18.3335C18.7937 9.16672 19.1668 9.53982 19.1668 10.0001C19.1668 10.4603 18.7937 10.8334 18.3335 10.8334H17.5002C17.0399 10.8334 16.6668 10.4603 16.6668 10.0001Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M1.66683 9.16672C1.20659 9.16672 0.833496 9.53982 0.833496 10.0001C0.833496 10.4603 1.20659 10.8334 1.66683 10.8334H2.50016C2.9604 10.8334 3.3335 10.4603 3.3335 10.0001C3.3335 9.53982 2.9604 9.16672 2.50016 9.16672H1.66683Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M14.7108 14.7108C15.0362 14.3853 15.5638 14.3853 15.8893 14.7108L16.481 15.3024C16.8064 15.6279 16.8064 16.1555 16.481 16.4809C16.1555 16.8064 15.6279 16.8064 15.3024 16.4809L14.7108 15.8893C14.3853 15.5638 14.3853 15.0362 14.7108 14.7108Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M4.69788 3.51916C4.37244 3.19373 3.84481 3.19373 3.51937 3.51916C3.19393 3.8446 3.19393 4.37224 3.51937 4.69767L4.11104 5.28934C4.43647 5.61478 4.96411 5.61478 5.28955 5.28934C5.61499 4.9639 5.61499 4.43627 5.28955 4.11083L4.69788 3.51916Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M6.46463 6.46451C8.41725 4.51189 11.5831 4.51189 13.5357 6.46451C15.4883 8.41713 15.4883 11.583 13.5357 13.5356C11.5831 15.4882 8.41725 15.4882 6.46463 13.5356C4.51201 11.583 4.51201 8.41713 6.46463 6.46451Z", fill: "currentColor" })] }));
+}
+function MoonIcon({ size = '20', className, }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M10.0463 2.99972C10.2292 2.73432 10.2427 2.38723 10.0809 2.10846C9.91903 1.8297 9.61096 1.66925 9.28979 1.69647C5.02109 2.05816 1.66992 5.63639 1.66992 9.9982C1.66992 14.5997 5.40018 18.33 10.0017 18.33C14.3636 18.33 17.9419 14.9787 18.3035 10.7098C18.3307 10.3887 18.1702 10.0806 17.8914 9.91879C17.6127 9.75698 17.2656 9.77044 17.0002 9.95336C16.1951 10.5083 15.2201 10.8331 14.1667 10.8331C11.4052 10.8331 9.16667 8.59452 9.16667 5.8331C9.16667 4.77977 9.49145 3.80481 10.0463 2.99972Z", fill: "currentColor" }) }));
+}
+
 function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }) {
     const matchesMobileLg = useMediaQuery(MEDIA_QUERIES.MOBILE_LG.media);
     return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { displayBackButton: true }), jsxRuntime.jsx("div", { className: "tw-max-h-[60px] tw-px-squid-m tw-py-squid-xs", children: jsxRuntime.jsx(Input, {}) }), jsxRuntime.jsx(BorderedContainer, { children: jsxRuntime.jsxs("div", { className: cn('tw-grid', matchesMobileLg
@@ -61510,35 +61589,6 @@ const transactionHalfSuccessAnimation = TransactionHalfSuccessAnimation;
 const transactionErrorPauseAnimation = TransactionErrorPauseAnimation;
 const transactionRejectedAnimation = TransactionRejectedAnimation;
 
-const useTimer = ({ immediateStart = true, }) => {
-    const [timer, setTimer] = React$1.useState('0s');
-    const intervalRef = React$1.useRef(null);
-    const startTimer = () => {
-        if (intervalRef.current !== null)
-            return; // Prevent multiple intervals
-        const startTime = Date.now();
-        intervalRef.current = window.setInterval(() => {
-            const elapsedTime = Date.now() - startTime;
-            setTimer(formatDuration(elapsedTime));
-        }, 1000);
-    };
-    const stopTimer = () => {
-        if (intervalRef.current !== null) {
-            clearInterval(intervalRef.current);
-            intervalRef.current = null;
-        }
-    };
-    React$1.useEffect(() => {
-        if (immediateStart) {
-            startTimer();
-        }
-        return () => {
-            stopTimer();
-        };
-    }, [immediateStart]);
-    return { timer, stopTimer, startTimer };
-};
-
 var SwapState;
 (function (SwapState) {
     // user needs to sign the transaction in their wallet
@@ -61855,30 +61905,23 @@ const parseSquidTheme = (userTheme) => {
     // material-dark-thin -> grey-900 + 10% opacity
     // material-dark-average -> grey-900 + 33% opacity
     // material-dark-thick -> grey-900 + 66% opacity
-    let materialVariants = {};
-    if (squidTheme['grey-100'] && squidTheme['grey-900']) {
-        materialVariants = {
-            'material-light-thin': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.1),
-            'material-light-average': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.33),
-            'material-light-thick': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.66),
-            'material-dark-thin': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.1),
-            'material-dark-average': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.33),
-            'material-dark-thick': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.66),
-        };
-    }
+    const materialVariants = {
+        'material-light-thin': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.1),
+        'material-light-average': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.33),
+        'material-light-thick': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.66),
+        'material-dark-thin': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.1),
+        'material-dark-average': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.33),
+        'material-dark-thick': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.66),
+    };
     squidTheme = Object.assign(Object.assign({}, squidTheme), materialVariants);
     const styleKeys = Object.keys(themeTypesKeys);
-    const parsed = styleKeys
-        .map((sk) => {
+    const parsed = styleKeys.map((sk) => {
         const themeItem = themeTypesKeys[sk];
-        if (!themeItem)
-            return {};
         let userValue = squidTheme[sk];
         return {
             [themeItem.cssVariable]: userValue,
         };
-    })
-        .filter((obj) => Object.keys(obj).length > 0);
+    });
     // adds a variant with 0.05 opacity for each color
     // will result in variables like this:
     // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
@@ -61893,19 +61936,13 @@ const parseSquidTheme = (userTheme) => {
     //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
     //   })
     // })
-    if (themeTypesKeys['grey-100-005'] && squidTheme['grey-100']) {
-        parsed.push({
-            [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
-        });
-    }
-    if (themeTypesKeys['material-light-blend-grey-900'] &&
-        squidTheme['material-light-thin'] &&
-        squidTheme['grey-900']) {
-        // color representing the blend of material-light and grey-900
-        parsed.push({
-            [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
-        });
-    }
+    parsed.push({
+        [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+    });
+    // color representing the blend of material-light and grey-900
+    parsed.push({
+        [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
+    });
     return parsed.reduce((a, v) => {
         const key = Object.keys(v)[0];
         return Object.assign(Object.assign({}, a), { [key]: v[key] });
@@ -62000,6 +62037,7 @@ exports.ArrowWallDownIcon = ArrowWallDownIcon;
 exports.ArrowsSwapIcon = ArrowsSwapIcon;
 exports.AssetsButton = AssetsButton;
 exports.AssetsView = AssetsView;
+exports.BackpackIcon = BackpackIcon;
 exports.BadgeImage = BadgeImage;
 exports.BagIcon = BagIcon;
 exports.BankIcon = BankIcon;
@@ -62015,10 +62053,12 @@ exports.BridgeHeader = BridgeHeader;
 exports.BridgeProperties = BridgeProperties;
 exports.BridgeTransactionView = BridgeTransactionView;
 exports.BrokenHeartIcon = BrokenHeartIcon;
+exports.BubblesIcon = BubblesIcon;
 exports.Button = Button$1;
 exports.BuyNFTHeader = BuyNFTHeader;
 exports.BuyNFTProperties = BuyNFTProperties;
 exports.BuyNFTTransactionView = BuyNFTTransactionView;
+exports.CSS_VARS = CSS_VARS;
 exports.Calendar = Calendar;
 exports.CaptionText = CaptionText;
 exports.ChainLink = ChainLink;
@@ -62040,12 +62080,17 @@ exports.ClockOutlineIcon = ClockOutlineIcon;
 exports.CoinsAddIcon = CoinsAddIcon;
 exports.CoinsIcon = CoinsIcon;
 exports.Collapse = Collapse;
+exports.CollapsibleMenu = CollapsibleMenu;
 exports.CollectionIcon = CollectionIcon;
+exports.ColorPaletteIcon = ColorPaletteIcon;
 exports.CompassRound = CompassRound;
+exports.ConsoleIcon = ConsoleIcon;
 exports.Copy = Copy;
+exports.CrossAnimatedIcon = CrossAnimatedIcon;
 exports.DashboardFast = DashboardFast;
 exports.DescriptionBlocks = DescriptionBlocks;
 exports.DetailsToolbar = DetailsToolbar;
+exports.DiscordIcon = DiscordIcon;
 exports.DockSwapIcon = DockSwapIcon;
 exports.Dollar = Dollar;
 exports.DotGrid1x3HorizontalIcon = DotGrid1x3HorizontalIcon;
@@ -62065,6 +62110,7 @@ exports.FilledHeartIcon = FilledHeartIcon;
 exports.FilterButton = FilterButton;
 exports.FilterIcon = FilterIcon;
 exports.GasIcon = GasIcon;
+exports.GithubIcon = GithubIcon;
 exports.HashLink = HashLink;
 exports.HeadingText = HeadingText;
 exports.HeartSmallIcon = HeartSmallIcon;
@@ -62095,9 +62141,12 @@ exports.MainView = MainView;
 exports.MaxIcon = MaxIcon;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
+exports.MenuSwapIcon = MenuSwapIcon;
+exports.MirrorIcon = MirrorIcon;
 exports.Modal = Modal;
 exports.ModalContent = ModalContent;
 exports.ModalContentDivider = ModalContentDivider;
+exports.MoonIcon = MoonIcon;
 exports.NavigationBar = NavigationBar;
 exports.NotAllowedIcon = NotAllowedIcon;
 exports.NumericInput = NumericInput;
@@ -62128,6 +62177,7 @@ exports.SettingsGearIcon = SettingsGearIcon;
 exports.SettingsItem = SettingsItem;
 exports.SettingsSlider = SettingsSlider;
 exports.SizeTransition = SizeTransition;
+exports.SmileIcon = SmileIcon;
 exports.SnapIcon = SnapIcon;
 exports.SortIcon = SortIcon;
 exports.SparkleIcon = SparkleIcon;
@@ -62140,6 +62190,8 @@ exports.SquidLogo = SquidLogo;
 exports.StakeAction = StakeAction;
 exports.StartAction = StartAction;
 exports.SuccessAction = SuccessAction;
+exports.SunIcon = SunIcon;
+exports.SunriseIcon = SunriseIcon;
 exports.SwapAction = SwapAction;
 exports.SwapConfiguration = SwapConfiguration;
 exports.SwapDetailsView = SwapDetailsView;
@@ -62191,8 +62243,11 @@ exports.baseTailwindConfig = baseTailwindConfig;
 exports.darkTheme = darkTheme;
 exports.lightTheme = lightTheme;
 exports.linkActionTimelineProps = linkActionTimelineProps;
-exports.statusBgClassMap = statusBgClassMap$1;
-exports.statusColorClassMap = statusColorClassMap;
 exports.statusTextClassMap = statusTextClassMap;
+exports.useCollapsibleMenu = useCollapsibleMenu;
 exports.useDropdownMenu = useDropdownMenu;
 exports.useMediaQuery = useMediaQuery;
+exports.useOnResize = useOnResize;
+exports.useRect = useRect;
+exports.useTimer = useTimer;
+exports.useVersion = useVersion;