@0xsquid/ui 0.15.0 → 0.15.2

package/dist/cjs/index.js

@@ -2551,24 +2551,6 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 const cn = (...inputs) => {
     return twMerge(clsx(inputs));
 };
-function debounce(func, delay) {
-    let timeoutId;
-    const debounced = function (...args) {
-        // @ts-expect-error - 'this' implicitly has type 'any' because it does not have a type annotation.
-        const context = this;
-        const later = () => {
-            timeoutId = null;
-            func.apply(context, args);
-        };
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(later, delay);
-    };
-    debounced.cancel = () => {
-        clearTimeout(timeoutId);
-        timeoutId = null;
-    };
-    return debounced;
-}
 const formatTime = (elapsedTime) => {
     const totalSeconds = Math.floor(elapsedTime / 1000);
     const minutes = Math.floor(totalSeconds / 60);
@@ -5818,43 +5800,591 @@ function toFixedPoint(str, e, z) {
 
 var BigNumber = clone();
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+
+function isObject$2(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+var isObject_1 = isObject$2;
+
+/** Detect free variable `global` from Node.js. */
+
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+var _freeGlobal = freeGlobal$1;
+
+var freeGlobal = _freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$2 = freeGlobal || freeSelf || Function('return this')();
+
+var _root = root$2;
+
+var root$1 = _root;
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now$1 = function() {
+  return root$1.Date.now();
+};
+
+var now_1 = now$1;
+
+/** Used to match a single whitespace character. */
+
+var reWhitespace = /\s/;
+
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex$1(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+var _trimmedEndIndex = trimmedEndIndex$1;
+
+var trimmedEndIndex = _trimmedEndIndex;
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim$1(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
+var _baseTrim = baseTrim$1;
+
+var root = _root;
+
+/** Built-in value references. */
+var Symbol$3 = root.Symbol;
+
+var _Symbol = Symbol$3;
+
+var Symbol$2 = _Symbol;
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$1.toString;
+
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
+
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+
+var _getRawTag = getRawTag$1;
+
+/** Used for built-in method references. */
+
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
+
+var _objectToString = objectToString$1;
+
+var Symbol$1 = _Symbol,
+    getRawTag = _getRawTag,
+    objectToString = _objectToString;
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag$1(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+var _baseGetTag = baseGetTag$1;
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+
+function isObjectLike$1(value) {
+  return value != null && typeof value == 'object';
+}
+
+var isObjectLike_1 = isObjectLike$1;
+
+var baseGetTag = _baseGetTag,
+    isObjectLike = isObjectLike_1;
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol$1(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && baseGetTag(value) == symbolTag);
+}
+
+var isSymbol_1 = isSymbol$1;
+
+var baseTrim = _baseTrim,
+    isObject$1 = isObject_1,
+    isSymbol = isSymbol_1;
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber$1(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject$1(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject$1(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+var toNumber_1 = toNumber$1;
+
+var isObject = isObject_1,
+    now = now_1,
+    toNumber = toNumber_1;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+
+  function debounced() {
+    var time = now(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+var debounce_1 = debounce;
+
+var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
+
 /**
  * Convert token amount to USD
  * @param {string|number} tokenAmount - The amount of tokens
  * @param {string|number} tokenPrice - The price of one token in USD
  * @returns {BigNumber} - The equivalent amount in USD
  */
-function convertTokenAmountToUSD(tokenAmount, tokenPrice) {
+function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 4) {
     if (!tokenAmount || !tokenPrice)
-        return '0';
+        return '';
     const amount = new BigNumber(tokenAmount);
     const price = new BigNumber(tokenPrice);
-    return amount.multipliedBy(price).decimalPlaces(4).toString();
+    return amount.multipliedBy(price).decimalPlaces(maxDecimals).toString();
 }
 /**
  * Convert USD to token amount
  * @param {string|number} usdAmount - The amount in USD
  * @param {string|number} tokenPrice - The price of one token in USD
+ * @param {number} maxDecimals - The maximum number of decimals
  * @returns {BigNumber} - The equivalent amount of tokens
  */
-function convertUSDToTokenAmount(usdAmount, tokenPrice) {
-    if (!usdAmount || !tokenPrice)
+function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
+    if (!usdAmount || !tokenPrice || !maxDecimals)
         return '0';
     const amount = new BigNumber(usdAmount);
     const price = new BigNumber(tokenPrice);
-    return amount.dividedBy(price).toString();
+    return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
 }
 const INTL_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
     minimumFractionDigits: 0,
     maximumFractionDigits: 5,
 });
 /**
- * Formats a number to USD
+ * Formats a number to the en-US number format
  *
- * @param amount - The amount to format
- * @returns The formatted currency string
+ * @param amount - The number to format
+ * @returns The formatted string
  */
-function formatUSD(amount) {
+function formatAmount(amount) {
     return INTL_NUMBER_FORMATTER.format(amount);
 }
 function trimExtraDecimals(value, maxDecimals) {
@@ -5862,7 +6392,7 @@ function trimExtraDecimals(value, maxDecimals) {
     const split = value.split('.');
     if (split.length > 1) {
         const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
-        if (decimals.length > maxDecimals) {
+        if (maxDecimals && decimals.length > maxDecimals) {
             const newValue = `${split[0]}.${decimals.slice(0, maxDecimals)}`;
             return newValue;
         }
@@ -5870,259 +6400,17 @@ function trimExtraDecimals(value, maxDecimals) {
     return value;
 }
 
-const NumericInput = (_a) => {
-    var _b;
-    var { onParsedValueChanged, initialValue = '', forcedUpdateValue, maxDecimals, balance = '0', tokenPrice = 0, numericInputMode } = _a, props = __rest(_a, ["onParsedValueChanged", "initialValue", "forcedUpdateValue", "maxDecimals", "balance", "tokenPrice", "numericInputMode"]);
-    const [inputValue, setInputValue] = React.useState(initialValue);
-    // Probably a better way to handle this
-    // This was introduce to handle the "MAX" button setting an amount
-    // Other than that, this component is only sending value to the exterior
-    // Without this, we were losing inputs such as ".05" that were forced parsed to "0.05" after debounce
-    React.useEffect(() => {
-        if (forcedUpdateValue && forcedUpdateValue !== '0') {
-            setInputValue(forcedUpdateValue);
-        }
-    }, [forcedUpdateValue]);
-    /**
-     * Get the number of decimals of inputValue
-     * If there are more decimals than the maxDecimals
-     * remove the extra decimals
-     */
-    React.useEffect(() => {
-        var _a;
-        const split = inputValue.split('.');
-        if (split.length > 1) {
-            const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
-            if (maxDecimals && decimals.length > maxDecimals) {
-                const newValue = `${split[0]}.${decimals.slice(0, maxDecimals)}`;
-                setInputValue(newValue);
-                onParsedValueChanged(newValue);
-            }
-        }
-    }, [maxDecimals]);
-    const debouncePriceChanged = (value = '') => {
-        if (value.endsWith('.'))
-            return;
-        onParsedValueChanged(value);
-    };
-    // useCallback to memoizes the debounce function, prevents recreating it
-    const debouncePriceUpdate = React.useCallback(debounce(debouncePriceChanged, 700), []);
-    const handlePriceChanged = (event) => {
-        var _a;
-        try {
-            const formattedInput = event.currentTarget.value
-                .replace(/[^0-9\.\,%]/g, '')
-                .replace(',', '.');
-            if (formattedInput.includes('%')) {
-                let cleanedInput = formattedInput;
-                // remove duplicates & always add % at the end
-                cleanedInput = formattedInput.replaceAll('%', '').concat('%');
-                setInputValue(cleanedInput);
-                debouncePriceUpdate.cancel();
-                return;
-            }
-            // This is to prevent the user from typing more decimals than the decimals attribute of the token
-            if (maxDecimals !== undefined) {
-                const split = formattedInput.split('.');
-                if (split.length > 1) {
-                    const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
-                    if (decimals.length > maxDecimals) {
-                        // Don't update anything
-                        return;
-                    }
-                }
-            }
-            // Means the user is currently typing and will add decimal, no need to fetch or parse
-            // example input: 0.00
-            const isTypingDecimals = (formattedInput.includes('.') && formattedInput.endsWith('0')) ||
-                formattedInput.endsWith('.') ||
-                (formattedInput === '0' && (inputValue === '' || inputValue === '0'));
-            // if input includes at least one character different than `0` (zero), `.` (dot), or `,` (comma)
-            // means that user is typing a valid amount, for example: 1.02 or 0.005
-            // if so, then update the input value and fetch the price
-            if (/[^0,.]/.test(formattedInput)) {
-                setInputValue(formattedInput);
-                debouncePriceUpdate(formattedInput);
-            }
-            else if (isTypingDecimals) {
-                setInputValue(formattedInput);
-            }
-            else if (!isNaN(+formattedInput)) {
-                setInputValue(formattedInput.toString());
-                debouncePriceUpdate(formattedInput.toString());
-                // onParsedValueChanged(formattedInput.toString());
-            }
-            else {
-                setInputValue('');
-            }
-            if (numericInputMode === 'price' && !isTypingDecimals) {
-                const usdAmount = Number(formattedInput);
-                if (tokenPrice === 0 || usdAmount === 0) {
-                    setInputValue('');
-                    onParsedValueChanged('');
-                }
-                else if (usdAmount > 0) {
-                    const tokenAmount = convertUSDToTokenAmount(usdAmount, tokenPrice);
-                    setInputValue(usdAmount.toString());
-                    debouncePriceUpdate(tokenAmount);
-                    return;
-                }
-            }
-        }
-        catch (error) {
-            setInputValue('');
-        }
-    };
-    const handleSubmit = (event) => {
-        event.preventDefault();
-        if (inputValue.includes('%')) {
-            const percentage = Number(inputValue.replace('%', ''));
-            // If the percentage is greater than 100, set it to 100
-            const formattedPercentage = percentage > 100 ? 100 : percentage;
-            const valueByPercentage = Number(balance) * (formattedPercentage / 100);
-            // If the value is 0, we want to show 0, not 0.0000
-            const formattedValue = valueByPercentage === 0 ? '0' : valueByPercentage.toFixed(4);
-            setInputValue(formattedValue);
-            onParsedValueChanged(formattedValue);
-        }
-    };
-    return (jsxRuntime.jsxs("form", { className: "tw-relative tw-px-squid-m tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular", onSubmit: handleSubmit, children: [numericInputMode === 'price' && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-[30px] tw-top-[11px] tw-leading-[43px] tw-text-grey-600", children: "$" })), jsxRuntime.jsx("input", Object.assign({}, props, { onChange: handlePriceChanged, value: inputValue, type: "string", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : '0', className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', numericInputMode === 'price' && 'tw-pl-[33px]') }))] }));
-};
-
-// font size, line height, and letter spacing classes
-const textClassMap = {
-    small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
-    medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
-    large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
-};
-function HeadingText({ children, bold, size }) {
-    const fontWeightClass = bold
-        ? 'tw-font-heading-bold'
-        : 'tw-font-heading-regular';
-    return (jsxRuntime.jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
+function MaxIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_41_20801)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_41_20801", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
 
-function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsx("input", { min: min !== null && min !== void 0 ? min : 0, max: max !== null && max !== void 0 ? max : 99, step: hasDecimals ? 0.1 : 1, placeholder: "0", type: "number", onChange: (e) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(Number(e.target.value));
-                }, className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-bg-transparent tw-p-squid-xs tw-text-caption !tw-font-medium tw-leading-[10px] tw-text-grey-300 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', type === 'percentage'
-                    ? 'tw-w-[84px] tw-pr-[52px] tw-text-right'
-                    : 'tw-w-[80px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsxRuntime.jsx(PercentageDecorator, {}), type === 'amount' && jsxRuntime.jsx(AmountDecorator, {})] }));
-}
-function PercentageDecorator() {
-    return (jsxRuntime.jsxs("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: [jsxRuntime.jsx(CaptionText, { className: "tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "%" }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
+function SwapInputsIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
-function AmountDecorator() {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-absolute tw-left-squid-xs tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "$" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) })] }));
-}
-
-const switchSizeClassMap = {
-    small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
-    large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
-};
-const switchKnobSizeClassMap = {
-    small: 'tw-w-4 tw-h-4',
-    large: 'tw-w-6 tw-h-6',
-};
-const switchKnobCheckedClassMap = {
-    large: {
-        checked: 'tw-left-[26px]',
-        unchecked: 'tw-left-[2px]',
-    },
-    small: {
-        checked: 'tw-left-[17px]',
-        unchecked: 'tw-left-[1px]',
-    },
-};
-function Switch({ checked = false, onChange, size, disabled = false, }) {
-    return (
-    // Switch container
-    jsxRuntime.jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin tw-transition-colors', 
-        // size styles
-        switchSizeClassMap[size], 
-        // checked styles
-        checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800', 
-        // disabled styles
-        disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'), children: [jsxRuntime.jsx("input", { disabled: disabled, checked: checked, onChange: disabled ? undefined : (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsxRuntime.jsx("span", { style: {
-                    filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
-                }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all', 
-                // size styles
-                switchKnobSizeClassMap[size], 
-                // checked styles
-                switchKnobCheckedClassMap[size][checked ? 'checked' : 'unchecked'], checked
-                    ? 'group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
-                    : 'tw-bg-grey-500') })] }));
-}
-
-const borderRadiusClassMap = {
-    sm: 'tw-rounded-squid-s',
-    lg: 'tw-rounded-squid-m',
-};
-function Menu(_a) {
-    var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg', menuRef } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded", "menuRef"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxRuntime.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: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20 tw-max-w-full tw-text-caption", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
-}
-
-const tooltipWidthClassMap = {
-    max: 'tw-w-max',
-    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',
-};
-function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, displayDelayMs = 0, }) {
-    return (jsxRuntime.jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsxRuntime.jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsxRuntime.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 BoostButton({ boostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, boostIndicatorRef, }) {
-    return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] 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: [jsxRuntime.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') }), jsxRuntime.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') }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-w-full 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: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center group-disabled/boost-toggle:tw-grayscale", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled/boost-toggle:tw-grayscale", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.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),
-                            } })] }), jsxRuntime.jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] 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`,
-                    } })] }) }));
-}
-function generateMarkerLines(count) {
-    const halfCount = Math.ceil(count / 2);
-    const rightShadows = Array.from({ length: halfCount }, (_, index) => {
-        return `-${(index + 1) * 6}px 0 currentColor`;
-    });
-    const leftShadows = Array.from({ length: halfCount }, (_, index) => {
-        return `${(index + 1) * 6}px 0 currentColor`;
-    });
-    const allShadows = [...rightShadows, ...leftShadows];
-    return allShadows.join(', ');
-}
-
-function Chip(_a) {
-    var { label, icon } = _a, props = __rest(_a, ["label", "icon"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsxRuntime.jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
-}
-
-function EthereumIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M9.99866 2.91669L9.99866 12.6994L14.471 10.1298L9.99866 2.91669Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99872 2.91669L5.52637 10.1298L9.99872 12.6995V8.15387V2.91669Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99866 13.5226V17.0802L14.4737 10.9542L9.99866 13.5226Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99872 17.0801V13.5225L5.52637 10.9542L9.99872 17.0801Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99866 12.6994L14.4709 10.1298L9.99866 8.15387V12.6994Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M5.52637 10.1298L9.99865 12.6994V8.15387L5.52637 10.1298Z", fill: "currentColor" })] }));
-}
-
-function FeeButton(_a) {
-    var { feeInUsd = '0', chipLabel = 'Fee', className } = _a, props = __rest(_a, ["feeInUsd", "chipLabel", "className"]);
-    return (jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsxRuntime.jsx(Chip, { label: chipLabel }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: feeInUsd })] })] })));
-}
-
-function SettingsButton({ label, isSelected = false, onClick, }) {
-    return (jsxRuntime.jsx("button", { onClick: onClick, className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
+
+function Chip(_a) {
+    var { label, icon } = _a, props = __rest(_a, ["label", "icon"]);
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsxRuntime.jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
 }
 
 function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, boostTooltipDisplayDelayMs = 0, }) {
@@ -6147,6 +6435,15 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessa
                         : 'tw-bg-status-positive') })] }) }));
 }
 
+function EthereumIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M9.99866 2.91669L9.99866 12.6994L14.471 10.1298L9.99866 2.91669Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99872 2.91669L5.52637 10.1298L9.99872 12.6995V8.15387V2.91669Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99866 13.5226V17.0802L14.4737 10.9542L9.99866 13.5226Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99872 17.0801V13.5225L5.52637 10.9542L9.99872 17.0801Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99866 12.6994L14.4709 10.1298L9.99866 8.15387V12.6994Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M5.52637 10.1298L9.99865 12.6994V8.15387L5.52637 10.1298Z", fill: "currentColor" })] }));
+}
+
+function FeeButton(_a) {
+    var { feeInUsd = '0', chipLabel = 'Fee', className } = _a, props = __rest(_a, ["feeInUsd", "chipLabel", "className"]);
+    return (jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsxRuntime.jsx(Chip, { label: chipLabel }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: feeInUsd })] })] })));
+}
+
 function EmojiSadIcon({ 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", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
 }
@@ -6154,6 +6451,19 @@ 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", { "fill-rule": "evenodd", "clip-rule": "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" }) }));
 }
 
+// font size, line height, and letter spacing classes
+const textClassMap = {
+    small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
+    medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
+    large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
+};
+function HeadingText({ children, bold, size }) {
+    const fontWeightClass = bold
+        ? 'tw-font-heading-bold'
+        : 'tw-font-heading-regular';
+    return (jsxRuntime.jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
+}
+
 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 })] }));
 }
@@ -6456,6 +6766,15 @@ function SwapStepItem({ descriptionBlocks, showStepSeparator = false, link, stat
                         }) })] }), showStepSeparator && (jsxRuntime.jsx("span", { className: cn(separatorClassMap[status]), style: transitionStyle, children: jsxRuntime.jsx(SwapStepSeparator, {}) }))] }));
 }
 
+const borderRadiusClassMap = {
+    sm: 'tw-rounded-squid-s',
+    lg: 'tw-rounded-squid-m',
+};
+function Menu(_a) {
+    var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg', menuRef } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded", "menuRef"]);
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxRuntime.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: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20 tw-max-w-full tw-text-caption", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute 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, }) {
     return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: !isHidden && (jsxRuntime.jsx("ul", { className: cn('tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs', listClassName), children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item), item.label))) })) }) }));
 }
@@ -6538,62 +6857,21 @@ function LogoContainer({ children }) {
     return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
 }
 
-function MaxIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_41_20801)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_41_20801", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
-}
-
-function SwapInputsIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
-}
-
-const buttonClassName = 'tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs';
-const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
-function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount: _forcedAmount, balance = '0', tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage = 5, emptyAddressLabel = 'Connect wallet', }) {
+function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, }) {
     var _a, _b;
-    const [inputMode, setInputMode] = React.useState('token');
-    const [tokenAmount, setTokenAmount] = React.useState('0');
-    const forcedAmount = React.useMemo(() => {
-        var _a, _b;
-        if (_forcedAmount) {
-            return _forcedAmount;
-        }
-        if (inputMode === 'token') {
-            const amountLimitedToMaxDecimals = trimExtraDecimals(amount !== null && amount !== void 0 ? amount : '0', (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18);
-            return amountLimitedToMaxDecimals;
-        }
-        else if (inputMode === 'price') {
-            const tokenAmountToUsd = convertTokenAmountToUSD(amount || 0, tokenPrice);
-            const amountLimitedToMaxDecimals = trimExtraDecimals(tokenAmountToUsd, (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18);
-            return amountLimitedToMaxDecimals;
-        }
-        return '0';
-    }, [_forcedAmount, inputMode, amount, tokenPrice, token === null || token === void 0 ? void 0 : token.decimals]);
-    const swapAmountUsd = React.useMemo(() => {
-        if (tokenPrice && forcedAmount) {
-            return formatUSD(convertTokenAmountToUSD(forcedAmount, tokenPrice));
-        }
-        return '0';
-    }, [forcedAmount, tokenPrice]);
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
-        ? 'tw-text-status-negative'
-        : 'tw-text-grey-300';
-    const isBalanceChipInteractive = !!onBalanceButtonClick;
-    const BalanceChipTag = isBalanceChipInteractive ? 'button' : 'div';
-    const handleSwapAmountButtonClick = React.useCallback(() => {
-        if (inputMode === 'token') {
-            setInputMode('price');
-        }
-        else {
-            setInputMode('token');
-        }
-    }, [inputMode]);
-    const tokenAmountFormatted = React.useMemo(() => {
-        return formatUSD(tokenAmount || 0);
-    }, [tokenAmount]);
-    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-[480px] tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), direction === 'from' ? (jsxRuntime.jsx(NumericInput, { balance: balance, tokenPrice: tokenPrice, forcedUpdateValue: forcedAmount, initialValue: amount, maxDecimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18, onParsedValueChanged: (value) => {
-                    setTokenAmount(value);
+    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-[480px] tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { token: {
+                    decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
+                    symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : '',
+                    price: tokenPrice,
+                }, onAmountChange: (value) => {
                     onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value);
-                }, numericInputMode: inputMode })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]', isFetching && 'tw-opacity-50'), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500', isFetching && 'tw-opacity-50'), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs("button", { onClick: handleSwapAmountButtonClick, className: cn(buttonClassName, interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), inputMode === 'token' ? (jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [jsxRuntime.jsx(CaptionText, { children: tokenAmountFormatted }), ' ', jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isBalanceChipInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs(CaptionText, { children: [balance, " ", token.symbol] }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
+                }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
+                    token: '0.001',
+                    usd: '0.01',
+                }, isLoading: isFetching, maxDecimals: {
+                    token: 4,
+                    usd: 2,
+                }, priceImpactPercentage: priceImpactPercentage, showDetails: !!(token === null || token === void 0 ? void 0 : token.iconUrl), direction: direction, forcedAmount: amount, amountUsd: amountUsd })] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -6674,6 +6952,250 @@ function TokenPair({ firstToken, secondToken }) {
                 }, children: [jsxRuntime.jsx("img", { className: "tw-ml-[1px] tw-aspect-square tw-w-10", src: firstToken.imageUrl }), jsxRuntime.jsx("img", { className: "tw-mr-[1px] tw-aspect-square tw-w-10", src: secondToken.imageUrl })] })] }));
 }
 
+const buttonClassName = 'tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs';
+// checks that the value includes at least one character different than `0` (zero), or `.` (dot)
+const RegExpNonZeroValue = /[^0.]/;
+const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
+var InputMode;
+(function (InputMode) {
+    InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
+    InputMode[InputMode["USD"] = 1] = "USD";
+})(InputMode || (InputMode = {}));
+function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxDecimals = {
+    token: 4,
+    usd: 2,
+}, formatIfVerySmall = {
+    token: '0.001',
+    usd: '0.01',
+}, showDetails = true, isLoading = false, direction, amountUsd, }) {
+    var _a;
+    const [inputValue, setInputValue] = React.useState('');
+    const [inputMode, setInputMode] = React.useState(InputMode.TOKEN);
+    React.useEffect(() => {
+        if (forcedAmount !== undefined) {
+            updateInputValue(forcedAmount);
+        }
+    }, [forcedAmount]);
+    const updateInputValue = React.useCallback((newValue) => {
+        const safeNewValue = trimExtraDecimals(newValue, token.decimals);
+        const formattedAmount = inputMode === InputMode.TOKEN
+            ? safeNewValue
+            : convertTokenAmountToUSD(safeNewValue, token.price);
+        setInputValue(formattedAmount);
+    }, [inputMode, token.price, direction, token.decimals]);
+    const onBalanceButtonClick = React.useCallback(() => {
+        if (direction === 'from') {
+            updateInputValue(balance);
+            onAmountChange(balance);
+        }
+    }, [balance, direction, onAmountChange, updateInputValue]);
+    const onAmountChangeDebounced = React.useCallback(debounce$1(onAmountChange, 1000), [
+        onAmountChange,
+    ]);
+    const handleInputChange = (e) => {
+        let value = e.target.value.replace(/,/g, '.'); // Replace commas with dots
+        const maxDecimalsForInputType = inputMode === InputMode.TOKEN ? token.decimals : maxDecimals.usd;
+        const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
+        if (isValidAmount) {
+            setInputValue(value);
+            // Means the user is currently typing and will add decimal, no need to fetch or parse
+            // example inputs: 0.00, 0., 0, 0.0, 50. 13.00
+            const isTypingDecimals = (value.includes('.') && value.endsWith('0')) || value.endsWith('.');
+            if (isTypingDecimals) {
+                onAmountChangeDebounced.cancel();
+            }
+            else {
+                const { tokenRawAmount } = getRawAmounts(value);
+                onAmountChangeDebounced(tokenRawAmount);
+            }
+        }
+    };
+    const handleSwitchInputMode = () => {
+        if (inputValue !== '') {
+            const convertedAmount = inputMode === InputMode.TOKEN
+                ? convertTokenAmountToUSD(inputValue, token.price)
+                : convertUSDToTokenAmount(inputValue, token.price, token.decimals);
+            setInputValue(convertedAmount);
+        }
+        setInputMode((prevMode) => prevMode === InputMode.TOKEN ? InputMode.USD : InputMode.TOKEN);
+    };
+    const getRawAmounts = (amount) => {
+        if (amount === '')
+            return {
+                usdRawAmount: '',
+                tokenRawAmount: '',
+                isTokenAmountVerySmall: false,
+                isUsdAmountVerySmall: false,
+            };
+        if (inputMode === InputMode.TOKEN) {
+            const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxDecimals.usd);
+            const tokenRawAmount = amount;
+            const isTokenAmountVerySmall = !!tokenRawAmount &&
+                RegExpNonZeroValue.test(tokenRawAmount) &&
+                BigNumber(tokenRawAmount).isLessThan(formatIfVerySmall.token);
+            const isUsdAmountVerySmall = (!!usdRawAmount &&
+                RegExpNonZeroValue.test(usdRawAmount) &&
+                BigNumber(usdRawAmount).isLessThan(formatIfVerySmall.usd)) ||
+                (usdRawAmount === '0' && RegExpNonZeroValue.test(tokenRawAmount));
+            return {
+                tokenRawAmount,
+                usdRawAmount,
+                isTokenAmountVerySmall,
+                isUsdAmountVerySmall,
+            };
+        }
+        else {
+            const tokenRawAmount = convertUSDToTokenAmount(amount, token.price, token.decimals);
+            const usdRawAmount = amount;
+            const isUsdAmountVerySmall = (!!usdRawAmount &&
+                RegExpNonZeroValue.test(usdRawAmount) &&
+                BigNumber(usdRawAmount).isLessThan(formatIfVerySmall.usd)) ||
+                (usdRawAmount === '0' && RegExpNonZeroValue.test(tokenRawAmount));
+            const isTokenAmountVerySmall = !!tokenRawAmount &&
+                RegExpNonZeroValue.test(tokenRawAmount) &&
+                BigNumber(tokenRawAmount).isLessThan(formatIfVerySmall.token);
+            return {
+                tokenRawAmount,
+                usdRawAmount,
+                isTokenAmountVerySmall,
+                isUsdAmountVerySmall,
+            };
+        }
+    };
+    const { isTokenAmountVerySmall, isUsdAmountVerySmall } = getRawAmounts(inputValue);
+    const amountFormatted = React.useMemo(() => {
+        if (inputValue === '')
+            return '0';
+        if (inputMode === InputMode.TOKEN) {
+            if (direction === 'from') {
+                return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxDecimals.usd));
+            }
+            else {
+                return formatAmount(amountUsd !== null && amountUsd !== void 0 ? amountUsd : '0');
+            }
+        }
+        else {
+            return formatAmount(convertUSDToTokenAmount(inputValue, token.price, maxDecimals.token));
+        }
+    }, [inputValue, inputMode, token.price, maxDecimals, direction, amountUsd]);
+    const isInteractive = direction === 'from';
+    const AmountChip = isInteractive ? 'button' : 'div';
+    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
+        ? 'tw-text-status-negative'
+        : 'tw-text-grey-300';
+    const BalanceChipTag = isInteractive ? 'button' : 'div';
+    const balanceFormatted = React.useMemo(() => {
+        return formatAmount(balance !== null && balance !== void 0 ? balance : '0');
+    }, [balance]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive ? (jsxRuntime.jsxs("form", { className: "tw-relative tw-px-squid-m tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular", onSubmit: (e) => {
+                    e.preventDefault();
+                }, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-[30px] tw-top-[11px] tw-leading-[43px] tw-text-grey-600", children: "$" })), jsxRuntime.jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]', isLoading && 'tw-opacity-50'), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: inputValue }) }) })), !showDetails ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500', isLoading && 'tw-opacity-50'), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
+                                                ? formatIfVerySmall.token
+                                                : amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
+                                            ? formatIfVerySmall.token
+                                            : amountFormatted }), ' ', jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
+}
+
+function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }) {
+    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsx("input", { min: min !== null && min !== void 0 ? min : 0, max: max !== null && max !== void 0 ? max : 99, step: hasDecimals ? 0.1 : 1, placeholder: "0", type: "number", onChange: (e) => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(Number(e.target.value));
+                }, className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-bg-transparent tw-p-squid-xs tw-text-caption !tw-font-medium tw-leading-[10px] tw-text-grey-300 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', type === 'percentage'
+                    ? 'tw-w-[84px] tw-pr-[52px] tw-text-right'
+                    : 'tw-w-[80px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsxRuntime.jsx(PercentageDecorator, {}), type === 'amount' && jsxRuntime.jsx(AmountDecorator, {})] }));
+}
+function PercentageDecorator() {
+    return (jsxRuntime.jsxs("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: [jsxRuntime.jsx(CaptionText, { className: "tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "%" }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
+}
+function AmountDecorator() {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-absolute tw-left-squid-xs tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "$" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) })] }));
+}
+
+const switchSizeClassMap = {
+    small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
+    large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
+};
+const switchKnobSizeClassMap = {
+    small: 'tw-w-4 tw-h-4',
+    large: 'tw-w-6 tw-h-6',
+};
+const switchKnobCheckedClassMap = {
+    large: {
+        checked: 'tw-left-[26px]',
+        unchecked: 'tw-left-[2px]',
+    },
+    small: {
+        checked: 'tw-left-[17px]',
+        unchecked: 'tw-left-[1px]',
+    },
+};
+function Switch({ checked = false, onChange, size, disabled = false, }) {
+    return (
+    // Switch container
+    jsxRuntime.jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin tw-transition-colors', 
+        // size styles
+        switchSizeClassMap[size], 
+        // checked styles
+        checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800', 
+        // disabled styles
+        disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'), children: [jsxRuntime.jsx("input", { disabled: disabled, checked: checked, onChange: disabled ? undefined : (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsxRuntime.jsx("span", { style: {
+                    filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
+                }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all', 
+                // size styles
+                switchKnobSizeClassMap[size], 
+                // checked styles
+                switchKnobCheckedClassMap[size][checked ? 'checked' : 'unchecked'], checked
+                    ? 'group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
+                    : 'tw-bg-grey-500') })] }));
+}
+
+const tooltipWidthClassMap = {
+    max: 'tw-w-max',
+    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',
+};
+function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, displayDelayMs = 0, }) {
+    return (jsxRuntime.jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsxRuntime.jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsxRuntime.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 BoostButton({ boostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, boostIndicatorRef, }) {
+    return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] 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: [jsxRuntime.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') }), jsxRuntime.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') }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-w-full 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: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center group-disabled/boost-toggle:tw-grayscale", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled/boost-toggle:tw-grayscale", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.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),
+                            } })] }), jsxRuntime.jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] 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`,
+                    } })] }) }));
+}
+function generateMarkerLines(count) {
+    const halfCount = Math.ceil(count / 2);
+    const rightShadows = Array.from({ length: halfCount }, (_, index) => {
+        return `-${(index + 1) * 6}px 0 currentColor`;
+    });
+    const leftShadows = Array.from({ length: halfCount }, (_, index) => {
+        return `${(index + 1) * 6}px 0 currentColor`;
+    });
+    const allShadows = [...rightShadows, ...leftShadows];
+    return allShadows.join(', ');
+}
+
+function SettingsButton({ label, isSelected = false, onClick, }) {
+    return (jsxRuntime.jsx("button", { onClick: onClick, className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
+}
+
 var v$5 = "5.10.0";
 var fr$5 = 25;
 var ip$5 = 0;