@lifi/widget 4.0.0-beta.1 → 4.0.0-beta.10

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

@@ -1,95 +1,71 @@
-import { AppBar, Avatar, Box, Button, buttonClasses, styled, } from '@mui/material';
-import { getAvatarMask } from '../Avatar/utils.js';
-export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
-    backgroundColor: 'transparent',
-    ...theme.applyStyles('dark', {
-        backgroundColor: 'transparent',
-    }),
-    color: theme.vars.palette.text.primary,
-    flexDirection: 'row',
-    alignItems: 'center',
-    position: 'relative',
+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"
 }));
-export const Container = 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(0.5),
-        padding: theme.spacing(1.5, 3, 1.5, 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 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, 1.5, 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%"
+		} : {}
+	};
 });
-export 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: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-    },
-    ...theme.applyStyles('dark', {
-        backgroundColor: 'transparent',
-        '&:hover': {
-            backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-        },
-    }),
-    [`.${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 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: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` },
+	...theme.applyStyles("dark", {
+		backgroundColor: "transparent",
+		"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` }
+	}),
+	[`.${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 }
 }));
-export 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 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) }
+	}
 }));
-export const HeaderControlsContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    gap: theme.spacing(0.5),
-    ...(theme.navigation.edge && {
-        '& 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) } }
 }));
-export const WalletAvatar = styled(Avatar, {
-    shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',
-})(({ avatarSize = 24, badgeSize = 12 }) => ({
-    mask: getAvatarMask(badgeSize),
-    width: avatarSize,
-    height: avatarSize,
+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

@@ -1 +1 @@
-{"version":3,"file":"Header.style.js","sourceRoot":"","sources":["../../../../src/components/Header/Header.style.ts"],"names":[],"mappings":"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"}
+{"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, 1.5, 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: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: 'transparent',\n    '&:hover': {\n      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n    },\n  }),\n  [`.${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,OAAO,EAAE,EAAE,aAAa;CACjC,iBAAiB;CACjB,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;CACF,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,eAAe;CACf,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAaA,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EAAwB,EAAE,OAAO,aAAa;AAC9C,QAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU,SAAS,WAAW;EAC9B,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,GAAI;EACvB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,EAAE;EACtC,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;GACR,GACD,EAAE;EACP;EACD;AAEF,MAAa,eAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,cACvC,CAAC,EAA4B,EAAE,YAAY,aAAa;CACvD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,GAAG,IAAI;CAC9B,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB;EACjB,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;EACF,CAAC;EACD,IAAI,cAAc,QAAQ,uBAAuB,EAChD,UAAU,QACX;EACA,IAAI,cAAc,UAAU,uBAAuB,EAClD,UAAU,QACX;CACD,GAAI,MAAM,WAAW,QAAQ,EAC3B,aAAa,aAAa,MAAM,QAAQ,MAAM,GAAG,GAClD;CACF,EAAE;AAEH,MAAa,wBAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,OAAO;CACP,SAAS;CACT,gBAAgB;CAEhB,GAAI,MAAM,WAAW,QAAQ;EAC3B,0BAA0B,EACxB,YAAY,MAAM,QAAQ,GAAG,EAC9B;EACD,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC;EACF;CACF,EAAE;AAEH,MAAa,0BAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,GAAI;CACvB,GAAI,MAAM,WAAW,QAAQ,EAC3B,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC,EACF;CACF,EAAE;AAEH,MAAa,eAKT,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,aAChE,CAAC,EACC,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,MAAM,cAAc,UAAU;CAC9B,OAAO;CACP,QAAQ;CACT,EACF"}

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

@@ -1,43 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAccount } from '@lifi/wallet-management';
-import { Box, Typography } from '@mui/material';
-import { useLocation } from '@tanstack/react-router';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useHeaderStore } from '../../stores/header/useHeaderStore.js';
-import { HiddenUI } from '../../types/widget.js';
-import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils/navigationRoutes.js';
-import { BackButton } from './BackButton.js';
-import { CloseDrawerButton } from './CloseDrawerButton.js';
-import { HeaderAppBar, HeaderControlsContainer } from './Header.style.js';
-import { SettingsButton } from './SettingsButton.js';
-import { SplitNavigationTabs } from './SplitNavigationTabs.js';
-import { TransactionHistoryButton } from './TransactionHistoryButton.js';
-export const NavigationHeader = () => {
-    const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } = 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);
-    // Show tabs when split is undefined (default tabs) or an object with defaultTab
-    // Hide tabs when split is a string ('bridge' or 'swap' - single mode)
-    const showSplitOptions = subvariant === 'split' &&
-        !hasPath &&
-        typeof subvariantOptions?.split !== 'string';
-    return (_jsxs(HeaderAppBar, { elevation: 0, sx: { paddingTop: 1, paddingBottom: 0.5 }, children: [backButtonRoutes.includes(path) ? _jsx(BackButton, {}) : null, showSplitOptions ? (_jsx(Box, { sx: { flex: 1, marginRight: 1 }, children: _jsx(SplitNavigationTabs, {}) })) : (_jsx(Typography, { align: hasPath ? 'center' : 'left', noWrap: defaultUI?.navigationHeaderTitleNoWrap ?? true, sx: {
-                    fontSize: hasPath ? 18 : 24,
-                    fontWeight: '700',
-                    flex: 1,
-                }, children: title })), pathname === navigationRoutes.home ? (_jsxs(HeaderControlsContainer, { children: [account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (_jsx(TransactionHistoryButton, {})), _jsx(SettingsButton, {}), variant === 'drawer' &&
-                        !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (_jsx(CloseDrawerButton, { header: "navigation" })) : null] })) : (element || (_jsx(Box, { sx: {
-                    width: 28,
-                    height: 40,
-                } })))] }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useHeaderStore } from "../../stores/header/useHeaderStore.js";
+import { HiddenUI } from "../../types/widget.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 { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } = 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 = subvariant === "split" && !hasPath && typeof subvariantOptions?.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?.includes(HiddenUI.History) && /* @__PURE__ */ jsx(ActivitiesButton, {}),
+				/* @__PURE__ */ jsx(SettingsButton, {}),
+				variant === "drawer" && !hiddenUI?.includes(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

@@ -1 +1 @@
-{"version":3,"file":"NavigationHeader.js","sourceRoot":"","sources":["../../../../src/components/Header/NavigationHeader.tsx"],"names":[],"mappings":"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"}
+{"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"}

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

@@ -1,23 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Settings from '@mui/icons-material/Settings';
-import { Tooltip } from '@mui/material';
-import { useNavigate } from '@tanstack/react-router';
-import { useTranslation } from 'react-i18next';
-import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { SettingsIconBadge, SettingsIconButton, } from './SettingsButton.style.js';
-export const SettingsButton = () => {
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const { isCustomRouteSettings, isRouteSettingsWithWarnings } = useSettingMonitor();
-    const variant = isRouteSettingsWithWarnings
-        ? 'warning'
-        : isCustomRouteSettings
-            ? 'info'
-            : undefined;
-    const tooltipMessage = variant
-        ? t('tooltip.settingsModified')
-        : t('header.settings');
-    return (_jsx(Tooltip, { title: tooltipMessage, children: _jsx(SettingsIconButton, { size: "medium", onClick: () => navigate({ to: navigationRoutes.settings }), variant: variant, children: variant ? (_jsx(SettingsIconBadge, { variant: "dot", color: variant, children: _jsx(Settings, {}) })) : (_jsx(Settings, {})) }) }));
+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

@@ -1 +1 @@
-{"version":3,"file":"SettingsButton.js","sourceRoot":"","sources":["../../../../src/components/Header/SettingsButton.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,8BAA8B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EACL,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,2BAA2B,CAAA;AAElC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAE9B,MAAM,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,GAC1D,iBAAiB,EAAE,CAAA;IAErB,MAAM,OAAO,GAAG,2BAA2B;QACzC,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,qBAAqB;YACrB,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,SAAS,CAAA;IAEf,MAAM,cAAc,GAAG,OAAO;QAC5B,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC;QAC/B,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAA;IAExB,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAE,cAAc,YAC5B,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAC1D,OAAO,EAAE,OAAO,YAEf,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,iBAAiB,IAAC,OAAO,EAAC,KAAK,EAAC,KAAK,EAAE,OAAO,YAC7C,KAAC,QAAQ,KAAG,GACM,CACrB,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,KAAG,CACb,GACkB,GACb,CACX,CAAA;AACH,CAAC,CAAA"}
+{"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,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAE9B,MAAM,EAAE,uBAAuB,gCAC7B,mBAAmB;CAErB,MAAM,UAAU,8BACZ,YACA,wBACE,SACA,KAAA;AAMN,QACE,oBAAC,SAAD;EAAS,OALY,UACnB,EAAE,2BAA2B,GAC7B,EAAE,kBAAkB;YAIpB,oBAAC,oBAAD;GACE,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,UAAU,CAAC;GACjD;aAER,UACC,oBAAC,mBAAD;IAAmB,SAAQ;IAAM,OAAO;cACtC,oBAAC,UAAD,EAAY,CAAA;IACM,CAAA,GAEpB,oBAAC,UAAD,EAAY,CAAA;GAEK,CAAA;EACb,CAAA"}

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

@@ -1,47 +1,38 @@
-import { badgeClasses, IconButton, Badge as MuiBadge, styled, } from '@mui/material';
-export const SettingsIconBadge = styled(MuiBadge)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(1.25),
-    [`.${badgeClasses.badge}`]: {
-        width: 10,
-        height: 10,
-        borderRadius: '50%',
-        transform: 'translate(70%, -70%)',
-    },
+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%)"
+	}
 }));
-export const SettingsIconButton = styled(IconButton, {
-    shouldForwardProp: (props) => props !== 'variant',
-})(({ theme, variant }) => {
-    switch (variant) {
-        case 'info':
-            return {
-                backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
-                '&:hover': {
-                    backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.info.mainChannel} / 0.12) 80%, black)`,
-                },
-                ...theme.applyStyles('dark', {
-                    backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
-                    '&:hover': {
-                        backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.info.mainChannel} / 0.16) 80%, black)`,
-                    },
-                }),
-            };
-        case 'warning':
-            return {
-                backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
-                '&:hover': {
-                    backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.32) 80%, black)`,
-                },
-                ...theme.applyStyles('dark', {
-                    backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
-                    '&:hover': {
-                        backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.16) 80%, black)`,
-                    },
-                }),
-            };
-        default:
-            return {};
-    }
+const SettingsIconButton = styled(IconButton, { shouldForwardProp: (props) => props !== "variant" })(({ theme, variant }) => {
+	switch (variant) {
+		case "info": return {
+			backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,
+			"&:hover": { backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)` },
+			...theme.applyStyles("dark", {
+				backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+				"&:hover": { backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)` }
+			})
+		};
+		case "warning": return {
+			backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+			"&:hover": { backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.32) 80%, black)` },
+			...theme.applyStyles("dark", {
+				backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
+				"&:hover": { backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.16) 80%, black)` }
+			})
+		};
+		default: return {};
+	}
 });
+//#endregion
+export { SettingsIconBadge, SettingsIconButton };
+
 //# sourceMappingURL=SettingsButton.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsButton.style.js","sourceRoot":"","sources":["../../../../src/components/Header/SettingsButton.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,UAAU,EACV,KAAK,IAAI,QAAQ,EACjB,MAAM,GACP,MAAM,eAAe,CAAA;AAEtB,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChE,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;IACxB,CAAC,IAAI,YAAY,CAAC,KAAK,EAAE,CAAC,EAAE;QAC1B,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAC,CAAA;AAMH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,EAAE;IACnD,iBAAiB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS;CAClD,CAAC,CAA0B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACjD,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,MAAM;YACT,OAAO;gBACL,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,UAAU;gBACtE,SAAS,EAAE;oBACT,eAAe,EAAE,2BAA2B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,sBAAsB;iBACtG;gBACD,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;oBAC3B,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,UAAU;oBACtE,SAAS,EAAE;wBACT,eAAe,EAAE,2BAA2B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,sBAAsB;qBACtG;iBACF,CAAC;aACH,CAAA;QACH,KAAK,SAAS;YACZ,OAAO;gBACL,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,UAAU;gBACzE,SAAS,EAAE;oBACT,eAAe,EAAE,2BAA2B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,sBAAsB;iBACzG;gBACD,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;oBAC3B,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,UAAU;oBACzE,SAAS,EAAE;wBACT,eAAe,EAAE,2BAA2B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,sBAAsB;qBACzG;iBACF,CAAC;aACH,CAAA;QACH;YACE,OAAO,EAAE,CAAA;IACb,CAAC;AACH,CAAC,CAAC,CAAA"}
+{"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: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,\n        '&:hover': {\n          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,\n          '&:hover': {\n            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,\n          },\n        }),\n      }\n    case 'warning':\n      return {\n        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.32) 80%, black)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.16) 80%, black)`,\n          },\n        }),\n      }\n    default:\n      return {}\n  }\n})\n"],"mappings":";;AAQA,MAAa,oBAET,OAAOA,MAAS,EAAE,EAAE,aAAa;CACnC,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,KAAK;EACvB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;EACZ;CACF,EAAE;AAMH,MAAa,qBAET,OAAO,YAAY,EACrB,oBAAoB,UAAU,UAAU,WACzC,CAAC,EAA2B,EAAE,OAAO,cAAc;AAClD,SAAQ,SAAR;EACE,KAAK,OACH,QAAO;GACL,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY;GAC7D,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY,WAC9D;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY;IAC7D,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY,WAC9D;IACF,CAAC;GACH;EACH,KAAK,UACH,QAAO;GACL,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,QAAQ,YAAY;GAChE,WAAW,EACT,iBAAiB,2BAA2B,MAAM,KAAK,QAAQ,QAAQ,YAAY,uBACpF;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,QAAQ,YAAY;IAChE,WAAW,EACT,iBAAiB,2BAA2B,MAAM,KAAK,QAAQ,QAAQ,YAAY,uBACpF;IACF,CAAC;GACH;EACH,QACE,QAAO,EAAE;;EAEb"}

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

@@ -1,21 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTranslation } from 'react-i18next';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
-import { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js';
-export const SplitNavigationTabs = () => {
-    const { t } = useTranslation();
-    const [state, setState] = useSplitSubvariantStore((state) => [
-        state.state,
-        state.setState,
-    ]);
-    const { setFieldValue } = useFieldActions();
-    const handleChange = (_, value) => {
-        setFieldValue('fromAmount', '');
-        setFieldValue('fromToken', '');
-        setFieldValue('toToken', '');
-        setState(value === 0 ? 'swap' : 'bridge');
-    };
-    return (_jsxs(NavigationTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", children: [_jsx(NavigationTab, { label: t('header.swap'), disableRipple: true }), _jsx(NavigationTab, { label: t('header.bridge'), disableRipple: true })] }));
+import { useSplitSubvariantStore } from "../../stores/settings/useSplitSubvariantStore.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] = useSplitSubvariantStore((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

@@ -1 +1 @@
-{"version":3,"file":"SplitNavigationTabs.js","sourceRoot":"","sources":["../../../../src/components/Header/SplitNavigationTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAA;AAC1F,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAEzE,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,uBAAuB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC;QAC3D,KAAK,CAAC,KAAK;QACX,KAAK,CAAC,QAAQ;KACf,CAAC,CAAA;IAEF,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,EAAE,CAAA;IAC3C,MAAM,YAAY,GAAG,CAAC,CAAuB,EAAE,KAAa,EAAE,EAAE;QAC9D,aAAa,CAAC,YAAY,EAAE,EAAE,CAAC,CAAA;QAC/B,aAAa,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;QAC9B,aAAa,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;QAC5B,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,OAAO,CACL,MAAC,cAAc,IACb,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC/B,QAAQ,EAAE,YAAY,gBACX,MAAM,aAEjB,KAAC,aAAa,IAAC,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,aAAa,SAAG,EACxD,KAAC,aAAa,IAAC,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EAAE,aAAa,SAAG,IAC3C,CAClB,CAAA;AACH,CAAC,CAAA"}
+{"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 { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\nexport const SplitNavigationTabs = (): JSX.Element => {\n  const { t } = useTranslation()\n  const [state, setState] = useSplitSubvariantStore((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,gBAAgB;CAC9B,MAAM,CAAC,OAAO,YAAY,yBAAyB,UAAU,CAC3D,MAAM,OACN,MAAM,SACP,CAAC;CAEF,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,gBAAgB,GAAyB,UAAkB;AAC/D,gBAAc,cAAc,GAAG;AAC/B,gBAAc,aAAa,GAAG;AAC9B,gBAAc,WAAW,GAAG;AAC5B,WAAS,UAAU,IAAI,SAAS,SAAS;;AAG3C,QACE,qBAAC,gBAAD;EACE,OAAO,UAAU,SAAS,IAAI;EAC9B,UAAU;EACV,cAAW;YAHb,CAKE,oBAAC,eAAD;GAAe,OAAO,EAAE,cAAc;GAAE,eAAA;GAAgB,CAAA,EACxD,oBAAC,eAAD;GAAe,OAAO,EAAE,gBAAgB;GAAE,eAAA;GAAgB,CAAA,CAC3C"}