@lifi/widget 4.0.0-beta.13 → 4.0.0-beta.17

package/dist/esm/AppDefault.js

@@ -16,6 +16,7 @@ import { SendToWalletPage } from "./pages/SendToWallet/SendToWalletPage.js";
 import { SettingsPage } from "./pages/SettingsPage/SettingsPage.js";
 import { TransactionDetailsPage } from "./pages/TransactionDetailsPage/TransactionDetailsPage.js";
 import { TransactionPage } from "./pages/TransactionPage/TransactionPage.js";
+import { useState } from "react";
 import { RouterProvider, createMemoryHistory, createRootRoute, createRoute, createRouter } from "@tanstack/react-router";
 import { jsx } from "react/jsx-runtime";
 //#region src/AppDefault.tsx
@@ -173,37 +174,38 @@ const transactionExecutionDetailsRoute = createRoute({
 	path: navigationRoutes.transactionDetails,
 	component: TransactionDetailsPage
 });
-const router = createRouter({
-	routeTree: rootRoute.addChildren([
-		indexRoute,
-		settingsLayoutRoute.addChildren([
-			settingsIndexRoute,
-			settingsLanguagesRoute,
-			settingsBridgesRoute,
-			settingsExchangesRoute
-		]),
-		fromTokenLayoutRoute.addChildren([fromTokenIndexRoute, fromTokenFromChainRoute]),
-		toTokenLayoutRoute.addChildren([toTokenIndexRoute, toTokenToChainRoute]),
-		toTokenNativeRoute,
-		routesLayoutRoute.addChildren([routesIndexRoute, routesTransactionExecutionRoute.addChildren([routesTransactionExecutionIndexRoute, routesTransactionExecutionDetailsRoute])]),
-		transactionExecutionLayoutRoute.addChildren([transactionExecutionIndexRoute, transactionExecutionDetailsRoute]),
-		activitiesLayoutRoute.addChildren([
-			activitiesIndexRoute,
-			activitiesDetailsRoute,
-			activitiesTransactionExecutionRoute
-		]),
-		sendToWalletLayoutRoute.addChildren([
-			sendToWalletIndexRoute,
-			sendToWalletBookmarksRoute,
-			sendToWalletRecentWalletsRoute,
-			sendToWalletConnectedWalletsRoute
-		]),
-		configuredWalletsRoute
+const routeTree = rootRoute.addChildren([
+	indexRoute,
+	settingsLayoutRoute.addChildren([
+		settingsIndexRoute,
+		settingsLanguagesRoute,
+		settingsBridgesRoute,
+		settingsExchangesRoute
 	]),
-	history: createMemoryHistory({ initialEntries: ["/"] }),
-	defaultPreload: "intent"
-});
+	fromTokenLayoutRoute.addChildren([fromTokenIndexRoute, fromTokenFromChainRoute]),
+	toTokenLayoutRoute.addChildren([toTokenIndexRoute, toTokenToChainRoute]),
+	toTokenNativeRoute,
+	routesLayoutRoute.addChildren([routesIndexRoute, routesTransactionExecutionRoute.addChildren([routesTransactionExecutionIndexRoute, routesTransactionExecutionDetailsRoute])]),
+	transactionExecutionLayoutRoute.addChildren([transactionExecutionIndexRoute, transactionExecutionDetailsRoute]),
+	activitiesLayoutRoute.addChildren([
+		activitiesIndexRoute,
+		activitiesDetailsRoute,
+		activitiesTransactionExecutionRoute
+	]),
+	sendToWalletLayoutRoute.addChildren([
+		sendToWalletIndexRoute,
+		sendToWalletBookmarksRoute,
+		sendToWalletRecentWalletsRoute,
+		sendToWalletConnectedWalletsRoute
+	]),
+	configuredWalletsRoute
+]);
 const AppDefault = () => {
+	const [router] = useState(() => createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: ["/"] }),
+		defaultPreload: "intent"
+	}));
 	return /* @__PURE__ */ jsx(RouterProvider, { router });
 };
 //#endregion

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 { 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\nconst history = createMemoryHistory({\n  initialEntries: ['/'],\n})\n\nconst router: ReturnType<typeof createRouter> = createRouter({\n  routeTree,\n  history,\n  defaultPreload: 'intent',\n})\n\ndeclare module '@tanstack/react-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nexport const AppDefault = (): JSX.Element => {\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 { 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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"}

package/dist/esm/AppLayout.js

@@ -1,6 +1,6 @@
 "use client";
 import { useWidgetConfig } from "./providers/WidgetProvider/WidgetProvider.js";
-import { ElementId, createElementId } from "./utils/elements.js";
+import { createElementId } from "./utils/elements.js";
 import { AppContainer, AppExpandedContainer } from "./components/AppContainer.js";
 import { version } from "./config/version.js";
 import { Expansion } from "./components/Expansion/Expansion.js";
@@ -16,7 +16,7 @@ const AppLayout = () => {
 	const { elementId, buildUrl } = useWidgetConfig();
 	const wideVariant = useWideVariant();
 	return /* @__PURE__ */ jsxs(AppExpandedContainer, {
-		id: createElementId(ElementId.AppExpandedContainer, elementId),
+		id: createElementId("widget-app-expanded-container", elementId),
 		"data-version": version,
 		children: [/* @__PURE__ */ jsxs(AppContainer, { children: [
 			/* @__PURE__ */ jsx(Header, {}),

package/dist/esm/AppLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayout.js","names":[],"sources":["../../src/AppLayout.tsx"],"sourcesContent":["'use client'\nimport { Outlet } from '@tanstack/react-router'\nimport {\n  AppContainer,\n  AppExpandedContainer,\n} from './components/AppContainer.js'\nimport { Expansion } from './components/Expansion/Expansion.js'\nimport { Header } from './components/Header/Header.js'\nimport { Initializer } from './components/Initializer.js'\nimport { PageEntered } from './components/PageEntered.js'\nimport { version } from './config/version.js'\nimport { useWideVariant } from './hooks/useWideVariant.js'\nimport { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'\nimport { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'\nimport { createElementId, ElementId } from './utils/elements.js'\n\nexport const AppLayout: React.FC = () => {\n  const { elementId, buildUrl } = useWidgetConfig()\n  const wideVariant = useWideVariant()\n\n  return (\n    <AppExpandedContainer\n      id={createElementId(ElementId.AppExpandedContainer, elementId)}\n      data-version={version}\n    >\n      <AppContainer>\n        <Header />\n        <Initializer />\n        {buildUrl ? <URLSearchParamsBuilder /> : null}\n        <PageEntered />\n        <Outlet />\n      </AppContainer>\n      {wideVariant && <Expansion />}\n    </AppExpandedContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,kBAA4B;CACvC,MAAM,EAAE,WAAW,aAAa,iBAAiB;CACjD,MAAM,cAAc,gBAAgB;AAEpC,QACE,qBAAC,sBAAD;EACE,IAAI,gBAAgB,UAAU,sBAAsB,UAAU;EAC9D,gBAAc;YAFhB,CAIE,qBAAC,cAAD,EAAA,UAAA;GACE,oBAAC,QAAD,EAAU,CAAA;GACV,oBAAC,aAAD,EAAe,CAAA;GACd,WAAW,oBAAC,wBAAD,EAA0B,CAAA,GAAG;GACzC,oBAAC,aAAD,EAAe,CAAA;GACf,oBAAC,QAAD,EAAU,CAAA;GACG,EAAA,CAAA,EACd,eAAe,oBAAC,WAAD,EAAa,CAAA,CACR"}
+{"version":3,"file":"AppLayout.js","names":[],"sources":["../../src/AppLayout.tsx"],"sourcesContent":["'use client'\nimport { Outlet } from '@tanstack/react-router'\nimport {\n  AppContainer,\n  AppExpandedContainer,\n} from './components/AppContainer.js'\nimport { Expansion } from './components/Expansion/Expansion.js'\nimport { Header } from './components/Header/Header.js'\nimport { Initializer } from './components/Initializer.js'\nimport { PageEntered } from './components/PageEntered.js'\nimport { version } from './config/version.js'\nimport { useWideVariant } from './hooks/useWideVariant.js'\nimport { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'\nimport { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'\nimport { createElementId, ElementId } from './utils/elements.js'\n\nexport const AppLayout: React.FC = () => {\n  const { elementId, buildUrl } = useWidgetConfig()\n  const wideVariant = useWideVariant()\n\n  return (\n    <AppExpandedContainer\n      id={createElementId(ElementId.AppExpandedContainer, elementId)}\n      data-version={version}\n    >\n      <AppContainer>\n        <Header />\n        <Initializer />\n        {buildUrl ? <URLSearchParamsBuilder /> : null}\n        <PageEntered />\n        <Outlet />\n      </AppContainer>\n      {wideVariant && <Expansion />}\n    </AppExpandedContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,kBAA4B;CACvC,MAAM,EAAE,WAAW,aAAa,iBAAiB;CACjD,MAAM,cAAc,gBAAgB;AAEpC,QACE,qBAAC,sBAAD;EACE,IAAI,gBAAA,iCAAgD,UAAU;EAC9D,gBAAc;YAFhB,CAIE,qBAAC,cAAD,EAAA,UAAA;GACE,oBAAC,QAAD,EAAU,CAAA;GACV,oBAAC,aAAD,EAAe,CAAA;GACd,WAAW,oBAAC,wBAAD,EAA0B,CAAA,GAAG;GACzC,oBAAC,aAAD,EAAe,CAAA;GACf,oBAAC,QAAD,EAAU,CAAA;GACG,EAAA,CAAA,EACd,eAAe,oBAAC,WAAD,EAAa,CAAA,CACR"}

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

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { DisabledUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { FormKeyHelper } from "../../stores/form/types.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useFieldActions } from "../../stores/form/useFieldActions.js";
@@ -20,7 +20,7 @@ const AmountInput = ({ formType, ...props }) => {
 	const { disabledUI } = useWidgetConfig();
 	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
 	const { token } = useToken(chainId, tokenAddress);
-	const disabled = disabledUI?.includes(DisabledUI.FromAmount);
+	const disabled = disabledUI?.includes("fromAmount");
 	return /* @__PURE__ */ jsx(AmountInputBase, {
 		formType,
 		token,

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 { DisabledUI } from '../../types/widget.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?.includes(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 { subvariant, subvariantOptions } = 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    subvariant === 'custom'\n      ? subvariantOptions?.custom === '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 { DisabledUI } from '../../types/widget.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?.includes(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 { subvariant, subvariantOptions } = 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    subvariant === 'custom'\n      ? subvariantOptions?.custom === '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/PriceFormHelperText.style.js

@@ -10,10 +10,10 @@ const InputPriceButton = styled(Button)(({ theme, onClick }) => ({
 	backgroundColor: "transparent",
 	minWidth: 32,
 	...onClick ? {
-		"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` },
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
 		...theme.applyStyles("dark", {
 			backgroundColor: "transparent",
-			"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` }
+			"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
 		})
 	} : {
 		cursor: "text",

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: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n          },\n          ...theme.applyStyles('dark', {\n            backgroundColor: 'transparent',\n            '&:hover': {\n              backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\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,OAAO,EAAE,EAAE,OAAO,eAAe;CACtC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,KAAM,IAAK,KAAM,IAAK;CAC7C,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,UAAU;CACV,GAAI,UACA;EACE,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;EACD,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB;GACjB,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;GACF,CAAC;EACH,GACD;EACE,QAAQ;EACR,YAAY;EACZ,eAAe;EACf,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;EACH;CACN,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,OAAO,EAAE,EAAE,OAAO,eAAe;CACtC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,KAAM,IAAK,KAAM,IAAK;CAC7C,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,oBAC/E;EACD,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB;GACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;GACF,CAAC;EACH,GACD;EACE,QAAQ;EACR,YAAY;EACZ,eAAe;EACf,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;EACH;CACN,EAAE"}

package/dist/esm/components/AppContainer.js

@@ -1,7 +1,7 @@
 import "../config/constants.js";
 import { useWidgetConfig } from "../providers/WidgetProvider/WidgetProvider.js";
 import { useHeaderHeight } from "../stores/header/useHeaderStore.js";
-import { ElementId, createElementId } from "../utils/elements.js";
+import { createElementId } from "../utils/elements.js";
 import { getWidgetMaxHeight } from "../utils/widgetSize.js";
 import { Box, Container, ScopedCssBaseline, styled } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
@@ -75,9 +75,9 @@ const AppContainer = ({ children }) => {
 	const positionFixedAdjustment = theme?.header?.position === "fixed" ? headerHeight : 0;
 	return /* @__PURE__ */ jsx(RelativeContainer, {
 		variant,
-		id: createElementId(ElementId.RelativeContainer, elementId),
+		id: createElementId("widget-relative-container", elementId),
 		children: /* @__PURE__ */ jsx(CssBaselineContainer, {
-			id: createElementId(ElementId.ScrollableContainer, elementId),
+			id: createElementId("widget-scrollable-container", elementId),
 			variant,
 			enableColorScheme: true,
 			paddingTopAdjustment: positionFixedAdjustment,

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

@@ -1 +1 @@
-{"version":3,"file":"AppContainer.js","names":[],"sources":["../../../src/components/AppContainer.tsx"],"sourcesContent":["import type { BoxProps, ContainerProps } from '@mui/material'\nimport { Box, Container, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { defaultMaxHeight } from '../config/constants.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderHeight } from '../stores/header/useHeaderStore.js'\nimport type { WidgetVariant } from '../types/widget.js'\nimport { createElementId, ElementId } from '../utils/elements.js'\nimport { getWidgetMaxHeight } from '../utils/widgetSize.js'\n\n// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can\n//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height\n//  A Number of other components and hooks work with height values that are often set on or derived from these elements\n//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use\n//    - useTokenListHeight\n//    - useSetContentHeight\n//  Also check any code that is using the methods from elements.ts utils file\n\nexport const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(\n  ({ theme }) => {\n    return {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'start',\n      flex: 1,\n      height:\n        theme.container?.display === 'flex'\n          ? '100%'\n          : theme.container?.maxHeight\n            ? 'auto'\n            : theme.container?.height || 'auto',\n    }\n  }\n)\n\nexport const RelativeContainer: React.FC<\n  BoxProps & { variant?: WidgetVariant }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: WidgetVariant }>(({ theme }) => {\n  const maxHeight =\n    theme.container?.height === 'fit-content' ||\n    (!theme.container?.height && !theme.container?.maxHeight)\n      ? 'none'\n      : getWidgetMaxHeight(theme)\n  return {\n    position: 'relative',\n    boxSizing: 'content-box',\n    width: '100%',\n    minWidth: theme.breakpoints.values.xs,\n    maxWidth: theme.breakpoints.values.sm,\n    background: theme.vars.palette.background.default,\n    overflow: 'auto',\n    flex: 1,\n    ...theme.container,\n    maxHeight:\n      theme.container?.display === 'flex' && !theme.container?.height\n        ? '100%'\n        : maxHeight,\n    zIndex: 1, // NB: higher than of expansion containers\n    variants: [\n      {\n        props: {\n          variant: 'drawer',\n        },\n        style: {\n          maxHeight: 'none',\n          height: '100%',\n          boxShadow: 'none',\n          borderRadius: 0,\n        },\n      },\n    ],\n  }\n})\n\ninterface CssBaselineContainerProps {\n  variant?: WidgetVariant\n  paddingTopAdjustment: number\n  elementId: string\n}\n\nconst CssBaselineContainer = styled(ScopedCssBaseline, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),\n})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {\n  const maxHeight =\n    theme.container?.height === 'fit-content' ||\n    (!theme.container?.height && !theme.container?.maxHeight)\n      ? 'none'\n      : getWidgetMaxHeight(theme)\n  return {\n    display: 'flex',\n    flex: 1,\n    flexDirection: 'column',\n    overflowX: 'clip',\n    margin: 0,\n    width: '100%',\n    maxHeight:\n      variant === 'drawer' || theme.container?.display === 'flex'\n        ? 'none'\n        : maxHeight,\n    overflowY: 'auto',\n    height: theme.container?.display === 'flex' ? 'auto' : '100%',\n    paddingTop: paddingTopAdjustment,\n    // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes\n    '&:has(.full-page-container)': {\n      height:\n        theme.container?.maxHeight ||\n        theme.container?.height ||\n        defaultMaxHeight,\n    },\n    '&:has(.long-list)': {\n      minHeight: getWidgetMaxHeight(theme),\n      maxHeight: getWidgetMaxHeight(theme),\n    },\n  }\n})\n\nexport const FlexContainer: React.FC<ContainerProps> = styled(Container)({\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n})\n\nexport const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {\n  // const ref = useRef<HTMLDivElement>(null);\n  const { variant, elementId, theme } = useWidgetConfig()\n  const { headerHeight } = useHeaderHeight()\n  const positionFixedAdjustment =\n    theme?.header?.position === 'fixed' ? headerHeight : 0\n\n  return (\n    <RelativeContainer\n      variant={variant}\n      id={createElementId(ElementId.RelativeContainer, elementId)}\n    >\n      <CssBaselineContainer\n        id={createElementId(ElementId.ScrollableContainer, elementId)}\n        variant={variant}\n        enableColorScheme\n        paddingTopAdjustment={positionFixedAdjustment}\n        elementId={elementId}\n        // ref={ref}\n      >\n        <FlexContainer disableGutters>{children}</FlexContainer>\n      </CssBaselineContainer>\n      {/* <ScrollToLocation elementRef={ref} /> */}\n    </RelativeContainer>\n  )\n}\n\n// export const ScrollToLocation: React.FC<{\n//   elementRef: RefObject<HTMLElement>;\n// }> = ({ elementRef }) => {\n//   const { pathname } = useLocation();\n//   useLayoutEffect(() => {\n//     elementRef.current?.scrollTo(0, 0);\n//   }, [elementRef, pathname]);\n//   return null;\n// };\n"],"mappings":";;;;;;;;AAmBA,MAAa,uBAA2C,OAAO,IAAI,EAChE,EAAE,YAAY;AACb,QAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,MAAM;EACN,QACE,MAAM,WAAW,YAAY,SACzB,SACA,MAAM,WAAW,YACf,SACA,MAAM,WAAW,UAAU;EACpC;EAEJ;AAED,MAAa,oBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACvC,CAAC,EAA+B,EAAE,YAAY;CAC7C,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,MAAM;AAC/B,QAAO;EACL,UAAU;EACV,WAAW;EACX,OAAO;EACP,UAAU,MAAM,YAAY,OAAO;EACnC,UAAU,MAAM,YAAY,OAAO;EACnC,YAAY,MAAM,KAAK,QAAQ,WAAW;EAC1C,UAAU;EACV,MAAM;EACN,GAAG,MAAM;EACT,WACE,MAAM,WAAW,YAAY,UAAU,CAAC,MAAM,WAAW,SACrD,SACA;EACN,QAAQ;EACR,UAAU,CACR;GACE,OAAO,EACL,SAAS,UACV;GACD,OAAO;IACL,WAAW;IACX,QAAQ;IACR,WAAW;IACX,cAAc;IACf;GACF,CACF;EACF;EACD;AAQF,MAAM,uBAAuB,OAAO,mBAAmB,EACrD,oBAAoB,SAClB,CAAC;CAAC;CAAW;CAAwB;CAAY,CAAC,SAAS,KAAe,EAC7E,CAAC,EAA6B,EAAE,OAAO,SAAS,2BAA2B;CAC1E,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,MAAM;AAC/B,QAAO;EACL,SAAS;EACT,MAAM;EACN,eAAe;EACf,WAAW;EACX,QAAQ;EACR,OAAO;EACP,WACE,YAAY,YAAY,MAAM,WAAW,YAAY,SACjD,SACA;EACN,WAAW;EACX,QAAQ,MAAM,WAAW,YAAY,SAAS,SAAS;EACvD,YAAY;EAEZ,+BAA+B,EAC7B,QACE,MAAM,WAAW,aACjB,MAAM,WAAW,UAAA,KAEpB;EACD,qBAAqB;GACnB,WAAW,mBAAmB,MAAM;GACpC,WAAW,mBAAmB,MAAM;GACrC;EACF;EACD;AAEF,MAAa,gBAA0C,OAAO,UAAU,CAAC;CACvE,SAAS;CACT,eAAe;CACf,MAAM;CACP,CAAC;AAEF,MAAa,gBAA6C,EAAE,eAAe;CAEzE,MAAM,EAAE,SAAS,WAAW,UAAU,iBAAiB;CACvD,MAAM,EAAE,iBAAiB,iBAAiB;CAC1C,MAAM,0BACJ,OAAO,QAAQ,aAAa,UAAU,eAAe;AAEvD,QACE,oBAAC,mBAAD;EACW;EACT,IAAI,gBAAgB,UAAU,mBAAmB,UAAU;YAE3D,oBAAC,sBAAD;GACE,IAAI,gBAAgB,UAAU,qBAAqB,UAAU;GACpD;GACT,mBAAA;GACA,sBAAsB;GACX;aAGX,oBAAC,eAAD;IAAe,gBAAA;IAAgB;IAAyB,CAAA;GACnC,CAAA;EAEL,CAAA"}
+{"version":3,"file":"AppContainer.js","names":[],"sources":["../../../src/components/AppContainer.tsx"],"sourcesContent":["import type { BoxProps, ContainerProps } from '@mui/material'\nimport { Box, Container, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { defaultMaxHeight } from '../config/constants.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderHeight } from '../stores/header/useHeaderStore.js'\nimport type { WidgetVariant } from '../types/widget.js'\nimport { createElementId, ElementId } from '../utils/elements.js'\nimport { getWidgetMaxHeight } from '../utils/widgetSize.js'\n\n// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can\n//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height\n//  A Number of other components and hooks work with height values that are often set on or derived from these elements\n//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use\n//    - useTokenListHeight\n//    - useSetContentHeight\n//  Also check any code that is using the methods from elements.ts utils file\n\nexport const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(\n  ({ theme }) => {\n    return {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'start',\n      flex: 1,\n      height:\n        theme.container?.display === 'flex'\n          ? '100%'\n          : theme.container?.maxHeight\n            ? 'auto'\n            : theme.container?.height || 'auto',\n    }\n  }\n)\n\nexport const RelativeContainer: React.FC<\n  BoxProps & { variant?: WidgetVariant }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: WidgetVariant }>(({ theme }) => {\n  const maxHeight =\n    theme.container?.height === 'fit-content' ||\n    (!theme.container?.height && !theme.container?.maxHeight)\n      ? 'none'\n      : getWidgetMaxHeight(theme)\n  return {\n    position: 'relative',\n    boxSizing: 'content-box',\n    width: '100%',\n    minWidth: theme.breakpoints.values.xs,\n    maxWidth: theme.breakpoints.values.sm,\n    background: theme.vars.palette.background.default,\n    overflow: 'auto',\n    flex: 1,\n    ...theme.container,\n    maxHeight:\n      theme.container?.display === 'flex' && !theme.container?.height\n        ? '100%'\n        : maxHeight,\n    zIndex: 1, // NB: higher than of expansion containers\n    variants: [\n      {\n        props: {\n          variant: 'drawer',\n        },\n        style: {\n          maxHeight: 'none',\n          height: '100%',\n          boxShadow: 'none',\n          borderRadius: 0,\n        },\n      },\n    ],\n  }\n})\n\ninterface CssBaselineContainerProps {\n  variant?: WidgetVariant\n  paddingTopAdjustment: number\n  elementId: string\n}\n\nconst CssBaselineContainer = styled(ScopedCssBaseline, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),\n})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {\n  const maxHeight =\n    theme.container?.height === 'fit-content' ||\n    (!theme.container?.height && !theme.container?.maxHeight)\n      ? 'none'\n      : getWidgetMaxHeight(theme)\n  return {\n    display: 'flex',\n    flex: 1,\n    flexDirection: 'column',\n    overflowX: 'clip',\n    margin: 0,\n    width: '100%',\n    maxHeight:\n      variant === 'drawer' || theme.container?.display === 'flex'\n        ? 'none'\n        : maxHeight,\n    overflowY: 'auto',\n    height: theme.container?.display === 'flex' ? 'auto' : '100%',\n    paddingTop: paddingTopAdjustment,\n    // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes\n    '&:has(.full-page-container)': {\n      height:\n        theme.container?.maxHeight ||\n        theme.container?.height ||\n        defaultMaxHeight,\n    },\n    '&:has(.long-list)': {\n      minHeight: getWidgetMaxHeight(theme),\n      maxHeight: getWidgetMaxHeight(theme),\n    },\n  }\n})\n\nexport const FlexContainer: React.FC<ContainerProps> = styled(Container)({\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n})\n\nexport const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {\n  // const ref = useRef<HTMLDivElement>(null);\n  const { variant, elementId, theme } = useWidgetConfig()\n  const { headerHeight } = useHeaderHeight()\n  const positionFixedAdjustment =\n    theme?.header?.position === 'fixed' ? headerHeight : 0\n\n  return (\n    <RelativeContainer\n      variant={variant}\n      id={createElementId(ElementId.RelativeContainer, elementId)}\n    >\n      <CssBaselineContainer\n        id={createElementId(ElementId.ScrollableContainer, elementId)}\n        variant={variant}\n        enableColorScheme\n        paddingTopAdjustment={positionFixedAdjustment}\n        elementId={elementId}\n        // ref={ref}\n      >\n        <FlexContainer disableGutters>{children}</FlexContainer>\n      </CssBaselineContainer>\n      {/* <ScrollToLocation elementRef={ref} /> */}\n    </RelativeContainer>\n  )\n}\n\n// export const ScrollToLocation: React.FC<{\n//   elementRef: RefObject<HTMLElement>;\n// }> = ({ elementRef }) => {\n//   const { pathname } = useLocation();\n//   useLayoutEffect(() => {\n//     elementRef.current?.scrollTo(0, 0);\n//   }, [elementRef, pathname]);\n//   return null;\n// };\n"],"mappings":";;;;;;;;AAmBA,MAAa,uBAA2C,OAAO,IAAI,EAChE,EAAE,YAAY;AACb,QAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,MAAM;EACN,QACE,MAAM,WAAW,YAAY,SACzB,SACA,MAAM,WAAW,YACf,SACA,MAAM,WAAW,UAAU;EACpC;EAEJ;AAED,MAAa,oBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACvC,CAAC,EAA+B,EAAE,YAAY;CAC7C,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,MAAM;AAC/B,QAAO;EACL,UAAU;EACV,WAAW;EACX,OAAO;EACP,UAAU,MAAM,YAAY,OAAO;EACnC,UAAU,MAAM,YAAY,OAAO;EACnC,YAAY,MAAM,KAAK,QAAQ,WAAW;EAC1C,UAAU;EACV,MAAM;EACN,GAAG,MAAM;EACT,WACE,MAAM,WAAW,YAAY,UAAU,CAAC,MAAM,WAAW,SACrD,SACA;EACN,QAAQ;EACR,UAAU,CACR;GACE,OAAO,EACL,SAAS,UACV;GACD,OAAO;IACL,WAAW;IACX,QAAQ;IACR,WAAW;IACX,cAAc;IACf;GACF,CACF;EACF;EACD;AAQF,MAAM,uBAAuB,OAAO,mBAAmB,EACrD,oBAAoB,SAClB,CAAC;CAAC;CAAW;CAAwB;CAAY,CAAC,SAAS,KAAe,EAC7E,CAAC,EAA6B,EAAE,OAAO,SAAS,2BAA2B;CAC1E,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,MAAM;AAC/B,QAAO;EACL,SAAS;EACT,MAAM;EACN,eAAe;EACf,WAAW;EACX,QAAQ;EACR,OAAO;EACP,WACE,YAAY,YAAY,MAAM,WAAW,YAAY,SACjD,SACA;EACN,WAAW;EACX,QAAQ,MAAM,WAAW,YAAY,SAAS,SAAS;EACvD,YAAY;EAEZ,+BAA+B,EAC7B,QACE,MAAM,WAAW,aACjB,MAAM,WAAW,UAAA,KAEpB;EACD,qBAAqB;GACnB,WAAW,mBAAmB,MAAM;GACpC,WAAW,mBAAmB,MAAM;GACrC;EACF;EACD;AAEF,MAAa,gBAA0C,OAAO,UAAU,CAAC;CACvE,SAAS;CACT,eAAe;CACf,MAAM;CACP,CAAC;AAEF,MAAa,gBAA6C,EAAE,eAAe;CAEzE,MAAM,EAAE,SAAS,WAAW,UAAU,iBAAiB;CACvD,MAAM,EAAE,iBAAiB,iBAAiB;CAC1C,MAAM,0BACJ,OAAO,QAAQ,aAAa,UAAU,eAAe;AAEvD,QACE,oBAAC,mBAAD;EACW;EACT,IAAI,gBAAA,6BAA6C,UAAU;YAE3D,oBAAC,sBAAD;GACE,IAAI,gBAAA,+BAA+C,UAAU;GACpD;GACT,mBAAA;GACA,sBAAsB;GACX;aAGX,oBAAC,eAAD;IAAe,gBAAA;IAAgB;IAAyB,CAAA;GACnC,CAAA;EAEL,CAAA"}

package/dist/esm/components/ButtonTertiary.js

@@ -4,14 +4,14 @@ const ButtonTertiary = styled(Button)(({ theme }) => ({
 	color: theme.vars.palette.text.primary,
 	height: 40,
 	fontSize: 14,
-	backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-	"&:hover, &:active": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)` },
-	[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` },
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	"&:hover, &:active": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+	[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
 	...theme.applyStyles("dark", {
 		color: theme.vars.palette.text.primary,
-		backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-		"&:hover, &:active": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)` },
-		[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` }
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+		"&:hover, &:active": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+		[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
 	}),
 	[`.${buttonClasses.loadingIndicator}`]: { color: theme.vars.palette.text.primary }
 }));

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.js","names":[],"sources":["../../../src/components/ButtonTertiary.tsx"],"sourcesContent":["import { Button, buttonClasses, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =\n  styled(Button)(({ theme }) => ({\n    color: theme.vars.palette.text.primary,\n    height: 40,\n    fontSize: 14,\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n    '&:hover, &:active': {\n      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,\n    },\n    [`&.${buttonClasses.loading}:disabled`]: {\n      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n    },\n    ...theme.applyStyles('dark', {\n      color: theme.vars.palette.text.primary,\n      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n      '&:hover, &:active': {\n        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,\n      },\n      [`&.${buttonClasses.loading}:disabled`]: {\n        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n      },\n    }),\n    [`.${buttonClasses.loadingIndicator}`]: {\n      color: theme.vars.palette.text.primary,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,iBACX,OAAO,OAAO,EAAE,EAAE,aAAa;CAC7B,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;CACR,UAAU;CACV,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CACvE,qBAAqB,EACnB,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;EACA,KAAK,cAAc,QAAQ,aAAa,EACvC,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;EACvE,qBAAqB,EACnB,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;GACA,KAAK,cAAc,QAAQ,aAAa,EACvC,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;EACF,CAAC;EACD,IAAI,cAAc,qBAAqB,EACtC,OAAO,MAAM,KAAK,QAAQ,KAAK,SAChC;CACF,EAAE"}
+{"version":3,"file":"ButtonTertiary.js","names":[],"sources":["../../../src/components/ButtonTertiary.tsx"],"sourcesContent":["import { Button, buttonClasses, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =\n  styled(Button)(({ theme }) => ({\n    color: theme.vars.palette.text.primary,\n    height: 40,\n    fontSize: 14,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    '&:hover, &:active': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    },\n    [`&.${buttonClasses.loading}:disabled`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    },\n    ...theme.applyStyles('dark', {\n      color: theme.vars.palette.text.primary,\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n      '&:hover, &:active': {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n      },\n      [`&.${buttonClasses.loading}:disabled`]: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n      },\n    }),\n    [`.${buttonClasses.loadingIndicator}`]: {\n      color: theme.vars.palette.text.primary,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,iBACX,OAAO,OAAO,EAAE,EAAE,aAAa;CAC7B,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;CACR,UAAU;CACV,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,qBAAqB,EACnB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACA,KAAK,cAAc,QAAQ,aAAa,EACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,qBAAqB,EACnB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;GACA,KAAK,cAAc,QAAQ,aAAa,EACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACF,CAAC;EACD,IAAI,cAAc,qBAAqB,EACtC,OAAO,MAAM,KAAK,QAAQ,KAAK,SAChC;CACF,EAAE"}

package/dist/esm/components/Card/Card.js

@@ -38,11 +38,11 @@ const Card$1 = styled(Card, { shouldForwardProp: (prop) => ![
 				style: {
 					borderWidth: 1,
 					borderStyle: "solid",
-					borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
+					borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
 					backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
 					"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)` },
 					...theme.applyStyles("dark", {
-						borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
+						borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
 						backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
 						"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)` }
 					})

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["Card","MuiCard"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { CardProps as MuiCardProps } from '@mui/material'\nimport { Card as MuiCard, styled } from '@mui/material'\nimport type React from 'react'\n\nexport interface CardProps extends MuiCardProps {\n  type?: 'default' | 'selected' | 'error'\n  selectionColor?: 'primary' | 'secondary'\n  indented?: boolean\n}\n\nexport const Card: React.FC<React.ComponentProps<typeof MuiCard> & CardProps> =\n  styled(MuiCard, {\n    shouldForwardProp: (prop) =>\n      !['type', 'indented', 'selectionColor'].includes(prop as string),\n  })<CardProps>(({ theme }) => {\n    return {\n      padding: 0,\n      variants: [\n        {\n          props: ({ indented }) => indented,\n          style: {\n            padding: theme.spacing(2),\n          },\n        },\n        {\n          props: {\n            selectionColor: 'primary',\n            type: 'selected',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: theme.vars.palette.primary.main,\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,\n            },\n            ...theme.applyStyles('dark', {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,\n              '&:hover': {\n                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,\n              },\n              borderColor: theme.vars.palette.primary.main,\n            }),\n          },\n        },\n        {\n          props: {\n            selectionColor: 'secondary',\n            type: 'selected',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n            },\n            ...theme.applyStyles('dark', {\n              borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n              '&:hover': {\n                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n              },\n            }),\n          },\n        },\n        {\n          props: {\n            type: 'error',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: theme.vars.palette.error.main,\n          },\n        },\n      ],\n    }\n  })\n"],"mappings":";;AAUA,MAAaA,SACX,OAAOC,MAAS,EACd,oBAAoB,SAClB,CAAC;CAAC;CAAQ;CAAY;CAAiB,CAAC,SAAS,KAAe,EACnE,CAAC,EAAa,EAAE,YAAY;AAC3B,QAAO;EACL,SAAS;EACT,UAAU;GACR;IACE,QAAQ,EAAE,eAAe;IACzB,OAAO,EACL,SAAS,MAAM,QAAQ,EAAE,EAC1B;IACF;GACD;IACE,OAAO;KACL,gBAAgB;KAChB,MAAM;KACP;IACD,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,MAAM,KAAK,QAAQ,QAAQ;KACxC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACvE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,eACxE;KACD,GAAG,MAAM,YAAY,QAAQ;MAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;MACvE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,eACxE;MACD,aAAa,MAAM,KAAK,QAAQ,QAAQ;MACzC,CAAC;KACH;IACF;GACD;IACE,OAAO;KACL,gBAAgB;KAChB,MAAM;KACP;IACD,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,QAAQ,MAAM,KAAK,QAAQ,UAAU,YAAY;KAC9D,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;KACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;KACD,GAAG,MAAM,YAAY,QAAQ;MAC3B,aAAa,QAAQ,MAAM,KAAK,QAAQ,UAAU,YAAY;MAC9D,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;MACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;MACF,CAAC;KACH;IACF;GACD;IACE,OAAO,EACL,MAAM,SACP;IACD,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,MAAM,KAAK,QAAQ,MAAM;KACvC;IACF;GACF;EACF;EACD"}
+{"version":3,"file":"Card.js","names":["Card","MuiCard"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { CardProps as MuiCardProps } from '@mui/material'\nimport { Card as MuiCard, styled } from '@mui/material'\nimport type React from 'react'\n\nexport interface CardProps extends MuiCardProps {\n  type?: 'default' | 'selected' | 'error'\n  selectionColor?: 'primary' | 'secondary'\n  indented?: boolean\n}\n\nexport const Card: React.FC<React.ComponentProps<typeof MuiCard> & CardProps> =\n  styled(MuiCard, {\n    shouldForwardProp: (prop) =>\n      !['type', 'indented', 'selectionColor'].includes(prop as string),\n  })<CardProps>(({ theme }) => {\n    return {\n      padding: 0,\n      variants: [\n        {\n          props: ({ indented }) => indented,\n          style: {\n            padding: theme.spacing(2),\n          },\n        },\n        {\n          props: {\n            selectionColor: 'primary',\n            type: 'selected',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: theme.vars.palette.primary.main,\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,\n            },\n            ...theme.applyStyles('dark', {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,\n              '&:hover': {\n                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,\n              },\n              borderColor: theme.vars.palette.primary.main,\n            }),\n          },\n        },\n        {\n          props: {\n            selectionColor: 'secondary',\n            type: 'selected',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n            },\n            ...theme.applyStyles('dark', {\n              borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n              '&:hover': {\n                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n              },\n            }),\n          },\n        },\n        {\n          props: {\n            type: 'error',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: theme.vars.palette.error.main,\n          },\n        },\n      ],\n    }\n  })\n"],"mappings":";;AAUA,MAAaA,SACX,OAAOC,MAAS,EACd,oBAAoB,SAClB,CAAC;CAAC;CAAQ;CAAY;CAAiB,CAAC,SAAS,KAAe,EACnE,CAAC,EAAa,EAAE,YAAY;AAC3B,QAAO;EACL,SAAS;EACT,UAAU;GACR;IACE,QAAQ,EAAE,eAAe;IACzB,OAAO,EACL,SAAS,MAAM,QAAQ,EAAE,EAC1B;IACF;GACD;IACE,OAAO;KACL,gBAAgB;KAChB,MAAM;KACP;IACD,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,MAAM,KAAK,QAAQ,QAAQ;KACxC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACvE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,eACxE;KACD,GAAG,MAAM,YAAY,QAAQ;MAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;MACvE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,eACxE;MACD,aAAa,MAAM,KAAK,QAAQ,QAAQ;MACzC,CAAC;KACH;IACF;GACD;IACE,OAAO;KACL,gBAAgB;KAChB,MAAM;KACP;IACD,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;KACrE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;KACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;KACD,GAAG,MAAM,YAAY,QAAQ;MAC3B,aAAa,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;MACrE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;MACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;MACF,CAAC;KACH;IACF;GACD;IACE,OAAO,EACL,MAAM,SACP;IACD,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,MAAM,KAAK,QAAQ,MAAM;KACvC;IACF;GACF;EACF;EACD"}

package/dist/esm/components/Card/CardIconButton.js

@@ -3,8 +3,8 @@ import { IconButton, styled } from "@mui/material";
 const CardIconButton = styled(IconButton)(({ theme }) => {
 	return {
 		padding: theme.spacing(.5),
-		backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-		"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)` },
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
 		fontSize: "1rem"
 	};
 });

package/dist/esm/components/Card/CardIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardIconButton.js","names":["MuiIconButton"],"sources":["../../../../src/components/Card/CardIconButton.tsx"],"sourcesContent":["import type { IconButtonProps, LinkProps } from '@mui/material'\nimport { IconButton as MuiIconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const CardIconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> &\n    IconButtonProps &\n    Pick<LinkProps, 'href' | 'target' | 'rel'>\n> = styled(MuiIconButton)<\n  IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>\n>(({ theme }) => {\n  return {\n    padding: theme.spacing(0.5),\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n    '&:hover': {\n      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,\n    },\n    fontSize: '1rem',\n  }\n})\n"],"mappings":";;AAIA,MAAa,iBAIT,OAAOA,WAAc,EAEtB,EAAE,YAAY;AACf,QAAO;EACL,SAAS,MAAM,QAAQ,GAAI;EAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;EACvE,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;EACD,UAAU;EACX;EACD"}
+{"version":3,"file":"CardIconButton.js","names":["MuiIconButton"],"sources":["../../../../src/components/Card/CardIconButton.tsx"],"sourcesContent":["import type { IconButtonProps, LinkProps } from '@mui/material'\nimport { IconButton as MuiIconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const CardIconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> &\n    IconButtonProps &\n    Pick<LinkProps, 'href' | 'target' | 'rel'>\n> = styled(MuiIconButton)<\n  IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>\n>(({ theme }) => {\n  return {\n    padding: theme.spacing(0.5),\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    },\n    fontSize: '1rem',\n  }\n})\n"],"mappings":";;AAIA,MAAa,iBAIT,OAAOA,WAAc,EAEtB,EAAE,YAAY;AACf,QAAO;EACL,SAAS,MAAM,QAAQ,GAAI;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACD,UAAU;EACX;EACD"}

package/dist/esm/components/Card/CardLabel.js

@@ -36,10 +36,10 @@ const CardLabel = styled(Box, { shouldForwardProp: (prop) => prop !== "variant"
 		{
 			props: { variant: "warning" },
 			style: {
-				backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
 				color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
 				...theme.applyStyles("dark", {
-					backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
+					backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
 					color: theme.vars.palette.warning.main
 				})
 			}

package/dist/esm/components/Card/CardLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardLabel.js","names":[],"sources":["../../../../src/components/Card/CardLabel.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CardLabel: React.FC<\n  React.ComponentProps<typeof Box> & {\n    variant?: 'secondary' | 'success' | 'warning'\n  }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: 'secondary' | 'success' | 'warning' }>(({ theme }) => ({\n  borderRadius: theme.vars.shape.borderRadius,\n  padding: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  height: 24,\n  minWidth: 24,\n  userSelect: 'none',\n  fontSize: '1rem',\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,\n  color: theme.vars.palette.text.primary,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)`,\n  }),\n  variants: [\n    {\n      props: { variant: 'secondary' },\n      style: {\n        color: theme.palette.getContrastText(theme.palette.secondary.main),\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n        }),\n      },\n    },\n    {\n      props: { variant: 'success' },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,\n        color: theme.vars.palette.success.main,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,\n          color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`,\n        }),\n      },\n    },\n    {\n      props: { variant: 'warning' },\n      style: {\n        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,\n        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,\n          color: theme.vars.palette.warning.main,\n        }),\n      },\n    },\n  ],\n}))\n\nexport const CardLabelTypography: React.FC<\n  React.ComponentProps<typeof Typography> & { type?: 'icon' }\n> = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'type',\n})<{ type?: 'icon' }>(({ theme }) => ({\n  padding: theme.spacing(0.75, 1.5),\n  fontSize: 12,\n  lineHeight: 1,\n  fontWeight: '600',\n  variants: [\n    {\n      props: {\n        type: 'icon',\n      },\n      style: {\n        padding: theme.spacing(0.75, 0, 0.75, 0.75),\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAGA,MAAa,YAIT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACvC,CAAC,EAAqD,EAAE,aAAa;CACpE,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS;CACT,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,UAAU;CACV,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;CAC3E,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,eAC5E,CAAC;CACF,UAAU;EACR;GACE,OAAO,EAAE,SAAS,aAAa;GAC/B,OAAO;IACL,OAAO,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,UAAU,KAAK;IAClE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU,KAAK;IACrH,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU,KAAK,IACtH,CAAC;IACH;GACF;EACD;GACE,OAAO,EAAE,SAAS,WAAW;GAC7B,OAAO;IACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACnH,OAAO,MAAM,KAAK,QAAQ,QAAQ;IAClC,GAAG,MAAM,YAAY,QAAQ;KAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACnH,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KAC9D,CAAC;IACH;GACF;EACD;GACE,OAAO,EAAE,SAAS,WAAW;GAC7B,OAAO;IACL,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,QAAQ,YAAY;IAChE,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IAC7D,GAAG,MAAM,YAAY,QAAQ;KAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,QAAQ,YAAY;KAChE,OAAO,MAAM,KAAK,QAAQ,QAAQ;KACnC,CAAC;IACH;GACF;EACF;CACF,EAAE;AAEH,MAAa,sBAET,OAAO,YAAY,EACrB,oBAAoB,SAAS,SAAS,QACvC,CAAC,EAAqB,EAAE,aAAa;CACpC,SAAS,MAAM,QAAQ,KAAM,IAAI;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,UAAU,CACR;EACE,OAAO,EACL,MAAM,QACP;EACD,OAAO,EACL,SAAS,MAAM,QAAQ,KAAM,GAAG,KAAM,IAAK,EAC5C;EACF,CACF;CACF,EAAE"}
+{"version":3,"file":"CardLabel.js","names":[],"sources":["../../../../src/components/Card/CardLabel.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CardLabel: React.FC<\n  React.ComponentProps<typeof Box> & {\n    variant?: 'secondary' | 'success' | 'warning'\n  }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: 'secondary' | 'success' | 'warning' }>(({ theme }) => ({\n  borderRadius: theme.vars.shape.borderRadius,\n  padding: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  height: 24,\n  minWidth: 24,\n  userSelect: 'none',\n  fontSize: '1rem',\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,\n  color: theme.vars.palette.text.primary,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)`,\n  }),\n  variants: [\n    {\n      props: { variant: 'secondary' },\n      style: {\n        color: theme.palette.getContrastText(theme.palette.secondary.main),\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n        }),\n      },\n    },\n    {\n      props: { variant: 'success' },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,\n        color: theme.vars.palette.success.main,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,\n          color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`,\n        }),\n      },\n    },\n    {\n      props: { variant: 'warning' },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n          color: theme.vars.palette.warning.main,\n        }),\n      },\n    },\n  ],\n}))\n\nexport const CardLabelTypography: React.FC<\n  React.ComponentProps<typeof Typography> & { type?: 'icon' }\n> = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'type',\n})<{ type?: 'icon' }>(({ theme }) => ({\n  padding: theme.spacing(0.75, 1.5),\n  fontSize: 12,\n  lineHeight: 1,\n  fontWeight: '600',\n  variants: [\n    {\n      props: {\n        type: 'icon',\n      },\n      style: {\n        padding: theme.spacing(0.75, 0, 0.75, 0.75),\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAGA,MAAa,YAIT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACvC,CAAC,EAAqD,EAAE,aAAa;CACpE,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS;CACT,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,UAAU;CACV,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;CAC3E,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,eAC5E,CAAC;CACF,UAAU;EACR;GACE,OAAO,EAAE,SAAS,aAAa;GAC/B,OAAO;IACL,OAAO,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,UAAU,KAAK;IAClE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU,KAAK;IACrH,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU,KAAK,IACtH,CAAC;IACH;GACF;EACD;GACE,OAAO,EAAE,SAAS,WAAW;GAC7B,OAAO;IACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACnH,OAAO,MAAM,KAAK,QAAQ,QAAQ;IAClC,GAAG,MAAM,YAAY,QAAQ;KAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACnH,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KAC9D,CAAC;IACH;GACF;EACD;GACE,OAAO,EAAE,SAAS,WAAW;GAC7B,OAAO;IACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IAC7D,GAAG,MAAM,YAAY,QAAQ;KAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACvE,OAAO,MAAM,KAAK,QAAQ,QAAQ;KACnC,CAAC;IACH;GACF;EACF;CACF,EAAE;AAEH,MAAa,sBAET,OAAO,YAAY,EACrB,oBAAoB,SAAS,SAAS,QACvC,CAAC,EAAqB,EAAE,aAAa;CACpC,SAAS,MAAM,QAAQ,KAAM,IAAI;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,UAAU,CACR;EACE,OAAO,EACL,MAAM,QACP;EACD,OAAO,EACL,SAAS,MAAM,QAAQ,KAAM,GAAG,KAAM,IAAK,EAC5C;EACF,CACF;CACF,EAAE"}

package/dist/esm/components/Chains/AllChainsAvatar.js

@@ -27,6 +27,12 @@ const chainTypeIcons = [
 		chainType: ChainType.MVM,
 		icon: "https://lifinance.github.io/types/src/assets/icons/chains/sui.svg",
 		defaultChainId: ChainId.SUI
+	},
+	{
+		name: "Tron",
+		chainType: ChainType.TVM,
+		icon: "https://lifinance.github.io/types/src/assets/icons/chains/tron.svg",
+		defaultChainId: ChainId.TRN
 	}
 ];
 const maxChainAvatarsCount = chainTypeIcons.length;

package/dist/esm/components/Chains/AllChainsAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AllChainsAvatar.js","names":[],"sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"sourcesContent":["import {\n  ChainId,\n  ChainType,\n  type EVMChain,\n  type ExtendedChain,\n} from '@lifi/sdk'\nimport { Avatar, Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo, useMemo } from 'react'\n\ninterface AllChainsAvatarProps {\n  chains: ExtendedChain[] | EVMChain[]\n  size: 'small' | 'medium'\n}\n\nconst chainTypeIcons = [\n  {\n    name: 'Ethereum',\n    chainType: ChainType.EVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',\n    defaultChainId: ChainId.ETH,\n  },\n  {\n    name: 'Solana',\n    chainType: ChainType.SVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',\n    defaultChainId: ChainId.SOL,\n  },\n  {\n    name: 'Bitcoin',\n    chainType: ChainType.UTXO,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',\n    defaultChainId: ChainId.BTC,\n  },\n  {\n    name: 'Sui',\n    chainType: ChainType.MVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',\n    defaultChainId: ChainId.SUI,\n  },\n]\n\nconst maxChainAvatarsCount = chainTypeIcons.length\n\nexport const AllChainsAvatar: React.NamedExoticComponent<AllChainsAvatarProps> =\n  memo(({ chains, size }: AllChainsAvatarProps): JSX.Element => {\n    const icons = useMemo(() => {\n      // Create maps for efficient lookups\n      const chainsPerChainType = new Map<ChainType, number>()\n      const chainsByChainType = new Map<\n        ChainType,\n        (ExtendedChain | EVMChain)[]\n      >()\n\n      chains.forEach((chain) => {\n        chainsPerChainType.set(\n          chain.chainType,\n          (chainsPerChainType.get(chain.chainType) || 0) + 1\n        )\n        const chainsOfType = chainsByChainType.get(chain.chainType) || []\n        chainsOfType.push(chain)\n        chainsByChainType.set(chain.chainType, chainsOfType)\n      })\n\n      // Get existing ecosystem icons\n      const existingChainTypeIcons = chainTypeIcons.filter(\n        (predefinedChain) => {\n          const numberOfChains =\n            chainsPerChainType.get(predefinedChain.chainType) ?? 0\n\n          // If there's only one chain of this type, check if it's not the default\n          if (numberOfChains === 1) {\n            const chainsOfType = chainsByChainType.get(\n              predefinedChain.chainType\n            )\n            const singleChain = chainsOfType?.[0]\n            // Exclude the predefined icon if the single chain is not the default\n            if (\n              singleChain &&\n              singleChain.id !== predefinedChain.defaultChainId\n            ) {\n              return false\n            }\n          }\n\n          return numberOfChains > 0\n        }\n      )\n\n      if (existingChainTypeIcons.length === maxChainAvatarsCount) {\n        return existingChainTypeIcons\n      }\n\n      const remainingSlots =\n        maxChainAvatarsCount - existingChainTypeIcons.length\n\n      // Create a Set for O(1) lookup of predefined icon names\n      const predefinedIconNames = new Set(\n        existingChainTypeIcons.map((icon) => icon.name)\n      )\n\n      const chainsWithLogos = chains.filter((chain) => {\n        // Filter out chain icons matching ecosystem icons\n        return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI)\n      })\n\n      const additionalIcons = chainsWithLogos\n        .slice(0, remainingSlots)\n        .map((chain) => ({\n          name: chain.name,\n          chainType: chain.chainType,\n          icon: chain.logoURI!,\n        }))\n\n      return [...existingChainTypeIcons, ...additionalIcons]\n    }, [chains])\n\n    const wrapperSize = size === 'small' ? '32px' : '40px'\n    const avatarSize = size === 'small' ? '12px' : '16px'\n    const avatarsCount = Math.min(icons.length, maxChainAvatarsCount)\n    const gridRows = avatarsCount > 2 ? 2 : 1\n    const gridColumns = avatarsCount > 1 ? 2 : 1\n\n    return (\n      <Box\n        sx={{\n          width: wrapperSize,\n          height: wrapperSize,\n          display: 'grid',\n          gridTemplateRows: `repeat(${gridRows}, 1fr)`,\n          gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n          placeItems: 'center',\n        }}\n      >\n        {icons.slice(0, avatarsCount).map((chain, idx) => {\n          const isThirdAvatarInThreeAvatarLayout =\n            avatarsCount === 3 && idx === 2\n\n          return (\n            <Avatar\n              key={`${chain.chainType}-${idx}`}\n              src={chain.icon}\n              alt={chain.name}\n              sx={{\n                width: avatarSize,\n                height: avatarSize,\n                margin: 'auto',\n                ...(isThirdAvatarInThreeAvatarLayout && {\n                  gridColumn: '1 / span 2',\n                  gridRow: '2',\n                  justifySelf: 'center',\n                }),\n              }}\n            >\n              {chain.chainType[0]}\n            </Avatar>\n          )\n        })}\n      </Box>\n    )\n  })\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACF;AAED,MAAM,uBAAuB,eAAe;AAE5C,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,KAAwB;EACvD,MAAM,oCAAoB,IAAI,KAG3B;AAEH,SAAO,SAAS,UAAU;AACxB,sBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,UAAU,IAAI,KAAK,EAClD;GACD,MAAM,eAAe,kBAAkB,IAAI,MAAM,UAAU,IAAI,EAAE;AACjE,gBAAa,KAAK,MAAM;AACxB,qBAAkB,IAAI,MAAM,WAAW,aAAa;IACpD;EAGF,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,UAAU,IAAI;AAGvD,OAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,UACjB,GACkC;AAEnC,QACE,eACA,YAAY,OAAO,gBAAgB,eAEnC,QAAO;;AAIX,UAAO,iBAAiB;IAE3B;AAED,MAAI,uBAAuB,WAAW,qBACpC,QAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,KAAK,CAChD;EAOD,MAAM,kBALkB,OAAO,QAAQ,UAAU;AAE/C,UAAO,CAAC,oBAAoB,IAAI,MAAM,KAAK,IAAI,QAAQ,MAAM,QAAQ;IACrE,CAGC,MAAM,GAAG,eAAe,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;GACb,EAAE;AAEL,SAAO,CAAC,GAAG,wBAAwB,GAAG,gBAAgB;IACrD,CAAC,OAAO,CAAC;CAEZ,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,qBAAqB;CACjE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;AAE3C,QACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;GACb;YAEA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;AAEhC,UACE,oBAAC,QAAD;IAEE,KAAK,MAAM;IACX,KAAK,MAAM;IACX,IAAI;KACF,OAAO;KACP,QAAQ;KACR,QAAQ;KACR,GAAI,oCAAoC;MACtC,YAAY;MACZ,SAAS;MACT,aAAa;MACd;KACF;cAEA,MAAM,UAAU;IACV,EAfF,GAAG,MAAM,UAAU,GAAG,MAepB;IAEX;EACE,CAAA;EAER"}
+{"version":3,"file":"AllChainsAvatar.js","names":[],"sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"sourcesContent":["import {\n  ChainId,\n  ChainType,\n  type EVMChain,\n  type ExtendedChain,\n} from '@lifi/sdk'\nimport { Avatar, Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo, useMemo } from 'react'\n\ninterface AllChainsAvatarProps {\n  chains: ExtendedChain[] | EVMChain[]\n  size: 'small' | 'medium'\n}\n\nconst chainTypeIcons = [\n  {\n    name: 'Ethereum',\n    chainType: ChainType.EVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',\n    defaultChainId: ChainId.ETH,\n  },\n  {\n    name: 'Solana',\n    chainType: ChainType.SVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',\n    defaultChainId: ChainId.SOL,\n  },\n  {\n    name: 'Bitcoin',\n    chainType: ChainType.UTXO,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',\n    defaultChainId: ChainId.BTC,\n  },\n  {\n    name: 'Sui',\n    chainType: ChainType.MVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',\n    defaultChainId: ChainId.SUI,\n  },\n  {\n    name: 'Tron',\n    chainType: ChainType.TVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/tron.svg',\n    defaultChainId: ChainId.TRN,\n  },\n]\n\nconst maxChainAvatarsCount = chainTypeIcons.length\n\nexport const AllChainsAvatar: React.NamedExoticComponent<AllChainsAvatarProps> =\n  memo(({ chains, size }: AllChainsAvatarProps): JSX.Element => {\n    const icons = useMemo(() => {\n      // Create maps for efficient lookups\n      const chainsPerChainType = new Map<ChainType, number>()\n      const chainsByChainType = new Map<\n        ChainType,\n        (ExtendedChain | EVMChain)[]\n      >()\n\n      chains.forEach((chain) => {\n        chainsPerChainType.set(\n          chain.chainType,\n          (chainsPerChainType.get(chain.chainType) || 0) + 1\n        )\n        const chainsOfType = chainsByChainType.get(chain.chainType) || []\n        chainsOfType.push(chain)\n        chainsByChainType.set(chain.chainType, chainsOfType)\n      })\n\n      // Get existing ecosystem icons\n      const existingChainTypeIcons = chainTypeIcons.filter(\n        (predefinedChain) => {\n          const numberOfChains =\n            chainsPerChainType.get(predefinedChain.chainType) ?? 0\n\n          // If there's only one chain of this type, check if it's not the default\n          if (numberOfChains === 1) {\n            const chainsOfType = chainsByChainType.get(\n              predefinedChain.chainType\n            )\n            const singleChain = chainsOfType?.[0]\n            // Exclude the predefined icon if the single chain is not the default\n            if (\n              singleChain &&\n              singleChain.id !== predefinedChain.defaultChainId\n            ) {\n              return false\n            }\n          }\n\n          return numberOfChains > 0\n        }\n      )\n\n      if (existingChainTypeIcons.length === maxChainAvatarsCount) {\n        return existingChainTypeIcons\n      }\n\n      const remainingSlots =\n        maxChainAvatarsCount - existingChainTypeIcons.length\n\n      // Create a Set for O(1) lookup of predefined icon names\n      const predefinedIconNames = new Set(\n        existingChainTypeIcons.map((icon) => icon.name)\n      )\n\n      const chainsWithLogos = chains.filter((chain) => {\n        // Filter out chain icons matching ecosystem icons\n        return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI)\n      })\n\n      const additionalIcons = chainsWithLogos\n        .slice(0, remainingSlots)\n        .map((chain) => ({\n          name: chain.name,\n          chainType: chain.chainType,\n          icon: chain.logoURI!,\n        }))\n\n      return [...existingChainTypeIcons, ...additionalIcons]\n    }, [chains])\n\n    const wrapperSize = size === 'small' ? '32px' : '40px'\n    const avatarSize = size === 'small' ? '12px' : '16px'\n    const avatarsCount = Math.min(icons.length, maxChainAvatarsCount)\n    const gridRows = avatarsCount > 2 ? 2 : 1\n    const gridColumns = avatarsCount > 1 ? 2 : 1\n\n    return (\n      <Box\n        sx={{\n          width: wrapperSize,\n          height: wrapperSize,\n          display: 'grid',\n          gridTemplateRows: `repeat(${gridRows}, 1fr)`,\n          gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n          placeItems: 'center',\n        }}\n      >\n        {icons.slice(0, avatarsCount).map((chain, idx) => {\n          const isThirdAvatarInThreeAvatarLayout =\n            avatarsCount === 3 && idx === 2\n\n          return (\n            <Avatar\n              key={`${chain.chainType}-${idx}`}\n              src={chain.icon}\n              alt={chain.name}\n              sx={{\n                width: avatarSize,\n                height: avatarSize,\n                margin: 'auto',\n                ...(isThirdAvatarInThreeAvatarLayout && {\n                  gridColumn: '1 / span 2',\n                  gridRow: '2',\n                  justifySelf: 'center',\n                }),\n              }}\n            >\n              {chain.chainType[0]}\n            </Avatar>\n          )\n        })}\n      </Box>\n    )\n  })\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACF;AAED,MAAM,uBAAuB,eAAe;AAE5C,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,KAAwB;EACvD,MAAM,oCAAoB,IAAI,KAG3B;AAEH,SAAO,SAAS,UAAU;AACxB,sBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,UAAU,IAAI,KAAK,EAClD;GACD,MAAM,eAAe,kBAAkB,IAAI,MAAM,UAAU,IAAI,EAAE;AACjE,gBAAa,KAAK,MAAM;AACxB,qBAAkB,IAAI,MAAM,WAAW,aAAa;IACpD;EAGF,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,UAAU,IAAI;AAGvD,OAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,UACjB,GACkC;AAEnC,QACE,eACA,YAAY,OAAO,gBAAgB,eAEnC,QAAO;;AAIX,UAAO,iBAAiB;IAE3B;AAED,MAAI,uBAAuB,WAAW,qBACpC,QAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,KAAK,CAChD;EAOD,MAAM,kBALkB,OAAO,QAAQ,UAAU;AAE/C,UAAO,CAAC,oBAAoB,IAAI,MAAM,KAAK,IAAI,QAAQ,MAAM,QAAQ;IACrE,CAGC,MAAM,GAAG,eAAe,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;GACb,EAAE;AAEL,SAAO,CAAC,GAAG,wBAAwB,GAAG,gBAAgB;IACrD,CAAC,OAAO,CAAC;CAEZ,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,qBAAqB;CACjE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;AAE3C,QACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;GACb;YAEA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;AAEhC,UACE,oBAAC,QAAD;IAEE,KAAK,MAAM;IACX,KAAK,MAAM;IACX,IAAI;KACF,OAAO;KACP,QAAQ;KACR,QAAQ;KACR,GAAI,oCAAoC;MACtC,YAAY;MACZ,SAAS;MACT,aAAa;MACd;KACF;cAEA,MAAM,UAAU;IACV,EAfF,GAAG,MAAM,UAAU,GAAG,MAepB;IAEX;EACE,CAAA;EAER"}

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

@@ -4,7 +4,7 @@ const ContextMenuButton = styled(IconButton)(({ theme }) => ({
 	position: "absolute",
 	top: theme.spacing(1.75),
 	right: theme.spacing(2),
-	"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` }
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
 }));
 //#endregion
 export { ContextMenuButton };

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.style.js","names":[],"sources":["../../../src/components/ContextMenu.style.tsx"],"sourcesContent":["import { IconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ContextMenuButton: React.FC<\n  React.ComponentProps<typeof IconButton>\n> = styled(IconButton)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(1.75),\n  right: theme.spacing(2),\n  '&:hover': {\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,oBAET,OAAO,WAAW,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,KAAK,MAAM,QAAQ,KAAK;CACxB,OAAO,MAAM,QAAQ,EAAE;CACvB,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;CACF,EAAE"}
+{"version":3,"file":"ContextMenu.style.js","names":[],"sources":["../../../src/components/ContextMenu.style.tsx"],"sourcesContent":["import { IconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ContextMenuButton: React.FC<\n  React.ComponentProps<typeof IconButton>\n> = styled(IconButton)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(1.75),\n  right: theme.spacing(2),\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,oBAET,OAAO,WAAW,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,KAAK,MAAM,QAAQ,KAAK;CACxB,OAAO,MAAM,QAAQ,EAAE;CACvB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACF,EAAE"}

package/dist/esm/components/ContractComponent/ItemPrice.js

@@ -20,7 +20,7 @@ const ItemPrice = ({ token, contractCalls }) => {
 	]);
 	return /* @__PURE__ */ jsx(Token$1, {
 		token,
-		p: 2
+		sx: { p: 2 }
 	});
 };
 //#endregion

package/dist/esm/components/ContractComponent/ItemPrice.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemPrice.js","names":["Token"],"sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"sourcesContent":["import { type ContractCall, formatUnits } from '@lifi/sdk'\nimport { useEffect } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { Token } from '../Token/Token.js'\n\nexport interface ItemPriceProps {\n  token: TokenAmount\n  contractCalls?: ContractCall[]\n}\n\nexport const ItemPrice: React.FC<ItemPriceProps> = ({\n  token,\n  contractCalls,\n}) => {\n  const { setFieldValue } = useFieldActions()\n\n  useEffect(() => {\n    if (token) {\n      setFieldValue('toChain', token.chainId, { isTouched: true })\n      setFieldValue('toToken', token.address, { isTouched: true })\n      setFieldValue(\n        'toAmount',\n        token.amount ? formatUnits(token.amount, token.decimals) : '',\n        {\n          isTouched: true,\n        }\n      )\n    }\n    if (contractCalls) {\n      setFieldValue('contractCalls', contractCalls, {\n        isTouched: true,\n      })\n    }\n  }, [contractCalls, setFieldValue, token])\n  return <Token token={token} p={2} />\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAuC,EAClD,OACA,oBACI;CACJ,MAAM,EAAE,kBAAkB,iBAAiB;AAE3C,iBAAgB;AACd,MAAI,OAAO;AACT,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBACE,YACA,MAAM,SAAS,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,IAC3D,EACE,WAAW,MACZ,CACF;;AAEH,MAAI,cACF,eAAc,iBAAiB,eAAe,EAC5C,WAAW,MACZ,CAAC;IAEH;EAAC;EAAe;EAAe;EAAM,CAAC;AACzC,QAAO,oBAACA,SAAD;EAAc;EAAO,GAAG;EAAK,CAAA"}
+{"version":3,"file":"ItemPrice.js","names":["Token"],"sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"sourcesContent":["import { type ContractCall, formatUnits } from '@lifi/sdk'\nimport { useEffect } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { Token } from '../Token/Token.js'\n\nexport interface ItemPriceProps {\n  token: TokenAmount\n  contractCalls?: ContractCall[]\n}\n\nexport const ItemPrice: React.FC<ItemPriceProps> = ({\n  token,\n  contractCalls,\n}) => {\n  const { setFieldValue } = useFieldActions()\n\n  useEffect(() => {\n    if (token) {\n      setFieldValue('toChain', token.chainId, { isTouched: true })\n      setFieldValue('toToken', token.address, { isTouched: true })\n      setFieldValue(\n        'toAmount',\n        token.amount ? formatUnits(token.amount, token.decimals) : '',\n        {\n          isTouched: true,\n        }\n      )\n    }\n    if (contractCalls) {\n      setFieldValue('contractCalls', contractCalls, {\n        isTouched: true,\n      })\n    }\n  }, [contractCalls, setFieldValue, token])\n  return <Token token={token} sx={{ p: 2 }} />\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAuC,EAClD,OACA,oBACI;CACJ,MAAM,EAAE,kBAAkB,iBAAiB;AAE3C,iBAAgB;AACd,MAAI,OAAO;AACT,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBACE,YACA,MAAM,SAAS,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,IAC3D,EACE,WAAW,MACZ,CACF;;AAEH,MAAI,cACF,eAAc,iBAAiB,eAAe,EAC5C,WAAW,MACZ,CAAC;IAEH;EAAC;EAAe;EAAe;EAAM,CAAC;AACzC,QAAO,oBAACA,SAAD;EAAc;EAAO,IAAI,EAAE,GAAG,GAAG;EAAI,CAAA"}

package/dist/esm/components/ContractComponent/NFT/NFTBase.js

@@ -66,7 +66,7 @@ const NFTBase = ({ imageUrl, isLoading, collectionName, assetName, owner, token
 		}), /* @__PURE__ */ jsx(Token, {
 			token,
 			isLoading,
-			mt: 2
+			sx: { mt: 2 }
 		})]
 	});
 };

package/dist/esm/components/ContractComponent/NFT/NFTBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"NFTBase.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"sourcesContent":["import { Box, Link, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Token } from '../../Token/Token.js'\nimport { PreviewAvatar } from './NFT.style.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFTBase: React.FC<NFTProps> = ({\n  imageUrl,\n  isLoading,\n  collectionName,\n  assetName,\n  owner,\n  token,\n}) => {\n  const { t } = useTranslation()\n  return (\n    <Box\n      sx={{\n        p: 2,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n        }}\n      >\n        {isLoading ? (\n          <Skeleton\n            width={96}\n            height={96}\n            variant=\"rectangular\"\n            sx={{ borderRadius: 1 }}\n          />\n        ) : (\n          <PreviewAvatar src={imageUrl} />\n        )}\n        <Box\n          sx={{\n            ml: 2,\n          }}\n        >\n          {isLoading ? (\n            <Skeleton width={144} height={21} variant=\"text\" />\n          ) : (\n            <Typography\n              sx={{\n                fontSize: 14,\n                color: 'text.secondary',\n              }}\n            >\n              {collectionName}\n            </Typography>\n          )}\n          {isLoading ? (\n            <Skeleton width={112} height={27} variant=\"text\" />\n          ) : (\n            <Typography\n              sx={{\n                fontSize: 18,\n                fontWeight: 600,\n              }}\n            >\n              {assetName}\n            </Typography>\n          )}\n          {isLoading ? (\n            <Skeleton width={128} height={21} variant=\"text\" />\n          ) : owner ? (\n            <Typography\n              sx={{\n                fontSize: 14,\n                color: 'text.secondary',\n              }}\n            >\n              {t('main.ownedBy')}{' '}\n              <Link\n                href={owner.url}\n                target=\"_blank\"\n                underline=\"none\"\n                color=\"primary\"\n              >\n                {owner.name}\n              </Link>\n            </Typography>\n          ) : null}\n        </Box>\n      </Box>\n      <Token token={token} isLoading={isLoading} mt={2} />\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,WAA+B,EAC1C,UACA,WACA,gBACA,WACA,OACA,YACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC,KAAD;EACE,IAAI,EACF,GAAG,GACJ;YAHH,CAKE,qBAAC,KAAD;GACE,IAAI,EACF,SAAS,QACV;aAHH,CAKG,YACC,oBAAC,UAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,IAAI,EAAE,cAAc,GAAG;IACvB,CAAA,GAEF,oBAAC,eAAD,EAAe,KAAK,UAAY,CAAA,EAElC,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACL;cAHH;KAKG,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,YAAY;OACb;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GACjD,QACF,qBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAJH;OAMG,EAAE,eAAe;OAAE;OACpB,oBAAC,MAAD;QACE,MAAM,MAAM;QACZ,QAAO;QACP,WAAU;QACV,OAAM;kBAEL,MAAM;QACF,CAAA;OACI;UACX;KACA;MACF;MACN,oBAAC,OAAD;GAAc;GAAkB;GAAW,IAAI;GAAK,CAAA,CAChD"}
+{"version":3,"file":"NFTBase.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"sourcesContent":["import { Box, Link, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Token } from '../../Token/Token.js'\nimport { PreviewAvatar } from './NFT.style.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFTBase: React.FC<NFTProps> = ({\n  imageUrl,\n  isLoading,\n  collectionName,\n  assetName,\n  owner,\n  token,\n}) => {\n  const { t } = useTranslation()\n  return (\n    <Box\n      sx={{\n        p: 2,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n        }}\n      >\n        {isLoading ? (\n          <Skeleton\n            width={96}\n            height={96}\n            variant=\"rectangular\"\n            sx={{ borderRadius: 1 }}\n          />\n        ) : (\n          <PreviewAvatar src={imageUrl} />\n        )}\n        <Box\n          sx={{\n            ml: 2,\n          }}\n        >\n          {isLoading ? (\n            <Skeleton width={144} height={21} variant=\"text\" />\n          ) : (\n            <Typography\n              sx={{\n                fontSize: 14,\n                color: 'text.secondary',\n              }}\n            >\n              {collectionName}\n            </Typography>\n          )}\n          {isLoading ? (\n            <Skeleton width={112} height={27} variant=\"text\" />\n          ) : (\n            <Typography\n              sx={{\n                fontSize: 18,\n                fontWeight: 600,\n              }}\n            >\n              {assetName}\n            </Typography>\n          )}\n          {isLoading ? (\n            <Skeleton width={128} height={21} variant=\"text\" />\n          ) : owner ? (\n            <Typography\n              sx={{\n                fontSize: 14,\n                color: 'text.secondary',\n              }}\n            >\n              {t('main.ownedBy')}{' '}\n              <Link\n                href={owner.url}\n                target=\"_blank\"\n                underline=\"none\"\n                color=\"primary\"\n              >\n                {owner.name}\n              </Link>\n            </Typography>\n          ) : null}\n        </Box>\n      </Box>\n      <Token token={token} isLoading={isLoading} sx={{ mt: 2 }} />\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,WAA+B,EAC1C,UACA,WACA,gBACA,WACA,OACA,YACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC,KAAD;EACE,IAAI,EACF,GAAG,GACJ;YAHH,CAKE,qBAAC,KAAD;GACE,IAAI,EACF,SAAS,QACV;aAHH,CAKG,YACC,oBAAC,UAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,IAAI,EAAE,cAAc,GAAG;IACvB,CAAA,GAEF,oBAAC,eAAD,EAAe,KAAK,UAAY,CAAA,EAElC,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACL;cAHH;KAKG,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,YAAY;OACb;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GACjD,QACF,qBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAJH;OAMG,EAAE,eAAe;OAAE;OACpB,oBAAC,MAAD;QACE,MAAM,MAAM;QACZ,QAAO;QACP,WAAU;QACV,OAAM;kBAEL,MAAM;QACF,CAAA;OACI;UACX;KACA;MACF;MACN,oBAAC,OAAD;GAAc;GAAkB;GAAW,IAAI,EAAE,IAAI,GAAG;GAAI,CAAA,CACxD"}