@lifi/widget 4.0.0 → 4.2.0

package/dist/esm/App.d.ts

@@ -1,9 +1,11 @@
 import { WidgetProps } from "./types/widget.js";
 import { WidgetDrawer } from "./AppDrawer.js";
-import { ForwardRefExoticComponent, RefAttributes } from "react";
+import { JSX, Ref } from "react";
 
 //#region src/App.d.ts
-declare const App: ForwardRefExoticComponent<WidgetProps & RefAttributes<WidgetDrawer>>;
+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,GAAA,EAAK,yBAAA,CAChB,WAAA,GAAc,aAAA,CAAc,YAAA"}
+{"version":3,"file":"App.d.ts","names":[],"sources":["../../src/App.tsx"],"mappings":";;;;;cASa,GAAA,GACX,KAAA,EAAO,WAAA;EAAgB,GAAA,GAAM,GAAA,CAAI,YAAA;AAAA,MAChC,GAAA,CAAI,OAAA"}

package/dist/esm/App.js

@@ -2,10 +2,10 @@
 import { AppDefault } from "./AppDefault.js";
 import { AppDrawer } from "./AppDrawer.js";
 import { AppProvider } from "./AppProvider.js";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/App.tsx
-const App = forwardRef((props, ref) => {
+const App = (props) => {
 	const config = useMemo(() => {
 		const config = {
 			...props,
@@ -24,7 +24,7 @@ const App = forwardRef((props, ref) => {
 		config,
 		formRef: props.formRef,
 		children: /* @__PURE__ */ jsx(AppDrawer, {
-			ref,
+			ref: props.ref,
 			elementRef: props.elementRef,
 			config,
 			open: props.open,
@@ -37,7 +37,7 @@ const App = forwardRef((props, ref) => {
 		formRef: props.formRef,
 		children: /* @__PURE__ */ jsx(AppDefault, {})
 	});
-});
+};
 //#endregion
 export { App };
 

package/dist/esm/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","names":[],"sources":["../../src/App.tsx"],"sourcesContent":["'use client'\nimport type { ForwardRefExoticComponent, RefAttributes } from 'react'\nimport { forwardRef, useMemo } from 'react'\nimport { AppDefault } from './AppDefault.js'\nimport type { WidgetDrawer } from './AppDrawer.js'\nimport { AppDrawer } from './AppDrawer.js'\nimport { AppProvider } from './AppProvider.js'\nimport type { WidgetConfig, WidgetProps } from './types/widget.js'\n\nexport const App: ForwardRefExoticComponent<\n  WidgetProps & RefAttributes<WidgetDrawer>\n> = forwardRef<WidgetDrawer, WidgetProps>((props, ref) => {\n  const config: WidgetConfig = useMemo(() => {\n    const config = { ...props, ...props.config }\n    if (config.variant === 'drawer') {\n      config.theme = {\n        ...config.theme,\n        container: {\n          height: '100%',\n          ...config.theme?.container,\n        },\n      }\n    }\n    return config\n  }, [props])\n\n  if (config.variant === 'drawer') {\n    return (\n      <AppProvider config={config} formRef={props.formRef}>\n        <AppDrawer\n          ref={ref}\n          elementRef={props.elementRef}\n          config={config}\n          open={props.open}\n          onClose={props.onClose}\n        >\n          <AppDefault />\n        </AppDrawer>\n      </AppProvider>\n    )\n  }\n\n  return (\n    <AppProvider config={config} formRef={props.formRef}>\n      <AppDefault />\n    </AppProvider>\n  )\n})\n"],"mappings":";;;;;;;AASA,MAAa,MAET,YAAuC,OAAO,QAAQ;CACxD,MAAM,SAAuB,cAAc;EACzC,MAAM,SAAS;GAAE,GAAG;GAAO,GAAG,MAAM;EAAO;EAC3C,IAAI,OAAO,YAAY,UACrB,OAAO,QAAQ;GACb,GAAG,OAAO;GACV,WAAW;IACT,QAAQ;IACR,GAAG,OAAO,OAAO;GACnB;EACF;EAEF,OAAO;CACT,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,OAAO,YAAY,UACrB,OACE,oBAAC,aAAD;EAAqB;EAAQ,SAAS,MAAM;YAC1C,oBAAC,WAAD;GACO;GACL,YAAY,MAAM;GACV;GACR,MAAM,MAAM;GACZ,SAAS,MAAM;aAEf,oBAAC,YAAD,CAAa,CAAA;EACJ,CAAA;CACA,CAAA;CAIjB,OACE,oBAAC,aAAD;EAAqB;EAAQ,SAAS,MAAM;YAC1C,oBAAC,YAAD,CAAa,CAAA;CACF,CAAA;AAEjB,CAAC"}
+{"version":3,"file":"App.js","names":[],"sources":["../../src/App.tsx"],"sourcesContent":["'use client'\nimport type { JSX, Ref } from 'react'\nimport { useMemo } from 'react'\nimport { AppDefault } from './AppDefault.js'\nimport type { WidgetDrawer } from './AppDrawer.js'\nimport { AppDrawer } from './AppDrawer.js'\nimport { AppProvider } from './AppProvider.js'\nimport type { WidgetConfig, WidgetProps } from './types/widget.js'\n\nexport const App = (\n  props: WidgetProps & { ref?: Ref<WidgetDrawer> }\n): JSX.Element => {\n  const config: WidgetConfig = useMemo(() => {\n    const config = { ...props, ...props.config }\n    if (config.variant === 'drawer') {\n      config.theme = {\n        ...config.theme,\n        container: {\n          height: '100%',\n          ...config.theme?.container,\n        },\n      }\n    }\n    return config\n  }, [props])\n\n  if (config.variant === 'drawer') {\n    return (\n      <AppProvider config={config} formRef={props.formRef}>\n        <AppDrawer\n          ref={props.ref}\n          elementRef={props.elementRef}\n          config={config}\n          open={props.open}\n          onClose={props.onClose}\n        >\n          <AppDefault />\n        </AppDrawer>\n      </AppProvider>\n    )\n  }\n\n  return (\n    <AppProvider config={config} formRef={props.formRef}>\n      <AppDefault />\n    </AppProvider>\n  )\n}\n"],"mappings":";;;;;;;AASA,MAAa,OACX,UACgB;CAChB,MAAM,SAAuB,cAAc;EACzC,MAAM,SAAS;GAAE,GAAG;GAAO,GAAG,MAAM;EAAO;EAC3C,IAAI,OAAO,YAAY,UACrB,OAAO,QAAQ;GACb,GAAG,OAAO;GACV,WAAW;IACT,QAAQ;IACR,GAAG,OAAO,OAAO;GACnB;EACF;EAEF,OAAO;CACT,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,OAAO,YAAY,UACrB,OACE,oBAAC,aAAD;EAAqB;EAAQ,SAAS,MAAM;YAC1C,oBAAC,WAAD;GACE,KAAK,MAAM;GACX,YAAY,MAAM;GACV;GACR,MAAM,MAAM;GACZ,SAAS,MAAM;aAEf,oBAAC,YAAD,CAAa,CAAA;EACJ,CAAA;CACA,CAAA;CAIjB,OACE,oBAAC,aAAD;EAAqB;EAAQ,SAAS,MAAM;YAC1C,oBAAC,YAAD,CAAa,CAAA;CACF,CAAA;AAEjB"}

package/dist/esm/AppDefault.js

@@ -4,6 +4,7 @@ import { NotFound } from "./components/NotFound.js";
 import { ActivitiesPage } from "./pages/ActivitiesPage/ActivitiesPage.js";
 import { LanguagesPage } from "./pages/LanguagesPage.js";
 import { MainPage } from "./pages/MainPage/MainPage.js";
+import { RoutePriorityPage } from "./pages/RoutePriorityPage.js";
 import { RoutesPage } from "./pages/RoutesPage/RoutesPage.js";
 import { SelectChainPage } from "./pages/SelectChainPage/SelectChainPage.js";
 import { SelectEnabledToolsPage } from "./pages/SelectEnabledToolsPage.js";
@@ -14,6 +15,7 @@ import { RecentWalletsPage } from "./pages/SendToWallet/RecentWalletsPage.js";
 import { SendToConfiguredWalletPage } from "./pages/SendToWallet/SendToConfiguredWalletPage.js";
 import { SendToWalletPage } from "./pages/SendToWallet/SendToWalletPage.js";
 import { SettingsPage } from "./pages/SettingsPage/SettingsPage.js";
+import { SlippagePage } from "./pages/SettingsPage/SlippageSettings/SlippagePage.js";
 import { TransactionDetailsPage } from "./pages/TransactionDetailsPage/TransactionDetailsPage.js";
 import { TransactionPage } from "./pages/TransactionPage/TransactionPage.js";
 import { useState } from "react";
@@ -53,6 +55,16 @@ const settingsLanguagesRoute = createRoute({
 	path: navigationRoutes.languages,
 	component: LanguagesPage
 });
+const settingsRoutePriorityRoute = createRoute({
+	getParentRoute: () => settingsLayoutRoute,
+	path: navigationRoutes.routePriority,
+	component: RoutePriorityPage
+});
+const settingsSlippageRoute = createRoute({
+	getParentRoute: () => settingsLayoutRoute,
+	path: navigationRoutes.slippage,
+	component: SlippagePage
+});
 const fromTokenLayoutRoute = createRoute({
 	getParentRoute: () => rootRoute,
 	path: navigationRoutes.fromToken
@@ -179,6 +191,8 @@ const routeTree = rootRoute.addChildren([
 	settingsLayoutRoute.addChildren([
 		settingsIndexRoute,
 		settingsLanguagesRoute,
+		settingsRoutePriorityRoute,
+		settingsSlippageRoute,
 		settingsBridgesRoute,
 		settingsExchangesRoute
 	]),

package/dist/esm/AppDefault.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppDefault.js","names":[],"sources":["../../src/AppDefault.tsx"],"sourcesContent":["import {\n  createMemoryHistory,\n  createRootRoute,\n  createRoute,\n  createRouter,\n  RouterProvider,\n} from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useState } from 'react'\nimport { AppLayout } from './AppLayout.js'\nimport { NotFound } from './components/NotFound.js'\nimport { ActivitiesPage } from './pages/ActivitiesPage/ActivitiesPage.js'\nimport { LanguagesPage } from './pages/LanguagesPage.js'\nimport { MainPage } from './pages/MainPage/MainPage.js'\nimport { RoutesPage } from './pages/RoutesPage/RoutesPage.js'\nimport { SelectChainPage } from './pages/SelectChainPage/SelectChainPage.js'\nimport { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage.js'\nimport { SelectTokenPage } from './pages/SelectTokenPage/SelectTokenPage.js'\nimport { BookmarksPage } from './pages/SendToWallet/BookmarksPage.js'\nimport { ConnectedWalletsPage } from './pages/SendToWallet/ConnectedWalletsPage.js'\nimport { RecentWalletsPage } from './pages/SendToWallet/RecentWalletsPage.js'\nimport { SendToConfiguredWalletPage } from './pages/SendToWallet/SendToConfiguredWalletPage.js'\nimport { SendToWalletPage } from './pages/SendToWallet/SendToWalletPage.js'\nimport { SettingsPage } from './pages/SettingsPage/SettingsPage.js'\nimport { TransactionDetailsPage } from './pages/TransactionDetailsPage/TransactionDetailsPage.js'\nimport { TransactionPage } from './pages/TransactionPage/TransactionPage.js'\nimport { navigationRoutes } from './utils/navigationRoutes.js'\n\nconst rootRoute = createRootRoute({\n  component: AppLayout,\n  notFoundComponent: NotFound,\n})\n\nconst indexRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.home,\n  component: MainPage,\n})\n\nconst settingsLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.settings,\n})\n\nconst settingsIndexRoute = createRoute({\n  getParentRoute: () => settingsLayoutRoute,\n  path: '/',\n  component: SettingsPage,\n})\n\nconst settingsBridgesRoute = createRoute({\n  getParentRoute: () => settingsLayoutRoute,\n  path: navigationRoutes.bridges,\n  component: () => <SelectEnabledToolsPage type=\"Bridges\" />,\n})\n\nconst settingsExchangesRoute = createRoute({\n  getParentRoute: () => settingsLayoutRoute,\n  path: navigationRoutes.exchanges,\n  component: () => <SelectEnabledToolsPage type=\"Exchanges\" />,\n})\n\nconst settingsLanguagesRoute = createRoute({\n  getParentRoute: () => settingsLayoutRoute,\n  path: navigationRoutes.languages,\n  component: LanguagesPage,\n})\n\nconst fromTokenLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.fromToken,\n})\n\nconst fromTokenIndexRoute = createRoute({\n  getParentRoute: () => fromTokenLayoutRoute,\n  path: '/',\n  component: () => <SelectTokenPage formType=\"from\" />,\n})\n\nconst fromTokenFromChainRoute = createRoute({\n  getParentRoute: () => fromTokenLayoutRoute,\n  path: navigationRoutes.fromChain,\n  component: () => <SelectChainPage formType=\"from\" />,\n})\n\nconst toTokenLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.toToken,\n})\n\nconst toTokenIndexRoute = createRoute({\n  getParentRoute: () => toTokenLayoutRoute,\n  path: '/',\n  component: () => <SelectTokenPage formType=\"to\" />,\n})\n\nconst toTokenToChainRoute = createRoute({\n  getParentRoute: () => toTokenLayoutRoute,\n  path: navigationRoutes.toChain,\n  component: () => <SelectChainPage formType=\"to\" />,\n})\n\nconst toTokenNativeRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.toTokenNative,\n  component: () => <SelectChainPage formType=\"to\" selectNativeToken />,\n})\n\nconst routesLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.routes,\n})\n\nconst routesIndexRoute = createRoute({\n  getParentRoute: () => routesLayoutRoute,\n  path: '/',\n  component: RoutesPage,\n})\n\nconst routesTransactionExecutionRoute = createRoute({\n  getParentRoute: () => routesLayoutRoute,\n  path: navigationRoutes.transactionExecution,\n})\n\nconst routesTransactionExecutionIndexRoute = createRoute({\n  getParentRoute: () => routesTransactionExecutionRoute,\n  path: '/',\n  component: TransactionPage,\n})\n\nconst routesTransactionExecutionDetailsRoute = createRoute({\n  getParentRoute: () => routesTransactionExecutionRoute,\n  path: navigationRoutes.transactionDetails,\n  component: TransactionDetailsPage,\n})\n\nconst activitiesLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.activities,\n})\n\nconst activitiesIndexRoute = createRoute({\n  getParentRoute: () => activitiesLayoutRoute,\n  path: '/',\n  component: ActivitiesPage,\n})\n\nconst activitiesDetailsRoute = createRoute({\n  getParentRoute: () => activitiesLayoutRoute,\n  path: navigationRoutes.transactionDetails,\n  component: TransactionDetailsPage,\n})\n\nconst activitiesTransactionExecutionRoute = createRoute({\n  getParentRoute: () => activitiesLayoutRoute,\n  path: navigationRoutes.transactionExecution,\n  component: TransactionPage,\n})\n\nconst sendToWalletLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.sendToWallet,\n})\n\nconst sendToWalletIndexRoute = createRoute({\n  getParentRoute: () => sendToWalletLayoutRoute,\n  path: '/',\n  component: SendToWalletPage,\n})\n\nconst sendToWalletBookmarksRoute = createRoute({\n  getParentRoute: () => sendToWalletLayoutRoute,\n  path: navigationRoutes.bookmarks,\n  component: BookmarksPage,\n})\n\nconst sendToWalletRecentWalletsRoute = createRoute({\n  getParentRoute: () => sendToWalletLayoutRoute,\n  path: navigationRoutes.recentWallets,\n  component: RecentWalletsPage,\n})\n\nconst sendToWalletConnectedWalletsRoute = createRoute({\n  getParentRoute: () => sendToWalletLayoutRoute,\n  path: navigationRoutes.connectedWallets,\n  component: ConnectedWalletsPage,\n})\n\nconst configuredWalletsRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.configuredWallets,\n  component: SendToConfiguredWalletPage,\n})\n\nconst transactionExecutionLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.transactionExecution,\n})\n\nconst transactionExecutionIndexRoute = createRoute({\n  getParentRoute: () => transactionExecutionLayoutRoute,\n  path: '/',\n  component: TransactionPage,\n})\n\nconst transactionExecutionDetailsRoute = createRoute({\n  getParentRoute: () => transactionExecutionLayoutRoute,\n  path: navigationRoutes.transactionDetails,\n  component: TransactionDetailsPage,\n})\n\nconst routeTree = rootRoute.addChildren([\n  indexRoute,\n  settingsLayoutRoute.addChildren([\n    settingsIndexRoute,\n    settingsLanguagesRoute,\n    settingsBridgesRoute,\n    settingsExchangesRoute,\n  ]),\n  fromTokenLayoutRoute.addChildren([\n    fromTokenIndexRoute,\n    fromTokenFromChainRoute,\n  ]),\n  toTokenLayoutRoute.addChildren([toTokenIndexRoute, toTokenToChainRoute]),\n  toTokenNativeRoute,\n  routesLayoutRoute.addChildren([\n    routesIndexRoute,\n    routesTransactionExecutionRoute.addChildren([\n      routesTransactionExecutionIndexRoute,\n      routesTransactionExecutionDetailsRoute,\n    ]),\n  ]),\n  transactionExecutionLayoutRoute.addChildren([\n    transactionExecutionIndexRoute,\n    transactionExecutionDetailsRoute,\n  ]),\n  activitiesLayoutRoute.addChildren([\n    activitiesIndexRoute,\n    activitiesDetailsRoute,\n    activitiesTransactionExecutionRoute,\n  ]),\n  sendToWalletLayoutRoute.addChildren([\n    sendToWalletIndexRoute,\n    sendToWalletBookmarksRoute,\n    sendToWalletRecentWalletsRoute,\n    sendToWalletConnectedWalletsRoute,\n  ]),\n  configuredWalletsRoute,\n])\n\ndeclare module '@tanstack/react-router' {\n  interface Register {\n    router: ReturnType<typeof createRouter>\n  }\n}\n\nexport const AppDefault = (): JSX.Element => {\n  const [router] = useState(() =>\n    createRouter({\n      routeTree,\n      history: createMemoryHistory({ initialEntries: ['/'] }),\n      defaultPreload: 'intent',\n    })\n  )\n  return <RouterProvider router={router} />\n}\n"],"mappings":"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"}
+{"version":3,"file":"AppDefault.js","names":[],"sources":["../../src/AppDefault.tsx"],"sourcesContent":["import {\n  createMemoryHistory,\n  createRootRoute,\n  createRoute,\n  createRouter,\n  RouterProvider,\n} from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useState } from 'react'\nimport { AppLayout } from './AppLayout.js'\nimport { NotFound } from './components/NotFound.js'\nimport { ActivitiesPage } from './pages/ActivitiesPage/ActivitiesPage.js'\nimport { LanguagesPage } from './pages/LanguagesPage.js'\nimport { MainPage } from './pages/MainPage/MainPage.js'\nimport { RoutePriorityPage } from './pages/RoutePriorityPage.js'\nimport { RoutesPage } from './pages/RoutesPage/RoutesPage.js'\nimport { SelectChainPage } from './pages/SelectChainPage/SelectChainPage.js'\nimport { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage.js'\nimport { SelectTokenPage } from './pages/SelectTokenPage/SelectTokenPage.js'\nimport { BookmarksPage } from './pages/SendToWallet/BookmarksPage.js'\nimport { ConnectedWalletsPage } from './pages/SendToWallet/ConnectedWalletsPage.js'\nimport { RecentWalletsPage } from './pages/SendToWallet/RecentWalletsPage.js'\nimport { SendToConfiguredWalletPage } from './pages/SendToWallet/SendToConfiguredWalletPage.js'\nimport { SendToWalletPage } from './pages/SendToWallet/SendToWalletPage.js'\nimport { SettingsPage } from './pages/SettingsPage/SettingsPage.js'\nimport { SlippagePage } from './pages/SettingsPage/SlippageSettings/SlippagePage.js'\nimport { TransactionDetailsPage } from './pages/TransactionDetailsPage/TransactionDetailsPage.js'\nimport { TransactionPage } from './pages/TransactionPage/TransactionPage.js'\nimport { navigationRoutes } from './utils/navigationRoutes.js'\n\nconst rootRoute = createRootRoute({\n  component: AppLayout,\n  notFoundComponent: NotFound,\n})\n\nconst indexRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.home,\n  component: MainPage,\n})\n\nconst settingsLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.settings,\n})\n\nconst settingsIndexRoute = createRoute({\n  getParentRoute: () => settingsLayoutRoute,\n  path: '/',\n  component: SettingsPage,\n})\n\nconst settingsBridgesRoute = createRoute({\n  getParentRoute: () => settingsLayoutRoute,\n  path: navigationRoutes.bridges,\n  component: () => <SelectEnabledToolsPage type=\"Bridges\" />,\n})\n\nconst settingsExchangesRoute = createRoute({\n  getParentRoute: () => settingsLayoutRoute,\n  path: navigationRoutes.exchanges,\n  component: () => <SelectEnabledToolsPage type=\"Exchanges\" />,\n})\n\nconst settingsLanguagesRoute = createRoute({\n  getParentRoute: () => settingsLayoutRoute,\n  path: navigationRoutes.languages,\n  component: LanguagesPage,\n})\n\nconst settingsRoutePriorityRoute = createRoute({\n  getParentRoute: () => settingsLayoutRoute,\n  path: navigationRoutes.routePriority,\n  component: RoutePriorityPage,\n})\n\nconst settingsSlippageRoute = createRoute({\n  getParentRoute: () => settingsLayoutRoute,\n  path: navigationRoutes.slippage,\n  component: SlippagePage,\n})\n\nconst fromTokenLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.fromToken,\n})\n\nconst fromTokenIndexRoute = createRoute({\n  getParentRoute: () => fromTokenLayoutRoute,\n  path: '/',\n  component: () => <SelectTokenPage formType=\"from\" />,\n})\n\nconst fromTokenFromChainRoute = createRoute({\n  getParentRoute: () => fromTokenLayoutRoute,\n  path: navigationRoutes.fromChain,\n  component: () => <SelectChainPage formType=\"from\" />,\n})\n\nconst toTokenLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.toToken,\n})\n\nconst toTokenIndexRoute = createRoute({\n  getParentRoute: () => toTokenLayoutRoute,\n  path: '/',\n  component: () => <SelectTokenPage formType=\"to\" />,\n})\n\nconst toTokenToChainRoute = createRoute({\n  getParentRoute: () => toTokenLayoutRoute,\n  path: navigationRoutes.toChain,\n  component: () => <SelectChainPage formType=\"to\" />,\n})\n\nconst toTokenNativeRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.toTokenNative,\n  component: () => <SelectChainPage formType=\"to\" selectNativeToken />,\n})\n\nconst routesLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.routes,\n})\n\nconst routesIndexRoute = createRoute({\n  getParentRoute: () => routesLayoutRoute,\n  path: '/',\n  component: RoutesPage,\n})\n\nconst routesTransactionExecutionRoute = createRoute({\n  getParentRoute: () => routesLayoutRoute,\n  path: navigationRoutes.transactionExecution,\n})\n\nconst routesTransactionExecutionIndexRoute = createRoute({\n  getParentRoute: () => routesTransactionExecutionRoute,\n  path: '/',\n  component: TransactionPage,\n})\n\nconst routesTransactionExecutionDetailsRoute = createRoute({\n  getParentRoute: () => routesTransactionExecutionRoute,\n  path: navigationRoutes.transactionDetails,\n  component: TransactionDetailsPage,\n})\n\nconst activitiesLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.activities,\n})\n\nconst activitiesIndexRoute = createRoute({\n  getParentRoute: () => activitiesLayoutRoute,\n  path: '/',\n  component: ActivitiesPage,\n})\n\nconst activitiesDetailsRoute = createRoute({\n  getParentRoute: () => activitiesLayoutRoute,\n  path: navigationRoutes.transactionDetails,\n  component: TransactionDetailsPage,\n})\n\nconst activitiesTransactionExecutionRoute = createRoute({\n  getParentRoute: () => activitiesLayoutRoute,\n  path: navigationRoutes.transactionExecution,\n  component: TransactionPage,\n})\n\nconst sendToWalletLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.sendToWallet,\n})\n\nconst sendToWalletIndexRoute = createRoute({\n  getParentRoute: () => sendToWalletLayoutRoute,\n  path: '/',\n  component: SendToWalletPage,\n})\n\nconst sendToWalletBookmarksRoute = createRoute({\n  getParentRoute: () => sendToWalletLayoutRoute,\n  path: navigationRoutes.bookmarks,\n  component: BookmarksPage,\n})\n\nconst sendToWalletRecentWalletsRoute = createRoute({\n  getParentRoute: () => sendToWalletLayoutRoute,\n  path: navigationRoutes.recentWallets,\n  component: RecentWalletsPage,\n})\n\nconst sendToWalletConnectedWalletsRoute = createRoute({\n  getParentRoute: () => sendToWalletLayoutRoute,\n  path: navigationRoutes.connectedWallets,\n  component: ConnectedWalletsPage,\n})\n\nconst configuredWalletsRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.configuredWallets,\n  component: SendToConfiguredWalletPage,\n})\n\nconst transactionExecutionLayoutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: navigationRoutes.transactionExecution,\n})\n\nconst transactionExecutionIndexRoute = createRoute({\n  getParentRoute: () => transactionExecutionLayoutRoute,\n  path: '/',\n  component: TransactionPage,\n})\n\nconst transactionExecutionDetailsRoute = createRoute({\n  getParentRoute: () => transactionExecutionLayoutRoute,\n  path: navigationRoutes.transactionDetails,\n  component: TransactionDetailsPage,\n})\n\nconst routeTree = rootRoute.addChildren([\n  indexRoute,\n  settingsLayoutRoute.addChildren([\n    settingsIndexRoute,\n    settingsLanguagesRoute,\n    settingsRoutePriorityRoute,\n    settingsSlippageRoute,\n    settingsBridgesRoute,\n    settingsExchangesRoute,\n  ]),\n  fromTokenLayoutRoute.addChildren([\n    fromTokenIndexRoute,\n    fromTokenFromChainRoute,\n  ]),\n  toTokenLayoutRoute.addChildren([toTokenIndexRoute, toTokenToChainRoute]),\n  toTokenNativeRoute,\n  routesLayoutRoute.addChildren([\n    routesIndexRoute,\n    routesTransactionExecutionRoute.addChildren([\n      routesTransactionExecutionIndexRoute,\n      routesTransactionExecutionDetailsRoute,\n    ]),\n  ]),\n  transactionExecutionLayoutRoute.addChildren([\n    transactionExecutionIndexRoute,\n    transactionExecutionDetailsRoute,\n  ]),\n  activitiesLayoutRoute.addChildren([\n    activitiesIndexRoute,\n    activitiesDetailsRoute,\n    activitiesTransactionExecutionRoute,\n  ]),\n  sendToWalletLayoutRoute.addChildren([\n    sendToWalletIndexRoute,\n    sendToWalletBookmarksRoute,\n    sendToWalletRecentWalletsRoute,\n    sendToWalletConnectedWalletsRoute,\n  ]),\n  configuredWalletsRoute,\n])\n\ndeclare module '@tanstack/react-router' {\n  interface Register {\n    router: ReturnType<typeof createRouter>\n  }\n}\n\nexport const AppDefault = (): JSX.Element => {\n  const [router] = useState(() =>\n    createRouter({\n      routeTree,\n      history: createMemoryHistory({ initialEntries: ['/'] }),\n      defaultPreload: 'intent',\n    })\n  )\n  return <RouterProvider router={router} />\n}\n"],"mappings":"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"}

package/dist/esm/AppDrawer.d.ts

@@ -1,4 +1,4 @@
-import { ForwardRefExoticComponent, PropsWithChildren, RefAttributes } from "react";
+import { JSX, PropsWithChildren, Ref } from "react";
 
 //#region src/AppDrawer.d.ts
 interface WidgetDrawer {

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

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

package/dist/esm/AppDrawer.js

@@ -1,9 +1,9 @@
 import { DrawerContext } from "./AppDrawerContext.js";
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Drawer } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
 //#region src/AppDrawer.tsx
-const AppDrawer = forwardRef(({ elementRef, open, onClose, children }, ref) => {
+const AppDrawer = ({ elementRef, open, onClose, children, ref }) => {
 	const openRef = useRef(Boolean(open));
 	const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
 	const toggleDrawer = useCallback(() => {
@@ -32,9 +32,8 @@ const AppDrawer = forwardRef(({ elementRef, open, onClose, children }, ref) => {
 		openDrawer,
 		toggleDrawer
 	]);
-	const drawerContext = useMemo(() => ({ closeDrawer }), [closeDrawer]);
-	return /* @__PURE__ */ jsx(DrawerContext.Provider, {
-		value: drawerContext,
+	return /* @__PURE__ */ jsx(DrawerContext, {
+		value: useMemo(() => ({ closeDrawer }), [closeDrawer]),
 		children: /* @__PURE__ */ jsx(Drawer, {
 			ref: elementRef,
 			anchor: "right",
@@ -56,7 +55,7 @@ const AppDrawer = forwardRef(({ elementRef, open, onClose, children }, ref) => {
 			children
 		})
 	});
-});
+};
 //#endregion
 export { AppDrawer };
 

package/dist/esm/AppDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppDrawer.js","names":[],"sources":["../../src/AppDrawer.tsx"],"sourcesContent":["import { Drawer } from '@mui/material'\nimport type {\n  ForwardRefExoticComponent,\n  PropsWithChildren,\n  RefAttributes,\n} from 'react'\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport type { WidgetDrawerContext } from './AppDrawerContext.js'\nimport { DrawerContext } from './AppDrawerContext.js'\nimport type { WidgetDrawerProps } from './types/widget.js'\n\nexport interface WidgetDrawer {\n  isOpen(): void\n  toggleDrawer(): void\n  openDrawer(): void\n  closeDrawer(): void\n}\n\nexport const AppDrawer: ForwardRefExoticComponent<\n  PropsWithChildren<WidgetDrawerProps> & RefAttributes<WidgetDrawer>\n> = forwardRef<WidgetDrawer, PropsWithChildren<WidgetDrawerProps>>(\n  ({ elementRef, open, onClose, children }, ref) => {\n    const openRef = useRef(Boolean(open))\n    const [drawerOpen, setDrawerOpen] = useState(Boolean(open))\n\n    const toggleDrawer = useCallback(() => {\n      setDrawerOpen((open) => {\n        openRef.current = !open\n        return openRef.current\n      })\n      if (!openRef.current) {\n        onClose?.()\n      }\n    }, [onClose])\n\n    const openDrawer = useCallback(() => {\n      setDrawerOpen(true)\n      openRef.current = true\n    }, [])\n\n    const closeDrawer = useCallback(() => {\n      setDrawerOpen(false)\n      openRef.current = false\n      onClose?.()\n    }, [onClose])\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        isOpen: () => openRef.current,\n        toggleDrawer,\n        openDrawer,\n        closeDrawer,\n      }),\n      [closeDrawer, openDrawer, toggleDrawer]\n    )\n\n    const drawerContext: WidgetDrawerContext = useMemo(\n      () => ({\n        closeDrawer,\n      }),\n      [closeDrawer]\n    )\n\n    return (\n      <DrawerContext.Provider value={drawerContext}>\n        <Drawer\n          ref={elementRef}\n          anchor=\"right\"\n          open={drawerOpen}\n          onClose={closeDrawer}\n          slotProps={{\n            paper: {\n              sx: (theme) => ({\n                background: theme.vars.palette.background.default,\n                width: theme?.container?.width ?? '100%',\n                minWidth:\n                  theme?.container?.minWidth ?? theme.breakpoints.values.xs,\n                maxWidth:\n                  theme?.container?.maxWidth ?? theme.breakpoints.values.sm,\n              }),\n            },\n            backdrop: {\n              sx: {\n                backgroundColor: 'rgb(0 0 0 / 48%)',\n                backdropFilter: 'blur(3px)',\n              },\n            },\n          }}\n          keepMounted\n        >\n          {children}\n        </Drawer>\n      </DrawerContext.Provider>\n    )\n  }\n)\n"],"mappings":";;;;;AAyBA,MAAa,YAET,YACD,EAAE,YAAY,MAAM,SAAS,YAAY,QAAQ;CAChD,MAAM,UAAU,OAAO,QAAQ,IAAI,CAAC;CACpC,MAAM,CAAC,YAAY,iBAAiB,SAAS,QAAQ,IAAI,CAAC;CAE1D,MAAM,eAAe,kBAAkB;EACrC,eAAe,SAAS;GACtB,QAAQ,UAAU,CAAC;GACnB,OAAO,QAAQ;EACjB,CAAC;EACD,IAAI,CAAC,QAAQ,SACX,UAAU;CAEd,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB;EACnC,cAAc,IAAI;EAClB,QAAQ,UAAU;CACpB,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,kBAAkB;EACpC,cAAc,KAAK;EACnB,QAAQ,UAAU;EAClB,UAAU;CACZ,GAAG,CAAC,OAAO,CAAC;CAEZ,oBACE,YACO;EACL,cAAc,QAAQ;EACtB;EACA;EACA;CACF,IACA;EAAC;EAAa;EAAY;CAAY,CACxC;CAEA,MAAM,gBAAqC,eAClC,EACL,YACF,IACA,CAAC,WAAW,CACd;CAEA,OACE,oBAAC,cAAc,UAAf;EAAwB,OAAO;YAC7B,oBAAC,QAAD;GACE,KAAK;GACL,QAAO;GACP,MAAM;GACN,SAAS;GACT,WAAW;IACT,OAAO,EACL,KAAK,WAAW;KACd,YAAY,MAAM,KAAK,QAAQ,WAAW;KAC1C,OAAO,OAAO,WAAW,SAAS;KAClC,UACE,OAAO,WAAW,YAAY,MAAM,YAAY,OAAO;KACzD,UACE,OAAO,WAAW,YAAY,MAAM,YAAY,OAAO;IAC3D,GACF;IACA,UAAU,EACR,IAAI;KACF,iBAAiB;KACjB,gBAAgB;IAClB,EACF;GACF;GACA,aAAA;GAEC;EACK,CAAA;CACc,CAAA;AAE5B,CACF"}
+{"version":3,"file":"AppDrawer.js","names":[],"sources":["../../src/AppDrawer.tsx"],"sourcesContent":["import { Drawer } from '@mui/material'\nimport type { JSX, PropsWithChildren, Ref } from 'react'\nimport {\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport type { WidgetDrawerContext } from './AppDrawerContext.js'\nimport { DrawerContext } from './AppDrawerContext.js'\nimport type { WidgetDrawerProps } from './types/widget.js'\n\nexport interface WidgetDrawer {\n  isOpen(): void\n  toggleDrawer(): void\n  openDrawer(): void\n  closeDrawer(): void\n}\n\nexport const AppDrawer = ({\n  elementRef,\n  open,\n  onClose,\n  children,\n  ref,\n}: PropsWithChildren<WidgetDrawerProps> & {\n  ref?: Ref<WidgetDrawer>\n}): JSX.Element => {\n  const openRef = useRef(Boolean(open))\n  const [drawerOpen, setDrawerOpen] = useState(Boolean(open))\n\n  const toggleDrawer = useCallback(() => {\n    setDrawerOpen((open) => {\n      openRef.current = !open\n      return openRef.current\n    })\n    if (!openRef.current) {\n      onClose?.()\n    }\n  }, [onClose])\n\n  const openDrawer = useCallback(() => {\n    setDrawerOpen(true)\n    openRef.current = true\n  }, [])\n\n  const closeDrawer = useCallback(() => {\n    setDrawerOpen(false)\n    openRef.current = false\n    onClose?.()\n  }, [onClose])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      isOpen: () => openRef.current,\n      toggleDrawer,\n      openDrawer,\n      closeDrawer,\n    }),\n    [closeDrawer, openDrawer, toggleDrawer]\n  )\n\n  const drawerContext: WidgetDrawerContext = useMemo(\n    () => ({\n      closeDrawer,\n    }),\n    [closeDrawer]\n  )\n\n  return (\n    <DrawerContext value={drawerContext}>\n      <Drawer\n        ref={elementRef}\n        anchor=\"right\"\n        open={drawerOpen}\n        onClose={closeDrawer}\n        slotProps={{\n          paper: {\n            sx: (theme) => ({\n              background: theme.vars.palette.background.default,\n              width: theme?.container?.width ?? '100%',\n              minWidth:\n                theme?.container?.minWidth ?? theme.breakpoints.values.xs,\n              maxWidth:\n                theme?.container?.maxWidth ?? theme.breakpoints.values.sm,\n            }),\n          },\n          backdrop: {\n            sx: {\n              backgroundColor: 'rgb(0 0 0 / 48%)',\n              backdropFilter: 'blur(3px)',\n            },\n          },\n        }}\n        keepMounted\n      >\n        {children}\n      </Drawer>\n    </DrawerContext>\n  )\n}\n"],"mappings":";;;;;AAoBA,MAAa,aAAa,EACxB,YACA,MACA,SACA,UACA,UAGiB;CACjB,MAAM,UAAU,OAAO,QAAQ,IAAI,CAAC;CACpC,MAAM,CAAC,YAAY,iBAAiB,SAAS,QAAQ,IAAI,CAAC;CAE1D,MAAM,eAAe,kBAAkB;EACrC,eAAe,SAAS;GACtB,QAAQ,UAAU,CAAC;GACnB,OAAO,QAAQ;EACjB,CAAC;EACD,IAAI,CAAC,QAAQ,SACX,UAAU;CAEd,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB;EACnC,cAAc,IAAI;EAClB,QAAQ,UAAU;CACpB,GAAG,CAAC,CAAC;CAEL,MAAM,cAAc,kBAAkB;EACpC,cAAc,KAAK;EACnB,QAAQ,UAAU;EAClB,UAAU;CACZ,GAAG,CAAC,OAAO,CAAC;CAEZ,oBACE,YACO;EACL,cAAc,QAAQ;EACtB;EACA;EACA;CACF,IACA;EAAC;EAAa;EAAY;CAAY,CACxC;CASA,OACE,oBAAC,eAAD;EAAe,OAR0B,eAClC,EACL,YACF,IACA,CAAC,WAAW,CAIsB;YAChC,oBAAC,QAAD;GACE,KAAK;GACL,QAAO;GACP,MAAM;GACN,SAAS;GACT,WAAW;IACT,OAAO,EACL,KAAK,WAAW;KACd,YAAY,MAAM,KAAK,QAAQ,WAAW;KAC1C,OAAO,OAAO,WAAW,SAAS;KAClC,UACE,OAAO,WAAW,YAAY,MAAM,YAAY,OAAO;KACzD,UACE,OAAO,WAAW,YAAY,MAAM,YAAY,OAAO;IAC3D,GACF;IACA,UAAU,EACR,IAAI;KACF,iBAAiB;KACjB,gBAAgB;IAClB,EACF;GACF;GACA,aAAA;GAEC;EACK,CAAA;CACK,CAAA;AAEnB"}

package/dist/esm/AppDrawerContext.js

@@ -1,7 +1,7 @@
-import { createContext, useContext } from "react";
+import { createContext, use } from "react";
 //#region src/AppDrawerContext.ts
 const DrawerContext = createContext({});
-const useDrawer = () => useContext(DrawerContext);
+const useDrawer = () => use(DrawerContext);
 //#endregion
 export { DrawerContext, useDrawer };
 

package/dist/esm/AppDrawerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppDrawerContext.js","names":[],"sources":["../../src/AppDrawerContext.ts"],"sourcesContent":["import { type Context, createContext, useContext } from 'react'\n\nexport interface WidgetDrawerContext {\n  closeDrawer?(): void\n}\n\nexport const DrawerContext: Context<WidgetDrawerContext> =\n  createContext<WidgetDrawerContext>({})\n\nexport const useDrawer = (): WidgetDrawerContext => useContext(DrawerContext)\n"],"mappings":";;AAMA,MAAa,gBACX,cAAmC,CAAC,CAAC;AAEvC,MAAa,kBAAuC,WAAW,aAAa"}
+{"version":3,"file":"AppDrawerContext.js","names":[],"sources":["../../src/AppDrawerContext.ts"],"sourcesContent":["import { type Context, createContext, use } from 'react'\n\nexport interface WidgetDrawerContext {\n  closeDrawer?(): void\n}\n\nexport const DrawerContext: Context<WidgetDrawerContext> =\n  createContext<WidgetDrawerContext>({})\n\nexport const useDrawer = (): WidgetDrawerContext => use(DrawerContext)\n"],"mappings":";;AAMA,MAAa,gBACX,cAAmC,CAAC,CAAC;AAEvC,MAAa,kBAAuC,IAAI,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionRow.style.js","names":[],"sources":["../../../../src/components/ActionRow/ActionRow.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const ActionRowContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1),\n    borderRadius: theme.vars.shape.borderRadiusTertiary,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  }))\n\nexport const ActionRowLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    flex: 1,\n    fontSize: 12,\n    fontWeight: 500,\n    lineHeight: 1.3334,\n    color: theme.vars.palette.text.primary,\n  }))\n"],"mappings":";;AAGA,MAAa,qBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;CACpB,SAAS,MAAM,QAAQ,CAAC;CACxB,cAAc,MAAM,KAAK,MAAM;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;AAChF,EAAE;AAEJ,MAAa,iBACX,OAAO,UAAU,GAAG,EAAE,aAAa;CACjC,MAAM;CACN,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE"}
+{"version":3,"file":"ActionRow.style.js","names":[],"sources":["../../../../src/components/ActionRow/ActionRow.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const ActionRowContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1),\n    borderRadius: theme.vars.shape.borderRadiusTertiary,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  }))\n\nexport const ActionRowLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    flex: 1,\n    fontSize: 12,\n    fontWeight: 500,\n    lineHeight: 1.3334,\n    color: theme.vars.palette.text.primary,\n  }))\n"],"mappings":";;AAGA,MAAa,qBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;CACpB,SAAS,MAAM,QAAQ,CAAC;CACxB,cAAc,MAAM,KAAK,MAAM;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;AAChF,EAAE;AAEJ,MAAa,iBACX,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,MAAM;CACN,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE"}

package/dist/esm/components/AmountInput/AmountInput.js

@@ -70,7 +70,8 @@ const AmountInputBase = ({ formType, token, startAdornment, bottomAdornment, dis
 		let formattedValue;
 		if (currentInputMode === "price") {
 			formattedValue = formatInputAmount(inputValue.replace("$", ""), 2);
-			setFieldValue(amountKey, formatInputAmount(priceToTokenAmount(formattedValue, token?.priceUSD), token?.decimals), {
+			const formattedAmount = formatInputAmount(priceToTokenAmount(formattedValue, token?.priceUSD), token?.decimals);
+			setFieldValue(amountKey, formattedAmount, {
 				isDirty: true,
 				isTouched: true
 			});

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

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInput.tsx"],"sourcesContent":["import type { Token } from '@lifi/sdk'\nimport type { CardProps } from '@mui/material'\nimport type { ChangeEvent, ReactNode } from 'react'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { FormKeyHelper, type FormTypeProps } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport {\n  formatInputAmount,\n  formatTokenPrice,\n  priceToTokenAmount,\n  usdDecimals,\n} from '../../utils/format.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { InputCard } from '../Card/InputCard.js'\nimport {\n  AmountInputCardHeader,\n  AmountInputCardTitle,\n  FormContainer,\n  FormControl,\n  Input,\n  maxInputFontSize,\n  minInputFontSize,\n} from './AmountInput.style.js'\nimport { AmountInputEndAdornment } from './AmountInputEndAdornment.js'\nimport { AmountInputStartAdornment } from './AmountInputStartAdornment.js'\nimport { PriceFormHelperText } from './PriceFormHelperText.js'\n\nexport const AmountInput: React.FC<FormTypeProps & CardProps> = ({\n  formType,\n  ...props\n}) => {\n  const { disabledUI } = useWidgetConfig()\n\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    FormKeyHelper.getTokenKey(formType)\n  )\n\n  const { token } = useToken(chainId, tokenAddress)\n\n  const disabled = disabledUI?.fromAmount\n  return (\n    <AmountInputBase\n      formType={formType}\n      token={token}\n      bottomAdornment={<PriceFormHelperText formType={formType} />}\n      disabled={disabled}\n      {...props}\n    />\n  )\n}\n\nconst AmountInputBase: React.FC<\n  FormTypeProps &\n    CardProps & {\n      token?: Token\n      startAdornment?: ReactNode\n      bottomAdornment?: ReactNode\n      disabled?: boolean\n    }\n> = ({\n  formType,\n  token,\n  startAdornment,\n  bottomAdornment,\n  disabled,\n  ...props\n}) => {\n  const { t } = useTranslation()\n  const { mode, modeOptions } = useWidgetConfig()\n  const ref = useRef<HTMLInputElement>(null)\n\n  const isEditingRef = useRef(false)\n  const [formattedPriceInput, setFormattedPriceInput] = useState('')\n\n  const amountKey = FormKeyHelper.getAmountKey(formType)\n  const [value] = useFieldValues(amountKey)\n  const { setFieldValue } = useFieldActions()\n  const { inputMode } = useInputModeStore()\n\n  const currentInputMode = inputMode[formType]\n  let displayValue: string\n  if (isEditingRef.current) {\n    if (currentInputMode === 'price') {\n      displayValue = formattedPriceInput\n    } else {\n      displayValue = value as string\n    }\n  } else {\n    if (currentInputMode === 'price') {\n      const priceValue = formatTokenPrice(value as string, token?.priceUSD)\n      displayValue = formatInputAmount(\n        priceValue.toFixed(usdDecimals),\n        usdDecimals\n      )\n    } else {\n      displayValue = value as string\n    }\n  }\n\n  const handleChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    const { value: inputValue } = event.target\n    isEditingRef.current = true\n\n    let formattedValue: string\n    if (currentInputMode === 'price') {\n      const cleanInputValue = inputValue.replace('$', '')\n      formattedValue = formatInputAmount(cleanInputValue, usdDecimals, true)\n      const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n      setFormattedPriceInput(formattedValue)\n      setFieldValue(amountKey, tokenValue, { isDirty: true, isTouched: true })\n    } else {\n      formattedValue = formatInputAmount(inputValue, token?.decimals, true)\n      setFieldValue(amountKey, formattedValue, {\n        isDirty: true,\n        isTouched: true,\n      })\n    }\n  }\n\n  const handleBlur = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    const { value: inputValue } = event.target\n    isEditingRef.current = false\n\n    let formattedValue: string\n    if (currentInputMode === 'price') {\n      const cleanInputValue = inputValue.replace('$', '')\n      formattedValue = formatInputAmount(cleanInputValue, usdDecimals)\n      const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n      const formattedAmount = formatInputAmount(tokenValue, token?.decimals)\n      setFieldValue(amountKey, formattedAmount, {\n        isDirty: true,\n        isTouched: true,\n      })\n    } else {\n      formattedValue = formatInputAmount(inputValue, token?.decimals)\n      setFieldValue(amountKey, formattedValue, {\n        isDirty: true,\n        isTouched: true,\n      })\n    }\n  }\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: we need run effect on value change\n  useLayoutEffect(() => {\n    if (ref.current) {\n      fitInputText(maxInputFontSize, minInputFontSize, ref.current)\n    }\n  }, [displayValue])\n\n  const title =\n    mode === 'custom'\n      ? modeOptions?.custom?.type === 'deposit'\n        ? t('header.amount')\n        : t('header.youPay')\n      : t('header.send')\n\n  return (\n    <InputCard {...props}>\n      <AmountInputCardHeader>\n        <AmountInputCardTitle>{title}</AmountInputCardTitle>\n      </AmountInputCardHeader>\n      <FormContainer>\n        <AmountInputStartAdornment formType={formType} />\n        <FormControl fullWidth>\n          <Input\n            inputRef={ref}\n            size=\"small\"\n            autoComplete=\"off\"\n            placeholder={currentInputMode === 'price' ? '$0' : '0'}\n            startAdornment={startAdornment}\n            inputProps={{\n              inputMode: 'decimal',\n            }}\n            onChange={handleChange}\n            onBlur={handleBlur}\n            value={\n              currentInputMode === 'price'\n                ? displayValue\n                  ? `$${displayValue}`\n                  : ''\n                : displayValue\n            }\n            name={amountKey}\n            disabled={disabled}\n            required\n          />\n          {bottomAdornment}\n        </FormControl>\n      </FormContainer>\n      {!disabled && <AmountInputEndAdornment formType={formType} />}\n    </InputCard>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"AmountInput.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInput.tsx"],"sourcesContent":["import type { Token } from '@lifi/sdk'\nimport type { CardProps } from '@mui/material'\nimport type { ChangeEvent, ReactNode } from 'react'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { FormKeyHelper, type FormTypeProps } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport {\n  formatInputAmount,\n  formatTokenPrice,\n  priceToTokenAmount,\n  usdDecimals,\n} from '../../utils/format.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { InputCard } from '../Card/InputCard.js'\nimport {\n  AmountInputCardHeader,\n  AmountInputCardTitle,\n  FormContainer,\n  FormControl,\n  Input,\n  maxInputFontSize,\n  minInputFontSize,\n} from './AmountInput.style.js'\nimport { AmountInputEndAdornment } from './AmountInputEndAdornment.js'\nimport { AmountInputStartAdornment } from './AmountInputStartAdornment.js'\nimport { PriceFormHelperText } from './PriceFormHelperText.js'\n\nexport const AmountInput: React.FC<FormTypeProps & CardProps> = ({\n  formType,\n  ...props\n}) => {\n  const { disabledUI } = useWidgetConfig()\n\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    FormKeyHelper.getTokenKey(formType)\n  )\n\n  const { token } = useToken(chainId, tokenAddress)\n\n  const disabled = disabledUI?.fromAmount\n  return (\n    <AmountInputBase\n      formType={formType}\n      token={token}\n      bottomAdornment={<PriceFormHelperText formType={formType} />}\n      disabled={disabled}\n      {...props}\n    />\n  )\n}\n\nconst AmountInputBase: React.FC<\n  FormTypeProps &\n    CardProps & {\n      token?: Token\n      startAdornment?: ReactNode\n      bottomAdornment?: ReactNode\n      disabled?: boolean\n    }\n> = ({\n  formType,\n  token,\n  startAdornment,\n  bottomAdornment,\n  disabled,\n  ...props\n}) => {\n  const { t } = useTranslation()\n  const { mode, modeOptions } = useWidgetConfig()\n  const ref = useRef<HTMLInputElement>(null)\n\n  const isEditingRef = useRef(false)\n  const [formattedPriceInput, setFormattedPriceInput] = useState('')\n\n  const amountKey = FormKeyHelper.getAmountKey(formType)\n  const [value] = useFieldValues(amountKey)\n  const { setFieldValue } = useFieldActions()\n  const { inputMode } = useInputModeStore()\n\n  const currentInputMode = inputMode[formType]\n  let displayValue: string\n  if (isEditingRef.current) {\n    if (currentInputMode === 'price') {\n      displayValue = formattedPriceInput\n    } else {\n      displayValue = value as string\n    }\n  } else {\n    if (currentInputMode === 'price') {\n      const priceValue = formatTokenPrice(value as string, token?.priceUSD)\n      displayValue = formatInputAmount(\n        priceValue.toFixed(usdDecimals),\n        usdDecimals\n      )\n    } else {\n      displayValue = value as string\n    }\n  }\n\n  const handleChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    const { value: inputValue } = event.target\n    isEditingRef.current = true\n\n    let formattedValue: string\n    if (currentInputMode === 'price') {\n      const cleanInputValue = inputValue.replace('$', '')\n      formattedValue = formatInputAmount(cleanInputValue, usdDecimals, true)\n      const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n      setFormattedPriceInput(formattedValue)\n      setFieldValue(amountKey, tokenValue, { isDirty: true, isTouched: true })\n    } else {\n      formattedValue = formatInputAmount(inputValue, token?.decimals, true)\n      setFieldValue(amountKey, formattedValue, {\n        isDirty: true,\n        isTouched: true,\n      })\n    }\n  }\n\n  const handleBlur = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    const { value: inputValue } = event.target\n    isEditingRef.current = false\n\n    let formattedValue: string\n    if (currentInputMode === 'price') {\n      const cleanInputValue = inputValue.replace('$', '')\n      formattedValue = formatInputAmount(cleanInputValue, usdDecimals)\n      const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n      const formattedAmount = formatInputAmount(tokenValue, token?.decimals)\n      setFieldValue(amountKey, formattedAmount, {\n        isDirty: true,\n        isTouched: true,\n      })\n    } else {\n      formattedValue = formatInputAmount(inputValue, token?.decimals)\n      setFieldValue(amountKey, formattedValue, {\n        isDirty: true,\n        isTouched: true,\n      })\n    }\n  }\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: we need run effect on value change\n  useLayoutEffect(() => {\n    if (ref.current) {\n      fitInputText(maxInputFontSize, minInputFontSize, ref.current)\n    }\n  }, [displayValue])\n\n  const title =\n    mode === 'custom'\n      ? modeOptions?.custom?.type === 'deposit'\n        ? t('header.amount')\n        : t('header.youPay')\n      : t('header.send')\n\n  return (\n    <InputCard {...props}>\n      <AmountInputCardHeader>\n        <AmountInputCardTitle>{title}</AmountInputCardTitle>\n      </AmountInputCardHeader>\n      <FormContainer>\n        <AmountInputStartAdornment formType={formType} />\n        <FormControl fullWidth>\n          <Input\n            inputRef={ref}\n            size=\"small\"\n            autoComplete=\"off\"\n            placeholder={currentInputMode === 'price' ? '$0' : '0'}\n            startAdornment={startAdornment}\n            inputProps={{\n              inputMode: 'decimal',\n            }}\n            onChange={handleChange}\n            onBlur={handleBlur}\n            value={\n              currentInputMode === 'price'\n                ? displayValue\n                  ? `$${displayValue}`\n                  : ''\n                : displayValue\n            }\n            name={amountKey}\n            disabled={disabled}\n            required\n          />\n          {bottomAdornment}\n        </FormControl>\n      </FormContainer>\n      {!disabled && <AmountInputEndAdornment formType={formType} />}\n    </InputCard>\n  )\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.style.js","names":["FormControl","MuiFormControl"],"sources":["../../../../src/components/AmountInput/AmountInput.style.tsx"],"sourcesContent":["import {\n  Box,\n  InputBase,\n  inputBaseClasses,\n  FormControl as MuiFormControl,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { CardTitle } from '../Card/CardTitle.js'\n\nexport const maxInputFontSize = 24\nexport const minInputFontSize = 14\n\nexport const FormContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(2),\n}))\n\nexport const FormControl: React.FC<\n  React.ComponentProps<typeof MuiFormControl>\n> = styled(MuiFormControl)(() => ({\n  height: 40,\n}))\n\nexport const Input: React.FC<React.ComponentProps<typeof InputBase>> = styled(\n  InputBase\n)(({ theme }) => ({\n  fontSize: 24,\n  fontWeight: 700,\n  boxShadow: 'none',\n  lineHeight: 1.5,\n  [`.${inputBaseClasses.input}`]: {\n    height: 24,\n    padding: theme.spacing(0, 0, 0, 2),\n  },\n  '& input[type=\"number\"]::-webkit-outer-spin-button, & input[type=\"number\"]::-webkit-inner-spin-button':\n    {\n      WebkitAppearance: 'none',\n      margin: 0,\n    },\n  '& input[type=\"number\"]': {\n    MozAppearance: 'textfield',\n  },\n  [`&.${inputBaseClasses.disabled}`]: {\n    color: 'inherit',\n  },\n  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {\n    WebkitTextFillColor: 'unset',\n  },\n}))\n\nexport const AmountInputCardTitle: React.FC<\n  React.ComponentProps<typeof CardTitle>\n> = styled(CardTitle)(({ theme }) => ({\n  padding: theme.spacing(0),\n}))\n\nexport const AmountInputCardHeader: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    padding: theme.spacing(2, 2, 0, 2),\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    height: 30,\n  }))\n"],"mappings":";;;AAaA,MAAa,gBAA4D,OACvE,GACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,SAAS,MAAM,QAAQ,CAAC;AAC1B,EAAE;AAEF,MAAaA,gBAET,OAAOC,WAAc,SAAS,EAChC,QAAQ,GACV,EAAE;AAEF,MAAa,QAA0D,OACrE,SACF,GAAG,EAAE,aAAa;CAChB,UAAU;CACV,YAAY;CACZ,WAAW;CACX,YAAY;EACX,IAAI,iBAAiB,UAAU;EAC9B,QAAQ;EACR,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;CACnC;CACA,4GACE;EACE,kBAAkB;EAClB,QAAQ;CACV;CACF,4BAA0B,EACxB,eAAe,YACjB;EACC,KAAK,iBAAiB,aAAa,EAClC,OAAO,UACT;EACC,IAAI,iBAAiB,MAAM,GAAG,iBAAiB,aAAa,EAC3D,qBAAqB,QACvB;AACF,EAAE;AAEF,MAAa,uBAET,OAAO,SAAS,GAAG,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,CAAC,EAC1B,EAAE;AAEF,MAAa,wBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;CACjC,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;AACV,EAAE"}
+{"version":3,"file":"AmountInput.style.js","names":["FormControl","MuiFormControl"],"sources":["../../../../src/components/AmountInput/AmountInput.style.tsx"],"sourcesContent":["import {\n  Box,\n  InputBase,\n  inputBaseClasses,\n  FormControl as MuiFormControl,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { CardTitle } from '../Card/CardTitle.js'\n\nexport const maxInputFontSize = 24\nexport const minInputFontSize = 14\n\nexport const FormContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(2),\n}))\n\nexport const FormControl: React.FC<\n  React.ComponentProps<typeof MuiFormControl>\n> = styled(MuiFormControl)(() => ({\n  height: 40,\n}))\n\nexport const Input: React.FC<React.ComponentProps<typeof InputBase>> = styled(\n  InputBase\n)(({ theme }) => ({\n  fontSize: 24,\n  fontWeight: 700,\n  boxShadow: 'none',\n  lineHeight: 1.5,\n  [`.${inputBaseClasses.input}`]: {\n    height: 24,\n    padding: theme.spacing(0, 0, 0, 2),\n  },\n  '& input[type=\"number\"]::-webkit-outer-spin-button, & input[type=\"number\"]::-webkit-inner-spin-button':\n    {\n      WebkitAppearance: 'none',\n      margin: 0,\n    },\n  '& input[type=\"number\"]': {\n    MozAppearance: 'textfield',\n  },\n  [`&.${inputBaseClasses.disabled}`]: {\n    color: 'inherit',\n  },\n  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {\n    WebkitTextFillColor: 'unset',\n  },\n}))\n\nexport const AmountInputCardTitle: React.FC<\n  React.ComponentProps<typeof CardTitle>\n> = styled(CardTitle)(({ theme }) => ({\n  padding: theme.spacing(0),\n}))\n\nexport const AmountInputCardHeader: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    padding: theme.spacing(2, 2, 0, 2),\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    height: 30,\n  }))\n"],"mappings":";;;AAaA,MAAa,gBAA4D,OACvE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,SAAS,MAAM,QAAQ,CAAC;AAC1B,EAAE;AAEF,MAAaA,gBAET,OAAOC,WAAc,CAAC,QAAQ,EAChC,QAAQ,GACV,EAAE;AAEF,MAAa,QAA0D,OACrE,SACF,CAAC,EAAE,EAAE,aAAa;CAChB,UAAU;CACV,YAAY;CACZ,WAAW;CACX,YAAY;EACX,IAAI,iBAAiB,UAAU;EAC9B,QAAQ;EACR,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;CACnC;CACA,4GACE;EACE,kBAAkB;EAClB,QAAQ;CACV;CACF,4BAA0B,EACxB,eAAe,YACjB;EACC,KAAK,iBAAiB,aAAa,EAClC,OAAO,UACT;EACC,IAAI,iBAAiB,MAAM,GAAG,iBAAiB,aAAa,EAC3D,qBAAqB,QACvB;AACF,EAAE;AAEF,MAAa,uBAET,OAAO,SAAS,CAAC,EAAE,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,CAAC,EAC1B,EAAE;AAEF,MAAa,wBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;CACjC,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;AACV,EAAE"}

package/dist/esm/components/AmountInput/AmountInputEndAdornment.js

@@ -9,17 +9,19 @@ import { formatUnits } from "@lifi/sdk";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import { useAccount } from "@lifi/wallet-management";
 //#region src/components/AmountInput/AmountInputEndAdornment.tsx
 const AmountInputEndAdornment = memo(({ formType }) => {
 	const { t } = useTranslation();
 	const { getChainById } = useAvailableChains();
 	const { setFieldValue } = useFieldActions();
 	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+	const chain = getChainById(chainId);
+	const { account } = useAccount({ chainType: chain?.chainType });
 	const { data } = useGasRecommendation(chainId);
 	const { token } = useTokenAddressBalance(chainId, tokenAddress);
 	const getMaxAmount = () => {
 		if (!token?.amount) return 0n;
-		const chain = getChainById(chainId);
 		let maxAmount = token.amount;
 		if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
 			const recommendedAmount = BigInt(data.recommended.amount);
@@ -38,7 +40,7 @@ const AmountInputEndAdornment = memo(({ formType }) => {
 		const maxAmount = getMaxAmount();
 		if (maxAmount && token?.decimals) setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(maxAmount, token.decimals), { isTouched: true });
 	};
-	if (formType !== "from" || !token) return null;
+	if (formType !== "from" || !token || !account?.isConnected) return null;
 	return /* @__PURE__ */ jsxs(ButtonContainer, { children: [
 		/* @__PURE__ */ jsx(AmountInputButton, {
 			onClick: () => handlePercentage(25),

package/dist/esm/components/AmountInput/AmountInputEndAdornment.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInputEndAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useGasRecommendation } from '../../hooks/useGasRecommendation.js'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport {\n  AmountInputButton,\n  ButtonContainer,\n} from './AmountInputEndAdornment.style.js'\n\nexport const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps> =\n  memo(({ formType }: FormTypeProps): JSX.Element | null => {\n    const { t } = useTranslation()\n    const { getChainById } = useAvailableChains()\n    const { setFieldValue } = useFieldActions()\n\n    const [chainId, tokenAddress] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType)\n    )\n\n    // We get gas recommendations for the source chain to make sure that after pressing the Max button\n    // the user will have enough funds remaining to cover gas costs\n    const { data } = useGasRecommendation(chainId)\n\n    const { token } = useTokenAddressBalance(chainId, tokenAddress)\n\n    const getMaxAmount = () => {\n      if (!token?.amount) {\n        return 0n\n      }\n      const chain = getChainById(chainId)\n      let maxAmount = token.amount\n      if (chain?.nativeToken.address === tokenAddress && data?.recommended) {\n        const recommendedAmount = BigInt(data.recommended.amount)\n        if (token.amount > recommendedAmount) {\n          maxAmount = token.amount - recommendedAmount\n        }\n      }\n      return maxAmount\n    }\n\n    const handlePercentage = (percentage: number) => {\n      const maxAmount = getMaxAmount()\n      if (maxAmount && token?.decimals) {\n        const percentageAmount = (maxAmount * BigInt(percentage)) / 100n\n        setFieldValue(\n          FormKeyHelper.getAmountKey(formType),\n          formatUnits(percentageAmount, token.decimals),\n          {\n            isTouched: true,\n          }\n        )\n      }\n    }\n\n    const handleMax = () => {\n      const maxAmount = getMaxAmount()\n      if (maxAmount && token?.decimals) {\n        setFieldValue(\n          FormKeyHelper.getAmountKey(formType),\n          formatUnits(maxAmount, token.decimals),\n          {\n            isTouched: true,\n          }\n        )\n      }\n    }\n\n    if (formType !== 'from' || !token) {\n      return null\n    }\n\n    return (\n      <ButtonContainer>\n        <AmountInputButton onClick={() => handlePercentage(25)}>\n          25%\n        </AmountInputButton>\n        <AmountInputButton onClick={() => handlePercentage(50)}>\n          50%\n        </AmountInputButton>\n        <AmountInputButton onClick={() => handlePercentage(75)}>\n          75%\n        </AmountInputButton>\n        <AmountInputButton onClick={handleMax}>\n          {t('button.max')}\n        </AmountInputButton>\n      </ButtonContainer>\n    )\n  })\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAa,0BACX,MAAM,EAAE,eAAkD;CACxD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAIA,MAAM,EAAE,SAAS,qBAAqB,OAAO;CAE7C,MAAM,EAAE,UAAU,uBAAuB,SAAS,YAAY;CAE9D,MAAM,qBAAqB;EACzB,IAAI,CAAC,OAAO,QACV,OAAO;EAET,MAAM,QAAQ,aAAa,OAAO;EAClC,IAAI,YAAY,MAAM;EACtB,IAAI,OAAO,YAAY,YAAY,gBAAgB,MAAM,aAAa;GACpE,MAAM,oBAAoB,OAAO,KAAK,YAAY,MAAM;GACxD,IAAI,MAAM,SAAS,mBACjB,YAAY,MAAM,SAAS;EAE/B;EACA,OAAO;CACT;CAEA,MAAM,oBAAoB,eAAuB;EAC/C,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UAAU;GAChC,MAAM,mBAAoB,YAAY,OAAO,UAAU,IAAK;GAC5D,cACE,cAAc,aAAa,QAAQ,GACnC,YAAY,kBAAkB,MAAM,QAAQ,GAC5C,EACE,WAAW,KACb,CACF;EACF;CACF;CAEA,MAAM,kBAAkB;EACtB,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UACtB,cACE,cAAc,aAAa,QAAQ,GACnC,YAAY,WAAW,MAAM,QAAQ,GACrC,EACE,WAAW,KACb,CACF;CAEJ;CAEA,IAAI,aAAa,UAAU,CAAC,OAC1B,OAAO;CAGT,OACE,qBAAC,iBAAD,EAAA,UAAA;EACE,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;aAAG;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;aAAG;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;aAAG;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,SAAS;aACzB,EAAE,YAAY;EACE,CAAA;CACJ,EAAA,CAAA;AAErB,CAAC"}
+{"version":3,"file":"AmountInputEndAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useGasRecommendation } from '../../hooks/useGasRecommendation.js'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport {\n  AmountInputButton,\n  ButtonContainer,\n} from './AmountInputEndAdornment.style.js'\n\nexport const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps> =\n  memo(({ formType }: FormTypeProps): JSX.Element | null => {\n    const { t } = useTranslation()\n    const { getChainById } = useAvailableChains()\n    const { setFieldValue } = useFieldActions()\n\n    const [chainId, tokenAddress] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType)\n    )\n\n    const chain = getChainById(chainId)\n    const { account } = useAccount({ chainType: chain?.chainType })\n\n    // We get gas recommendations for the source chain to make sure that after pressing the Max button\n    // the user will have enough funds remaining to cover gas costs\n    const { data } = useGasRecommendation(chainId)\n\n    const { token } = useTokenAddressBalance(chainId, tokenAddress)\n\n    const getMaxAmount = () => {\n      if (!token?.amount) {\n        return 0n\n      }\n      let maxAmount = token.amount\n      if (chain?.nativeToken.address === tokenAddress && data?.recommended) {\n        const recommendedAmount = BigInt(data.recommended.amount)\n        if (token.amount > recommendedAmount) {\n          maxAmount = token.amount - recommendedAmount\n        }\n      }\n      return maxAmount\n    }\n\n    const handlePercentage = (percentage: number) => {\n      const maxAmount = getMaxAmount()\n      if (maxAmount && token?.decimals) {\n        const percentageAmount = (maxAmount * BigInt(percentage)) / 100n\n        setFieldValue(\n          FormKeyHelper.getAmountKey(formType),\n          formatUnits(percentageAmount, token.decimals),\n          {\n            isTouched: true,\n          }\n        )\n      }\n    }\n\n    const handleMax = () => {\n      const maxAmount = getMaxAmount()\n      if (maxAmount && token?.decimals) {\n        setFieldValue(\n          FormKeyHelper.getAmountKey(formType),\n          formatUnits(maxAmount, token.decimals),\n          {\n            isTouched: true,\n          }\n        )\n      }\n    }\n\n    if (formType !== 'from' || !token || !account?.isConnected) {\n      return null\n    }\n\n    return (\n      <ButtonContainer>\n        <AmountInputButton onClick={() => handlePercentage(25)}>\n          25%\n        </AmountInputButton>\n        <AmountInputButton onClick={() => handlePercentage(50)}>\n          50%\n        </AmountInputButton>\n        <AmountInputButton onClick={() => handlePercentage(75)}>\n          75%\n        </AmountInputButton>\n        <AmountInputButton onClick={handleMax}>\n          {t('button.max')}\n        </AmountInputButton>\n      </ButtonContainer>\n    )\n  })\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,0BACX,MAAM,EAAE,eAAkD;CACxD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,QAAQ,aAAa,OAAO;CAClC,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,OAAO,UAAU,CAAC;CAI9D,MAAM,EAAE,SAAS,qBAAqB,OAAO;CAE7C,MAAM,EAAE,UAAU,uBAAuB,SAAS,YAAY;CAE9D,MAAM,qBAAqB;EACzB,IAAI,CAAC,OAAO,QACV,OAAO;EAET,IAAI,YAAY,MAAM;EACtB,IAAI,OAAO,YAAY,YAAY,gBAAgB,MAAM,aAAa;GACpE,MAAM,oBAAoB,OAAO,KAAK,YAAY,MAAM;GACxD,IAAI,MAAM,SAAS,mBACjB,YAAY,MAAM,SAAS;EAE/B;EACA,OAAO;CACT;CAEA,MAAM,oBAAoB,eAAuB;EAC/C,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UAAU;GAChC,MAAM,mBAAoB,YAAY,OAAO,UAAU,IAAK;GAC5D,cACE,cAAc,aAAa,QAAQ,GACnC,YAAY,kBAAkB,MAAM,QAAQ,GAC5C,EACE,WAAW,KACb,CACF;EACF;CACF;CAEA,MAAM,kBAAkB;EACtB,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UACtB,cACE,cAAc,aAAa,QAAQ,GACnC,YAAY,WAAW,MAAM,QAAQ,GACrC,EACE,WAAW,KACb,CACF;CAEJ;CAEA,IAAI,aAAa,UAAU,CAAC,SAAS,CAAC,SAAS,aAC7C,OAAO;CAGT,OACE,qBAAC,iBAAD,EAAA,UAAA;EACE,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;aAAG;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;aAAG;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,EAAE;aAAG;EAErC,CAAA;EACnB,oBAAC,mBAAD;GAAmB,SAAS;aACzB,EAAE,YAAY;EACE,CAAA;CACJ,EAAA,CAAA;AAErB,CAAC"}

package/dist/esm/components/AmountInput/AmountInputEndAdornment.style.js

@@ -13,7 +13,7 @@ const AmountInputButton = styled(ButtonTertiary)(({ theme }) => ({
 	fontWeight: 700,
 	lineHeight: 1.3334,
 	height: "auto",
-	borderRadius: theme.shape.borderRadiusSecondary
+	borderRadius: theme.vars.shape.borderRadiusSecondary
 }));
 //#endregion
 export { AmountInputButton, ButtonContainer };

package/dist/esm/components/AmountInput/AmountInputEndAdornment.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInputEndAdornment.style.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.style.ts"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\n\nexport const ButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    gap: theme.spacing(1),\n    padding: theme.spacing(0, 2, 2, 2),\n  }))\n\nexport const AmountInputButton: React.FC<\n  React.ComponentProps<typeof ButtonTertiary>\n> = styled(ButtonTertiary)(({ theme }) => ({\n  flex: 1,\n  padding: theme.spacing(0.5, 1.5),\n  fontSize: 12,\n  fontWeight: 700,\n  lineHeight: 1.3334,\n  height: 'auto',\n  borderRadius: theme.shape.borderRadiusSecondary,\n}))\n"],"mappings":";;;AAIA,MAAa,kBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,KAAK,MAAM,QAAQ,CAAC;CACpB,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;AACnC,EAAE;AAEJ,MAAa,oBAET,OAAO,cAAc,GAAG,EAAE,aAAa;CACzC,MAAM;CACN,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,cAAc,MAAM,MAAM;AAC5B,EAAE"}
+{"version":3,"file":"AmountInputEndAdornment.style.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.style.ts"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\n\nexport const ButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    gap: theme.spacing(1),\n    padding: theme.spacing(0, 2, 2, 2),\n  }))\n\nexport const AmountInputButton: React.FC<\n  React.ComponentProps<typeof ButtonTertiary>\n> = styled(ButtonTertiary)(({ theme }) => ({\n  flex: 1,\n  padding: theme.spacing(0.5, 1.5),\n  fontSize: 12,\n  fontWeight: 700,\n  lineHeight: 1.3334,\n  height: 'auto',\n  borderRadius: theme.vars.shape.borderRadiusSecondary,\n}))\n"],"mappings":";;;AAIA,MAAa,kBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,KAAK,MAAM,QAAQ,CAAC;CACpB,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;AACnC,EAAE;AAEJ,MAAa,oBAET,OAAO,cAAc,CAAC,EAAE,EAAE,aAAa;CACzC,MAAM;CACN,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,cAAc,MAAM,KAAK,MAAM;AACjC,EAAE"}

package/dist/esm/components/AmountInput/PriceFormHelperText.js

@@ -27,8 +27,10 @@ const PriceFormHelperTextBase = ({ formType, isLoading, tokenAddress, token }) =
 	const currentInputMode = inputMode[formType];
 	const tokenAmount = token ? formatTokenAmount(token.amount, token.decimals) : "0";
 	const getPriceAmountDisplayValue = () => {
-		if (currentInputMode === "amount") return t("format.currency", { value: formatTokenPrice(amount, token?.priceUSD, token?.decimals) });
-		else return t("format.tokenAmount", { value: amount || "0" });
+		if (currentInputMode === "amount") {
+			const tokenPrice = formatTokenPrice(amount, token?.priceUSD, token?.decimals);
+			return t("format.currency", { value: tokenPrice });
+		} else return t("format.tokenAmount", { value: amount || "0" });
 	};
 	const handleToggleMode = (e) => {
 		e.stopPropagation();

package/dist/esm/components/AmountInput/PriceFormHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"PriceFormHelperText.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { FormHelperText, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { InputPriceButton } from './PriceFormHelperText.style.js'\n\nexport const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =\n  memo<FormTypeProps>(({ formType }) => {\n    const [chainId, tokenAddress] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType)\n    )\n    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n    return (\n      <PriceFormHelperTextBase\n        formType={formType}\n        isLoading={isLoading}\n        tokenAddress={tokenAddress}\n        token={token}\n      />\n    )\n  })\n\nconst PriceFormHelperTextBase: React.FC<\n  FormTypeProps & {\n    isLoading?: boolean\n    tokenAddress?: string\n    token?: TokenAmount\n  }\n> = ({ formType, isLoading, tokenAddress, token }) => {\n  const { t } = useTranslation()\n  const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))\n  const { inputMode, toggleInputMode } = useInputModeStore()\n\n  const currentInputMode = inputMode[formType]\n\n  const tokenAmount = token\n    ? formatTokenAmount(token.amount, token.decimals)\n    : '0'\n\n  const getPriceAmountDisplayValue = () => {\n    if (currentInputMode === 'amount') {\n      const tokenPrice = formatTokenPrice(\n        amount,\n        token?.priceUSD,\n        token?.decimals\n      )\n      return t('format.currency', { value: tokenPrice })\n    } else {\n      return t('format.tokenAmount', { value: amount || '0' })\n    }\n  }\n\n  const handleToggleMode = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    toggleInputMode(formType)\n  }\n\n  return (\n    <FormHelperText\n      component=\"div\"\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        margin: 0,\n        marginLeft: 1.25,\n        marginTop: 0.5,\n      }}\n    >\n      <InputPriceButton\n        onClick={token?.priceUSD ? handleToggleMode : undefined}\n      >\n        <Typography\n          sx={{\n            color: 'text.secondary',\n            fontWeight: 500,\n            fontSize: 12,\n            lineHeight: 1,\n            marginRight: 0.25,\n            maxWidth: 136,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {getPriceAmountDisplayValue()}\n        </Typography>\n        {currentInputMode === 'price' && token?.symbol ? (\n          <Typography\n            sx={{\n              color: 'text.secondary',\n              fontWeight: 500,\n              fontSize: 12,\n              lineHeight: 1,\n              wordBreak: 'break-word',\n              overflowWrap: 'break-word',\n              marginRight: 0.25,\n            }}\n          >\n            {token.symbol}\n          </Typography>\n        ) : null}\n        {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}\n      </InputPriceButton>\n      {isLoading && tokenAddress ? (\n        <Skeleton variant=\"text\" width={56} height={16} />\n      ) : token?.amount ? (\n        <Typography\n          sx={{\n            fontWeight: 500,\n            fontSize: 12,\n            color: 'text.secondary',\n            lineHeight: 1,\n            paddingLeft: 0.25,\n          }}\n          title={tokenAmount}\n        >\n          {`/ ${t('format.tokenAmount', {\n            value: tokenAmount,\n          })}`}\n        </Typography>\n      ) : null}\n    </FormHelperText>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,sBACX,MAAqB,EAAE,eAAe;CACpC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CACA,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,YAAY;CAEzE,OACE,oBAAC,yBAAD;EACY;EACC;EACG;EACP;CACR,CAAA;AAEL,CAAC;AAEH,MAAM,2BAMD,EAAE,UAAU,WAAW,cAAc,YAAY;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,UAAU,eAAe,cAAc,aAAa,QAAQ,CAAC;CACpE,MAAM,EAAE,WAAW,oBAAoB,kBAAkB;CAEzD,MAAM,mBAAmB,UAAU;CAEnC,MAAM,cAAc,QAChB,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,IAC9C;CAEJ,MAAM,mCAAmC;EACvC,IAAI,qBAAqB,UAMvB,OAAO,EAAE,mBAAmB,EAAE,OALX,iBACjB,QACA,OAAO,UACP,OAAO,QAEqC,EAAE,CAAC;OAEjD,OAAO,EAAE,sBAAsB,EAAE,OAAO,UAAU,IAAI,CAAC;CAE3D;CAEA,MAAM,oBAAoB,MAAwB;EAChD,EAAE,gBAAgB;EAClB,gBAAgB,QAAQ;CAC1B;CAEA,OACE,qBAAC,gBAAD;EACE,WAAU;EACV,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;EACb;YATF,CAWE,qBAAC,kBAAD;GACE,SAAS,OAAO,WAAW,mBAAmB,KAAA;aADhD;IAGE,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,aAAa;MACb,UAAU;MACV,UAAU;MACV,cAAc;MACd,YAAY;KACd;eAEC,2BAA2B;IAClB,CAAA;IACX,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACd,aAAa;KACf;eAEC,MAAM;IACG,CAAA,IACV;IACH,OAAO,YAAY,oBAAC,cAAD,EAAc,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACzC;MACjB,aAAa,eACZ,oBAAC,UAAD;GAAU,SAAQ;GAAO,OAAO;GAAI,QAAQ;EAAK,CAAA,IAC/C,OAAO,SACT,oBAAC,YAAD;GACE,IAAI;IACF,YAAY;IACZ,UAAU;IACV,OAAO;IACP,YAAY;IACZ,aAAa;GACf;GACA,OAAO;aAEN,KAAK,EAAE,sBAAsB,EAC5B,OAAO,YACT,CAAC;EACS,CAAA,IACV,IACU;;AAEpB"}
+{"version":3,"file":"PriceFormHelperText.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { FormHelperText, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { InputPriceButton } from './PriceFormHelperText.style.js'\n\nexport const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =\n  memo<FormTypeProps>(({ formType }) => {\n    const [chainId, tokenAddress] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType)\n    )\n    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n    return (\n      <PriceFormHelperTextBase\n        formType={formType}\n        isLoading={isLoading}\n        tokenAddress={tokenAddress}\n        token={token}\n      />\n    )\n  })\n\nconst PriceFormHelperTextBase: React.FC<\n  FormTypeProps & {\n    isLoading?: boolean\n    tokenAddress?: string\n    token?: TokenAmount\n  }\n> = ({ formType, isLoading, tokenAddress, token }) => {\n  const { t } = useTranslation()\n  const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))\n  const { inputMode, toggleInputMode } = useInputModeStore()\n\n  const currentInputMode = inputMode[formType]\n\n  const tokenAmount = token\n    ? formatTokenAmount(token.amount, token.decimals)\n    : '0'\n\n  const getPriceAmountDisplayValue = () => {\n    if (currentInputMode === 'amount') {\n      const tokenPrice = formatTokenPrice(\n        amount,\n        token?.priceUSD,\n        token?.decimals\n      )\n      return t('format.currency', { value: tokenPrice })\n    } else {\n      return t('format.tokenAmount', { value: amount || '0' })\n    }\n  }\n\n  const handleToggleMode = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    toggleInputMode(formType)\n  }\n\n  return (\n    <FormHelperText\n      component=\"div\"\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        margin: 0,\n        marginLeft: 1.25,\n        marginTop: 0.5,\n      }}\n    >\n      <InputPriceButton\n        onClick={token?.priceUSD ? handleToggleMode : undefined}\n      >\n        <Typography\n          sx={{\n            color: 'text.secondary',\n            fontWeight: 500,\n            fontSize: 12,\n            lineHeight: 1,\n            marginRight: 0.25,\n            maxWidth: 136,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {getPriceAmountDisplayValue()}\n        </Typography>\n        {currentInputMode === 'price' && token?.symbol ? (\n          <Typography\n            sx={{\n              color: 'text.secondary',\n              fontWeight: 500,\n              fontSize: 12,\n              lineHeight: 1,\n              wordBreak: 'break-word',\n              overflowWrap: 'break-word',\n              marginRight: 0.25,\n            }}\n          >\n            {token.symbol}\n          </Typography>\n        ) : null}\n        {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}\n      </InputPriceButton>\n      {isLoading && tokenAddress ? (\n        <Skeleton variant=\"text\" width={56} height={16} />\n      ) : token?.amount ? (\n        <Typography\n          sx={{\n            fontWeight: 500,\n            fontSize: 12,\n            color: 'text.secondary',\n            lineHeight: 1,\n            paddingLeft: 0.25,\n          }}\n          title={tokenAmount}\n        >\n          {`/ ${t('format.tokenAmount', {\n            value: tokenAmount,\n          })}`}\n        </Typography>\n      ) : null}\n    </FormHelperText>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,sBACX,MAAqB,EAAE,eAAe;CACpC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CACA,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,YAAY;CAEzE,OACE,oBAAC,yBAAD;EACY;EACC;EACG;EACP;CACR,CAAA;AAEL,CAAC;AAEH,MAAM,2BAMD,EAAE,UAAU,WAAW,cAAc,YAAY;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,UAAU,eAAe,cAAc,aAAa,QAAQ,CAAC;CACpE,MAAM,EAAE,WAAW,oBAAoB,kBAAkB;CAEzD,MAAM,mBAAmB,UAAU;CAEnC,MAAM,cAAc,QAChB,kBAAkB,MAAM,QAAQ,MAAM,QAAQ,IAC9C;CAEJ,MAAM,mCAAmC;EACvC,IAAI,qBAAqB,UAAU;GACjC,MAAM,aAAa,iBACjB,QACA,OAAO,UACP,OAAO,QACT;GACA,OAAO,EAAE,mBAAmB,EAAE,OAAO,WAAW,CAAC;EACnD,OACE,OAAO,EAAE,sBAAsB,EAAE,OAAO,UAAU,IAAI,CAAC;CAE3D;CAEA,MAAM,oBAAoB,MAAwB;EAChD,EAAE,gBAAgB;EAClB,gBAAgB,QAAQ;CAC1B;CAEA,OACE,qBAAC,gBAAD;EACE,WAAU;EACV,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;EACb;YATF,CAWE,qBAAC,kBAAD;GACE,SAAS,OAAO,WAAW,mBAAmB,KAAA;aADhD;IAGE,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,aAAa;MACb,UAAU;MACV,UAAU;MACV,cAAc;MACd,YAAY;KACd;eAEC,2BAA2B;IAClB,CAAA;IACX,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACd,aAAa;KACf;eAEC,MAAM;IACG,CAAA,IACV;IACH,OAAO,YAAY,oBAAC,cAAD,EAAc,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACzC;MACjB,aAAa,eACZ,oBAAC,UAAD;GAAU,SAAQ;GAAO,OAAO;GAAI,QAAQ;EAAK,CAAA,IAC/C,OAAO,SACT,oBAAC,YAAD;GACE,IAAI;IACF,YAAY;IACZ,UAAU;IACV,OAAO;IACP,YAAY;IACZ,aAAa;GACf;GACA,OAAO;aAEN,KAAK,EAAE,sBAAsB,EAC5B,OAAO,YACT,CAAC;EACS,CAAA,IACV,IACU;;AAEpB"}

package/dist/esm/components/AmountInput/PriceFormHelperText.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PriceFormHelperText.style.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.style.tsx"],"sourcesContent":["import { Button, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =\n  styled(Button)(({ theme, onClick }) => ({\n    color: theme.vars.palette.text.secondary,\n    padding: theme.spacing(0.25, 0.5, 0.25, 0.75),\n    maxHeight: 16,\n    fontSize: '0.75rem',\n    fontWeight: 500,\n    borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n    backgroundColor: 'transparent',\n    minWidth: 32,\n    ...(onClick\n      ? {\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n          },\n          ...theme.applyStyles('dark', {\n            backgroundColor: 'transparent',\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n            },\n          }),\n        }\n      : {\n          cursor: 'text',\n          userSelect: 'text',\n          pointerEvents: 'none',\n          ...theme.applyStyles('dark', {\n            backgroundColor: 'transparent',\n          }),\n        }),\n  }))\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,MAAM,GAAG,EAAE,OAAO,eAAe;CACtC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,KAAM,IAAK,KAAM,GAAI;CAC5C,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,UAAU;CACV,GAAI,UACA;EACE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;EACA,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB;GACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;EACF,CAAC;CACH,IACA;EACE,QAAQ;EACR,YAAY;EACZ,eAAe;EACf,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,cACnB,CAAC;CACH;AACN,EAAE"}
+{"version":3,"file":"PriceFormHelperText.style.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.style.tsx"],"sourcesContent":["import { Button, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =\n  styled(Button)(({ theme, onClick }) => ({\n    color: theme.vars.palette.text.secondary,\n    padding: theme.spacing(0.25, 0.5, 0.25, 0.75),\n    maxHeight: 16,\n    fontSize: '0.75rem',\n    fontWeight: 500,\n    borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n    backgroundColor: 'transparent',\n    minWidth: 32,\n    ...(onClick\n      ? {\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n          },\n          ...theme.applyStyles('dark', {\n            backgroundColor: 'transparent',\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n            },\n          }),\n        }\n      : {\n          cursor: 'text',\n          userSelect: 'text',\n          pointerEvents: 'none',\n          ...theme.applyStyles('dark', {\n            backgroundColor: 'transparent',\n          }),\n        }),\n  }))\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,MAAM,CAAC,EAAE,EAAE,OAAO,eAAe;CACtC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,KAAM,IAAK,KAAM,GAAI;CAC5C,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,UAAU;CACV,GAAI,UACA;EACE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;EACA,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB;GACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;EACF,CAAC;CACH,IACA;EACE,QAAQ;EACR,YAAY;EACZ,eAAe;EACf,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,cACnB,CAAC;CACH;AACN,EAAE"}

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

@@ -0,0 +1,98 @@
+import { InputCard } from "../Card/InputCard.js";
+import { Box, ButtonBase, InputBase, Typography, inputBaseClasses, styled } from "@mui/material";
+const AmountCard = styled(InputCard, { shouldForwardProp: (prop) => !["formType", "mask"].includes(prop) })(({ theme, formType, mask = true }) => {
+	const cardVariant = theme.components?.MuiCard?.defaultProps?.variant;
+	const vertical = formType === "to" ? "-4px" : "calc(100% + 4px)";
+	return {
+		display: "flex",
+		flexDirection: "column",
+		gap: theme.spacing(1.5),
+		padding: theme.spacing(2),
+		...cardVariant !== "outlined" && mask && { mask: `radial-gradient(circle 22px at 50% ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat` }
+	};
+});
+const CardHeaderRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	padding: 0,
+	height: theme.spacing(2)
+}));
+const CardBodyRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(2)
+}));
+const CardFooterRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	height: theme.spacing(2)
+}));
+const LargeInput = styled(InputBase)(({ theme }) => ({
+	fontSize: 30,
+	fontWeight: 700,
+	lineHeight: 1.4,
+	height: 32,
+	flex: 1,
+	minWidth: 0,
+	boxShadow: "none",
+	[`.${inputBaseClasses.input}`]: {
+		height: 32,
+		padding: 0
+	},
+	[`.${inputBaseClasses.input}::placeholder`]: {
+		color: theme.vars.palette.text.primary,
+		opacity: .5
+	},
+	"& input[type=\"number\"]::-webkit-outer-spin-button, & input[type=\"number\"]::-webkit-inner-spin-button": {
+		WebkitAppearance: "none",
+		margin: 0
+	},
+	"& input[type=\"number\"]": { MozAppearance: "textfield" },
+	[`&.${inputBaseClasses.disabled}`]: { color: "inherit" },
+	[`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: { WebkitTextFillColor: "unset" }
+}));
+const AmountDisplay = styled(Typography)(() => ({
+	fontSize: 30,
+	fontWeight: 700,
+	lineHeight: 1.4,
+	height: 32,
+	display: "flex",
+	alignItems: "center",
+	flex: 1,
+	minWidth: 0,
+	overflow: "visible",
+	whiteSpace: "nowrap"
+}));
+const FooterText = styled(Typography)(({ theme }) => ({
+	fontSize: 12,
+	fontWeight: 500,
+	lineHeight: 1,
+	color: theme.vars.palette.text.secondary
+}));
+const CardContainer = styled(Box)(() => ({
+	display: "flex",
+	flexDirection: "column",
+	position: "relative"
+}));
+const ToggleButton = styled(ButtonBase, { shouldForwardProp: (prop) => prop !== "clickable" })(({ theme, clickable }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(.25),
+	borderRadius: theme.vars.shape.borderRadiusSecondary,
+	padding: theme.spacing(.25, .5, .25, .75),
+	marginLeft: theme.spacing(-.75),
+	backgroundColor: "transparent",
+	...clickable ? {
+		cursor: "pointer",
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
+	} : {
+		cursor: "default",
+		pointerEvents: "none"
+	}
+}));
+//#endregion
+export { AmountCard, AmountDisplay, CardBodyRow, CardContainer, CardFooterRow, CardHeaderRow, FooterText, LargeInput, ToggleButton };
+
+//# sourceMappingURL=AmountInputCard.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputCard.style.js","names":[],"sources":["../../../../src/components/AmountInputCard/AmountInputCard.style.tsx"],"sourcesContent":["import {\n  Box,\n  ButtonBase,\n  InputBase,\n  inputBaseClasses,\n  styled,\n  Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { InputCard } from '../Card/InputCard.js'\n\nexport const maxInputFontSize = 30\nexport const minInputFontSize = 20\nexport const amountHeight = 32\nexport const footerFontSize = 12\n\nexport const AmountCard: React.FC<\n  React.ComponentProps<typeof InputCard> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(InputCard, {\n  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),\n})<{ formType?: FormType; mask?: boolean }>(\n  ({ theme, formType, mask = true }) => {\n    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n    // Notch faces the swap button between the stacked cards: bottom edge for the\n    // top (send) card, top edge for the bottom (receive) card.\n    const vertical = formType === 'to' ? '-4px' : 'calc(100% + 4px)'\n    return {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: theme.spacing(1.5),\n      padding: theme.spacing(2),\n      ...(cardVariant !== 'outlined' &&\n        mask && {\n          mask: `radial-gradient(circle 22px at 50% ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`,\n        }),\n    }\n  }\n)\n\nexport const CardHeaderRow: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  padding: 0,\n  height: theme.spacing(2),\n}))\n\nexport const CardBodyRow: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(2),\n}))\n\nexport const CardFooterRow: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  height: theme.spacing(2),\n}))\n\nexport const LargeInput: React.FC<React.ComponentProps<typeof InputBase>> =\n  styled(InputBase)(({ theme }) => ({\n    fontSize: maxInputFontSize,\n    fontWeight: 700,\n    lineHeight: 1.4,\n    height: amountHeight,\n    flex: 1,\n    minWidth: 0,\n    boxShadow: 'none',\n    [`.${inputBaseClasses.input}`]: {\n      height: amountHeight,\n      padding: 0,\n    },\n    [`.${inputBaseClasses.input}::placeholder`]: {\n      color: theme.vars.palette.text.primary,\n      opacity: 0.5,\n    },\n    '& input[type=\"number\"]::-webkit-outer-spin-button, & input[type=\"number\"]::-webkit-inner-spin-button':\n      {\n        WebkitAppearance: 'none',\n        margin: 0,\n      },\n    '& input[type=\"number\"]': {\n      MozAppearance: 'textfield',\n    },\n    [`&.${inputBaseClasses.disabled}`]: {\n      color: 'inherit',\n    },\n    [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {\n      WebkitTextFillColor: 'unset',\n    },\n  }))\n\nexport const AmountDisplay: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(() => ({\n    fontSize: maxInputFontSize,\n    fontWeight: 700,\n    lineHeight: 1.4,\n    height: amountHeight,\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n    minWidth: 0,\n    overflow: 'visible',\n    whiteSpace: 'nowrap',\n  }))\n\nexport const FooterText: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    fontSize: footerFontSize,\n    fontWeight: 500,\n    lineHeight: 1,\n    color: theme.vars.palette.text.secondary,\n  }))\n\nexport const CardContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(() => ({\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative',\n}))\n\nexport const ToggleButton: React.FC<\n  React.ComponentProps<typeof ButtonBase> & { clickable?: boolean }\n> = styled(ButtonBase, {\n  shouldForwardProp: (prop) => prop !== 'clickable',\n})<{ clickable?: boolean }>(({ theme, clickable }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.25),\n  borderRadius: theme.vars.shape.borderRadiusSecondary,\n  padding: theme.spacing(0.25, 0.5, 0.25, 0.75),\n  marginLeft: theme.spacing(-0.75),\n  backgroundColor: 'transparent',\n  ...(clickable\n    ? {\n        cursor: 'pointer',\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n        },\n      }\n    : {\n        cursor: 'default',\n        pointerEvents: 'none',\n      }),\n}))\n"],"mappings":";;AAiBA,MAAa,aAKT,OAAO,WAAW,EACpB,oBAAoB,SAAS,CAAC,CAAC,YAAY,MAAM,CAAC,CAAC,SAAS,IAAc,EAC5E,CAAC,CAAC,EACC,EAAE,OAAO,UAAU,OAAO,WAAW;CACpC,MAAM,cAAc,MAAM,YAAY,SAAS,cAAc;CAG7D,MAAM,WAAW,aAAa,OAAO,SAAS;CAC9C,OAAO;EACL,SAAS;EACT,eAAe;EACf,KAAK,MAAM,QAAQ,GAAG;EACtB,SAAS,MAAM,QAAQ,CAAC;EACxB,GAAI,gBAAgB,cAClB,QAAQ,EACN,MAAM,sCAAsC,SAAS,oDACvD;CACJ;AACF,CACF;AAEA,MAAa,gBAA4D,OACvE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,SAAS;CACT,QAAQ,MAAM,QAAQ,CAAC;AACzB,EAAE;AAEF,MAAa,cAA0D,OACrE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,gBAA4D,OACvE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ,MAAM,QAAQ,CAAC;AACzB,EAAE;AAEF,MAAa,aACX,OAAO,SAAS,CAAC,EAAE,EAAE,aAAa;CAChC,UAAA;CACA,YAAY;CACZ,YAAY;CACZ,QAAA;CACA,MAAM;CACN,UAAU;CACV,WAAW;EACV,IAAI,iBAAiB,UAAU;EAC9B,QAAA;EACA,SAAS;CACX;EACC,IAAI,iBAAiB,MAAM,iBAAiB;EAC3C,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,SAAS;CACX;CACA,4GACE;EACE,kBAAkB;EAClB,QAAQ;CACV;CACF,4BAA0B,EACxB,eAAe,YACjB;EACC,KAAK,iBAAiB,aAAa,EAClC,OAAO,UACT;EACC,IAAI,iBAAiB,MAAM,GAAG,iBAAiB,aAAa,EAC3D,qBAAqB,QACvB;AACF,EAAE;AAEJ,MAAa,gBACX,OAAO,UAAU,CAAC,QAAQ;CACxB,UAAA;CACA,YAAY;CACZ,YAAY;CACZ,QAAA;CACA,SAAS;CACT,YAAY;CACZ,MAAM;CACN,UAAU;CACV,UAAU;CACV,YAAY;AACd,EAAE;AAEJ,MAAa,aACX,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,UAAA;CACA,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEJ,MAAa,gBAA4D,OACvE,GACF,CAAC,QAAQ;CACP,SAAS;CACT,eAAe;CACf,UAAU;AACZ,EAAE;AAEF,MAAa,eAET,OAAO,YAAY,EACrB,oBAAoB,SAAS,SAAS,YACxC,CAAC,CAAC,EAA2B,EAAE,OAAO,iBAAiB;CACrD,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,GAAI;CACvB,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS,MAAM,QAAQ,KAAM,IAAK,KAAM,GAAI;CAC5C,YAAY,MAAM,QAAQ,IAAK;CAC/B,iBAAiB;CACjB,GAAI,YACA;EACE,QAAQ;EACR,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACF,IACA;EACE,QAAQ;EACR,eAAe;CACjB;AACN,EAAE"}