@0xsquid/ui 0.18.0 → 0.18.1-beta.0

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React 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';
+import React__default, { 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}
 
@@ -6851,9 +6851,9 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[157px] mobile-lg:tw-w-[190px]', detailStateClassMap[state]);
-    return (jsx("aside", { className: cn('mobile-lg:tw-w-card-large tw-flex tw-h-[50px] tw-w-full tw-items-center tw-justify-between tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error'
-            ? 'mobile-lg:tw-px-squid-l tw-px-squid-m'
-            : 'mobile-lg:tw-px-squid-m tw-px-squid-xs'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button$1, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
+    return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-full tw-items-center tw-justify-between tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500 mobile-lg:tw-w-card-large', state === 'error'
+            ? 'tw-px-squid-m mobile-lg:tw-px-squid-l'
+            : 'tw-px-squid-xs mobile-lg:tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button$1, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
                             ? flipButton.disabledMessage
                             : undefined, tooltipWidth: "max", displayDelayMs: flipButton === null || flipButton === void 0 ? void 0 : flipButton.tooltipDisplayDelayMs, children: jsx("button", { disabled: flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !(flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled) &&
                                     'group-hover/flip-button:tw-rotate-180') }) }) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
@@ -7415,8 +7415,8 @@ const borderRadiusClassMap = {
     lg: 'tw-rounded-squid-m',
 };
 function Menu(_a) {
-    var { children, containerClassName, contentClassName, rounded = 'lg', menuRef } = _a, props = __rest$1(_a, ["children", "containerClassName", "contentClassName", "rounded", "menuRef"]);
-    return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-xs tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsx("div", { className: "tw-z-20 tw-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-text-caption", children: children })), jsx("div", { className: cn('tw-absolute tw-inset-0 tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
+    var { children, containerClassName, contentClassName, rounded = 'lg', menuRef, contentWrapperClassName } = _a, props = __rest$1(_a, ["children", "containerClassName", "contentClassName", "rounded", "menuRef", "contentWrapperClassName"]);
+    return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-xs tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsx("div", { className: cn('tw-z-20 tw-max-w-full tw-text-caption', contentWrapperClassName), children: children })), jsx("div", { className: cn('tw-absolute tw-inset-0 tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
 }
 
 function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false, listClassName, }) {
@@ -7483,8 +7483,571 @@ function NavigationBar({ title, displayBackButton = false, logoUrl, transparent
                                 : action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsx("div", { className: "mobile-lg:tw-px-squid-l tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
 }
 
+const createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const destroy = () => {
+    if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production") {
+      console.warn(
+        "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
+      );
+    }
+    listeners.clear();
+  };
+  const api = { setState, getState, getInitialState, subscribe, destroy };
+  const initialState = state = createState(setState, getState, api);
+  return api;
+};
+const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+
+var withSelector = {exports: {}};
+
+var withSelector_production_min = {};
+
+var shim = {exports: {}};
+
+var useSyncExternalStoreShim_production_min = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_production_min;
+
+function requireUseSyncExternalStoreShim_production_min () {
+	if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
+	hasRequiredUseSyncExternalStoreShim_production_min = 1;
+var e=React__default;function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c});},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c});})},[a]);p(d);return d}
+	function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return !k(a,d)}catch(f){return !0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;useSyncExternalStoreShim_production_min.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;
+	return useSyncExternalStoreShim_production_min;
+}
+
+var useSyncExternalStoreShim_development = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_development;
+
+function requireUseSyncExternalStoreShim_development () {
+	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
+	hasRequiredUseSyncExternalStoreShim_development = 1;
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+	if (
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+	    'function'
+	) {
+	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+	}
+	          var React = React__default;
+
+	var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+	function error(format) {
+	  {
+	    {
+	      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+	        args[_key2 - 1] = arguments[_key2];
+	      }
+
+	      printWarning('error', format, args);
+	    }
+	  }
+	}
+
+	function printWarning(level, format, args) {
+	  // When changing this logic, you might want to also
+	  // update consoleWithStackDev.www.js as well.
+	  {
+	    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+	    var stack = ReactDebugCurrentFrame.getStackAddendum();
+
+	    if (stack !== '') {
+	      format += '%s';
+	      args = args.concat([stack]);
+	    } // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+	    var argsWithFormat = args.map(function (item) {
+	      return String(item);
+	    }); // Careful: RN currently depends on this prefix
+
+	    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
+	    // breaks IE9: https://github.com/facebook/react/issues/13610
+	    // eslint-disable-next-line react-internal/no-production-logging
+
+	    Function.prototype.apply.call(console[level], console, argsWithFormat);
+	  }
+	}
+
+	/**
+	 * inlined Object.is polyfill to avoid requiring consumers ship their own
+	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+	 */
+	function is(x, y) {
+	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
+	  ;
+	}
+
+	var objectIs = typeof Object.is === 'function' ? Object.is : is;
+
+	// dispatch for CommonJS interop named imports.
+
+	var useState = React.useState,
+	    useEffect = React.useEffect,
+	    useLayoutEffect = React.useLayoutEffect,
+	    useDebugValue = React.useDebugValue;
+	var didWarnOld18Alpha = false;
+	var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
+	// because of a very particular set of implementation details and assumptions
+	// -- change any one of them and it will break. The most important assumption
+	// is that updates are always synchronous, because concurrent rendering is
+	// only available in versions of React that also have a built-in
+	// useSyncExternalStore API. And we only use this shim when the built-in API
+	// does not exist.
+	//
+	// Do not assume that the clever hacks used by this hook also work in general.
+	// The point of this shim is to replace the need for hacks by other libraries.
+
+	function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+	// React do not expose a way to check if we're hydrating. So users of the shim
+	// will need to track that themselves and return the correct value
+	// from `getSnapshot`.
+	getServerSnapshot) {
+	  {
+	    if (!didWarnOld18Alpha) {
+	      if (React.startTransition !== undefined) {
+	        didWarnOld18Alpha = true;
+
+	        error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
+	      }
+	    }
+	  } // Read the current snapshot from the store on every render. Again, this
+	  // breaks the rules of React, and only works here because of specific
+	  // implementation details, most importantly that updates are
+	  // always synchronous.
+
+
+	  var value = getSnapshot();
+
+	  {
+	    if (!didWarnUncachedGetSnapshot) {
+	      var cachedValue = getSnapshot();
+
+	      if (!objectIs(value, cachedValue)) {
+	        error('The result of getSnapshot should be cached to avoid an infinite loop');
+
+	        didWarnUncachedGetSnapshot = true;
+	      }
+	    }
+	  } // Because updates are synchronous, we don't queue them. Instead we force a
+	  // re-render whenever the subscribed state changes by updating an some
+	  // arbitrary useState hook. Then, during render, we call getSnapshot to read
+	  // the current value.
+	  //
+	  // Because we don't actually use the state returned by the useState hook, we
+	  // can save a bit of memory by storing other stuff in that slot.
+	  //
+	  // To implement the early bailout, we need to track some things on a mutable
+	  // object. Usually, we would put that in a useRef hook, but we can stash it in
+	  // our useState hook instead.
+	  //
+	  // To force a re-render, we call forceUpdate({inst}). That works because the
+	  // new object always fails an equality check.
+
+
+	  var _useState = useState({
+	    inst: {
+	      value: value,
+	      getSnapshot: getSnapshot
+	    }
+	  }),
+	      inst = _useState[0].inst,
+	      forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
+	  // in the layout phase so we can access it during the tearing check that
+	  // happens on subscribe.
+
+
+	  useLayoutEffect(function () {
+	    inst.value = value;
+	    inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
+	    // commit phase if there was an interleaved mutation. In concurrent mode
+	    // this can happen all the time, but even in synchronous mode, an earlier
+	    // effect may have mutated the store.
+
+	    if (checkIfSnapshotChanged(inst)) {
+	      // Force a re-render.
+	      forceUpdate({
+	        inst: inst
+	      });
+	    }
+	  }, [subscribe, value, getSnapshot]);
+	  useEffect(function () {
+	    // Check for changes right before subscribing. Subsequent changes will be
+	    // detected in the subscription handler.
+	    if (checkIfSnapshotChanged(inst)) {
+	      // Force a re-render.
+	      forceUpdate({
+	        inst: inst
+	      });
+	    }
+
+	    var handleStoreChange = function () {
+	      // TODO: Because there is no cross-renderer API for batching updates, it's
+	      // up to the consumer of this library to wrap their subscription event
+	      // with unstable_batchedUpdates. Should we try to detect when this isn't
+	      // the case and print a warning in development?
+	      // The store changed. Check if the snapshot changed since the last time we
+	      // read from the store.
+	      if (checkIfSnapshotChanged(inst)) {
+	        // Force a re-render.
+	        forceUpdate({
+	          inst: inst
+	        });
+	      }
+	    }; // Subscribe to the store and return a clean-up function.
+
+
+	    return subscribe(handleStoreChange);
+	  }, [subscribe]);
+	  useDebugValue(value);
+	  return value;
+	}
+
+	function checkIfSnapshotChanged(inst) {
+	  var latestGetSnapshot = inst.getSnapshot;
+	  var prevValue = inst.value;
+
+	  try {
+	    var nextValue = latestGetSnapshot();
+	    return !objectIs(prevValue, nextValue);
+	  } catch (error) {
+	    return true;
+	  }
+	}
+
+	function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
+	  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+	  // React do not expose a way to check if we're hydrating. So users of the shim
+	  // will need to track that themselves and return the correct value
+	  // from `getSnapshot`.
+	  return getSnapshot();
+	}
+
+	var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
+
+	var isServerEnvironment = !canUseDOM;
+
+	var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
+	var useSyncExternalStore$2 = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;
+
+	useSyncExternalStoreShim_development.useSyncExternalStore = useSyncExternalStore$2;
+	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+	if (
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+	    'function'
+	) {
+	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+	}
+	        
+	  })();
+	}
+	return useSyncExternalStoreShim_development;
+}
+
+var hasRequiredShim;
+
+function requireShim () {
+	if (hasRequiredShim) return shim.exports;
+	hasRequiredShim = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  shim.exports = requireUseSyncExternalStoreShim_production_min();
+	} else {
+	  shim.exports = requireUseSyncExternalStoreShim_development();
+	}
+	return shim.exports;
+}
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredWithSelector_production_min;
+
+function requireWithSelector_production_min () {
+	if (hasRequiredWithSelector_production_min) return withSelector_production_min;
+	hasRequiredWithSelector_production_min = 1;
+var h=React__default,n=requireShim();function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
+	withSelector_production_min.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f;}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return [function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);
+	u(function(){f.hasValue=!0;f.value=d;},[d]);w(d);return d};
+	return withSelector_production_min;
+}
+
+var withSelector_development = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredWithSelector_development;
+
+function requireWithSelector_development () {
+	if (hasRequiredWithSelector_development) return withSelector_development;
+	hasRequiredWithSelector_development = 1;
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+	if (
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+	    'function'
+	) {
+	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+	}
+	          var React = React__default;
+	var shim = requireShim();
+
+	/**
+	 * inlined Object.is polyfill to avoid requiring consumers ship their own
+	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+	 */
+	function is(x, y) {
+	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
+	  ;
+	}
+
+	var objectIs = typeof Object.is === 'function' ? Object.is : is;
+
+	var useSyncExternalStore = shim.useSyncExternalStore;
+
+	// for CommonJS interop.
+
+	var useRef = React.useRef,
+	    useEffect = React.useEffect,
+	    useMemo = React.useMemo,
+	    useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
+
+	function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+	  // Use this to track the rendered snapshot.
+	  var instRef = useRef(null);
+	  var inst;
+
+	  if (instRef.current === null) {
+	    inst = {
+	      hasValue: false,
+	      value: null
+	    };
+	    instRef.current = inst;
+	  } else {
+	    inst = instRef.current;
+	  }
+
+	  var _useMemo = useMemo(function () {
+	    // Track the memoized state using closure variables that are local to this
+	    // memoized instance of a getSnapshot function. Intentionally not using a
+	    // useRef hook, because that state would be shared across all concurrent
+	    // copies of the hook/component.
+	    var hasMemo = false;
+	    var memoizedSnapshot;
+	    var memoizedSelection;
+
+	    var memoizedSelector = function (nextSnapshot) {
+	      if (!hasMemo) {
+	        // The first time the hook is called, there is no memoized result.
+	        hasMemo = true;
+	        memoizedSnapshot = nextSnapshot;
+
+	        var _nextSelection = selector(nextSnapshot);
+
+	        if (isEqual !== undefined) {
+	          // Even if the selector has changed, the currently rendered selection
+	          // may be equal to the new selection. We should attempt to reuse the
+	          // current value if possible, to preserve downstream memoizations.
+	          if (inst.hasValue) {
+	            var currentSelection = inst.value;
+
+	            if (isEqual(currentSelection, _nextSelection)) {
+	              memoizedSelection = currentSelection;
+	              return currentSelection;
+	            }
+	          }
+	        }
+
+	        memoizedSelection = _nextSelection;
+	        return _nextSelection;
+	      } // We may be able to reuse the previous invocation's result.
+
+
+	      // We may be able to reuse the previous invocation's result.
+	      var prevSnapshot = memoizedSnapshot;
+	      var prevSelection = memoizedSelection;
+
+	      if (objectIs(prevSnapshot, nextSnapshot)) {
+	        // The snapshot is the same as last time. Reuse the previous selection.
+	        return prevSelection;
+	      } // The snapshot has changed, so we need to compute a new selection.
+
+
+	      // The snapshot has changed, so we need to compute a new selection.
+	      var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
+	      // has changed. If it hasn't, return the previous selection. That signals
+	      // to React that the selections are conceptually equal, and we can bail
+	      // out of rendering.
+
+	      // If a custom isEqual function is provided, use that to check if the data
+	      // has changed. If it hasn't, return the previous selection. That signals
+	      // to React that the selections are conceptually equal, and we can bail
+	      // out of rendering.
+	      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
+	        return prevSelection;
+	      }
+
+	      memoizedSnapshot = nextSnapshot;
+	      memoizedSelection = nextSelection;
+	      return nextSelection;
+	    }; // Assigning this to a constant so that Flow knows it can't change.
+
+
+	    // Assigning this to a constant so that Flow knows it can't change.
+	    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
+
+	    var getSnapshotWithSelector = function () {
+	      return memoizedSelector(getSnapshot());
+	    };
+
+	    var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
+	      return memoizedSelector(maybeGetServerSnapshot());
+	    };
+	    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
+	  }, [getSnapshot, getServerSnapshot, selector, isEqual]),
+	      getSelection = _useMemo[0],
+	      getServerSelection = _useMemo[1];
+
+	  var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
+	  useEffect(function () {
+	    inst.hasValue = true;
+	    inst.value = value;
+	  }, [value]);
+	  useDebugValue(value);
+	  return value;
+	}
+
+	withSelector_development.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
+	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+	if (
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+	    'function'
+	) {
+	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+	}
+	        
+	  })();
+	}
+	return withSelector_development;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  withSelector.exports = requireWithSelector_production_min();
+} else {
+  withSelector.exports = requireWithSelector_development();
+}
+
+var withSelectorExports = withSelector.exports;
+var useSyncExternalStoreExports = /*@__PURE__*/getDefaultExportFromCjs(withSelectorExports);
+
+const { useDebugValue } = React__default;
+const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
+let didWarnAboutEqualityFn = false;
+const identity = (arg) => arg;
+function useStore(api, selector = identity, equalityFn) {
+  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && equalityFn && !didWarnAboutEqualityFn) {
+    console.warn(
+      "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
+    );
+    didWarnAboutEqualityFn = true;
+  }
+  const slice = useSyncExternalStoreWithSelector(
+    api.subscribe,
+    api.getState,
+    api.getServerState || api.getInitialState,
+    selector,
+    equalityFn
+  );
+  useDebugValue(slice);
+  return slice;
+}
+const createImpl = (createState) => {
+  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && typeof createState !== "function") {
+    console.warn(
+      "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
+    );
+  }
+  const api = typeof createState === "function" ? createStore(createState) : createState;
+  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+const create = (createState) => createState ? createImpl(createState) : createImpl;
+
+const useContainerStore = create(() => ({
+    containerRef: undefined,
+}));
+
 function ProductCard({ children }) {
-    return (jsx("div", { className: "tw-flex tw-h-full tw-max-w-[100vw] tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-3 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-3 mobile-lg:tw-max-w-card-large mobile-lg:tw-rounded-squid-l", children: jsx("div", { className: "tw-relative tw-h-card-compact tw-min-h-card-compact tw-w-full mobile-lg:tw-h-card-large mobile-lg:tw-min-h-card-large mobile-lg:tw-w-card-large", children: children }) }));
+    const containerRef = useRef(null);
+    useEffect(() => {
+        useContainerStore.setState({ containerRef });
+    }, [containerRef]);
+    return (jsx("div", { className: "tw-flex tw-h-full tw-max-w-[100vw] tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-3 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-3 mobile-lg:tw-max-w-card-large mobile-lg:tw-rounded-squid-l", children: jsx("div", { ref: containerRef, className: "tw-relative tw-h-card-compact tw-min-h-card-compact tw-w-full mobile-lg:tw-h-card-large mobile-lg:tw-min-h-card-large mobile-lg:tw-w-card-large", children: children }) }));
 }
 function BorderedContainer({ children, className, }) {
     return (jsx("section", { className: cn('tw-border-t tw-border-t-material-light-thin', className), children: children }));
@@ -13596,7 +14159,7 @@ function TransactionSearch({ query, setQuery, children, className, }) {
 }
 
 function Toast({ headerContent, actionsContent, description, chipLabel, title, }) {
-    return (jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", rounded: "sm", children: [headerContent, jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
+    return (jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperClassName: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", rounded: "sm", children: [headerContent, jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
 }
 
 const buttonClassName = 'tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs';
@@ -13847,28 +14410,140 @@ const tooltipWidthClassMap = {
     container: 'tw-w-full',
 };
 const tooltipThresholdClassMap = {
-    xxs: 'tw-pb-squid-xxs',
-    xs: 'tw-pb-squid-xs',
-    s: 'tw-pb-squid-s',
-    m: 'tw-pb-squid-m',
-    l: 'tw-pb-squid-l',
-    xl: 'tw-pb-squid-xl',
-    xxl: 'tw-pb-squid-xxl',
+    xxs: 'tw-py-squid-xxs',
+    xs: 'tw-py-squid-xs',
+    s: 'tw-py-squid-s',
+    m: 'tw-py-squid-m',
+    l: 'tw-py-squid-l',
+    xl: 'tw-py-squid-xl',
+    xxl: 'tw-py-squid-xxl',
 };
-function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, displayDelayMs = 0, }) {
-    return (jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsx(Menu, { style: {
-                    [CSS_VARS.DISPLAY_DELAYED_DURATION]: `${displayDelayMs}ms`,
-                }, containerClassName: cn(
-                // general styles
-                'tw-absolute tw-z-40 tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', 
-                // visibility styles. Display only on hover
-                'tw-animate-hide peer-hover:tw-animate-display-delayed hover:tw-animate-display-delayed', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
+function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, displayDelayMs = 0, containerRef: _containerRef, }) {
+    const containerRefState = useContainerStore((state) => state.containerRef);
+    const containerRef = (containerRefState === null || containerRefState === void 0 ? void 0 : containerRefState.current)
+        ? containerRefState
+        : _containerRef;
+    const [tooltipPositionStyle, setTooltipPositionStyle] = useState({});
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const tooltipRef = useRef(null);
+    const tooltipTriggerRef = useRef(null);
+    useEffect(() => {
+        const adjustTooltipPosition = () => {
+            if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) ||
+                !tooltipRef.current ||
+                !tooltipTriggerRef.current) {
+                // try to center it
+                return setTooltipPositionStyle({
+                    top: '-100%',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                });
+            }
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const tooltipRect = tooltipRef.current.getBoundingClientRect();
+            const tooltipTriggerRect = tooltipTriggerRef.current.getBoundingClientRect();
+            const tooltipFitsBelow = containerRect.bottom - tooltipTriggerRect.bottom > tooltipRect.height;
+            const tooltipFitsAbove = tooltipTriggerRect.top - containerRect.top > tooltipRect.height;
+            const fitsInLeft = tooltipTriggerRect.left - containerRect.left >= tooltipRect.width;
+            const fitsInRight = tooltipTriggerRect.left + tooltipRect.width - containerRect.left <
+                containerRect.width / 2 - tooltipRect.width / 2;
+            const fitsInMiddle = tooltipTriggerRect.left +
+                tooltipTriggerRect.width / 2 -
+                containerRect.left >=
+                tooltipRect.width / 2 &&
+                containerRect.right -
+                    (tooltipTriggerRect.right - tooltipTriggerRect.width / 2) >=
+                    tooltipRect.width / 2;
+            if (tooltipFitsAbove || !tooltipFitsBelow) {
+                const top = -tooltipRect.height;
+                if (fitsInMiddle || (!fitsInLeft && !fitsInRight)) {
+                    const left = tooltipTriggerRect.width / 2 - tooltipRect.width / 2;
+                    const leftOverflowsContainer = tooltipTriggerRect.left - tooltipRect.width / 2 < containerRect.left;
+                    // if doesn't fit in either side, set to top center
+                    setTooltipPositionStyle({
+                        top: top,
+                        // if the defined left position is too far to the left, set to the left of the container
+                        left: leftOverflowsContainer
+                            ? containerRect.left - tooltipTriggerRect.left
+                            : left,
+                    });
+                }
+                else if (fitsInLeft) {
+                    setTooltipPositionStyle({
+                        top: top,
+                        right: -(containerRect.right - tooltipTriggerRect.right),
+                    });
+                }
+                else if (fitsInRight) {
+                    setTooltipPositionStyle({
+                        top: top,
+                    });
+                }
+            }
+            else if (tooltipFitsBelow) {
+                const top = tooltipTriggerRect.height;
+                if (fitsInLeft) {
+                    setTooltipPositionStyle({
+                        top: top,
+                        right: -(containerRect.right - tooltipTriggerRect.right),
+                    });
+                }
+                else if (fitsInRight) {
+                    setTooltipPositionStyle({
+                        top: top,
+                    });
+                }
+                else {
+                    const left = -(tooltipRect.width / 2);
+                    const leftOverflowsContainer = tooltipTriggerRect.left - tooltipRect.width / 2 < containerRect.left;
+                    // if doesn't fit in either side, set to top center
+                    setTooltipPositionStyle({
+                        top: top,
+                        // if the defined left position is too far to the left, set to the left of the container
+                        left: leftOverflowsContainer
+                            ? containerRect.left - tooltipTriggerRect.left
+                            : left,
+                    });
+                }
+            }
+        };
+        adjustTooltipPosition();
+        const timeoutId = setTimeout(() => {
+            adjustTooltipPosition();
+        }, 300);
+        window.addEventListener('resize', adjustTooltipPosition);
+        return () => {
+            clearTimeout(timeoutId);
+            window.removeEventListener('resize', adjustTooltipPosition);
+        };
+    }, [
+        containerRef,
+        tooltipContent,
+        threshold,
+        tooltipWidth,
+        displayDelayMs,
+        isTooltipVisible,
+    ]);
+    return (jsxs("div", { className: cn('tw-relative', containerClassName), onMouseMove: (e) => {
+            var _a;
+            if (e.target === tooltipRef.current ||
+                ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                return;
+            }
+            setIsTooltipVisible(true);
+        }, onMouseLeave: () => {
+            setIsTooltipVisible(false);
+        }, children: [jsx("div", { ref: tooltipTriggerRef, className: childrenClassName, children: children }), tooltipContent ? (jsx(Menu, { style: Object.assign({ [CSS_VARS.DISPLAY_DELAYED_DURATION]: `${displayDelayMs}ms` }, tooltipPositionStyle), menuRef: tooltipRef, containerClassName: cn('tw-absolute tw-z-40', 
+                // 'tw-animate-hide peer-hover:tw-animate-display-delayed hover:tw-animate-display-delayed',
+                // we can't hide the tooltip when it's not visible (i.e using display: none)
+                // because we need to gets its rect to calculate the position
+                isTooltipVisible ? 'tw-opacity-100' : 'tw-opacity-0', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
 }
 
 function BoostButton({ boostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, boostIndicatorRef, }) {
     return (jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, containerClassName: "tw-pr-squid-xxs mobile-lg:tw-w-[140px] tw-w-[106.5px]", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-full tw-flex-col tw-justify-between tw-overflow-hidden tw-rounded-squid-m tw-pb-squid-xxs tw-text-grey-300 focus:tw-outline-none", children: [jsx("span", { className: cn('tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
                         'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsx("span", { className: cn('tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
-                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "mobile-lg:-tw-left-[3px] tw-group tw-peer tw-relative -tw-left-[20px] tw-flex tw-h-full tw-w-[140px] tw-items-center tw-justify-between tw-transition-transform group-disabled/boost-toggle:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-relative -tw-left-[20px] tw-flex tw-h-full tw-w-[140px] tw-items-center tw-justify-between tw-transition-transform group-disabled/boost-toggle:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce mobile-lg:-tw-left-[3px]", children: [jsx("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
                                 boxShadow: generateMarkerLines(40),
                             } })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-2px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors group-disabled/boost-toggle:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
                         transitionDuration: `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`,
@@ -13947,7 +14622,11 @@ function MainView() {
                     bgColor: '#627eea',
                     textColor: '#fff',
                     decimals: 18,
-                }, priceImpactPercentage: '0.3', balance: '4.57', address: "so-so.eth" }), jsx(DetailsToolbar, { canToggleBoostMode: true }), jsx(SwapConfiguration, { isFetching: true, direction: "to", chain: {
+                }, priceImpactPercentage: '0.3', balance: '4.57', address: "so-so.eth" }), jsx(DetailsToolbar, { canToggleBoostMode: false, flipButton: {
+                    isDisabled: true,
+                    disabledMessage: 'Not enough USDC to flip the swap',
+                    tooltipDisplayDelayMs: 0,
+                } }), jsx(SwapConfiguration, { isFetching: true, direction: "to", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/avax.svg',
                     bgColor: '#e84142',
                 }, token: {
@@ -13993,25 +14672,27 @@ function LightningIcon({ size = '24', className = '', }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M4.11178 12.2764L8.61178 3.27639C8.69648 3.107 8.86961 3 9.05899 3H17.1169C17.5055 3 17.7456 3.42399 17.5456 3.75725L15.4543 7.24275C15.2544 7.57602 15.4944 8 15.8831 8H20.6868C21.1463 8 21.3625 8.56776 21.0193 8.87338L7.37702 21.0236C6.99619 21.3628 6.41153 20.981 6.56886 20.4959L8.78779 13.6543C8.89255 13.3312 8.65175 13 8.31218 13H4.55899C4.1873 13 3.94556 12.6088 4.11178 12.2764Z", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 
-function SwapDetailsView({ isLoading }) {
+function SwapDetailsView({ isLoading, canToggleBoostMode = true, }) {
     const [isModalOpen, setIsModalOpen] = useState(true);
     return (jsx(Fragment, { children: jsxs(Modal, { isOpen: isModalOpen, onBackdropClick: () => {
                 setIsModalOpen(false);
-            }, children: [jsxs(ModalContent, { children: [jsx(Settings, {}), jsxs("ul", { className: "tw-flex tw-flex-col tw-items-start tw-gap-squid-xxs tw-self-stretch tw-py-squid-xs", children: [jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ClockOutlineIcon, {}), label: "Estimated time to complete", detail: "~20s" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowBottomTopIcon, {}), label: "Exchange rate", detail: "1 ETH = 4,031.05 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowWallDownIcon, {}), label: "Receive minimum", detail: "750.5 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(GasIcon, {}), label: "Cross-chain gas fees", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.02534 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$9.92" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReorderIcon, {}), label: "Expected gas refund", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "-0.06336 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "-$2.48" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReceiptBillIcon, {}), label: "Total fee", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.0177 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$7.43" })] }) })] }), jsx(InfoBox, { icon: jsx(SnapIcon, {}), title: "Squid\u2019s price commitment", description: "In case of market price fluctuating significantly, your transaction may revert and you will receive axlUSDC on the destination chain instead." })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Close", onClick: () => {
+            }, children: [jsxs(ModalContent, { children: [jsx(Settings, { canToggleBoostMode: canToggleBoostMode }), jsxs("ul", { className: "tw-flex tw-flex-col tw-items-start tw-gap-squid-xxs tw-self-stretch tw-py-squid-xs", children: [jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ClockOutlineIcon, {}), label: "Estimated time to complete", detail: "~20s" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowBottomTopIcon, {}), label: "Exchange rate", detail: "1 ETH = 4,031.05 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowWallDownIcon, {}), label: "Receive minimum", detail: "750.5 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(GasIcon, {}), label: "Cross-chain gas fees", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.02534 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$9.92" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReorderIcon, {}), label: "Expected gas refund", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "-0.06336 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "-$2.48" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReceiptBillIcon, {}), label: "Total fee", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.0177 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$7.43" })] }) })] }), jsx(InfoBox, { icon: jsx(SnapIcon, {}), title: "Squid\u2019s price commitment", description: "In case of market price fluctuating significantly, your transaction may revert and you will receive axlUSDC on the destination chain instead." })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Close", onClick: () => {
                         setIsModalOpen(false);
                     } })] }) }));
 }
-function Settings() {
+function Settings({ canToggleBoostMode }) {
     return (jsx("div", { className: "tw-flex tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs tw-self-stretch tw-py-squid-xxs", children: jsx(SettingsItem, { icon: jsx(LightningIcon, { className: "tw-text-grey-500" }), label: "Boost", control: {
                 type: 'switch',
                 checked: false,
+                disabled: !canToggleBoostMode,
                 onChange: console.log,
-                tooltip: {
-                    tooltipWidth: 'max',
-                    containerClassName: 'tw-h-[30px]',
-                    tooltipClassName: 'tw-left-[-14px]',
-                    tooltipContent: 'Boost not supported for this route',
-                },
+                tooltip: canToggleBoostMode
+                    ? undefined
+                    : {
+                        tooltipWidth: 'max',
+                        containerClassName: 'tw-h-[30px]',
+                        tooltipContent: 'Boost not supported for this route',
+                    },
             }, transparent: true, helpTooltip: {
                 tooltipWidth: 'max',
                 tooltipClassName: 'tw-left-[15px]',
@@ -49372,4 +50053,4 @@ function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light'
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-h-screen tw-font-geist mobile-lg:tw-h-auto", 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, 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, Toast, 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, useMediaQuery };
+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, MEDIA_QUERIES, 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, Toast, 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, useMediaQuery };