@blockend/widget 1.0.31 → 1.0.32

package/dist/AllRoutes-Bdi5ZW8W.js

@@ -1,2604 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import React__default, { useState, useEffect } from "react";
-import { S as SortUp, a as SortDown } from "./sortDown-cDA6MpOw.js";
-import { t as truncate } from "./truncate-DSxFWEga.js";
-import { g as generateUtilityClasses, d as useDefaultProps, c as clsx, s as styled, a as composeClasses, e as useEnhancedEffect, v as useSlotProps, o as useTheme, q as useEventCallback, t as ownerDocument, b as refType, i as images, j as fixString, f as formatNumber } from "./useRegisterError-W_UfecIN.js";
-import { g as generateUtilityClass, _ as _objectWithoutPropertiesLoose, b as _extends, d as capitalize, p as process$1, P as PropTypes, m as useThemeProps, u as useStore } from "./index-D5OnT-__.js";
-import { S as Step, C as ClockIcon, G as Gas } from "./clockIcon-jSNFFrLy.js";
-import { T as Tooltip } from "./Tooltip-D8YjOOKU.js";
-import { O as OutputValueComp } from "./index-CF9p4S_X.js";
-import { B as Box } from "./Box-e4gA-y_H.js";
-import { c as createSvgIcon, d as debounce, r as reactIsExports } from "./index-Cz5Dosd2.js";
-import { b as useRtl } from "./Grow-B4K-I-E-.js";
-import { B as ButtonBase, o as ownerWindow } from "./getChainIds-6iugk2h0.js";
-import { u as unsupportedProp } from "./unsupportedProp-DkeDzLfM.js";
-let cachedType;
-function detectScrollType() {
-  if (cachedType) {
-    return cachedType;
-  }
-  const dummy = document.createElement("div");
-  const container = document.createElement("div");
-  container.style.width = "10px";
-  container.style.height = "1px";
-  dummy.appendChild(container);
-  dummy.dir = "rtl";
-  dummy.style.fontSize = "14px";
-  dummy.style.width = "4px";
-  dummy.style.height = "1px";
-  dummy.style.position = "absolute";
-  dummy.style.top = "-1000px";
-  dummy.style.overflow = "scroll";
-  document.body.appendChild(dummy);
-  cachedType = "reverse";
-  if (dummy.scrollLeft > 0) {
-    cachedType = "default";
-  } else {
-    dummy.scrollLeft = 1;
-    if (dummy.scrollLeft === 0) {
-      cachedType = "negative";
-    }
-  }
-  document.body.removeChild(dummy);
-  return cachedType;
-}
-function getNormalizedScrollLeft(element, direction) {
-  const scrollLeft = element.scrollLeft;
-  if (direction !== "rtl") {
-    return scrollLeft;
-  }
-  const type = detectScrollType();
-  switch (type) {
-    case "negative":
-      return element.scrollWidth - element.clientWidth + scrollLeft;
-    case "reverse":
-      return element.scrollWidth - element.clientWidth - scrollLeft;
-    default:
-      return scrollLeft;
-  }
-}
-function getTabUtilityClass(slot) {
-  return generateUtilityClass("MuiTab", slot);
-}
-const tabClasses = generateUtilityClasses("MuiTab", ["root", "labelIcon", "textColorInherit", "textColorPrimary", "textColorSecondary", "selected", "disabled", "fullWidth", "wrapped", "iconWrapper"]);
-const _excluded$5 = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
-const useUtilityClasses$3 = (ownerState) => {
-  const {
-    classes,
-    textColor,
-    fullWidth,
-    wrapped,
-    icon,
-    label,
-    selected,
-    disabled
-  } = ownerState;
-  const slots = {
-    root: ["root", icon && label && "labelIcon", `textColor${capitalize(textColor)}`, fullWidth && "fullWidth", wrapped && "wrapped", selected && "selected", disabled && "disabled"],
-    iconWrapper: ["iconWrapper"]
-  };
-  return composeClasses(slots, getTabUtilityClass, classes);
-};
-const TabRoot = styled(ButtonBase, {
-  name: "MuiTab",
-  slot: "Root",
-  overridesResolver: (props, styles2) => {
-    const {
-      ownerState
-    } = props;
-    return [styles2.root, ownerState.label && ownerState.icon && styles2.labelIcon, styles2[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles2.fullWidth, ownerState.wrapped && styles2.wrapped, {
-      [`& .${tabClasses.iconWrapper}`]: styles2.iconWrapper
-    }];
-  }
-})(({
-  theme,
-  ownerState
-}) => _extends({}, theme.typography.button, {
-  maxWidth: 360,
-  minWidth: 90,
-  position: "relative",
-  minHeight: 48,
-  flexShrink: 0,
-  padding: "12px 16px",
-  overflow: "hidden",
-  whiteSpace: "normal",
-  textAlign: "center"
-}, ownerState.label && {
-  flexDirection: ownerState.iconPosition === "top" || ownerState.iconPosition === "bottom" ? "column" : "row"
-}, {
-  lineHeight: 1.25
-}, ownerState.icon && ownerState.label && {
-  minHeight: 72,
-  paddingTop: 9,
-  paddingBottom: 9,
-  [`& > .${tabClasses.iconWrapper}`]: _extends({}, ownerState.iconPosition === "top" && {
-    marginBottom: 6
-  }, ownerState.iconPosition === "bottom" && {
-    marginTop: 6
-  }, ownerState.iconPosition === "start" && {
-    marginRight: theme.spacing(1)
-  }, ownerState.iconPosition === "end" && {
-    marginLeft: theme.spacing(1)
-  })
-}, ownerState.textColor === "inherit" && {
-  color: "inherit",
-  opacity: 0.6,
-  // same opacity as theme.palette.text.secondary
-  [`&.${tabClasses.selected}`]: {
-    opacity: 1
-  },
-  [`&.${tabClasses.disabled}`]: {
-    opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.textColor === "primary" && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tabClasses.selected}`]: {
-    color: (theme.vars || theme).palette.primary.main
-  },
-  [`&.${tabClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.textColor === "secondary" && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tabClasses.selected}`]: {
-    color: (theme.vars || theme).palette.secondary.main
-  },
-  [`&.${tabClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.fullWidth && {
-  flexShrink: 1,
-  flexGrow: 1,
-  flexBasis: 0,
-  maxWidth: "none"
-}, ownerState.wrapped && {
-  fontSize: theme.typography.pxToRem(12)
-}));
-const Tab = /* @__PURE__ */ React.forwardRef(function Tab2(inProps, ref) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiTab"
-  });
-  const {
-    className,
-    disabled = false,
-    disableFocusRipple = false,
-    // eslint-disable-next-line react/prop-types
-    fullWidth,
-    icon: iconProp,
-    iconPosition = "top",
-    // eslint-disable-next-line react/prop-types
-    indicator,
-    label,
-    onChange,
-    onClick,
-    onFocus,
-    // eslint-disable-next-line react/prop-types
-    selected,
-    // eslint-disable-next-line react/prop-types
-    selectionFollowsFocus,
-    // eslint-disable-next-line react/prop-types
-    textColor = "inherit",
-    value,
-    wrapped = false
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$5);
-  const ownerState = _extends({}, props, {
-    disabled,
-    disableFocusRipple,
-    selected,
-    icon: !!iconProp,
-    iconPosition,
-    label: !!label,
-    fullWidth,
-    textColor,
-    wrapped
-  });
-  const classes = useUtilityClasses$3(ownerState);
-  const icon = iconProp && label && /* @__PURE__ */ React.isValidElement(iconProp) ? /* @__PURE__ */ React.cloneElement(iconProp, {
-    className: clsx(classes.iconWrapper, iconProp.props.className)
-  }) : iconProp;
-  const handleClick = (event) => {
-    if (!selected && onChange) {
-      onChange(event, value);
-    }
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  const handleFocus = (event) => {
-    if (selectionFollowsFocus && !selected && onChange) {
-      onChange(event, value);
-    }
-    if (onFocus) {
-      onFocus(event);
-    }
-  };
-  return /* @__PURE__ */ jsxs(TabRoot, _extends({
-    focusRipple: !disableFocusRipple,
-    className: clsx(classes.root, className),
-    ref,
-    role: "tab",
-    "aria-selected": selected,
-    disabled,
-    onClick: handleClick,
-    onFocus: handleFocus,
-    ownerState,
-    tabIndex: selected ? 0 : -1
-  }, other, {
-    children: [iconPosition === "top" || iconPosition === "start" ? /* @__PURE__ */ jsxs(React.Fragment, {
-      children: [icon, label]
-    }) : /* @__PURE__ */ jsxs(React.Fragment, {
-      children: [label, icon]
-    }), indicator]
-  }));
-});
-process$1.env.NODE_ENV !== "production" ? Tab.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * This prop isn't supported.
-   * Use the `component` prop if you need to change the children structure.
-   */
-  children: unsupportedProp,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: PropTypes.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * The icon to display.
-   */
-  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  /**
-   * The position of the icon relative to the label.
-   * @default 'top'
-   */
-  iconPosition: PropTypes.oneOf(["bottom", "end", "start", "top"]),
-  /**
-   * The label element.
-   */
-  label: PropTypes.node,
-  /**
-   * @ignore
-   */
-  onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * You can provide your own value. Otherwise, we fallback to the child position index.
-   */
-  value: PropTypes.any,
-  /**
-   * Tab labels appear in a single row.
-   * They can use a second line if needed.
-   * @default false
-   */
-  wrapped: PropTypes.bool
-} : void 0;
-const KeyboardArrowLeft = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-}), "KeyboardArrowLeft");
-const KeyboardArrowRight = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-}), "KeyboardArrowRight");
-function easeInOutSin(time) {
-  return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
-}
-function animate(property, element, to, options = {}, cb = () => {
-}) {
-  const {
-    ease = easeInOutSin,
-    duration = 300
-    // standard
-  } = options;
-  let start = null;
-  const from = element[property];
-  let cancelled = false;
-  const cancel = () => {
-    cancelled = true;
-  };
-  const step = (timestamp) => {
-    if (cancelled) {
-      cb(new Error("Animation cancelled"));
-      return;
-    }
-    if (start === null) {
-      start = timestamp;
-    }
-    const time = Math.min(1, (timestamp - start) / duration);
-    element[property] = ease(time) * (to - from) + from;
-    if (time >= 1) {
-      requestAnimationFrame(() => {
-        cb(null);
-      });
-      return;
-    }
-    requestAnimationFrame(step);
-  };
-  if (from === to) {
-    cb(new Error("Element already at target position"));
-    return cancel;
-  }
-  requestAnimationFrame(step);
-  return cancel;
-}
-const _excluded$4 = ["onChange"];
-const styles = {
-  width: 99,
-  height: 99,
-  position: "absolute",
-  top: -9999,
-  overflow: "scroll"
-};
-function ScrollbarSize(props) {
-  const {
-    onChange
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$4);
-  const scrollbarHeight = React.useRef();
-  const nodeRef = React.useRef(null);
-  const setMeasurements = () => {
-    scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
-  };
-  useEnhancedEffect(() => {
-    const handleResize = debounce(() => {
-      const prevHeight = scrollbarHeight.current;
-      setMeasurements();
-      if (prevHeight !== scrollbarHeight.current) {
-        onChange(scrollbarHeight.current);
-      }
-    });
-    const containerWindow = ownerWindow(nodeRef.current);
-    containerWindow.addEventListener("resize", handleResize);
-    return () => {
-      handleResize.clear();
-      containerWindow.removeEventListener("resize", handleResize);
-    };
-  }, [onChange]);
-  React.useEffect(() => {
-    setMeasurements();
-    onChange(scrollbarHeight.current);
-  }, [onChange]);
-  return /* @__PURE__ */ jsx("div", _extends({
-    style: styles
-  }, other, {
-    ref: nodeRef
-  }));
-}
-process$1.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
-  onChange: PropTypes.func.isRequired
-} : void 0;
-function getTabScrollButtonUtilityClass(slot) {
-  return generateUtilityClass("MuiTabScrollButton", slot);
-}
-const tabScrollButtonClasses = generateUtilityClasses("MuiTabScrollButton", ["root", "vertical", "horizontal", "disabled"]);
-const _excluded$3 = ["className", "slots", "slotProps", "direction", "orientation", "disabled"];
-const useUtilityClasses$2 = (ownerState) => {
-  const {
-    classes,
-    orientation,
-    disabled
-  } = ownerState;
-  const slots = {
-    root: ["root", orientation, disabled && "disabled"]
-  };
-  return composeClasses(slots, getTabScrollButtonUtilityClass, classes);
-};
-const TabScrollButtonRoot = styled(ButtonBase, {
-  name: "MuiTabScrollButton",
-  slot: "Root",
-  overridesResolver: (props, styles2) => {
-    const {
-      ownerState
-    } = props;
-    return [styles2.root, ownerState.orientation && styles2[ownerState.orientation]];
-  }
-})(({
-  ownerState
-}) => _extends({
-  width: 40,
-  flexShrink: 0,
-  opacity: 0.8,
-  [`&.${tabScrollButtonClasses.disabled}`]: {
-    opacity: 0
-  }
-}, ownerState.orientation === "vertical" && {
-  width: "100%",
-  height: 40,
-  "& svg": {
-    transform: `rotate(${ownerState.isRtl ? -90 : 90}deg)`
-  }
-}));
-const TabScrollButton = /* @__PURE__ */ React.forwardRef(function TabScrollButton2(inProps, ref) {
-  var _slots$StartScrollBut, _slots$EndScrollButto;
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiTabScrollButton"
-  });
-  const {
-    className,
-    slots = {},
-    slotProps = {},
-    direction
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$3);
-  const isRtl = useRtl();
-  const ownerState = _extends({
-    isRtl
-  }, props);
-  const classes = useUtilityClasses$2(ownerState);
-  const StartButtonIcon = (_slots$StartScrollBut = slots.StartScrollButtonIcon) != null ? _slots$StartScrollBut : KeyboardArrowLeft;
-  const EndButtonIcon = (_slots$EndScrollButto = slots.EndScrollButtonIcon) != null ? _slots$EndScrollButto : KeyboardArrowRight;
-  const startButtonIconProps = useSlotProps({
-    elementType: StartButtonIcon,
-    externalSlotProps: slotProps.startScrollButtonIcon,
-    additionalProps: {
-      fontSize: "small"
-    },
-    ownerState
-  });
-  const endButtonIconProps = useSlotProps({
-    elementType: EndButtonIcon,
-    externalSlotProps: slotProps.endScrollButtonIcon,
-    additionalProps: {
-      fontSize: "small"
-    },
-    ownerState
-  });
-  return /* @__PURE__ */ jsx(TabScrollButtonRoot, _extends({
-    component: "div",
-    className: clsx(classes.root, className),
-    ref,
-    role: null,
-    ownerState,
-    tabIndex: null
-  }, other, {
-    children: direction === "left" ? /* @__PURE__ */ jsx(StartButtonIcon, _extends({}, startButtonIconProps)) : /* @__PURE__ */ jsx(EndButtonIcon, _extends({}, endButtonIconProps))
-  }));
-});
-process$1.env.NODE_ENV !== "production" ? TabScrollButton.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The direction the button should indicate.
-   */
-  direction: PropTypes.oneOf(["left", "right"]).isRequired,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * The component orientation (layout flow direction).
-   */
-  orientation: PropTypes.oneOf(["horizontal", "vertical"]).isRequired,
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   * @default {}
-   */
-  slotProps: PropTypes.shape({
-    endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
-  /**
-   * The components used for each slot inside.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    EndScrollButtonIcon: PropTypes.elementType,
-    StartScrollButtonIcon: PropTypes.elementType
-  }),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-function getTabsUtilityClass(slot) {
-  return generateUtilityClass("MuiTabs", slot);
-}
-const tabsClasses = generateUtilityClasses("MuiTabs", ["root", "vertical", "flexContainer", "flexContainerVertical", "centered", "scroller", "fixed", "scrollableX", "scrollableY", "hideScrollbar", "scrollButtons", "scrollButtonsHideMobile", "indicator"]);
-const _excluded$2 = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
-const nextItem = (list, item) => {
-  if (list === item) {
-    return list.firstChild;
-  }
-  if (item && item.nextElementSibling) {
-    return item.nextElementSibling;
-  }
-  return list.firstChild;
-};
-const previousItem = (list, item) => {
-  if (list === item) {
-    return list.lastChild;
-  }
-  if (item && item.previousElementSibling) {
-    return item.previousElementSibling;
-  }
-  return list.lastChild;
-};
-const moveFocus = (list, currentFocus, traversalFunction) => {
-  let wrappedOnce = false;
-  let nextFocus = traversalFunction(list, currentFocus);
-  while (nextFocus) {
-    if (nextFocus === list.firstChild) {
-      if (wrappedOnce) {
-        return;
-      }
-      wrappedOnce = true;
-    }
-    const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute("aria-disabled") === "true";
-    if (!nextFocus.hasAttribute("tabindex") || nextFocusDisabled) {
-      nextFocus = traversalFunction(list, nextFocus);
-    } else {
-      nextFocus.focus();
-      return;
-    }
-  }
-};
-const useUtilityClasses$1 = (ownerState) => {
-  const {
-    vertical,
-    fixed,
-    hideScrollbar,
-    scrollableX,
-    scrollableY,
-    centered,
-    scrollButtonsHideMobile,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ["root", vertical && "vertical"],
-    scroller: ["scroller", fixed && "fixed", hideScrollbar && "hideScrollbar", scrollableX && "scrollableX", scrollableY && "scrollableY"],
-    flexContainer: ["flexContainer", vertical && "flexContainerVertical", centered && "centered"],
-    indicator: ["indicator"],
-    scrollButtons: ["scrollButtons", scrollButtonsHideMobile && "scrollButtonsHideMobile"],
-    scrollableX: [scrollableX && "scrollableX"],
-    hideScrollbar: [hideScrollbar && "hideScrollbar"]
-  };
-  return composeClasses(slots, getTabsUtilityClass, classes);
-};
-const TabsRoot = styled("div", {
-  name: "MuiTabs",
-  slot: "Root",
-  overridesResolver: (props, styles2) => {
-    const {
-      ownerState
-    } = props;
-    return [{
-      [`& .${tabsClasses.scrollButtons}`]: styles2.scrollButtons
-    }, {
-      [`& .${tabsClasses.scrollButtons}`]: ownerState.scrollButtonsHideMobile && styles2.scrollButtonsHideMobile
-    }, styles2.root, ownerState.vertical && styles2.vertical];
-  }
-})(({
-  ownerState,
-  theme
-}) => _extends({
-  overflow: "hidden",
-  minHeight: 48,
-  // Add iOS momentum scrolling for iOS < 13.0
-  WebkitOverflowScrolling: "touch",
-  display: "flex"
-}, ownerState.vertical && {
-  flexDirection: "column"
-}, ownerState.scrollButtonsHideMobile && {
-  [`& .${tabsClasses.scrollButtons}`]: {
-    [theme.breakpoints.down("sm")]: {
-      display: "none"
-    }
-  }
-}));
-const TabsScroller = styled("div", {
-  name: "MuiTabs",
-  slot: "Scroller",
-  overridesResolver: (props, styles2) => {
-    const {
-      ownerState
-    } = props;
-    return [styles2.scroller, ownerState.fixed && styles2.fixed, ownerState.hideScrollbar && styles2.hideScrollbar, ownerState.scrollableX && styles2.scrollableX, ownerState.scrollableY && styles2.scrollableY];
-  }
-})(({
-  ownerState
-}) => _extends({
-  position: "relative",
-  display: "inline-block",
-  flex: "1 1 auto",
-  whiteSpace: "nowrap"
-}, ownerState.fixed && {
-  overflowX: "hidden",
-  width: "100%"
-}, ownerState.hideScrollbar && {
-  // Hide dimensionless scrollbar on macOS
-  scrollbarWidth: "none",
-  // Firefox
-  "&::-webkit-scrollbar": {
-    display: "none"
-    // Safari + Chrome
-  }
-}, ownerState.scrollableX && {
-  overflowX: "auto",
-  overflowY: "hidden"
-}, ownerState.scrollableY && {
-  overflowY: "auto",
-  overflowX: "hidden"
-}));
-const FlexContainer = styled("div", {
-  name: "MuiTabs",
-  slot: "FlexContainer",
-  overridesResolver: (props, styles2) => {
-    const {
-      ownerState
-    } = props;
-    return [styles2.flexContainer, ownerState.vertical && styles2.flexContainerVertical, ownerState.centered && styles2.centered];
-  }
-})(({
-  ownerState
-}) => _extends({
-  display: "flex"
-}, ownerState.vertical && {
-  flexDirection: "column"
-}, ownerState.centered && {
-  justifyContent: "center"
-}));
-const TabsIndicator = styled("span", {
-  name: "MuiTabs",
-  slot: "Indicator",
-  overridesResolver: (props, styles2) => styles2.indicator
-})(({
-  ownerState,
-  theme
-}) => _extends({
-  position: "absolute",
-  height: 2,
-  bottom: 0,
-  width: "100%",
-  transition: theme.transitions.create()
-}, ownerState.indicatorColor === "primary" && {
-  backgroundColor: (theme.vars || theme).palette.primary.main
-}, ownerState.indicatorColor === "secondary" && {
-  backgroundColor: (theme.vars || theme).palette.secondary.main
-}, ownerState.vertical && {
-  height: "100%",
-  width: 2,
-  right: 0
-}));
-const TabsScrollbarSize = styled(ScrollbarSize)({
-  overflowX: "auto",
-  overflowY: "hidden",
-  // Hide dimensionless scrollbar on macOS
-  scrollbarWidth: "none",
-  // Firefox
-  "&::-webkit-scrollbar": {
-    display: "none"
-    // Safari + Chrome
-  }
-});
-const defaultIndicatorStyle = {};
-let warnedOnceTabPresent = false;
-const Tabs = /* @__PURE__ */ React.forwardRef(function Tabs2(inProps, ref) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiTabs"
-  });
-  const theme = useTheme();
-  const isRtl = useRtl();
-  const {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    action,
-    centered = false,
-    children: childrenProp,
-    className,
-    component = "div",
-    allowScrollButtonsMobile = false,
-    indicatorColor = "primary",
-    onChange,
-    orientation = "horizontal",
-    ScrollButtonComponent = TabScrollButton,
-    scrollButtons = "auto",
-    selectionFollowsFocus,
-    slots = {},
-    slotProps = {},
-    TabIndicatorProps = {},
-    TabScrollButtonProps = {},
-    textColor = "primary",
-    value,
-    variant = "standard",
-    visibleScrollbar = false
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$2);
-  const scrollable = variant === "scrollable";
-  const vertical = orientation === "vertical";
-  const scrollStart = vertical ? "scrollTop" : "scrollLeft";
-  const start = vertical ? "top" : "left";
-  const end = vertical ? "bottom" : "right";
-  const clientSize = vertical ? "clientHeight" : "clientWidth";
-  const size = vertical ? "height" : "width";
-  const ownerState = _extends({}, props, {
-    component,
-    allowScrollButtonsMobile,
-    indicatorColor,
-    orientation,
-    vertical,
-    scrollButtons,
-    textColor,
-    variant,
-    visibleScrollbar,
-    fixed: !scrollable,
-    hideScrollbar: scrollable && !visibleScrollbar,
-    scrollableX: scrollable && !vertical,
-    scrollableY: scrollable && vertical,
-    centered: centered && !scrollable,
-    scrollButtonsHideMobile: !allowScrollButtonsMobile
-  });
-  const classes = useUtilityClasses$1(ownerState);
-  const startScrollButtonIconProps = useSlotProps({
-    elementType: slots.StartScrollButtonIcon,
-    externalSlotProps: slotProps.startScrollButtonIcon,
-    ownerState
-  });
-  const endScrollButtonIconProps = useSlotProps({
-    elementType: slots.EndScrollButtonIcon,
-    externalSlotProps: slotProps.endScrollButtonIcon,
-    ownerState
-  });
-  if (process$1.env.NODE_ENV !== "production") {
-    if (centered && scrollable) {
-    }
-  }
-  const [mounted, setMounted] = React.useState(false);
-  const [indicatorStyle, setIndicatorStyle] = React.useState(defaultIndicatorStyle);
-  const [displayStartScroll, setDisplayStartScroll] = React.useState(false);
-  const [displayEndScroll, setDisplayEndScroll] = React.useState(false);
-  const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);
-  const [scrollerStyle, setScrollerStyle] = React.useState({
-    overflow: "hidden",
-    scrollbarWidth: 0
-  });
-  const valueToIndex = /* @__PURE__ */ new Map();
-  const tabsRef = React.useRef(null);
-  const tabListRef = React.useRef(null);
-  const getTabsMeta = () => {
-    const tabsNode = tabsRef.current;
-    let tabsMeta;
-    if (tabsNode) {
-      const rect = tabsNode.getBoundingClientRect();
-      tabsMeta = {
-        clientWidth: tabsNode.clientWidth,
-        scrollLeft: tabsNode.scrollLeft,
-        scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? "rtl" : "ltr"),
-        scrollWidth: tabsNode.scrollWidth,
-        top: rect.top,
-        bottom: rect.bottom,
-        left: rect.left,
-        right: rect.right
-      };
-    }
-    let tabMeta;
-    if (tabsNode && value !== false) {
-      const children2 = tabListRef.current.children;
-      if (children2.length > 0) {
-        const tab = children2[valueToIndex.get(value)];
-        if (process$1.env.NODE_ENV !== "production") {
-          if (!tab) {
-          }
-        }
-        tabMeta = tab ? tab.getBoundingClientRect() : null;
-        if (process$1.env.NODE_ENV !== "production") {
-          if (process$1.env.NODE_ENV !== "test" && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 && // if the whole Tabs component is hidden, don't warn
-          tabsMeta.clientWidth !== 0) {
-            tabsMeta = null;
-            warnedOnceTabPresent = true;
-          }
-        }
-      }
-    }
-    return {
-      tabsMeta,
-      tabMeta
-    };
-  };
-  const updateIndicatorState = useEventCallback(() => {
-    const {
-      tabsMeta,
-      tabMeta
-    } = getTabsMeta();
-    let startValue = 0;
-    let startIndicator;
-    if (vertical) {
-      startIndicator = "top";
-      if (tabMeta && tabsMeta) {
-        startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;
-      }
-    } else {
-      startIndicator = isRtl ? "right" : "left";
-      if (tabMeta && tabsMeta) {
-        const correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;
-        startValue = (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + correction);
-      }
-    }
-    const newIndicatorStyle = {
-      [startIndicator]: startValue,
-      // May be wrong until the font is loaded.
-      [size]: tabMeta ? tabMeta[size] : 0
-    };
-    if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
-      setIndicatorStyle(newIndicatorStyle);
-    } else {
-      const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);
-      const dSize = Math.abs(indicatorStyle[size] - newIndicatorStyle[size]);
-      if (dStart >= 1 || dSize >= 1) {
-        setIndicatorStyle(newIndicatorStyle);
-      }
-    }
-  });
-  const scroll = (scrollValue, {
-    animation = true
-  } = {}) => {
-    if (animation) {
-      animate(scrollStart, tabsRef.current, scrollValue, {
-        duration: theme.transitions.duration.standard
-      });
-    } else {
-      tabsRef.current[scrollStart] = scrollValue;
-    }
-  };
-  const moveTabsScroll = (delta) => {
-    let scrollValue = tabsRef.current[scrollStart];
-    if (vertical) {
-      scrollValue += delta;
-    } else {
-      scrollValue += delta * (isRtl ? -1 : 1);
-      scrollValue *= isRtl && detectScrollType() === "reverse" ? -1 : 1;
-    }
-    scroll(scrollValue);
-  };
-  const getScrollSize = () => {
-    const containerSize = tabsRef.current[clientSize];
-    let totalSize = 0;
-    const children2 = Array.from(tabListRef.current.children);
-    for (let i = 0; i < children2.length; i += 1) {
-      const tab = children2[i];
-      if (totalSize + tab[clientSize] > containerSize) {
-        if (i === 0) {
-          totalSize = containerSize;
-        }
-        break;
-      }
-      totalSize += tab[clientSize];
-    }
-    return totalSize;
-  };
-  const handleStartScrollClick = () => {
-    moveTabsScroll(-1 * getScrollSize());
-  };
-  const handleEndScrollClick = () => {
-    moveTabsScroll(getScrollSize());
-  };
-  const handleScrollbarSizeChange = React.useCallback((scrollbarWidth) => {
-    setScrollerStyle({
-      overflow: null,
-      scrollbarWidth
-    });
-  }, []);
-  const getConditionalElements = () => {
-    const conditionalElements2 = {};
-    conditionalElements2.scrollbarSizeListener = scrollable ? /* @__PURE__ */ jsx(TabsScrollbarSize, {
-      onChange: handleScrollbarSizeChange,
-      className: clsx(classes.scrollableX, classes.hideScrollbar)
-    }) : null;
-    const scrollButtonsActive = displayStartScroll || displayEndScroll;
-    const showScrollButtons = scrollable && (scrollButtons === "auto" && scrollButtonsActive || scrollButtons === true);
-    conditionalElements2.scrollButtonStart = showScrollButtons ? /* @__PURE__ */ jsx(ScrollButtonComponent, _extends({
-      slots: {
-        StartScrollButtonIcon: slots.StartScrollButtonIcon
-      },
-      slotProps: {
-        startScrollButtonIcon: startScrollButtonIconProps
-      },
-      orientation,
-      direction: isRtl ? "right" : "left",
-      onClick: handleStartScrollClick,
-      disabled: !displayStartScroll
-    }, TabScrollButtonProps, {
-      className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
-    })) : null;
-    conditionalElements2.scrollButtonEnd = showScrollButtons ? /* @__PURE__ */ jsx(ScrollButtonComponent, _extends({
-      slots: {
-        EndScrollButtonIcon: slots.EndScrollButtonIcon
-      },
-      slotProps: {
-        endScrollButtonIcon: endScrollButtonIconProps
-      },
-      orientation,
-      direction: isRtl ? "left" : "right",
-      onClick: handleEndScrollClick,
-      disabled: !displayEndScroll
-    }, TabScrollButtonProps, {
-      className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
-    })) : null;
-    return conditionalElements2;
-  };
-  const scrollSelectedIntoView = useEventCallback((animation) => {
-    const {
-      tabsMeta,
-      tabMeta
-    } = getTabsMeta();
-    if (!tabMeta || !tabsMeta) {
-      return;
-    }
-    if (tabMeta[start] < tabsMeta[start]) {
-      const nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);
-      scroll(nextScrollStart, {
-        animation
-      });
-    } else if (tabMeta[end] > tabsMeta[end]) {
-      const nextScrollStart = tabsMeta[scrollStart] + (tabMeta[end] - tabsMeta[end]);
-      scroll(nextScrollStart, {
-        animation
-      });
-    }
-  });
-  const updateScrollButtonState = useEventCallback(() => {
-    if (scrollable && scrollButtons !== false) {
-      setUpdateScrollObserver(!updateScrollObserver);
-    }
-  });
-  React.useEffect(() => {
-    const handleResize = debounce(() => {
-      if (tabsRef.current) {
-        updateIndicatorState();
-      }
-    });
-    let resizeObserver;
-    const handleMutation = (records) => {
-      records.forEach((record) => {
-        record.removedNodes.forEach((item) => {
-          var _resizeObserver;
-          (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);
-        });
-        record.addedNodes.forEach((item) => {
-          var _resizeObserver2;
-          (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);
-        });
-      });
-      handleResize();
-      updateScrollButtonState();
-    };
-    const win = ownerWindow(tabsRef.current);
-    win.addEventListener("resize", handleResize);
-    let mutationObserver;
-    if (typeof ResizeObserver !== "undefined") {
-      resizeObserver = new ResizeObserver(handleResize);
-      Array.from(tabListRef.current.children).forEach((child) => {
-        resizeObserver.observe(child);
-      });
-    }
-    if (typeof MutationObserver !== "undefined") {
-      mutationObserver = new MutationObserver(handleMutation);
-      mutationObserver.observe(tabListRef.current, {
-        childList: true
-      });
-    }
-    return () => {
-      var _mutationObserver, _resizeObserver3;
-      handleResize.clear();
-      win.removeEventListener("resize", handleResize);
-      (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();
-      (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();
-    };
-  }, [updateIndicatorState, updateScrollButtonState]);
-  React.useEffect(() => {
-    const tabListChildren = Array.from(tabListRef.current.children);
-    const length = tabListChildren.length;
-    if (typeof IntersectionObserver !== "undefined" && length > 0 && scrollable && scrollButtons !== false) {
-      const firstTab = tabListChildren[0];
-      const lastTab = tabListChildren[length - 1];
-      const observerOptions = {
-        root: tabsRef.current,
-        threshold: 0.99
-      };
-      const handleScrollButtonStart = (entries) => {
-        setDisplayStartScroll(!entries[0].isIntersecting);
-      };
-      const firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
-      firstObserver.observe(firstTab);
-      const handleScrollButtonEnd = (entries) => {
-        setDisplayEndScroll(!entries[0].isIntersecting);
-      };
-      const lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
-      lastObserver.observe(lastTab);
-      return () => {
-        firstObserver.disconnect();
-        lastObserver.disconnect();
-      };
-    }
-    return void 0;
-  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-  React.useEffect(() => {
-    updateIndicatorState();
-  });
-  React.useEffect(() => {
-    scrollSelectedIntoView(defaultIndicatorStyle !== indicatorStyle);
-  }, [scrollSelectedIntoView, indicatorStyle]);
-  React.useImperativeHandle(action, () => ({
-    updateIndicator: updateIndicatorState,
-    updateScrollButtons: updateScrollButtonState
-  }), [updateIndicatorState, updateScrollButtonState]);
-  const indicator = /* @__PURE__ */ jsx(TabsIndicator, _extends({}, TabIndicatorProps, {
-    className: clsx(classes.indicator, TabIndicatorProps.className),
-    ownerState,
-    style: _extends({}, indicatorStyle, TabIndicatorProps.style)
-  }));
-  let childIndex = 0;
-  const children = React.Children.map(childrenProp, (child) => {
-    if (!/* @__PURE__ */ React.isValidElement(child)) {
-      return null;
-    }
-    if (process$1.env.NODE_ENV !== "production") {
-      if (reactIsExports.isFragment(child)) {
-      }
-    }
-    const childValue = child.props.value === void 0 ? childIndex : child.props.value;
-    valueToIndex.set(childValue, childIndex);
-    const selected = childValue === value;
-    childIndex += 1;
-    return /* @__PURE__ */ React.cloneElement(child, _extends({
-      fullWidth: variant === "fullWidth",
-      indicator: selected && !mounted && indicator,
-      selected,
-      selectionFollowsFocus,
-      onChange,
-      textColor,
-      value: childValue
-    }, childIndex === 1 && value === false && !child.props.tabIndex ? {
-      tabIndex: 0
-    } : {}));
-  });
-  const handleKeyDown = (event) => {
-    const list = tabListRef.current;
-    const currentFocus = ownerDocument(list).activeElement;
-    const role = currentFocus.getAttribute("role");
-    if (role !== "tab") {
-      return;
-    }
-    let previousItemKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
-    let nextItemKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
-    if (orientation === "horizontal" && isRtl) {
-      previousItemKey = "ArrowRight";
-      nextItemKey = "ArrowLeft";
-    }
-    switch (event.key) {
-      case previousItemKey:
-        event.preventDefault();
-        moveFocus(list, currentFocus, previousItem);
-        break;
-      case nextItemKey:
-        event.preventDefault();
-        moveFocus(list, currentFocus, nextItem);
-        break;
-      case "Home":
-        event.preventDefault();
-        moveFocus(list, null, nextItem);
-        break;
-      case "End":
-        event.preventDefault();
-        moveFocus(list, null, previousItem);
-        break;
-    }
-  };
-  const conditionalElements = getConditionalElements();
-  return /* @__PURE__ */ jsxs(TabsRoot, _extends({
-    className: clsx(classes.root, className),
-    ownerState,
-    ref,
-    as: component
-  }, other, {
-    children: [conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /* @__PURE__ */ jsxs(TabsScroller, {
-      className: classes.scroller,
-      ownerState,
-      style: {
-        overflow: scrollerStyle.overflow,
-        [vertical ? `margin${isRtl ? "Left" : "Right"}` : "marginBottom"]: visibleScrollbar ? void 0 : -scrollerStyle.scrollbarWidth
-      },
-      ref: tabsRef,
-      children: [/* @__PURE__ */ jsx(FlexContainer, {
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-orientation": orientation === "vertical" ? "vertical" : null,
-        className: classes.flexContainer,
-        ownerState,
-        onKeyDown: handleKeyDown,
-        ref: tabListRef,
-        role: "tablist",
-        children
-      }), mounted && indicator]
-    }), conditionalElements.scrollButtonEnd]
-  }));
-});
-process$1.env.NODE_ENV !== "production" ? Tabs.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * Callback fired when the component mounts.
-   * This is useful when you want to trigger an action programmatically.
-   * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
-   *
-   * @param {object} actions This object contains all possible actions
-   * that can be triggered programmatically.
-   */
-  action: refType,
-  /**
-   * If `true`, the scroll buttons aren't forced hidden on mobile.
-   * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
-   * @default false
-   */
-  allowScrollButtonsMobile: PropTypes.bool,
-  /**
-   * The label for the Tabs as a string.
-   */
-  "aria-label": PropTypes.string,
-  /**
-   * An id or list of ids separated by a space that label the Tabs.
-   */
-  "aria-labelledby": PropTypes.string,
-  /**
-   * If `true`, the tabs are centered.
-   * This prop is intended for large views.
-   * @default false
-   */
-  centered: PropTypes.bool,
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * Determines the color of the indicator.
-   * @default 'primary'
-   */
-  indicatorColor: PropTypes.oneOfType([PropTypes.oneOf(["primary", "secondary"]), PropTypes.string]),
-  /**
-   * Callback fired when the value changes.
-   *
-   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
-   * @param {any} value We default to the index of the child (number)
-   */
-  onChange: PropTypes.func,
-  /**
-   * The component orientation (layout flow direction).
-   * @default 'horizontal'
-   */
-  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
-  /**
-   * The component used to render the scroll buttons.
-   * @default TabScrollButton
-   */
-  ScrollButtonComponent: PropTypes.elementType,
-  /**
-   * Determine behavior of scroll buttons when tabs are set to scroll:
-   *
-   * - `auto` will only present them when not all the items are visible.
-   * - `true` will always present them.
-   * - `false` will never present them.
-   *
-   * By default the scroll buttons are hidden on mobile.
-   * This behavior can be disabled with `allowScrollButtonsMobile`.
-   * @default 'auto'
-   */
-  scrollButtons: PropTypes.oneOf(["auto", false, true]),
-  /**
-   * If `true` the selected tab changes on focus. Otherwise it only
-   * changes on activation.
-   */
-  selectionFollowsFocus: PropTypes.bool,
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   * @default {}
-   */
-  slotProps: PropTypes.shape({
-    endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
-  /**
-   * The components used for each slot inside.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    EndScrollButtonIcon: PropTypes.elementType,
-    StartScrollButtonIcon: PropTypes.elementType
-  }),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * Props applied to the tab indicator element.
-   * @default  {}
-   */
-  TabIndicatorProps: PropTypes.object,
-  /**
-   * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.
-   * @default {}
-   */
-  TabScrollButtonProps: PropTypes.object,
-  /**
-   * Determines the color of the `Tab`.
-   * @default 'primary'
-   */
-  textColor: PropTypes.oneOf(["inherit", "primary", "secondary"]),
-  /**
-   * The value of the currently selected `Tab`.
-   * If you don't want any selected `Tab`, you can set this prop to `false`.
-   */
-  value: PropTypes.any,
-  /**
-   * Determines additional display behavior of the tabs:
-   *
-   *  - `scrollable` will invoke scrolling properties and allow for horizontally
-   *  scrolling (or swiping) of the tab bar.
-   *  - `fullWidth` will make the tabs grow to use all the available space,
-   *  which should be used for small views, like on mobile.
-   *  - `standard` will render the default state.
-   * @default 'standard'
-   */
-  variant: PropTypes.oneOf(["fullWidth", "scrollable", "standard"]),
-  /**
-   * If `true`, the scrollbar is visible. It can be useful when displaying
-   * a long vertical list of tabs.
-   * @default false
-   */
-  visibleScrollbar: PropTypes.bool
-} : void 0;
-const Context = /* @__PURE__ */ React.createContext(null);
-if (process$1.env.NODE_ENV !== "production") {
-  Context.displayName = "TabContext";
-}
-function useUniquePrefix() {
-  const [id, setId] = React.useState(null);
-  React.useEffect(() => {
-    setId(`mui-p-${Math.round(Math.random() * 1e5)}`);
-  }, []);
-  return id;
-}
-function TabContext(props) {
-  const {
-    children,
-    value
-  } = props;
-  const idPrefix = useUniquePrefix();
-  const context = React.useMemo(() => {
-    return {
-      idPrefix,
-      value
-    };
-  }, [idPrefix, value]);
-  return /* @__PURE__ */ jsx(Context.Provider, {
-    value: context,
-    children
-  });
-}
-process$1.env.NODE_ENV !== "production" ? TabContext.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * The value of the currently selected `Tab`.
-   */
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
-} : void 0;
-function useTabContext() {
-  return React.useContext(Context);
-}
-function getPanelId(context, value) {
-  const {
-    idPrefix
-  } = context;
-  if (idPrefix === null) {
-    return null;
-  }
-  return `${context.idPrefix}-P-${value}`;
-}
-function getTabId(context, value) {
-  const {
-    idPrefix
-  } = context;
-  if (idPrefix === null) {
-    return null;
-  }
-  return `${context.idPrefix}-T-${value}`;
-}
-const _excluded$1 = ["children"];
-const TabList = /* @__PURE__ */ React.forwardRef(function TabList2(props, ref) {
-  const {
-    children: childrenProp
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$1);
-  const context = useTabContext();
-  if (context === null) {
-    throw new TypeError("No TabContext provided");
-  }
-  const children = React.Children.map(childrenProp, (child) => {
-    if (!/* @__PURE__ */ React.isValidElement(child)) {
-      return null;
-    }
-    return /* @__PURE__ */ React.cloneElement(child, {
-      // SOMEDAY: `Tabs` will set those themselves
-      "aria-controls": getPanelId(context, child.props.value),
-      id: getTabId(context, child.props.value)
-    });
-  });
-  return /* @__PURE__ */ jsx(Tabs, _extends({}, other, {
-    ref,
-    value: context.value,
-    children
-  }));
-});
-process$1.env.NODE_ENV !== "production" ? TabList.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * A list of `<Tab />` elements.
-   */
-  children: PropTypes.node
-} : void 0;
-function getTabPanelUtilityClass(slot) {
-  return generateUtilityClass("MuiTabPanel", slot);
-}
-generateUtilityClasses("MuiTabPanel", ["root"]);
-const _excluded = ["children", "className", "value"];
-const useUtilityClasses = (ownerState) => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ["root"]
-  };
-  return composeClasses(slots, getTabPanelUtilityClass, classes);
-};
-const TabPanelRoot = styled("div", {
-  name: "MuiTabPanel",
-  slot: "Root",
-  overridesResolver: (props, styles2) => styles2.root
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(3)
-}));
-const TabPanel = /* @__PURE__ */ React.forwardRef(function TabPanel2(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
-    name: "MuiTabPanel"
-  });
-  const {
-    children,
-    className,
-    value
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props);
-  const classes = useUtilityClasses(ownerState);
-  const context = useTabContext();
-  if (context === null) {
-    throw new TypeError("No TabContext provided");
-  }
-  const id = getPanelId(context, value);
-  const tabId = getTabId(context, value);
-  return /* @__PURE__ */ jsx(TabPanelRoot, _extends({
-    "aria-labelledby": tabId,
-    className: clsx(classes.root, className),
-    hidden: value !== context.value,
-    id,
-    ref,
-    role: "tabpanel",
-    ownerState
-  }, other, {
-    children: value === context.value && children
-  }));
-});
-process$1.env.NODE_ENV !== "production" ? TabPanel.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when
-   * no `value` was passed to `Tab`.
-   */
-  value: PropTypes.string.isRequired
-} : void 0;
-function Routes({ name, children }) {
-  return /* @__PURE__ */ jsx(
-    Tooltip,
-    {
-      componentsProps: {
-        tooltip: {
-          sx: {
-            bgcolor: "var(--tw-background-container)",
-            "& .MuiTooltip-arrow": {
-              color: "var(--tw-bg-container)"
-            },
-            border: "1px solid var(--tw-border-primary)",
-            color: "var(--tw-text-primary)",
-            boxShadow: "0px 0px 6.1px 0px #0000001A"
-          }
-        }
-      },
-      slotProps: {
-        popper: {
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [0, -14]
-              }
-            }
-          ]
-        }
-      },
-      className: "bw-text-text-button",
-      title: name,
-      placement: "top",
-      children
-    }
-  );
-}
-function Maxop({ fill, spinnerColor, stopColor }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0.820312",
-            y: "1.4248",
-            width: "14",
-            height: "14",
-            rx: "7",
-            fill,
-            stroke: "url(#paint0_linear_739_20205)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M7.34417 5.19093C7.49384 4.73028 8.14555 4.73028 8.29522 5.19093L8.53764 5.937C8.73845 6.55504 9.31438 6.97348 9.96422 6.97348H10.7487C11.233 6.97348 11.4344 7.59329 11.0426 7.87799L10.4079 8.33908C9.8822 8.72105 9.66222 9.3981 9.86303 10.0161L10.1054 10.7622C10.2551 11.2229 9.72788 11.6059 9.33602 11.3212L8.70137 10.8601C8.17564 10.4782 7.46375 10.4782 6.93802 10.8601L6.30337 11.3212C5.91152 11.6059 5.38428 11.2229 5.53395 10.7622L5.77637 10.0161C5.97718 9.3981 5.75719 8.72105 5.23146 8.33908L4.59681 7.87799C4.20496 7.59329 4.40635 6.97348 4.89071 6.97348H5.67517C6.32501 6.97348 6.90094 6.55504 7.10176 5.937L7.34417 5.19093Z",
-            stroke: "black"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M7.34417 5.19093C7.49384 4.73028 8.14555 4.73028 8.29522 5.19093L8.53764 5.937C8.73845 6.55504 9.31438 6.97348 9.96422 6.97348H10.7487C11.233 6.97348 11.4344 7.59329 11.0426 7.87799L10.4079 8.33908C9.8822 8.72105 9.66222 9.3981 9.86303 10.0161L10.1054 10.7622C10.2551 11.2229 9.72788 11.6059 9.33602 11.3212L8.70137 10.8601C8.17564 10.4782 7.46375 10.4782 6.93802 10.8601L6.30337 11.3212C5.91152 11.6059 5.38428 11.2229 5.53395 10.7622L5.77637 10.0161C5.97718 9.3981 5.75719 8.72105 5.23146 8.33908L4.59681 7.87799C4.20496 7.59329 4.40635 6.97348 4.89071 6.97348H5.67517C6.32501 6.97348 6.90094 6.55504 7.10176 5.937L7.34417 5.19093Z",
-            stroke: "url(#paint1_linear_739_20205)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M7.34417 5.19093C7.49384 4.73028 8.14555 4.73028 8.29522 5.19093L8.53764 5.937C8.73845 6.55504 9.31438 6.97348 9.96422 6.97348H10.7487C11.233 6.97348 11.4344 7.59329 11.0426 7.87799L10.4079 8.33908C9.8822 8.72105 9.66222 9.3981 9.86303 10.0161L10.1054 10.7622C10.2551 11.2229 9.72788 11.6059 9.33602 11.3212L8.70137 10.8601C8.17564 10.4782 7.46375 10.4782 6.93802 10.8601L6.30337 11.3212C5.91152 11.6059 5.38428 11.2229 5.53395 10.7622L5.77637 10.0161C5.97718 9.3981 5.75719 8.72105 5.23146 8.33908L4.59681 7.87799C4.20496 7.59329 4.40635 6.97348 4.89071 6.97348H5.67517C6.32501 6.97348 6.90094 6.55504 7.10176 5.937L7.34417 5.19093Z",
-            stroke: "black",
-            "stroke-opacity": "0.2"
-          }
-        ),
-        /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: "paint0_linear_739_20205",
-              x1: "18.1645",
-              y1: "6.26376",
-              x2: "-8.973",
-              y2: "6.2369",
-              gradientUnits: "userSpaceOnUse",
-              children: [
-                /* @__PURE__ */ jsx("stop", { "stop-color": spinnerColor ? spinnerColor : "#2CFFE4" }),
-                /* @__PURE__ */ jsx("stop", { offset: "1", "stop-color": stopColor ? stopColor : "#A45EFF" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: "paint1_linear_739_20205",
-              x1: "10.9776",
-              y1: "10.0041",
-              x2: "1.99984",
-              y2: "2.87371",
-              gradientUnits: "userSpaceOnUse",
-              children: [
-                /* @__PURE__ */ jsx("stop", { "stop-color": spinnerColor ? spinnerColor : "#2CFFE4" }),
-                /* @__PURE__ */ jsx("stop", { offset: "1", "stop-color": stopColor ? stopColor : "#A45EFF" })
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function LowgasSvg({ fill }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0.839844",
-            y: "0.938477",
-            width: "14",
-            height: "14",
-            rx: "7",
-            fill
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0.839844",
-            y: "0.938477",
-            width: "14",
-            height: "14",
-            rx: "7",
-            fill
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0.839844",
-            y: "0.938477",
-            width: "14",
-            height: "14",
-            rx: "7",
-            stroke: "#69AEF2"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            "fill-rule": "evenodd",
-            "clip-rule": "evenodd",
-            d: "M10.7198 5.55386C10.7352 5.56138 10.7489 5.57121 10.762 5.58393C10.7654 5.5874 10.7682 5.59087 10.7711 5.59434C10.9357 5.72676 11.1002 5.87653 11.2198 6.05696C11.3519 6.25646 11.4253 6.48719 11.3809 6.76072C11.3621 6.87522 11.3194 6.97526 11.2545 7.06373C11.2078 7.12677 11.1509 7.18228 11.0837 7.23085C11.0803 7.31933 11.0791 7.40607 11.0791 7.49223C11.0797 7.60269 11.0831 7.71661 11.0894 7.83342C11.1036 8.10752 11.1441 8.38393 11.1845 8.65804C11.2278 8.95296 11.271 9.24556 11.2824 9.55031C11.2978 9.94065 11.2522 10.2616 11.1253 10.4883C10.9841 10.7416 10.7546 10.8769 10.4164 10.8647C10.0126 10.8572 9.76438 10.6271 9.6522 10.202C9.55427 9.8302 9.56907 9.29934 9.6801 8.63144C9.67669 8.10231 9.60893 7.70157 9.47455 7.43152C9.38686 7.25514 9.26785 7.13833 9.11753 7.08282V10.5478C9.1665 10.5715 9.21091 10.6039 9.24849 10.6427C9.33504 10.7306 9.38914 10.8526 9.38914 10.9867V11.3326C9.38914 11.4199 9.3191 11.491 9.23312 11.491H5.23414C5.14816 11.491 5.07812 11.4199 5.07812 11.3326V10.9867C5.07812 10.8526 5.13222 10.7312 5.21877 10.6427C5.24553 10.6155 5.27571 10.5912 5.30817 10.571V5.2254C5.30817 4.99409 5.40098 4.78417 5.55074 4.63209C5.70049 4.48 5.90719 4.38574 6.13495 4.38574H8.28619C8.51452 4.38574 8.72236 4.48058 8.87268 4.63324C9.023 4.78591 9.11639 4.99698 9.11639 5.22945V6.75378C9.39312 6.81507 9.60437 6.99492 9.75128 7.28984C9.90901 7.60615 9.98759 8.05952 9.98986 8.64647C9.98986 8.65572 9.9893 8.66498 9.98759 8.67365H9.98816C9.88282 9.30224 9.86573 9.79261 9.95228 10.1205C10.0246 10.3963 10.1772 10.5455 10.4215 10.549H10.4243C10.6327 10.5559 10.7711 10.4784 10.8525 10.3321C10.9488 10.1598 10.9823 9.89554 10.9693 9.56246C10.9584 9.28026 10.9157 8.99286 10.8736 8.70372C10.8326 8.42499 10.7916 8.14395 10.7762 7.84903C10.77 7.7328 10.7665 7.61425 10.766 7.49166C10.7654 7.39451 10.7671 7.29851 10.7711 7.20425C10.4801 6.94519 10.303 6.68612 10.2484 6.42821C10.1966 6.1836 10.2512 5.94882 10.4192 5.72445C10.2911 5.63539 10.1607 5.56253 10.0286 5.50413C9.84808 5.42432 9.84694 5.41738 9.6579 5.38616C9.57306 5.37228 9.51554 5.29074 9.52921 5.20458C9.54288 5.11842 9.62316 5.06001 9.70801 5.07389C9.9221 5.10916 9.94773 5.12304 10.1533 5.21383C10.3486 5.30057 10.5371 5.41218 10.7198 5.55386ZM10.668 5.91817C10.5593 6.06621 10.5228 6.21425 10.5547 6.36344C10.5929 6.54386 10.7255 6.73585 10.9465 6.93883C10.9687 6.91859 10.9886 6.89719 11.0051 6.87464C11.0399 6.8278 11.0632 6.77286 11.0729 6.71041C11.1025 6.52767 11.0518 6.37096 10.9607 6.23333C10.8855 6.11941 10.7808 6.01416 10.668 5.91817ZM6.32286 5.1109H8.13472C8.22868 5.1109 8.31409 5.14964 8.37615 5.21268C8.38014 5.2173 8.38469 5.22135 8.38868 5.22655C8.44334 5.28843 8.47694 5.36997 8.47694 5.45786V6.63176C8.47694 6.72718 8.43879 6.8145 8.37672 6.87695C8.31523 6.9394 8.22982 6.97873 8.13529 6.97873H6.32286C6.22947 6.97873 6.14463 6.9394 6.082 6.87695L6.08143 6.87753C6.01993 6.81507 5.98121 6.72776 5.98121 6.63234V5.45729C5.98121 5.36187 6.01936 5.27513 6.08143 5.2121C6.08598 5.20805 6.08997 5.20342 6.09509 5.19995C6.15602 5.14444 6.23574 5.1109 6.32286 5.1109ZM8.9746 10.8324C8.97005 10.8329 8.96606 10.8329 8.96151 10.8329H5.49152C5.47216 10.8416 5.45451 10.8537 5.4397 10.8688C5.40952 10.8994 5.39073 10.9416 5.39073 10.9885V11.1758H9.0771V10.9885C9.0771 10.9422 9.05831 10.9 9.02813 10.8688C9.01276 10.8532 8.99453 10.841 8.9746 10.8324Z",
-            fill: "#69AEF2"
-          }
-        )
-      ]
-    }
-  );
-}
-function FastestSvg({ fill }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "1.16797",
-            y: "0.666992",
-            width: "14",
-            height: "14",
-            rx: "7",
-            fill
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "1.16797",
-            y: "0.666992",
-            width: "14",
-            height: "14",
-            rx: "7",
-            fill
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "1.16797",
-            y: "0.666992",
-            width: "14",
-            height: "14",
-            rx: "7",
-            stroke: "#FFC700"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M4.61719 8.06204L10.1435 3.3252L7.77508 6.48309H12.1172L4.61719 12.0094L8.16982 8.06204H4.61719Z",
-            fill: "#FFC700"
-          }
-        )
-      ]
-    }
-  );
-}
-function GasField$2({ gasImg, item, fromChain }) {
-  const [gas, setGas] = useState({});
-  useEffect(() => {
-    var _a;
-    let tempGasObj = { amountInUSD: 0 };
-    (_a = item == null ? void 0 : item.fee) == null ? void 0 : _a.forEach((item2) => {
-      if (item2.source == "FROM_SOURCE_WALLET") {
-        tempGasObj.amountInUSD += Number(item2.amountInUSD);
-      }
-    });
-    setGas(tempGasObj);
-  }, [item]);
-  return /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-text-sm bw-items-center bw-gap-x-1", children: [
-    /* @__PURE__ */ jsx(Gas, { fill: "var(--tw-text-secondary)" }),
-    /* @__PURE__ */ jsxs("p", { children: [
-      "$",
-      fixString((gas == null ? void 0 : gas.amountInUSD) || 0, 6) || 0
-    ] })
-  ] });
-}
-function MaxOutput({ routes, handleShowAllRoutes, handleRoutesData, convertVal, fromChain, toChain, sort }) {
-  var _a, _b, _c;
-  const configuration = useStore((state) => state.configuration);
-  const { gasnew, defaultCoin } = images;
-  const [recommendedGas, setRecommendedGas] = useState({});
-  const [recommendedTime, setRecommendedTime] = useState({});
-  function handleOpCalc(item, arr, i) {
-    var _a2;
-    truncate((item == null ? void 0 : item.minOutputAmountDisplay) * ((_a2 = item == null ? void 0 : item.to) == null ? void 0 : _a2.lastPrice) || 0, 4);
-    let outputAmount = item.outputAmountDisplay * (convertVal || 0);
-    let opVal = outputAmount || 0;
-    let lastLength = (arr[arr.length - 1].outputAmountDisplay || "") * convertVal;
-    let firstLength = (arr[0].outputAmountDisplay || "") * convertVal;
-    let firstOpVal = sort == "asc" ? lastLength : firstLength;
-    let lastOpVal = sort == "asc" ? firstLength : lastLength;
-    if (i == 0 && sort !== "asc" || i == arr.length - 1 && sort == "asc") {
-      return {
-        val: /* @__PURE__ */ jsxs("p", { className: "bw-text-[10px] bw-text-text-secondary bw-font-normal", children: [
-          /* @__PURE__ */ jsx("span", { className: "bw-text-text-greentext", children: `+$${fixString(formatNumber(firstOpVal - lastOpVal), 12)}` }),
-          " Higher Output"
-        ] }),
-        isMax: true
-      };
-    } else if (i == arr.length - 1 && sort !== "asc" || i === 0 && sort == "asc") {
-      return {
-        val: /* @__PURE__ */ jsxs("p", { className: "bw-text-[10px] bw-text-text-secondary bw-font-normal", children: [
-          /* @__PURE__ */ jsx("span", { className: `${firstOpVal - lastOpVal === 0 ? "bw-text-text-greentext" : "bw-bg-background-container"}`, children: `-$${fixString(formatNumber(firstOpVal - lastOpVal), 12)}` }),
-          " ",
-          firstOpVal - lastOpVal === 0 ? "Higher Output" : "Less Output"
-        ] }),
-        isMax: firstOpVal - lastOpVal === 0 ? true : false
-      };
-    } else {
-      return {
-        val: /* @__PURE__ */ jsxs("p", { className: "bw-text-[10px] bw-text-text-secondary bw-font-normal", children: [
-          /* @__PURE__ */ jsx("span", { className: `${firstOpVal - opVal === 0 ? "bw-text-text-greentext" : "bw-bg-background-container"}`, children: `-$${fixString(formatNumber(firstOpVal - opVal), 12)}` }),
-          " ",
-          firstOpVal - opVal === 0 ? "Higher Output" : "Less Output"
-        ] }),
-        isMax: firstOpVal - opVal === 0 ? true : false
-      };
-    }
-  }
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "bw-h-[410px] bw-pt-2 bw-overflow-y-auto", children: (_c = (_b = (_a = routes.data) == null ? void 0 : _a.data) == null ? void 0 : _b.quotes) == null ? void 0 : _c.sort((a, b) => {
-    let opVal1 = Number(a.outputAmountDisplay || 0);
-    let opVal2 = Number(b.outputAmountDisplay || 0);
-    if (sort === "asc") {
-      return opVal1 - opVal2;
-    } else {
-      return opVal2 - opVal1;
-    }
-  }).map((item, i, arr) => {
-    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-    const calculatedOpVal = handleOpCalc(item, arr, i);
-    let outputVal = (item == null ? void 0 : item.outputAmountDisplay) || "";
-    let logoUrl = ((_b2 = (_a2 = item == null ? void 0 : item.providerDetails) == null ? void 0 : _a2.logoUrl) == null ? void 0 : _b2.length) ? (_c2 = item == null ? void 0 : item.providerDetails) == null ? void 0 : _c2.logoUrl : defaultCoin;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        onClick: () => {
-          handleRoutesData(item);
-          handleShowAllRoutes();
-        },
-        className: "bw-mb-4",
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              boxShadow: configuration && configuration.customTheme && ((_e = (_d = configuration.customTheme) == null ? void 0 : _d.shadow) == null ? void 0 : _e.boxShadow) || "1px 1px 7px rgba(0, 0, 0, 0.15)"
-            },
-            className: ` bw-w-[93%]  bw-mt-3 bw-cursor-pointer bw-ml-auto bw-mr-2 bw-flex bw-mb-8 bw-items-center bw-px-2 bw-relative bw-rounded-lg bw-pt-3 bw-pb-3 bw-border bw-border-border-primary`,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "bw-absolute bw-flex bw-items-center bw-gap-x-1 bw-bottom-[-10%] bw-self-center bw-right-[47%]", children: [
-                ((_f = item.tags) == null ? void 0 : _f.includes("BEST_OUTPUT")) ? /* @__PURE__ */ jsx(Routes, { name: "Max Output", children: /* @__PURE__ */ jsx("div", { className: "bw-w-[20px] bw-h-[20px]", children: /* @__PURE__ */ jsx(Maxop, { fill: "var(--tw-background-container)" }) }) }) : /* @__PURE__ */ jsx(Fragment, {}),
-                ((_g = item.tags) == null ? void 0 : _g.includes("CHEAP")) ? /* @__PURE__ */ jsx(Routes, { name: "Lowest Gas", children: /* @__PURE__ */ jsx("div", { className: "bw-w-[20px] bw-h-[20px]", children: /* @__PURE__ */ jsx(LowgasSvg, { fill: "var(--tw-background-container)" }) }) }) : /* @__PURE__ */ jsx(Fragment, {}),
-                ((_h = item.tags) == null ? void 0 : _h.includes("FAST")) ? /* @__PURE__ */ jsx("div", { className: "bw-w-[20px] bw-h-[20px]", children: /* @__PURE__ */ jsx(FastestSvg, { fill: "var(--tw-background-container)" }) }) : /* @__PURE__ */ jsx(Fragment, {})
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "bw-w-[35px] bw-h-[35px] bw-absolute bw-z-50 bw-left-[-5%] bw-top-[-16%]", children: /* @__PURE__ */ jsx("img", { src: logoUrl, className: "bw-rounded-lg ", width: 35, height: 35 }) }),
-              /* @__PURE__ */ jsxs("div", { className: "bw-absolute bw-text-[10px] bw-text-text-primary bw-font-normal bw-left-5 bw-top-1", children: [
-                /* @__PURE__ */ jsx("span", { className: `${calculatedOpVal.color}`, children: calculatedOpVal == null ? void 0 : calculatedOpVal.val }),
-                " "
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "bw-flex bw-w-full bw-mt-4  bw-justify-between bw-items-center", children: /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "bw-text-xs bw-font-semibold bw-text-text-primary", children: ((_i = item == null ? void 0 : item.providerDetails) == null ? void 0 : _i.name) || "" }),
-                /* @__PURE__ */ jsxs("p", { className: "bw-text-xs bw-font-normal bw-my-1 bw-text-text-secondary", children: [
-                  "via",
-                  " ",
-                  ((_j = item == null ? void 0 : item.protocolsUsed) == null ? void 0 : _j.length) > 2 ? (item == null ? void 0 : item.protocolsUsed.slice(0, 2).map((item2, i2, arr2) => {
-                    return i2 == arr2.length - 1 ? item2 : `${item2 + " >> "}`;
-                  })) + `+${((_k = item == null ? void 0 : item.protocolsUsed) == null ? void 0 : _k.length) - 2}` : item == null ? void 0 : item.protocolsUsed.map((item2, i2, arr2) => {
-                    return i2 == arr2.length - 1 ? item2 : `${item2 + " >> "}`;
-                  }),
-                  " "
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-1", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-1", children: [
-                    /* @__PURE__ */ jsx(Step, { fill: "var(--tw-text-secondary)" }),
-                    /* @__PURE__ */ jsxs("p", { className: "bw-text-xs bw-font-normal bw-text-text-secondary", children: [
-                      item.steps.length,
-                      " Step"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "bw-text-xs bw-font-normal bw-text-text-secondary", children: [
-                    " Slippage ",
-                    item.slippage / 100,
-                    "%"
-                  ] })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-flex-col bw-justify-between bw-w-full bw-items-end", children: [
-                /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: `   bw-relative bw-rounded-[50%] bw-w-[21px] bw-h-[21px] bw-border bw-border-border-primary ${!((_l = item.to) == null ? void 0 : _l.image) ? "" : "bw-bg-background-coin"}`, children: [
-                    ((_m = item.to) == null ? void 0 : _m.image) ? /* @__PURE__ */ jsx("img", { src: item.to.image, width: 20, height: 20, alt: "img", className: "bw-rounded-[50%] bw-max-w-[20px] bw-max-h-[20px]  bw-object-contain" }) : /* @__PURE__ */ jsx("img", { src: defaultCoin, width: 20, height: 20, alt: "img", className: "bw-rounded-[50%]" }),
-                    /* @__PURE__ */ jsxs("div", { className: `bw-bg-background-coin bw-absolute bw-bottom-[-30%] bw-right-[-15%] bw-rounded-[50%] bw-w-[12px] bw-h-[12px] bw-border bw-border-border-primary ${!(toChain == null ? void 0 : toChain.image) ? "" : "bw-bg-background-coin"}`, children: [
-                      " ",
-                      (toChain == null ? void 0 : toChain.image) ? /* @__PURE__ */ jsx("img", { src: toChain.image, width: 11, height: 11, className: "bw-rounded-[50%]", alt: "img" }) : /* @__PURE__ */ jsx("img", { src: defaultCoin, width: 11, height: 11, className: "bw-rounded-[50%]", alt: "img" })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx("p", { className: "bw-text-lg  bw-break-words bw-font-medium bw-text-text-primary", children: /* @__PURE__ */ jsx(OutputValueComp, { value: outputVal, decimal: 12 }) })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "bw-flex bw-text-xs bw-font-normal bw-mb-2  bw-items-center bw-gap-x-1", children: /* @__PURE__ */ jsxs("p", { className: "bw-text-text-secondary", children: [
-                  "$",
-                  /* @__PURE__ */ jsx(OutputValueComp, { value: ((_n = item.outputAmountDisplay * convertVal) == null ? void 0 : _n.toString()) || "", decimal: 10 })
-                ] }) }),
-                /* @__PURE__ */ jsxs("div", { className: "bw-text-sm  bw-flex bw-items-center bw-gap-x-2 bw-font-medium bw-text-text-secondary", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-text-sm bw-items-center bw-gap-x-1", children: [
-                    /* @__PURE__ */ jsx(ClockIcon, { fill: "var(--tw-text-secondary)" }),
-                    /* @__PURE__ */ jsxs("p", { children: [
-                      " ",
-                      item.estimatedTimeInSeconds >= 90 ? `${Math.round(truncate((item.estimatedTimeInSeconds || 60) / 60, 2) || 0)}min` : `${(item == null ? void 0 : item.estimatedTimeInSeconds) || 60} secs`
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx(GasField$2, { item, gasImg: gasnew, fromChain })
-                ] })
-              ] })
-            ]
-          }
-        )
-      },
-      i
-    );
-  }) }) });
-}
-function GasField$1({ gasImg, item, fromChain }) {
-  const [gas, setGas] = useState({});
-  useEffect(() => {
-    var _a;
-    let tempGasObj = { amountInUSD: 0 };
-    (_a = item == null ? void 0 : item.fee) == null ? void 0 : _a.forEach((item2) => {
-      if (item2.source == "FROM_SOURCE_WALLET") {
-        tempGasObj.amountInUSD += Number(item2.amountInUSD);
-      }
-    });
-    setGas(tempGasObj);
-  }, [item]);
-  return /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-text-sm bw-items-center bw-gap-x-1", children: [
-    /* @__PURE__ */ jsx(Gas, { fill: "var(--tw-text-secondary)" }),
-    /* @__PURE__ */ jsxs("p", { children: [
-      "$",
-      fixString((gas == null ? void 0 : gas.amountInUSD) || 0, 6) || 0
-    ] })
-  ] });
-}
-function LowerGas({ routes, handleShowAllRoutes, handleRoutesData, convertVal, fromChain, sort, toChain }) {
-  var _a, _b, _c;
-  const { gasnew, defaultCoin } = images;
-  const [recommendedOp, setRecommendedOp] = useState({});
-  const [recommendedTime, setRecommendedTime] = useState({});
-  const configuration = useStore((state) => state.configuration);
-  function handleOpCalc(item, arr, i) {
-    var _a2, _b2, _c2;
-    let tempGasObj = { amountInUSD: 0 };
-    (_a2 = item == null ? void 0 : item.fee) == null ? void 0 : _a2.forEach((item2) => {
-      if (item2.source == "FROM_SOURCE_WALLET") {
-        tempGasObj.amountInUSD += Number(item2.amountInUSD);
-      }
-    });
-    let gasVal = tempGasObj.amountInUSD;
-    let tempGasObj1 = { amountInUSD: 0 };
-    (_b2 = arr[0].fee) == null ? void 0 : _b2.forEach((item2) => {
-      if (item2.source == "FROM_SOURCE_WALLET") {
-        tempGasObj1.amountInUSD += Number(item2.amountInUSD);
-      }
-    });
-    let tempGasObj2 = { amountInUSD: 0 };
-    (_c2 = arr[arr.length - 1].fee) == null ? void 0 : _c2.forEach((item2) => {
-      if (item2.source == "FROM_SOURCE_WALLET") {
-        tempGasObj2.amountInUSD += Number(item2.amountInUSD);
-      }
-    });
-    let gasFirstVal = sort === "desc" ? tempGasObj2.amountInUSD : tempGasObj1.amountInUSD;
-    let gasLastVal = sort === "desc" ? tempGasObj1.amountInUSD : tempGasObj2.amountInUSD;
-    if (i == 0 && sort !== "desc" || i == arr.length - 1 && sort == "desc") {
-      return {
-        val: /* @__PURE__ */ jsxs("p", { className: "bw-text-[10px] bw-text-text-secondary bw-font-normal", children: [
-          /* @__PURE__ */ jsx("span", { className: "bw-text-text-greentext", children: `$${truncate(gasLastVal - gasFirstVal, 4)}` }),
-          " Cheaper"
-        ] }),
-        isMax: true
-      };
-    } else if (i === 0 && sort !== "desc") {
-      return {
-        val: /* @__PURE__ */ jsxs("p", { className: "bw-text-[10px] bw-text-text-secondary bw-font-normal", children: [
-          /* @__PURE__ */ jsx("span", { className: `${truncate(gasFirstVal - gasLastVal, 4) === 0 ? "bw-text-text-greentext" : "bw-bg-background-container"}`, children: `$${truncate(gasFirstVal - gasLastVal, 4)}` }),
-          " ",
-          truncate(gasFirstVal - gasLastVal, 4) === 0 ? "Cheaper" : "Higher"
-        ] }),
-        isMax: truncate(gasFirstVal - gasLastVal, 4) === 0 ? true : false
-      };
-    } else if (i == arr.length - 1 && sort == "desc") {
-      return {
-        val: /* @__PURE__ */ jsxs("p", { className: "bw-text-[10px] bw-text-text-secondary bw-font-normal", children: [
-          /* @__PURE__ */ jsx("span", { className: `${truncate(gasLastVal - gasFirstVal, 4) === 0 ? "bw-text-text-greentext" : "bw-bg-background-container"}`, children: `$${truncate(gasLastVal - gasFirstVal, 4)}` }),
-          " ",
-          truncate(gasLastVal - gasFirstVal, 4) ? "Cheaper" : "Higher"
-        ] }),
-        isMax: truncate(gasLastVal - gasFirstVal, 4) === 0 ? true : false
-      };
-    } else {
-      return {
-        val: /* @__PURE__ */ jsxs("p", { className: "bw-text-[10px] bw-text-text-secondary bw-font-normal", children: [
-          /* @__PURE__ */ jsx("span", { className: `${truncate(gasVal - gasFirstVal, 4) === 0 ? "bw-text-text-greentext" : "bw-bg-background-container"}`, children: `$${truncate(gasVal - gasFirstVal, 4)}` }),
-          " ",
-          truncate(gasVal - gasFirstVal, 4) ? "Cheaper" : "Higher"
-        ] }),
-        isMax: truncate(gasVal - gasFirstVal, 4) === 0 ? true : false
-      };
-    }
-  }
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "bw-h-[410px] bw-pt-2 bw-overflow-y-auto", children: (_c = (_b = (_a = routes == null ? void 0 : routes.data) == null ? void 0 : _a.data) == null ? void 0 : _b.quotes) == null ? void 0 : _c.sort((a, b) => {
-    var _a2, _b2;
-    let tempVal1 = { amountInUSD: 0 };
-    (_a2 = a == null ? void 0 : a.fee) == null ? void 0 : _a2.forEach((item) => {
-      if (item.source == "FROM_SOURCE_WALLET") {
-        tempVal1.amountInUSD += Number(item.amountInUSD);
-      }
-    });
-    let tempVal2 = { amountInUSD: 0 };
-    (_b2 = b == null ? void 0 : b.fee) == null ? void 0 : _b2.forEach((item) => {
-      if (item.source == "FROM_SOURCE_WALLET") {
-        tempVal2.amountInUSD += Number(item.amountInUSD);
-      }
-    });
-    let opVal1 = tempVal1.amountInUSD;
-    let opVal2 = tempVal2.amountInUSD;
-    if (sort === "asc") {
-      return opVal1 - opVal2;
-    } else if (sort === "none") {
-      return opVal1 - opVal2;
-    } else {
-      return opVal2 - opVal1;
-    }
-  }).map((item, i, arr) => {
-    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-    const calculatedOpVal = handleOpCalc(item, arr, i);
-    let outputVal = (item == null ? void 0 : item.outputAmountDisplay) || "";
-    let logoUrl = ((_b2 = (_a2 = item == null ? void 0 : item.providerDetails) == null ? void 0 : _a2.logoUrl) == null ? void 0 : _b2.length) ? (_c2 = item == null ? void 0 : item.providerDetails) == null ? void 0 : _c2.logoUrl : defaultCoin;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        onClick: () => {
-          handleRoutesData(item);
-          handleShowAllRoutes();
-        },
-        className: "bw-mb-4",
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              boxShadow: configuration && configuration.customTheme && ((_e = (_d = configuration.customTheme) == null ? void 0 : _d.shadow) == null ? void 0 : _e.boxShadow) || "1px 1px 7px rgba(0, 0, 0, 0.15)"
-            },
-            className: ` bw-w-[93%]  bw-mt-3 bw-cursor-pointer bw-ml-auto bw-mr-2 bw-flex bw-mb-8 bw-items-center bw-px-2 bw-relative bw-rounded-lg bw-pt-3 bw-pb-3 bw-border bw-border-border-primary`,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "bw-absolute bw-flex bw-items-center bw-gap-x-1 bw-bottom-[-10%] bw-self-center bw-right-[47%]", children: [
-                ((_f = item.tags) == null ? void 0 : _f.includes("CHEAP")) ? /* @__PURE__ */ jsx(Routes, { name: "Lowest Gas", children: /* @__PURE__ */ jsx("div", { className: "bw-w-[20px] bw-h-[20px]", children: /* @__PURE__ */ jsx(LowgasSvg, { fill: "var(--tw-background-container)" }) }) }) : /* @__PURE__ */ jsx(Fragment, {}),
-                ((_g = item.tags) == null ? void 0 : _g.includes("BEST_OUTPUT")) ? /* @__PURE__ */ jsx(Routes, { name: "Max Output", children: /* @__PURE__ */ jsx("div", { className: "bw-w-[20px] bw-h-[20px]", children: /* @__PURE__ */ jsx(Maxop, { fill: "var(--tw-background-container)" }) }) }) : /* @__PURE__ */ jsx(Fragment, {}),
-                ((_h = item.tags) == null ? void 0 : _h.includes("FAST")) ? /* @__PURE__ */ jsx(Routes, { name: "Fastest", children: /* @__PURE__ */ jsx("div", { className: "bw-w-[20px] bw-h-[20px]", children: /* @__PURE__ */ jsx(FastestSvg, { fill: "var(--tw-background-container)" }) }) }) : /* @__PURE__ */ jsx(Fragment, {})
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "bw-w-[35px] bw-h-[35px] bw-absolute bw-z-50 bw-left-[-5%] bw-top-[-16%]", children: /* @__PURE__ */ jsx("img", { src: logoUrl, className: "bw-rounded-lg ", width: 35, height: 35 }) }),
-              /* @__PURE__ */ jsxs("div", { className: "bw-absolute bw-text-[10px] bw-text-text-primary bw-font-normal bw-left-5 bw-top-1", children: [
-                /* @__PURE__ */ jsx("span", { className: `${calculatedOpVal.color}`, children: calculatedOpVal == null ? void 0 : calculatedOpVal.val }),
-                " "
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "bw-flex bw-w-full bw-mt-4  bw-justify-between bw-items-center", children: /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "bw-text-xs bw-font-semibold bw-text-text-primary", children: ((_i = item == null ? void 0 : item.providerDetails) == null ? void 0 : _i.name) || "" }),
-                /* @__PURE__ */ jsxs("p", { className: "bw-text-xs bw-font-normal bw-my-1 bw-text-text-secondary", children: [
-                  "via",
-                  " ",
-                  ((_j = item == null ? void 0 : item.protocolsUsed) == null ? void 0 : _j.length) > 2 ? (item == null ? void 0 : item.protocolsUsed.slice(0, 2).map((item2, i2, arr2) => {
-                    return i2 == arr2.length - 1 ? item2 : `${item2 + " >> "}`;
-                  })) + `+${((_k = item == null ? void 0 : item.protocolsUsed) == null ? void 0 : _k.length) - 2}` : item == null ? void 0 : item.protocolsUsed.map((item2, i2, arr2) => {
-                    return i2 == arr2.length - 1 ? item2 : `${item2 + " >> "}`;
-                  }),
-                  " "
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-1", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-1", children: [
-                    /* @__PURE__ */ jsx(Step, { fill: "var(--tw-text-secondary)" }),
-                    /* @__PURE__ */ jsxs("p", { className: "bw-text-xs bw-font-normal bw-text-text-secondary", children: [
-                      item.steps.length,
-                      " Step"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "bw-text-xs bw-font-normal bw-text-text-secondary", children: [
-                    " Slippage ",
-                    item.slippage / 100,
-                    "%"
-                  ] })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-flex-col bw-justify-between bw-w-full bw-items-end", children: [
-                /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: `    bw-relative bw-rounded-[50%] bw-w-[21px] bw-h-[21px] bw-border bw-border-border-primary ${!((_l = item.to) == null ? void 0 : _l.image) ? "" : "bw-bg-background-coin"}`, children: [
-                    ((_m = item.to) == null ? void 0 : _m.image) ? /* @__PURE__ */ jsx("img", { src: item.to.image, width: 20, height: 20, alt: "img", className: "bw-rounded-[50%] bw-max-w-[20px] bw-max-h-[20px]  bw-object-contain" }) : /* @__PURE__ */ jsx("img", { src: defaultCoin, width: 20, height: 20, alt: "img", className: "bw-rounded-[50%]" }),
-                    /* @__PURE__ */ jsxs("div", { className: ` bw-absolute bw-bottom-[-30%] bw-right-[-15%] bw-rounded-[50%] bw-w-[12px] bw-h-[12px] bw-border bw-border-border-primary ${!(toChain == null ? void 0 : toChain.image) ? "" : "bw-bg-background-coin"}`, children: [
-                      " ",
-                      (toChain == null ? void 0 : toChain.image) ? /* @__PURE__ */ jsx("img", { src: toChain.image, width: 11, height: 11, className: "bw-rounded-[50%]", alt: "img" }) : /* @__PURE__ */ jsx("img", { src: defaultCoin, width: 11, height: 11, className: "bw-rounded-[50%]", alt: "img" })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx("p", { className: "bw-text-lg  bw-break-words bw-font-medium bw-text-text-primary", children: /* @__PURE__ */ jsx(OutputValueComp, { value: outputVal, decimal: 12 }) })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "bw-flex bw-text-xs bw-font-normal bw-mb-2  bw-items-center bw-gap-x-1", children: /* @__PURE__ */ jsxs("p", { className: "bw-text-text-secondary", children: [
-                  "$",
-                  /* @__PURE__ */ jsx(OutputValueComp, { value: ((_n = (item.outputAmountDisplay || "") * convertVal) == null ? void 0 : _n.toString()) || "", decimal: 10 })
-                ] }) }),
-                /* @__PURE__ */ jsxs("div", { className: "bw-text-sm  bw-flex bw-items-center bw-gap-x-2 bw-font-medium bw-text-text-secondary", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-text-sm bw-items-center bw-gap-x-1", children: [
-                    /* @__PURE__ */ jsx(ClockIcon, { fill: "var(--tw-text-secondary)" }),
-                    /* @__PURE__ */ jsxs("p", { children: [
-                      " ",
-                      item.estimatedTimeInSeconds >= 90 ? `${Math.round(truncate((item.estimatedTimeInSeconds || 60) / 60, 2) || 0)}min` : `${(item == null ? void 0 : item.estimatedTimeInSeconds) || 60} secs`
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx(GasField$1, { item, gasImg: gasnew, fromChain })
-                ] })
-              ] })
-            ]
-          }
-        )
-      },
-      i
-    );
-  }) }) });
-}
-function GasField({ gasImg, item, fromChain }) {
-  const [gas, setGas] = useState({});
-  useEffect(() => {
-    var _a;
-    let tempGasObj = { amountInUSD: 0 };
-    (_a = item == null ? void 0 : item.fee) == null ? void 0 : _a.forEach((item2) => {
-      if (item2.source == "FROM_SOURCE_WALLET") {
-        tempGasObj.amountInUSD += Number(item2.amountInUSD);
-      }
-    });
-    setGas(tempGasObj);
-  }, [item]);
-  return /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-text-sm bw-items-center bw-gap-x-1", children: [
-    /* @__PURE__ */ jsx(Gas, { fill: "var(--tw-text-secondary)" }),
-    /* @__PURE__ */ jsxs("p", { children: [
-      "$",
-      fixString((gas == null ? void 0 : gas.amountInUSD) || 0, 6) || 0
-    ] })
-  ] });
-}
-function Fastest({ routes, handleShowAllRoutes, handleRoutesData, convertVal, fromChain, sort, toChain }) {
-  var _a, _b, _c;
-  const { gasnew, defaultCoin } = images;
-  const [recommendedGas, setRecommendedGas] = useState({});
-  const [recommendedOp, setRecommendedOp] = useState({});
-  const configuration = useStore((state) => state.configuration);
-  function handleOpCalc(item, arr, i) {
-    let opVal = truncate((item.estimatedTimeInSeconds || 60) / 60, 2) || 0;
-    let firstOpVal = sort == "asc" ? truncate((arr[arr.length - 1].estimatedTimeInSeconds || 60) / 60, 2) || 0 : truncate((arr[0].estimatedTimeInSeconds || 60) / 60, 2) || 0;
-    let lastOpVal = sort == "asc" ? truncate((arr[0].estimatedTimeInSeconds || 60) / 60, 2) || 0 : truncate((arr[arr.length - 1].estimatedTimeInSeconds || 60) / 60, 2) || 0;
-    if (i == 0 && sort !== "asc" || i == arr.length - 1 && sort == "asc") {
-      return {
-        val: /* @__PURE__ */ jsxs("p", { className: "bw-text-[10px] bw-text-text-secondary bw-font-normal", children: [
-          /* @__PURE__ */ jsx("span", { className: "bw-text-text-greentext", children: `+${truncate(lastOpVal - firstOpVal || 0, 2)} Mins` }),
-          " Faster"
-        ] }),
-        isMax: true
-      };
-    } else if (i == arr.length - 1 && sort !== "asc" || i === 0 && sort == "asc") {
-      return {
-        val: /* @__PURE__ */ jsxs("p", { className: "bw-text-[10px] bw-text-text-secondary bw-font-normal", children: [
-          /* @__PURE__ */ jsx("span", { className: `${firstOpVal - lastOpVal === 0 ? "bw-text-text-greentext" : "bw-bg-background-container"}`, children: `${truncate(lastOpVal - firstOpVal, 2)} Mins` }),
-          " ",
-          firstOpVal - lastOpVal === 0 ? "Faster" : "Slower"
-        ] }),
-        isMax: firstOpVal - lastOpVal === 0 ? true : false
-      };
-    } else {
-      return {
-        val: /* @__PURE__ */ jsxs("p", { className: "bw-text-[10px] bw-text-text-secondary bw-font-normal", children: [
-          /* @__PURE__ */ jsx("span", { className: `${firstOpVal - opVal === 0 ? "bw-text-text-greentext" : "bw-bg-background-container"}`, children: `${truncate(opVal - firstOpVal, 2)} Mins` }),
-          " ",
-          firstOpVal - opVal === 0 ? "Faster" : "Slower"
-        ] }),
-        isMax: firstOpVal - opVal === 0 ? true : false
-      };
-    }
-  }
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "bw-h-[410px] bw-pt-2 bw-overflow-y-auto", children: (_c = (_b = (_a = routes.data) == null ? void 0 : _a.data) == null ? void 0 : _b.quotes) == null ? void 0 : _c.sort((a, b) => {
-    let opVal1 = truncate((a.estimatedTimeInSeconds || 60) / 60, 2) || 0;
-    let opVal2 = truncate((b.estimatedTimeInSeconds || 60) / 60, 2) || 0;
-    if (sort === "asc") {
-      return opVal2 - opVal1;
-    } else {
-      return opVal1 - opVal2;
-    }
-  }).map((item, i, arr) => {
-    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-    const calculatedOpVal = handleOpCalc(item, arr, i);
-    let outputVal = (item == null ? void 0 : item.outputAmountDisplay) || "";
-    let logoUrl = ((_b2 = (_a2 = item == null ? void 0 : item.providerDetails) == null ? void 0 : _a2.logoUrl) == null ? void 0 : _b2.length) ? (_c2 = item == null ? void 0 : item.providerDetails) == null ? void 0 : _c2.logoUrl : defaultCoin;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        onClick: () => {
-          handleRoutesData(item);
-          handleShowAllRoutes();
-        },
-        className: "bw-mb-4",
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              boxShadow: configuration && configuration.customTheme && ((_e = (_d = configuration.customTheme) == null ? void 0 : _d.shadow) == null ? void 0 : _e.boxShadow) || "1px 1px 7px rgba(0, 0, 0, 0.15)"
-            },
-            className: ` bw-w-[93%]  bw-mt-3 bw-cursor-pointer bw-ml-auto bw-mr-2 bw-flex bw-mb-8 bw-items-center bw-px-2 bw-relative bw-rounded-lg bw-pt-3 bw-pb-3 bw-border bw-border-border-primary`,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "bw-absolute bw-flex bw-items-center bw-gap-x-1 bw-bottom-[-10%] bw-self-center bw-right-[47%]", children: [
-                ((_f = item.tags) == null ? void 0 : _f.includes("FAST")) ? /* @__PURE__ */ jsx(Routes, { name: "Fastest", children: /* @__PURE__ */ jsx("div", { className: "bw-w-[20px] bw-h-[20px]", children: /* @__PURE__ */ jsx(FastestSvg, { fill: "var(--tw-background-container)" }) }) }) : /* @__PURE__ */ jsx(Fragment, {}),
-                ((_g = item.tags) == null ? void 0 : _g.includes("CHEAP")) ? /* @__PURE__ */ jsx(Routes, { name: "Lowest Gas", children: /* @__PURE__ */ jsx("div", { className: "bw-w-[20px] bw-h-[20px]", children: /* @__PURE__ */ jsx(LowgasSvg, { fill: "var(--tw-background-container)" }) }) }) : /* @__PURE__ */ jsx(Fragment, {}),
-                ((_h = item.tags) == null ? void 0 : _h.includes("BEST_OUTPUT")) ? /* @__PURE__ */ jsx(Routes, { name: "Max Output", children: /* @__PURE__ */ jsx("div", { className: "bw-w-[20px] bw-h-[20px]", children: /* @__PURE__ */ jsx(Maxop, { fill: "var(--tw-background-container)" }) }) }) : /* @__PURE__ */ jsx(Fragment, {})
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "bw-w-[35px] bw-h-[35px] bw-absolute bw-z-50 bw-left-[-5%] bw-top-[-16%]", children: /* @__PURE__ */ jsx("img", { src: logoUrl, className: "bw-rounded-lg ", width: 35, height: 35 }) }),
-              /* @__PURE__ */ jsxs("div", { className: "bw-absolute bw-text-[10px] bw-text-text-primary bw-font-normal bw-left-5 bw-top-1", children: [
-                /* @__PURE__ */ jsx("span", { className: `${calculatedOpVal.color}`, children: calculatedOpVal == null ? void 0 : calculatedOpVal.val }),
-                " "
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "bw-flex bw-w-full bw-mt-4  bw-justify-between bw-items-center", children: /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "bw-text-xs bw-font-semibold bw-text-text-primary", children: ((_i = item == null ? void 0 : item.providerDetails) == null ? void 0 : _i.name) || "" }),
-                /* @__PURE__ */ jsxs("p", { className: "bw-text-xs bw-font-normal bw-my-1 bw-text-text-secondary", children: [
-                  "via",
-                  " ",
-                  ((_j = item == null ? void 0 : item.protocolsUsed) == null ? void 0 : _j.length) > 2 ? (item == null ? void 0 : item.protocolsUsed.slice(0, 2).map((item2, i2, arr2) => {
-                    return i2 == arr2.length - 1 ? item2 : `${item2 + " >> "}`;
-                  })) + `+${((_k = item == null ? void 0 : item.protocolsUsed) == null ? void 0 : _k.length) - 2}` : item == null ? void 0 : item.protocolsUsed.map((item2, i2, arr2) => {
-                    return i2 == arr2.length - 1 ? item2 : `${item2 + " >> "}`;
-                  }),
-                  " "
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-1", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-1", children: [
-                    /* @__PURE__ */ jsx(Step, { fill: "var(--tw-text-secondary)" }),
-                    /* @__PURE__ */ jsxs("p", { className: "bw-text-xs bw-font-normal bw-text-text-secondary", children: [
-                      item.steps.length,
-                      " Step"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "bw-text-xs bw-font-normal bw-text-text-secondary", children: [
-                    " Slippage ",
-                    item.slippage / 100,
-                    "%"
-                  ] })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-flex-col bw-justify-between bw-w-full bw-items-end", children: [
-                /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: ` bw-relative bw-rounded-[50%] bw-w-[21px] bw-h-[21px] bw-border bw-border-border-primary ${!((_l = item == null ? void 0 : item.to) == null ? void 0 : _l.image) ? "" : "bw-bg-background-coin"}`, children: [
-                    ((_m = item.to) == null ? void 0 : _m.image) ? /* @__PURE__ */ jsx("img", { src: item.to.image, width: 20, height: 20, alt: "img", className: "bw-rounded-[50%] bw-max-w-[20px] bw-max-h-[20px]  bw-object-contain" }) : /* @__PURE__ */ jsx("img", { src: defaultCoin, width: 20, height: 20, alt: "img", className: "bw-rounded-[50%]" }),
-                    /* @__PURE__ */ jsxs("div", { className: ` bw-absolute bw-bottom-[-30%] bw-right-[-15%] bw-rounded-[50%] bw-w-[12px] bw-h-[12px] bw-border bw-border-border-primary ${!(toChain == null ? void 0 : toChain.image) ? "" : "bw-bg-background-coin"}`, children: [
-                      " ",
-                      (toChain == null ? void 0 : toChain.image) ? /* @__PURE__ */ jsx("img", { src: toChain.image, width: 11, height: 11, className: "bw-rounded-[50%]", alt: "img" }) : /* @__PURE__ */ jsx("img", { src: defaultCoin, width: 11, height: 11, className: "bw-rounded-[50%]", alt: "img" })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx("p", { className: "bw-text-lg  bw-break-words bw-font-medium bw-text-text-primary", children: /* @__PURE__ */ jsx(OutputValueComp, { value: outputVal, decimal: 12 }) })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "bw-flex bw-text-xs bw-font-normal bw-mb-2  bw-items-center bw-gap-x-1", children: /* @__PURE__ */ jsxs("p", { className: "bw-text-text-secondary", children: [
-                  "$",
-                  /* @__PURE__ */ jsx(OutputValueComp, { value: ((_n = (item.outputAmountDisplay || "") * convertVal) == null ? void 0 : _n.toString()) || "", decimal: 10 })
-                ] }) }),
-                /* @__PURE__ */ jsxs("div", { className: "bw-text-sm  bw-flex bw-items-center bw-gap-x-2 bw-font-medium bw-text-text-secondary", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-text-sm bw-items-center bw-gap-x-1", children: [
-                    /* @__PURE__ */ jsx(ClockIcon, { fill: "var(--tw-text-secondary)" }),
-                    /* @__PURE__ */ jsx("p", { children: item.estimatedTimeInSeconds >= 90 ? `${Math.round(truncate((item.estimatedTimeInSeconds || 60) / 60, 2)) || 0}min` : `${(item == null ? void 0 : item.estimatedTimeInSeconds) || 60} secs` })
-                  ] }),
-                  /* @__PURE__ */ jsx(GasField, { item, gasImg: gasnew, fromChain })
-                ] })
-              ] })
-            ]
-          }
-        )
-      },
-      i
-    );
-  }) }) });
-}
-const Label1 = React__default.memo(function({ maxOpSort, value }) {
-  var _a, _b;
-  const configuration = useStore((state) => state.configuration);
-  return /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "bw-w-[16px] bw-h-[16px]", children: /* @__PURE__ */ jsx(
-      Maxop,
-      {
-        fill: "var(--tw-background-container)",
-        spinnerColor: (_a = configuration == null ? void 0 : configuration.gradientStyle) == null ? void 0 : _a.spinnerColor,
-        stopColor: (_b = configuration == null ? void 0 : configuration.gradientStyle) == null ? void 0 : _b.stopColor
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: `bw-text-xs ${value == 1 ? "bw-text-text-primary bw-font-medium" : "bw-text-text-secondary bw-font-medium"}`,
-        children: "Max Output"
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-gap-y-[2px] bw-items-center bw-flex-col bw-justify-center", children: [
-      /* @__PURE__ */ jsx(
-        SortUp,
-        {
-          isSelected: maxOpSort == "asc" ? true : false,
-          fill: "var(--tw-text-primary)"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SortDown,
-        {
-          fill: "var(--tw-text-primary)",
-          isSelected: maxOpSort == "desc" ? true : false
-        }
-      )
-    ] })
-  ] });
-});
-const Label2 = React__default.memo(function({ lowestGasSort, value }) {
-  return /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "bw-w-[16px] bw-h-[16px]", children: /* @__PURE__ */ jsx(LowgasSvg, { fill: "var(--tw-background-container)" }) }),
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: `bw-text-xs ${value == 2 ? "bw-text-text-primary bw-font-medium" : "bw-text-text-secondary bw-font-medium"}`,
-        children: "Lowest Gas"
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-gap-y-[2px] bw-items-center bw-flex-col bw-justify-center", children: [
-      /* @__PURE__ */ jsx(
-        SortUp,
-        {
-          fill: "var(--tw-text-primary)",
-          isSelected: lowestGasSort === "asc" ? true : false
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SortDown,
-        {
-          fill: "var(--tw-text-primary)",
-          isSelected: lowestGasSort === "desc" ? true : false
-        }
-      )
-    ] })
-  ] });
-});
-const Label3 = React__default.memo(function({ fastestSort, value }) {
-  return /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-center bw-gap-x-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "bw-w-[16px] bw-h-[16px]", children: /* @__PURE__ */ jsx(FastestSvg, { fill: "var(--tw-background-container)" }) }),
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: `bw-text-xs ${value == 3 ? "bw-text-text-primary bw-font-medium" : "bw-text-text-secondary bw-font-medium"}`,
-        children: "Fastest"
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-gap-y-[2px] bw-items-center bw-flex-col bw-justify-center", children: [
-      /* @__PURE__ */ jsx(
-        SortUp,
-        {
-          fill: "var(--tw-text-primary)",
-          isSelected: fastestSort === "asc" ? true : false
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SortDown,
-        {
-          fill: "var(--tw-text-primary)",
-          isSelected: fastestSort === "desc" ? true : false
-        }
-      )
-    ] })
-  ] });
-});
-function TabComp({
-  routes,
-  handleShowAllRoutes,
-  handleRoutesData,
-  convertVal,
-  fromChain,
-  toChain
-}) {
-  const [value, setValue] = useState("1");
-  const [maxOpSort, setMaxOpSort] = useState("none");
-  const [lowestGasSort, setLowestGasSort] = useState("none");
-  const [fastestSort, setFastestSort] = useState("none");
-  const configuration = useStore((state) => state.configuration);
-  function handleValue(e, val) {
-    setValue(val);
-  }
-  return /* @__PURE__ */ jsxs(TabContext, { value, children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: (theme) => ({
-          borderBottom: 1,
-          borderColor: "var(--tw-border-primary)",
-          width: "max-content",
-          [theme.breakpoints.down("sm")]: { width: "100%", overflowX: "auto" },
-          marginX: "auto"
-        }),
-        children: /* @__PURE__ */ jsxs(
-          TabList,
-          {
-            TabIndicatorProps: {
-              style: { background: "var(--tw-text-secondary)" }
-            },
-            sx: (theme) => ({
-              width: "max-content",
-              [theme.breakpoints.down("sm")]: {
-                width: "100%",
-                overflowX: "auto"
-              }
-            }),
-            onChange: handleValue,
-            "aria-label": "lab API tabs example",
-            children: [
-              /* @__PURE__ */ jsx(
-                Tab,
-                {
-                  onClick: () => {
-                    if (value == "1")
-                      setMaxOpSort((prev) => {
-                        if (prev == "none") {
-                          return "asc";
-                        } else if (prev === "asc") {
-                          return "desc";
-                        } else {
-                          return "none";
-                        }
-                      });
-                    else return true;
-                  },
-                  disableRipple: true,
-                  sx: (theme) => {
-                    var _a;
-                    return {
-                      textTransform: "none",
-                      paddingBottom: "0px",
-                      fontFamily: ((_a = configuration == null ? void 0 : configuration.customTheme) == null ? void 0 : _a.fontFamily) || "lato",
-                      width: "120px",
-                      paddingX: "5px",
-                      [theme.breakpoints.down("sm")]: {
-                        minWidth: "33%",
-                        paddingX: "auto"
-                      }
-                    };
-                  },
-                  label: /* @__PURE__ */ jsx(Label1, { maxOpSort, value }),
-                  value: "1"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tab,
-                {
-                  onClick: () => {
-                    if (value == "2")
-                      setLowestGasSort((prev) => {
-                        if (prev == "none") {
-                          return "asc";
-                        } else if (prev === "asc") {
-                          return "desc";
-                        } else {
-                          return "none";
-                        }
-                      });
-                    else return true;
-                  },
-                  disableRipple: true,
-                  sx: (theme) => {
-                    var _a;
-                    return {
-                      textTransform: "none",
-                      paddingBottom: "0px",
-                      fontFamily: ((_a = configuration == null ? void 0 : configuration.customTheme) == null ? void 0 : _a.fontFamily) || "lato",
-                      width: "120px",
-                      paddingX: "5px",
-                      paddingLeft: "10px",
-                      [theme.breakpoints.down("sm")]: {
-                        minWidth: "33%",
-                        paddingX: "auto",
-                        paddingLeft: "auto"
-                      }
-                    };
-                  },
-                  label: /* @__PURE__ */ jsx(Label2, { lowestGasSort, value }),
-                  value: "2"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tab,
-                {
-                  onClick: () => {
-                    if (value == "3")
-                      setFastestSort((prev) => {
-                        if (prev == "none") {
-                          return "asc";
-                        } else if (prev === "asc") {
-                          return "desc";
-                        } else {
-                          return "none";
-                        }
-                      });
-                    else return true;
-                  },
-                  disableRipple: true,
-                  sx: (theme) => {
-                    var _a;
-                    return {
-                      textTransform: "none",
-                      paddingBottom: "0px",
-                      fontFamily: ((_a = configuration == null ? void 0 : configuration.customTheme) == null ? void 0 : _a.fontFamily) || "lato",
-                      width: "110px",
-                      paddingX: "5px",
-                      [theme.breakpoints.down("sm")]: {
-                        minWidth: "33%",
-                        paddingX: "auto"
-                      }
-                    };
-                  },
-                  label: /* @__PURE__ */ jsx(Label3, { fastestSort, value }),
-                  value: "3"
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TabPanel,
-      {
-        sx: { paddingLeft: "0px", paddingRight: "0px", paddingTop: "10px" },
-        value: "1",
-        children: /* @__PURE__ */ jsx(
-          MaxOutput,
-          {
-            routes,
-            handleRoutesData,
-            handleShowAllRoutes,
-            convertVal,
-            fromChain,
-            sort: maxOpSort,
-            toChain
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TabPanel,
-      {
-        sx: { paddingLeft: "0px", paddingRight: "0px", paddingTop: "10px" },
-        value: "2",
-        children: /* @__PURE__ */ jsx(
-          LowerGas,
-          {
-            routes,
-            handleRoutesData,
-            handleShowAllRoutes,
-            convertVal,
-            fromChain,
-            sort: lowestGasSort,
-            toChain
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TabPanel,
-      {
-        sx: { paddingLeft: "0px", paddingRight: "0px", paddingTop: "10px" },
-        value: "3",
-        children: /* @__PURE__ */ jsx(
-          Fastest,
-          {
-            routes,
-            handleRoutesData,
-            handleShowAllRoutes,
-            convertVal,
-            fromChain,
-            sort: fastestSort,
-            toChain
-          }
-        )
-      }
-    )
-  ] });
-}
-function RoutesBack({ fill1, fill2 }) {
-  return /* @__PURE__ */ jsxs("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12.4758", cy: "12.4774", r: "11.9774", transform: "rotate(90 12.4758 12.4774)", stroke: fill1 }),
-    /* @__PURE__ */ jsx("path", { d: "M14.4375 6.27832L8.45786 12.258L14.4122 18.2121", stroke: fill2, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
-  ] });
-}
-function AllRoutes({ routes, handleShowAllRoutes, handleRoutesData, convertVal, amount }) {
-  var _a, _b, _c;
-  const fromChain = useStore((state) => state.fromChain);
-  const fromCoin = useStore((state) => state.fromCoin);
-  const toChain = useStore((state) => state.toChain);
-  const { defaultCoin } = images;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-w-full bw-relative bw-justify-between bw-mb-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "bw-flex bw-items-start  bw-gap-x-3", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => {
-              handleShowAllRoutes();
-            },
-            className: "bw-mt-1",
-            children: /* @__PURE__ */ jsx(RoutesBack, { fill1: "var(--tw-background-secondary)", fill2: "var(--tw-text-secondary)" })
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "bw-text-lg bw-font-normal bw-text-text-secondary", children: [
-          /* @__PURE__ */ jsxs("div", { className: "", children: [
-            /* @__PURE__ */ jsx("span", { className: "", children: ((_c = (_b = (_a = routes.data) == null ? void 0 : _a.data) == null ? void 0 : _b.quotes) == null ? void 0 : _c.length) || 0 }),
-            " Routes For"
-          ] }),
-          " ",
-          /* @__PURE__ */ jsx("p", { className: "bw-text-xs bw-font-bold bw-mt-2", children: `${fromCoin == null ? void 0 : fromCoin.coin} on ${fromChain == null ? void 0 : fromChain.chain}` })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: " bw-flex bw-items-center bw-gap-x-2", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "bw-text-2xl bw-font-bold bw-mb-2 bw-leading-none bw-text-right bw-text-text-primary", children: amount }),
-          /* @__PURE__ */ jsxs("p", { className: "bw-text-sm bw-font-bold bw-text-right bw-text-text-secondary", children: [
-            "$",
-            formatNumber(amount * (fromCoin == null ? void 0 : fromCoin.lastPrice) || 0, 10)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "  bw-bg-background-coin bw-flex bw-justify-center bw-items-center bw-mb-2 bw-relative bw-rounded-[50%] bw-w-[35px] bw-h-[35px] bw-border bw-border-border-primary", children: [
-          (fromCoin == null ? void 0 : fromCoin.image) ? /* @__PURE__ */ jsx("img", { src: fromCoin.image, width: 34, height: 34, alt: "img", className: "bw-rounded-[50%] bw-max-w-[34px] bw-max-h-[34px]  bw-object-contain bw-min-w-[34px] bw-h-[34px]" }) : /* @__PURE__ */ jsx("img", { src: defaultCoin, width: 34, height: 34, alt: "img", className: "bw-rounded-[50%] bw-min-w-[34px] bw-h-[34px]" }),
-          /* @__PURE__ */ jsxs("div", { className: "bw-bg-background-coin bw-absolute bw-bottom-[-30%] bw-right-4 bw-rounded-[50%] bw-w-[19px] bw-h-[19px] bw-border bw-border-border-primary", children: [
-            " ",
-            (fromCoin == null ? void 0 : fromCoin.image) ? /* @__PURE__ */ jsx("img", { src: fromChain.image, width: 18, height: 18, className: "bw-rounded-[50%]", alt: "img" }) : /* @__PURE__ */ jsx("img", { src: defaultCoin, width: 18, height: 18, className: "bw-rounded-[50%]", alt: "img" })
-          ] })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(TabComp, { routes, handleShowAllRoutes, handleRoutesData, convertVal, fromChain, toChain })
-  ] });
-}
-export {
-  AllRoutes as default
-};