@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/components/TokenList/TokenListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenListItem.js","names":["ListItem","IconButton","ListItemButton"],"sources":["../../../../src/components/TokenList/TokenListItem.tsx"],"sourcesContent":["import type { StaticToken } from '@lifi/sdk'\nimport { ChainType } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport {\n  Avatar,\n  Box,\n  ListItemAvatar,\n  ListItemText,\n  listItemSecondaryActionClasses,\n  Skeleton,\n  Slide,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport type { JSX, MouseEventHandler } from 'react'\nimport { memo, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLongPress } from '../../hooks/useLongPress.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { ListItemButton } from '../ListItem/ListItemButton.js'\nimport { PinTokenButton } from './PinTokenButton.js'\nimport { IconButton, ListItem } from './TokenList.style.js'\nimport type {\n  TokenListItemAvatarProps,\n  TokenListItemButtonProps,\n  TokenListItemProps,\n} from './types.js'\n\nexport const TokenListItem: React.FC<TokenListItemProps> = memo(\n  ({\n    onClick,\n    size,\n    start,\n    token,\n    chain,\n    isBalanceLoading,\n    startAdornment,\n    endAdornment,\n    selected,\n    onShowTokenDetails,\n  }) => {\n    return (\n      <ListItem\n        style={{\n          height: `${size}px`,\n          transform: `translateY(${start}px)`,\n          padding: 0,\n        }}\n      >\n        {startAdornment}\n        <TokenListItemButton\n          token={token}\n          isBalanceLoading={isBalanceLoading}\n          onClick={onClick}\n          chain={chain}\n          selected={selected}\n          onShowTokenDetails={onShowTokenDetails}\n        />\n        {endAdornment}\n      </ListItem>\n    )\n  }\n)\n\nconst TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {\n  const [isImageLoading, setIsImageLoading] = useState(true)\n\n  return (\n    <Avatar\n      src={token.logoURI}\n      alt={token.symbol}\n      sx={(theme) =>\n        isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null\n      }\n      onLoad={() => setIsImageLoading(false)}\n    >\n      {token.symbol?.[0]}\n    </Avatar>\n  )\n})\n\ninterface OpenTokenDetailsButtonProps {\n  tokenAddress: string | undefined\n  withoutContractAddress: boolean\n  chainId: number\n  onClick: (\n    tokenAddress: string,\n    withoutContractAddress: boolean,\n    chainId: number\n  ) => void\n}\n\nconst OpenTokenDetailsButton = ({\n  tokenAddress,\n  withoutContractAddress,\n  chainId,\n  onClick,\n}: OpenTokenDetailsButtonProps) => {\n  if (!tokenAddress) {\n    return null\n  }\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={(e) => {\n        e.stopPropagation()\n        e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n        onClick(tokenAddress, withoutContractAddress, chainId)\n      }}\n    >\n      <InfoOutlinedIcon />\n    </IconButton>\n  )\n}\n\nconst TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(\n  ({\n    onClick,\n    token,\n    chain,\n    isBalanceLoading,\n    selected,\n    onShowTokenDetails,\n  }) => {\n    const { t } = useTranslation()\n    const container = useRef(null)\n    const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)\n    const [showAddress, setShowAddress] = useState(false)\n\n    const withoutContractAddress = chain?.chainType === ChainType.UTXO\n\n    const onMouseEnter = () => {\n      timeoutId.current = setTimeout(() => {\n        if (token.address) {\n          setShowAddress(true)\n        }\n      }, 350)\n    }\n\n    const onMouseLeave = () => {\n      clearTimeout(timeoutId.current)\n      if (showAddress) {\n        setShowAddress(false)\n      }\n    }\n\n    const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {\n      e.stopPropagation()\n      onClick?.(token.address, token.chainId)\n    }\n\n    const tokenAmount = useMemo(\n      () => formatTokenAmount(token.amount, token.decimals),\n      [token.amount, token.decimals]\n    )\n\n    const tokenPrice = useMemo(\n      () => formatTokenPrice(token.amount, token.priceUSD, token.decimals),\n      [token.amount, token.priceUSD, token.decimals]\n    )\n\n    const longPressEvents = useLongPress(() =>\n      onShowTokenDetails(token.address, withoutContractAddress, token.chainId)\n    )\n\n    return (\n      <ListItemButton\n        onClick={handleClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        {...longPressEvents}\n        dense\n        selected={selected}\n        sx={{\n          height: 60,\n          marginBottom: '4px',\n        }}\n      >\n        <ListItemAvatar>\n          {chain ? (\n            <TokenAvatar\n              token={token as StaticToken}\n              chain={chain}\n              tokenAvatarSize={40}\n              chainAvatarSize={16}\n            />\n          ) : (\n            <TokenListItemAvatar token={token} />\n          )}\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n              {token.symbol}\n              {!token.verified && (\n                <Tooltip\n                  title={t('warning.message.unverifiedToken')}\n                  placement=\"top\"\n                  arrow\n                >\n                  <WarningRounded\n                    sx={{\n                      display: 'flex',\n                      fontSize: 16,\n                      color: 'warning.main',\n                      cursor: 'help',\n                    }}\n                  />\n                </Tooltip>\n              )}\n            </Box>\n          }\n          slotProps={{\n            secondary: {\n              component: 'div',\n            },\n          }}\n          secondary={\n            withoutContractAddress ? (\n              <Box\n                ref={container}\n                sx={{\n                  height: 20,\n                  display: 'flex',\n                }}\n              >\n                <Box\n                  sx={{\n                    pt: 0.25,\n                  }}\n                >\n                  {token.name}\n                </Box>\n                <Box\n                  sx={{\n                    position: 'relative',\n                  }}\n                >\n                  <Slide\n                    direction=\"up\"\n                    in={showAddress}\n                    container={container.current}\n                    style={{\n                      position: 'absolute',\n                    }}\n                    appear={false}\n                    mountOnEnter\n                  >\n                    <Box>\n                      <OpenTokenDetailsButton\n                        tokenAddress={token.address}\n                        withoutContractAddress={withoutContractAddress}\n                        chainId={token.chainId}\n                        onClick={onShowTokenDetails}\n                      />\n                      <PinTokenButton\n                        chainId={token.chainId}\n                        tokenAddress={token.address}\n                      />\n                    </Box>\n                  </Slide>\n                </Box>\n              </Box>\n            ) : (\n              <Box\n                ref={container}\n                sx={{\n                  position: 'relative',\n                  height: 20,\n                }}\n              >\n                <Slide\n                  direction=\"down\"\n                  in={!showAddress}\n                  container={container.current}\n                  style={{\n                    position: 'absolute',\n                  }}\n                  appear={false}\n                >\n                  <Box\n                    sx={{\n                      pt: 0.25,\n                    }}\n                  >\n                    {token.name}\n                  </Box>\n                </Slide>\n                <Slide\n                  direction=\"up\"\n                  in={showAddress}\n                  container={container.current}\n                  style={{\n                    position: 'absolute',\n                  }}\n                  appear={false}\n                  mountOnEnter\n                >\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 0.5,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        pt: 0.125,\n                      }}\n                    >\n                      {shortenAddress(token.address)}\n                    </Box>\n                    <Box>\n                      <OpenTokenDetailsButton\n                        tokenAddress={token.address}\n                        withoutContractAddress={withoutContractAddress}\n                        chainId={token.chainId}\n                        onClick={onShowTokenDetails}\n                      />\n                      <PinTokenButton\n                        chainId={token.chainId}\n                        tokenAddress={token.address}\n                      />\n                    </Box>\n                  </Box>\n                </Slide>\n              </Box>\n            )\n          }\n        />\n        {isBalanceLoading ? (\n          <TokenAmountSkeleton />\n        ) : (\n          <Box sx={{ textAlign: 'right' }}>\n            {token.amount ? (\n              <Typography\n                noWrap\n                sx={{\n                  fontWeight: 600,\n                }}\n                title={tokenAmount}\n              >\n                {t('format.tokenAmount', {\n                  value: tokenAmount,\n                })}\n              </Typography>\n            ) : null}\n            {token.amount && token.priceUSD ? (\n              <Typography\n                data-price={token.priceUSD}\n                sx={{\n                  fontWeight: 500,\n                  fontSize: 12,\n                  color: 'text.secondary',\n                }}\n              >\n                {t('format.currency', {\n                  value: tokenPrice,\n                })}\n              </Typography>\n            ) : null}\n          </Box>\n        )}\n      </ListItemButton>\n    )\n  }\n)\n\nexport const TokenListItemSkeleton = (): JSX.Element => {\n  return (\n    <ListItem\n      secondaryAction={<TokenAmountSkeleton />}\n      disablePadding\n      sx={(theme) => ({\n        position: 'relative',\n        flexDirection: 'row',\n        alignItems: 'center',\n        padding: 0,\n        [`& .${listItemSecondaryActionClasses.root}`]: {\n          right: theme.spacing(1.5),\n        },\n      })}\n    >\n      <ListItemAvatar>\n        <Skeleton\n          variant=\"circular\"\n          width={40}\n          height={40}\n          sx={{ marginLeft: 1.5, marginRight: 2 }}\n        />\n      </ListItemAvatar>\n      <ListItemText\n        primary={<Skeleton variant=\"text\" width={56} height={24} />}\n        secondary={<Skeleton variant=\"text\" width={96} height={16} />}\n      />\n    </ListItem>\n  )\n}\n\nconst TokenAmountSkeleton: React.FC = () => {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-end',\n      }}\n    >\n      <Skeleton variant=\"text\" width={56} height={24} />\n      <Skeleton variant=\"text\" width={48} height={16} />\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/TokenNotFound.js

@@ -0,0 +1,12 @@
+import { SearchNotFound } from "../Search/SearchNotFound.js";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/TokenList/TokenNotFound.tsx
+const TokenNotFound = () => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(SearchNotFound, { message: t("info.message.emptyTokenListAllNetworks") });
+};
+//#endregion
+export { TokenNotFound };
+
+//# sourceMappingURL=TokenNotFound.js.map

package/dist/esm/components/TokenList/TokenNotFound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenNotFound.js","names":[],"sources":["../../../../src/components/TokenList/TokenNotFound.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\n\nexport const TokenNotFound: React.FC<FormTypeProps> = () => {\n  const { t } = useTranslation()\n\n  return (\n    <SearchNotFound message={t('info.message.emptyTokenListAllNetworks')} />\n  )\n}\n"],"mappings":";;;;AAIA,MAAa,sBAA+C;CAC1D,MAAM,EAAE,MAAM,eAAe;CAE7B,OACE,oBAAC,gBAAD,EAAgB,SAAS,EAAE,wCAAwC,EAAI,CAAA;AAE3E"}

package/dist/esm/components/TokenList/VirtualizedTokenList.js

@@ -0,0 +1,123 @@
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { TokenDetailsSheet } from "./TokenDetailsSheet.js";
+import { List as List$1 } from "./TokenList.style.js";
+import { TokenListItem, TokenListItemSkeleton } from "./TokenListItem.js";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Typography } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/TokenList/VirtualizedTokenList.tsx
+const tokenItemHeight = 64;
+const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedTokenAddress, isLoading, isBalanceLoading, showCategories, showPinnedTokens, onClick, isAllNetworks }) => {
+	const { t } = useTranslation();
+	const { chains } = useAvailableChains();
+	const chainsSet = useMemo(() => {
+		if (!chains) return;
+		return new Map(chains.map((chain) => [chain.id, chain]));
+	}, [chains]);
+	const tokenDetailsSheetRef = useRef(null);
+	const onShowTokenDetails = useCallback((tokenAddress, noContractAddress, chainId) => {
+		tokenDetailsSheetRef.current?.open(tokenAddress, noContractAddress, chainId);
+	}, []);
+	const getItemKey = useCallback((index) => {
+		const token = tokens[index];
+		return `${token.chainId}-${token.address}-${index}`;
+	}, [tokens]);
+	const estimateSize = useCallback((index) => {
+		const currentToken = tokens[index];
+		const previousToken = tokens[index - 1];
+		let size = tokenItemHeight;
+		if (currentToken.pinned && index === 0) size += 24;
+		if (previousToken?.pinned && !currentToken.pinned) size += 32;
+		if (!showCategories) return size;
+		if (currentToken.featured && !currentToken.pinned && index === 0) size += 24;
+		if (!currentToken.pinned && !previousToken?.pinned && (previousToken?.amount && !currentToken.amount || previousToken?.featured && !currentToken.featured || previousToken?.popular && !currentToken.popular)) size += 32;
+		return size;
+	}, [tokens, showCategories]);
+	const { getVirtualItems, getTotalSize, scrollToIndex, measure } = useVirtualizer(useMemo(() => ({
+		count: tokens.length,
+		overscan: 5,
+		getScrollElement: () => scrollElementRef.current,
+		estimateSize,
+		getItemKey,
+		paddingEnd: 8
+	}), [
+		tokens.length,
+		estimateSize,
+		getItemKey,
+		scrollElementRef
+	]));
+	useEffect(() => {
+		if (scrollElementRef.current) measure();
+	}, [measure, scrollElementRef.current]);
+	useEffect(() => {
+		if (getVirtualItems().length) scrollToIndex(0, { align: "start" });
+		tokenDetailsSheetRef.current?.close();
+	}, [
+		scrollToIndex,
+		isAllNetworks,
+		chainId,
+		getVirtualItems
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(List$1, {
+			className: "long-list",
+			style: { height: getTotalSize() },
+			disablePadding: true,
+			children: getVirtualItems().map((item) => {
+				const currentToken = tokens[item.index];
+				const previousToken = tokens[item.index - 1];
+				const chain = chainsSet?.get(currentToken.chainId);
+				const isNotPinned = !currentToken.pinned;
+				const isFirstPinnedToken = currentToken.pinned && item.index === 0;
+				const isTransitionFromPinned = previousToken?.pinned && isNotPinned;
+				const isTransitionFromFeatured = previousToken?.featured && !currentToken.featured && isNotPinned;
+				const isTransitionFromMyTokens = previousToken?.amount && !currentToken.amount && isNotPinned;
+				const isTransitionFromPopular = previousToken?.popular && !currentToken.popular && isNotPinned;
+				const startAdornmentLabel = (() => {
+					if (showPinnedTokens && isFirstPinnedToken) return t("main.pinnedTokens");
+					if (showPinnedTokens && !showCategories && isTransitionFromPinned) return t("main.allTokens");
+					if (!showCategories) return null;
+					if (isTransitionFromPinned && currentToken.featured || currentToken.featured && isNotPinned && item.index === 0) return t("main.featuredTokens");
+					if ((isTransitionFromFeatured || isTransitionFromPinned) && currentToken.amount && isNotPinned) return t("main.myTokens");
+					if ((isTransitionFromFeatured || isTransitionFromMyTokens || isTransitionFromPinned) && currentToken.popular && isNotPinned) return t("main.popularTokens");
+					if (isTransitionFromMyTokens || isTransitionFromFeatured || isTransitionFromPinned || isTransitionFromPopular) return t("main.allTokens");
+					return null;
+				})();
+				const isSelected = selectedTokenAddress === currentToken.address && chainId === currentToken.chainId;
+				return /* @__PURE__ */ jsx(TokenListItem, {
+					onClick,
+					size: item.size,
+					start: item.start,
+					token: currentToken,
+					chain: isAllNetworks ? chain : void 0,
+					selected: isSelected,
+					onShowTokenDetails,
+					isBalanceLoading,
+					startAdornment: startAdornmentLabel ? /* @__PURE__ */ jsx(Typography, {
+						sx: {
+							fontSize: 14,
+							fontWeight: 600,
+							lineHeight: "16px",
+							px: 1.5,
+							pt: isFirstPinnedToken || currentToken.featured && isNotPinned && item.index === 0 ? 0 : 1,
+							pb: 1
+						},
+						children: startAdornmentLabel
+					}) : null
+				}, item.key);
+			})
+		}),
+		/* @__PURE__ */ jsx(TokenDetailsSheet, { ref: tokenDetailsSheetRef }),
+		isLoading && /* @__PURE__ */ jsx(List$1, {
+			disablePadding: true,
+			sx: { cursor: "default" },
+			children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(TokenListItemSkeleton, {}, index))
+		})
+	] });
+};
+//#endregion
+export { VirtualizedTokenList };
+
+//# sourceMappingURL=VirtualizedTokenList.js.map

package/dist/esm/components/TokenList/VirtualizedTokenList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedTokenList.js","names":["List"],"sources":["../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { FC } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { TokenDetailsSheet } from './TokenDetailsSheet.js'\nimport { List } from './TokenList.style.js'\nimport { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js'\nimport type {\n  TokenDetailsSheetBase,\n  VirtualizedTokenListProps,\n} from './types.js'\n\nconst tokenItemHeight = 64 // 60 + 4px margin-bottom\n\nexport const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({\n  tokens,\n  scrollElementRef,\n  chainId,\n  selectedTokenAddress,\n  isLoading,\n  isBalanceLoading,\n  showCategories,\n  showPinnedTokens,\n  onClick,\n  isAllNetworks,\n}) => {\n  const { t } = useTranslation()\n\n  const { chains } = useAvailableChains()\n\n  // Create Set for O(1) chain lookup instead of O(n) find\n  const chainsSet = useMemo(() => {\n    if (!chains) {\n      return undefined\n    }\n    return new Map(chains.map((chain) => [chain.id, chain]))\n  }, [chains])\n\n  const tokenDetailsSheetRef = useRef<TokenDetailsSheetBase>(null)\n\n  const onShowTokenDetails = useCallback(\n    (tokenAddress: string, noContractAddress: boolean, chainId: number) => {\n      tokenDetailsSheetRef.current?.open(\n        tokenAddress,\n        noContractAddress,\n        chainId\n      )\n    },\n    []\n  )\n\n  const getItemKey = useCallback(\n    (index: number) => {\n      const token = tokens[index]\n      return `${token.chainId}-${token.address}-${index}`\n    },\n    [tokens]\n  )\n\n  const estimateSize = useCallback(\n    (index: number) => {\n      const currentToken = tokens[index]\n      const previousToken = tokens[index - 1]\n      let size = tokenItemHeight\n\n      // Pinned tokens (always shown, even in all networks mode)\n      if (currentToken.pinned && index === 0) {\n        size += 24\n      }\n      if (previousToken?.pinned && !currentToken.pinned) {\n        size += 32\n      }\n\n      if (!showCategories) {\n        return size\n      }\n\n      if (currentToken.featured && !currentToken.pinned && index === 0) {\n        size += 24\n      }\n\n      // Category transition (excluding pinned tokens)\n      const isNotPinned = !currentToken.pinned && !previousToken?.pinned\n      if (\n        isNotPinned &&\n        ((previousToken?.amount && !currentToken.amount) ||\n          (previousToken?.featured && !currentToken.featured) ||\n          (previousToken?.popular && !currentToken.popular))\n      ) {\n        size += 32\n      }\n\n      return size\n    },\n    [tokens, showCategories]\n  )\n\n  const virtualizerConfig = useMemo(\n    () => ({\n      count: tokens.length,\n      overscan: 5,\n      getScrollElement: () => scrollElementRef.current,\n      estimateSize,\n      getItemKey,\n      paddingEnd: 8,\n    }),\n    [tokens.length, estimateSize, getItemKey, scrollElementRef]\n  )\n\n  const { getVirtualItems, getTotalSize, scrollToIndex, measure } =\n    useVirtualizer(virtualizerConfig)\n\n  // Address the issue of disappearing tokens on rerender\n  useEffect(() => {\n    if (scrollElementRef.current) {\n      measure()\n    }\n  }, [measure, scrollElementRef.current])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when chainId changes\n  useEffect(() => {\n    // Scroll to the top of the list when switching the chains\n    if (getVirtualItems().length) {\n      scrollToIndex(0, { align: 'start' })\n    }\n    // Close the token details sheet when switching the chains\n    tokenDetailsSheetRef.current?.close()\n  }, [scrollToIndex, isAllNetworks, chainId, getVirtualItems])\n\n  return (\n    <>\n      <List\n        className=\"long-list\"\n        style={{ height: getTotalSize() }}\n        disablePadding\n      >\n        {getVirtualItems().map((item) => {\n          const currentToken = tokens[item.index]\n          const previousToken: TokenAmount | undefined = tokens[item.index - 1]\n          const chain = chainsSet?.get(currentToken.chainId)\n\n          const isNotPinned = !currentToken.pinned\n          const isFirstPinnedToken = currentToken.pinned && item.index === 0\n          const isTransitionFromPinned = previousToken?.pinned && isNotPinned\n\n          // Category transitions (excluding pinned)\n          const isTransitionFromFeatured =\n            previousToken?.featured && !currentToken.featured && isNotPinned\n          const isTransitionFromMyTokens =\n            previousToken?.amount && !currentToken.amount && isNotPinned\n          const isTransitionFromPopular =\n            previousToken?.popular && !currentToken.popular && isNotPinned\n\n          // Determine which category label to show\n          const startAdornmentLabel = (() => {\n            if (showPinnedTokens && isFirstPinnedToken) {\n              return t('main.pinnedTokens')\n            }\n            if (showPinnedTokens && !showCategories && isTransitionFromPinned) {\n              return t('main.allTokens')\n            }\n            if (!showCategories) {\n              return null\n            }\n\n            if (\n              (isTransitionFromPinned && currentToken.featured) ||\n              (currentToken.featured && isNotPinned && item.index === 0)\n            ) {\n              return t('main.featuredTokens')\n            }\n            if (\n              (isTransitionFromFeatured || isTransitionFromPinned) &&\n              currentToken.amount &&\n              isNotPinned\n            ) {\n              return t('main.myTokens')\n            }\n            if (\n              (isTransitionFromFeatured ||\n                isTransitionFromMyTokens ||\n                isTransitionFromPinned) &&\n              currentToken.popular &&\n              isNotPinned\n            ) {\n              return t('main.popularTokens')\n            }\n            if (\n              isTransitionFromMyTokens ||\n              isTransitionFromFeatured ||\n              isTransitionFromPinned ||\n              isTransitionFromPopular\n            ) {\n              return t('main.allTokens')\n            }\n            return null\n          })()\n\n          const isSelected =\n            selectedTokenAddress === currentToken.address &&\n            chainId === currentToken.chainId\n\n          return (\n            <TokenListItem\n              key={item.key}\n              onClick={onClick}\n              size={item.size}\n              start={item.start}\n              token={currentToken}\n              chain={isAllNetworks ? chain : undefined}\n              selected={isSelected}\n              onShowTokenDetails={onShowTokenDetails}\n              isBalanceLoading={isBalanceLoading}\n              startAdornment={\n                startAdornmentLabel ? (\n                  <Typography\n                    sx={{\n                      fontSize: 14,\n                      fontWeight: 600,\n                      lineHeight: '16px',\n                      px: 1.5,\n                      pt:\n                        isFirstPinnedToken ||\n                        (currentToken.featured &&\n                          isNotPinned &&\n                          item.index === 0)\n                          ? 0\n                          : 1,\n                      pb: 1,\n                    }}\n                  >\n                    {startAdornmentLabel}\n                  </Typography>\n                ) : null\n              }\n            />\n          )\n        })}\n      </List>\n      <TokenDetailsSheet ref={tokenDetailsSheetRef} />\n      {isLoading && (\n        <List disablePadding sx={{ cursor: 'default' }}>\n          {Array.from({ length: 3 }).map((_, index) => (\n            <TokenListItemSkeleton key={index} />\n          ))}\n        </List>\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/useTokenSelect.js

@@ -0,0 +1,78 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useSplitModeStore } from "../../stores/settings/useSplitModeStore.js";
+import { isItemAllowed } from "../../utils/item.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useToAddressAutoPopulate } from "../../hooks/useToAddressAutoPopulate.js";
+import { useCallback } from "react";
+//#region src/components/TokenList/useTokenSelect.ts
+const useTokenSelect = (formType, onClick) => {
+	const { mode, disabledUI, chains: chainsConfig } = useWidgetConfig();
+	const splitMode = useSplitModeStore((store) => store.state);
+	const emitter = useWidgetEvents();
+	const { setFieldValue, getFieldValues } = useFieldActions();
+	const autoPopulateToAddress = useToAddressAutoPopulate();
+	const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [state.setChain, state.setIsAllNetworks]);
+	const tokenKey = FormKeyHelper.getTokenKey(formType);
+	return useCallback((tokenAddress, chainId) => {
+		setFieldValue(tokenKey, tokenAddress, {
+			isDirty: true,
+			isTouched: true
+		});
+		const selectedChainId = chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0];
+		setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {
+			isDirty: true,
+			isTouched: true
+		});
+		const amountKey = FormKeyHelper.getAmountKey(formType);
+		if (!disabledUI?.[amountKey]) setFieldValue(amountKey, "");
+		const oppositeFormType = formType === "from" ? "to" : "from";
+		const [selectedOppositeTokenAddress, selectedOppositeChainId, selectedToAddress] = getFieldValues(FormKeyHelper.getTokenKey(oppositeFormType), FormKeyHelper.getChainKey(oppositeFormType), "toAddress");
+		if ((selectedOppositeTokenAddress === tokenAddress && selectedOppositeChainId === selectedChainId || mode === "split" && splitMode === "bridge" && selectedOppositeChainId === selectedChainId) && mode !== "custom") setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), "", {
+			isDirty: true,
+			isTouched: true
+		});
+		if (!selectedOppositeTokenAddress && selectedChainId && isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])) {
+			if (!mode || mode === "default") setIsAllNetworks(false, oppositeFormType);
+			setFieldValue(FormKeyHelper.getChainKey(oppositeFormType), selectedChainId, {
+				isDirty: true,
+				isTouched: true
+			});
+			setChain(selectedChainId, oppositeFormType);
+		}
+		autoPopulateToAddress({
+			formType,
+			selectedToAddress,
+			selectedChainId,
+			selectedOppositeChainId,
+			selectedOppositeTokenAddress
+		});
+		const eventToEmit = formType === "from" ? "sourceChainTokenSelected" : "destinationChainTokenSelected";
+		if (selectedChainId) emitter.emit(eventToEmit, {
+			chainId: selectedChainId,
+			tokenAddress
+		});
+		onClick?.();
+	}, [
+		autoPopulateToAddress,
+		disabledUI,
+		emitter,
+		formType,
+		getFieldValues,
+		onClick,
+		setChain,
+		setIsAllNetworks,
+		setFieldValue,
+		mode,
+		splitMode,
+		tokenKey,
+		chainsConfig
+	]);
+};
+//#endregion
+export { useTokenSelect };
+
+//# sourceMappingURL=useTokenSelect.js.map

package/dist/esm/components/TokenList/useTokenSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTokenSelect.js","names":[],"sources":["../../../../src/components/TokenList/useTokenSelect.ts"],"sourcesContent":["import { useCallback } from 'react'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useSplitModeStore } from '../../stores/settings/useSplitModeStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { isItemAllowed } from '../../utils/item.js'\n\nexport const useTokenSelect = (\n  formType: FormType,\n  onClick?: () => void\n): ((tokenAddress: string, chainId?: number) => void) => {\n  const { mode, disabledUI, chains: chainsConfig } = useWidgetConfig()\n  const splitMode = useSplitModeStore((store) => store.state)\n  const emitter = useWidgetEvents()\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const autoPopulateToAddress = useToAddressAutoPopulate()\n  const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [\n    state.setChain,\n    state.setIsAllNetworks,\n  ])\n\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n\n  return useCallback(\n    (tokenAddress: string, chainId?: number) => {\n      setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })\n      const selectedChainId =\n        chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]\n      // Set chain again to trigger URL builder update\n      setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {\n        isDirty: true,\n        isTouched: true,\n      })\n      const amountKey = FormKeyHelper.getAmountKey(formType)\n      if (!disabledUI?.[amountKey as keyof DisabledUIConfig]) {\n        setFieldValue(amountKey, '')\n      }\n      const oppositeFormType = formType === 'from' ? 'to' : 'from'\n      const [\n        selectedOppositeTokenAddress,\n        selectedOppositeChainId,\n        selectedToAddress,\n      ] = getFieldValues(\n        FormKeyHelper.getTokenKey(oppositeFormType),\n        FormKeyHelper.getChainKey(oppositeFormType),\n        'toAddress'\n      )\n\n      // TODO: remove when we enable same chain/token transfers\n      const isSameTokenTransfer =\n        selectedOppositeTokenAddress === tokenAddress &&\n        selectedOppositeChainId === selectedChainId\n\n      const isBridgeToSameChain =\n        mode === 'split' &&\n        splitMode === 'bridge' &&\n        selectedOppositeChainId === selectedChainId\n\n      if ((isSameTokenTransfer || isBridgeToSameChain) && mode !== 'custom') {\n        setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {\n          isDirty: true,\n          isTouched: true,\n        })\n      }\n\n      // If no opposite token is selected, synchronize the opposite chain\n      // to match the currently selected chain (if allowed).\n      // In default exchange mode, also collapse \"All Networks\" on the opposite\n      // side - same-chain swap is the most common action.\n      if (\n        !selectedOppositeTokenAddress &&\n        selectedChainId &&\n        isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])\n      ) {\n        const isDefaultExchange = !mode || mode === 'default'\n        if (isDefaultExchange) {\n          setIsAllNetworks(false, oppositeFormType)\n        }\n        setFieldValue(\n          FormKeyHelper.getChainKey(oppositeFormType),\n          selectedChainId,\n          {\n            isDirty: true,\n            isTouched: true,\n          }\n        )\n        setChain(selectedChainId, oppositeFormType)\n      }\n\n      // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected\n      autoPopulateToAddress({\n        formType,\n        selectedToAddress,\n        selectedChainId,\n        selectedOppositeChainId,\n        selectedOppositeTokenAddress,\n      })\n\n      const eventToEmit =\n        formType === 'from'\n          ? WidgetEvent.SourceChainTokenSelected\n          : WidgetEvent.DestinationChainTokenSelected\n\n      if (selectedChainId) {\n        emitter.emit(eventToEmit, {\n          chainId: selectedChainId,\n          tokenAddress,\n        })\n      }\n\n      onClick?.()\n    },\n    [\n      autoPopulateToAddress,\n      disabledUI,\n      emitter,\n      formType,\n      getFieldValues,\n      onClick,\n      setChain,\n      setIsAllNetworks,\n      setFieldValue,\n      mode,\n      splitMode,\n      tokenKey,\n      chainsConfig,\n    ]\n  )\n}\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,kBACX,UACA,YACuD;CACvD,MAAM,EAAE,MAAM,YAAY,QAAQ,iBAAiB,gBAAgB;CACnE,MAAM,YAAY,mBAAmB,UAAU,MAAM,KAAK;CAC1D,MAAM,UAAU,gBAAgB;CAChC,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,wBAAwB,yBAAyB;CACvD,MAAM,CAAC,UAAU,oBAAoB,oBAAoB,UAAU,CACjE,MAAM,UACN,MAAM,gBACR,CAAC;CAED,MAAM,WAAW,cAAc,YAAY,QAAQ;CAEnD,OAAO,aACJ,cAAsB,YAAqB;EAC1C,cAAc,UAAU,cAAc;GAAE,SAAS;GAAM,WAAW;EAAK,CAAC;EACxE,MAAM,kBACJ,WAAW,eAAe,cAAc,YAAY,QAAQ,CAAC,EAAE;EAEjE,cAAc,cAAc,YAAY,QAAQ,GAAG,iBAAiB;GAClE,SAAS;GACT,WAAW;EACb,CAAC;EACD,MAAM,YAAY,cAAc,aAAa,QAAQ;EACrD,IAAI,CAAC,aAAa,YAChB,cAAc,WAAW,EAAE;EAE7B,MAAM,mBAAmB,aAAa,SAAS,OAAO;EACtD,MAAM,CACJ,8BACA,yBACA,qBACE,eACF,cAAc,YAAY,gBAAgB,GAC1C,cAAc,YAAY,gBAAgB,GAC1C,WACF;EAYA,KARE,iCAAiC,gBACjC,4BAA4B,mBAG5B,SAAS,WACT,cAAc,YACd,4BAA4B,oBAEsB,SAAS,UAC3D,cAAc,cAAc,YAAY,gBAAgB,GAAG,IAAI;GAC7D,SAAS;GACT,WAAW;EACb,CAAC;EAOH,IACE,CAAC,gCACD,mBACA,cAAc,iBAAiB,eAAe,iBAAiB,GAC/D;GAEA,IAD0B,CAAC,QAAQ,SAAS,WAE1C,iBAAiB,OAAO,gBAAgB;GAE1C,cACE,cAAc,YAAY,gBAAgB,GAC1C,iBACA;IACE,SAAS;IACT,WAAW;GACb,CACF;GACA,SAAS,iBAAiB,gBAAgB;EAC5C;EAGA,sBAAsB;GACpB;GACA;GACA;GACA;GACA;EACF,CAAC;EAED,MAAM,cACJ,aAAa,SAAA,6BAAA;EAIf,IAAI,iBACF,QAAQ,KAAK,aAAa;GACxB,SAAS;GACT;EACF,CAAC;EAGH,UAAU;CACZ,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;AACF"}

package/dist/esm/components/TokenRate/TokenRate.js

@@ -0,0 +1,38 @@
+import { TokenRateTypography } from "./TokenRate.style.js";
+import { formatUnits } from "@lifi/sdk";
+import { create } from "zustand";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/TokenRate/TokenRate.tsx
+const useTokenRate = create((set) => ({
+	isForward: true,
+	toggleIsForward: () => set((state) => ({ isForward: !state.isForward }))
+}));
+const TokenRate = ({ route }) => {
+	const { t } = useTranslation();
+	const { isForward, toggleIsForward } = useTokenRate();
+	const toggleRate = (e) => {
+		e.stopPropagation();
+		toggleIsForward();
+	};
+	const lastStep = route.steps.at(-1);
+	const fromToken = {
+		...route.fromToken,
+		amount: BigInt(route.fromAmount)
+	};
+	const toToken = {
+		...lastStep?.execution?.toToken ?? lastStep?.action.toToken ?? route.toToken,
+		amount: lastStep?.execution?.toAmount ? BigInt(lastStep.execution.toAmount) : BigInt(route.toAmount)
+	};
+	const fromToRate = Number.parseFloat(formatUnits(toToken.amount, toToken.decimals)) / Number.parseFloat(formatUnits(fromToken.amount, fromToken.decimals));
+	const toFromRate = Number.parseFloat(formatUnits(fromToken.amount, fromToken.decimals)) / Number.parseFloat(formatUnits(toToken.amount, toToken.decimals));
+	return /* @__PURE__ */ jsx(TokenRateTypography, {
+		onClick: toggleRate,
+		role: "button",
+		children: isForward ? `1 ${fromToken.symbol} ≈ ${t("format.tokenAmount", { value: fromToRate })} ${toToken.symbol}` : `1 ${toToken.symbol} ≈ ${t("format.tokenAmount", { value: toFromRate })} ${fromToken.symbol}`
+	});
+};
+//#endregion
+export { TokenRate };
+
+//# sourceMappingURL=TokenRate.js.map

package/dist/esm/components/TokenRate/TokenRate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenRate.js","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.tsx"],"sourcesContent":["import { formatUnits, type RouteExtended } from '@lifi/sdk'\nimport type { TypographyProps } from '@mui/material'\nimport type { MouseEventHandler } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { create } from 'zustand'\nimport { TokenRateTypography } from './TokenRate.style.js'\n\ninterface TokenRateProps extends TypographyProps {\n  route: RouteExtended\n}\n\ninterface TokenRateState {\n  isForward: boolean\n  toggleIsForward(): void\n}\n\nconst useTokenRate = create<TokenRateState>((set) => ({\n  isForward: true,\n  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),\n}))\n\nexport const TokenRate: React.FC<TokenRateProps> = ({ route }) => {\n  const { t } = useTranslation()\n  const { isForward, toggleIsForward } = useTokenRate()\n\n  const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {\n    e.stopPropagation()\n    toggleIsForward()\n  }\n\n  const lastStep = route.steps.at(-1)\n\n  const fromToken = {\n    ...route.fromToken,\n    amount: BigInt(route.fromAmount),\n  }\n  const toToken = {\n    ...(lastStep?.execution?.toToken ??\n      lastStep?.action.toToken ??\n      route.toToken),\n    amount: lastStep?.execution?.toAmount\n      ? BigInt(lastStep.execution.toAmount)\n      : BigInt(route.toAmount),\n  }\n\n  const fromToRate =\n    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /\n    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals))\n  const toFromRate =\n    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /\n    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))\n\n  const rateText = isForward\n    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`\n    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`\n\n  return (\n    <TokenRateTypography onClick={toggleRate} role=\"button\">\n      {rateText}\n    </TokenRateTypography>\n  )\n}\n"],"mappings":";;;;;;AAgBA,MAAM,eAAe,QAAwB,SAAS;CACpD,WAAW;CACX,uBAAuB,KAAK,WAAW,EAAE,WAAW,CAAC,MAAM,UAAU,EAAE;AACzE,EAAE;AAEF,MAAa,aAAuC,EAAE,YAAY;CAChE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,WAAW,oBAAoB,aAAa;CAEpD,MAAM,cAAkD,MAAM;EAC5D,EAAE,gBAAgB;EAClB,gBAAgB;CAClB;CAEA,MAAM,WAAW,MAAM,MAAM,GAAG,EAAE;CAElC,MAAM,YAAY;EAChB,GAAG,MAAM;EACT,QAAQ,OAAO,MAAM,UAAU;CACjC;CACA,MAAM,UAAU;EACd,GAAI,UAAU,WAAW,WACvB,UAAU,OAAO,WACjB,MAAM;EACR,QAAQ,UAAU,WAAW,WACzB,OAAO,SAAS,UAAU,QAAQ,IAClC,OAAO,MAAM,QAAQ;CAC3B;CAEA,MAAM,aACJ,OAAO,WAAW,YAAY,QAAQ,QAAS,QAAQ,QAAQ,CAAC,IAChE,OAAO,WAAW,YAAY,UAAU,QAAS,UAAU,QAAQ,CAAC;CACtE,MAAM,aACJ,OAAO,WAAW,YAAY,UAAU,QAAS,UAAU,QAAQ,CAAC,IACpE,OAAO,WAAW,YAAY,QAAQ,QAAS,QAAQ,QAAQ,CAAC;CAMlE,OACE,oBAAC,qBAAD;EAAqB,SAAS;EAAY,MAAK;YALhC,YACb,KAAK,UAAU,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,WAAW,CAAC,EAAE,GAAG,QAAQ,WACrF,KAAK,QAAQ,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,WAAW,CAAC,EAAE,GAAG,UAAU;CAKlE,CAAA;AAEzB"}

package/dist/esm/components/TokenRate/TokenRate.style.js

@@ -0,0 +1,19 @@
+import { Typography, styled } from "@mui/material";
+//#region src/components/TokenRate/TokenRate.style.ts
+const TokenRateTypography = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	lineHeight: 1.429,
+	fontWeight: 500,
+	color: theme.vars.palette.text.primary,
+	cursor: "pointer",
+	"&:hover": { opacity: 1 },
+	opacity: .56,
+	transition: theme.transitions.create(["opacity"], {
+		duration: theme.transitions.duration.enteringScreen,
+		easing: theme.transitions.easing.easeOut
+	})
+}));
+//#endregion
+export { TokenRateTypography };
+
+//# sourceMappingURL=TokenRate.style.js.map

package/dist/esm/components/TokenRate/TokenRate.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenRate.style.js","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.style.ts"],"sourcesContent":["import { styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const TokenRateTypography: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  lineHeight: 1.429,\n  fontWeight: 500,\n  color: theme.vars.palette.text.primary,\n  cursor: 'pointer',\n  '&:hover': {\n    opacity: 1,\n  },\n  opacity: 0.56,\n  transition: theme.transitions.create(['opacity'], {\n    duration: theme.transitions.duration.enteringScreen,\n    easing: theme.transitions.easing.easeOut,\n  }),\n}))\n"],"mappings":";;AAGA,MAAa,sBAET,OAAO,UAAU,GAAG,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;CACR,WAAW,EACT,SAAS,EACX;CACA,SAAS;CACT,YAAY,MAAM,YAAY,OAAO,CAAC,SAAS,GAAG;EAChD,UAAU,MAAM,YAAY,SAAS;EACrC,QAAQ,MAAM,YAAY,OAAO;CACnC,CAAC;AACH,EAAE"}

package/dist/esm/components/Tools/ToolItem.js

@@ -0,0 +1,37 @@
+import { ListItemText as ListItemText$1 } from "../ListItemText.js";
+import { SettingsListItemButton } from "../SettingsListItemButton.js";
+import { memo } from "react";
+import { Avatar, Checkbox, ListItemAvatar } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Tools/ToolItem.tsx
+const ToolItem = memo(({ tool, typeKey, isEnabled, onToggle }) => {
+	const handleClick = () => {
+		onToggle(tool.key);
+	};
+	const handleCheckboxClick = (e) => {
+		e.stopPropagation();
+		onToggle(tool.key);
+	};
+	return /* @__PURE__ */ jsxs(SettingsListItemButton, {
+		onClick: handleClick,
+		children: [
+			/* @__PURE__ */ jsx(ListItemAvatar, { children: /* @__PURE__ */ jsx(Avatar, {
+				src: tool.logoURI,
+				alt: tool.name,
+				children: tool.name[0]
+			}) }),
+			/* @__PURE__ */ jsx(ListItemText$1, { primary: tool.name }),
+			/* @__PURE__ */ jsx(Checkbox, {
+				id: `${typeKey}-${tool.key}-checkbox`,
+				checked: isEnabled,
+				onChange: handleClick,
+				onClick: handleCheckboxClick,
+				sx: { mr: -1 }
+			})
+		]
+	});
+});
+//#endregion
+export { ToolItem };
+
+//# sourceMappingURL=ToolItem.js.map

package/dist/esm/components/Tools/ToolItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolItem.js","names":["ListItemText"],"sources":["../../../../src/components/Tools/ToolItem.tsx"],"sourcesContent":["import { Avatar, Checkbox, ListItemAvatar } from '@mui/material'\nimport { memo, type NamedExoticComponent } from 'react'\nimport { ListItemText } from '../ListItemText.js'\nimport { SettingsListItemButton } from '../SettingsListItemButton.js'\n\ninterface ToolItemProps {\n  tool: any\n  typeKey: string\n  isEnabled: boolean\n  onToggle: (key: string) => void\n}\n\nexport const ToolItem: NamedExoticComponent<ToolItemProps> =\n  memo<ToolItemProps>(({ tool, typeKey, isEnabled, onToggle }) => {\n    const handleClick = () => {\n      onToggle(tool.key)\n    }\n\n    const handleCheckboxClick = (e: React.MouseEvent) => {\n      e.stopPropagation()\n      onToggle(tool.key)\n    }\n\n    return (\n      <SettingsListItemButton onClick={handleClick}>\n        <ListItemAvatar>\n          <Avatar src={tool.logoURI} alt={tool.name}>\n            {tool.name[0]}\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText primary={tool.name} />\n        <Checkbox\n          id={`${typeKey}-${tool.key}-checkbox`}\n          checked={isEnabled}\n          onChange={handleClick}\n          onClick={handleCheckboxClick}\n          sx={{ mr: -1 }}\n        />\n      </SettingsListItemButton>\n    )\n  })\n"],"mappings":";;;;;;AAYA,MAAa,WACX,MAAqB,EAAE,MAAM,SAAS,WAAW,eAAe;CAC9D,MAAM,oBAAoB;EACxB,SAAS,KAAK,GAAG;CACnB;CAEA,MAAM,uBAAuB,MAAwB;EACnD,EAAE,gBAAgB;EAClB,SAAS,KAAK,GAAG;CACnB;CAEA,OACE,qBAAC,wBAAD;EAAwB,SAAS;YAAjC;GACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,KAAK,KAAK;IAAS,KAAK,KAAK;cAClC,KAAK,KAAK;GACL,CAAA,EACM,CAAA;GAChB,oBAACA,gBAAD,EAAc,SAAS,KAAK,KAAO,CAAA;GACnC,oBAAC,UAAD;IACE,IAAI,GAAG,QAAQ,GAAG,KAAK,IAAI;IAC3B,SAAS;IACT,UAAU;IACV,SAAS;IACT,IAAI,EAAE,IAAI,GAAG;GACd,CAAA;EACqB;;AAE5B,CAAC"}

package/dist/esm/components/Tools/Tools.js

@@ -0,0 +1,50 @@
+import { useSettingsStore } from "../../stores/settings/SettingsStore.js";
+import { useSettingsActions } from "../../stores/settings/useSettingsActions.js";
+import { SearchNotFound } from "../Search/SearchNotFound.js";
+import { ToolItem } from "./ToolItem.js";
+import { useMemo, useRef } from "react";
+import { List } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/Tools/Tools.tsx
+const Tools = ({ filteredTools, type }) => {
+	const { t } = useTranslation();
+	const typeKey = type.toLowerCase();
+	const enabledTools = useSettingsStore((state) => state[`_enabled${type}`]);
+	const { setToolValue } = useSettingsActions();
+	const enabledToolsRef = useRef(enabledTools);
+	enabledToolsRef.current = enabledTools;
+	const toggleCallbacks = useMemo(() => {
+		const callbacks = {};
+		filteredTools.forEach((tool) => {
+			callbacks[tool.key] = () => {
+				setToolValue(type, tool.key, !enabledToolsRef.current[tool.key]);
+			};
+		});
+		return callbacks;
+	}, [
+		filteredTools,
+		setToolValue,
+		type
+	]);
+	if (!filteredTools.length) return /* @__PURE__ */ jsx(SearchNotFound, { message: t(`info.message.empty${type}List`) });
+	return /* @__PURE__ */ jsx(List, {
+		className: "long-list",
+		disablePadding: true,
+		"data-testid": `${typeKey}-list`,
+		sx: {
+			px: 1.5,
+			pb: 2
+		},
+		children: filteredTools.map((tool) => /* @__PURE__ */ jsx(ToolItem, {
+			tool,
+			typeKey,
+			isEnabled: enabledTools[tool.key],
+			onToggle: toggleCallbacks[tool.key]
+		}, tool.key))
+	});
+};
+//#endregion
+export { Tools };
+
+//# sourceMappingURL=Tools.js.map

package/dist/esm/components/Tools/Tools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tools.js","names":[],"sources":["../../../../src/components/Tools/Tools.tsx"],"sourcesContent":["import type { ToolsResponse } from '@lifi/sdk'\nimport { List } from '@mui/material'\nimport { type JSX, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\nimport { ToolItem } from './ToolItem.js'\n\nexport type ToolCollectionTypes =\n  | ToolsResponse['exchanges']\n  | ToolsResponse['bridges']\n\ninterface ToolsProps {\n  filteredTools: ToolCollectionTypes\n  type: 'Bridges' | 'Exchanges'\n}\n\nexport const Tools = ({ filteredTools, type }: ToolsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'\n  const enabledTools = useSettingsStore((state) => state[`_enabled${type}`])\n  const { setToolValue } = useSettingsActions()\n\n  // Use ref to access current enabledTools without causing re-renders\n  const enabledToolsRef = useRef(enabledTools)\n  enabledToolsRef.current = enabledTools\n  const toggleCallbacks = useMemo(() => {\n    const callbacks: Record<string, () => void> = {}\n    filteredTools.forEach((tool) => {\n      callbacks[tool.key] = () => {\n        // Access current state via ref to avoid dependency on enabledTools\n        setToolValue(type, tool.key, !enabledToolsRef.current[tool.key])\n      }\n    })\n    return callbacks\n  }, [filteredTools, setToolValue, type])\n\n  if (!filteredTools.length) {\n    return <SearchNotFound message={t(`info.message.empty${type}List`)} />\n  }\n\n  return (\n    <List\n      className=\"long-list\"\n      disablePadding\n      data-testid={`${typeKey}-list`}\n      sx={{ px: 1.5, pb: 2 }}\n    >\n      {filteredTools.map((tool) => (\n        <ToolItem\n          key={tool.key}\n          tool={tool}\n          typeKey={typeKey}\n          isEnabled={enabledTools[tool.key]}\n          onToggle={toggleCallbacks[tool.key]}\n        />\n      ))}\n    </List>\n  )\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAa,SAAS,EAAE,eAAe,WAAoC;CACzE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,UAAU,KAAK,YAAY;CACjC,MAAM,eAAe,kBAAkB,UAAU,MAAM,WAAW,OAAO;CACzE,MAAM,EAAE,iBAAiB,mBAAmB;CAG5C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,gBAAgB,UAAU;CAC1B,MAAM,kBAAkB,cAAc;EACpC,MAAM,YAAwC,CAAC;EAC/C,cAAc,SAAS,SAAS;GAC9B,UAAU,KAAK,aAAa;IAE1B,aAAa,MAAM,KAAK,KAAK,CAAC,gBAAgB,QAAQ,KAAK,IAAI;GACjE;EACF,CAAC;EACD,OAAO;CACT,GAAG;EAAC;EAAe;EAAc;CAAI,CAAC;CAEtC,IAAI,CAAC,cAAc,QACjB,OAAO,oBAAC,gBAAD,EAAgB,SAAS,EAAE,qBAAqB,KAAK,KAAK,EAAI,CAAA;CAGvE,OACE,oBAAC,MAAD;EACE,WAAU;EACV,gBAAA;EACA,eAAa,GAAG,QAAQ;EACxB,IAAI;GAAE,IAAI;GAAK,IAAI;EAAE;YAEpB,cAAc,KAAK,SAClB,oBAAC,UAAD;GAEQ;GACG;GACT,WAAW,aAAa,KAAK;GAC7B,UAAU,gBAAgB,KAAK;EAChC,GALM,KAAK,GAKX,CACF;CACG,CAAA;AAEV"}

package/dist/esm/components/TransactionCard/ActiveTransactionCard.js

@@ -0,0 +1,68 @@
+import { Card as Card$1 } from "../Card/Card.js";
+import { CircularProgressPending } from "../Timer/StepStatusTimer.style.js";
+import { useActionMessage } from "../../hooks/useActionMessage.js";
+import { getExpiryTimestamp } from "../../utils/timer.js";
+import { ActionRow } from "../ActionRow/ActionRow.js";
+import { IconCircle } from "../IconCircle/IconCircle.js";
+import { RouteTokens } from "../RouteCard/RouteTokens.js";
+import { ExecutionTimerText } from "../Timer/ExecutionTimerText.js";
+import { DeleteButton, PendingCircle } from "./ActiveTransactionCard.style.js";
+import { Tooltip, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import DeleteOutline from "@mui/icons-material/DeleteOutlined";
+//#region src/components/TransactionCard/ActiveTransactionCard.tsx
+const ActiveTransactionCard = ({ route, status, onClick, onDelete }) => {
+	const { t } = useTranslation();
+	const lastActiveStep = route.steps.findLast((step) => step.execution);
+	const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1);
+	const { title } = useActionMessage(lastActiveStep, lastActiveAction);
+	const isFailed = status === 8;
+	return /* @__PURE__ */ jsxs(Card$1, {
+		onClick,
+		indented: true,
+		children: [/* @__PURE__ */ jsx(ActionRow, {
+			sx: { mb: 1.5 },
+			startAdornment: (() => {
+				if (isFailed) return /* @__PURE__ */ jsx(IconCircle, {
+					status: "error",
+					size: 24
+				});
+				if ([
+					"ACTION_REQUIRED",
+					"MESSAGE_REQUIRED",
+					"RESET_REQUIRED"
+				].includes(lastActiveAction?.status ?? "")) return /* @__PURE__ */ jsx(IconCircle, {
+					status: "info",
+					size: 24
+				});
+				return /* @__PURE__ */ jsx(PendingCircle, { children: /* @__PURE__ */ jsx(CircularProgressPending, {
+					size: 24,
+					sx: {
+						top: -2,
+						left: -2
+					}
+				}) });
+			})(),
+			message: title ?? "",
+			endAdornment: isFailed ? /* @__PURE__ */ jsx(Tooltip, {
+				title: t("button.clearTransaction"),
+				children: /* @__PURE__ */ jsx(DeleteButton, {
+					size: "small",
+					onClick: onDelete,
+					children: /* @__PURE__ */ jsx(DeleteOutline, { sx: { fontSize: 16 } })
+				})
+			}) : lastActiveStep?.execution?.signedAt ? /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontSize: 12,
+					fontWeight: 600
+				},
+				children: /* @__PURE__ */ jsx(ExecutionTimerText, { expiryTimestamp: getExpiryTimestamp(lastActiveStep) })
+			}) : void 0
+		}), /* @__PURE__ */ jsx(RouteTokens, { route })]
+	});
+};
+//#endregion
+export { ActiveTransactionCard };
+
+//# sourceMappingURL=ActiveTransactionCard.js.map

package/dist/esm/components/TransactionCard/ActiveTransactionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveTransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport DeleteOutline from '@mui/icons-material/DeleteOutlined'\nimport { Tooltip, Typography } from '@mui/material'\nimport type { JSX, MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { getExpiryTimestamp } from '../../utils/timer.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { Card } from '../Card/Card.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { ExecutionTimerText } from '../Timer/ExecutionTimerText.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport { DeleteButton, PendingCircle } from './ActiveTransactionCard.style.js'\n\ninterface ActiveTransactionCardProps {\n  route: RouteExtended\n  status?: RouteExecutionStatus\n  onClick: () => void\n  onDelete: (e: MouseEvent) => void\n}\n\nexport const ActiveTransactionCard = ({\n  route,\n  status,\n  onClick,\n  onDelete,\n}: ActiveTransactionCardProps): JSX.Element => {\n  const { t } = useTranslation()\n\n  const lastActiveStep = route.steps.findLast((step) => step.execution)\n  const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)\n  const { title } = useActionMessage(lastActiveStep, lastActiveAction)\n\n  const isFailed = status === RouteExecutionStatus.Failed\n\n  const statusIcon = (() => {\n    if (isFailed) {\n      return <IconCircle status=\"error\" size={24} />\n    }\n    if (\n      ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(\n        lastActiveAction?.status ?? ''\n      )\n    ) {\n      return <IconCircle status=\"info\" size={24} />\n    }\n    return (\n      <PendingCircle>\n        <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />\n      </PendingCircle>\n    )\n  })()\n\n  return (\n    <Card onClick={onClick} indented>\n      <ActionRow\n        sx={{ mb: 1.5 }}\n        startAdornment={statusIcon}\n        message={title ?? ''}\n        endAdornment={\n          isFailed ? (\n            <Tooltip title={t('button.clearTransaction')}>\n              <DeleteButton size=\"small\" onClick={onDelete}>\n                <DeleteOutline sx={{ fontSize: 16 }} />\n              </DeleteButton>\n            </Tooltip>\n          ) : lastActiveStep?.execution?.signedAt ? (\n            <Typography sx={{ fontSize: 12, fontWeight: 600 }}>\n              <ExecutionTimerText\n                expiryTimestamp={getExpiryTimestamp(lastActiveStep)}\n              />\n            </Typography>\n          ) : undefined\n        }\n      />\n      <RouteTokens route={route} />\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAa,yBAAyB,EACpC,OACA,QACA,SACA,eAC6C;CAC7C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,iBAAiB,MAAM,MAAM,UAAU,SAAS,KAAK,SAAS;CACpE,MAAM,mBAAmB,gBAAgB,WAAW,SAAS,GAAG,EAAE;CAClE,MAAM,EAAE,UAAU,iBAAiB,gBAAgB,gBAAgB;CAEnE,MAAM,WAAW,WAAA;CAoBjB,OACE,qBAACA,QAAD;EAAe;EAAS,UAAA;YAAxB,CACE,oBAAC,WAAD;GACE,IAAI,EAAE,IAAI,IAAI;GACd,uBAtBoB;IACxB,IAAI,UACF,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAQ,MAAM;IAAK,CAAA;IAE/C,IACE;KAAC;KAAmB;KAAoB;IAAgB,EAAE,SACxD,kBAAkB,UAAU,EAC9B,GAEA,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAO,MAAM;IAAK,CAAA;IAE9C,OACE,oBAAC,eAAD,EAAA,UACE,oBAAC,yBAAD;KAAyB,MAAM;KAAI,IAAI;MAAE,KAAK;MAAI,MAAM;KAAG;IAAI,CAAA,EAClD,CAAA;GAEnB,GAM+B;GACzB,SAAS,SAAS;GAClB,cACE,WACE,oBAAC,SAAD;IAAS,OAAO,EAAE,yBAAyB;cACzC,oBAAC,cAAD;KAAc,MAAK;KAAQ,SAAS;eAClC,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;IAC1B,CAAA;GACP,CAAA,IACP,gBAAgB,WAAW,WAC7B,oBAAC,YAAD;IAAY,IAAI;KAAE,UAAU;KAAI,YAAY;IAAI;cAC9C,oBAAC,oBAAD,EACE,iBAAiB,mBAAmB,cAAc,EACnD,CAAA;GACS,CAAA,IACV,KAAA;EAEP,CAAA,GACD,oBAAC,aAAD,EAAoB,MAAQ,CAAA,CACxB;;AAEV"}

package/dist/esm/components/TransactionCard/ActiveTransactionCard.style.js

@@ -0,0 +1,21 @@
+import { Box, IconButton, styled } from "@mui/material";
+//#region src/components/TransactionCard/ActiveTransactionCard.style.tsx
+const PendingCircle = styled(Box)(({ theme }) => ({
+	position: "relative",
+	width: 24,
+	height: 24,
+	flexShrink: 0,
+	borderRadius: "50%",
+	border: `2px solid ${theme.vars.palette.grey[300]}`,
+	...theme.applyStyles("dark", { borderColor: theme.vars.palette.grey[800] })
+}));
+const DeleteButton = styled(IconButton)(({ theme }) => ({
+	padding: theme.spacing(.5),
+	backgroundColor: theme.vars.palette.background.paper,
+	width: 24,
+	height: 24
+}));
+//#endregion
+export { DeleteButton, PendingCircle };
+
+//# sourceMappingURL=ActiveTransactionCard.style.js.map

package/dist/esm/components/TransactionCard/ActiveTransactionCard.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveTransactionCard.style.js","names":[],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.style.tsx"],"sourcesContent":["import { Box, IconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const PendingCircle: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  position: 'relative',\n  width: 24,\n  height: 24,\n  flexShrink: 0,\n  borderRadius: '50%',\n  border: `2px solid ${theme.vars.palette.grey[300]}`,\n  ...theme.applyStyles('dark', {\n    borderColor: theme.vars.palette.grey[800],\n  }),\n}))\n\nexport const DeleteButton: React.FC<React.ComponentProps<typeof IconButton>> =\n  styled(IconButton)(({ theme }) => ({\n    padding: theme.spacing(0.5),\n    backgroundColor: theme.vars.palette.background.paper,\n    width: 24,\n    height: 24,\n  }))\n"],"mappings":";;AAGA,MAAa,gBAA4D,OACvE,GACF,GAAG,EAAE,aAAa;CAChB,UAAU;CACV,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,cAAc;CACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;CAC7C,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;AACH,EAAE;AAEF,MAAa,eACX,OAAO,UAAU,GAAG,EAAE,aAAa;CACjC,SAAS,MAAM,QAAQ,EAAG;CAC1B,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,OAAO;CACP,QAAQ;AACV,EAAE"}

package/dist/esm/components/TransactionCard/TransactionCard.js

@@ -0,0 +1,32 @@
+import { Card as Card$1 } from "../Card/Card.js";
+import { RouteTokens } from "../RouteCard/RouteTokens.js";
+import { DateLabelContainer, DateLabelText } from "./TransactionCard.style.js";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/TransactionCard/TransactionCard.tsx
+const TransactionCard = ({ route, date, onClick }) => {
+	const { i18n } = useTranslation();
+	return /* @__PURE__ */ jsx(Card$1, {
+		indented: true,
+		onClick,
+		children: /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 1.5
+			},
+			children: [/* @__PURE__ */ jsxs(DateLabelContainer, { children: [/* @__PURE__ */ jsx(DateLabelText, {
+				color: "text.secondary",
+				children: date.toLocaleString(i18n.language, { dateStyle: "long" })
+			}), /* @__PURE__ */ jsx(DateLabelText, {
+				color: "text.secondary",
+				children: date.toLocaleString(i18n.language, { timeStyle: "short" })
+			})] }), /* @__PURE__ */ jsx(RouteTokens, { route })]
+		})
+	});
+};
+//#endregion
+export { TransactionCard };
+
+//# sourceMappingURL=TransactionCard.js.map

package/dist/esm/components/TransactionCard/TransactionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/TransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../Card/Card.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { DateLabelContainer, DateLabelText } from './TransactionCard.style.js'\n\ninterface TransactionCardProps {\n  route: RouteExtended\n  date: Date\n  onClick?: () => void\n}\n\nexport const TransactionCard = ({\n  route,\n  date,\n  onClick,\n}: TransactionCardProps): JSX.Element => {\n  const { i18n } = useTranslation()\n\n  return (\n    <Card indented onClick={onClick}>\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n        <DateLabelContainer>\n          <DateLabelText color=\"text.secondary\">\n            {date.toLocaleString(i18n.language, { dateStyle: 'long' })}\n          </DateLabelText>\n          <DateLabelText color=\"text.secondary\">\n            {date.toLocaleString(i18n.language, { timeStyle: 'short' })}\n          </DateLabelText>\n        </DateLabelContainer>\n        <RouteTokens route={route} />\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;AAcA,MAAa,mBAAmB,EAC9B,OACA,MACA,cACuC;CACvC,MAAM,EAAE,SAAS,eAAe;CAEhC,OACE,oBAACA,QAAD;EAAM,UAAA;EAAkB;YACtB,qBAAC,KAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,eAAe;IAAU,KAAK;GAAI;aAA9D,CACE,qBAAC,oBAAD,EAAA,UAAA,CACE,oBAAC,eAAD;IAAe,OAAM;cAClB,KAAK,eAAe,KAAK,UAAU,EAAE,WAAW,OAAO,CAAC;GAC5C,CAAA,GACf,oBAAC,eAAD;IAAe,OAAM;cAClB,KAAK,eAAe,KAAK,UAAU,EAAE,WAAW,QAAQ,CAAC;GAC7C,CAAA,CACG,EAAA,CAAA,GACpB,oBAAC,aAAD,EAAoB,MAAQ,CAAA,CACzB;;CACD,CAAA;AAEV"}