@lifi/widget 0.0.0-preview-6cc63bac

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

@@ -0,0 +1,44 @@
+import { useSetHeaderHeight } from "../../stores/header/useHeaderStore.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";
+import { NavigationHeader } from "./NavigationHeader.js";
+import { WalletHeader } from "./WalletHeader.js";
+import { useLayoutEffect, useRef } from "react";
+import { useLocation } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Header/Header.tsx
+const HeaderContainer = ({ children }) => {
+	const { pathname } = useLocation();
+	const elementId = useDefaultElementId();
+	const headerRef = useRef(null);
+	const { setHeaderHeight } = useSetHeaderHeight();
+	useLayoutEffect(() => {
+		const handleHeaderResize = () => {
+			const height = headerRef.current?.getBoundingClientRect().height;
+			if (height) setHeaderHeight(height);
+		};
+		let resizeObserver;
+		if (headerRef.current) {
+			resizeObserver = new ResizeObserver(handleHeaderResize);
+			resizeObserver.observe(headerRef.current);
+		}
+		return () => {
+			if (resizeObserver) resizeObserver.disconnect();
+		};
+	}, [setHeaderHeight]);
+	return /* @__PURE__ */ jsx(Container, {
+		id: createElementId("widget-header", elementId ?? ""),
+		sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)),
+		ref: headerRef,
+		children
+	});
+};
+const Header = () => {
+	return /* @__PURE__ */ jsxs(HeaderContainer, { children: [/* @__PURE__ */ jsx(WalletHeader, {}), /* @__PURE__ */ jsx(NavigationHeader, {})] });
+};
+//#endregion
+export { Header };
+
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +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,YAAY;CACjC,MAAM,YAAY,oBAAoB;CACtC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,EAAE,oBAAoB,mBAAmB;CAE/C,sBAAsB;EACpB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU,SAAS,sBAAsB,EAAE;GAE1D,IAAI,QACF,gBAAgB,MAAM;EAE1B;EAEA,IAAI;EAEJ,IAAI,UAAU,SAAS;GACrB,iBAAiB,IAAI,eAAe,kBAAkB;GACtD,eAAe,QAAQ,UAAU,OAAO;EAC1C;EAEA,aAAa;GACX,IAAI,gBACF,eAAe,WAAW;EAE9B;CACF,GAAG,CAAC,eAAe,CAAC;CAEpB,OACE,oBAAC,WAAD;EACE,IAAI,gBAAA,iBAAkC,aAAa,EAAE;EACrD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,KAAK,CAAC;EACnE,KAAK;EAEJ;CACQ,CAAA;AAEf;AAEA,MAAa,eAAmB;CAC9B,OACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,kBAAD,CAAmB,CAAA,CACJ,EAAA,CAAA;AAErB"}

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

@@ -0,0 +1,71 @@
+import { getAvatarMask } from "../Avatar/utils.js";
+import { AppBar, Avatar, Box, Button, buttonClasses, styled } from "@mui/material";
+//#region src/components/Header/Header.style.ts
+const HeaderAppBar = styled(AppBar)(({ theme }) => ({
+	backgroundColor: "transparent",
+	...theme.applyStyles("dark", { backgroundColor: "transparent" }),
+	color: theme.vars.palette.text.primary,
+	flexDirection: "row",
+	alignItems: "center",
+	position: "relative"
+}));
+const Container$1 = styled(Box, { shouldForwardProp: (prop) => prop !== "sticky" })(({ theme, sticky }) => {
+	return {
+		display: "flex",
+		flexDirection: "column",
+		backgroundColor: theme.vars.palette.background.default,
+		position: sticky ? "sticky" : "relative",
+		top: 0,
+		zIndex: 1200,
+		gap: theme.spacing(.5),
+		padding: theme.spacing(1.5, 3, 0, 3),
+		overflow: "auto",
+		borderRadius: theme.container?.borderRadius ?? 0,
+		...theme.header,
+		...theme.header?.position === "fixed" ? {
+			minWidth: theme.breakpoints.values.xs,
+			maxWidth: theme.breakpoints.values.sm,
+			width: "100%"
+		} : {}
+	};
+});
+const WalletButton = styled(Button, { shouldForwardProp: (prop) => prop !== "withOffset" })(({ withOffset, theme }) => ({
+	color: theme.vars.palette.text.primary,
+	padding: theme.spacing(1, 1.5),
+	maxHeight: 40,
+	fontSize: "0.875rem",
+	fontWeight: 600,
+	borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
+	backgroundColor: "transparent",
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
+	...theme.applyStyles("dark", {
+		backgroundColor: "transparent",
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
+	}),
+	[`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: { fontSize: "24px" },
+	[`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: { fontSize: "24px" },
+	...theme.navigation.edge && { marginRight: withOffset ? theme.spacing(-1.25) : 0 }
+}));
+const DrawerWalletContainer = styled(Box)(({ theme }) => ({
+	width: "100%",
+	display: "flex",
+	justifyContent: "space-between",
+	...theme.navigation.edge && {
+		"& button:first-of-type": { marginLeft: theme.spacing(-1) },
+		"& button:last-of-type": { marginRight: theme.spacing(-1.25) }
+	}
+}));
+const HeaderControlsContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	gap: theme.spacing(.5),
+	...theme.navigation.edge && { "& button:last-of-type": { marginRight: theme.spacing(-1.25) } }
+}));
+const WalletAvatar = styled(Avatar, { shouldForwardProp: (prop) => prop !== "avatarSize" && prop !== "badgeSize" })(({ avatarSize = 24, badgeSize = 12 }) => ({
+	mask: getAvatarMask(badgeSize),
+	width: avatarSize,
+	height: avatarSize
+}));
+//#endregion
+export { Container$1 as Container, DrawerWalletContainer, HeaderAppBar, HeaderControlsContainer, WalletAvatar, WalletButton };
+
+//# sourceMappingURL=Header.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.style.js","names":["Container"],"sources":["../../../../src/components/Header/Header.style.ts"],"sourcesContent":["import {\n  AppBar,\n  Avatar,\n  Box,\n  Button,\n  buttonClasses,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { getAvatarMask } from '../Avatar/utils.js'\n\nexport const HeaderAppBar: React.FC<\n  React.ComponentProps<typeof AppBar> & { sticky?: boolean }\n> = styled(AppBar)(({ theme }) => ({\n  backgroundColor: 'transparent',\n  ...theme.applyStyles('dark', {\n    backgroundColor: 'transparent',\n  }),\n  color: theme.vars.palette.text.primary,\n  flexDirection: 'row',\n  alignItems: 'center',\n  position: 'relative',\n}))\n\nexport const Container: React.FC<\n  React.ComponentProps<typeof Box> & { sticky?: boolean }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'sticky',\n})<{ sticky?: boolean }>(({ theme, sticky }) => {\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    backgroundColor: theme.vars.palette.background.default,\n    position: sticky ? 'sticky' : 'relative',\n    top: 0,\n    zIndex: 1200,\n    gap: theme.spacing(0.5),\n    padding: theme.spacing(1.5, 3, 0, 3),\n    overflow: 'auto',\n    borderRadius: theme.container?.borderRadius ?? 0,\n    ...theme.header,\n    ...(theme.header?.position === 'fixed'\n      ? {\n          minWidth: theme.breakpoints.values.xs,\n          maxWidth: theme.breakpoints.values.sm,\n          width: '100%',\n        }\n      : {}),\n  }\n})\n\nexport const WalletButton: React.FC<\n  React.ComponentProps<typeof Button> & { withOffset?: boolean }\n> = styled(Button, {\n  shouldForwardProp: (prop) => prop !== 'withOffset',\n})<{ withOffset?: boolean }>(({ withOffset, theme }) => ({\n  color: theme.vars.palette.text.primary,\n  padding: theme.spacing(1, 1.5),\n  maxHeight: 40,\n  fontSize: '0.875rem',\n  fontWeight: 600,\n  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n  backgroundColor: 'transparent',\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: 'transparent',\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    },\n  }),\n  [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {\n    fontSize: '24px',\n  },\n  [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {\n    fontSize: '24px',\n  },\n  ...(theme.navigation.edge && {\n    marginRight: withOffset ? theme.spacing(-1.25) : 0,\n  }),\n}))\n\nexport const DrawerWalletContainer: React.FC<\n  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'space-between',\n\n  ...(theme.navigation.edge && {\n    '& button:first-of-type': {\n      marginLeft: theme.spacing(-1),\n    },\n    '& button:last-of-type': {\n      marginRight: theme.spacing(-1.25),\n    },\n  }),\n}))\n\nexport const HeaderControlsContainer: React.FC<\n  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(0.5),\n  ...(theme.navigation.edge && {\n    '& button:last-of-type': {\n      marginRight: theme.spacing(-1.25),\n    },\n  }),\n}))\n\nexport const WalletAvatar: React.FC<\n  React.ComponentProps<typeof Avatar> & {\n    avatarSize?: number\n    badgeSize?: number\n  }\n> = styled(Avatar, {\n  shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',\n})<{ avatarSize?: number; badgeSize?: number }>(\n  ({ avatarSize = 24, badgeSize = 12 }) => ({\n    mask: getAvatarMask(badgeSize),\n    width: avatarSize,\n    height: avatarSize,\n  })\n)\n"],"mappings":";;;AAWA,MAAa,eAET,OAAO,MAAM,GAAG,EAAE,aAAa;CACjC,iBAAiB;CACjB,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,cACnB,CAAC;CACD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,eAAe;CACf,YAAY;CACZ,UAAU;AACZ,EAAE;AAEF,MAAaA,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,SACxC,CAAC,GAAyB,EAAE,OAAO,aAAa;CAC9C,OAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU,SAAS,WAAW;EAC9B,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,EAAG;EACtB,SAAS,MAAM,QAAQ,KAAK,GAAG,GAAG,CAAC;EACnC,UAAU;EACV,cAAc,MAAM,WAAW,gBAAgB;EAC/C,GAAG,MAAM;EACT,GAAI,MAAM,QAAQ,aAAa,UAC3B;GACE,UAAU,MAAM,YAAY,OAAO;GACnC,UAAU,MAAM,YAAY,OAAO;GACnC,OAAO;EACT,IACA,CAAC;CACP;AACF,CAAC;AAED,MAAa,eAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,aACxC,CAAC,GAA6B,EAAE,YAAY,aAAa;CACvD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,GAAG,GAAG;CAC7B,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB;EACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACF,CAAC;EACA,IAAI,cAAc,QAAQ,uBAAuB,EAChD,UAAU,OACZ;EACC,IAAI,cAAc,UAAU,uBAAuB,EAClD,UAAU,OACZ;CACA,GAAI,MAAM,WAAW,QAAQ,EAC3B,aAAa,aAAa,MAAM,QAAQ,KAAK,IAAI,EACnD;AACF,EAAE;AAEF,MAAa,wBAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,OAAO;CACP,SAAS;CACT,gBAAgB;CAEhB,GAAI,MAAM,WAAW,QAAQ;EAC3B,0BAA0B,EACxB,YAAY,MAAM,QAAQ,EAAE,EAC9B;EACA,yBAAyB,EACvB,aAAa,MAAM,QAAQ,KAAK,EAClC;CACF;AACF,EAAE;AAEF,MAAa,0BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,EAAG;CACtB,GAAI,MAAM,WAAW,QAAQ,EAC3B,yBAAyB,EACvB,aAAa,MAAM,QAAQ,KAAK,EAClC,EACF;AACF,EAAE;AAEF,MAAa,eAKT,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,YACjE,CAAC,GACE,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,MAAM,cAAc,SAAS;CAC7B,OAAO;CACP,QAAQ;AACV,EACF"}

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

@@ -0,0 +1,62 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useHeaderStore } from "../../stores/header/useHeaderStore.js";
+import { backButtonRoutes, navigationRoutes, navigationRoutesValues } from "../../utils/navigationRoutes.js";
+import { HeaderAppBar, HeaderControlsContainer } from "./Header.style.js";
+import { ActivitiesButton } from "./ActivitiesButton.js";
+import { BackButton } from "./BackButton.js";
+import { CloseDrawerButton } from "./CloseDrawerButton.js";
+import { SettingsButton } from "./SettingsButton.js";
+import { SplitNavigationTabs } from "./SplitNavigationTabs.js";
+import { useLocation } from "@tanstack/react-router";
+import { Box, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAccount } from "@lifi/wallet-management";
+//#region src/components/Header/NavigationHeader.tsx
+const NavigationHeader = () => {
+	const { mode, hiddenUI, variant, defaultUI, modeOptions } = useWidgetConfig();
+	const { account } = useAccount();
+	const [element, title] = useHeaderStore((state) => [state.element, state.title]);
+	const { pathname } = useLocation();
+	const cleanedPathname = pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
+	const path = cleanedPathname.substring(cleanedPathname.lastIndexOf("/") + 1);
+	const hasPath = navigationRoutesValues.includes(path);
+	const showSplitOptions = mode === "split" && !hasPath && typeof modeOptions?.split !== "string";
+	return /* @__PURE__ */ jsxs(HeaderAppBar, {
+		elevation: 0,
+		sx: {
+			paddingTop: 1,
+			paddingBottom: .5
+		},
+		children: [
+			backButtonRoutes.includes(path) ? /* @__PURE__ */ jsx(BackButton, {}) : null,
+			showSplitOptions ? /* @__PURE__ */ jsx(Box, {
+				sx: {
+					flex: 1,
+					marginRight: 1
+				},
+				children: /* @__PURE__ */ jsx(SplitNavigationTabs, {})
+			}) : /* @__PURE__ */ jsx(Typography, {
+				align: hasPath ? "center" : "left",
+				noWrap: defaultUI?.navigationHeaderTitleNoWrap ?? true,
+				sx: {
+					fontSize: hasPath ? 18 : 24,
+					fontWeight: "700",
+					flex: 1
+				},
+				children: title
+			}),
+			pathname === navigationRoutes.home ? /* @__PURE__ */ jsxs(HeaderControlsContainer, { children: [
+				account.isConnected && !hiddenUI?.history && /* @__PURE__ */ jsx(ActivitiesButton, {}),
+				/* @__PURE__ */ jsx(SettingsButton, {}),
+				variant === "drawer" && !hiddenUI?.drawerCloseButton ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "navigation" }) : null
+			] }) : element || /* @__PURE__ */ jsx(Box, { sx: {
+				width: 28,
+				height: 40
+			} })
+		]
+	});
+};
+//#endregion
+export { NavigationHeader };
+
+//# sourceMappingURL=NavigationHeader.js.map

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

@@ -0,0 +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 {\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 { mode, hiddenUI, variant, defaultUI, modeOptions } = 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    mode === 'split' && !hasPath && typeof modeOptions?.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?.history && <ActivitiesButton />}\n          <SettingsButton />\n          {variant === 'drawer' && !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":";;;;;;;;;;;;;;AAiBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,MAAM,UAAU,SAAS,WAAW,gBAAgB,gBAAgB;CAC5E,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,KACR,CAAC;CACD,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,kBAAkB,SAAS,SAAS,GAAG,IACzC,SAAS,MAAM,GAAG,EAAE,IACpB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,GAAG,IAAI,CAAC;CAC3E,MAAM,UAAU,uBAAuB,SAAS,IAAI;CAIpD,MAAM,mBACJ,SAAS,WAAW,CAAC,WAAW,OAAO,aAAa,UAAU;CAEhE,OACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;EAAI;YAApE;GACG,iBAAiB,SAAS,IAAI,IAAI,oBAAC,YAAD,CAAa,CAAA,IAAI;GACnD,mBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;IAAE;cACjC,oBAAC,qBAAD,CAAsB,CAAA;GACnB,CAAA,IAEL,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA;GAEb,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,WAAW,oBAAC,kBAAD,CAAmB,CAAA;IACjE,oBAAC,gBAAD,CAAiB,CAAA;IAChB,YAAY,YAAY,CAAC,UAAU,oBAClC,oBAAC,mBAAD,EAAmB,QAAO,aAAc,CAAA,IACtC;GACmB,EAAA,CAAA,IAEzB,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;GACV,EACD,CAAA;EAGO;;AAElB"}

package/dist/esm/components/Header/SettingsButton.js

@@ -0,0 +1,32 @@
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useSettingMonitor } from "../../hooks/useSettingMonitor.js";
+import { SettingsIconBadge, SettingsIconButton } from "./SettingsButton.style.js";
+import { useNavigate } from "@tanstack/react-router";
+import { Tooltip } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Settings from "@mui/icons-material/Settings";
+//#region src/components/Header/SettingsButton.tsx
+const SettingsButton = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { isCustomRouteSettings, isRouteSettingsWithWarnings } = useSettingMonitor();
+	const variant = isRouteSettingsWithWarnings ? "warning" : isCustomRouteSettings ? "info" : void 0;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: variant ? t("tooltip.settingsModified") : t("header.settings"),
+		children: /* @__PURE__ */ jsx(SettingsIconButton, {
+			size: "medium",
+			onClick: () => navigate({ to: navigationRoutes.settings }),
+			variant,
+			children: variant ? /* @__PURE__ */ jsx(SettingsIconBadge, {
+				variant: "dot",
+				color: variant,
+				children: /* @__PURE__ */ jsx(Settings, {})
+			}) : /* @__PURE__ */ jsx(Settings, {})
+		})
+	});
+};
+//#endregion
+export { SettingsButton };
+
+//# sourceMappingURL=SettingsButton.js.map

package/dist/esm/components/Header/SettingsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsButton.js","names":[],"sources":["../../../../src/components/Header/SettingsButton.tsx"],"sourcesContent":["import Settings from '@mui/icons-material/Settings'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport {\n  SettingsIconBadge,\n  SettingsIconButton,\n} from './SettingsButton.style.js'\n\nexport const SettingsButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n\n  const { isCustomRouteSettings, isRouteSettingsWithWarnings } =\n    useSettingMonitor()\n\n  const variant = isRouteSettingsWithWarnings\n    ? 'warning'\n    : isCustomRouteSettings\n      ? 'info'\n      : undefined\n\n  const tooltipMessage = variant\n    ? t('tooltip.settingsModified')\n    : t('header.settings')\n\n  return (\n    <Tooltip title={tooltipMessage}>\n      <SettingsIconButton\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.settings })}\n        variant={variant}\n      >\n        {variant ? (\n          <SettingsIconBadge variant=\"dot\" color={variant}>\n            <Settings />\n          </SettingsIconBadge>\n        ) : (\n          <Settings />\n        )}\n      </SettingsIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,uBAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAE7B,MAAM,EAAE,uBAAuB,gCAC7B,kBAAkB;CAEpB,MAAM,UAAU,8BACZ,YACA,wBACE,SACA,KAAA;CAMN,OACE,oBAAC,SAAD;EAAS,OALY,UACnB,EAAE,0BAA0B,IAC5B,EAAE,iBAAiB;YAInB,oBAAC,oBAAD;GACE,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,SAAS,CAAC;GAChD;aAER,UACC,oBAAC,mBAAD;IAAmB,SAAQ;IAAM,OAAO;cACtC,oBAAC,UAAD,CAAW,CAAA;GACM,CAAA,IAEnB,oBAAC,UAAD,CAAW,CAAA;EAEK,CAAA;CACb,CAAA;AAEb"}

package/dist/esm/components/Header/SettingsButton.style.js

@@ -0,0 +1,38 @@
+import { Badge, IconButton, badgeClasses, styled } from "@mui/material";
+//#region src/components/Header/SettingsButton.style.tsx
+const SettingsIconBadge = styled(Badge)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(1.25),
+	[`.${badgeClasses.badge}`]: {
+		width: 10,
+		height: 10,
+		borderRadius: "50%",
+		transform: "translate(70%, -70%)"
+	}
+}));
+const SettingsIconButton = styled(IconButton, { shouldForwardProp: (props) => props !== "variant" })(({ theme, variant }) => {
+	switch (variant) {
+		case "info": return {
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
+			"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)` },
+			...theme.applyStyles("dark", {
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
+				"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)` }
+			})
+		};
+		case "warning": return {
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
+			"&:hover": { backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)` },
+			...theme.applyStyles("dark", {
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
+				"&:hover": { backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)` }
+			})
+		};
+		default: return {};
+	}
+});
+//#endregion
+export { SettingsIconBadge, SettingsIconButton };
+
+//# sourceMappingURL=SettingsButton.style.js.map

package/dist/esm/components/Header/SettingsButton.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsButton.style.js","names":["MuiBadge"],"sources":["../../../../src/components/Header/SettingsButton.style.tsx"],"sourcesContent":["import {\n  badgeClasses,\n  IconButton,\n  Badge as MuiBadge,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsIconBadge: React.FC<\n  React.ComponentProps<typeof MuiBadge>\n> = styled(MuiBadge)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.25),\n  [`.${badgeClasses.badge}`]: {\n    width: 10,\n    height: 10,\n    borderRadius: '50%',\n    transform: 'translate(70%, -70%)',\n  },\n}))\n\ninterface SettingsIconButtonProps {\n  variant?: 'info' | 'warning'\n}\n\nexport const SettingsIconButton: React.FC<\n  React.ComponentProps<typeof IconButton> & SettingsIconButtonProps\n> = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'variant',\n})<SettingsIconButtonProps>(({ theme, variant }) => {\n  switch (variant) {\n    case 'info':\n      return {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n          },\n        }),\n      }\n    case 'warning':\n      return {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)`,\n          },\n        }),\n      }\n    default:\n      return {}\n  }\n})\n"],"mappings":";;AAQA,MAAa,oBAET,OAAOA,KAAQ,GAAG,EAAE,aAAa;CACnC,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,IAAI;EACtB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;CACb;AACF,EAAE;AAMF,MAAa,qBAET,OAAO,YAAY,EACrB,oBAAoB,UAAU,UAAU,UAC1C,CAAC,GAA4B,EAAE,OAAO,cAAc;CAClD,QAAQ,SAAR;EACE,KAAK,QACH,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;GACA,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;IACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;GACF,CAAC;EACH;EACF,KAAK,WACH,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,gCAC5F;GACA,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,gCAC5F;GACF,CAAC;EACH;EACF,SACE,OAAO,CAAC;CACZ;AACF,CAAC"}

package/dist/esm/components/Header/SplitNavigationTabs.js

@@ -0,0 +1,33 @@
+import { useSplitModeStore } from "../../stores/settings/useSplitModeStore.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { NavigationTab, NavigationTabs } from "../Tabs/NavigationTabs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/Header/SplitNavigationTabs.tsx
+const SplitNavigationTabs = () => {
+	const { t } = useTranslation();
+	const [state, setState] = useSplitModeStore((state) => [state.state, state.setState]);
+	const { setFieldValue } = useFieldActions();
+	const handleChange = (_, value) => {
+		setFieldValue("fromAmount", "");
+		setFieldValue("fromToken", "");
+		setFieldValue("toToken", "");
+		setState(value === 0 ? "swap" : "bridge");
+	};
+	return /* @__PURE__ */ jsxs(NavigationTabs, {
+		value: state === "swap" ? 0 : 1,
+		onChange: handleChange,
+		"aria-label": "tabs",
+		children: [/* @__PURE__ */ jsx(NavigationTab, {
+			label: t("header.swap"),
+			disableRipple: true
+		}), /* @__PURE__ */ jsx(NavigationTab, {
+			label: t("header.bridge"),
+			disableRipple: true
+		})]
+	});
+};
+//#endregion
+export { SplitNavigationTabs };
+
+//# sourceMappingURL=SplitNavigationTabs.js.map

package/dist/esm/components/Header/SplitNavigationTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitNavigationTabs.js","names":[],"sources":["../../../../src/components/Header/SplitNavigationTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useSplitModeStore } from '../../stores/settings/useSplitModeStore.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\nexport const SplitNavigationTabs = (): JSX.Element => {\n  const { t } = useTranslation()\n  const [state, setState] = useSplitModeStore((state) => [\n    state.state,\n    state.setState,\n  ])\n\n  const { setFieldValue } = useFieldActions()\n  const handleChange = (_: React.SyntheticEvent, value: number) => {\n    setFieldValue('fromAmount', '')\n    setFieldValue('fromToken', '')\n    setFieldValue('toToken', '')\n    setState(value === 0 ? 'swap' : 'bridge')\n  }\n\n  return (\n    <NavigationTabs\n      value={state === 'swap' ? 0 : 1}\n      onChange={handleChange}\n      aria-label=\"tabs\"\n    >\n      <NavigationTab label={t('header.swap')} disableRipple />\n      <NavigationTab label={t('header.bridge')} disableRipple />\n    </NavigationTabs>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,4BAAyC;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,OAAO,YAAY,mBAAmB,UAAU,CACrD,MAAM,OACN,MAAM,QACR,CAAC;CAED,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,gBAAgB,GAAyB,UAAkB;EAC/D,cAAc,cAAc,EAAE;EAC9B,cAAc,aAAa,EAAE;EAC7B,cAAc,WAAW,EAAE;EAC3B,SAAS,UAAU,IAAI,SAAS,QAAQ;CAC1C;CAEA,OACE,qBAAC,gBAAD;EACE,OAAO,UAAU,SAAS,IAAI;EAC9B,UAAU;EACV,cAAW;YAHb,CAKE,oBAAC,eAAD;GAAe,OAAO,EAAE,aAAa;GAAG,eAAA;EAAe,CAAA,GACvD,oBAAC,eAAD;GAAe,OAAO,EAAE,eAAe;GAAG,eAAA;EAAe,CAAA,CAC3C;;AAEpB"}

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

@@ -0,0 +1,118 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useExternalWalletProvider } from "../../providers/WalletProvider/useExternalWalletProvider.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChain } from "../../hooks/useChain.js";
+import { SmallAvatar } from "../Avatar/SmallAvatar.js";
+import { DrawerWalletContainer, HeaderAppBar, WalletAvatar, WalletButton } from "./Header.style.js";
+import { CloseDrawerButton } from "./CloseDrawerButton.js";
+import { shortenAddress } from "../../utils/wallet.js";
+import { WalletMenu } from "./WalletMenu.js";
+import { WalletMenuContainer } from "./WalletMenu.style.js";
+import { useState } from "react";
+import { Avatar, Badge } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { getConnectorIcon, useAccount, useWalletMenu } from "@lifi/wallet-management";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import Wallet from "@mui/icons-material/Wallet";
+//#region src/components/Header/WalletHeader.tsx
+const useInternalWalletManagement = () => {
+	const { hiddenUI } = useWidgetConfig();
+	const { useExternalWalletProvidersOnly } = useExternalWalletProvider();
+	const isWalletMenuHidden = hiddenUI?.walletMenu;
+	return { shouldShowWalletMenu: !useExternalWalletProvidersOnly && !isWalletMenuHidden };
+};
+const WalletHeader = () => {
+	const { shouldShowWalletMenu } = useInternalWalletManagement();
+	return shouldShowWalletMenu ? /* @__PURE__ */ jsx(HeaderAppBar, {
+		elevation: 0,
+		sx: { justifyContent: "flex-end" },
+		children: /* @__PURE__ */ jsx(WalletMenuButton, {})
+	}) : null;
+};
+const WalletMenuButton = () => {
+	const { variant, hiddenUI } = useWidgetConfig();
+	const { account, accounts } = useAccount();
+	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?.drawerCloseButton ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "wallet" }) : null] });
+	return activeAccount.isConnected ? /* @__PURE__ */ jsx(ConnectedButton, { account: activeAccount }) : /* @__PURE__ */ jsx(ConnectButton, {});
+};
+const ConnectButton = () => {
+	const { t } = useTranslation();
+	const { walletConfig, variant } = useWidgetConfig();
+	const { openWalletMenu } = useWalletMenu();
+	const connect = async (event) => {
+		if (!walletConfig?.usePartialWalletManagement && !walletConfig?.forceInternalWalletManagement && walletConfig?.onConnect) {
+			walletConfig.onConnect();
+			return;
+		}
+		openWalletMenu();
+		event.currentTarget.blur();
+	};
+	const walletPosition = variant === "drawer" ? "start" : "end";
+	return /* @__PURE__ */ jsx(WalletButton, {
+		withOffset: walletPosition === "end",
+		endIcon: walletPosition === "end" ? /* @__PURE__ */ jsx(Wallet, {}) : void 0,
+		startIcon: walletPosition === "start" ? /* @__PURE__ */ jsx(Wallet, { sx: { marginLeft: -.25 } }) : void 0,
+		onClick: connect,
+		children: t("button.connectWallet")
+	});
+};
+const ConnectedButton = ({ account }) => {
+	const { chain } = useChain(account.chainId);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const walletAddress = shortenAddress(account.address);
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget);
+		event.currentTarget.blur();
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WalletButton, {
+		withOffset: true,
+		endIcon: /* @__PURE__ */ jsx(ExpandMore, {}),
+		startIcon: chain?.logoURI ? /* @__PURE__ */ jsx(Badge, {
+			overlap: "circular",
+			anchorOrigin: {
+				vertical: "bottom",
+				horizontal: "right"
+			},
+			badgeContent: /* @__PURE__ */ jsx(SmallAvatar, {
+				src: chain?.logoURI,
+				alt: chain?.name,
+				sx: {
+					width: 12,
+					height: 12
+				},
+				children: chain?.name[0]
+			}),
+			children: /* @__PURE__ */ jsx(WalletAvatar, {
+				src: getConnectorIcon(account.connector),
+				alt: account.connector?.name,
+				children: account.connector?.name[0]
+			})
+		}) : /* @__PURE__ */ jsx(Avatar, {
+			src: getConnectorIcon(account.connector),
+			alt: account.connector?.name,
+			sx: {
+				width: 24,
+				height: 24
+			},
+			children: account.connector?.name[0]
+		}),
+		onClick: handleClick,
+		children: walletAddress
+	}), /* @__PURE__ */ jsx(WalletMenuContainer, {
+		anchorEl,
+		open: Boolean(anchorEl),
+		onClose: handleClose,
+		children: /* @__PURE__ */ jsx(WalletMenu, { onClose: handleClose })
+	})] });
+};
+//#endregion
+export { WalletHeader };
+
+//# sourceMappingURL=WalletHeader.js.map

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

@@ -0,0 +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 { 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?.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?.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":";;;;;;;;;;;;;;;;;;AA2BA,MAAM,oCAAoC;CACxC,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,EAAE,mCAAmC,0BAA0B;CAErE,MAAM,qBAAqB,UAAU;CAKrC,OAAO,EACL,sBAHA,CAAC,kCAAkC,CAAC,mBAItC;AACF;AAEA,MAAa,qBAA+B;CAC1C,MAAM,EAAE,yBAAyB,4BAA4B;CAE7D,OAAO,uBACL,oBAAC,cAAD;EAAc,WAAW;EAAG,IAAI,EAAE,gBAAgB,WAAW;YAC3D,oBAAC,kBAAD,CAAmB,CAAA;CACP,CAAA,IACZ;AACN;AAEA,MAAM,yBAAmC;CACvC,MAAM,EAAE,SAAS,aAAa,gBAAgB;CAC9C,MAAM,EAAE,SAAS,aAAa,WAAW;CAEzC,MAAM,CAAC,eAAe,eAAe,WAAW;CAChD,MAAM,EAAE,OAAO,cAAc,SAAS,WAAW;CAEjD,MAAM,iBACH,YACG,SAAS,MAAM,YAAY,QAAQ,cAAc,UAAU,SAAS,IACpE,KAAA,MAAc;CAEpB,IAAI,YAAY,UACd,OACE,qBAAC,uBAAD,EAAA,UAAA,CACG,cAAc,cACb,oBAAC,iBAAD,EAAiB,SAAS,cAAgB,CAAA,IAE1C,oBAAC,eAAD,CAAgB,CAAA,GAEjB,CAAC,UAAU,oBACV,oBAAC,mBAAD,EAAmB,QAAO,SAAU,CAAA,IAClC,IACiB,EAAA,CAAA;CAG3B,OAAO,cAAc,cACnB,oBAAC,iBAAD,EAAiB,SAAS,cAAgB,CAAA,IAE1C,oBAAC,eAAD,CAAgB,CAAA;AAEpB;AAEA,MAAM,sBAAsB;CAC1B,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,cAAc,YAAY,gBAAgB;CAClD,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,UAAU,OAAO,UAAyC;EAC9D,IACE,CAAC,cAAc,8BACf,CAAC,cAAc,iCACf,cAAc,WACd;GACA,aAAa,UAAU;GACvB;EACF;EACA,eAAe;EACf,MAAM,cAAc,KAAK;CAC3B;CAEA,MAAM,iBAAiB,YAAY,WAAW,UAAU;CAExD,OACE,oBAAC,cAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,mBAAmB,QAAQ,oBAAC,QAAD,CAAS,CAAA,IAAI,KAAA;EACjD,WACE,mBAAmB,UACjB,oBAAC,QAAD,EAAQ,IAAI,EAAE,YAAY,KAAM,EAAI,CAAA,IAClC,KAAA;EAEN,SAAS;YAER,EAAE,sBAAsB;CACb,CAAA;AAElB;AAEA,MAAM,mBAAmB,EAAE,cAAoC;CAC7D,MAAM,EAAE,UAAU,SAAS,QAAQ,OAAO;CAC1C,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,gBAAgB,eAAe,QAAQ,OAAO;CAEpD,MAAM,eAAe,UAAyC;EAC5D,YAAY,MAAM,aAAa;EAC/B,MAAM,cAAc,KAAK;CAC3B;CAEA,MAAM,oBAAoB;EACxB,YAAY,IAAI;CAClB;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACE,YAAA;EACA,SAAS,oBAAC,YAAD,CAAa,CAAA;EACtB,WACE,OAAO,UACL,oBAAC,OAAD;GACE,SAAQ;GACR,cAAc;IAAE,UAAU;IAAU,YAAY;GAAQ;GACxD,cACE,oBAAC,aAAD;IACE,KAAK,OAAO;IACZ,KAAK,OAAO;IACZ,IAAI;KAAE,OAAO;KAAI,QAAQ;IAAG;cAE3B,OAAO,KAAK;GACF,CAAA;aAGf,oBAAC,cAAD;IACE,KAAK,iBAAiB,QAAQ,SAAS;IACvC,KAAK,QAAQ,WAAW;cAEvB,QAAQ,WAAW,KAAK;GACb,CAAA;EACT,CAAA,IAEP,oBAAC,QAAD;GACE,KAAK,iBAAiB,QAAQ,SAAS;GACvC,KAAK,QAAQ,WAAW;GACxB,IAAI;IAAE,OAAO;IAAI,QAAQ;GAAG;aAE3B,QAAQ,WAAW,KAAK;EACnB,CAAA;EAGZ,SAAS;YAER;CACW,CAAA,GACd,oBAAC,qBAAD;EACY;EACV,MAAM,QAAQ,QAAQ;EACtB,SAAS;YAET,oBAAC,YAAD,EAAY,SAAS,YAAc,CAAA;CAChB,CAAA,CACrB,EAAA,CAAA;AAEN"}

package/dist/esm/components/Header/WalletMenu.js

@@ -0,0 +1,100 @@
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { AvatarMasked } from "../Avatar/Avatar.style.js";
+import { SmallAvatar } from "../Avatar/SmallAvatar.js";
+import { shortenAddress } from "../../utils/wallet.js";
+import { useExplorer } from "../../hooks/useExplorer.js";
+import { DisconnectIconButton } from "./DisconnectIconButton.js";
+import { Avatar, Badge, Box, Button, IconButton, MenuItem } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { getConnectorIcon, useAccount, useWalletMenu } from "@lifi/wallet-management";
+import ContentCopyRounded from "@mui/icons-material/ContentCopyRounded";
+import OpenInNewRounded from "@mui/icons-material/OpenInNewRounded";
+import PowerSettingsNewRounded from "@mui/icons-material/PowerSettingsNewRounded";
+//#region src/components/Header/WalletMenu.tsx
+const WalletMenu = ({ onClose }) => {
+	const { t } = useTranslation();
+	const { accounts } = useAccount();
+	const { getChainById } = useAvailableChains();
+	const { openWalletMenu } = useWalletMenu();
+	const connect = async () => {
+		openWalletMenu();
+		onClose();
+	};
+	const { getAddressLink } = useExplorer();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		children: accounts.map((account) => {
+			const chain = getChainById(account.chainId);
+			const walletAddress = shortenAddress(account.address);
+			const handleCopyAddress = async () => {
+				await navigator.clipboard.writeText(account.address ?? "");
+				onClose();
+			};
+			return /* @__PURE__ */ jsxs(MenuItem, {
+				disableTouchRipple: true,
+				children: [/* @__PURE__ */ jsxs(Box, {
+					sx: {
+						flex: 1,
+						display: "flex",
+						alignItems: "center"
+					},
+					children: [chain?.logoURI ? /* @__PURE__ */ jsx(Badge, {
+						overlap: "circular",
+						anchorOrigin: {
+							vertical: "bottom",
+							horizontal: "right"
+						},
+						badgeContent: /* @__PURE__ */ jsx(SmallAvatar, {
+							src: chain?.logoURI,
+							alt: chain?.name,
+							children: chain?.name[0]
+						}),
+						sx: { marginRight: 1.5 },
+						children: /* @__PURE__ */ jsx(AvatarMasked, {
+							src: getConnectorIcon(account.connector),
+							alt: account.connector?.name,
+							children: account.connector?.name[0]
+						})
+					}) : /* @__PURE__ */ jsx(Avatar, {
+						src: getConnectorIcon(account.connector),
+						alt: account.connector?.name,
+						sx: { marginRight: 1.5 },
+						children: account.connector?.name[0]
+					}), walletAddress]
+				}), /* @__PURE__ */ jsxs(Box, {
+					sx: { ml: 2 },
+					children: [
+						/* @__PURE__ */ jsx(IconButton, {
+							size: "medium",
+							onClick: handleCopyAddress,
+							children: /* @__PURE__ */ jsx(ContentCopyRounded, {})
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							size: "medium",
+							component: "a",
+							onClick: onClose,
+							href: account.address ? getAddressLink(account.address, chain) : void 0,
+							target: "_blank",
+							children: /* @__PURE__ */ jsx(OpenInNewRounded, {})
+						}),
+						/* @__PURE__ */ jsx(DisconnectIconButton, { account })
+					]
+				})]
+			}, account.address);
+		})
+	}), /* @__PURE__ */ jsx(Button, {
+		onClick: connect,
+		fullWidth: true,
+		startIcon: /* @__PURE__ */ jsx(PowerSettingsNewRounded, {}),
+		sx: { marginTop: 1 },
+		children: t("button.connectAnotherWallet")
+	})] });
+};
+//#endregion
+export { WalletMenu };
+
+//# sourceMappingURL=WalletMenu.js.map

package/dist/esm/components/Header/WalletMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletMenu.js","names":[],"sources":["../../../../src/components/Header/WalletMenu.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { DisconnectIconButton } from './DisconnectIconButton.js'\n\nexport const WalletMenu = ({\n  onClose,\n}: {\n  onClose: () => void\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const { accounts } = useAccount()\n  const { getChainById } = useAvailableChains()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async () => {\n    openWalletMenu()\n    onClose()\n  }\n  const { getAddressLink } = useExplorer()\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {accounts.map((account) => {\n          const chain = getChainById(account.chainId)\n          const walletAddress = shortenAddress(account.address)\n          const handleCopyAddress = async () => {\n            await navigator.clipboard.writeText(account.address ?? '')\n            onClose()\n          }\n\n          return (\n            <MenuItem key={account.address} disableTouchRipple>\n              <Box\n                sx={{\n                  flex: 1,\n                  display: 'flex',\n                  alignItems: 'center',\n                }}\n              >\n                {chain?.logoURI ? (\n                  <Badge\n                    overlap=\"circular\"\n                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n                    badgeContent={\n                      <SmallAvatar src={chain?.logoURI} alt={chain?.name}>\n                        {chain?.name[0]}\n                      </SmallAvatar>\n                    }\n                    sx={{ marginRight: 1.5 }}\n                  >\n                    <AvatarMasked\n                      src={getConnectorIcon(account.connector)}\n                      alt={account.connector?.name}\n                    >\n                      {account.connector?.name[0]}\n                    </AvatarMasked>\n                  </Badge>\n                ) : (\n                  <Avatar\n                    src={getConnectorIcon(account.connector)}\n                    alt={account.connector?.name}\n                    sx={{\n                      marginRight: 1.5,\n                    }}\n                  >\n                    {account.connector?.name[0]}\n                  </Avatar>\n                )}\n                {walletAddress}\n              </Box>\n              <Box\n                sx={{\n                  ml: 2,\n                }}\n              >\n                <IconButton size=\"medium\" onClick={handleCopyAddress}>\n                  <ContentCopyRounded />\n                </IconButton>\n                <IconButton\n                  size=\"medium\"\n                  component=\"a\"\n                  onClick={onClose}\n                  href={\n                    account.address\n                      ? getAddressLink(account.address, chain)\n                      : undefined\n                  }\n                  target=\"_blank\"\n                >\n                  <OpenInNewRounded />\n                </IconButton>\n                <DisconnectIconButton account={account} />\n              </Box>\n            </MenuItem>\n          )\n        })}\n      </Box>\n      <Button\n        onClick={connect}\n        fullWidth\n        startIcon={<PowerSettingsNewRounded />}\n        sx={{\n          marginTop: 1,\n        }}\n      >\n        {t('button.connectAnotherWallet')}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,cAAc,EACzB,cAGiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,UAAU,YAAY;EAC1B,eAAe;EACf,QAAQ;CACV;CACA,MAAM,EAAE,mBAAmB,YAAY;CAEvC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;EACjB;YAEC,SAAS,KAAK,YAAY;GACzB,MAAM,QAAQ,aAAa,QAAQ,OAAO;GAC1C,MAAM,gBAAgB,eAAe,QAAQ,OAAO;GACpD,MAAM,oBAAoB,YAAY;IACpC,MAAM,UAAU,UAAU,UAAU,QAAQ,WAAW,EAAE;IACzD,QAAQ;GACV;GAEA,OACE,qBAAC,UAAD;IAAgC,oBAAA;cAAhC,CACE,qBAAC,KAAD;KACE,IAAI;MACF,MAAM;MACN,SAAS;MACT,YAAY;KACd;eALF,CAOG,OAAO,UACN,oBAAC,OAAD;MACE,SAAQ;MACR,cAAc;OAAE,UAAU;OAAU,YAAY;MAAQ;MACxD,cACE,oBAAC,aAAD;OAAa,KAAK,OAAO;OAAS,KAAK,OAAO;iBAC3C,OAAO,KAAK;MACF,CAAA;MAEf,IAAI,EAAE,aAAa,IAAI;gBAEvB,oBAAC,cAAD;OACE,KAAK,iBAAiB,QAAQ,SAAS;OACvC,KAAK,QAAQ,WAAW;iBAEvB,QAAQ,WAAW,KAAK;MACb,CAAA;KACT,CAAA,IAEP,oBAAC,QAAD;MACE,KAAK,iBAAiB,QAAQ,SAAS;MACvC,KAAK,QAAQ,WAAW;MACxB,IAAI,EACF,aAAa,IACf;gBAEC,QAAQ,WAAW,KAAK;KACnB,CAAA,GAET,aACE;QACL,qBAAC,KAAD;KACE,IAAI,EACF,IAAI,EACN;eAHF;MAKE,oBAAC,YAAD;OAAY,MAAK;OAAS,SAAS;iBACjC,oBAAC,oBAAD,CAAqB,CAAA;MACX,CAAA;MACZ,oBAAC,YAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;OACT,MACE,QAAQ,UACJ,eAAe,QAAQ,SAAS,KAAK,IACrC,KAAA;OAEN,QAAO;iBAEP,oBAAC,kBAAD,CAAmB,CAAA;MACT,CAAA;MACZ,oBAAC,sBAAD,EAA+B,QAAU,CAAA;KACtC;MACG;MA9DK,QAAQ,OA8Db;EAEd,CAAC;CACE,CAAA,GACL,oBAAC,QAAD;EACE,SAAS;EACT,WAAA;EACA,WAAW,oBAAC,yBAAD,CAA0B,CAAA;EACrC,IAAI,EACF,WAAW,EACb;YAEC,EAAE,6BAA6B;CAC1B,CAAA,CACR,EAAA,CAAA;AAEN"}

package/dist/esm/components/Header/WalletMenu.style.js

@@ -0,0 +1,25 @@
+import { Menu, menuClasses, menuItemClasses, styled, svgIconClasses } from "@mui/material";
+//#region src/components/Header/WalletMenu.style.tsx
+const WalletMenuContainer = styled(Menu)(({ theme }) => ({ [`& .${menuClasses.paper}`]: {
+	borderRadius: theme.vars.shape.borderRadius,
+	color: theme.vars.palette.text.primary,
+	boxShadow: "0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)",
+	padding: theme.spacing(2),
+	[`& .${menuClasses.list}`]: { padding: 0 },
+	[`& .${menuItemClasses.root}`]: {
+		borderRadius: theme.vars.shape.borderRadiusSecondary,
+		padding: theme.spacing(1, 0, 1, 1),
+		[`& .${svgIconClasses.root}`]: {
+			fontSize: 20,
+			color: theme.vars.palette.text.primary
+		},
+		":hover": {
+			background: "none",
+			cursor: "default"
+		}
+	}
+} }));
+//#endregion
+export { WalletMenuContainer };
+
+//# sourceMappingURL=WalletMenu.style.js.map

package/dist/esm/components/Header/WalletMenu.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletMenu.style.js","names":["MuiMenu"],"sources":["../../../../src/components/Header/WalletMenu.style.tsx"],"sourcesContent":["import {\n  Menu as MuiMenu,\n  menuClasses,\n  menuItemClasses,\n  styled,\n  svgIconClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const WalletMenuContainer: React.FC<\n  React.ComponentProps<typeof MuiMenu>\n> = styled(MuiMenu)(({ theme }) => ({\n  [`& .${menuClasses.paper}`]: {\n    borderRadius: theme.vars.shape.borderRadius,\n    color: theme.vars.palette.text.primary,\n    boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',\n    padding: theme.spacing(2),\n    [`& .${menuClasses.list}`]: {\n      padding: 0,\n    },\n    [`& .${menuItemClasses.root}`]: {\n      borderRadius: theme.vars.shape.borderRadiusSecondary,\n      padding: theme.spacing(1, 0, 1, 1),\n      [`& .${svgIconClasses.root}`]: {\n        fontSize: 20,\n        color: theme.vars.palette.text.primary,\n      },\n      ':hover': {\n        background: 'none',\n        cursor: 'default',\n      },\n    },\n  },\n}))\n"],"mappings":";;AASA,MAAa,sBAET,OAAOA,IAAO,GAAG,EAAE,aAAa,GACjC,MAAM,YAAY,UAAU;CAC3B,cAAc,MAAM,KAAK,MAAM;CAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;CACX,SAAS,MAAM,QAAQ,CAAC;EACvB,MAAM,YAAY,SAAS,EAC1B,SAAS,EACX;EACC,MAAM,gBAAgB,SAAS;EAC9B,cAAc,MAAM,KAAK,MAAM;EAC/B,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;GAChC,MAAM,eAAe,SAAS;GAC7B,UAAU;GACV,OAAO,MAAM,KAAK,QAAQ,KAAK;EACjC;EACA,UAAU;GACR,YAAY;GACZ,QAAQ;EACV;CACF;AACF,EACF,EAAE"}