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

package/dist/esm/components/AppContainer.js

@@ -1,116 +1,95 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
-import { defaultMaxHeight } from '../config/constants.js';
-import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
-import { useHeaderHeight } from '../stores/header/useHeaderStore.js';
-import { createElementId, ElementId } from '../utils/elements.js';
-import { getWidgetMaxHeight } from '../utils/widgetSize.js';
-// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can
-//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height
-//  A Number of other components and hooks work with height values that are often set on or derived from these elements
-//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use
-//    - useTokenListHeight
-//    - useSetContentHeight
-//  Also check any code that is using the methods from elements.ts utils file
-export const AppExpandedContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'variant',
-})(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'start',
-    flex: 1,
-    height: theme.container?.display === 'flex'
-        ? '100%'
-        : theme.container?.maxHeight
-            ? 'auto'
-            : theme.container?.height || 'auto',
-    variants: [
-        {
-            props: {
-                variant: 'drawer',
-            },
-            style: {
-                height: 'none',
-            },
-        },
-    ],
-}));
-export const RelativeContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'variant',
-})(({ theme }) => {
-    const maxHeight = theme.container?.height === 'fit-content'
-        ? 'none'
-        : getWidgetMaxHeight(theme);
-    return {
-        position: 'relative',
-        boxSizing: 'content-box',
-        width: '100%',
-        minWidth: theme.breakpoints.values.xs,
-        maxWidth: theme.breakpoints.values.sm,
-        background: theme.vars.palette.background.default,
-        overflow: 'auto',
-        flex: 1,
-        ...theme.container,
-        maxHeight: theme.container?.display === 'flex' && !theme.container?.height
-            ? '100%'
-            : maxHeight,
-        zIndex: 1, // NB: higher than of expansion containers
-        variants: [
-            {
-                props: {
-                    variant: 'drawer',
-                },
-                style: {
-                    maxHeight: 'none',
-                    height: '100%',
-                    boxShadow: 'none',
-                    borderRadius: 0,
-                },
-            },
-        ],
-    };
+import "../config/constants.js";
+import { useWidgetConfig } from "../providers/WidgetProvider/WidgetProvider.js";
+import { useHeaderHeight } from "../stores/header/useHeaderStore.js";
+import { ElementId, createElementId } from "../utils/elements.js";
+import { getWidgetMaxHeight } from "../utils/widgetSize.js";
+import { Box, Container, ScopedCssBaseline, styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/AppContainer.tsx
+const AppExpandedContainer = styled(Box)(({ theme }) => {
+	return {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "start",
+		flex: 1,
+		height: theme.container?.display === "flex" ? "100%" : theme.container?.maxHeight ? "auto" : theme.container?.height || "auto"
+	};
 });
-const CssBaselineContainer = styled(ScopedCssBaseline, {
-    shouldForwardProp: (prop) => !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop),
-})(({ theme, variant, paddingTopAdjustment }) => {
-    const maxHeight = theme.container?.height === 'fit-content'
-        ? 'none'
-        : getWidgetMaxHeight(theme);
-    return {
-        display: 'flex',
-        flex: 1,
-        flexDirection: 'column',
-        overflowX: 'clip',
-        margin: 0,
-        width: '100%',
-        maxHeight: variant === 'drawer' || theme.container?.display === 'flex'
-            ? 'none'
-            : maxHeight,
-        overflowY: 'auto',
-        height: theme.container?.display === 'flex' ? 'auto' : '100%',
-        paddingTop: paddingTopAdjustment,
-        // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes
-        '&:has(.full-page-container)': {
-            height: theme.container?.maxHeight ||
-                theme.container?.height ||
-                defaultMaxHeight,
-        },
-        '&:has(.long-list)': {
-            minHeight: getWidgetMaxHeight(theme),
-            maxHeight: getWidgetMaxHeight(theme),
-        },
-    };
+const RelativeContainer = styled(Box, { shouldForwardProp: (prop) => prop !== "variant" })(({ theme }) => {
+	const maxHeight = theme.container?.height === "fit-content" || !theme.container?.height && !theme.container?.maxHeight ? "none" : getWidgetMaxHeight(theme);
+	return {
+		position: "relative",
+		boxSizing: "content-box",
+		width: "100%",
+		minWidth: theme.breakpoints.values.xs,
+		maxWidth: theme.breakpoints.values.sm,
+		background: theme.vars.palette.background.default,
+		overflow: "auto",
+		flex: 1,
+		...theme.container,
+		maxHeight: theme.container?.display === "flex" && !theme.container?.height ? "100%" : maxHeight,
+		zIndex: 1,
+		variants: [{
+			props: { variant: "drawer" },
+			style: {
+				maxHeight: "none",
+				height: "100%",
+				boxShadow: "none",
+				borderRadius: 0
+			}
+		}]
+	};
 });
-export const FlexContainer = styled(Container)({
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
+const CssBaselineContainer = styled(ScopedCssBaseline, { shouldForwardProp: (prop) => ![
+	"variant",
+	"paddingTopAdjustment",
+	"elementId"
+].includes(prop) })(({ theme, variant, paddingTopAdjustment }) => {
+	const maxHeight = theme.container?.height === "fit-content" || !theme.container?.height && !theme.container?.maxHeight ? "none" : getWidgetMaxHeight(theme);
+	return {
+		display: "flex",
+		flex: 1,
+		flexDirection: "column",
+		overflowX: "clip",
+		margin: 0,
+		width: "100%",
+		maxHeight: variant === "drawer" || theme.container?.display === "flex" ? "none" : maxHeight,
+		overflowY: "auto",
+		height: theme.container?.display === "flex" ? "auto" : "100%",
+		paddingTop: paddingTopAdjustment,
+		"&:has(.full-page-container)": { height: theme.container?.maxHeight || theme.container?.height || 686 },
+		"&:has(.long-list)": {
+			minHeight: getWidgetMaxHeight(theme),
+			maxHeight: getWidgetMaxHeight(theme)
+		}
+	};
 });
-export const AppContainer = ({ children }) => {
-    // const ref = useRef<HTMLDivElement>(null);
-    const { variant, elementId, theme } = useWidgetConfig();
-    const { headerHeight } = useHeaderHeight();
-    const positionFixedAdjustment = theme?.header?.position === 'fixed' ? headerHeight : 0;
-    return (_jsx(RelativeContainer, { variant: variant, id: createElementId(ElementId.RelativeContainer, elementId), children: _jsx(CssBaselineContainer, { id: createElementId(ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true, paddingTopAdjustment: positionFixedAdjustment, elementId: elementId, children: _jsx(FlexContainer, { disableGutters: true, children: children }) }) }));
+const FlexContainer = styled(Container)({
+	display: "flex",
+	flexDirection: "column",
+	flex: 1
+});
+const AppContainer = ({ children }) => {
+	const { variant, elementId, theme } = useWidgetConfig();
+	const { headerHeight } = useHeaderHeight();
+	const positionFixedAdjustment = theme?.header?.position === "fixed" ? headerHeight : 0;
+	return /* @__PURE__ */ jsx(RelativeContainer, {
+		variant,
+		id: createElementId(ElementId.RelativeContainer, elementId),
+		children: /* @__PURE__ */ jsx(CssBaselineContainer, {
+			id: createElementId(ElementId.ScrollableContainer, elementId),
+			variant,
+			enableColorScheme: true,
+			paddingTopAdjustment: positionFixedAdjustment,
+			elementId,
+			children: /* @__PURE__ */ jsx(FlexContainer, {
+				disableGutters: true,
+				children
+			})
+		})
+	});
 };
+//#endregion
+export { AppContainer, AppExpandedContainer, FlexContainer, RelativeContainer };
+
 //# sourceMappingURL=AppContainer.js.map

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

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

package/dist/esm/components/Avatar/AccountAvatar.js

@@ -1,13 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getConnectorIcon } from '@lifi/wallet-management';
-import Wallet from '@mui/icons-material/Wallet';
-import { Badge } from '@mui/material';
-import { useChain } from '../../hooks/useChain.js';
-import { AvatarDefault, AvatarMasked } from './Avatar.style.js';
-import { ChainBadgeContent } from './ChainBadgeContent.js';
-export const AccountAvatar = ({ chainId, account, empty, toAddress, }) => {
-    const { chain } = useChain(chainId);
-    const avatar = empty ? (_jsx(AvatarDefault, {})) : account?.connector || toAddress?.logoURI ? (_jsx(AvatarMasked, { src: toAddress?.logoURI || getConnectorIcon(account?.connector), alt: toAddress?.name || account?.connector?.name, children: (toAddress?.name || account?.connector?.name)?.[0] })) : (_jsx(AvatarDefault, { children: _jsx(Wallet, { sx: { fontSize: 20 } }) }));
-    return (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(ChainBadgeContent, { chain: chain }), children: avatar }));
+import { useChain } from "../../hooks/useChain.js";
+import { AvatarDefault, AvatarMasked } from "./Avatar.style.js";
+import { ChainBadgeContent } from "./ChainBadgeContent.js";
+import { Badge } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { getConnectorIcon } from "@lifi/wallet-management";
+import Wallet from "@mui/icons-material/Wallet";
+//#region src/components/Avatar/AccountAvatar.tsx
+const AccountAvatar = ({ chainId, account, empty, toAddress }) => {
+	const { chain } = useChain(chainId);
+	const avatar = empty ? /* @__PURE__ */ jsx(AvatarDefault, {}) : account?.connector || toAddress?.logoURI ? /* @__PURE__ */ jsx(AvatarMasked, {
+		src: toAddress?.logoURI || getConnectorIcon(account?.connector),
+		alt: toAddress?.name || account?.connector?.name,
+		children: (toAddress?.name || account?.connector?.name)?.[0]
+	}) : /* @__PURE__ */ jsx(AvatarDefault, { children: /* @__PURE__ */ jsx(Wallet, { sx: { fontSize: 20 } }) });
+	return /* @__PURE__ */ jsx(Badge, {
+		overlap: "circular",
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		badgeContent: /* @__PURE__ */ jsx(ChainBadgeContent, { chain }),
+		children: avatar
+	});
 };
+//#endregion
+export { AccountAvatar };
+
 //# sourceMappingURL=AccountAvatar.js.map

package/dist/esm/components/Avatar/AccountAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountAvatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/AccountAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAElD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAS1D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,OAAO,EACP,KAAK,EACL,SAAS,GACU,EAAE,EAAE;IACvB,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CACrB,KAAC,aAAa,KAAG,CAClB,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,IAAI,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAC7C,KAAC,YAAY,IACX,GAAG,EAAE,SAAS,EAAE,OAAO,IAAI,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,EAC/D,GAAG,EAAE,SAAS,EAAE,IAAI,IAAI,OAAO,EAAE,SAAS,EAAE,IAAI,YAE/C,CAAC,SAAS,EAAE,IAAI,IAAI,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GACtC,CAChB,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,cACZ,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI,GAClB,CACjB,CAAA;IAED,OAAO,CACL,KAAC,KAAK,IACJ,OAAO,EAAC,UAAU,EAClB,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,EACzD,YAAY,EAAE,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,GAAI,YAEhD,MAAM,GACD,CACT,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"AccountAvatar.js","names":[],"sources":["../../../../src/components/Avatar/AccountAvatar.tsx"],"sourcesContent":["import { getConnectorIcon } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Badge } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useChain } from '../../hooks/useChain.js'\nimport type { ToAddress } from '../../types/widget.js'\nimport { AvatarDefault, AvatarMasked } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\n\ninterface AccountAvatarProps {\n  chainId?: number\n  account?: Account\n  toAddress?: ToAddress\n  empty?: boolean\n}\n\nexport const AccountAvatar = ({\n  chainId,\n  account,\n  empty,\n  toAddress,\n}: AccountAvatarProps): JSX.Element => {\n  const { chain } = useChain(chainId)\n\n  const avatar = empty ? (\n    <AvatarDefault />\n  ) : account?.connector || toAddress?.logoURI ? (\n    <AvatarMasked\n      src={toAddress?.logoURI || getConnectorIcon(account?.connector)}\n      alt={toAddress?.name || account?.connector?.name}\n    >\n      {(toAddress?.name || account?.connector?.name)?.[0]}\n    </AvatarMasked>\n  ) : (\n    <AvatarDefault>\n      <Wallet sx={{ fontSize: 20 }} />\n    </AvatarDefault>\n  )\n\n  return (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<ChainBadgeContent chain={chain} />}\n    >\n      {avatar}\n    </Badge>\n  )\n}\n"],"mappings":";;;;;;;;AAiBA,MAAa,iBAAiB,EAC5B,SACA,SACA,OACA,gBACqC;CACrC,MAAM,EAAE,UAAU,SAAS,QAAQ;CAEnC,MAAM,SAAS,QACb,oBAAC,eAAD,EAAiB,CAAA,GACf,SAAS,aAAa,WAAW,UACnC,oBAAC,cAAD;EACE,KAAK,WAAW,WAAW,iBAAiB,SAAS,UAAU;EAC/D,KAAK,WAAW,QAAQ,SAAS,WAAW;aAE1C,WAAW,QAAQ,SAAS,WAAW,QAAQ;EACpC,CAAA,GAEf,oBAAC,eAAD,EAAA,UACE,oBAAC,QAAD,EAAQ,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA,EAClB,CAAA;AAGlB,QACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;GAAS;EACzD,cAAc,oBAAC,mBAAD,EAA0B,OAAS,CAAA;YAEhD;EACK,CAAA"}

package/dist/esm/components/Avatar/Avatar.js

@@ -1,15 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge, Skeleton } from '@mui/material';
-import { AvatarDefault, AvatarSkeletonMaskedContainer } from './Avatar.style.js';
-import { ChainBadgeContent } from './ChainBadgeContent.js';
-import { SmallAvatarSkeleton } from './SmallAvatar.js';
-export const AvatarBadgedDefault = ({ sx, chain }) => {
-    return (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(ChainBadgeContent, { chain: chain }), sx: sx, children: _jsx(AvatarDefault, {}) }));
+import { AvatarDefault, AvatarSkeletonMaskedContainer } from "./Avatar.style.js";
+import { SmallAvatarSkeleton } from "./SmallAvatar.js";
+import { ChainBadgeContent } from "./ChainBadgeContent.js";
+import { Badge, Skeleton } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+const AvatarBadgedDefault = ({ sx, chain }) => {
+	return /* @__PURE__ */ jsx(Badge, {
+		overlap: "circular",
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		badgeContent: /* @__PURE__ */ jsx(ChainBadgeContent, { chain }),
+		sx,
+		children: /* @__PURE__ */ jsx(AvatarDefault, {})
+	});
 };
-export const AvatarBadgedSkeleton = ({ sx, avatarSize = 40, badgeSize = 16 }) => {
-    return (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatarSkeleton, { size: badgeSize }), sx: sx, children: _jsx(AvatarSkeleton, { avatarSize: avatarSize, badgeSize: badgeSize }) }));
+const AvatarBadgedSkeleton = ({ sx, avatarSize = 40, badgeSize = 16 }) => {
+	return /* @__PURE__ */ jsx(Badge, {
+		overlap: "circular",
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		badgeContent: /* @__PURE__ */ jsx(SmallAvatarSkeleton, { size: badgeSize }),
+		sx,
+		children: /* @__PURE__ */ jsx(AvatarSkeleton, {
+			avatarSize,
+			badgeSize
+		})
+	});
 };
 const AvatarSkeleton = ({ avatarSize, badgeSize }) => {
-    return (_jsx(AvatarSkeletonMaskedContainer, { badgeSize: badgeSize, children: _jsx(Skeleton, { width: avatarSize, height: avatarSize, variant: "circular" }) }));
+	return /* @__PURE__ */ jsx(AvatarSkeletonMaskedContainer, {
+		badgeSize,
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			width: avatarSize,
+			height: avatarSize,
+			variant: "circular"
+		})
+	});
 };
+//#endregion
+export { AvatarBadgedDefault, AvatarBadgedSkeleton };
+
 //# sourceMappingURL=Avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAA;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,MAAM,CAAC,MAAM,mBAAmB,GAG3B,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IACrB,OAAO,CACL,KAAC,KAAK,IACJ,OAAO,EAAC,UAAU,EAClB,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,EACzD,YAAY,EAAE,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,GAAI,EACjD,EAAE,EAAE,EAAE,YAEN,KAAC,aAAa,KAAG,GACX,CACT,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAI5B,CAAC,EAAE,EAAE,EAAE,UAAU,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAC/C,OAAO,CACL,KAAC,KAAK,IACJ,OAAO,EAAC,UAAU,EAClB,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,EACzD,YAAY,EAAE,KAAC,mBAAmB,IAAC,IAAI,EAAE,SAAS,GAAI,EACtD,EAAE,EAAE,EAAE,YAEN,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,GAAI,GAC1D,CACT,CAAA;AACH,CAAC,CAAA;AAED,MAAM,cAAc,GAGf,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE;IACjC,OAAO,CACL,KAAC,6BAA6B,IAAC,SAAS,EAAE,SAAS,YACjD,KAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAC,UAAU,GAAG,GACxC,CACjC,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport type { SxProps, Theme } from '@mui/material'\nimport { Badge, Skeleton } from '@mui/material'\nimport { AvatarDefault, AvatarSkeletonMaskedContainer } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\nimport { SmallAvatarSkeleton } from './SmallAvatar.js'\n\nexport const AvatarBadgedDefault: React.FC<{\n  sx?: SxProps<Theme>\n  chain?: ExtendedChain\n}> = ({ sx, chain }) => {\n  return (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<ChainBadgeContent chain={chain} />}\n      sx={sx}\n    >\n      <AvatarDefault />\n    </Badge>\n  )\n}\n\nexport const AvatarBadgedSkeleton: React.FC<{\n  sx?: SxProps<Theme>\n  avatarSize?: number\n  badgeSize?: number\n}> = ({ sx, avatarSize = 40, badgeSize = 16 }) => {\n  return (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<SmallAvatarSkeleton size={badgeSize} />}\n      sx={sx}\n    >\n      <AvatarSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />\n    </Badge>\n  )\n}\n\nconst AvatarSkeleton: React.FC<{\n  avatarSize: number\n  badgeSize: number\n}> = ({ avatarSize, badgeSize }) => {\n  return (\n    <AvatarSkeletonMaskedContainer badgeSize={badgeSize}>\n      <Skeleton width={avatarSize} height={avatarSize} variant=\"circular\" />\n    </AvatarSkeletonMaskedContainer>\n  )\n}\n"],"mappings":";;;;;;AAOA,MAAa,uBAGP,EAAE,IAAI,YAAY;AACtB,QACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;GAAS;EACzD,cAAc,oBAAC,mBAAD,EAA0B,OAAS,CAAA;EAC7C;YAEJ,oBAAC,eAAD,EAAiB,CAAA;EACX,CAAA;;AAIZ,MAAa,wBAIP,EAAE,IAAI,aAAa,IAAI,YAAY,SAAS;AAChD,QACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;GAAS;EACzD,cAAc,oBAAC,qBAAD,EAAqB,MAAM,WAAa,CAAA;EAClD;YAEJ,oBAAC,gBAAD;GAA4B;GAAuB;GAAa,CAAA;EAC1D,CAAA;;AAIZ,MAAM,kBAGA,EAAE,YAAY,gBAAgB;AAClC,QACE,oBAAC,+BAAD;EAA0C;YACxC,oBAAC,UAAD;GAAU,OAAO;GAAY,QAAQ;GAAY,SAAQ;GAAa,CAAA;EACxC,CAAA"}

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

@@ -1,69 +1,57 @@
-import { AvatarGroup, avatarClasses, Box, badgeClasses, Avatar as MuiAvatar, styled, } from '@mui/material';
-import { getAvatarMask } from './utils.js';
-export const AvatarMasked = styled(MuiAvatar, {
-    shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',
-})(({ avatarSize = 40, badgeSize = 16 }) => ({
-    width: avatarSize,
-    height: avatarSize,
-    mask: getAvatarMask(badgeSize),
+import { getAvatarMask } from "./utils.js";
+import { Avatar, AvatarGroup, Box, avatarClasses, badgeClasses, styled } from "@mui/material";
+//#region src/components/Avatar/Avatar.style.tsx
+const AvatarMasked = styled(Avatar, { shouldForwardProp: (prop) => prop !== "avatarSize" && prop !== "badgeSize" })(({ avatarSize = 40, badgeSize = 16 }) => ({
+	width: avatarSize,
+	height: avatarSize,
+	mask: getAvatarMask(badgeSize)
 }));
-export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
-    [`& .${badgeClasses.badge}:last-of-type .${avatarClasses.root}`]: {
-        boxSizing: 'border-box',
-    },
-    [`& .${avatarClasses.root}`]: {
-        border: 'none',
-        marginLeft: 0,
-    },
-    [`& .${badgeClasses.root}:first-of-type`]: {
-        marginLeft: theme.spacing(-1),
-        border: 'none',
-    },
-    [`& .${badgeClasses.root}:last-of-type`]: {
-        border: 'none',
-    },
+styled(AvatarGroup)(({ theme }) => ({
+	[`& .${badgeClasses.badge}:last-of-type .${avatarClasses.root}`]: { boxSizing: "border-box" },
+	[`& .${avatarClasses.root}`]: {
+		border: "none",
+		marginLeft: 0
+	},
+	[`& .${badgeClasses.root}:first-of-type`]: {
+		marginLeft: theme.spacing(-1),
+		border: "none"
+	},
+	[`& .${badgeClasses.root}:last-of-type`]: { border: "none" }
 }));
-export const AvatarDefault = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'badgeSize',
-})(({ theme, badgeSize = 16 }) => {
-    const root = theme.components?.MuiAvatar?.styleOverrides?.root;
-    return {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: '50%',
-        height: root?.height,
-        width: root?.width,
-        color: theme.vars.palette.text.secondary,
-        mask: getAvatarMask(badgeSize),
-        background: theme.vars.palette.grey[300],
-        ...theme.applyStyles('dark', {
-            background: theme.vars.palette.grey[800],
-        }),
-    };
+const AvatarDefault = styled(Box, { shouldForwardProp: (prop) => prop !== "badgeSize" })(({ theme, badgeSize = 16 }) => {
+	const root = theme.components?.MuiAvatar?.styleOverrides?.root;
+	return {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: "50%",
+		height: root?.height,
+		width: root?.width,
+		color: theme.vars.palette.text.secondary,
+		mask: getAvatarMask(badgeSize),
+		background: theme.vars.palette.grey[300],
+		...theme.applyStyles("dark", { background: theme.vars.palette.grey[800] })
+	};
 });
-export const AvatarDefaultBadge = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'size',
-})(({ theme, size = 16 }) => {
-    return {
-        borderRadius: '50%',
-        height: size,
-        width: size,
-        background: theme.vars.palette.grey[300],
-        ...theme.applyStyles('dark', {
-            background: theme.vars.palette.grey[800],
-        }),
-    };
+const AvatarDefaultBadge = styled(Box, { shouldForwardProp: (prop) => prop !== "size" })(({ theme, size = 16 }) => {
+	return {
+		borderRadius: "50%",
+		height: size,
+		width: size,
+		background: theme.vars.palette.grey[300],
+		...theme.applyStyles("dark", { background: theme.vars.palette.grey[800] })
+	};
 });
-export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
-    background: theme.vars.palette.background.paper,
-    borderRadius: '50%',
+const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+	background: theme.vars.palette.background.paper,
+	borderRadius: "50%"
 }));
-export const AvatarSkeletonMaskedContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'badgeSize',
-})(({ theme, badgeSize = 16 }) => ({
-    background: theme.vars.palette.background.paper,
-    borderRadius: '50%',
-    mask: getAvatarMask(badgeSize),
+const AvatarSkeletonMaskedContainer = styled(Box, { shouldForwardProp: (prop) => prop !== "badgeSize" })(({ theme, badgeSize = 16 }) => ({
+	background: theme.vars.palette.background.paper,
+	borderRadius: "50%",
+	mask: getAvatarMask(badgeSize)
 }));
+//#endregion
+export { AvatarDefault, AvatarDefaultBadge, AvatarMasked, AvatarSkeletonContainer, AvatarSkeletonMaskedContainer };
+
 //# sourceMappingURL=Avatar.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.style.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.style.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Avatar.style.js","names":["MuiAvatar"],"sources":["../../../../src/components/Avatar/Avatar.style.tsx"],"sourcesContent":["import type { CSSObject } from '@mui/material'\nimport {\n  AvatarGroup,\n  avatarClasses,\n  Box,\n  badgeClasses,\n  Avatar as MuiAvatar,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { getAvatarMask } from './utils.js'\n\nexport const AvatarMasked: React.FC<\n  React.ComponentProps<typeof MuiAvatar> & {\n    avatarSize?: number\n    badgeSize?: number\n  }\n> = styled(MuiAvatar, {\n  shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',\n})<{ avatarSize?: number; badgeSize?: number }>(\n  ({ avatarSize = 40, badgeSize = 16 }) => ({\n    width: avatarSize,\n    height: avatarSize,\n    mask: getAvatarMask(badgeSize),\n  })\n)\n\nexport const TokenAvatarGroup: React.FC<\n  React.ComponentProps<typeof AvatarGroup> & { badgeSize?: number }\n> = styled(AvatarGroup)(({ theme }) => ({\n  [`& .${badgeClasses.badge}:last-of-type .${avatarClasses.root}`]: {\n    boxSizing: 'border-box',\n  },\n  [`& .${avatarClasses.root}`]: {\n    border: 'none',\n    marginLeft: 0,\n  },\n  [`& .${badgeClasses.root}:first-of-type`]: {\n    marginLeft: theme.spacing(-1),\n    border: 'none',\n  },\n  [`& .${badgeClasses.root}:last-of-type`]: {\n    border: 'none',\n  },\n}))\n\nexport const AvatarDefault: React.FC<\n  React.ComponentProps<typeof Box> & { badgeSize?: number }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'badgeSize',\n})<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => {\n  const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '50%',\n    height: root?.height,\n    width: root?.width,\n    color: theme.vars.palette.text.secondary,\n    mask: getAvatarMask(badgeSize),\n    background: theme.vars.palette.grey[300],\n    ...theme.applyStyles('dark', {\n      background: theme.vars.palette.grey[800],\n    }),\n  }\n})\n\nexport const AvatarDefaultBadge: React.FC<\n  React.ComponentProps<typeof Box> & { size?: number }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'size',\n})<{ size?: number }>(({ theme, size = 16 }) => {\n  return {\n    borderRadius: '50%',\n    height: size,\n    width: size,\n    background: theme.vars.palette.grey[300],\n    ...theme.applyStyles('dark', {\n      background: theme.vars.palette.grey[800],\n    }),\n  }\n})\n\nexport const AvatarSkeletonContainer: React.FC<\n  React.ComponentProps<typeof Box> & { badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n  background: theme.vars.palette.background.paper,\n  borderRadius: '50%',\n}))\n\nexport const AvatarSkeletonMaskedContainer: React.FC<\n  React.ComponentProps<typeof Box> & { badgeSize?: number }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'badgeSize',\n})<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => ({\n  background: theme.vars.palette.background.paper,\n  borderRadius: '50%',\n  mask: getAvatarMask(badgeSize),\n}))\n"],"mappings":";;;AAYA,MAAa,eAKT,OAAOA,QAAW,EACpB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,aAChE,CAAC,EACC,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,OAAO;CACP,QAAQ;CACR,MAAM,cAAc,UAAU;CAC/B,EACF;AAIG,OAAO,YAAY,EAAE,EAAE,aAAa;EACrC,MAAM,aAAa,MAAM,iBAAiB,cAAc,SAAS,EAChE,WAAW,cACZ;EACA,MAAM,cAAc,SAAS;EAC5B,QAAQ;EACR,YAAY;EACb;EACA,MAAM,aAAa,KAAK,kBAAkB;EACzC,YAAY,MAAM,QAAQ,GAAG;EAC7B,QAAQ;EACT;EACA,MAAM,aAAa,KAAK,iBAAiB,EACxC,QAAQ,QACT;CACF,EAAE;AAEH,MAAa,gBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,aACvC,CAAC,EAA0B,EAAE,OAAO,YAAY,SAAS;CACxD,MAAM,OAAO,MAAM,YAAY,WAAW,gBAAgB;AAC1D,QAAO;EACL,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,cAAc;EACd,QAAQ,MAAM;EACd,OAAO,MAAM;EACb,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,MAAM,cAAc,UAAU;EAC9B,YAAY,MAAM,KAAK,QAAQ,KAAK;EACpC,GAAG,MAAM,YAAY,QAAQ,EAC3B,YAAY,MAAM,KAAK,QAAQ,KAAK,MACrC,CAAC;EACH;EACD;AAEF,MAAa,qBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,QACvC,CAAC,EAAqB,EAAE,OAAO,OAAO,SAAS;AAC9C,QAAO;EACL,cAAc;EACd,QAAQ;EACR,OAAO;EACP,YAAY,MAAM,KAAK,QAAQ,KAAK;EACpC,GAAG,MAAM,YAAY,QAAQ,EAC3B,YAAY,MAAM,KAAK,QAAQ,KAAK,MACrC,CAAC;EACH;EACD;AAEF,MAAa,0BAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,cAAc;CACf,EAAE;AAEH,MAAa,gCAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,aACvC,CAAC,EAA0B,EAAE,OAAO,YAAY,UAAU;CACzD,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,cAAc;CACd,MAAM,cAAc,UAAU;CAC/B,EAAE"}

package/dist/esm/components/Avatar/ChainBadgeContent.js

@@ -1,10 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AvatarDefaultBadge } from './Avatar.style.js';
-import { SmallAvatar } from './SmallAvatar.js';
-export const ChainBadgeContent = ({ chain, size = 16, }) => {
-    if (chain?.logoURI) {
-        return (_jsx(SmallAvatar, { src: chain.logoURI, alt: chain.name, size: size, children: chain.name?.[0] }));
-    }
-    return _jsx(AvatarDefaultBadge, { size: size });
+import { AvatarDefaultBadge } from "./Avatar.style.js";
+import { SmallAvatar } from "./SmallAvatar.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/ChainBadgeContent.tsx
+const ChainBadgeContent = ({ chain, size = 16 }) => {
+	if (chain?.logoURI) return /* @__PURE__ */ jsx(SmallAvatar, {
+		src: chain.logoURI,
+		alt: chain.name,
+		size,
+		children: chain.name?.[0]
+	});
+	return /* @__PURE__ */ jsx(AvatarDefaultBadge, { size });
 };
+//#endregion
+export { ChainBadgeContent };
+
 //# sourceMappingURL=ChainBadgeContent.js.map

package/dist/esm/components/Avatar/ChainBadgeContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChainBadgeContent.js","sourceRoot":"","sources":["../../../../src/components/Avatar/ChainBadgeContent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAO9C,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,IAAI,GAAG,EAAE,GACV,EAAE,EAAE;IACH,IAAI,KAAK,EAAE,OAAO,EAAE,CAAC;QACnB,OAAO,CACL,KAAC,WAAW,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,YACzD,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,GACJ,CACf,CAAA;IACH,CAAC;IACD,OAAO,KAAC,kBAAkB,IAAC,IAAI,EAAE,IAAI,GAAI,CAAA;AAC3C,CAAC,CAAA"}
+{"version":3,"file":"ChainBadgeContent.js","names":[],"sources":["../../../../src/components/Avatar/ChainBadgeContent.tsx"],"sourcesContent":["import type { Chain, ExtendedChain } from '@lifi/sdk'\nimport { AvatarDefaultBadge } from './Avatar.style.js'\nimport { SmallAvatar } from './SmallAvatar.js'\n\ninterface ChainBadgeContentProps {\n  chain?: Chain | ExtendedChain\n  size?: number\n}\n\nexport const ChainBadgeContent: React.FC<ChainBadgeContentProps> = ({\n  chain,\n  size = 16,\n}) => {\n  if (chain?.logoURI) {\n    return (\n      <SmallAvatar src={chain.logoURI} alt={chain.name} size={size}>\n        {chain.name?.[0]}\n      </SmallAvatar>\n    )\n  }\n  return <AvatarDefaultBadge size={size} />\n}\n"],"mappings":";;;;AASA,MAAa,qBAAuD,EAClE,OACA,OAAO,SACH;AACJ,KAAI,OAAO,QACT,QACE,oBAAC,aAAD;EAAa,KAAK,MAAM;EAAS,KAAK,MAAM;EAAY;YACrD,MAAM,OAAO;EACF,CAAA;AAGlB,QAAO,oBAAC,oBAAD,EAA0B,MAAQ,CAAA"}

package/dist/esm/components/Avatar/SmallAvatar.js

@@ -1,14 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Avatar, Skeleton, styled } from '@mui/material';
-import { AvatarSkeletonContainer } from './Avatar.style.js';
-export const SmallAvatar = styled(Avatar, {
-    shouldForwardProp: (prop) => prop !== 'size',
-})(({ theme, size = 16 }) => ({
-    background: theme.vars.palette.background.paper,
-    width: size,
-    height: size,
+import { AvatarSkeletonContainer } from "./Avatar.style.js";
+import { Avatar, Skeleton, styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/SmallAvatar.tsx
+const SmallAvatar = styled(Avatar, { shouldForwardProp: (prop) => prop !== "size" })(({ theme, size = 16 }) => ({
+	background: theme.vars.palette.background.paper,
+	width: size,
+	height: size
 }));
-export const SmallAvatarSkeleton = ({ size = 16 }) => {
-    return (_jsx(AvatarSkeletonContainer, { children: _jsx(Skeleton, { width: size, height: size, variant: "circular" }) }));
+const SmallAvatarSkeleton = ({ size = 16 }) => {
+	return /* @__PURE__ */ jsx(AvatarSkeletonContainer, { children: /* @__PURE__ */ jsx(Skeleton, {
+		width: size,
+		height: size,
+		variant: "circular"
+	}) });
 };
+//#endregion
+export { SmallAvatar, SmallAvatarSkeleton };
+
 //# sourceMappingURL=SmallAvatar.js.map

package/dist/esm/components/Avatar/SmallAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmallAvatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/SmallAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAM3D,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE;IACxC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,MAAM;CAC7C,CAAC,CAAmB,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;IAC/C,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;CACb,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAE3B,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,EAAE,EAAE;IACrB,OAAO,CACL,KAAC,uBAAuB,cACtB,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,UAAU,GAAG,GAClC,CAC3B,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SmallAvatar.js","names":[],"sources":["../../../../src/components/Avatar/SmallAvatar.tsx"],"sourcesContent":["import { Avatar, Skeleton, styled } from '@mui/material'\nimport type React from 'react'\nimport { AvatarSkeletonContainer } from './Avatar.style.js'\n\ninterface SmallAvatarProps {\n  size?: number\n}\n\nexport const SmallAvatar: React.FC<\n  React.ComponentProps<typeof Avatar> & SmallAvatarProps\n> = styled(Avatar, {\n  shouldForwardProp: (prop) => prop !== 'size',\n})<SmallAvatarProps>(({ theme, size = 16 }) => ({\n  background: theme.vars.palette.background.paper,\n  width: size,\n  height: size,\n}))\n\nexport const SmallAvatarSkeleton: React.FC<{\n  size?: number\n}> = ({ size = 16 }) => {\n  return (\n    <AvatarSkeletonContainer>\n      <Skeleton width={size} height={size} variant=\"circular\" />\n    </AvatarSkeletonContainer>\n  )\n}\n"],"mappings":";;;;AAQA,MAAa,cAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,QACvC,CAAC,EAAoB,EAAE,OAAO,OAAO,UAAU;CAC9C,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,OAAO;CACP,QAAQ;CACT,EAAE;AAEH,MAAa,uBAEP,EAAE,OAAO,SAAS;AACtB,QACE,oBAAC,yBAAD,EAAA,UACE,oBAAC,UAAD;EAAU,OAAO;EAAM,QAAQ;EAAM,SAAQ;EAAa,CAAA,EAClC,CAAA"}