npm - @lifi/widget - Versions diffs - 4.0.0-beta.14 → 4.0.0-beta.18 - Mend

@lifi/widget 4.0.0-beta.14 → 4.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (294) hide show

package/dist/esm/components/Expansion/Expansion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n const [withChainExpansion, expansionType] = useHasChainExpansion()\n const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n const [routesOpen, setRoutesOpen] = useState(false)\n\n // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n if (\n expansionType === ExpansionType.FromChain \|\|\n expansionType === ExpansionType.ToChain\n ) {\n chainExpansionTypeRef.current = expansionType\n }\n\n const containerWidth = useMemo(() => {\n return routesOpen\n ? routesExpansionWidth\n : withChainExpansion\n ? chainExpansionWidth\n : 0\n }, [routesOpen, withChainExpansion])\n\n return (\n <ExpansionContainer width={containerWidth}>\n <RoutesExpanded\n canOpen={expansionType === ExpansionType.Routes}\n setOpenExpansion={setRoutesOpen}\n />\n <ChainsExpanded\n formType={\n chainExpansionTypeRef.current === ExpansionType.FromChain\n ? 'from'\n : 'to'\n }\n open={withChainExpansion}\n />\n </ExpansionContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,sBAAsB;CAClE,MAAM,wBAAwB,OAAsB,cAAc;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAGnD,KACE,~~kBAAkB~~,~~cAAc~~,~~aAChC~~,~~kBAAkB~~,~~cAAc,QAEhC,~~uBAAsB,UAAU;AAWlC,QACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;AACnC,UAAO,aACH,uBACA,qBACE,sBACA;KACL,CAAC,YAAY,mBAAmB,~~CAAC~~;~~YAGlC~~,CACE,oBAAC,gBAAD;GACE,SAAS,~~kBAAkB,cAAc~~;~~GACzC~~,kBAAkB;GAClB,CAAA,EACF,oBAAC,gBAAD;GACE,UACE,sBAAsB,~~YAAY~~,~~cAAc~~,~~YAC5C,~~SACA;GAEN,MAAM;GACN,CAAA,CACiB"}
1	+ {"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n const [withChainExpansion, expansionType] = useHasChainExpansion()\n const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n const [routesOpen, setRoutesOpen] = useState(false)\n\n // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n if (\n expansionType === ExpansionType.FromChain \|\|\n expansionType === ExpansionType.ToChain\n ) {\n chainExpansionTypeRef.current = expansionType\n }\n\n const containerWidth = useMemo(() => {\n return routesOpen\n ? routesExpansionWidth\n : withChainExpansion\n ? chainExpansionWidth\n : 0\n }, [routesOpen, withChainExpansion])\n\n return (\n <ExpansionContainer width={containerWidth}>\n <RoutesExpanded\n canOpen={expansionType === ExpansionType.Routes}\n setOpenExpansion={setRoutesOpen}\n />\n <ChainsExpanded\n formType={\n chainExpansionTypeRef.current === ExpansionType.FromChain\n ? 'from'\n : 'to'\n }\n open={withChainExpansion}\n />\n </ExpansionContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,sBAAsB;CAClE,MAAM,wBAAwB,OAAsB,cAAc;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAGnD,KACE,kBAAA,eACA,kBAAA,UAEA,uBAAsB,UAAU;AAWlC,QACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;AACnC,UAAO,aACH,uBACA,qBACE,sBACA;KACL,CAAC,YAAY,mBAAmB,CAGQ;YAAzC,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;GAClB,CAAA,EACF,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;GACN,CAAA,CACiB"}

package/dist/esm/components/Header/ActivitiesButton.js CHANGED Viewed

@@ -19,7 +19,7 @@ const ActivitiesButton = () => {
 			active: indicator.active || indicator.failed,
 			size: "medium",
 			onClick: () => navigate({ to: navigationRoutes.activities }),
-			disableRipple: true,
+			disableRipple: indicator.active || indicator.failed,
 			children: /* @__PURE__ */ jsx(ErrorBadge, {
 				invisible: !indicator.failed,
 				badgeContent: /* @__PURE__ */ jsx(ErrorRounded, {

package/dist/esm/components/Header/ActivitiesButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active \|\| indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n disableRipple\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active \|\| indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;GAC5D,~~eAAA~~;~~aAEA~~,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;MAAI;KAAI,CAAA;IAE/D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;KAAS;cAEtD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;MACX,CAAA;KAEH,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;OAAI;MAC/C,CAAA;KAEJ,oBAACA,SAAD,EAAe,CAAA;KACD,EAAA,CAAA;IACL,CAAA;GACQ,CAAA;EACf,CAAA"}
1	+ {"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active \|\| indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n disableRipple={indicator.active \|\| indicator.failed}\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active \|\| indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;GAC5D,eAAe,UAAU,UAAU,UAAU;aAE7C,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;MAAI;KAAI,CAAA;IAE/D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;KAAS;cAEtD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;MACX,CAAA;KAEH,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;OAAI;MAC/C,CAAA;KAEJ,oBAACA,SAAD,EAAe,CAAA;KACD,EAAA,CAAA;IACL,CAAA;GACQ,CAAA;EACf,CAAA"}

package/dist/esm/components/Header/Header.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useSetHeaderHeight } from "../../stores/header/useHeaderStore.js";
-import { ElementId, createElementId } from "../../utils/elements.js";
+import { createElementId } from "../../utils/elements.js";
 import { stickyHeaderRoutes } from "../../utils/navigationRoutes.js";
 import { useDefaultElementId } from "../../hooks/useDefaultElementId.js";
 import { Container } from "./Header.style.js";
@@ -29,7 +29,7 @@ const HeaderContainer = ({ children }) => {
 		};
 	}, [setHeaderHeight]);
 	return /* @__PURE__ */ jsx(Container, {
-		id: createElementId(ElementId.Header, elementId ?? ""),
+		id: createElementId("widget-header", elementId ?? ""),
 		sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)),
 		ref: headerRef,
 		children

package/dist/esm/components/Header/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","names":[],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useLayoutEffect, useRef } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'\nimport { createElementId, ElementId } from '../../utils/elements.js'\nimport { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'\nimport { Container } from './Header.style.js'\nimport { NavigationHeader } from './NavigationHeader.js'\nimport { WalletHeader } from './WalletHeader.js'\n\nconst HeaderContainer: FC<PropsWithChildren> = ({ children }) => {\n const { pathname } = useLocation()\n const elementId = useDefaultElementId()\n const headerRef = useRef<HTMLDivElement>(null)\n const { setHeaderHeight } = useSetHeaderHeight()\n\n useLayoutEffect(() => {\n const handleHeaderResize = () => {\n const height = headerRef.current?.getBoundingClientRect().height\n\n if (height) {\n setHeaderHeight(height)\n }\n }\n\n let resizeObserver: ResizeObserver\n\n if (headerRef.current) {\n resizeObserver = new ResizeObserver(handleHeaderResize)\n resizeObserver.observe(headerRef.current)\n }\n\n return () => {\n if (resizeObserver) {\n resizeObserver.disconnect()\n }\n }\n }, [setHeaderHeight])\n\n return (\n <Container\n id={createElementId(ElementId.Header, elementId ?? '')}\n sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}\n ref={headerRef}\n >\n {children}\n </Container>\n )\n}\n\nexport const Header: FC = () => {\n return (\n <HeaderContainer>\n <WalletHeader />\n <NavigationHeader />\n </HeaderContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAA0C,EAAE,eAAe;CAC/D,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,YAAY,qBAAqB;CACvC,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,EAAE,oBAAoB,oBAAoB;AAEhD,uBAAsB;EACpB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU,SAAS,uBAAuB,CAAC;AAE1D,OAAI,OACF,iBAAgB,OAAO;;EAI3B,IAAI;AAEJ,MAAI,UAAU,SAAS;AACrB,oBAAiB,IAAI,eAAe,mBAAmB;AACvD,kBAAe,QAAQ,UAAU,QAAQ;;AAG3C,eAAa;AACX,OAAI,eACF,gBAAe,YAAY;;IAG9B,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC,WAAD;EACE,IAAI,~~gBAAgB~~,~~UAAU~~,~~QAAQ,~~aAAa,GAAG;EACtD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,MAAM,CAAC;EACpE,KAAK;EAEJ;EACS,CAAA;;AAIhB,MAAa,eAAmB;AAC9B,QACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,kBAAD,EAAoB,CAAA,CACJ,EAAA,CAAA"}
1	+ {"version":3,"file":"Header.js","names":[],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useLayoutEffect, useRef } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'\nimport { createElementId, ElementId } from '../../utils/elements.js'\nimport { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'\nimport { Container } from './Header.style.js'\nimport { NavigationHeader } from './NavigationHeader.js'\nimport { WalletHeader } from './WalletHeader.js'\n\nconst HeaderContainer: FC<PropsWithChildren> = ({ children }) => {\n const { pathname } = useLocation()\n const elementId = useDefaultElementId()\n const headerRef = useRef<HTMLDivElement>(null)\n const { setHeaderHeight } = useSetHeaderHeight()\n\n useLayoutEffect(() => {\n const handleHeaderResize = () => {\n const height = headerRef.current?.getBoundingClientRect().height\n\n if (height) {\n setHeaderHeight(height)\n }\n }\n\n let resizeObserver: ResizeObserver\n\n if (headerRef.current) {\n resizeObserver = new ResizeObserver(handleHeaderResize)\n resizeObserver.observe(headerRef.current)\n }\n\n return () => {\n if (resizeObserver) {\n resizeObserver.disconnect()\n }\n }\n }, [setHeaderHeight])\n\n return (\n <Container\n id={createElementId(ElementId.Header, elementId ?? '')}\n sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}\n ref={headerRef}\n >\n {children}\n </Container>\n )\n}\n\nexport const Header: FC = () => {\n return (\n <HeaderContainer>\n <WalletHeader />\n <NavigationHeader />\n </HeaderContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAA0C,EAAE,eAAe;CAC/D,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,YAAY,qBAAqB;CACvC,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,EAAE,oBAAoB,oBAAoB;AAEhD,uBAAsB;EACpB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU,SAAS,uBAAuB,CAAC;AAE1D,OAAI,OACF,iBAAgB,OAAO;;EAI3B,IAAI;AAEJ,MAAI,UAAU,SAAS;AACrB,oBAAiB,IAAI,eAAe,mBAAmB;AACvD,kBAAe,QAAQ,UAAU,QAAQ;;AAG3C,eAAa;AACX,OAAI,eACF,gBAAe,YAAY;;IAG9B,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC,WAAD;EACE,IAAI,gBAAA,iBAAkC,aAAa,GAAG;EACtD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,MAAM,CAAC;EACpE,KAAK;EAEJ;EACS,CAAA;;AAIhB,MAAa,eAAmB;AAC9B,QACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,kBAAD,EAAoB,CAAA,CACJ,EAAA,CAAA"}

package/dist/esm/components/Header/NavigationHeader.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { useHeaderStore } from "../../stores/header/useHeaderStore.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { backButtonRoutes, navigationRoutes, navigationRoutesValues } from "../../utils/navigationRoutes.js";
 import { HeaderAppBar, HeaderControlsContainer } from "./Header.style.js";
 import { ActivitiesButton } from "./ActivitiesButton.js";
@@ -47,9 +47,9 @@ const NavigationHeader = () => {
 				children: title
 			}),
 			pathname === navigationRoutes.home ? /* @__PURE__ */ jsxs(HeaderControlsContainer, { children: [
-				account.isConnected && !hiddenUI?.includes(HiddenUI.History) && /* @__PURE__ */ jsx(ActivitiesButton, {}),
+				account.isConnected && !hiddenUI?.includes("history") && /* @__PURE__ */ jsx(ActivitiesButton, {}),
 				/* @__PURE__ */ jsx(SettingsButton, {}),
-				variant === "drawer" && !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "navigation" }) : null
+				variant === "drawer" && !hiddenUI?.includes("drawerCloseButton") ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "navigation" }) : null
 			] }) : element || /* @__PURE__ */ jsx(Box, { sx: {
 				width: 28,
 				height: 40

package/dist/esm/components/Header/NavigationHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport {\n backButtonRoutes,\n navigationRoutes,\n navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { SettingsButton } from './SettingsButton.js'\nimport { SplitNavigationTabs } from './SplitNavigationTabs.js'\n\nexport const NavigationHeader: React.FC = () => {\n const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =\n useWidgetConfig()\n const { account } = useAccount()\n const [element, title] = useHeaderStore((state) => [\n state.element,\n state.title,\n ])\n const { pathname } = useLocation()\n const cleanedPathname = pathname.endsWith('/')\n ? pathname.slice(0, -1)\n : pathname\n const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n const hasPath = navigationRoutesValues.includes(path)\n\n // Show tabs when split is undefined (default tabs) or an object with defaultTab\n // Hide tabs when split is a string ('bridge' or 'swap' - single mode)\n const showSplitOptions =\n subvariant === 'split' &&\n !hasPath &&\n typeof subvariantOptions?.split !== 'string'\n\n return (\n <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n {backButtonRoutes.includes(path) ? <BackButton /> : null}\n {showSplitOptions ? (\n <Box sx={{ flex: 1, marginRight: 1 }}>\n <SplitNavigationTabs />\n </Box>\n ) : (\n <Typography\n align={hasPath ? 'center' : 'left'}\n noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n sx={{\n fontSize: hasPath ? 18 : 24,\n fontWeight: '700',\n flex: 1,\n }}\n >\n {title}\n </Typography>\n )}\n {pathname === navigationRoutes.home ? (\n <HeaderControlsContainer>\n {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (\n <ActivitiesButton />\n )}\n <SettingsButton />\n {variant === 'drawer' &&\n !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n <CloseDrawerButton header=\"navigation\" />\n ) : null}\n </HeaderControlsContainer>\n ) : (\n element \|\| (\n <Box\n sx={{\n width: 28,\n height: 40,\n }}\n />\n )\n )}\n </HeaderAppBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,YAAY,UAAU,SAAS,WAAW,sBAChD,iBAAiB;CACnB,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,MACP,CAAC;CACF,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,kBAAkB,SAAS,SAAS,IAAI,GAC1C,SAAS,MAAM,GAAG,GAAG,GACrB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,IAAI,GAAG,EAAE;CAC5E,MAAM,UAAU,uBAAuB,SAAS,KAAK;CAIrD,MAAM,mBACJ,eAAe,WACf,CAAC,WACD,OAAO,mBAAmB,UAAU;AAEtC,QACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;GAAK;YAArE;GACG,iBAAiB,SAAS,KAAK,GAAG,oBAAC,YAAD,EAAc,CAAA,GAAG;GACnD,mBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;KAAG;cAClC,oBAAC,qBAAD,EAAuB,CAAA;IACnB,CAAA,GAEN,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;KACP;cAEA;IACU,CAAA;GAEd,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,~~SAAS~~,~~SAAS~~,~~QAAQ,~~IAC3D,oBAAC,kBAAD,EAAoB,CAAA;IAEtB,oBAAC,gBAAD,EAAkB,CAAA;IACjB,YAAY,YACb,CAAC,UAAU,~~SAAS~~,~~SAAS~~,~~kBAAkB,~~GAC7C,oBAAC,mBAAD,EAAmB,QAAO,cAAe,CAAA,GACvC;IACoB,EAAA,CAAA,GAE1B,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACT,EACD,CAAA;GAGO"}
1	+ {"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport {\n backButtonRoutes,\n navigationRoutes,\n navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { SettingsButton } from './SettingsButton.js'\nimport { SplitNavigationTabs } from './SplitNavigationTabs.js'\n\nexport const NavigationHeader: React.FC = () => {\n const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =\n useWidgetConfig()\n const { account } = useAccount()\n const [element, title] = useHeaderStore((state) => [\n state.element,\n state.title,\n ])\n const { pathname } = useLocation()\n const cleanedPathname = pathname.endsWith('/')\n ? pathname.slice(0, -1)\n : pathname\n const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n const hasPath = navigationRoutesValues.includes(path)\n\n // Show tabs when split is undefined (default tabs) or an object with defaultTab\n // Hide tabs when split is a string ('bridge' or 'swap' - single mode)\n const showSplitOptions =\n subvariant === 'split' &&\n !hasPath &&\n typeof subvariantOptions?.split !== 'string'\n\n return (\n <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n {backButtonRoutes.includes(path) ? <BackButton /> : null}\n {showSplitOptions ? (\n <Box sx={{ flex: 1, marginRight: 1 }}>\n <SplitNavigationTabs />\n </Box>\n ) : (\n <Typography\n align={hasPath ? 'center' : 'left'}\n noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n sx={{\n fontSize: hasPath ? 18 : 24,\n fontWeight: '700',\n flex: 1,\n }}\n >\n {title}\n </Typography>\n )}\n {pathname === navigationRoutes.home ? (\n <HeaderControlsContainer>\n {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (\n <ActivitiesButton />\n )}\n <SettingsButton />\n {variant === 'drawer' &&\n !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n <CloseDrawerButton header=\"navigation\" />\n ) : null}\n </HeaderControlsContainer>\n ) : (\n element \|\| (\n <Box\n sx={{\n width: 28,\n height: 40,\n }}\n />\n )\n )}\n </HeaderAppBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,YAAY,UAAU,SAAS,WAAW,sBAChD,iBAAiB;CACnB,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,MACP,CAAC;CACF,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,kBAAkB,SAAS,SAAS,IAAI,GAC1C,SAAS,MAAM,GAAG,GAAG,GACrB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,IAAI,GAAG,EAAE;CAC5E,MAAM,UAAU,uBAAuB,SAAS,KAAK;CAIrD,MAAM,mBACJ,eAAe,WACf,CAAC,WACD,OAAO,mBAAmB,UAAU;AAEtC,QACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;GAAK;YAArE;GACG,iBAAiB,SAAS,KAAK,GAAG,oBAAC,YAAD,EAAc,CAAA,GAAG;GACnD,mBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;KAAG;cAClC,oBAAC,qBAAD,EAAuB,CAAA;IACnB,CAAA,GAEN,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;KACP;cAEA;IACU,CAAA;GAEd,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,SAAA,UAA0B,IAC3D,oBAAC,kBAAD,EAAoB,CAAA;IAEtB,oBAAC,gBAAD,EAAkB,CAAA;IACjB,YAAY,YACb,CAAC,UAAU,SAAA,oBAAoC,GAC7C,oBAAC,mBAAD,EAAmB,QAAO,cAAe,CAAA,GACvC;IACoB,EAAA,CAAA,GAE1B,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACT,EACD,CAAA;GAGO"}

package/dist/esm/components/Header/WalletHeader.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useExternalWalletProvider } from "../../providers/WalletProvider/useExternalWalletProvider.js";
 import { useChain } from "../../hooks/useChain.js";
@@ -20,7 +20,7 @@ import Wallet from "@mui/icons-material/Wallet";
 const useInternalWalletManagement = () => {
 	const { hiddenUI } = useWidgetConfig();
 	const { useExternalWalletProvidersOnly } = useExternalWalletProvider();
-	const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu);
+	const isWalletMenuHidden = hiddenUI?.includes("walletMenu");
 	return { shouldShowWalletMenu: !useExternalWalletProvidersOnly && !isWalletMenuHidden };
 };
 const WalletHeader = () => {
@@ -37,7 +37,7 @@ const WalletMenuButton = () => {
 	const [fromChainId] = useFieldValues("fromChain");
 	const { chain: fromChain } = useChain(fromChainId);
 	const activeAccount = (fromChain ? accounts.find((account) => account.chainType === fromChain.chainType) : void 0) || account;
-	if (variant === "drawer") return /* @__PURE__ */ jsxs(DrawerWalletContainer, { children: [activeAccount.isConnected ? /* @__PURE__ */ jsx(ConnectedButton, { account: activeAccount }) : /* @__PURE__ */ jsx(ConnectButton, {}), !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "wallet" }) : null] });
+	if (variant === "drawer") return /* @__PURE__ */ jsxs(DrawerWalletContainer, { children: [activeAccount.isConnected ? /* @__PURE__ */ jsx(ConnectedButton, { account: activeAccount }) : /* @__PURE__ */ jsx(ConnectButton, {}), !hiddenUI?.includes("drawerCloseButton") ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "wallet" }) : null] });
 	return activeAccount.isConnected ? /* @__PURE__ */ jsx(ConnectedButton, { account: activeAccount }) : /* @__PURE__ */ jsx(ConnectButton, {});
 };
 const ConnectButton = () => {

package/dist/esm/components/Header/WalletHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WalletHeader.js","names":[],"sources":["../../../../src/components/Header/WalletHeader.tsx"],"sourcesContent":["import {\n getConnectorIcon,\n useAccount,\n useWalletMenu,\n} from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Avatar, Badge } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport {\n DrawerWalletContainer,\n HeaderAppBar,\n WalletAvatar,\n WalletButton,\n} from './Header.style.js'\nimport { WalletMenu } from './WalletMenu.js'\nimport { WalletMenuContainer } from './WalletMenu.style.js'\n\nconst useInternalWalletManagement = () => {\n const { hiddenUI } = useWidgetConfig()\n const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu)\n\n const shouldShowWalletMenu =\n !useExternalWalletProvidersOnly && !isWalletMenuHidden\n\n return {\n shouldShowWalletMenu,\n }\n}\n\nexport const WalletHeader: React.FC = () => {\n const { shouldShowWalletMenu } = useInternalWalletManagement()\n\n return shouldShowWalletMenu ? (\n <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>\n <WalletMenuButton />\n </HeaderAppBar>\n ) : null\n}\n\nconst WalletMenuButton: React.FC = () => {\n const { variant, hiddenUI } = useWidgetConfig()\n const { account, accounts } = useAccount()\n\n const [fromChainId] = useFieldValues('fromChain')\n const { chain: fromChain } = useChain(fromChainId)\n\n const activeAccount =\n (fromChain\n ? accounts.find((account) => account.chainType === fromChain.chainType)\n : undefined) \|\| account\n\n if (variant === 'drawer') {\n return (\n <DrawerWalletContainer>\n {activeAccount.isConnected ? (\n <ConnectedButton account={activeAccount} />\n ) : (\n <ConnectButton />\n )}\n {!hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n <CloseDrawerButton header=\"wallet\" />\n ) : null}\n </DrawerWalletContainer>\n )\n }\n return activeAccount.isConnected ? (\n <ConnectedButton account={activeAccount} />\n ) : (\n <ConnectButton />\n )\n}\n\nconst ConnectButton = () => {\n const { t } = useTranslation()\n const { walletConfig, variant } = useWidgetConfig()\n const { openWalletMenu } = useWalletMenu()\n const connect = async (event: React.MouseEvent<HTMLElement>) => {\n if (\n !walletConfig?.usePartialWalletManagement &&\n !walletConfig?.forceInternalWalletManagement &&\n walletConfig?.onConnect\n ) {\n walletConfig.onConnect()\n return\n }\n openWalletMenu()\n event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n }\n\n const walletPosition = variant === 'drawer' ? 'start' : 'end'\n\n return (\n <WalletButton\n withOffset={walletPosition === 'end'}\n endIcon={walletPosition === 'end' ? <Wallet /> : undefined}\n startIcon={\n walletPosition === 'start' ? (\n <Wallet sx={{ marginLeft: -0.25 }} />\n ) : undefined\n }\n onClick={connect}\n >\n {t('button.connectWallet')}\n </WalletButton>\n )\n}\n\nconst ConnectedButton = ({ account }: { account: Account }) => {\n const { chain } = useChain(account.chainId)\n const [anchorEl, setAnchorEl] = useState<HTMLElement \| null>(null)\n const walletAddress = shortenAddress(account.address)\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget)\n event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n }\n\n const handleClose = () => {\n setAnchorEl(null)\n }\n\n return (\n <>\n <WalletButton\n withOffset\n endIcon={<ExpandMore />}\n startIcon={\n chain?.logoURI ? (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={\n <SmallAvatar\n src={chain?.logoURI}\n alt={chain?.name}\n sx={{ width: 12, height: 12 }}\n >\n {chain?.name[0]}\n </SmallAvatar>\n }\n >\n <WalletAvatar\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n >\n {account.connector?.name[0]}\n </WalletAvatar>\n </Badge>\n ) : (\n <Avatar\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n sx={{ width: 24, height: 24 }}\n >\n {account.connector?.name[0]}\n </Avatar>\n )\n }\n onClick={handleClick}\n >\n {walletAddress}\n </WalletButton>\n <WalletMenuContainer\n anchorEl={anchorEl}\n open={Boolean(anchorEl)}\n onClose={handleClose}\n >\n <WalletMenu onClose={handleClose} />\n </WalletMenuContainer>\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BA,MAAM,oCAAoC;CACxC,MAAM,EAAE,aAAa,iBAAiB;CACtC,MAAM,EAAE,mCAAmC,2BAA2B;CAEtE,MAAM,qBAAqB,UAAU,~~SAAS~~,~~SAAS,WAAW~~;AAKlE,QAAO,EACL,sBAHA,CAAC,kCAAkC,CAAC,oBAIrC;;AAGH,MAAa,qBAA+B;CAC1C,MAAM,EAAE,yBAAyB,6BAA6B;AAE9D,QAAO,uBACL,oBAAC,cAAD;EAAc,WAAW;EAAG,IAAI,EAAE,gBAAgB,YAAY;YAC5D,oBAAC,kBAAD,EAAoB,CAAA;EACP,CAAA,GACb;;AAGN,MAAM,yBAAmC;CACvC,MAAM,EAAE,SAAS,aAAa,iBAAiB;CAC/C,MAAM,EAAE,SAAS,aAAa,YAAY;CAE1C,MAAM,CAAC,eAAe,eAAe,YAAY;CACjD,MAAM,EAAE,OAAO,cAAc,SAAS,YAAY;CAElD,MAAM,iBACH,YACG,SAAS,MAAM,YAAY,QAAQ,cAAc,UAAU,UAAU,GACrE,KAAA,MAAc;AAEpB,KAAI,YAAY,SACd,QACE,qBAAC,uBAAD,EAAA,UAAA,CACG,cAAc,cACb,oBAAC,iBAAD,EAAiB,SAAS,eAAiB,CAAA,GAE3C,oBAAC,eAAD,EAAiB,CAAA,EAElB,CAAC,UAAU,~~SAAS~~,~~SAAS~~,~~kBAAkB,~~GAC9C,oBAAC,mBAAD,EAAmB,QAAO,UAAW,CAAA,GACnC,KACkB,EAAA,CAAA;AAG5B,QAAO,cAAc,cACnB,oBAAC,iBAAD,EAAiB,SAAS,eAAiB,CAAA,GAE3C,oBAAC,eAAD,EAAiB,CAAA;;AAIrB,MAAM,sBAAsB;CAC1B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,cAAc,YAAY,iBAAiB;CACnD,MAAM,EAAE,mBAAmB,eAAe;CAC1C,MAAM,UAAU,OAAO,UAAyC;AAC9D,MACE,CAAC,cAAc,8BACf,CAAC,cAAc,iCACf,cAAc,WACd;AACA,gBAAa,WAAW;AACxB;;AAEF,kBAAgB;AAChB,QAAM,cAAc,MAAM;;CAG5B,MAAM,iBAAiB,YAAY,WAAW,UAAU;AAExD,QACE,oBAAC,cAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,mBAAmB,QAAQ,oBAAC,QAAD,EAAU,CAAA,GAAG,KAAA;EACjD,WACE,mBAAmB,UACjB,oBAAC,QAAD,EAAQ,IAAI,EAAE,YAAY,MAAO,EAAI,CAAA,GACnC,KAAA;EAEN,SAAS;YAER,EAAE,uBAAuB;EACb,CAAA;;AAInB,MAAM,mBAAmB,EAAE,cAAoC;CAC7D,MAAM,EAAE,UAAU,SAAS,QAAQ,QAAQ;CAC3C,MAAM,CAAC,UAAU,eAAe,SAA6B,KAAK;CAClE,MAAM,gBAAgB,eAAe,QAAQ,QAAQ;CAErD,MAAM,eAAe,UAAyC;AAC5D,cAAY,MAAM,cAAc;AAChC,QAAM,cAAc,MAAM;;CAG5B,MAAM,oBAAoB;AACxB,cAAY,KAAK;;AAGnB,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACE,YAAA;EACA,SAAS,oBAAC,YAAD,EAAc,CAAA;EACvB,WACE,OAAO,UACL,oBAAC,OAAD;GACE,SAAQ;GACR,cAAc;IAAE,UAAU;IAAU,YAAY;IAAS;GACzD,cACE,oBAAC,aAAD;IACE,KAAK,OAAO;IACZ,KAAK,OAAO;IACZ,IAAI;KAAE,OAAO;KAAI,QAAQ;KAAI;cAE5B,OAAO,KAAK;IACD,CAAA;aAGhB,oBAAC,cAAD;IACE,KAAK,iBAAiB,QAAQ,UAAU;IACxC,KAAK,QAAQ,WAAW;cAEvB,QAAQ,WAAW,KAAK;IACZ,CAAA;GACT,CAAA,GAER,oBAAC,QAAD;GACE,KAAK,iBAAiB,QAAQ,UAAU;GACxC,KAAK,QAAQ,WAAW;GACxB,IAAI;IAAE,OAAO;IAAI,QAAQ;IAAI;aAE5B,QAAQ,WAAW,KAAK;GAClB,CAAA;EAGb,SAAS;YAER;EACY,CAAA,EACf,oBAAC,qBAAD;EACY;EACV,MAAM,QAAQ,SAAS;EACvB,SAAS;YAET,oBAAC,YAAD,EAAY,SAAS,aAAe,CAAA;EAChB,CAAA,CACrB,EAAA,CAAA"}
1	+ {"version":3,"file":"WalletHeader.js","names":[],"sources":["../../../../src/components/Header/WalletHeader.tsx"],"sourcesContent":["import {\n getConnectorIcon,\n useAccount,\n useWalletMenu,\n} from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Avatar, Badge } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport {\n DrawerWalletContainer,\n HeaderAppBar,\n WalletAvatar,\n WalletButton,\n} from './Header.style.js'\nimport { WalletMenu } from './WalletMenu.js'\nimport { WalletMenuContainer } from './WalletMenu.style.js'\n\nconst useInternalWalletManagement = () => {\n const { hiddenUI } = useWidgetConfig()\n const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu)\n\n const shouldShowWalletMenu =\n !useExternalWalletProvidersOnly && !isWalletMenuHidden\n\n return {\n shouldShowWalletMenu,\n }\n}\n\nexport const WalletHeader: React.FC = () => {\n const { shouldShowWalletMenu } = useInternalWalletManagement()\n\n return shouldShowWalletMenu ? (\n <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>\n <WalletMenuButton />\n </HeaderAppBar>\n ) : null\n}\n\nconst WalletMenuButton: React.FC = () => {\n const { variant, hiddenUI } = useWidgetConfig()\n const { account, accounts } = useAccount()\n\n const [fromChainId] = useFieldValues('fromChain')\n const { chain: fromChain } = useChain(fromChainId)\n\n const activeAccount =\n (fromChain\n ? accounts.find((account) => account.chainType === fromChain.chainType)\n : undefined) \|\| account\n\n if (variant === 'drawer') {\n return (\n <DrawerWalletContainer>\n {activeAccount.isConnected ? (\n <ConnectedButton account={activeAccount} />\n ) : (\n <ConnectButton />\n )}\n {!hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n <CloseDrawerButton header=\"wallet\" />\n ) : null}\n </DrawerWalletContainer>\n )\n }\n return activeAccount.isConnected ? (\n <ConnectedButton account={activeAccount} />\n ) : (\n <ConnectButton />\n )\n}\n\nconst ConnectButton = () => {\n const { t } = useTranslation()\n const { walletConfig, variant } = useWidgetConfig()\n const { openWalletMenu } = useWalletMenu()\n const connect = async (event: React.MouseEvent<HTMLElement>) => {\n if (\n !walletConfig?.usePartialWalletManagement &&\n !walletConfig?.forceInternalWalletManagement &&\n walletConfig?.onConnect\n ) {\n walletConfig.onConnect()\n return\n }\n openWalletMenu()\n event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n }\n\n const walletPosition = variant === 'drawer' ? 'start' : 'end'\n\n return (\n <WalletButton\n withOffset={walletPosition === 'end'}\n endIcon={walletPosition === 'end' ? <Wallet /> : undefined}\n startIcon={\n walletPosition === 'start' ? (\n <Wallet sx={{ marginLeft: -0.25 }} />\n ) : undefined\n }\n onClick={connect}\n >\n {t('button.connectWallet')}\n </WalletButton>\n )\n}\n\nconst ConnectedButton = ({ account }: { account: Account }) => {\n const { chain } = useChain(account.chainId)\n const [anchorEl, setAnchorEl] = useState<HTMLElement \| null>(null)\n const walletAddress = shortenAddress(account.address)\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget)\n event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n }\n\n const handleClose = () => {\n setAnchorEl(null)\n }\n\n return (\n <>\n <WalletButton\n withOffset\n endIcon={<ExpandMore />}\n startIcon={\n chain?.logoURI ? (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={\n <SmallAvatar\n src={chain?.logoURI}\n alt={chain?.name}\n sx={{ width: 12, height: 12 }}\n >\n {chain?.name[0]}\n </SmallAvatar>\n }\n >\n <WalletAvatar\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n >\n {account.connector?.name[0]}\n </WalletAvatar>\n </Badge>\n ) : (\n <Avatar\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n sx={{ width: 24, height: 24 }}\n >\n {account.connector?.name[0]}\n </Avatar>\n )\n }\n onClick={handleClick}\n >\n {walletAddress}\n </WalletButton>\n <WalletMenuContainer\n anchorEl={anchorEl}\n open={Boolean(anchorEl)}\n onClose={handleClose}\n >\n <WalletMenu onClose={handleClose} />\n </WalletMenuContainer>\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BA,MAAM,oCAAoC;CACxC,MAAM,EAAE,aAAa,iBAAiB;CACtC,MAAM,EAAE,mCAAmC,2BAA2B;CAEtE,MAAM,qBAAqB,UAAU,SAAA,aAA6B;AAKlE,QAAO,EACL,sBAHA,CAAC,kCAAkC,CAAC,oBAIrC;;AAGH,MAAa,qBAA+B;CAC1C,MAAM,EAAE,yBAAyB,6BAA6B;AAE9D,QAAO,uBACL,oBAAC,cAAD;EAAc,WAAW;EAAG,IAAI,EAAE,gBAAgB,YAAY;YAC5D,oBAAC,kBAAD,EAAoB,CAAA;EACP,CAAA,GACb;;AAGN,MAAM,yBAAmC;CACvC,MAAM,EAAE,SAAS,aAAa,iBAAiB;CAC/C,MAAM,EAAE,SAAS,aAAa,YAAY;CAE1C,MAAM,CAAC,eAAe,eAAe,YAAY;CACjD,MAAM,EAAE,OAAO,cAAc,SAAS,YAAY;CAElD,MAAM,iBACH,YACG,SAAS,MAAM,YAAY,QAAQ,cAAc,UAAU,UAAU,GACrE,KAAA,MAAc;AAEpB,KAAI,YAAY,SACd,QACE,qBAAC,uBAAD,EAAA,UAAA,CACG,cAAc,cACb,oBAAC,iBAAD,EAAiB,SAAS,eAAiB,CAAA,GAE3C,oBAAC,eAAD,EAAiB,CAAA,EAElB,CAAC,UAAU,SAAA,oBAAoC,GAC9C,oBAAC,mBAAD,EAAmB,QAAO,UAAW,CAAA,GACnC,KACkB,EAAA,CAAA;AAG5B,QAAO,cAAc,cACnB,oBAAC,iBAAD,EAAiB,SAAS,eAAiB,CAAA,GAE3C,oBAAC,eAAD,EAAiB,CAAA;;AAIrB,MAAM,sBAAsB;CAC1B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,cAAc,YAAY,iBAAiB;CACnD,MAAM,EAAE,mBAAmB,eAAe;CAC1C,MAAM,UAAU,OAAO,UAAyC;AAC9D,MACE,CAAC,cAAc,8BACf,CAAC,cAAc,iCACf,cAAc,WACd;AACA,gBAAa,WAAW;AACxB;;AAEF,kBAAgB;AAChB,QAAM,cAAc,MAAM;;CAG5B,MAAM,iBAAiB,YAAY,WAAW,UAAU;AAExD,QACE,oBAAC,cAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,mBAAmB,QAAQ,oBAAC,QAAD,EAAU,CAAA,GAAG,KAAA;EACjD,WACE,mBAAmB,UACjB,oBAAC,QAAD,EAAQ,IAAI,EAAE,YAAY,MAAO,EAAI,CAAA,GACnC,KAAA;EAEN,SAAS;YAER,EAAE,uBAAuB;EACb,CAAA;;AAInB,MAAM,mBAAmB,EAAE,cAAoC;CAC7D,MAAM,EAAE,UAAU,SAAS,QAAQ,QAAQ;CAC3C,MAAM,CAAC,UAAU,eAAe,SAA6B,KAAK;CAClE,MAAM,gBAAgB,eAAe,QAAQ,QAAQ;CAErD,MAAM,eAAe,UAAyC;AAC5D,cAAY,MAAM,cAAc;AAChC,QAAM,cAAc,MAAM;;CAG5B,MAAM,oBAAoB;AACxB,cAAY,KAAK;;AAGnB,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACE,YAAA;EACA,SAAS,oBAAC,YAAD,EAAc,CAAA;EACvB,WACE,OAAO,UACL,oBAAC,OAAD;GACE,SAAQ;GACR,cAAc;IAAE,UAAU;IAAU,YAAY;IAAS;GACzD,cACE,oBAAC,aAAD;IACE,KAAK,OAAO;IACZ,KAAK,OAAO;IACZ,IAAI;KAAE,OAAO;KAAI,QAAQ;KAAI;cAE5B,OAAO,KAAK;IACD,CAAA;aAGhB,oBAAC,cAAD;IACE,KAAK,iBAAiB,QAAQ,UAAU;IACxC,KAAK,QAAQ,WAAW;cAEvB,QAAQ,WAAW,KAAK;IACZ,CAAA;GACT,CAAA,GAER,oBAAC,QAAD;GACE,KAAK,iBAAiB,QAAQ,UAAU;GACxC,KAAK,QAAQ,WAAW;GACxB,IAAI;IAAE,OAAO;IAAI,QAAQ;IAAI;aAE5B,QAAQ,WAAW,KAAK;GAClB,CAAA;EAGb,SAAS;YAER;EACY,CAAA,EACf,oBAAC,qBAAD;EACY;EACV,MAAM,QAAQ,SAAS;EACvB,SAAS;YAET,oBAAC,YAAD,EAAY,SAAS,aAAe,CAAA;EAChB,CAAA,CACrB,EAAA,CAAA"}

package/dist/esm/components/IconCircle/IconCircle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconCircle.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useTheme } from '@mui/material'\nimport {\n getStatusColor,\n IconCircleRoot,\n iconCircleSize,\n} from './IconCircle.style.js'\nimport { type StatusIcon, statusIcons } from './statusIcons.js'\n\ninterface IconCircleProps extends Omit<BoxProps, 'color'> {\n status: StatusIcon\n size?: number\n}\n\nexport const IconCircle: React.FC<IconCircleProps> = ({\n status,\n size = iconCircleSize,\n ...rest\n}) => {\n const theme = useTheme()\n const colorConfig = getStatusColor(status, theme)\n const Icon = statusIcons[status]\n\n return (\n <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>\n <Icon />\n </IconCircleRoot>\n )\n}\n"],"mappings":";;;;;AAcA,MAAa,cAAyC,EACpD,QACA,OAAA,IACA,GAAG,WACC;CAEJ,MAAM,cAAc,eAAe,QADrB,~~UAAU~~,~~CACyB~~;CACjD,MAAM,OAAO,YAAY;AAEzB,QACE,oBAAC,gBAAD;EAA6B;EAAa,YAAY;EAAM,GAAI;YAC9D,oBAAC,MAAD,EAAQ,CAAA;EACO,CAAA"}
1	+ {"version":3,"file":"IconCircle.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useTheme } from '@mui/material'\nimport {\n getStatusColor,\n IconCircleRoot,\n iconCircleSize,\n} from './IconCircle.style.js'\nimport { type StatusIcon, statusIcons } from './statusIcons.js'\n\ninterface IconCircleProps extends Omit<BoxProps, 'color'> {\n status: StatusIcon\n size?: number\n}\n\nexport const IconCircle: React.FC<IconCircleProps> = ({\n status,\n size = iconCircleSize,\n ...rest\n}) => {\n const theme = useTheme()\n const colorConfig = getStatusColor(status, theme)\n const Icon = statusIcons[status]\n\n return (\n <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>\n <Icon />\n </IconCircleRoot>\n )\n}\n"],"mappings":";;;;;AAcA,MAAa,cAAyC,EACpD,QACA,OAAA,IACA,GAAG,WACC;CAEJ,MAAM,cAAc,eAAe,QADrB,UACkC,CAAC;CACjD,MAAM,OAAO,YAAY;AAEzB,QACE,oBAAC,gBAAD;EAA6B;EAAa,YAAY;EAAM,GAAI;YAC9D,oBAAC,MAAD,EAAQ,CAAA;EACO,CAAA"}

package/dist/esm/components/IconTypography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconTypography.js","names":[],"sources":["../../../src/components/IconTypography.ts"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const IconTypography: React.FC<~~React.ComponentProps<typeof~~ ~~Box>>~~ ~~=\n~~ styled(Box)(({ theme }) => ({\n color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n lineHeight: 0,\n ...theme.applyStyles('dark', {\n color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,\n }),\n }))\n"],"mappings":";;~~AAGA~~,MAAa,~~iBACX~~,OAAO,IAAI,EAAE,EAAE,aAAa;~~CAC1B~~,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpE,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACrE,CAAC;CACH,EAAE"}
1	+ {"version":3,"file":"IconTypography.js","names":[],"sources":["../../../src/components/IconTypography.ts"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const IconTypography: React.FC<BoxProps> = styled(Box)(({ theme }) => ({\n color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n lineHeight: 0,\n ...theme.applyStyles('dark', {\n color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,\n }),\n}))\n"],"mappings":";;AAIA,MAAa,iBAAqC,OAAO,IAAI,EAAE,EAAE,aAAa;CAC5E,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpE,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACrE,CAAC;CACH,EAAE"}

package/dist/esm/components/Messages/AlertMessage.js CHANGED Viewed

@@ -6,7 +6,7 @@ const AlertMessage = ({ title, icon, children, multiline, severity = "info", ...
 	...rest,
 	children: [/* @__PURE__ */ jsxs(AlertMessageCardTitle, {
 		severity,
-		alignItems: multiline ? "start" : "center",
+		sx: { alignItems: multiline ? "start" : "center" },
 		children: [icon, title]
 	}), children]
 });

package/dist/esm/components/Messages/AlertMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AlertMessage.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type { JSX, PropsWithChildren, ReactNode } from 'react'\nimport {\n AlertMessageCard,\n AlertMessageCardTitle,\n} from './AlertMessage.style.js'\nimport type { Severity } from './types.js'\n\ninterface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {\n icon: ReactNode\n title: ReactNode\n multiline?: boolean\n severity?: Severity\n}\n\nexport const AlertMessage = ({\n title,\n icon,\n children,\n multiline,\n severity = 'info',\n ...rest\n}: AlertMessageProps): JSX.Element => (\n <AlertMessageCard severity={severity} {...rest}>\n <AlertMessageCardTitle\n severity={severity}\n ~~alignItems~~={multiline ? 'start' : 'center'}\n >\n {icon}\n {title}\n </AlertMessageCardTitle>\n {children}\n </AlertMessageCard>\n)\n"],"mappings":";;;AAeA,MAAa,gBAAgB,EAC3B,OACA,MACA,UACA,WACA,WAAW,QACX,GAAG,WAEH,qBAAC,kBAAD;CAA4B;CAAU,GAAI;WAA1C,CACE,qBAAC,uBAAD;EACY;EACV,YAAY,YAAY,UAAU;~~YAFpC~~,CAIG,MACA,MACqB;KACvB,SACgB"}
1	+ {"version":3,"file":"AlertMessage.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type { JSX, PropsWithChildren, ReactNode } from 'react'\nimport {\n AlertMessageCard,\n AlertMessageCardTitle,\n} from './AlertMessage.style.js'\nimport type { Severity } from './types.js'\n\ninterface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {\n icon: ReactNode\n title: ReactNode\n multiline?: boolean\n severity?: Severity\n}\n\nexport const AlertMessage = ({\n title,\n icon,\n children,\n multiline,\n severity = 'info',\n ...rest\n}: AlertMessageProps): JSX.Element => (\n <AlertMessageCard severity={severity} {...rest}>\n <AlertMessageCardTitle\n severity={severity}\n sx={{ alignItems: multiline ? 'start' : 'center' }}\n >\n {icon}\n {title}\n </AlertMessageCardTitle>\n {children}\n </AlertMessageCard>\n)\n"],"mappings":";;;AAeA,MAAa,gBAAgB,EAC3B,OACA,MACA,UACA,WACA,WAAW,QACX,GAAG,WAEH,qBAAC,kBAAD;CAA4B;CAAU,GAAI;WAA1C,CACE,qBAAC,uBAAD;EACY;EACV,IAAI,EAAE,YAAY,YAAY,UAAU,UAAU;YAFpD,CAIG,MACA,MACqB;KACvB,SACgB"}

package/dist/esm/components/PageEntered.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetEvents } from "../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../types/events.js";
+import "../types/events.js";
 import { useEffect } from "react";
 import { useLocation } from "@tanstack/react-router";
 //#region src/components/PageEntered.ts
@@ -7,7 +7,7 @@ function PageEntered() {
 	const location = useLocation();
 	const emitter = useWidgetEvents();
 	useEffect(() => {
-		emitter.emit(WidgetEvent.PageEntered, location.pathname);
+		emitter.emit("pageEntered", location.pathname);
 	}, [emitter, location.pathname]);
 	return null;
 }

package/dist/esm/components/PageEntered.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageEntered.js","names":[],"sources":["../../../src/components/PageEntered.ts"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport { useEffect } from 'react'\nimport { useWidgetEvents } from '../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../types/events.js'\n\nexport function PageEntered() {\n const location = useLocation()\n const emitter = useWidgetEvents()\n\n useEffect(() => {\n emitter.emit(WidgetEvent.PageEntered, location.pathname)\n }, [emitter, location.pathname])\n return null\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc;CAC5B,MAAM,WAAW,aAAa;CAC9B,MAAM,UAAU,iBAAiB;AAEjC,iBAAgB;AACd,UAAQ,~~KAAK~~,~~YAAY~~,~~aAAa,~~SAAS,SAAS;IACvD,CAAC,SAAS,SAAS,SAAS,CAAC;AAChC,QAAO"}
1	+ {"version":3,"file":"PageEntered.js","names":[],"sources":["../../../src/components/PageEntered.ts"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport { useEffect } from 'react'\nimport { useWidgetEvents } from '../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../types/events.js'\n\nexport function PageEntered() {\n const location = useLocation()\n const emitter = useWidgetEvents()\n\n useEffect(() => {\n emitter.emit(WidgetEvent.PageEntered, location.pathname)\n }, [emitter, location.pathname])\n return null\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc;CAC5B,MAAM,WAAW,aAAa;CAC9B,MAAM,UAAU,iBAAiB;AAEjC,iBAAgB;AACd,UAAQ,KAAA,eAA8B,SAAS,SAAS;IACvD,CAAC,SAAS,SAAS,SAAS,CAAC;AAChC,QAAO"}

package/dist/esm/components/ReverseTokensButton/ReverseTokensButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReverseTokensButton.js","names":[],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.tsx"],"sourcesContent":["import ArrowForward from '@mui/icons-material/ArrowForward'\nimport type { JSX } from 'react'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'\n\nexport const ReverseTokensButton = (): JSX.Element => {\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { getChainById } = useAvailableChains()\n const { tryResetToAddress } = useToAddressReset()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n\n const handleClick = () => {\n const [fromChainId, fromToken, toChainId, toToken, toAddress] =\n getFieldValues(\n 'fromChain',\n 'fromToken',\n 'toChain',\n 'toToken',\n 'toAddress'\n )\n setFieldValue('fromAmount', '', { isTouched: true })\n setFieldValue('fromChain', toChainId, { isTouched: true })\n setFieldValue('fromToken', toToken, { isTouched: true })\n setFieldValue('toChain', fromChainId, { isTouched: true })\n setFieldValue('toToken', fromToken, { isTouched: true })\n\n const autoPopulatedToAddress = autoPopulateToAddress({\n formType: 'from',\n selectedToAddress: toAddress,\n selectedChainId: toChainId,\n selectedOppositeChainId: fromChainId,\n selectedOppositeTokenAddress: fromToken,\n })\n\n // Returning early as a compatible connected wallet was found, and toAddress has been populated\n if (autoPopulatedToAddress) {\n return\n }\n\n // Auto-population applies in certain scenarios, but otherwise,\n // we attempt to reset `toAddress` when bridging across ecosystems\n // fromChainId becomes toChainId after using reverse\n const toChain = getChainById(fromChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n }\n return (\n <ReverseContainer>\n <IconCard onClick={handleClick}>\n <ArrowForward fontSize=\"inherit\" />\n </IconCard>\n </ReverseContainer>\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,4BAAyC;CACpD,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,EAAE,iBAAiB,oBAAoB;CAC7C,MAAM,EAAE,sBAAsB,mBAAmB;CACjD,MAAM,wBAAwB,0BAA0B;CAExD,MAAM,oBAAoB;EACxB,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,aACjD,eACE,aACA,aACA,WACA,WACA,YACD;AACH,gBAAc,cAAc,IAAI,EAAE,WAAW,MAAM,CAAC;AACpD,gBAAc,aAAa,WAAW,EAAE,WAAW,MAAM,CAAC;AAC1D,gBAAc,aAAa,SAAS,EAAE,WAAW,MAAM,CAAC;AACxD,gBAAc,WAAW,aAAa,EAAE,WAAW,MAAM,CAAC;AAC1D,gBAAc,WAAW,WAAW,EAAE,WAAW,MAAM,CAAC;AAWxD,MAT+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;GAC/B,~~CAAC~~,~~CAIA~~;EAMF,MAAM,UAAU,aAAa,YAAY;AACzC,MAAI,QACF,mBAAkB,QAAQ;;AAG9B,QACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,UAAD;EAAU,SAAS;YACjB,oBAAC,cAAD,EAAc,UAAS,WAAY,CAAA;EAC1B,CAAA,EACM,CAAA"}
1	+ {"version":3,"file":"ReverseTokensButton.js","names":[],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.tsx"],"sourcesContent":["import ArrowForward from '@mui/icons-material/ArrowForward'\nimport type { JSX } from 'react'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'\n\nexport const ReverseTokensButton = (): JSX.Element => {\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { getChainById } = useAvailableChains()\n const { tryResetToAddress } = useToAddressReset()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n\n const handleClick = () => {\n const [fromChainId, fromToken, toChainId, toToken, toAddress] =\n getFieldValues(\n 'fromChain',\n 'fromToken',\n 'toChain',\n 'toToken',\n 'toAddress'\n )\n setFieldValue('fromAmount', '', { isTouched: true })\n setFieldValue('fromChain', toChainId, { isTouched: true })\n setFieldValue('fromToken', toToken, { isTouched: true })\n setFieldValue('toChain', fromChainId, { isTouched: true })\n setFieldValue('toToken', fromToken, { isTouched: true })\n\n const autoPopulatedToAddress = autoPopulateToAddress({\n formType: 'from',\n selectedToAddress: toAddress,\n selectedChainId: toChainId,\n selectedOppositeChainId: fromChainId,\n selectedOppositeTokenAddress: fromToken,\n })\n\n // Returning early as a compatible connected wallet was found, and toAddress has been populated\n if (autoPopulatedToAddress) {\n return\n }\n\n // Auto-population applies in certain scenarios, but otherwise,\n // we attempt to reset `toAddress` when bridging across ecosystems\n // fromChainId becomes toChainId after using reverse\n const toChain = getChainById(fromChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n }\n return (\n <ReverseContainer>\n <IconCard onClick={handleClick}>\n <ArrowForward fontSize=\"inherit\" />\n </IconCard>\n </ReverseContainer>\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,4BAAyC;CACpD,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,EAAE,iBAAiB,oBAAoB;CAC7C,MAAM,EAAE,sBAAsB,mBAAmB;CACjD,MAAM,wBAAwB,0BAA0B;CAExD,MAAM,oBAAoB;EACxB,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,aACjD,eACE,aACA,aACA,WACA,WACA,YACD;AACH,gBAAc,cAAc,IAAI,EAAE,WAAW,MAAM,CAAC;AACpD,gBAAc,aAAa,WAAW,EAAE,WAAW,MAAM,CAAC;AAC1D,gBAAc,aAAa,SAAS,EAAE,WAAW,MAAM,CAAC;AACxD,gBAAc,WAAW,aAAa,EAAE,WAAW,MAAM,CAAC;AAC1D,gBAAc,WAAW,WAAW,EAAE,WAAW,MAAM,CAAC;AAWxD,MAT+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;GAC/B,CAGyB,CACxB;EAMF,MAAM,UAAU,aAAa,YAAY;AACzC,MAAI,QACF,mBAAkB,QAAQ;;AAG9B,QACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,UAAD;EAAU,SAAS;YACjB,oBAAC,cAAD,EAAc,UAAS,WAAY,CAAA;EAC1B,CAAA,EACM,CAAA"}

package/dist/esm/components/RouteCard/RouteCard.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { Card as Card$1 } from "../Card/Card.js";
 import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
 import { CardLabel, CardLabelTypography } from "../Card/CardLabel.js";
@@ -20,7 +20,7 @@ const RouteCard = ({ route, active, variant = "default", expanded: defaultExpand
 		...route.toToken,
 		amount: BigInt(route.toAmount)
 	};
-	const impactToken = subvariant !== "custom" && !hiddenUI?.includes(HiddenUI.RouteCardPriceImpact) ? {
+	const impactToken = subvariant !== "custom" && !hiddenUI?.includes("routeCardPriceImpact") ? {
 		...route.fromToken,
 		amount: BigInt(route.fromAmount)
 	} : void 0;

package/dist/esm/components/RouteCard/RouteCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RouteCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCard.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport { Box, Tooltip } from '@mui/material'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI, type RouteLabel } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\nimport { getMatchingLabels } from './getMatchingLabels.js'\nimport { RouteToken } from './RouteToken.js'\nimport type { RouteCardProps } from './types.js'\n\nexport const RouteCard: React.FC<\n RouteCardProps & Omit<CardProps, 'variant'>\n> = ({\n route,\n active,\n variant = 'default',\n expanded: defaultExpanded,\n ...other\n}) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions, routeLabels, hiddenUI } =\n useWidgetConfig()\n\n const token: TokenAmount =\n subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : { ...route.toToken, amount: BigInt(route.toAmount) }\n const impactToken: TokenAmount \| undefined =\n subvariant !== 'custom' &&\n !hiddenUI?.includes(HiddenUI.RouteCardPriceImpact)\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : undefined\n\n const [tags, customLabels]: [string[], RouteLabel[]] = useMemo(() => {\n const mainTag = route.tags?.find(\n (tag) => tag === 'CHEAPEST' \|\| tag === 'FASTEST'\n )\n const tags: string[] = mainTag ? [mainTag] : []\n const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route)\n if (!combinedFeesUSD) {\n tags.push('gasless')\n }\n if (route.steps.length > 1) {\n tags.push('multistep')\n }\n const customLabels = getMatchingLabels(route, routeLabels)\n return [tags, customLabels]\n }, [route.tags, route, routeLabels])\n\n const cardContent = (\n <Box\n sx={{\n flex: 1,\n }}\n >\n {subvariant !== 'refuel' && (tags.length \|\| customLabels.length) ? (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n mb: 2,\n gap: 1,\n flexWrap: 'wrap',\n }}\n >\n {tags?.map((tag) => {\n const formattedTag = tag.toLowerCase()\n const tooltipKey = `tooltip.${formattedTag}` as any\n const tooltipText = t(tooltipKey)\n const hasTooltip = tooltipText !== tooltipKey\n\n const cardLabel = (\n <CardLabel\n variant={\n tag === 'gasless'\n ? 'success'\n : active\n ? 'secondary'\n : undefined\n }\n key={tag}\n >\n <CardLabelTypography>\n {t(`main.tags.${formattedTag}` as any)}\n </CardLabelTypography>\n </CardLabel>\n )\n\n return hasTooltip ? (\n <Tooltip key={tag} title={tooltipText} arrow placement=\"top\">\n {cardLabel}\n </Tooltip>\n ) : (\n cardLabel\n )\n })}\n {customLabels.map((label, index) => (\n <CardLabel key={index} sx={label.sx}>\n <CardLabelTypography>{label.text}</CardLabelTypography>\n </CardLabel>\n ))}\n </Box>\n ) : null}\n <RouteToken\n route={route}\n token={token}\n impactToken={impactToken}\n defaultExpanded={defaultExpanded}\n showEssentials\n />\n </Box>\n )\n\n return subvariant === 'refuel' \|\| variant === 'cardless' ? (\n cardContent\n ) : (\n <Card\n type={active ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n indented\n {...other}\n >\n {cardContent}\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,aAER,EACH,OACA,QACA,UAAU,WACV,UAAU,iBACV,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,mBAAmB,aAAa,aAClD,iBAAiB;CAEnB,MAAM,QACJ,eAAe,YAAY,mBAAmB,WAAW,YACrD;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD;EAAE,GAAG,MAAM;EAAS,QAAQ,OAAO,MAAM,SAAS;EAAE;CAC1D,MAAM,cACJ,eAAe,YACf,CAAC,UAAU,~~SAAS~~,~~SAAS~~,~~qBAAqB,~~GAC9C;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD,KAAA;CAEN,MAAM,CAAC,MAAM,gBAA0C,cAAc;EACnE,MAAM,UAAU,MAAM,MAAM,MACzB,QAAQ,QAAQ,cAAc,QAAQ,UACxC;EACD,MAAM,OAAiB,UAAU,CAAC,QAAQ,GAAG,EAAE;EAC/C,MAAM,EAAE,oBAAoB,gCAAgC,MAAM;AAClE,MAAI,CAAC,gBACH,MAAK,KAAK,UAAU;AAEtB,MAAI,MAAM,MAAM,SAAS,EACvB,MAAK,KAAK,YAAY;AAGxB,SAAO,CAAC,MADa,kBAAkB,OAAO,~~YAAY~~,~~CAC/B~~;IAC1B;EAAC,MAAM;EAAM;EAAO;EAAY,CAAC;CAEpC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,GACP;YAHH,CAKG,eAAe,aAAa,KAAK,UAAU,aAAa,UACvD,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,IAAI;IACJ,KAAK;IACL,UAAU;IACX;aAPH,CASG,MAAM,KAAK,QAAQ;IAClB,MAAM,eAAe,IAAI,aAAa;IACtC,MAAM,aAAa,WAAW;IAC9B,MAAM,cAAc,EAAE,WAAW;IACjC,MAAM,aAAa,gBAAgB;IAEnC,MAAM,YACJ,oBAAC,WAAD;KACE,SACE,QAAQ,YACJ,YACA,SACE,cACA,KAAA;eAIR,oBAAC,qBAAD,EAAA,UACG,EAAE,aAAa,eAAsB,EAClB,CAAA;KACZ,EALL,IAKK;AAGd,WAAO,aACL,oBAAC,SAAD;KAAmB,OAAO;KAAa,OAAA;KAAM,WAAU;eACpD;KACO,EAFI,IAEJ,GAEV;KAEF,EACD,aAAa,KAAK,OAAO,UACxB,oBAAC,WAAD;IAAuB,IAAI,MAAM;cAC/B,oBAAC,qBAAD,EAAA,UAAsB,MAAM,MAA2B,CAAA;IAC7C,EAFI,MAEJ,CACZ,CACE;OACJ,MACJ,oBAAC,YAAD;GACS;GACA;GACM;GACI;GACjB,gBAAA;GACA,CAAA,CACE;;AAGR,QAAO,eAAe,YAAY,YAAY,aAC5C,cAEA,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACf,UAAA;EACA,GAAI;YAEH;EACI,CAAA"}
1	+ {"version":3,"file":"RouteCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCard.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport { Box, Tooltip } from '@mui/material'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI, type RouteLabel } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\nimport { getMatchingLabels } from './getMatchingLabels.js'\nimport { RouteToken } from './RouteToken.js'\nimport type { RouteCardProps } from './types.js'\n\nexport const RouteCard: React.FC<\n RouteCardProps & Omit<CardProps, 'variant'>\n> = ({\n route,\n active,\n variant = 'default',\n expanded: defaultExpanded,\n ...other\n}) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions, routeLabels, hiddenUI } =\n useWidgetConfig()\n\n const token: TokenAmount =\n subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : { ...route.toToken, amount: BigInt(route.toAmount) }\n const impactToken: TokenAmount \| undefined =\n subvariant !== 'custom' &&\n !hiddenUI?.includes(HiddenUI.RouteCardPriceImpact)\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : undefined\n\n const [tags, customLabels]: [string[], RouteLabel[]] = useMemo(() => {\n const mainTag = route.tags?.find(\n (tag) => tag === 'CHEAPEST' \|\| tag === 'FASTEST'\n )\n const tags: string[] = mainTag ? [mainTag] : []\n const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route)\n if (!combinedFeesUSD) {\n tags.push('gasless')\n }\n if (route.steps.length > 1) {\n tags.push('multistep')\n }\n const customLabels = getMatchingLabels(route, routeLabels)\n return [tags, customLabels]\n }, [route.tags, route, routeLabels])\n\n const cardContent = (\n <Box\n sx={{\n flex: 1,\n }}\n >\n {subvariant !== 'refuel' && (tags.length \|\| customLabels.length) ? (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n mb: 2,\n gap: 1,\n flexWrap: 'wrap',\n }}\n >\n {tags?.map((tag) => {\n const formattedTag = tag.toLowerCase()\n const tooltipKey = `tooltip.${formattedTag}` as any\n const tooltipText = t(tooltipKey)\n const hasTooltip = tooltipText !== tooltipKey\n\n const cardLabel = (\n <CardLabel\n variant={\n tag === 'gasless'\n ? 'success'\n : active\n ? 'secondary'\n : undefined\n }\n key={tag}\n >\n <CardLabelTypography>\n {t(`main.tags.${formattedTag}` as any)}\n </CardLabelTypography>\n </CardLabel>\n )\n\n return hasTooltip ? (\n <Tooltip key={tag} title={tooltipText} arrow placement=\"top\">\n {cardLabel}\n </Tooltip>\n ) : (\n cardLabel\n )\n })}\n {customLabels.map((label, index) => (\n <CardLabel key={index} sx={label.sx}>\n <CardLabelTypography>{label.text}</CardLabelTypography>\n </CardLabel>\n ))}\n </Box>\n ) : null}\n <RouteToken\n route={route}\n token={token}\n impactToken={impactToken}\n defaultExpanded={defaultExpanded}\n showEssentials\n />\n </Box>\n )\n\n return subvariant === 'refuel' \|\| variant === 'cardless' ? (\n cardContent\n ) : (\n <Card\n type={active ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n indented\n {...other}\n >\n {cardContent}\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,aAER,EACH,OACA,QACA,UAAU,WACV,UAAU,iBACV,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,YAAY,mBAAmB,aAAa,aAClD,iBAAiB;CAEnB,MAAM,QACJ,eAAe,YAAY,mBAAmB,WAAW,YACrD;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD;EAAE,GAAG,MAAM;EAAS,QAAQ,OAAO,MAAM,SAAS;EAAE;CAC1D,MAAM,cACJ,eAAe,YACf,CAAC,UAAU,SAAA,uBAAuC,GAC9C;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,WAAW;EAAE,GACxD,KAAA;CAEN,MAAM,CAAC,MAAM,gBAA0C,cAAc;EACnE,MAAM,UAAU,MAAM,MAAM,MACzB,QAAQ,QAAQ,cAAc,QAAQ,UACxC;EACD,MAAM,OAAiB,UAAU,CAAC,QAAQ,GAAG,EAAE;EAC/C,MAAM,EAAE,oBAAoB,gCAAgC,MAAM;AAClE,MAAI,CAAC,gBACH,MAAK,KAAK,UAAU;AAEtB,MAAI,MAAM,MAAM,SAAS,EACvB,MAAK,KAAK,YAAY;AAGxB,SAAO,CAAC,MADa,kBAAkB,OAAO,YACpB,CAAC;IAC1B;EAAC,MAAM;EAAM;EAAO;EAAY,CAAC;CAEpC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,GACP;YAHH,CAKG,eAAe,aAAa,KAAK,UAAU,aAAa,UACvD,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,IAAI;IACJ,KAAK;IACL,UAAU;IACX;aAPH,CASG,MAAM,KAAK,QAAQ;IAClB,MAAM,eAAe,IAAI,aAAa;IACtC,MAAM,aAAa,WAAW;IAC9B,MAAM,cAAc,EAAE,WAAW;IACjC,MAAM,aAAa,gBAAgB;IAEnC,MAAM,YACJ,oBAAC,WAAD;KACE,SACE,QAAQ,YACJ,YACA,SACE,cACA,KAAA;eAIR,oBAAC,qBAAD,EAAA,UACG,EAAE,aAAa,eAAsB,EAClB,CAAA;KACZ,EALL,IAKK;AAGd,WAAO,aACL,oBAAC,SAAD;KAAmB,OAAO;KAAa,OAAA;KAAM,WAAU;eACpD;KACO,EAFI,IAEJ,GAEV;KAEF,EACD,aAAa,KAAK,OAAO,UACxB,oBAAC,WAAD;IAAuB,IAAI,MAAM;cAC/B,oBAAC,qBAAD,EAAA,UAAsB,MAAM,MAA2B,CAAA;IAC7C,EAFI,MAEJ,CACZ,CACE;OACJ,MACJ,oBAAC,YAAD;GACS;GACA;GACM;GACI;GACjB,gBAAA;GACA,CAAA,CACE;;AAGR,QAAO,eAAe,YAAY,YAAY,aAC5C,cAEA,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACf,UAAA;EACA,GAAI;YAEH;EACI,CAAA"}

package/dist/esm/components/RouteCard/RouteCardEssentials.js CHANGED Viewed

@@ -37,8 +37,11 @@ const RouteCardEssentials = ({ route }) => {
 						alignItems: "center"
 					},
 					children: [/* @__PURE__ */ jsx(IconTypography, {
-						mr: .5,
-						fontSize: 16,
+						component: "span",
+						sx: {
+							mr: .5,
+							fontSize: 16
+						},
 						children: /* @__PURE__ */ jsx(LocalGasStationRounded, { fontSize: "inherit" })
 					}), /* @__PURE__ */ jsx(Typography, {
 						"data-value": combinedFeesUSD,
@@ -60,8 +63,11 @@ const RouteCardEssentials = ({ route }) => {
 						alignItems: "center"
 					},
 					children: [/* @__PURE__ */ jsx(IconTypography, {
-						mr: .5,
-						fontSize: 16,
+						component: "span",
+						sx: {
+							mr: .5,
+							fontSize: 16
+						},
 						children: /* @__PURE__ */ jsx(AccessTimeFilled, { fontSize: "inherit" })
 					}), /* @__PURE__ */ jsx(Typography, {
 						sx: {

package/dist/esm/components/RouteCard/RouteCardEssentials.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RouteCardEssentials.js","names":[],"sources":["../../../../src/components/RouteCard/RouteCardEssentials.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { IconTypography } from '../IconTypography.js'\nimport { TokenRate } from '../TokenRate/TokenRate.js'\nimport type { RouteCardEssentialsProps } from './types.js'\n\nexport const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({\n route,\n}) => {\n const { t, i18n } = useTranslation()\n const executionTimeSeconds = Math.floor(\n route.steps.reduce(\n (duration, step) => duration + step.estimate.executionDuration,\n 0\n )\n )\n\n const { gasCosts, feeCosts, combinedFeesUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n return (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n flex: 1,\n mt: 2,\n }}\n >\n <TokenRate route={route} />\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <FeeBreakdownTooltip\n gasCosts={gasCosts}\n feeCosts={feeCosts}\n gasless={!combinedFeesUSD}\n >\n <Box\n sx={{\n display: 'flex',\n mr: 1.5,\n alignItems: 'center',\n }}\n >\n <IconTypography mr={0.5} fontSize={16}>\n <LocalGasStationRounded fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n data-value={combinedFeesUSD}\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {!combinedFeesUSD\n ? t('main.fees.free')\n : t('format.currency', {\n value: combinedFeesUSD,\n })}\n </Typography>\n </Box>\n </FeeBreakdownTooltip>\n <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <IconTypography mr={0.5} fontSize={16}>\n <AccessTimeFilled fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {formatDuration(executionTimeSeconds, i18n.language)}\n </Typography>\n </Box>\n </Tooltip>\n </Box>\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAA2D,EACtE,YACI;CACJ,MAAM,EAAE,GAAG,SAAS,gBAAgB;CACpC,MAAM,uBAAuB,KAAK,MAChC,MAAM,MAAM,QACT,UAAU,SAAS,WAAW,KAAK,SAAS,mBAC7C,EACD,CACF;CAED,MAAM,EAAE,UAAU,UAAU,oBAC1B,gCAAgC,MAAM;AACxC,QACE,qBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,MAAM;GACN,IAAI;GACL;YAPH,CASE,oBAAC,WAAD,EAAkB,OAAS,CAAA,EAC3B,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACb;aAJH,CAME,oBAAC,qBAAD;IACY;IACA;IACV,SAAS,CAAC;cAEV,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,IAAI;MACJ,YAAY;MACb;eALH,CAOE,oBAAC,gBAAD;MAAgB,IAAI;~~MAAK~~,UAAU;~~gBACjC~~,oBAAC,wBAAD,EAAwB,UAAS,WAAY,CAAA;MAC9B,CAAA,EACjB,oBAAC,YAAD;MACE,cAAY;MACZ,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;OACb;gBAEA,CAAC,kBACE,EAAE,iBAAiB,GACnB,EAAE,mBAAmB,EACnB,OAAO,iBACR,CAAC;MACK,CAAA,CACT;;IACc,CAAA,EACtB,oBAAC,SAAD;IAAS,OAAO,EAAE,wBAAwB;IAAE,IAAI,EAAE,QAAQ,QAAQ;cAChE,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,YAAY;MACb;eAJH,CAME,oBAAC,gBAAD;MAAgB,IAAI;~~MAAK~~,UAAU;~~gBACjC~~,oBAAC,kBAAD,EAAkB,UAAS,WAAY,CAAA;MACxB,CAAA,EACjB,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;OACb;gBAEA,eAAe,sBAAsB,KAAK,SAAS;MACzC,CAAA,CACT;;IACE,CAAA,CACN;KACF"}
1	+ {"version":3,"file":"RouteCardEssentials.js","names":[],"sources":["../../../../src/components/RouteCard/RouteCardEssentials.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { IconTypography } from '../IconTypography.js'\nimport { TokenRate } from '../TokenRate/TokenRate.js'\nimport type { RouteCardEssentialsProps } from './types.js'\n\nexport const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({\n route,\n}) => {\n const { t, i18n } = useTranslation()\n const executionTimeSeconds = Math.floor(\n route.steps.reduce(\n (duration, step) => duration + step.estimate.executionDuration,\n 0\n )\n )\n\n const { gasCosts, feeCosts, combinedFeesUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n return (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n flex: 1,\n mt: 2,\n }}\n >\n <TokenRate route={route} />\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <FeeBreakdownTooltip\n gasCosts={gasCosts}\n feeCosts={feeCosts}\n gasless={!combinedFeesUSD}\n >\n <Box\n sx={{\n display: 'flex',\n mr: 1.5,\n alignItems: 'center',\n }}\n >\n <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n <LocalGasStationRounded fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n data-value={combinedFeesUSD}\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {!combinedFeesUSD\n ? t('main.fees.free')\n : t('format.currency', {\n value: combinedFeesUSD,\n })}\n </Typography>\n </Box>\n </FeeBreakdownTooltip>\n <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n <AccessTimeFilled fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {formatDuration(executionTimeSeconds, i18n.language)}\n </Typography>\n </Box>\n </Tooltip>\n </Box>\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAA2D,EACtE,YACI;CACJ,MAAM,EAAE,GAAG,SAAS,gBAAgB;CACpC,MAAM,uBAAuB,KAAK,MAChC,MAAM,MAAM,QACT,UAAU,SAAS,WAAW,KAAK,SAAS,mBAC7C,EACD,CACF;CAED,MAAM,EAAE,UAAU,UAAU,oBAC1B,gCAAgC,MAAM;AACxC,QACE,qBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,MAAM;GACN,IAAI;GACL;YAPH,CASE,oBAAC,WAAD,EAAkB,OAAS,CAAA,EAC3B,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACb;aAJH,CAME,oBAAC,qBAAD;IACY;IACA;IACV,SAAS,CAAC;cAEV,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,IAAI;MACJ,YAAY;MACb;eALH,CAOE,oBAAC,gBAAD;MAAgB,WAAU;MAAO,IAAI;OAAE,IAAI;OAAK,UAAU;OAAI;gBAC5D,oBAAC,wBAAD,EAAwB,UAAS,WAAY,CAAA;MAC9B,CAAA,EACjB,oBAAC,YAAD;MACE,cAAY;MACZ,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;OACb;gBAEA,CAAC,kBACE,EAAE,iBAAiB,GACnB,EAAE,mBAAmB,EACnB,OAAO,iBACR,CAAC;MACK,CAAA,CACT;;IACc,CAAA,EACtB,oBAAC,SAAD;IAAS,OAAO,EAAE,wBAAwB;IAAE,IAAI,EAAE,QAAQ,QAAQ;cAChE,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,YAAY;MACb;eAJH,CAME,oBAAC,gBAAD;MAAgB,WAAU;MAAO,IAAI;OAAE,IAAI;OAAK,UAAU;OAAI;gBAC5D,oBAAC,kBAAD,EAAkB,UAAS,WAAY,CAAA;MACxB,CAAA,EACjB,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;OACb;gBAEA,eAAe,sBAAsB,KAAK,SAAS;MACzC,CAAA,CACT;;IACE,CAAA,CACN;KACF"}

package/dist/esm/components/RouteCard/RouteToken.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { CardIconButton } from "../Card/CardIconButton.js";
 import { Token } from "../Token/Token.js";
 import { RouteCardEssentials } from "./RouteCardEssentials.js";
@@ -24,7 +24,7 @@ const RouteToken = ({ route, token, impactToken, defaultExpanded, showEssentials
 			impactToken,
 			step: route.steps[0],
 			stepVisible: !cardExpanded,
-			disableDescription: hiddenUI?.includes(HiddenUI.RouteTokenDescription)
+			disableDescription: hiddenUI?.includes("routeTokenDescription")
 		}), !defaultExpanded ? /* @__PURE__ */ jsx(CardIconButton, {
 			onClick: handleExpand,
 			size: "small",

package/dist/esm/components/RouteCard/RouteToken.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RouteToken.js","names":[],"sources":["../../../../src/components/RouteCard/RouteToken.tsx"],"sourcesContent":["import type { RouteExtended, TokenAmount } from '@lifi/sdk'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport { Box, Collapse } from '@mui/material'\nimport type { JSX } from 'react'\nimport { type MouseEventHandler, useState } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteCardEssentials } from './RouteCardEssentials.js'\nimport { RouteDetails } from './RouteDetails.js'\nimport { TokenContainer } from './RouteToken.style.js'\n\ninterface RouteTokenProps {\n route: RouteExtended\n token: TokenAmount\n impactToken?: TokenAmount\n defaultExpanded?: boolean\n showEssentials?: boolean\n}\n\nexport const RouteToken = ({\n route,\n token,\n impactToken,\n defaultExpanded,\n showEssentials,\n}: RouteTokenProps): JSX.Element => {\n const { hiddenUI } = useWidgetConfig()\n\n const [cardExpanded, setCardExpanded] = useState(defaultExpanded)\n\n const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n setCardExpanded((expanded) => !expanded)\n }\n\n return (\n <Box>\n <TokenContainer>\n <Token\n token={token}\n impactToken={impactToken}\n step={route.steps[0]}\n stepVisible={!cardExpanded}\n disableDescription={hiddenUI?.includes(\n HiddenUI.RouteTokenDescription\n )}\n />\n {!defaultExpanded ? (\n <CardIconButton onClick={handleExpand} size=\"small\">\n {cardExpanded ? (\n <ExpandLess fontSize=\"inherit\" />\n ) : (\n <ExpandMore fontSize=\"inherit\" />\n )}\n </CardIconButton>\n ) : null}\n </TokenContainer>\n <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n <RouteDetails route={route} />\n </Collapse>\n {showEssentials ? (\n <Collapse timeout={225} in={!cardExpanded}>\n <RouteCardEssentials route={route} />\n </Collapse>\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,cAAc,EACzB,OACA,OACA,aACA,iBACA,qBACkC;CAClC,MAAM,EAAE,aAAa,iBAAiB;CAEtC,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB;CAEjE,MAAM,gBAAsD,MAAM;AAChE,IAAE,iBAAiB;AACnB,mBAAiB,aAAa,CAAC,SAAS;;AAG1C,QACE,qBAAC,KAAD,EAAA,UAAA;EACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GACS;GACM;GACb,MAAM,MAAM,MAAM;GAClB,aAAa,CAAC;GACd,oBAAoB,UAAU,~~SAC5B~~,~~SAAS,sBACV~~;GACD,CAAA,EACD,CAAC,kBACA,oBAAC,gBAAD;GAAgB,SAAS;GAAc,MAAK;aACzC,eACC,oBAAC,YAAD,EAAY,UAAS,WAAY,CAAA,GAEjC,oBAAC,YAAD,EAAY,UAAS,WAAY,CAAA;GAEpB,CAAA,GACf,KACW,EAAA,CAAA;EACjB,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI;GAAc,cAAA;GAAa,eAAA;aACrD,oBAAC,cAAD,EAAqB,OAAS,CAAA;GACrB,CAAA;EACV,iBACC,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI,CAAC;aAC3B,oBAAC,qBAAD,EAA4B,OAAS,CAAA;GAC5B,CAAA,GACT;EACA,EAAA,CAAA"}
1	+ {"version":3,"file":"RouteToken.js","names":[],"sources":["../../../../src/components/RouteCard/RouteToken.tsx"],"sourcesContent":["import type { RouteExtended, TokenAmount } from '@lifi/sdk'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport { Box, Collapse } from '@mui/material'\nimport type { JSX } from 'react'\nimport { type MouseEventHandler, useState } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteCardEssentials } from './RouteCardEssentials.js'\nimport { RouteDetails } from './RouteDetails.js'\nimport { TokenContainer } from './RouteToken.style.js'\n\ninterface RouteTokenProps {\n route: RouteExtended\n token: TokenAmount\n impactToken?: TokenAmount\n defaultExpanded?: boolean\n showEssentials?: boolean\n}\n\nexport const RouteToken = ({\n route,\n token,\n impactToken,\n defaultExpanded,\n showEssentials,\n}: RouteTokenProps): JSX.Element => {\n const { hiddenUI } = useWidgetConfig()\n\n const [cardExpanded, setCardExpanded] = useState(defaultExpanded)\n\n const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n setCardExpanded((expanded) => !expanded)\n }\n\n return (\n <Box>\n <TokenContainer>\n <Token\n token={token}\n impactToken={impactToken}\n step={route.steps[0]}\n stepVisible={!cardExpanded}\n disableDescription={hiddenUI?.includes(\n HiddenUI.RouteTokenDescription\n )}\n />\n {!defaultExpanded ? (\n <CardIconButton onClick={handleExpand} size=\"small\">\n {cardExpanded ? (\n <ExpandLess fontSize=\"inherit\" />\n ) : (\n <ExpandMore fontSize=\"inherit\" />\n )}\n </CardIconButton>\n ) : null}\n </TokenContainer>\n <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n <RouteDetails route={route} />\n </Collapse>\n {showEssentials ? (\n <Collapse timeout={225} in={!cardExpanded}>\n <RouteCardEssentials route={route} />\n </Collapse>\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,cAAc,EACzB,OACA,OACA,aACA,iBACA,qBACkC;CAClC,MAAM,EAAE,aAAa,iBAAiB;CAEtC,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB;CAEjE,MAAM,gBAAsD,MAAM;AAChE,IAAE,iBAAiB;AACnB,mBAAiB,aAAa,CAAC,SAAS;;AAG1C,QACE,qBAAC,KAAD,EAAA,UAAA;EACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GACS;GACM;GACb,MAAM,MAAM,MAAM;GAClB,aAAa,CAAC;GACd,oBAAoB,UAAU,SAAA,wBAE7B;GACD,CAAA,EACD,CAAC,kBACA,oBAAC,gBAAD;GAAgB,SAAS;GAAc,MAAK;aACzC,eACC,oBAAC,YAAD,EAAY,UAAS,WAAY,CAAA,GAEjC,oBAAC,YAAD,EAAY,UAAS,WAAY,CAAA;GAEpB,CAAA,GACf,KACW,EAAA,CAAA;EACjB,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI;GAAc,cAAA;GAAa,eAAA;aACrD,oBAAC,cAAD,EAAqB,OAAS,CAAA;GACrB,CAAA;EACV,iBACC,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI,CAAC;aAC3B,oBAAC,qBAAD,EAA4B,OAAS,CAAA;GAC5B,CAAA,GACT;EACA,EAAA,CAAA"}

package/dist/esm/components/Routes/RoutesExpanded.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { ExpansionTransition } from "../Expansion/ExpansionTransition.js";
 import { useRoutes } from "../../hooks/useRoutes.js";
@@ -32,7 +32,7 @@ const RoutesExpanded = memo(function RoutesExpanded({ canOpen, setOpenExpansion
 			to: navigationRoutes.transactionExecution,
 			search: { routeId: route.id }
 		});
-		emitter.emit(WidgetEvent.RouteSelected, {
+		emitter.emit("routeSelected", {
 			route,
 			routes
 		});
@@ -45,7 +45,7 @@ const RoutesExpanded = memo(function RoutesExpanded({ canOpen, setOpenExpansion
 		setOpenExpansion(expanded);
 	}, [expanded, setOpenExpansion]);
 	useEffect(() => {
-		emitter.emit(WidgetEvent.WidgetExpanded, expanded);
+		emitter.emit("widgetExpanded", expanded);
 	}, [emitter, expanded]);
 	return /* @__PURE__ */ jsx(ExpansionTransition, {
 		in: expanded,

package/dist/esm/components/Routes/RoutesExpanded.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RoutesExpanded.js","names":[],"sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport { RoutesContent } from './RoutesContent.js'\nimport { routesExpansionWidth } from './RoutesExpanded.style.js'\n\ninterface RoutesExpandedProps {\n canOpen: boolean\n setOpenExpansion: (open: boolean) => void\n}\n\nexport const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =\n memo(function RoutesExpanded({\n canOpen,\n setOpenExpansion,\n }: RoutesExpandedProps) {\n const emitter = useWidgetEvents()\n const navigate = useNavigate()\n const routesRef = useRef<Route[]>(undefined)\n const routesActiveRef = useRef(false)\n\n const {\n routes,\n isLoading,\n isFetching,\n isFetched,\n dataUpdatedAt,\n refetchTime,\n fromChain,\n refetch,\n setReviewableRoute,\n } = useRoutes()\n\n const onExit = useCallback(() => {\n // Clean routes cache on exit\n routesRef.current = undefined\n }, [])\n\n // We cache routes results in ref for a better exit animation\n if (routesRef.current && !routes) {\n routesActiveRef.current = false\n // If we are loading routes with a new queryKey, we need to clear the cache\n if (isLoading) {\n routesRef.current = undefined\n }\n } else {\n routesRef.current = routes\n routesActiveRef.current = Boolean(routes)\n }\n\n const expanded =\n Boolean(\n routesActiveRef.current \|\| isLoading \|\| isFetching \|\| isFetched\n ) && canOpen\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent\n const onRouteClick = useCallback(\n (route: Route) => {\n setReviewableRoute(route)\n navigate({\n to: navigationRoutes.transactionExecution,\n search: { routeId: route.id },\n })\n emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })\n },\n [emitter, routes, setReviewableRoute]\n )\n\n // Use layout effect to update parent's width when expansion changes\n useLayoutEffect(() => {\n setOpenExpansion(expanded)\n }, [expanded, setOpenExpansion])\n\n useEffect(() => {\n emitter.emit(WidgetEvent.WidgetExpanded, expanded)\n }, [emitter, expanded])\n\n return (\n <ExpansionTransition\n in={expanded}\n width={routesExpansionWidth}\n onExited={onExit}\n >\n <RoutesContent\n routes={routesRef.current}\n isFetching={isFetching}\n isLoading={isLoading}\n dataUpdatedAt={dataUpdatedAt}\n refetchTime={refetchTime}\n fromChain={fromChain}\n refetch={refetch}\n onRouteClick={onRouteClick}\n />\n </ExpansionTransition>\n )\n })\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAC3B,SACA,oBACsB;CACtB,MAAM,UAAU,iBAAiB;CACjC,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,OAAgB,KAAA,EAAU;CAC5C,MAAM,kBAAkB,OAAO,MAAM;CAErC,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,WACA,SACA,uBACE,WAAW;CAEf,MAAM,SAAS,kBAAkB;AAE/B,YAAU,UAAU,KAAA;IACnB,EAAE,CAAC;AAGN,KAAI,UAAU,WAAW,CAAC,QAAQ;AAChC,kBAAgB,UAAU;AAE1B,MAAI,UACF,WAAU,UAAU,KAAA;QAEjB;AACL,YAAU,UAAU;AACpB,kBAAgB,UAAU,QAAQ,OAAO;;CAG3C,MAAM,WACJ,QACE,gBAAgB,WAAW,aAAa,cAAc,UACvD,IAAI;CAGP,MAAM,eAAe,aAClB,UAAiB;AAChB,qBAAmB,MAAM;AACzB,WAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,IAAI;GAC9B,CAAC;AACF,UAAQ,~~KAAK~~,~~YAAY,eAAe~~;GAAE;GAAe;GAAS,CAAC;IAErE;EAAC;EAAS;EAAQ;EAAmB,CACtC;AAGD,uBAAsB;AACpB,mBAAiB,SAAS;IACzB,CAAC,UAAU,iBAAiB,CAAC;AAEhC,iBAAgB;AACd,UAAQ,~~KAAK~~,~~YAAY~~,~~gBAAgB,~~SAAS;IACjD,CAAC,SAAS,SAAS,CAAC;AAEvB,QACE,oBAAC,qBAAD;EACE,IAAI;EACJ,OAAO;EACP,UAAU;YAEV,oBAAC,eAAD;GACE,QAAQ,UAAU;GACN;GACD;GACI;GACF;GACF;GACF;GACK;GACd,CAAA;EACkB,CAAA;EAExB"}
1	+ {"version":3,"file":"RoutesExpanded.js","names":[],"sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport { RoutesContent } from './RoutesContent.js'\nimport { routesExpansionWidth } from './RoutesExpanded.style.js'\n\ninterface RoutesExpandedProps {\n canOpen: boolean\n setOpenExpansion: (open: boolean) => void\n}\n\nexport const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =\n memo(function RoutesExpanded({\n canOpen,\n setOpenExpansion,\n }: RoutesExpandedProps) {\n const emitter = useWidgetEvents()\n const navigate = useNavigate()\n const routesRef = useRef<Route[]>(undefined)\n const routesActiveRef = useRef(false)\n\n const {\n routes,\n isLoading,\n isFetching,\n isFetched,\n dataUpdatedAt,\n refetchTime,\n fromChain,\n refetch,\n setReviewableRoute,\n } = useRoutes()\n\n const onExit = useCallback(() => {\n // Clean routes cache on exit\n routesRef.current = undefined\n }, [])\n\n // We cache routes results in ref for a better exit animation\n if (routesRef.current && !routes) {\n routesActiveRef.current = false\n // If we are loading routes with a new queryKey, we need to clear the cache\n if (isLoading) {\n routesRef.current = undefined\n }\n } else {\n routesRef.current = routes\n routesActiveRef.current = Boolean(routes)\n }\n\n const expanded =\n Boolean(\n routesActiveRef.current \|\| isLoading \|\| isFetching \|\| isFetched\n ) && canOpen\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent\n const onRouteClick = useCallback(\n (route: Route) => {\n setReviewableRoute(route)\n navigate({\n to: navigationRoutes.transactionExecution,\n search: { routeId: route.id },\n })\n emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })\n },\n [emitter, routes, setReviewableRoute]\n )\n\n // Use layout effect to update parent's width when expansion changes\n useLayoutEffect(() => {\n setOpenExpansion(expanded)\n }, [expanded, setOpenExpansion])\n\n useEffect(() => {\n emitter.emit(WidgetEvent.WidgetExpanded, expanded)\n }, [emitter, expanded])\n\n return (\n <ExpansionTransition\n in={expanded}\n width={routesExpansionWidth}\n onExited={onExit}\n >\n <RoutesContent\n routes={routesRef.current}\n isFetching={isFetching}\n isLoading={isLoading}\n dataUpdatedAt={dataUpdatedAt}\n refetchTime={refetchTime}\n fromChain={fromChain}\n refetch={refetch}\n onRouteClick={onRouteClick}\n />\n </ExpansionTransition>\n )\n })\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAC3B,SACA,oBACsB;CACtB,MAAM,UAAU,iBAAiB;CACjC,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,OAAgB,KAAA,EAAU;CAC5C,MAAM,kBAAkB,OAAO,MAAM;CAErC,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,WACA,SACA,uBACE,WAAW;CAEf,MAAM,SAAS,kBAAkB;AAE/B,YAAU,UAAU,KAAA;IACnB,EAAE,CAAC;AAGN,KAAI,UAAU,WAAW,CAAC,QAAQ;AAChC,kBAAgB,UAAU;AAE1B,MAAI,UACF,WAAU,UAAU,KAAA;QAEjB;AACL,YAAU,UAAU;AACpB,kBAAgB,UAAU,QAAQ,OAAO;;CAG3C,MAAM,WACJ,QACE,gBAAgB,WAAW,aAAa,cAAc,UACvD,IAAI;CAGP,MAAM,eAAe,aAClB,UAAiB;AAChB,qBAAmB,MAAM;AACzB,WAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,IAAI;GAC9B,CAAC;AACF,UAAQ,KAAA,iBAAgC;GAAE;GAAe;GAAS,CAAC;IAErE;EAAC;EAAS;EAAQ;EAAmB,CACtC;AAGD,uBAAsB;AACpB,mBAAiB,SAAS;IACzB,CAAC,UAAU,iBAAiB,CAAC;AAEhC,iBAAgB;AACd,UAAQ,KAAA,kBAAiC,SAAS;IACjD,CAAC,SAAS,SAAS,CAAC;AAEvB,QACE,oBAAC,qBAAD;EACE,IAAI;EACJ,OAAO;EACP,UAAU;YAEV,oBAAC,eAAD;GACE,QAAQ,UAAU;GACN;GACD;GACI;GACF;GACF;GACF;GACK;GACd,CAAA;EACkB,CAAA;EAExB"}

package/dist/esm/components/SelectChainAndToken.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../providers/WidgetProvider/WidgetProvider.js";
-import { DisabledUI, HiddenUI } from "../types/widget.js";
+import "../types/widget.js";
 import { ReverseTokensButtonEmpty } from "./ReverseTokensButton/ReverseTokensButton.style.js";
 import { ReverseTokensButton } from "./ReverseTokensButton/ReverseTokensButton.js";
 import { SelectTokenButton } from "./SelectTokenButton/SelectTokenButton.js";
@@ -8,13 +8,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SelectChainAndToken.tsx
 const SelectChainAndToken = (props) => {
 	const { disabledUI, hiddenUI, subvariant } = useWidgetConfig();
-	const hiddenReverse = subvariant === "refuel" || disabledUI?.includes(DisabledUI.FromToken) || disabledUI?.includes(DisabledUI.ToToken) || hiddenUI?.includes(HiddenUI.FromToken) || hiddenUI?.includes(HiddenUI.ToToken) || hiddenUI?.includes(HiddenUI.ReverseTokensButton);
-	const hiddenFromToken = hiddenUI?.includes(HiddenUI.FromToken);
-	const hiddenToToken = subvariant === "custom" || hiddenUI?.includes(HiddenUI.ToToken);
+	const hiddenReverse = subvariant === "refuel" || disabledUI?.includes("fromToken") || disabledUI?.includes("toToken") || hiddenUI?.includes("fromToken") || hiddenUI?.includes("toToken") || hiddenUI?.includes("reverseTokensButton");
+	const hiddenFromToken = hiddenUI?.includes("fromToken");
+	const hiddenToToken = subvariant === "custom" || hiddenUI?.includes("toToken");
 	const showReverseButton = !hiddenToToken && !hiddenFromToken;
 	return /* @__PURE__ */ jsxs(Box, {
-		sx: { display: "flex" },
 		...props,
+		sx: {
+			display: "flex",
+			...props.sx
+		},
 		children: [
 			!hiddenFromToken ? /* @__PURE__ */ jsx(SelectTokenButton, {
 				formType: "from",

package/dist/esm/components/SelectChainAndToken.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { DisabledUI, HiddenUI } from '../types/widget.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n const { disabledUI, hiddenUI, subvariant } = useWidgetConfig()\n\n const hiddenReverse =\n subvariant === 'refuel' \|\|\n disabledUI?.includes(DisabledUI.FromToken) \|\|\n disabledUI?.includes(DisabledUI.ToToken) \|\|\n hiddenUI?.includes(HiddenUI.FromToken) \|\|\n hiddenUI?.includes(HiddenUI.ToToken) \|\|\n hiddenUI?.includes(HiddenUI.ReverseTokensButton)\n\n const hiddenFromToken = hiddenUI?.includes(HiddenUI.FromToken)\n const hiddenToToken =\n subvariant === 'custom' \|\| hiddenUI?.includes(HiddenUI.ToToken)\n\n const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n return (\n <Box sx={{ display: 'flex' ~~}} {~~...props}>\n {!hiddenFromToken ? (\n <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n ) : null}\n {showReverseButton ? (\n !hiddenReverse ? (\n <ReverseTokensButton />\n ) : (\n <ReverseTokensButtonEmpty />\n )\n ) : null}\n {!hiddenToToken ? (\n <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,eAAe,iBAAiB;CAE9D,MAAM,gBACJ,eAAe,YACf,YAAY,~~SAAS~~,~~WAAW~~,~~UAAU,~~IAC1C,YAAY,~~SAAS~~,~~WAAW~~,~~QAAQ,~~IACxC,UAAU,~~SAAS~~,~~SAAS~~,~~UAAU,~~IACtC,UAAU,~~SAAS~~,~~SAAS~~,~~QAAQ,~~IACpC,UAAU,~~SAAS~~,~~SAAS,oBAAoB~~;CAElD,MAAM,kBAAkB,UAAU,~~SAAS~~,~~SAAS,UAAU~~;CAC9D,MAAM,gBACJ,eAAe,YAAY,UAAU,~~SAAS~~,~~SAAS,QAAQ~~;CAEjE,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;AAE7C,QACE,qBAAC,KAAD;EAAK,IAAI,~~EAAE,~~SAAS,~~QAAQ~~;~~EAAE,~~GAAI;~~YAAlC~~;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;IAAiB,CAAA,GACjE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,EAAuB,CAAA,GAEvB,oBAAC,0BAAD,EAA4B,CAAA,GAE5B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;IAAiB,CAAA,GAC/D;GACA"}
1	+ {"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { DisabledUI, HiddenUI } from '../types/widget.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n const { disabledUI, hiddenUI, subvariant } = useWidgetConfig()\n\n const hiddenReverse =\n subvariant === 'refuel' \|\|\n disabledUI?.includes(DisabledUI.FromToken) \|\|\n disabledUI?.includes(DisabledUI.ToToken) \|\|\n hiddenUI?.includes(HiddenUI.FromToken) \|\|\n hiddenUI?.includes(HiddenUI.ToToken) \|\|\n hiddenUI?.includes(HiddenUI.ReverseTokensButton)\n\n const hiddenFromToken = hiddenUI?.includes(HiddenUI.FromToken)\n const hiddenToToken =\n subvariant === 'custom' \|\| hiddenUI?.includes(HiddenUI.ToToken)\n\n const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n return (\n <Box {...props} sx={{ display: 'flex', ...props.sx }}>\n {!hiddenFromToken ? (\n <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n ) : null}\n {showReverseButton ? (\n !hiddenReverse ? (\n <ReverseTokensButton />\n ) : (\n <ReverseTokensButtonEmpty />\n )\n ) : null}\n {!hiddenToToken ? (\n <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,eAAe,iBAAiB;CAE9D,MAAM,gBACJ,eAAe,YACf,YAAY,SAAA,YAA8B,IAC1C,YAAY,SAAA,UAA4B,IACxC,UAAU,SAAA,YAA4B,IACtC,UAAU,SAAA,UAA0B,IACpC,UAAU,SAAA,sBAAsC;CAElD,MAAM,kBAAkB,UAAU,SAAA,YAA4B;CAC9D,MAAM,gBACJ,eAAe,YAAY,UAAU,SAAA,UAA0B;CAEjE,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;AAE7C,QACE,qBAAC,KAAD;EAAK,GAAI;EAAO,IAAI;GAAE,SAAS;GAAQ,GAAG,MAAM;GAAI;YAApD;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;IAAiB,CAAA,GACjE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,EAAuB,CAAA,GAEvB,oBAAC,0BAAD,EAA4B,CAAA,GAE5B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;IAAiB,CAAA,GAC/D;GACA"}

package/dist/esm/components/SelectTokenButton/SelectTokenButton.style.js CHANGED Viewed

@@ -43,7 +43,6 @@ const SelectTokenCard = styled(Card$1)(({ theme }) => {
 const CardContent$1 = styled(CardContent, { shouldForwardProp: (prop) => !["formType", "mask"].includes(prop) })(({ theme, formType, mask = true }) => {
 	const cardVariant = theme.components?.MuiCard?.defaultProps?.variant;
 	const horizontal = formType === "to" ? "-8px" : "calc(100% + 8px)";
-	const vertical = "50%";
 	return {
 		padding: 0,
 		transition: theme.transitions.create(["background-color"], {
@@ -53,7 +52,7 @@ const CardContent$1 = styled(CardContent, { shouldForwardProp: (prop) => !["form
 		"&:last-child": { paddingBottom: 0 },
 		...cardVariant !== "outlined" && {
 			backgroundColor: theme.vars.palette.background.paper,
-			mask: mask ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat` : "none"
+			mask: mask ? `radial-gradient(circle 20px at ${horizontal} 50%, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat` : "none"
 		},
 		...cardVariant === "filled" && { "&:hover": {
 			cursor: "pointer",

package/dist/esm/components/SelectTokenButton/SelectTokenButton.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectTokenButton.style.js","names":["CardHeader","Card","CardContent","MuiCardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"sourcesContent":["import {\n cardHeaderClasses,\n CardContent as MuiCardContent,\n styled,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { Card } from '../Card/Card.js'\nimport { CardHeader } from '../Card/CardHeader.js'\n\nexport const SelectTokenCardHeader: React.FC<\n React.ComponentProps<typeof CardHeader> & {\n selected?: boolean\n }\n> = styled(CardHeader, {\n shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n padding: theme.spacing(2),\n [`.${cardHeaderClasses.title}`]: {\n color: theme.vars.palette.text.secondary,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n width: 96,\n fontSize: 18,\n fontWeight: 500,\n [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n fontSize: 16,\n },\n },\n [`.${cardHeaderClasses.subheader}`]: {\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n width: 96,\n },\n variants: [\n {\n props: ({ selected }) => selected,\n style: {\n [`.${cardHeaderClasses.title}`]: {\n color: theme.vars.palette.text.primary,\n fontWeight: 600,\n },\n },\n },\n ],\n}))\n\nexport const SelectTokenCard: React.FC<\n React.ComponentProps<typeof Card> & {\n formType?: FormType\n mask?: boolean\n }\n> = styled(Card)(({ theme }) => {\n const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n return {\n flex: 1,\n ...(cardVariant !== 'outlined' && {\n background: 'none',\n '&:hover': {\n cursor: 'pointer',\n background: 'none',\n },\n }),\n }\n})\n\nexport const CardContent: React.FC<\n React.ComponentProps<typeof MuiCardContent> & {\n formType?: FormType\n mask?: boolean\n }\n> = styled(MuiCardContent, {\n shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),\n})<{ formType?: FormType; mask?: boolean }>(\n ({ theme, formType, mask = true }) => {\n const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'\n const horizontal = direction\n const vertical = '50%'\n return {\n padding: 0,\n transition: theme.transitions.create(['background-color'], {\n duration: theme.transitions.duration.enteringScreen,\n easing: theme.transitions.easing.easeOut,\n }),\n '&:last-child': {\n paddingBottom: 0,\n },\n ...(cardVariant !== 'outlined' && {\n backgroundColor: theme.vars.palette.background.paper,\n mask: mask\n ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n : 'none',\n }),\n ...(cardVariant === 'filled' && {\n '&:hover': {\n cursor: 'pointer',\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n }),\n },\n }),\n }\n }\n)\n"],"mappings":";;;;AAUA,MAAa,wBAIT,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,WAAW,CAAC,SAAS,KAAe,EACpE,CAAC,EAA0B,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,EAAE;EACxB,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACP,UAAU;EACV,YAAY;GACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,UAAU,IACX;EACF;EACA,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACR;CACD,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,GACJ,IAAI,kBAAkB,UAAU;GAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,YAAY;GACb,EACF;EACF,CACF;CACF,EAAE;AAEH,MAAa,kBAKT,OAAOC,OAAK,EAAE,EAAE,YAAY;AAE9B,QAAO;EACL,MAAM;EACN,GAHkB,MAAM,YAAY,SAAS,cAAc,YAGvC,cAAc;GAChC,YAAY;GACZ,WAAW;IACT,QAAQ;IACR,YAAY;IACb;GACF;EACF;EACD;AAEF,MAAaC,gBAKT,OAAOC,aAAgB,EACzB,oBAAoB,SAAS,CAAC,CAAC,YAAY,OAAO,CAAC,SAAS,KAAe,EAC5E,CAAC,EACC,EAAE,OAAO,UAAU,OAAO,WAAW;CACpC,MAAM,cAAc,MAAM,YAAY,SAAS,cAAc;CAE7D,MAAM,aADY,aAAa,OAAO,SAAS;~~CAE~~/C,~~MAAM,WAAW;AACjB,~~QAAO;EACL,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,mBAAmB,EAAE;GACzD,UAAU,MAAM,YAAY,SAAS;GACrC,QAAQ,MAAM,YAAY,OAAO;GAClC,CAAC;EACF,gBAAgB,EACd,eAAe,GAChB;EACD,GAAI,gBAAgB,cAAc;GAChC,iBAAiB,MAAM,KAAK,QAAQ,WAAW;GAC/C,MAAM,OACF,kCAAkC,WAAW,~~GAAG,SAAS,sDACzD~~;GACL;EACD,GAAI,gBAAgB,YAAY,EAC9B,WAAW;GACT,QAAQ;GACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;GAC3E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,eAC5E,CAAC;GACH,EACF;EACF;EAEJ"}
1	+ {"version":3,"file":"SelectTokenButton.style.js","names":["CardHeader","Card","CardContent","MuiCardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"sourcesContent":["import {\n cardHeaderClasses,\n CardContent as MuiCardContent,\n styled,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { Card } from '../Card/Card.js'\nimport { CardHeader } from '../Card/CardHeader.js'\n\nexport const SelectTokenCardHeader: React.FC<\n React.ComponentProps<typeof CardHeader> & {\n selected?: boolean\n }\n> = styled(CardHeader, {\n shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n padding: theme.spacing(2),\n [`.${cardHeaderClasses.title}`]: {\n color: theme.vars.palette.text.secondary,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n width: 96,\n fontSize: 18,\n fontWeight: 500,\n [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n fontSize: 16,\n },\n },\n [`.${cardHeaderClasses.subheader}`]: {\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n width: 96,\n },\n variants: [\n {\n props: ({ selected }) => selected,\n style: {\n [`.${cardHeaderClasses.title}`]: {\n color: theme.vars.palette.text.primary,\n fontWeight: 600,\n },\n },\n },\n ],\n}))\n\nexport const SelectTokenCard: React.FC<\n React.ComponentProps<typeof Card> & {\n formType?: FormType\n mask?: boolean\n }\n> = styled(Card)(({ theme }) => {\n const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n return {\n flex: 1,\n ...(cardVariant !== 'outlined' && {\n background: 'none',\n '&:hover': {\n cursor: 'pointer',\n background: 'none',\n },\n }),\n }\n})\n\nexport const CardContent: React.FC<\n React.ComponentProps<typeof MuiCardContent> & {\n formType?: FormType\n mask?: boolean\n }\n> = styled(MuiCardContent, {\n shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),\n})<{ formType?: FormType; mask?: boolean }>(\n ({ theme, formType, mask = true }) => {\n const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'\n const horizontal = direction\n const vertical = '50%'\n return {\n padding: 0,\n transition: theme.transitions.create(['background-color'], {\n duration: theme.transitions.duration.enteringScreen,\n easing: theme.transitions.easing.easeOut,\n }),\n '&:last-child': {\n paddingBottom: 0,\n },\n ...(cardVariant !== 'outlined' && {\n backgroundColor: theme.vars.palette.background.paper,\n mask: mask\n ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n : 'none',\n }),\n ...(cardVariant === 'filled' && {\n '&:hover': {\n cursor: 'pointer',\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n }),\n },\n }),\n }\n }\n)\n"],"mappings":";;;;AAUA,MAAa,wBAIT,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,WAAW,CAAC,SAAS,KAAe,EACpE,CAAC,EAA0B,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,EAAE;EACxB,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACP,UAAU;EACV,YAAY;GACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,UAAU,IACX;EACF;EACA,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACR;CACD,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,GACJ,IAAI,kBAAkB,UAAU;GAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,YAAY;GACb,EACF;EACF,CACF;CACF,EAAE;AAEH,MAAa,kBAKT,OAAOC,OAAK,EAAE,EAAE,YAAY;AAE9B,QAAO;EACL,MAAM;EACN,GAHkB,MAAM,YAAY,SAAS,cAAc,YAGvC,cAAc;GAChC,YAAY;GACZ,WAAW;IACT,QAAQ;IACR,YAAY;IACb;GACF;EACF;EACD;AAEF,MAAaC,gBAKT,OAAOC,aAAgB,EACzB,oBAAoB,SAAS,CAAC,CAAC,YAAY,OAAO,CAAC,SAAS,KAAe,EAC5E,CAAC,EACC,EAAE,OAAO,UAAU,OAAO,WAAW;CACpC,MAAM,cAAc,MAAM,YAAY,SAAS,cAAc;CAE7D,MAAM,aADY,aAAa,OAAO,SAAS;AAG/C,QAAO;EACL,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,mBAAmB,EAAE;GACzD,UAAU,MAAM,YAAY,SAAS;GACrC,QAAQ,MAAM,YAAY,OAAO;GAClC,CAAC;EACF,gBAAgB,EACd,eAAe,GAChB;EACD,GAAI,gBAAgB,cAAc;GAChC,iBAAiB,MAAM,KAAK,QAAQ,WAAW;GAC/C,MAAM,OACF,kCAAkC,WAAW,0DAC7C;GACL;EACD,GAAI,gBAAgB,YAAY,EAC9B,WAAW;GACT,QAAQ;GACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;GAC3E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,eAC5E,CAAC;GACH,EACF;EACF;EAEJ"}

package/dist/esm/components/SendToWallet/SendToWalletButton.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { DisabledUI, HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useBookmarkActions } from "../../stores/bookmarks/useBookmarkActions.js";
@@ -34,8 +34,8 @@ const SendToWalletButton = (props) => {
 	const { accounts } = useAccount();
 	const { getChainTypeFromAddress } = useChainTypeFromAddress();
 	const { requiredToAddress } = useToAddressRequirements();
-	const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
-	const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
+	const disabledToAddress = disabledUI?.includes("toAddress");
+	const hiddenToAddress = hiddenUI?.includes("toAddress");
 	const address = toAddressFieldValue ? shortenAddress(toAddressFieldValue) : t("sendToWallet.enterAddress", { context: "short" });
 	const matchingConnectedAccount = accounts.find((account) => account.address === toAddressFieldValue);
 	const chainType = !matchingConnectedAccount ? selectedBookmark?.chainType || (toAddressFieldValue ? getChainTypeFromAddress(toAddressFieldValue) : void 0) : void 0;
@@ -100,7 +100,7 @@ const SendToWalletButton = (props) => {
 					title: headerTitle,
 					subheader: headerSubheader,
 					selected: !!toAddressFieldValue || disabledToAddress,
-					action: !!toAddressFieldValue && !disabledForChanges ? /* @__PURE__ */ jsx(CardIconButton, {
+					action: toAddressFieldValue && !disabledForChanges ? /* @__PURE__ */ jsx(CardIconButton, {
 						onClick: clearSelectedBookmark,
 						size: "small",
 						children: /* @__PURE__ */ jsx(CloseRounded, { fontSize: "inherit" })