@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/components/IconCircle/IconCircle.js

@@ -0,0 +1,19 @@
+import { IconCircleRoot, getStatusColor } from "./IconCircle.style.js";
+import { statusIcons } from "./statusIcons.js";
+import { useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/IconCircle/IconCircle.tsx
+const IconCircle = ({ status, size = 90, ...rest }) => {
+	const colorConfig = getStatusColor(status, useTheme());
+	const Icon = statusIcons[status];
+	return /* @__PURE__ */ jsx(IconCircleRoot, {
+		colorConfig,
+		circleSize: size,
+		...rest,
+		children: /* @__PURE__ */ jsx(Icon, {})
+	});
+};
+//#endregion
+export { IconCircle };
+
+//# sourceMappingURL=IconCircle.js.map

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

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

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

@@ -0,0 +1,57 @@
+import { Box, styled } from "@mui/material";
+//#region src/components/IconCircle/IconCircle.style.tsx
+const getStatusColor = (status, theme) => {
+	switch (status) {
+		case "success": return {
+			color: theme.vars.palette.success.main,
+			mixAmount: 12,
+			lightDarken: 0,
+			darkDarken: 0
+		};
+		case "error": return {
+			color: theme.vars.palette.error.main,
+			mixAmount: 12,
+			lightDarken: 0,
+			darkDarken: 0
+		};
+		case "warning": return {
+			color: theme.vars.palette.warning.main,
+			mixAmount: 48,
+			lightDarken: .32,
+			darkDarken: 0
+		};
+		case "info": return {
+			color: theme.vars.palette.info.main,
+			mixAmount: 12,
+			lightDarken: 0,
+			darkDarken: 0
+		};
+	}
+};
+const iconSizeRatio = 48 / 90;
+const IconCircleRoot = styled(Box, { shouldForwardProp: (prop) => prop !== "colorConfig" && prop !== "circleSize" })(({ theme, colorConfig, circleSize }) => {
+	const svgSize = Math.round(circleSize * iconSizeRatio);
+	return {
+		backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
+		borderRadius: "50%",
+		width: circleSize,
+		height: circleSize,
+		display: "grid",
+		position: "relative",
+		placeItems: "center",
+		"& > svg": {
+			color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,
+			width: svgSize,
+			height: svgSize
+		},
+		...theme.applyStyles("dark", { "& > svg": {
+			color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,
+			width: svgSize,
+			height: svgSize
+		} })
+	};
+});
+//#endregion
+export { IconCircleRoot, getStatusColor };
+
+//# sourceMappingURL=IconCircle.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconCircle.style.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { StatusIcon } from './statusIcons'\n\nexport const iconCircleSize = 90\n\ninterface StatusColorConfig {\n  color: string\n  mixAmount: number\n  lightDarken: number\n  darkDarken: number\n}\n\nexport const getStatusColor = (\n  status: StatusIcon,\n  theme: Theme\n): StatusColorConfig => {\n  switch (status) {\n    case 'success':\n      return {\n        color: theme.vars.palette.success.main,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case 'error':\n      return {\n        color: theme.vars.palette.error.main,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case 'warning':\n      return {\n        color: theme.vars.palette.warning.main,\n        mixAmount: 48,\n        lightDarken: 0.32,\n        darkDarken: 0,\n      }\n    case 'info':\n      return {\n        color: theme.vars.palette.info.main,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n  }\n}\n\nexport const iconSizeRatio: number = 48 / 90\n\nexport const IconCircleRoot: React.FC<\n  React.ComponentProps<typeof Box> & {\n    colorConfig: StatusColorConfig\n    circleSize: number\n  }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'colorConfig' && prop !== 'circleSize',\n})<{ colorConfig: StatusColorConfig; circleSize: number }>(\n  ({ theme, colorConfig, circleSize }) => {\n    const svgSize = Math.round(circleSize * iconSizeRatio)\n    return {\n      backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,\n      borderRadius: '50%',\n      width: circleSize,\n      height: circleSize,\n      display: 'grid',\n      position: 'relative',\n      placeItems: 'center',\n      '& > svg': {\n        color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,\n        width: svgSize,\n        height: svgSize,\n      },\n      ...theme.applyStyles('dark', {\n        '& > svg': {\n          color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,\n          width: svgSize,\n          height: svgSize,\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;AAcA,MAAa,kBACX,QACA,UACsB;CACtB,QAAQ,QAAR;EACE,KAAK,WACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;EACd;EACF,KAAK,SACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,WAAW;GACX,aAAa;GACb,YAAY;EACd;EACF,KAAK,WACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;EACd;EACF,KAAK,QACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,WAAW;GACX,aAAa;GACb,YAAY;EACd;CACJ;AACF;AAEA,MAAa,gBAAwB,KAAK;AAE1C,MAAa,iBAKT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,iBAAiB,SAAS,aAClE,CAAC,GACE,EAAE,OAAO,aAAa,iBAAiB;CACtC,MAAM,UAAU,KAAK,MAAM,aAAa,aAAa;CACrD,OAAO;EACL,iBAAiB,sBAAsB,YAAY,MAAM,GAAG,YAAY,UAAU,KAAK,MAAM,KAAK,QAAQ,WAAW,MAAM;EAC3H,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,sBAAsB,YAAY,MAAM,IAAI,IAAI,YAAY,eAAe,IAAI;GACtF,OAAO;GACP,QAAQ;EACV;EACA,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,sBAAsB,YAAY,MAAM,IAAI,IAAI,YAAY,cAAc,IAAI;GACrF,OAAO;GACP,QAAQ;EACV,EACF,CAAC;CACH;AACF,CACF"}

package/dist/esm/components/IconCircle/statusIcons.js

@@ -0,0 +1,15 @@
+import ErrorRounded from "@mui/icons-material/ErrorRounded";
+import Done from "@mui/icons-material/Done";
+import InfoRounded from "@mui/icons-material/InfoRounded";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/components/IconCircle/statusIcons.ts
+const statusIcons = {
+	success: Done,
+	error: ErrorRounded,
+	warning: WarningRounded,
+	info: InfoRounded
+};
+//#endregion
+export { statusIcons };
+
+//# sourceMappingURL=statusIcons.js.map

package/dist/esm/components/IconCircle/statusIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusIcons.js","names":[],"sources":["../../../../src/components/IconCircle/statusIcons.ts"],"sourcesContent":["import Done from '@mui/icons-material/Done'\nimport ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport InfoRounded from '@mui/icons-material/InfoRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport type { SvgIcon } from '@mui/material'\n\nexport type StatusIcon = 'success' | 'error' | 'warning' | 'info'\n\nexport const statusIcons: Record<StatusIcon, typeof SvgIcon> = {\n  success: Done,\n  error: ErrorRounded,\n  warning: WarningRounded,\n  info: InfoRounded,\n}\n"],"mappings":";;;;;AAQA,MAAa,cAAkD;CAC7D,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;AACR"}

package/dist/esm/components/IconTypography.js

@@ -0,0 +1,11 @@
+import { Box, styled } from "@mui/material";
+//#region src/components/IconTypography.ts
+const IconTypography = styled(Box)(({ theme }) => ({
+	color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
+	lineHeight: 0,
+	...theme.applyStyles("dark", { color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)` })
+}));
+//#endregion
+export { IconTypography };
+
+//# sourceMappingURL=IconTypography.js.map

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

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

package/dist/esm/components/Initializer.js

@@ -0,0 +1,10 @@
+import { useInitializer } from "../hooks/useInitializer.js";
+//#region src/components/Initializer.tsx
+const Initializer = () => {
+	useInitializer();
+	return null;
+};
+//#endregion
+export { Initializer };
+
+//# sourceMappingURL=Initializer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Initializer.js","names":[],"sources":["../../../src/components/Initializer.tsx"],"sourcesContent":["import { useInitializer } from '../hooks/useInitializer.js'\n\nexport const Initializer: React.FC = () => {\n  useInitializer()\n  return null\n}\n"],"mappings":";;AAEA,MAAa,oBAA8B;CACzC,eAAe;CACf,OAAO;AACT"}

package/dist/esm/components/Input.js

@@ -0,0 +1,15 @@
+import { InputBase, inputBaseClasses, styled } from "@mui/material";
+//#region src/components/Input.tsx
+const Input = styled(InputBase)(({ theme }) => ({
+	paddingRight: theme.spacing(2),
+	[`.${inputBaseClasses.input}`]: {
+		padding: theme.spacing(1.5, 1, 1.5, 2),
+		height: "2.875em",
+		boxSizing: "inherit"
+	},
+	fontWeight: 500
+}));
+//#endregion
+export { Input };
+
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/Input.tsx"],"sourcesContent":["import { InputBase, inputBaseClasses, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const Input: React.FC<React.ComponentProps<typeof InputBase>> = styled(\n  InputBase\n)(({ theme }) => ({\n  paddingRight: theme.spacing(2),\n  [`.${inputBaseClasses.input}`]: {\n    padding: theme.spacing(1.5, 1, 1.5, 2),\n    height: '2.875em',\n    boxSizing: 'inherit',\n  },\n  fontWeight: 500,\n}))\n"],"mappings":";;AAGA,MAAa,QAA0D,OACrE,SACF,GAAG,EAAE,aAAa;CAChB,cAAc,MAAM,QAAQ,CAAC;EAC5B,IAAI,iBAAiB,UAAU;EAC9B,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,CAAC;EACrC,QAAQ;EACR,WAAW;CACb;CACA,YAAY;AACd,EAAE"}

package/dist/esm/components/ListItem/ListItem.js

@@ -0,0 +1,23 @@
+import { ListItem, listItemSecondaryActionClasses, listItemTextClasses, styled } from "@mui/material";
+//#region src/components/ListItem/ListItem.tsx
+const ListItem$1 = styled(ListItem)(({ theme }) => ({
+	height: 64,
+	flexDirection: "column",
+	alignItems: "flex-start",
+	padding: theme.spacing(0, 1.5),
+	[`.${listItemSecondaryActionClasses.root}`]: { right: theme.spacing(3) },
+	[`& .${listItemTextClasses.secondary}`]: {
+		fontSize: 12,
+		fontWeight: 500
+	},
+	[`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]: {
+		lineHeight: 1.3334,
+		textOverflow: "ellipsis",
+		overflow: "hidden",
+		whiteSpace: "nowrap"
+	}
+}));
+//#endregion
+export { ListItem$1 as ListItem };
+
+//# sourceMappingURL=ListItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","names":["ListItem","MuiListItem"],"sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  listItemSecondaryActionClasses,\n  listItemTextClasses,\n  ListItem as MuiListItem,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItem: React.FC<React.ComponentProps<typeof MuiListItem>> =\n  styled(MuiListItem)(({ theme }) => ({\n    height: 64,\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    padding: theme.spacing(0, 1.5),\n    [`.${listItemSecondaryActionClasses.root}`]: {\n      right: theme.spacing(3),\n    },\n    [`& .${listItemTextClasses.secondary}`]: {\n      fontSize: 12,\n      fontWeight: 500,\n    },\n    [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]:\n      {\n        lineHeight: 1.3334,\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n      },\n  }))\n"],"mappings":";;AAQA,MAAaA,aACX,OAAOC,QAAW,GAAG,EAAE,aAAa;CAClC,QAAQ;CACR,eAAe;CACf,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG;EAC5B,IAAI,+BAA+B,SAAS,EAC3C,OAAO,MAAM,QAAQ,CAAC,EACxB;EACC,MAAM,oBAAoB,cAAc;EACvC,UAAU;EACV,YAAY;CACd;EACC,MAAM,oBAAoB,QAAQ,OAAO,oBAAoB,cAC5D;EACE,YAAY;EACZ,cAAc;EACd,UAAU;EACV,YAAY;CACd;AACJ,EAAE"}

package/dist/esm/components/ListItem/ListItemButton.js

@@ -0,0 +1,13 @@
+import { ListItemButton as ListItemButton$2 } from "../ListItemButton.js";
+import { styled } from "@mui/material";
+//#region src/components/ListItem/ListItemButton.tsx
+const ListItemButton$1 = styled(ListItemButton$2)(({ theme }) => ({
+	paddingLeft: theme.spacing(1.5),
+	paddingRight: theme.spacing(1.5),
+	height: 64,
+	width: "100%"
+}));
+//#endregion
+export { ListItemButton$1 as ListItemButton };
+
+//# sourceMappingURL=ListItemButton.js.map

package/dist/esm/components/ListItem/ListItemButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemButton.js","names":["ListItemButton","ListItemButtonBase"],"sources":["../../../../src/components/ListItem/ListItemButton.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'\n\nexport const ListItemButton: React.FC<\n  React.ComponentProps<typeof ListItemButtonBase>\n> = styled(ListItemButtonBase)(({ theme }) => ({\n  paddingLeft: theme.spacing(1.5),\n  paddingRight: theme.spacing(1.5),\n  height: 64,\n  width: '100%',\n}))\n"],"mappings":";;;AAIA,MAAaA,mBAET,OAAOC,gBAAkB,GAAG,EAAE,aAAa;CAC7C,aAAa,MAAM,QAAQ,GAAG;CAC9B,cAAc,MAAM,QAAQ,GAAG;CAC/B,QAAQ;CACR,OAAO;AACT,EAAE"}

package/dist/esm/components/ListItemButton.js

@@ -0,0 +1,30 @@
+import { ListItemButton, listItemButtonClasses, styled } from "@mui/material";
+//#region src/components/ListItemButton.tsx
+const ListItemButton$1 = styled(ListItemButton)(({ theme }) => {
+	return {
+		borderRadius: theme.vars.shape.borderRadius,
+		paddingLeft: theme.spacing(1.5),
+		height: 56,
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
+		[`&.${listItemButtonClasses.selected}`]: {
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
+			"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)` },
+			...theme.applyStyles("dark", {
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
+				"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)` }
+			})
+		},
+		variants: [{
+			props: ({ disabled }) => disabled,
+			style: {
+				opacity: .5,
+				cursor: "auto",
+				"&:hover": { backgroundColor: "none" }
+			}
+		}]
+	};
+});
+//#endregion
+export { ListItemButton$1 as ListItemButton };
+
+//# sourceMappingURL=ListItemButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemButton.js","names":["ListItemButton","MuiListItemButton"],"sources":["../../../src/components/ListItemButton.tsx"],"sourcesContent":["import {\n  listItemButtonClasses,\n  ListItemButton as MuiListItemButton,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItemButton: React.FC<\n  React.ComponentProps<typeof MuiListItemButton>\n> = styled(MuiListItemButton)(({ theme }) => {\n  return {\n    borderRadius: theme.vars.shape.borderRadius,\n    paddingLeft: theme.spacing(1.5),\n    height: 56,\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    },\n    [`&.${listItemButtonClasses.selected}`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n      '&:hover': {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n      },\n      ...theme.applyStyles('dark', {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n        },\n      }),\n    },\n    variants: [\n      {\n        props: ({ disabled }) => disabled,\n        style: {\n          opacity: 0.5,\n          cursor: 'auto',\n          '&:hover': {\n            backgroundColor: 'none',\n          },\n        },\n      },\n    ],\n  }\n})\n"],"mappings":";;AAOA,MAAaA,mBAET,OAAOC,cAAiB,GAAG,EAAE,YAAY;CAC3C,OAAO;EACL,cAAc,MAAM,KAAK,MAAM;EAC/B,aAAa,MAAM,QAAQ,GAAG;EAC9B,QAAQ;EACR,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;GACC,KAAK,sBAAsB,aAAa;GACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;GACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,cAC3E;GACA,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;IACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,cAC3E;GACF,CAAC;EACH;EACA,UAAU,CACR;GACE,QAAQ,EAAE,eAAe;GACzB,OAAO;IACL,SAAS;IACT,QAAQ;IACR,WAAW,EACT,iBAAiB,OACnB;GACF;EACF,CACF;CACF;AACF,CAAC"}

package/dist/esm/components/ListItemText.js

@@ -0,0 +1,7 @@
+import { ListItemText, listItemTextClasses, styled } from "@mui/material";
+//#region src/components/ListItemText.tsx
+const ListItemText$1 = styled(ListItemText)(() => ({ [`.${listItemTextClasses.primary}`]: { fontWeight: 500 } }));
+//#endregion
+export { ListItemText$1 as ListItemText };
+
+//# sourceMappingURL=ListItemText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemText.js","names":["ListItemText","MuiListItemText"],"sources":["../../../src/components/ListItemText.tsx"],"sourcesContent":["import {\n  listItemTextClasses,\n  ListItemText as MuiListItemText,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItemText: React.FC<\n  React.ComponentProps<typeof MuiListItemText>\n> = styled(MuiListItemText)(() => ({\n  [`.${listItemTextClasses.primary}`]: {\n    fontWeight: 500,\n  },\n}))\n"],"mappings":";;AAOA,MAAaA,iBAET,OAAOC,YAAe,SAAS,GAChC,IAAI,oBAAoB,YAAY,EACnC,YAAY,IACd,EACF,EAAE"}

package/dist/esm/components/Menu.js

@@ -0,0 +1,21 @@
+import { Menu, menuClasses, menuItemClasses, styled, svgIconClasses } from "@mui/material";
+//#region src/components/Menu.tsx
+const Menu$1 = styled(Menu)(({ theme }) => ({ [`& .${menuClasses.paper}`]: {
+	borderRadius: theme.vars.shape.borderRadius,
+	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, 2, 1, 1),
+		[`& .${svgIconClasses.root}`]: {
+			fontSize: 20,
+			color: theme.vars.palette.text.primary,
+			marginRight: theme.spacing(1.5)
+		}
+	}
+} }));
+//#endregion
+export { Menu$1 as Menu };
+
+//# sourceMappingURL=Menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":["Menu","MuiMenu"],"sources":["../../../src/components/Menu.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 Menu: React.FC<React.ComponentProps<typeof MuiMenu>> = styled(\n  MuiMenu\n)(({ theme }) => ({\n  [`& .${menuClasses.paper}`]: {\n    borderRadius: theme.vars.shape.borderRadius,\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, 2, 1, 1),\n      [`& .${svgIconClasses.root}`]: {\n        fontSize: 20,\n        color: theme.vars.palette.text.primary,\n        marginRight: theme.spacing(1.5),\n      },\n    },\n  },\n}))\n"],"mappings":";;AASA,MAAaA,SAAuD,OAClEC,IACF,GAAG,EAAE,aAAa,GACf,MAAM,YAAY,UAAU;CAC3B,cAAc,MAAM,KAAK,MAAM;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;GAC/B,aAAa,MAAM,QAAQ,GAAG;EAChC;CACF;AACF,EACF,EAAE"}

package/dist/esm/components/Messages/AccountDeployedMessage.js

@@ -0,0 +1,27 @@
+import { AlertMessage } from "./AlertMessage.js";
+import { Typography } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/components/Messages/AccountDeployedMessage.tsx
+const AccountDeployedMessage = ({ ...props }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(AlertMessage, {
+		title: /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			sx: {
+				px: 1,
+				color: "text.primary"
+			},
+			children: t("info.message.accountDeployedMessage")
+		}),
+		icon: /* @__PURE__ */ jsx(WarningRounded, {}),
+		severity: "warning",
+		multiline: true,
+		...props
+	});
+};
+//#endregion
+export { AccountDeployedMessage };
+
+//# sourceMappingURL=AccountDeployedMessage.js.map

package/dist/esm/components/Messages/AccountDeployedMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountDeployedMessage.js","names":[],"sources":["../../../../src/components/Messages/AccountDeployedMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const AccountDeployedMessage: React.FC<BoxProps> = ({ ...props }) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            px: 1,\n            color: 'text.primary',\n          }}\n        >\n          {t('info.message.accountDeployedMessage')}\n        </Typography>\n      }\n      icon={<WarningRounded />}\n      severity=\"warning\"\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,0BAA8C,EAAE,GAAG,YAAY;CAC1E,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;GACT;aAEC,EAAE,qCAAqC;EAC9B,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/esm/components/Messages/AccountNotDeployedMessage.js

@@ -0,0 +1,24 @@
+import { AlertMessage } from "./AlertMessage.js";
+import { Typography } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/components/Messages/AccountNotDeployedMessage.tsx
+const AccountNotDeployedMessage = (props) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(AlertMessage, {
+		title: /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			sx: { color: "text.primary" },
+			children: t("warning.message.accountNotDeployedMessage")
+		}),
+		icon: /* @__PURE__ */ jsx(WarningRounded, {}),
+		severity: "warning",
+		multiline: true,
+		...props
+	});
+};
+//#endregion
+export { AccountNotDeployedMessage };
+
+//# sourceMappingURL=AccountNotDeployedMessage.js.map

package/dist/esm/components/Messages/AccountNotDeployedMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountNotDeployedMessage.js","names":[],"sources":["../../../../src/components/Messages/AccountNotDeployedMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const AccountNotDeployedMessage: React.FC<BoxProps> = (props) => {\n  const { t } = useTranslation()\n\n  return (\n    <AlertMessage\n      title={\n        <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n          {t('warning.message.accountNotDeployedMessage')}\n        </Typography>\n      }\n      icon={<WarningRounded />}\n      severity=\"warning\"\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAa,6BAAiD,UAAU;CACtE,MAAM,EAAE,MAAM,eAAe;CAE7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GAAY,SAAQ;GAAQ,IAAI,EAAE,OAAO,eAAe;aACrD,EAAE,2CAA2C;EACpC,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,16 @@
+import { AlertMessageCard, AlertMessageCardTitle } from "./AlertMessage.style.js";
+import { jsxs } from "react/jsx-runtime";
+//#region src/components/Messages/AlertMessage.tsx
+const AlertMessage = ({ title, icon, children, multiline, severity = "info", ...rest }) => /* @__PURE__ */ jsxs(AlertMessageCard, {
+	severity,
+	...rest,
+	children: [/* @__PURE__ */ jsxs(AlertMessageCardTitle, {
+		severity,
+		sx: { alignItems: multiline ? "start" : "center" },
+		children: [icon, title]
+	}), children]
+});
+//#endregion
+export { AlertMessage };
+
+//# sourceMappingURL=AlertMessage.js.map

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

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

package/dist/esm/components/Messages/AlertMessage.style.js

@@ -0,0 +1,38 @@
+import { Box, styled } from "@mui/material";
+//#region src/components/Messages/AlertMessage.style.tsx
+const AlertMessageCard = styled(Box, { shouldForwardProp: (prop) => prop !== "severity" })(({ theme }) => ({
+	borderRadius: theme.vars.shape.borderRadius,
+	position: "relative",
+	whiteSpace: "pre-line",
+	width: "100%",
+	paddingBottom: theme.spacing(2),
+	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} 16%, transparent)` }),
+	variants: [{
+		props: { severity: "warning" },
+		style: {
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
+			...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)` })
+		}
+	}]
+}));
+const AlertMessageCardTitle = styled(Box, { shouldForwardProp: (prop) => prop !== "severity" })(({ theme }) => ({
+	display: "flex",
+	paddingLeft: theme.spacing(2),
+	paddingRight: theme.spacing(2),
+	paddingTop: theme.spacing(2),
+	gap: theme.spacing(1),
+	color: theme.vars.palette.info.main,
+	...theme.applyStyles("dark", { color: `color-mix(in srgb, ${theme.vars.palette.info.main} 76%, white)` }),
+	variants: [{
+		props: { severity: "warning" },
+		style: {
+			color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
+			...theme.applyStyles("dark", { color: theme.vars.palette.warning.main })
+		}
+	}]
+}));
+//#endregion
+export { AlertMessageCard, AlertMessageCardTitle };
+
+//# sourceMappingURL=AlertMessage.style.js.map

package/dist/esm/components/Messages/AlertMessage.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertMessage.style.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { Severity } from './types.js'\n\ninterface AlertSeverityProps {\n  severity: Severity\n}\n\nexport const AlertMessageCard: React.FC<\n  React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n  borderRadius: theme.vars.shape.borderRadius,\n  position: 'relative',\n  whiteSpace: 'pre-line',\n  width: '100%',\n  paddingBottom: theme.spacing(2),\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n  }),\n  variants: [\n    {\n      props: {\n        severity: 'warning',\n      },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n        }),\n      },\n    },\n  ],\n}))\n\nexport const AlertMessageCardTitle: React.FC<\n  React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n  display: 'flex',\n  paddingLeft: theme.spacing(2),\n  paddingRight: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  gap: theme.spacing(1),\n  color: theme.vars.palette.info.main,\n  ...theme.applyStyles('dark', {\n    color: `color-mix(in srgb, ${theme.vars.palette.info.main} 76%, white)`,\n  }),\n  variants: [\n    {\n      props: {\n        severity: 'warning',\n      },\n      style: {\n        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n        ...theme.applyStyles('dark', {\n          color: theme.vars.palette.warning.main,\n        }),\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAQA,MAAa,mBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACxC,CAAC,GAAuB,EAAE,aAAa;CACrC,cAAc,MAAM,KAAK,MAAM;CAC/B,UAAU;CACV,YAAY;CACZ,OAAO;CACP,eAAe,MAAM,QAAQ,CAAC;CAC9B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;CACpE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE,CAAC;CACD,UAAU,CACR;EACE,OAAO,EACL,UAAU,UACZ;EACA,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,oBACzE,CAAC;EACH;CACF,CACF;AACF,EAAE;AAEF,MAAa,wBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACxC,CAAC,GAAuB,EAAE,aAAa;CACrC,SAAS;CACT,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;CAC7B,YAAY,MAAM,QAAQ,CAAC;CAC3B,KAAK,MAAM,QAAQ,CAAC;CACpB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,cAC5D,CAAC;CACD,UAAU,CACR;EACE,OAAO,EACL,UAAU,UACZ;EACA,OAAO;GACL,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GAC7D,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,KACpC,CAAC;EACH;CACF,CACF;AACF,EAAE"}

package/dist/esm/components/Messages/FundsSufficiencyMessage.js

@@ -0,0 +1,24 @@
+import { AlertMessage } from "./AlertMessage.js";
+import { Typography } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/components/Messages/FundsSufficiencyMessage.tsx
+const FundsSufficiencyMessage = (props) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(AlertMessage, {
+		severity: "warning",
+		icon: /* @__PURE__ */ jsx(WarningRounded, {}),
+		title: /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			sx: { color: "text.primary" },
+			children: t("warning.message.insufficientFunds")
+		}),
+		multiline: true,
+		...props
+	});
+};
+//#endregion
+export { FundsSufficiencyMessage };
+
+//# sourceMappingURL=FundsSufficiencyMessage.js.map

package/dist/esm/components/Messages/FundsSufficiencyMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FundsSufficiencyMessage.js","names":[],"sources":["../../../../src/components/Messages/FundsSufficiencyMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const FundsSufficiencyMessage: React.FC<BoxProps> = (props) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      severity=\"warning\"\n      icon={<WarningRounded />}\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            color: 'text.primary',\n          }}\n        >\n          {t('warning.message.insufficientFunds')}\n        </Typography>\n      }\n      multiline\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAa,2BAA+C,UAAU;CACpE,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,eACT;aAEC,EAAE,mCAAmC;EAC5B,CAAA;EAEd,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/esm/components/Messages/GasRefuelMessage.js

@@ -0,0 +1,63 @@
+import { useSettingsActions } from "../../stores/settings/useSettingsActions.js";
+import { useSettings } from "../../stores/settings/useSettings.js";
+import { useGasRefuel } from "../../hooks/useGasRefuel.js";
+import { AlertMessage } from "./AlertMessage.js";
+import { InfoMessageSwitch } from "./GasRefuelMessage.style.js";
+import { Box, Collapse, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import EvStation from "@mui/icons-material/EvStation";
+//#region src/components/Messages/GasRefuelMessage.tsx
+const GasRefuelMessage = (props) => {
+	const { t } = useTranslation();
+	const { setValue } = useSettingsActions();
+	const { enabledAutoRefuel } = useSettings(["enabledAutoRefuel"]);
+	const { enabled, chain, isLoading: isRefuelLoading } = useGasRefuel();
+	const onChange = (_, checked) => {
+		setValue("enabledAutoRefuel", checked);
+	};
+	return /* @__PURE__ */ jsx(Collapse, {
+		timeout: 225,
+		in: chain && enabled && !isRefuelLoading,
+		unmountOnExit: true,
+		mountOnEnter: true,
+		children: /* @__PURE__ */ jsx(AlertMessage, {
+			icon: /* @__PURE__ */ jsx(EvStation, {}),
+			title: /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					flexGrow: 1
+				},
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					sx: { fontWeight: 700 },
+					children: t("info.title.autoRefuel", { chainName: chain?.name ?? "" })
+				}), /* @__PURE__ */ jsx(InfoMessageSwitch, {
+					checked: enabledAutoRefuel,
+					onChange
+				})]
+			}),
+			...props,
+			children: /* @__PURE__ */ jsx(Collapse, {
+				timeout: 225,
+				in: enabledAutoRefuel,
+				unmountOnExit: true,
+				mountOnEnter: true,
+				children: /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					sx: {
+						px: 2,
+						pt: 1
+					},
+					children: t("info.message.autoRefuel", { chainName: chain?.name })
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { GasRefuelMessage };
+
+//# sourceMappingURL=GasRefuelMessage.js.map

package/dist/esm/components/Messages/GasRefuelMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GasRefuelMessage.js","names":[],"sources":["../../../../src/components/Messages/GasRefuelMessage.tsx"],"sourcesContent":["import EvStation from '@mui/icons-material/EvStation'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Collapse, Typography } from '@mui/material'\nimport type { ChangeEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useGasRefuel } from '../../hooks/useGasRefuel.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { AlertMessage } from './AlertMessage.js'\nimport { InfoMessageSwitch } from './GasRefuelMessage.style.js'\n\nexport const GasRefuelMessage: React.FC<BoxProps> = (props) => {\n  const { t } = useTranslation()\n\n  const { setValue } = useSettingsActions()\n  const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel'])\n\n  const { enabled, chain, isLoading: isRefuelLoading } = useGasRefuel()\n\n  const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {\n    setValue('enabledAutoRefuel', checked)\n  }\n\n  const showGasRefuelMessage = chain && enabled && !isRefuelLoading\n\n  return (\n    <Collapse\n      timeout={225}\n      in={showGasRefuelMessage}\n      unmountOnExit\n      mountOnEnter\n    >\n      <AlertMessage\n        icon={<EvStation />}\n        title={\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              flexGrow: 1,\n            }}\n          >\n            <Typography\n              variant=\"body2\"\n              sx={{\n                fontWeight: 700,\n              }}\n            >\n              {t('info.title.autoRefuel', { chainName: chain?.name ?? '' })}\n            </Typography>\n            <InfoMessageSwitch\n              checked={enabledAutoRefuel}\n              onChange={onChange}\n            />\n          </Box>\n        }\n        {...props}\n      >\n        <Collapse\n          timeout={225}\n          in={enabledAutoRefuel}\n          unmountOnExit\n          mountOnEnter\n        >\n          <Typography\n            variant=\"body2\"\n            sx={{\n              px: 2,\n              pt: 1,\n            }}\n          >\n            {t('info.message.autoRefuel', {\n              chainName: chain?.name,\n            })}\n          </Typography>\n        </Collapse>\n      </AlertMessage>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,oBAAwC,UAAU;CAC7D,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,EAAE,sBAAsB,YAAY,CAAC,mBAAmB,CAAC;CAE/D,MAAM,EAAE,SAAS,OAAO,WAAW,oBAAoB,aAAa;CAEpE,MAAM,YAAY,GAAkC,YAAqB;EACvE,SAAS,qBAAqB,OAAO;CACvC;CAIA,OACE,oBAAC,UAAD;EACE,SAAS;EACT,IALyB,SAAS,WAAW,CAAC;EAM9C,eAAA;EACA,cAAA;YAEA,oBAAC,cAAD;GACE,MAAM,oBAAC,WAAD,CAAY,CAAA;GAClB,OACE,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,UAAU;IACZ;cANF,CAQE,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI,EACF,YAAY,IACd;eAEC,EAAE,yBAAyB,EAAE,WAAW,OAAO,QAAQ,GAAG,CAAC;IAClD,CAAA,GACZ,oBAAC,mBAAD;KACE,SAAS;KACC;IACX,CAAA,CACE;;GAEP,GAAI;aAEJ,oBAAC,UAAD;IACE,SAAS;IACT,IAAI;IACJ,eAAA;IACA,cAAA;cAEA,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI;MACF,IAAI;MACJ,IAAI;KACN;eAEC,EAAE,2BAA2B,EAC5B,WAAW,OAAO,KACpB,CAAC;IACS,CAAA;GACJ,CAAA;EACE,CAAA;CACN,CAAA;AAEd"}

package/dist/esm/components/Messages/GasRefuelMessage.style.js

@@ -0,0 +1,17 @@
+import { Switch as Switch$1 } from "../Switch.js";
+import { styled, switchClasses } from "@mui/material";
+//#region src/components/Messages/GasRefuelMessage.style.ts
+const InfoMessageSwitch = styled(Switch$1)(({ theme }) => ({ [`.${switchClasses.switchBase}`]: {
+	[`&.${switchClasses.checked}`]: { [`& + .${switchClasses.track}`]: {
+		backgroundColor: theme.vars.palette.info.main,
+		...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)` })
+	} },
+	[`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+		color: theme.vars.palette.info.main,
+		...theme.applyStyles("dark", { color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)` })
+	}
+} }));
+//#endregion
+export { InfoMessageSwitch };
+
+//# sourceMappingURL=GasRefuelMessage.style.js.map

package/dist/esm/components/Messages/GasRefuelMessage.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GasRefuelMessage.style.js","names":["Switch"],"sources":["../../../../src/components/Messages/GasRefuelMessage.style.ts"],"sourcesContent":["import { styled, switchClasses } from '@mui/material'\nimport type React from 'react'\nimport { Switch } from '../Switch.js'\n\nexport const InfoMessageSwitch: React.FC<React.ComponentProps<typeof Switch>> =\n  styled(Switch)(({ theme }) => ({\n    [`.${switchClasses.switchBase}`]: {\n      [`&.${switchClasses.checked}`]: {\n        [`& + .${switchClasses.track}`]: {\n          backgroundColor: theme.vars.palette.info.main,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,\n          }),\n        },\n      },\n      [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n        color: theme.vars.palette.info.main,\n        ...theme.applyStyles('dark', {\n          color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,\n        }),\n      },\n    },\n  }))\n"],"mappings":";;;AAIA,MAAa,oBACX,OAAOA,QAAM,GAAG,EAAE,aAAa,GAC5B,IAAI,cAAc,eAAe;EAC/B,KAAK,cAAc,YAAY,GAC7B,QAAQ,cAAc,UAAU;EAC/B,iBAAiB,MAAM,KAAK,QAAQ,KAAK;EACzC,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE,CAAC;CACH,EACF;EACC,uBAAuB,cAAc,UAAU;EAC9C,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBAC5D,CAAC;CACH;AACF,EACF,EAAE"}

package/dist/esm/components/Messages/GasSufficiencyMessage.js

@@ -0,0 +1,43 @@
+import { AlertMessage } from "./AlertMessage.js";
+import { formatUnits } from "@lifi/sdk";
+import { Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import EvStation from "@mui/icons-material/EvStation";
+//#region src/components/Messages/GasSufficiencyMessage.tsx
+const GasSufficiencyMessage = ({ insufficientGas, ...props }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs(AlertMessage, {
+		severity: "warning",
+		icon: /* @__PURE__ */ jsx(EvStation, {}),
+		title: /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			sx: { fontWeight: 700 },
+			children: t("warning.title.insufficientGas")
+		}),
+		...props,
+		children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			sx: {
+				px: 2,
+				pt: 1
+			},
+			children: t("warning.message.insufficientGas")
+		}), insufficientGas?.map((item, index) => /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			sx: {
+				px: 2,
+				pt: .5
+			},
+			children: t("main.tokenOnChainAmount", {
+				amount: formatUnits(item.insufficientAmount ?? 0n, item.token.decimals),
+				tokenSymbol: item.token.symbol,
+				chainName: item.chain?.name
+			})
+		}, index))]
+	});
+};
+//#endregion
+export { GasSufficiencyMessage };
+
+//# sourceMappingURL=GasSufficiencyMessage.js.map

package/dist/esm/components/Messages/GasSufficiencyMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GasSufficiencyMessage.js","names":[],"sources":["../../../../src/components/Messages/GasSufficiencyMessage.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport EvStation from '@mui/icons-material/EvStation'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport type { GasSufficiency } from '../../hooks/useGasSufficiency.js'\nimport { AlertMessage } from './AlertMessage.js'\n\ninterface GasSufficiencyMessageProps extends BoxProps {\n  insufficientGas?: GasSufficiency[]\n}\n\nexport const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({\n  insufficientGas,\n  ...props\n}) => {\n  const { t } = useTranslation()\n  return (\n    <AlertMessage\n      severity=\"warning\"\n      icon={<EvStation />}\n      title={\n        <Typography\n          variant=\"body2\"\n          sx={{\n            fontWeight: 700,\n          }}\n        >\n          {t('warning.title.insufficientGas')}\n        </Typography>\n      }\n      {...props}\n    >\n      <Typography\n        variant=\"body2\"\n        sx={{\n          px: 2,\n          pt: 1,\n        }}\n      >\n        {t('warning.message.insufficientGas')}\n      </Typography>\n      {insufficientGas?.map((item, index) => (\n        <Typography\n          key={index}\n          variant=\"body2\"\n          sx={{\n            px: 2,\n            pt: 0.5,\n          }}\n        >\n          {t('main.tokenOnChainAmount', {\n            amount: formatUnits(\n              item.insufficientAmount ?? 0n,\n              item.token.decimals\n            ),\n            tokenSymbol: item.token.symbol,\n            chainName: item.chain?.name,\n          })}\n        </Typography>\n      ))}\n    </AlertMessage>\n  )\n}\n"],"mappings":";;;;;;;AAWA,MAAa,yBAA+D,EAC1E,iBACA,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,WAAD,CAAY,CAAA;EAClB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,YAAY,IACd;aAEC,EAAE,+BAA+B;EACxB,CAAA;EAEd,GAAI;YAbN,CAeE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,IAAI;GACN;aAEC,EAAE,iCAAiC;EAC1B,CAAA,GACX,iBAAiB,KAAK,MAAM,UAC3B,oBAAC,YAAD;GAEE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,IAAI;GACN;aAEC,EAAE,2BAA2B;IAC5B,QAAQ,YACN,KAAK,sBAAsB,IAC3B,KAAK,MAAM,QACb;IACA,aAAa,KAAK,MAAM;IACxB,WAAW,KAAK,OAAO;GACzB,CAAC;EACS,GAfL,KAeK,CACb,CACW;;AAElB"}