@lifi/widget 4.6.0 → 4.7.1

package/README.md

@@ -16,12 +16,12 @@
 
 [**LI.FI Widget**](https://docs.li.fi/widget/overview) features include:
 
-- **Provider-based architecture** - Modular blockchain support with separate packages for Ethereum, Bitcoin, Solana, Sui, and Tron
+- **Provider-based architecture** - Modular blockchain support with separate packages for Ethereum, Bitcoin, Solana, Sui, Tron, and Stellar
 - All ecosystems, chains, bridges, exchanges, and solvers that [LI.FI](https://docs.li.fi/introduction/chains) supports
 - Embeddable variants - compact, wide, and drawer
 - Options to allow or deny certain chains, tokens, bridges, and exchanges
 - Pre-configured themes and lots of customization options with dark mode support so you can match the look and feel of your web app
-- Built-in wallet management UI with support for external wallet providers ([Wagmi](https://wagmi.sh/), [Bigmi](https://github.com/lifinance/bigmi), [Wallet Standard](https://github.com/wallet-standard/wallet-standard), [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit), and [TronWallet Adapters](https://github.com/tronweb3/tronwallet-adapter))
+- Built-in wallet management UI with support for external wallet providers ([Wagmi](https://wagmi.sh/), [Bigmi](https://github.com/lifinance/bigmi), [Wallet Standard](https://github.com/wallet-standard/wallet-standard), [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit), [TronWallet Adapters](https://github.com/tronweb3/tronwallet-adapter), and [Stellar Wallets Kit](https://github.com/Creit-Tech/Stellar-Wallets-Kit))
 - Supports widely adopted industry standards, including [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792), [ERC-2612](https://eips.ethereum.org/EIPS/eip-2612), [EIP-712](https://eips.ethereum.org/EIPS/eip-712), [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963), and [Permit2](https://github.com/Uniswap/permit2)
 - View of transactions in progress and transaction history
 - Curated wallet lists and wallet bookmarks
@@ -159,6 +159,26 @@ npm install @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooks
 yarn add @lifi/widget-provider-tron @tronweb3/tronwallet-adapter-react-hooks
 ```
 
+**Stellar:**
+
+**pnpm:**
+
+```sh
+pnpm add @lifi/widget-provider-stellar
+```
+
+**npm:**
+
+```sh
+npm install @lifi/widget-provider-stellar
+```
+
+**yarn:**
+
+```sh
+yarn add @lifi/widget-provider-stellar
+```
+
 **Note:** You only need to install the provider packages for the blockchains you want to support. Each provider package includes its required peer dependencies.
 
 ### LI.FI Wallet Management
@@ -218,6 +238,7 @@ The LI.FI Widget uses a **provider-based architecture** that allows you to selec
 - **`@lifi/widget-provider-solana`** - Solana support (requires [bs58](https://www.npmjs.com/package/bs58))
 - **`@lifi/widget-provider-sui`** - Sui support (requires [@mysten/dapp-kit-react](https://sdk.mystenlabs.com/dapp-kit))
 - **`@lifi/widget-provider-tron`** - Tron support (requires [@tronweb3/tronwallet-adapter-react-hooks](https://github.com/tronweb3/tronwallet-adapter))
+- **`@lifi/widget-provider-stellar`** - Stellar support (bundles [Stellar Wallets Kit](https://github.com/Creit-Tech/Stellar-Wallets-Kit); no extra install)
 - **`@lifi/wallet-management`** - Wallet management UI components
 - **`@lifi/widget-light`** - Lightweight iframe-based integration ([docs](https://docs.li.fi/widget/widget-light-overview))
 
@@ -254,13 +275,14 @@ export const WidgetPage = () => {
 };
 ```
 
-**Multi-chain example** (Ethereum, Solana, Bitcoin, Sui, and Tron):
+**Multi-chain example** (Ethereum, Solana, Bitcoin, Sui, Tron, and Stellar):
 
 ```tsx
 import { LiFiWidget, WidgetConfig } from '@lifi/widget';
 import { BitcoinProvider } from '@lifi/widget-provider-bitcoin';
 import { EthereumProvider } from '@lifi/widget-provider-ethereum';
 import { SolanaProvider } from '@lifi/widget-provider-solana';
+import { StellarProvider } from '@lifi/widget-provider-stellar';
 import { SuiProvider } from '@lifi/widget-provider-sui';
 import { TronProvider } from '@lifi/widget-provider-tron';
 
@@ -271,6 +293,7 @@ const widgetConfig: WidgetConfig = {
     BitcoinProvider(),
     SuiProvider(),
     TronProvider(),
+    StellarProvider(),
   ],
   theme: {
     container: {

package/dist/esm/App.d.ts

@@ -2,9 +2,8 @@ import { WidgetProps } from "./types/widget.js";
 import { WidgetDrawer } from "./AppDrawer.js";
 import { JSX, Ref } from "react";
 //#region src/App.d.ts
-declare const App: (props: WidgetProps & {
+export declare const App: (props: WidgetProps & {
   ref?: Ref<WidgetDrawer>;
 }) => JSX.Element;
 //#endregion
-export { App };
 //# sourceMappingURL=App.d.ts.map

package/dist/esm/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","names":[],"sources":["../../src/App.tsx"],"mappings":";;;;cASa,MACX,OAAO;EAAgB,MAAM,IAAI;MAChC,IAAI"}
+{"version":3,"file":"App.d.ts","names":[],"sources":["../../src/App.tsx"],"mappings":";;;;qBASa,MACX,OAAO;EAAgB,MAAM,IAAI;MAChC,IAAI"}

package/dist/esm/AppDrawer.d.ts

@@ -1,12 +1,11 @@
 import "./types/widget.js";
 import { JSX, PropsWithChildren, Ref } from "react";
 //#region src/AppDrawer.d.ts
-interface WidgetDrawer {
+export interface WidgetDrawer {
   isOpen(): void;
   toggleDrawer(): void;
   openDrawer(): void;
   closeDrawer(): void;
 }
 //#endregion
-export { WidgetDrawer };
 //# sourceMappingURL=AppDrawer.d.ts.map

package/dist/esm/AppDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppDrawer.d.ts","names":[],"sources":["../../src/AppDrawer.tsx"],"mappings":";;;UAaiB;EACf;EACA;EACA;EACA"}
+{"version":3,"file":"AppDrawer.d.ts","names":[],"sources":["../../src/AppDrawer.tsx"],"mappings":";;;iBAaiB;EACf;EACA;EACA;EACA"}

package/dist/esm/components/ActionRow/ActionRow.d.ts

@@ -7,7 +7,6 @@ interface ActionRowProps {
   endAdornment?: ReactNode;
   sx?: SxProps<Theme>;
 }
-declare const ActionRow: FC<ActionRowProps>;
+export declare const ActionRow: FC<ActionRowProps>;
 //#endregion
-export { ActionRow };
 //# sourceMappingURL=ActionRow.d.ts.map

package/dist/esm/components/ActionRow/ActionRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionRow.d.ts","names":[],"sources":["../../../../src/components/ActionRow/ActionRow.tsx"],"mappings":";;;UAIU;EACR;EACA,gBAAgB;EAChB,eAAe;EACf,KAAK,QAAQ;;cAGF,WAAW,GAAG"}
+{"version":3,"file":"ActionRow.d.ts","names":[],"sources":["../../../../src/components/ActionRow/ActionRow.tsx"],"mappings":";;;UAIU;EACR;EACA,gBAAgB;EAChB,eAAe;EACf,KAAK,QAAQ;;qBAGF,WAAW,GAAG"}

package/dist/esm/components/AmountInput/AmountInput.style.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { Box, FormControl, InputBase } from "@mui/material";
 //#region src/components/AmountInput/AmountInput.style.d.ts
 declare const FormControl$1: React.FC<React.ComponentProps<typeof FormControl>>;
-declare const Input: React.FC<React.ComponentProps<typeof InputBase>>;
+export declare const Input: React.FC<React.ComponentProps<typeof InputBase>>;
 //#endregion
-export { FormControl$1 as FormControl, Input };
+export { FormControl$1 as FormControl };
 //# sourceMappingURL=AmountInput.style.d.ts.map

package/dist/esm/components/AmountInput/AmountInput.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.style.d.ts","names":[],"sources":["../../../../src/components/AmountInput/AmountInput.style.tsx"],"mappings":";;;;cAqBa,eAAa,MAAM,GAC9B,MAAM,sBAAsB;cAKjB,OAAO,MAAM,GAAG,MAAM,sBAAsB"}
+{"version":3,"file":"AmountInput.style.d.ts","names":[],"sources":["../../../../src/components/AmountInput/AmountInput.style.tsx"],"mappings":";;;;cAqBa,eAAa,MAAM,GAC9B,MAAM,sBAAsB;qBAKjB,OAAO,MAAM,GAAG,MAAM,sBAAsB"}

package/dist/esm/components/AmountInput/AmountInputEndAdornment.d.ts

@@ -1,7 +1,6 @@
 import { FormTypeProps } from "../../stores/form/types.js";
 import React from "react";
 //#region src/components/AmountInput/AmountInputEndAdornment.d.ts
-declare const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>;
+export declare const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>;
 //#endregion
-export { AmountInputEndAdornment };
 //# sourceMappingURL=AmountInputEndAdornment.d.ts.map

package/dist/esm/components/AmountInput/AmountInputEndAdornment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInputEndAdornment.d.ts","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"mappings":";;;cAiBa,yBAAyB,MAAM,qBAAqB"}
+{"version":3,"file":"AmountInputEndAdornment.d.ts","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"mappings":";;;qBAiBa,yBAAyB,MAAM,qBAAqB"}

package/dist/esm/components/AmountInput/PriceFormHelperText.style.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { Button } from "@mui/material";
 //#region src/components/AmountInput/PriceFormHelperText.style.d.ts
-declare const InputPriceButton: React.FC<React.ComponentProps<typeof Button>>;
+export declare const InputPriceButton: React.FC<React.ComponentProps<typeof Button>>;
 //#endregion
-export { InputPriceButton };
 //# sourceMappingURL=PriceFormHelperText.style.d.ts.map

package/dist/esm/components/AmountInput/PriceFormHelperText.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PriceFormHelperText.style.d.ts","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.style.tsx"],"mappings":";;;cAGa,kBAAkB,MAAM,GAAG,MAAM,sBAAsB"}
+{"version":3,"file":"PriceFormHelperText.style.d.ts","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.style.tsx"],"mappings":";;;qBAGa,kBAAkB,MAAM,GAAG,MAAM,sBAAsB"}

package/dist/esm/components/AmountInputCard/ReceiveAmountCard.js

@@ -1,6 +1,8 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { mergeFallbackToken } from "../../utils/token.js";
+import { useToken } from "../../hooks/useToken.js";
 import { useRoutes } from "../../hooks/useRoutes.js";
 import { ProgressToNextUpdate } from "../ProgressToNextUpdate.js";
 import { getPriceImpact } from "../../utils/getPriceImpact.js";
@@ -80,10 +82,12 @@ const ReceiveAmountCard = (props) => {
 	const route = routes?.find((r) => r.id === selectedRouteId) ?? routes?.[0];
 	const priceImpact = useReceivePriceImpact(route);
 	const showPriceImpact = !hiddenUI?.routeCardPriceImpact;
+	const { token: cachedToken } = useToken(route?.toToken.chainId, route?.toToken.address);
+	const pricedToken = route ? mergeFallbackToken(route.toToken, cachedToken) : void 0;
 	const receiveAmount = route?.toAmount ? formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals) : void 0;
 	const showSkeleton = isFetching && !receiveAmount;
-	const fiatValue = receiveAmount && route?.toToken.priceUSD ? formatTokenPrice(receiveAmount, route.toToken.priceUSD) : 0;
-	const canToggle = !!receiveAmount && !!route?.toToken.priceUSD;
+	const fiatValue = receiveAmount && pricedToken?.priceUSD ? formatTokenPrice(receiveAmount, pricedToken.priceUSD) : 0;
+	const canToggle = !!receiveAmount && !!pricedToken?.priceUSD;
 	const mainDisplay = showFiat ? t("format.currency", { value: fiatValue }) : t("format.tokenAmount", { value: receiveAmount || "0" });
 	const footerDisplay = showFiat ? t("format.tokenAmount", { value: receiveAmount || "0" }) : t("format.currency", { value: fiatValue });
 	useLayoutEffect(() => {

package/dist/esm/components/AmountInputCard/ReceiveAmountCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReceiveAmountCard.js","names":["InfoOutlinedIcon"],"sources":["../../../../src/components/AmountInputCard/ReceiveAmountCard.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport type { CardProps } from '@mui/material'\nimport { Box, Skeleton, Tooltip } from '@mui/material'\nimport { type JSX, type ReactNode, useLayoutEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'\nimport {\n  AmountCard,\n  AmountDisplay,\n  amountHeight,\n  CardBodyRow,\n  CardFooterRow,\n  CardHeaderRow,\n  FooterText,\n  footerFontSize,\n  maxInputFontSize,\n  minInputFontSize,\n  ToggleButton,\n} from './AmountInputCard.style.js'\n\nconst formType = 'to' as const\n\ntype ReceiveCardProps = CardProps & { mask?: boolean }\n\nconst ReceiveAmountCardLayout = ({\n  cardProps,\n  title,\n  headerEnd,\n  amount,\n  footerStart,\n  footerEnd,\n}: {\n  cardProps: ReceiveCardProps\n  title: string\n  headerEnd?: ReactNode\n  amount: ReactNode\n  footerStart: ReactNode\n  footerEnd?: ReactNode\n}): JSX.Element => (\n  <AmountCard {...cardProps} formType={formType}>\n    <CardHeaderRow>\n      <CardTitle sx={{ padding: 0 }}>{title}</CardTitle>\n      {headerEnd}\n    </CardHeaderRow>\n    <CardBodyRow>\n      {amount}\n      <TokenPillButton formType={formType} />\n    </CardBodyRow>\n    <CardFooterRow>\n      {footerStart}\n      {footerEnd}\n    </CardFooterRow>\n  </AmountCard>\n)\n\nconst PriceImpactBadge = ({\n  priceImpact,\n}: {\n  priceImpact: number | undefined\n}): JSX.Element | null => {\n  const { t } = useTranslation()\n  if (priceImpact === undefined) {\n    return null\n  }\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n      <FooterText>\n        {t('format.percent', { value: priceImpact, usePlusSign: true })}\n      </FooterText>\n      <Tooltip title={t('tooltip.priceImpact')}>\n        <InfoOutlinedIcon\n          sx={{ fontSize: 16, color: 'text.secondary', cursor: 'help' }}\n        />\n      </Tooltip>\n    </Box>\n  )\n}\n\nconst useReceivePriceImpact = (\n  route: Route | undefined\n): number | undefined => {\n  const { hiddenUI } = useWidgetConfig()\n  if (!route || hiddenUI?.routeCardPriceImpact) {\n    return undefined\n  }\n  return getPriceImpact({\n    fromAmount: BigInt(route.fromAmount),\n    toAmount: BigInt(route.toAmount),\n    fromToken: route.fromToken,\n    toToken: route.toToken,\n  })\n}\n\n/**\n * The receive amount is a read-only quote derived from the best route, with a\n * fiat/token toggle and price impact in the footer. In limit mode the amount is\n * still the quote for the current limit (the limit price drives it via the\n * dedicated price card); it is never edited here, and the header shows the\n * refetch progress indicator with a \"Buy\" title.\n */\nexport const ReceiveAmountCard: React.FC<ReceiveCardProps> = (\n  props\n): JSX.Element => {\n  const { t } = useTranslation()\n  const amountRef = useRef<HTMLSpanElement>(null)\n  const { inputMode, toggleInputMode } = useInputModeStore()\n  const showFiat = inputMode[formType] === 'price'\n  const { hiddenUI, mode } = useWidgetConfig()\n  const isLimit = mode === 'limit'\n\n  const [selectedRouteId] = useFieldValues('selectedRouteId')\n  const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } =\n    useRoutes()\n  // Reflect the route the user selected in the routes list (falling back to the\n  // best route), so the buy amount matches the highlighted provider card.\n  const route = routes?.find((r) => r.id === selectedRouteId) ?? routes?.[0]\n  const priceImpact = useReceivePriceImpact(route)\n  const showPriceImpact = !hiddenUI?.routeCardPriceImpact\n\n  const receiveAmount = route?.toAmount\n    ? formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals)\n    : undefined\n  // Only show skeletons on the initial fetch.\n  const showSkeleton = isFetching && !receiveAmount\n\n  const fiatValue =\n    receiveAmount && route?.toToken.priceUSD\n      ? formatTokenPrice(receiveAmount, route.toToken.priceUSD)\n      : 0\n  const canToggle = !!receiveAmount && !!route?.toToken.priceUSD\n\n  const mainDisplay = showFiat\n    ? t('format.currency', { value: fiatValue })\n    : t('format.tokenAmount', { value: receiveAmount || '0' })\n  const footerDisplay = showFiat\n    ? t('format.tokenAmount', { value: receiveAmount || '0' })\n    : t('format.currency', { value: fiatValue })\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: effect must run on value change\n  useLayoutEffect(() => {\n    if (amountRef.current) {\n      fitInputText(maxInputFontSize, minInputFontSize, amountRef.current)\n    }\n  }, [mainDisplay])\n\n  return (\n    <ReceiveAmountCardLayout\n      cardProps={props}\n      title={isLimit ? t('header.buy') : t('header.receive')}\n      headerEnd={\n        isLimit && (isFetching || routes?.length) ? (\n          <ProgressToNextUpdate\n            updatedAt={dataUpdatedAt || Date.now()}\n            timeToUpdate={refetchTime}\n            isLoading={isFetching}\n            onClick={() => refetch()}\n            sx={{ padding: 0 }}\n          />\n        ) : undefined\n      }\n      amount={\n        showSkeleton ? (\n          <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n        ) : (\n          <AmountDisplay\n            ref={amountRef}\n            sx={{ color: 'text.primary', opacity: receiveAmount ? 1 : 0.5 }}\n          >\n            {mainDisplay}\n          </AmountDisplay>\n        )\n      }\n      footerStart={\n        showSkeleton ? (\n          <Skeleton\n            variant=\"text\"\n            width={72}\n            sx={{ fontSize: footerFontSize }}\n          />\n        ) : (\n          <ToggleButton\n            clickable={canToggle}\n            onClick={canToggle ? () => toggleInputMode(formType) : undefined}\n            aria-label={canToggle ? 'Toggle fiat value' : undefined}\n          >\n            <FooterText>{footerDisplay}</FooterText>\n            {canToggle ? (\n              <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />\n            ) : null}\n          </ToggleButton>\n        )\n      }\n      footerEnd={\n        showSkeleton ? (\n          showPriceImpact ? (\n            <Skeleton\n              variant=\"text\"\n              width={56}\n              sx={{ fontSize: footerFontSize }}\n            />\n          ) : null\n        ) : (\n          <PriceImpactBadge priceImpact={priceImpact} />\n        )\n      }\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ReceiveAmountCard.js","names":["InfoOutlinedIcon"],"sources":["../../../../src/components/AmountInputCard/ReceiveAmountCard.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport type { CardProps } from '@mui/material'\nimport { Box, Skeleton, Tooltip } from '@mui/material'\nimport { type JSX, type ReactNode, useLayoutEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { mergeFallbackToken } from '../../utils/token.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'\nimport {\n  AmountCard,\n  AmountDisplay,\n  amountHeight,\n  CardBodyRow,\n  CardFooterRow,\n  CardHeaderRow,\n  FooterText,\n  footerFontSize,\n  maxInputFontSize,\n  minInputFontSize,\n  ToggleButton,\n} from './AmountInputCard.style.js'\n\nconst formType = 'to' as const\n\ntype ReceiveCardProps = CardProps & { mask?: boolean }\n\nconst ReceiveAmountCardLayout = ({\n  cardProps,\n  title,\n  headerEnd,\n  amount,\n  footerStart,\n  footerEnd,\n}: {\n  cardProps: ReceiveCardProps\n  title: string\n  headerEnd?: ReactNode\n  amount: ReactNode\n  footerStart: ReactNode\n  footerEnd?: ReactNode\n}): JSX.Element => (\n  <AmountCard {...cardProps} formType={formType}>\n    <CardHeaderRow>\n      <CardTitle sx={{ padding: 0 }}>{title}</CardTitle>\n      {headerEnd}\n    </CardHeaderRow>\n    <CardBodyRow>\n      {amount}\n      <TokenPillButton formType={formType} />\n    </CardBodyRow>\n    <CardFooterRow>\n      {footerStart}\n      {footerEnd}\n    </CardFooterRow>\n  </AmountCard>\n)\n\nconst PriceImpactBadge = ({\n  priceImpact,\n}: {\n  priceImpact: number | undefined\n}): JSX.Element | null => {\n  const { t } = useTranslation()\n  if (priceImpact === undefined) {\n    return null\n  }\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n      <FooterText>\n        {t('format.percent', { value: priceImpact, usePlusSign: true })}\n      </FooterText>\n      <Tooltip title={t('tooltip.priceImpact')}>\n        <InfoOutlinedIcon\n          sx={{ fontSize: 16, color: 'text.secondary', cursor: 'help' }}\n        />\n      </Tooltip>\n    </Box>\n  )\n}\n\nconst useReceivePriceImpact = (\n  route: Route | undefined\n): number | undefined => {\n  const { hiddenUI } = useWidgetConfig()\n  if (!route || hiddenUI?.routeCardPriceImpact) {\n    return undefined\n  }\n  return getPriceImpact({\n    fromAmount: BigInt(route.fromAmount),\n    toAmount: BigInt(route.toAmount),\n    fromToken: route.fromToken,\n    toToken: route.toToken,\n  })\n}\n\n/**\n * The receive amount is a read-only quote derived from the best route, with a\n * fiat/token toggle and price impact in the footer. In limit mode the amount is\n * still the quote for the current limit (the limit price drives it via the\n * dedicated price card); it is never edited here, and the header shows the\n * refetch progress indicator with a \"Buy\" title.\n */\nexport const ReceiveAmountCard: React.FC<ReceiveCardProps> = (\n  props\n): JSX.Element => {\n  const { t } = useTranslation()\n  const amountRef = useRef<HTMLSpanElement>(null)\n  const { inputMode, toggleInputMode } = useInputModeStore()\n  const showFiat = inputMode[formType] === 'price'\n  const { hiddenUI, mode } = useWidgetConfig()\n  const isLimit = mode === 'limit'\n\n  const [selectedRouteId] = useFieldValues('selectedRouteId')\n  const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } =\n    useRoutes()\n  // Reflect the route the user selected in the routes list (falling back to the\n  // best route), so the buy amount matches the highlighted provider card.\n  const route = routes?.find((r) => r.id === selectedRouteId) ?? routes?.[0]\n  const priceImpact = useReceivePriceImpact(route)\n  const showPriceImpact = !hiddenUI?.routeCardPriceImpact\n\n  // Value the amount the way a quote card does, so the two sides of the screen\n  // cannot disagree: the route's own price wins, and the cache fills only a gap\n  // the route leaves — a token it could not price arrives as '0' or ''.\n  const { token: cachedToken } = useToken(\n    route?.toToken.chainId,\n    route?.toToken.address\n  )\n  const pricedToken = route\n    ? mergeFallbackToken(route.toToken, cachedToken)\n    : undefined\n\n  const receiveAmount = route?.toAmount\n    ? formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals)\n    : undefined\n  // Only show skeletons on the initial fetch.\n  const showSkeleton = isFetching && !receiveAmount\n\n  const fiatValue =\n    receiveAmount && pricedToken?.priceUSD\n      ? formatTokenPrice(receiveAmount, pricedToken.priceUSD)\n      : 0\n  const canToggle = !!receiveAmount && !!pricedToken?.priceUSD\n\n  const mainDisplay = showFiat\n    ? t('format.currency', { value: fiatValue })\n    : t('format.tokenAmount', { value: receiveAmount || '0' })\n  const footerDisplay = showFiat\n    ? t('format.tokenAmount', { value: receiveAmount || '0' })\n    : t('format.currency', { value: fiatValue })\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: effect must run on value change\n  useLayoutEffect(() => {\n    if (amountRef.current) {\n      fitInputText(maxInputFontSize, minInputFontSize, amountRef.current)\n    }\n  }, [mainDisplay])\n\n  return (\n    <ReceiveAmountCardLayout\n      cardProps={props}\n      title={isLimit ? t('header.buy') : t('header.receive')}\n      headerEnd={\n        isLimit && (isFetching || routes?.length) ? (\n          <ProgressToNextUpdate\n            updatedAt={dataUpdatedAt || Date.now()}\n            timeToUpdate={refetchTime}\n            isLoading={isFetching}\n            onClick={() => refetch()}\n            sx={{ padding: 0 }}\n          />\n        ) : undefined\n      }\n      amount={\n        showSkeleton ? (\n          <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n        ) : (\n          <AmountDisplay\n            ref={amountRef}\n            sx={{ color: 'text.primary', opacity: receiveAmount ? 1 : 0.5 }}\n          >\n            {mainDisplay}\n          </AmountDisplay>\n        )\n      }\n      footerStart={\n        showSkeleton ? (\n          <Skeleton\n            variant=\"text\"\n            width={72}\n            sx={{ fontSize: footerFontSize }}\n          />\n        ) : (\n          <ToggleButton\n            clickable={canToggle}\n            onClick={canToggle ? () => toggleInputMode(formType) : undefined}\n            aria-label={canToggle ? 'Toggle fiat value' : undefined}\n          >\n            <FooterText>{footerDisplay}</FooterText>\n            {canToggle ? (\n              <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />\n            ) : null}\n          </ToggleButton>\n        )\n      }\n      footerEnd={\n        showSkeleton ? (\n          showPriceImpact ? (\n            <Skeleton\n              variant=\"text\"\n              width={56}\n              sx={{ fontSize: footerFontSize }}\n            />\n          ) : null\n        ) : (\n          <PriceImpactBadge priceImpact={priceImpact} />\n        )\n      }\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Avatar/Avatar.d.ts

@@ -1,12 +1,11 @@
 import { ExtendedChain } from "@lifi/sdk";
 import { SxProps, Theme } from "@mui/material";
 //#region src/components/Avatar/Avatar.d.ts
-declare const AvatarBadgedDefault: React.FC<{
+export declare const AvatarBadgedDefault: React.FC<{
   sx?: SxProps<Theme>;
   chain?: ExtendedChain;
   avatarSize?: number;
   badgeSize?: number;
 }>;
 //#endregion
-export { AvatarBadgedDefault };
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/esm/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"mappings":";;;cAOa,qBAAqB,MAAM;EACtC,KAAK,QAAQ;EACb,QAAQ;EACR;EACA"}
+{"version":3,"file":"Avatar.d.ts","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"mappings":";;;qBAOa,qBAAqB,MAAM;EACtC,KAAK,QAAQ;EACb,QAAQ;EACR;EACA"}

package/dist/esm/components/Avatar/TokenAvatar.d.ts

@@ -1,7 +1,7 @@
 import { Chain, StaticToken } from "@lifi/sdk";
 import { SxProps, Theme } from "@mui/material";
 //#region src/components/Avatar/TokenAvatar.d.ts
-declare const TokenAvatar: React.FC<{
+export declare const TokenAvatar: React.FC<{
   token?: StaticToken;
   chain?: Chain;
   isLoading?: boolean;
@@ -10,5 +10,4 @@ declare const TokenAvatar: React.FC<{
   chainAvatarSize?: number;
 }>;
 //#endregion
-export { TokenAvatar };
 //# sourceMappingURL=TokenAvatar.d.ts.map

package/dist/esm/components/Avatar/TokenAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenAvatar.d.ts","names":[],"sources":["../../../../src/components/Avatar/TokenAvatar.tsx"],"mappings":";;;cASa,aAAa,MAAM;EAC9B,QAAQ;EACR,QAAQ;EACR;EACA,KAAK,QAAQ;EACb;EACA"}
+{"version":3,"file":"TokenAvatar.d.ts","names":[],"sources":["../../../../src/components/Avatar/TokenAvatar.tsx"],"mappings":";;;qBASa,aAAa,MAAM;EAC9B,QAAQ;EACR,QAAQ;EACR;EACA,KAAK,QAAQ;EACb;EACA"}

package/dist/esm/components/BaseTransactionButton/BaseTransactionButton.d.ts

@@ -1,6 +1,5 @@
 import { BaseTransactionButtonProps } from "./types.js";
 //#region src/components/BaseTransactionButton/BaseTransactionButton.d.ts
-declare const BaseTransactionButton: React.FC<BaseTransactionButtonProps>;
+export declare const BaseTransactionButton: React.FC<BaseTransactionButtonProps>;
 //#endregion
-export { BaseTransactionButton };
 //# sourceMappingURL=BaseTransactionButton.d.ts.map

package/dist/esm/components/BaseTransactionButton/BaseTransactionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTransactionButton.d.ts","names":[],"sources":["../../../../src/components/BaseTransactionButton/BaseTransactionButton.tsx"],"mappings":";;cASa,uBAAuB,MAAM,GAAG"}
+{"version":3,"file":"BaseTransactionButton.d.ts","names":[],"sources":["../../../../src/components/BaseTransactionButton/BaseTransactionButton.tsx"],"mappings":";;qBASa,uBAAuB,MAAM,GAAG"}

package/dist/esm/components/BaseTransactionButton/types.d.ts

@@ -1,7 +1,7 @@
 import { RouteExtended } from "@lifi/sdk";
 import { SxProps, Theme } from "@mui/material";
 //#region src/components/BaseTransactionButton/types.d.ts
-interface BaseTransactionButtonProps {
+export interface BaseTransactionButtonProps {
   onClick?(): void;
   text?: string;
   disabled?: boolean;
@@ -10,5 +10,4 @@ interface BaseTransactionButtonProps {
   sx?: SxProps<Theme>;
 }
 //#endregion
-export { BaseTransactionButtonProps };
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/components/BaseTransactionButton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/BaseTransactionButton/types.ts"],"mappings":";;;UAGiB;EACf;EACA;EACA;EACA;EACA,QAAQ;EACR,KAAK,QAAQ"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/BaseTransactionButton/types.ts"],"mappings":";;;iBAGiB;EACf;EACA;EACA;EACA;EACA,QAAQ;EACR,KAAK,QAAQ"}

package/dist/esm/components/BottomSheet/BottomSheet.js

@@ -10,6 +10,7 @@ const BottomSheet = ({ elementRef, children, open, onClose, keepMounted = false,
 	const [drawerOpen, setDrawerOpen] = useState(open);
 	const [isInert, setIsInert] = useState(!open);
 	const close = useCallback(() => {
+		if (!openRef.current) return;
 		setIsInert(true);
 		startTransition(() => {
 			setDrawerOpen(false);

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import { Drawer } from '@mui/material'\nimport type { JSX, Ref } from 'react'\nimport {\n  startTransition,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { modalProps, slotProps } from '../Dialog/Dialog.js'\nimport type { BottomSheetBase, BottomSheetProps } from './types.js'\n\nexport const BottomSheet = ({\n  elementRef,\n  children,\n  open,\n  onClose,\n  keepMounted = false,\n  ref,\n}: Omit<BottomSheetProps, 'ref'> & {\n  ref?: Ref<BottomSheetBase>\n}): JSX.Element => {\n  const getContainer = useGetScrollableContainer()\n  const openRef = useRef(open)\n  const [drawerOpen, setDrawerOpen] = useState(open)\n  const [isInert, setIsInert] = useState(!open)\n\n  const close = useCallback(() => {\n    // Set inert first to prevent focus issues\n    setIsInert(true)\n    // Push the state update to the next event loop tick\n    // to ensure the inert is applied to before the drawer is closed\n    startTransition(() => {\n      setDrawerOpen(false)\n      openRef.current = false\n      onClose?.()\n    })\n  }, [onClose])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      isOpen: () => openRef.current,\n      open: () => {\n        setIsInert(false)\n        setDrawerOpen(true)\n        openRef.current = true\n      },\n      close,\n    }),\n    [close]\n  )\n\n  return (\n    <Drawer\n      container={getContainer}\n      ref={elementRef}\n      anchor=\"bottom\"\n      open={drawerOpen}\n      onClose={close}\n      ModalProps={modalProps}\n      slotProps={slotProps}\n      disableAutoFocus\n      keepMounted={keepMounted}\n      inert={isInert}\n    >\n      {children}\n    </Drawer>\n  )\n}\n"],"mappings":";;;;;;AAaA,MAAa,eAAe,EAC1B,YACA,UACA,MACA,SACA,cAAc,OACd,UAGiB;CACjB,MAAM,eAAe,0BAA0B;CAC/C,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,IAAI;CAE5C,MAAM,QAAQ,kBAAkB;EAE9B,WAAW,IAAI;EAGf,sBAAsB;GACpB,cAAc,KAAK;GACnB,QAAQ,UAAU;GAClB,UAAU;EACZ,CAAC;CACH,GAAG,CAAC,OAAO,CAAC;CAEZ,oBACE,YACO;EACL,cAAc,QAAQ;EACtB,YAAY;GACV,WAAW,KAAK;GAChB,cAAc,IAAI;GAClB,QAAQ,UAAU;EACpB;EACA;CACF,IACA,CAAC,KAAK,CACR;CAEA,OACE,oBAAC,QAAD;EACE,WAAW;EACX,KAAK;EACL,QAAO;EACP,MAAM;EACN,SAAS;EACT,YAAY;EACD;EACX,kBAAA;EACa;EACb,OAAO;EAEN;CACK,CAAA;AAEZ"}
+{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import { Drawer } from '@mui/material'\nimport type { JSX, Ref } from 'react'\nimport {\n  startTransition,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { modalProps, slotProps } from '../Dialog/Dialog.js'\nimport type { BottomSheetBase, BottomSheetProps } from './types.js'\n\nexport const BottomSheet = ({\n  elementRef,\n  children,\n  open,\n  onClose,\n  keepMounted = false,\n  ref,\n}: Omit<BottomSheetProps, 'ref'> & {\n  ref?: Ref<BottomSheetBase>\n}): JSX.Element => {\n  const getContainer = useGetScrollableContainer()\n  const openRef = useRef(open)\n  const [drawerOpen, setDrawerOpen] = useState(open)\n  const [isInert, setIsInert] = useState(!open)\n\n  const close = useCallback(() => {\n    if (!openRef.current) {\n      return\n    }\n    // Set inert first to prevent focus issues\n    setIsInert(true)\n    // Push the state update to the next event loop tick\n    // to ensure the inert is applied to before the drawer is closed\n    startTransition(() => {\n      setDrawerOpen(false)\n      openRef.current = false\n      onClose?.()\n    })\n  }, [onClose])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      isOpen: () => openRef.current,\n      open: () => {\n        setIsInert(false)\n        setDrawerOpen(true)\n        openRef.current = true\n      },\n      close,\n    }),\n    [close]\n  )\n\n  return (\n    <Drawer\n      container={getContainer}\n      ref={elementRef}\n      anchor=\"bottom\"\n      open={drawerOpen}\n      onClose={close}\n      ModalProps={modalProps}\n      slotProps={slotProps}\n      disableAutoFocus\n      keepMounted={keepMounted}\n      inert={isInert}\n    >\n      {children}\n    </Drawer>\n  )\n}\n"],"mappings":";;;;;;AAaA,MAAa,eAAe,EAC1B,YACA,UACA,MACA,SACA,cAAc,OACd,UAGiB;CACjB,MAAM,eAAe,0BAA0B;CAC/C,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,IAAI;CAE5C,MAAM,QAAQ,kBAAkB;EAC9B,IAAI,CAAC,QAAQ,SACX;EAGF,WAAW,IAAI;EAGf,sBAAsB;GACpB,cAAc,KAAK;GACnB,QAAQ,UAAU;GAClB,UAAU;EACZ,CAAC;CACH,GAAG,CAAC,OAAO,CAAC;CAEZ,oBACE,YACO;EACL,cAAc,QAAQ;EACtB,YAAY;GACV,WAAW,KAAK;GAChB,cAAc,IAAI;GAClB,QAAQ,UAAU;EACpB;EACA;CACF,IACA,CAAC,KAAK,CACR;CAEA,OACE,oBAAC,QAAD;EACE,WAAW;EACX,KAAK;EACL,QAAO;EACP,MAAM;EACN,SAAS;EACT,YAAY;EACD;EACX,kBAAA;EACa;EACb,OAAO;EAEN;CACK,CAAA;AAEZ"}

package/dist/esm/components/BottomSheet/types.d.ts

@@ -1,11 +1,10 @@
 import { RefObject } from "react";
 import "@mui/material";
 //#region src/components/BottomSheet/types.d.ts
-interface BottomSheetBase {
+export interface BottomSheetBase {
   isOpen(): void;
   open(): void;
   close(): void;
 }
 //#endregion
-export { BottomSheetBase };
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/components/BottomSheet/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/BottomSheet/types.ts"],"mappings":";;;UASiB;EACf;EACA;EACA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/BottomSheet/types.ts"],"mappings":";;;iBASiB;EACf;EACA;EACA"}

package/dist/esm/components/ButtonTertiary.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { Button } from "@mui/material";
 //#region src/components/ButtonTertiary.d.ts
-declare const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>>;
+export declare const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>>;
 //#endregion
-export { ButtonTertiary };
 //# sourceMappingURL=ButtonTertiary.d.ts.map

package/dist/esm/components/ButtonTertiary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.d.ts","names":[],"sources":["../../../src/components/ButtonTertiary.tsx"],"mappings":";;;cAGa,gBAAgB,MAAM,GAAG,MAAM,sBAAsB"}
+{"version":3,"file":"ButtonTertiary.d.ts","names":[],"sources":["../../../src/components/ButtonTertiary.tsx"],"mappings":";;;qBAGa,gBAAgB,MAAM,GAAG,MAAM,sBAAsB"}

package/dist/esm/components/Card/CardIconButton.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { IconButton, IconButtonProps, LinkProps } from "@mui/material";
 //#region src/components/Card/CardIconButton.d.ts
-declare const CardIconButton: React.FC<React.ComponentProps<typeof IconButton> & IconButtonProps & Pick<LinkProps, "href" | "target" | "rel">>;
+export declare const CardIconButton: React.FC<React.ComponentProps<typeof IconButton> & IconButtonProps & Pick<LinkProps, "href" | "target" | "rel">>;
 //#endregion
-export { CardIconButton };
 //# sourceMappingURL=CardIconButton.d.ts.map

package/dist/esm/components/Card/CardIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardIconButton.d.ts","names":[],"sources":["../../../../src/components/Card/CardIconButton.tsx"],"mappings":";;;cAIa,gBAAgB,MAAM,GACjC,MAAM,sBAAsB,cAC1B,kBACA,KAAK"}
+{"version":3,"file":"CardIconButton.d.ts","names":[],"sources":["../../../../src/components/Card/CardIconButton.tsx"],"mappings":";;;qBAIa,gBAAgB,MAAM,GACjC,MAAM,sBAAsB,cAC1B,kBACA,KAAK"}

package/dist/esm/components/Card/CardTitle.d.ts

@@ -1,9 +1,8 @@
 import React from "react";
 import { Typography } from "@mui/material";
 //#region src/components/Card/CardTitle.d.ts
-declare const CardTitle: React.FC<React.ComponentProps<typeof Typography> & {
+export declare const CardTitle: React.FC<React.ComponentProps<typeof Typography> & {
   required?: boolean;
 }>;
 //#endregion
-export { CardTitle };
 //# sourceMappingURL=CardTitle.d.ts.map

package/dist/esm/components/Card/CardTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardTitle.d.ts","names":[],"sources":["../../../../src/components/Card/CardTitle.tsx"],"mappings":";;;cAGa,WAAW,MAAM,GAC5B,MAAM,sBAAsB;EAAgB"}
+{"version":3,"file":"CardTitle.d.ts","names":[],"sources":["../../../../src/components/Card/CardTitle.tsx"],"mappings":";;;qBAGa,WAAW,MAAM,GAC5B,MAAM,sBAAsB;EAAgB"}

package/dist/esm/components/Card/InputCard.d.ts

@@ -1,7 +1,6 @@
 import { Card } from "./Card.js";
 import React from "react";
 //#region src/components/Card/InputCard.d.ts
-declare const InputCard: React.FC<React.ComponentProps<typeof Card>>;
+export declare const InputCard: React.FC<React.ComponentProps<typeof Card>>;
 //#endregion
-export { InputCard };
 //# sourceMappingURL=InputCard.d.ts.map

package/dist/esm/components/Card/InputCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputCard.d.ts","names":[],"sources":["../../../../src/components/Card/InputCard.tsx"],"mappings":";;;cAIa,WAAW,MAAM,GAAG,MAAM,sBAAsB"}
+{"version":3,"file":"InputCard.d.ts","names":[],"sources":["../../../../src/components/Card/InputCard.tsx"],"mappings":";;;qBAIa,WAAW,MAAM,GAAG,MAAM,sBAAsB"}

package/dist/esm/components/ChainSelect/ChainSelect.d.ts

@@ -1,7 +1,6 @@
 import { FormTypeProps } from "../../stores/form/types.js";
 import React from "react";
 //#region src/components/ChainSelect/ChainSelect.d.ts
-declare const ChainSelect: React.NamedExoticComponent<FormTypeProps>;
+export declare const ChainSelect: React.NamedExoticComponent<FormTypeProps>;
 //#endregion
-export { ChainSelect };
 //# sourceMappingURL=ChainSelect.d.ts.map

package/dist/esm/components/ChainSelect/ChainSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChainSelect.d.ts","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"mappings":";;;cA2Ba,aAAa,MAAM,qBAAqB"}
+{"version":3,"file":"ChainSelect.d.ts","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"mappings":";;;qBA2Ba,aAAa,MAAM,qBAAqB"}

package/dist/esm/components/ChainSelect/ChainSelect.style.d.ts

@@ -2,9 +2,8 @@ import "../Card/Card.js";
 import React from "react";
 import { Avatar, Box, Typography } from "@mui/material";
 //#region src/components/ChainSelect/ChainSelect.style.d.ts
-declare const ChainAvatar: React.FC<React.ComponentProps<typeof Avatar> & {
+export declare const ChainAvatar: React.FC<React.ComponentProps<typeof Avatar> & {
   itemCount?: number;
 }>;
 //#endregion
-export { ChainAvatar };
 //# sourceMappingURL=ChainSelect.style.d.ts.map

package/dist/esm/components/ChainSelect/ChainSelect.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChainSelect.style.d.ts","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.style.tsx"],"mappings":";;;;cA+Ba,aAAa,MAAM,GAC9B,MAAM,sBAAsB;EAAY"}
+{"version":3,"file":"ChainSelect.style.d.ts","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.style.tsx"],"mappings":";;;;qBA+Ba,aAAa,MAAM,GAC9B,MAAM,sBAAsB;EAAY"}

package/dist/esm/components/ContractComponent/ContractComponent.d.ts

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from "react";
 import { CardProps } from "@mui/material";
 //#region src/components/ContractComponent/ContractComponent.d.ts
-declare const ContractComponent: React.FC<PropsWithChildren<CardProps>>;
+export declare const ContractComponent: React.FC<PropsWithChildren<CardProps>>;
 //#endregion
-export { ContractComponent };
 //# sourceMappingURL=ContractComponent.d.ts.map

package/dist/esm/components/ContractComponent/ContractComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContractComponent.d.ts","names":[],"sources":["../../../../src/components/ContractComponent/ContractComponent.tsx"],"mappings":";;;cAIa,mBAAmB,MAAM,GAAG,kBAAkB"}
+{"version":3,"file":"ContractComponent.d.ts","names":[],"sources":["../../../../src/components/ContractComponent/ContractComponent.tsx"],"mappings":";;;qBAIa,mBAAmB,MAAM,GAAG,kBAAkB"}

package/dist/esm/components/ContractComponent/ItemPrice.d.ts

@@ -1,11 +1,10 @@
 import { TokenAmount as TokenAmount$1 } from "../../types/token.js";
 import { ContractCall } from "@lifi/sdk";
 //#region src/components/ContractComponent/ItemPrice.d.ts
-interface ItemPriceProps {
+export interface ItemPriceProps {
   token: TokenAmount$1;
   contractCalls?: ContractCall[];
 }
-declare const ItemPrice: React.FC<ItemPriceProps>;
+export declare const ItemPrice: React.FC<ItemPriceProps>;
 //#endregion
-export { ItemPrice, ItemPriceProps };
 //# sourceMappingURL=ItemPrice.d.ts.map

package/dist/esm/components/ContractComponent/ItemPrice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemPrice.d.ts","names":[],"sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"mappings":";;;UAMiB;EACf,OAAO;EACP,gBAAgB;;cAGL,WAAW,MAAM,GAAG"}
+{"version":3,"file":"ItemPrice.d.ts","names":[],"sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"mappings":";;;iBAMiB;EACf,OAAO;EACP,gBAAgB;;qBAGL,WAAW,MAAM,GAAG"}

package/dist/esm/components/ContractComponent/NFT/NFT.d.ts

@@ -1,6 +1,5 @@
 import { NFTProps } from "./types.js";
 //#region src/components/ContractComponent/NFT/NFT.d.ts
-declare const NFT: React.FC<NFTProps>;
+export declare const NFT: React.FC<NFTProps>;
 //#endregion
-export { NFT };
 //# sourceMappingURL=NFT.d.ts.map

package/dist/esm/components/ContractComponent/NFT/NFT.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NFT.d.ts","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFT.tsx"],"mappings":";;cAMa,KAAK,MAAM,GAAG"}
+{"version":3,"file":"NFT.d.ts","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFT.tsx"],"mappings":";;qBAMa,KAAK,MAAM,GAAG"}

package/dist/esm/components/ContractComponent/NFT/NFTBase.d.ts

@@ -1,6 +1,5 @@
 import { NFTProps } from "./types.js";
 //#region src/components/ContractComponent/NFT/NFTBase.d.ts
-declare const NFTBase: React.FC<NFTProps>;
+export declare const NFTBase: React.FC<NFTProps>;
 //#endregion
-export { NFTBase };
 //# sourceMappingURL=NFTBase.d.ts.map

package/dist/esm/components/ContractComponent/NFT/NFTBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NFTBase.d.ts","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"mappings":";;cAMa,SAAS,MAAM,GAAG"}
+{"version":3,"file":"NFTBase.d.ts","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"mappings":";;qBAMa,SAAS,MAAM,GAAG"}

package/dist/esm/components/ContractComponent/NFT/types.d.ts

@@ -1,6 +1,6 @@
 import { ContractCall, TokenAmount } from "@lifi/sdk";
 //#region src/components/ContractComponent/NFT/types.d.ts
-interface NFTBaseProps {
+export interface NFTBaseProps {
   imageUrl?: string;
   collectionName?: string;
   assetName?: string;
@@ -8,13 +8,12 @@ interface NFTBaseProps {
   owner?: NFTOwner;
   token: TokenAmount;
 }
-interface NFTProps extends NFTBaseProps {
+export interface NFTProps extends NFTBaseProps {
   contractCall?: ContractCall;
 }
-interface NFTOwner {
+export interface NFTOwner {
   name?: string;
   url?: string;
 }
 //#endregion
-export { NFTBaseProps, NFTOwner, NFTProps };
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/components/ContractComponent/NFT/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/types.ts"],"mappings":";;UAEiB;EACf;EACA;EACA;EACA;EACA,QAAQ;EACR,OAAO;;UAGQ,iBAAiB;EAChC,eAAe;;UAGA;EACf;EACA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/types.ts"],"mappings":";;iBAEiB;EACf;EACA;EACA;EACA;EACA,QAAQ;EACR,OAAO;;iBAGQ,iBAAiB;EAChC,eAAe;;iBAGA;EACf;EACA"}

package/dist/esm/components/ExecutionStatusCard/ExecutionStatusCard.d.ts

@@ -15,7 +15,6 @@ interface ExecutionStatusCardProps {
   /** Partner/VC component, shown after the icon/title when done. */
   vcSlot?: ReactNode;
 }
-declare function ExecutionStatusCard({ title, description, rows, iconSlot, footerSlot, vcSlot }: ExecutionStatusCardProps): JSX.Element;
+export declare function ExecutionStatusCard({ title, description, rows, iconSlot, footerSlot, vcSlot }: ExecutionStatusCardProps): JSX.Element;
 //#endregion
-export { ExecutionStatusCard };
 //# sourceMappingURL=ExecutionStatusCard.d.ts.map

package/dist/esm/components/ExecutionStatusCard/ExecutionStatusCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExecutionStatusCard.d.ts","names":[],"sources":["../../../../src/components/ExecutionStatusCard/ExecutionStatusCard.tsx"],"mappings":";;;UAWU;;EAER;;EAEA;;EAEA,MAAM;;EAEN,UAAU;;EAEV,YAAY;;EAEZ,SAAS;;iBA6EK,sBACd,OACA,aACA,MACA,UACA,YACA,UACC,2BAA2B,IAAI"}
+{"version":3,"file":"ExecutionStatusCard.d.ts","names":[],"sources":["../../../../src/components/ExecutionStatusCard/ExecutionStatusCard.tsx"],"mappings":";;;UAWU;;EAER;;EAEA;;EAEA,MAAM;;EAEN,UAAU;;EAEV,YAAY;;EAEZ,SAAS;;wBA6EK,sBACd,OACA,aACA,MACA,UACA,YACA,UACC,2BAA2B,IAAI"}

package/dist/esm/components/ExecutionStatusCard/StatusIcon.d.ts

@@ -10,7 +10,6 @@ interface StatusIconProps {
  * The animated status icon. Each state animates in its own way; they all
  * animate out the same way.
  */
-declare function StatusIcon({ route, status }: StatusIconProps): JSX.Element;
+export declare function StatusIcon({ route, status }: StatusIconProps): JSX.Element;
 //#endregion
-export { StatusIcon };
 //# sourceMappingURL=StatusIcon.d.ts.map

package/dist/esm/components/ExecutionStatusCard/StatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.d.ts","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StatusIcon.tsx"],"mappings":";;;;UA0DU;EACR,OAAO;EACP,QAAQ;;;;;;iBAOM,aAAa,OAAO,UAAU,kBAAkB,IAAI"}
+{"version":3,"file":"StatusIcon.d.ts","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StatusIcon.tsx"],"mappings":";;;;UA0DU;EACR,OAAO;EACP,QAAQ;;;;;;wBAOM,aAAa,OAAO,UAAU,kBAAkB,IAAI"}