@lifi/widget 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/esm/components/TokenList/TokenDetailsSheetContent.js

@@ -1,90 +1,175 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Close from '@mui/icons-material/Close';
-import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
-import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded';
-import { Box, IconButton, Link, Skeleton, Typography } from '@mui/material';
-import { forwardRef, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAvailableChains } from '../../hooks/useAvailableChains.js';
-import { useExplorer } from '../../hooks/useExplorer.js';
-import { useToken } from '../../hooks/useToken.js';
-import { shortenAddress } from '../../utils/wallet.js';
-import { TokenAvatar } from '../Avatar/TokenAvatar.js';
-import { CardIconButton } from '../Card/CardIconButton.js';
-import { Label, MetricContainer, TokenDetailsSheetContainer, TokenDetailsSheetHeader, } from './TokenDetailsSheetContent.style.js';
-const noDataLabel = '-';
-export const TokenDetailsSheetContent = forwardRef(({ tokenAddress, chainId, withoutContractAddress }, ref) => {
-    const { t } = useTranslation();
-    const { getAddressLink } = useExplorer();
-    const { getChainById } = useAvailableChains();
-    const { token, isLoading } = useToken(chainId, tokenAddress, true);
-    const chain = useMemo(() => getChainById(chainId), [chainId, getChainById]);
-    const copyContractAddress = async (e) => {
-        e.stopPropagation();
-        try {
-            // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)
-            await navigator.clipboard.writeText(tokenAddress || '');
-        }
-        catch {
-            // Silently fail to avoid crashing the UI if clipboard write fails
-        }
-    };
-    return (_jsxs(TokenDetailsSheetContainer, { children: [_jsxs(TokenDetailsSheetHeader, { children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 3,
-                        }, children: [_jsx(TokenAvatar, { token: token, chain: chain, tokenAvatarSize: 72, chainAvatarSize: 28, isLoading: isLoading }), _jsx(MetricContainer, { children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "rounded", width: 80, height: 24 }), _jsx(Skeleton, { variant: "rounded", width: 80, height: 16 })] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { fontWeight: 700, fontSize: "24px", lineHeight: "24px", color: "text.primary", children: token?.symbol || noDataLabel }), _jsx(Label, { children: token?.name || noDataLabel })] })) })] }), _jsx(IconButton, { onClick: (e) => {
-                            e.stopPropagation();
-                            if (ref && typeof ref !== 'function') {
-                                ref.current?.close();
-                            }
-                        }, sx: { mt: '-8px', mr: '-8px' }, children: _jsx(Close, {}) })] }), _jsx(MetricWithSkeleton, { isLoading: isLoading, label: t('tokenMetric.currentPrice'), width: 200, height: 40, children: _jsx(Typography, { sx: {
-                        fontWeight: 700,
-                        fontSize: '32px',
-                        lineHeight: '40px',
-                        color: 'text.primary',
-                    }, children: token?.priceUSD
-                        ? t('format.currency', {
-                            value: token.priceUSD,
-                        })
-                        : noDataLabel }) }), !withoutContractAddress && (_jsx(MetricWithSkeleton, { isLoading: isLoading, label: t('tokenMetric.contractAddress'), width: 200, height: 24, children: _jsxs(Box, { sx: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 1,
-                    }, children: [_jsx(Typography, { sx: {
-                                fontWeight: 700,
-                                fontSize: '18px',
-                                lineHeight: '24px',
-                                color: 'text.primary',
-                            }, children: shortenAddress(tokenAddress) }), tokenAddress && (_jsx(CardIconButton, { size: "small", onClick: copyContractAddress, children: _jsx(ContentCopyRounded, { fontSize: "inherit" }) })), tokenAddress && (_jsx(CardIconButton, { size: "small", LinkComponent: Link, href: getAddressLink(tokenAddress, chainId), target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), children: _jsx(OpenInNewRounded, { fontSize: "inherit" }) }))] }) })), _jsx(MetricWithSkeleton, { isLoading: isLoading, label: t('tokenMetric.marketCap'), width: 200, height: 24, children: _jsx(Typography, { sx: {
-                        fontWeight: 700,
-                        fontSize: '18px',
-                        lineHeight: '24px',
-                        color: 'text.primary',
-                    }, children: token?.marketCapUSD
-                        ? t('format.currency', {
-                            value: token.marketCapUSD,
-                            notation: 'compact',
-                            compactDisplay: 'short',
-                            maximumFractionDigits: 2,
-                        })
-                        : noDataLabel }) }), _jsx(MetricWithSkeleton, { isLoading: isLoading, label: t('tokenMetric.volume24h'), width: 200, height: 24, children: _jsx(Typography, { sx: {
-                        fontWeight: 700,
-                        fontSize: '18px',
-                        lineHeight: '24px',
-                        color: 'text.primary',
-                    }, children: token?.volumeUSD24H
-                        ? t('format.currency', {
-                            value: token.volumeUSD24H,
-                            notation: 'compact',
-                            compactDisplay: 'short',
-                            maximumFractionDigits: 2,
-                        })
-                        : noDataLabel }) })] }));
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { useToken } from "../../hooks/useToken.js";
+import { CardIconButton } from "../Card/CardIconButton.js";
+import { TokenAvatar } from "../Avatar/TokenAvatar.js";
+import { shortenAddress } from "../../utils/wallet.js";
+import { useExplorer } from "../../hooks/useExplorer.js";
+import { Label, MetricContainer, TokenDetailsSheetContainer, TokenDetailsSheetHeader } from "./TokenDetailsSheetContent.style.js";
+import { forwardRef, useMemo } from "react";
+import { Box, IconButton, Link, Skeleton, Typography } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ContentCopyRounded from "@mui/icons-material/ContentCopyRounded";
+import OpenInNewRounded from "@mui/icons-material/OpenInNewRounded";
+import Close from "@mui/icons-material/Close";
+//#region src/components/TokenList/TokenDetailsSheetContent.tsx
+const noDataLabel = "-";
+const TokenDetailsSheetContent = forwardRef(({ tokenAddress, chainId, withoutContractAddress }, ref) => {
+	const { t } = useTranslation();
+	const { getAddressLink } = useExplorer();
+	const { getChainById } = useAvailableChains();
+	const { token, isLoading } = useToken(chainId, tokenAddress, true);
+	const chain = useMemo(() => getChainById(chainId), [chainId, getChainById]);
+	const copyContractAddress = async (e) => {
+		e.stopPropagation();
+		try {
+			await navigator.clipboard.writeText(tokenAddress || "");
+		} catch {}
+	};
+	return /* @__PURE__ */ jsxs(TokenDetailsSheetContainer, { children: [
+		/* @__PURE__ */ jsxs(TokenDetailsSheetHeader, { children: [/* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				flexDirection: "row",
+				alignItems: "center",
+				gap: 3
+			},
+			children: [/* @__PURE__ */ jsx(TokenAvatar, {
+				token,
+				chain,
+				tokenAvatarSize: 72,
+				chainAvatarSize: 28,
+				isLoading
+			}), /* @__PURE__ */ jsx(MetricContainer, { children: isLoading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Skeleton, {
+				variant: "rounded",
+				width: 80,
+				height: 24
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "rounded",
+				width: 80,
+				height: 16
+			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Typography, {
+				fontWeight: 700,
+				fontSize: "24px",
+				lineHeight: "24px",
+				color: "text.primary",
+				children: token?.symbol || noDataLabel
+			}), /* @__PURE__ */ jsx(Label, { children: token?.name || noDataLabel })] }) })]
+		}), /* @__PURE__ */ jsx(IconButton, {
+			onClick: (e) => {
+				e.stopPropagation();
+				if (ref && typeof ref !== "function") ref.current?.close();
+			},
+			sx: {
+				mt: "-8px",
+				mr: "-8px"
+			},
+			children: /* @__PURE__ */ jsx(Close, {})
+		})] }),
+		/* @__PURE__ */ jsx(MetricWithSkeleton, {
+			isLoading,
+			label: t("tokenMetric.currentPrice"),
+			width: 200,
+			height: 40,
+			children: /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 700,
+					fontSize: "32px",
+					lineHeight: "40px",
+					color: "text.primary"
+				},
+				children: token?.priceUSD ? t("format.currency", { value: token.priceUSD }) : noDataLabel
+			})
+		}),
+		!withoutContractAddress && /* @__PURE__ */ jsx(MetricWithSkeleton, {
+			isLoading,
+			label: t("tokenMetric.contractAddress"),
+			width: 200,
+			height: 24,
+			children: /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "center",
+					gap: 1
+				},
+				children: [
+					/* @__PURE__ */ jsx(Typography, {
+						sx: {
+							fontWeight: 700,
+							fontSize: "18px",
+							lineHeight: "24px",
+							color: "text.primary"
+						},
+						children: shortenAddress(tokenAddress)
+					}),
+					tokenAddress && /* @__PURE__ */ jsx(CardIconButton, {
+						size: "small",
+						onClick: copyContractAddress,
+						children: /* @__PURE__ */ jsx(ContentCopyRounded, { fontSize: "inherit" })
+					}),
+					tokenAddress && /* @__PURE__ */ jsx(CardIconButton, {
+						size: "small",
+						LinkComponent: Link,
+						href: getAddressLink(tokenAddress, chainId),
+						target: "_blank",
+						rel: "nofollow noreferrer",
+						onClick: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ jsx(OpenInNewRounded, { fontSize: "inherit" })
+					})
+				]
+			})
+		}),
+		/* @__PURE__ */ jsx(MetricWithSkeleton, {
+			isLoading,
+			label: t("tokenMetric.marketCap"),
+			width: 200,
+			height: 24,
+			children: /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 700,
+					fontSize: "18px",
+					lineHeight: "24px",
+					color: "text.primary"
+				},
+				children: token?.marketCapUSD ? t("format.currency", {
+					value: token.marketCapUSD,
+					notation: "compact",
+					compactDisplay: "short",
+					maximumFractionDigits: 2
+				}) : noDataLabel
+			})
+		}),
+		/* @__PURE__ */ jsx(MetricWithSkeleton, {
+			isLoading,
+			label: t("tokenMetric.volume24h"),
+			width: 200,
+			height: 24,
+			children: /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 700,
+					fontSize: "18px",
+					lineHeight: "24px",
+					color: "text.primary"
+				},
+				children: token?.volumeUSD24H ? t("format.currency", {
+					value: token.volumeUSD24H,
+					notation: "compact",
+					compactDisplay: "short",
+					maximumFractionDigits: 2
+				}) : noDataLabel
+			})
+		})
+	] });
 });
-const MetricWithSkeleton = ({ label, width, height, isLoading, children, }) => {
-    return (_jsxs(MetricContainer, { children: [_jsx(Label, { children: label }), isLoading ? (_jsx(Skeleton, { variant: "rounded", width: width, height: height })) : (children)] }));
+const MetricWithSkeleton = ({ label, width, height, isLoading, children }) => {
+	return /* @__PURE__ */ jsxs(MetricContainer, { children: [/* @__PURE__ */ jsx(Label, { children: label }), isLoading ? /* @__PURE__ */ jsx(Skeleton, {
+		variant: "rounded",
+		width,
+		height
+	}) : children] });
 };
+//#endregion
+export { TokenDetailsSheetContent };
+
 //# sourceMappingURL=TokenDetailsSheetContent.js.map

package/dist/esm/components/TokenList/TokenDetailsSheetContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenDetailsSheetContent.js","sourceRoot":"","sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TokenDetailsSheetContent.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { forwardRef, type PropsWithChildren, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  Label,\n  MetricContainer,\n  TokenDetailsSheetContainer,\n  TokenDetailsSheetHeader,\n} from './TokenDetailsSheetContent.style.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\ninterface TokenDetailsSheetContentProps {\n  tokenAddress: string | undefined\n  chainId: number | undefined\n  withoutContractAddress: boolean\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent: React.ForwardRefExoticComponent<\n  TokenDetailsSheetContentProps & React.RefAttributes<TokenDetailsSheetBase>\n> = forwardRef<TokenDetailsSheetBase, TokenDetailsSheetContentProps>(\n  ({ tokenAddress, chainId, withoutContractAddress }, ref) => {\n    const { t } = useTranslation()\n    const { getAddressLink } = useExplorer()\n    const { getChainById } = useAvailableChains()\n\n    const { token, isLoading } = useToken(chainId, tokenAddress, true)\n    const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])\n\n    const copyContractAddress = async (e: React.MouseEvent) => {\n      e.stopPropagation()\n      try {\n        // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)\n        await navigator.clipboard.writeText(tokenAddress || '')\n      } catch {\n        // Silently fail to avoid crashing the UI if clipboard write fails\n      }\n    }\n\n    return (\n      <TokenDetailsSheetContainer>\n        <TokenDetailsSheetHeader>\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'row',\n              alignItems: 'center',\n              gap: 3,\n            }}\n          >\n            <TokenAvatar\n              token={token}\n              chain={chain}\n              tokenAvatarSize={72}\n              chainAvatarSize={28}\n              isLoading={isLoading}\n            />\n            <MetricContainer>\n              {isLoading ? (\n                <>\n                  <Skeleton variant=\"rounded\" width={80} height={24} />\n                  <Skeleton variant=\"rounded\" width={80} height={16} />\n                </>\n              ) : (\n                <>\n                  <Typography\n                    fontWeight={700}\n                    fontSize=\"24px\"\n                    lineHeight=\"24px\"\n                    color=\"text.primary\"\n                  >\n                    {token?.symbol || noDataLabel}\n                  </Typography>\n                  <Label>{token?.name || noDataLabel}</Label>\n                </>\n              )}\n            </MetricContainer>\n          </Box>\n          <IconButton\n            onClick={(e) => {\n              e.stopPropagation()\n              if (ref && typeof ref !== 'function') {\n                ref.current?.close()\n              }\n            }}\n            sx={{ mt: '-8px', mr: '-8px' }}\n          >\n            <Close />\n          </IconButton>\n        </TokenDetailsSheetHeader>\n        <MetricWithSkeleton\n          isLoading={isLoading}\n          label={t('tokenMetric.currentPrice')}\n          width={200}\n          height={40}\n        >\n          <Typography\n            sx={{\n              fontWeight: 700,\n              fontSize: '32px',\n              lineHeight: '40px',\n              color: 'text.primary',\n            }}\n          >\n            {token?.priceUSD\n              ? t('format.currency', {\n                  value: token.priceUSD,\n                })\n              : noDataLabel}\n          </Typography>\n        </MetricWithSkeleton>\n        {!withoutContractAddress && (\n          <MetricWithSkeleton\n            isLoading={isLoading}\n            label={t('tokenMetric.contractAddress')}\n            width={200}\n            height={24}\n          >\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: 1,\n              }}\n            >\n              <Typography\n                sx={{\n                  fontWeight: 700,\n                  fontSize: '18px',\n                  lineHeight: '24px',\n                  color: 'text.primary',\n                }}\n              >\n                {shortenAddress(tokenAddress)}\n              </Typography>\n              {tokenAddress && (\n                <CardIconButton size=\"small\" onClick={copyContractAddress}>\n                  <ContentCopyRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              )}\n              {tokenAddress && (\n                <CardIconButton\n                  size=\"small\"\n                  LinkComponent={Link}\n                  href={getAddressLink(tokenAddress, chainId)}\n                  target=\"_blank\"\n                  rel=\"nofollow noreferrer\"\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  <OpenInNewRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              )}\n            </Box>\n          </MetricWithSkeleton>\n        )}\n        <MetricWithSkeleton\n          isLoading={isLoading}\n          label={t('tokenMetric.marketCap')}\n          width={200}\n          height={24}\n        >\n          <Typography\n            sx={{\n              fontWeight: 700,\n              fontSize: '18px',\n              lineHeight: '24px',\n              color: 'text.primary',\n            }}\n          >\n            {token?.marketCapUSD\n              ? t('format.currency', {\n                  value: token.marketCapUSD,\n                  notation: 'compact',\n                  compactDisplay: 'short',\n                  maximumFractionDigits: 2,\n                })\n              : noDataLabel}\n          </Typography>\n        </MetricWithSkeleton>\n        <MetricWithSkeleton\n          isLoading={isLoading}\n          label={t('tokenMetric.volume24h')}\n          width={200}\n          height={24}\n        >\n          <Typography\n            sx={{\n              fontWeight: 700,\n              fontSize: '18px',\n              lineHeight: '24px',\n              color: 'text.primary',\n            }}\n          >\n            {token?.volumeUSD24H\n              ? t('format.currency', {\n                  value: token.volumeUSD24H,\n                  notation: 'compact',\n                  compactDisplay: 'short',\n                  maximumFractionDigits: 2,\n                })\n              : noDataLabel}\n          </Typography>\n        </MetricWithSkeleton>\n      </TokenDetailsSheetContainer>\n    )\n  }\n)\n\ninterface MetricWithSkeletonProps {\n  label: string\n  isLoading: boolean\n  width: number\n  height: number\n}\n\nconst MetricWithSkeleton = ({\n  label,\n  width,\n  height,\n  isLoading,\n  children,\n}: PropsWithChildren<MetricWithSkeletonProps>) => {\n  return (\n    <MetricContainer>\n      <Label>{label}</Label>\n      {isLoading ? (\n        <Skeleton variant=\"rounded\" width={width} height={height} />\n      ) : (\n        children\n      )}\n    </MetricContainer>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/TokenDetailsSheetContent.style.js

@@ -1,28 +1,32 @@
-import { Box, styled, Typography } from '@mui/material';
-import { PageContainer } from '../PageContainer.js';
-export const TokenDetailsSheetContainer = styled(PageContainer)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-    paddingTop: theme.spacing(3),
-    paddingBottom: theme.spacing(3),
+import { PageContainer } from "../PageContainer.js";
+import { Box, Typography, styled } from "@mui/material";
+//#region src/components/TokenList/TokenDetailsSheetContent.style.tsx
+const TokenDetailsSheetContainer = styled(PageContainer)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(2),
+	paddingTop: theme.spacing(3),
+	paddingBottom: theme.spacing(3)
 }));
-export const TokenDetailsSheetHeader = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    gap: theme.spacing(2),
+const TokenDetailsSheetHeader = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "row",
+	alignItems: "flex-start",
+	justifyContent: "space-between",
+	gap: theme.spacing(2)
 }));
-export const Label = styled(Typography)(({ theme }) => ({
-    fontWeight: 500,
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: theme.vars.palette.text.secondary,
+const Label = styled(Typography)(({ theme }) => ({
+	fontWeight: 500,
+	fontSize: "12px",
+	lineHeight: "16px",
+	color: theme.vars.palette.text.secondary
 }));
-export const MetricContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
+const MetricContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(1)
 }));
+//#endregion
+export { Label, MetricContainer, TokenDetailsSheetContainer, TokenDetailsSheetHeader };
+
 //# sourceMappingURL=TokenDetailsSheetContent.style.js.map

package/dist/esm/components/TokenList/TokenDetailsSheetContent.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenDetailsSheetContent.style.js","sourceRoot":"","sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEnD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAC9C,aAAa,CACd,CAAqB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACrB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC5B,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAChC,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACjE,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,YAAY;IACxB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CACtB,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACtD,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;CACzC,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACzD,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CACtB,CAAC,CAAC,CAAA"}
+{"version":3,"file":"TokenDetailsSheetContent.style.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\nimport type { PageContainerProps } from '../PageContainer.js'\nimport { PageContainer } from '../PageContainer.js'\n\nexport const TokenDetailsSheetContainer: React.FC<\n  React.ComponentProps<typeof PageContainer> & PageContainerProps\n> = styled(PageContainer)<PageContainerProps>(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(3),\n  paddingBottom: theme.spacing(3),\n}))\n\nexport const TokenDetailsSheetHeader: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: theme.spacing(2),\n}))\n\nexport const Label: React.FC<React.ComponentProps<typeof Typography>> = styled(\n  Typography\n)(({ theme }) => ({\n  fontWeight: 500,\n  fontSize: '12px',\n  lineHeight: '16px',\n  color: theme.vars.palette.text.secondary,\n}))\n\nexport const MetricContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n  }))\n"],"mappings":";;;AAKA,MAAa,6BAET,OAAO,cAAc,EAAsB,EAAE,aAAa;CAC5D,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,EAAE;CACrB,YAAY,MAAM,QAAQ,EAAE;CAC5B,eAAe,MAAM,QAAQ,EAAE;CAChC,EAAE;AAEH,MAAa,0BAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK,MAAM,QAAQ,EAAE;CACtB,EAAE;AAEH,MAAa,QAA2D,OACtE,WACD,EAAE,EAAE,aAAa;CAChB,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAChC,EAAE;AAEH,MAAa,kBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,EAAE;CACtB,EAAE"}

package/dist/esm/components/TokenList/TokenList.js

@@ -1,41 +1,65 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { memo, useEffect, useRef } from 'react';
-import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js';
-import { useListHeight } from '../../hooks/useListHeight.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import { useTokenBalances } from '../../hooks/useTokenBalances.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { WidgetEvent } from '../../types/events.js';
-import { TokenNotFound } from './TokenNotFound.js';
-import { useTokenSelect } from './useTokenSelect.js';
-import { VirtualizedTokenList } from './VirtualizedTokenList.js';
-export const TokenList = memo(({ formType, headerRef }) => {
-    const navigateBack = useNavigateBack();
-    const listParentRef = useRef(null);
-    const { listHeight } = useListHeight({
-        listParentRef,
-        headerRef,
-    });
-    const emitter = useWidgetEvents();
-    const [selectedChainId, selectedTokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
-    const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
-    const [tokenSearchFilter] = useDebouncedWatch(320, 'tokenSearchFilter');
-    const { tokens, withCategories, withPinnedTokens, isTokensLoading, isBalanceLoading, isSearchLoading, } = useTokenBalances(selectedChainId, formType, isAllNetworks, tokenSearchFilter);
-    const handleTokenClick = useTokenSelect(formType, navigateBack);
-    const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks;
-    useEffect(() => {
-        const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '');
-        if (normalizedSearchFilter) {
-            emitter.emit(WidgetEvent.TokenSearch, {
-                value: normalizedSearchFilter,
-                tokens,
-            });
-        }
-    }, [tokenSearchFilter, tokens, emitter]);
-    return (_jsxs(Box, { ref: listParentRef, style: { height: listHeight, overflow: 'auto' }, children: [!tokens.length && !isTokensLoading && !isSearchLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, scrollElementRef: listParentRef, chainId: selectedChainId, isLoading: isTokensLoading || isSearchLoading, isBalanceLoading: isBalanceLoading, showCategories: showCategories, showPinnedTokens: withPinnedTokens, onClick: handleTokenClick, selectedTokenAddress: selectedTokenAddress, isAllNetworks: isAllNetworks })] }));
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import { WidgetEvent } from "../../types/events.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { useDebouncedWatch } from "../../hooks/useDebouncedWatch.js";
+import { useNavigateBack } from "../../hooks/useNavigateBack.js";
+import { useListHeight } from "../../hooks/useListHeight.js";
+import { useTokenSelect } from "./useTokenSelect.js";
+import { useTokenBalances } from "../../hooks/useTokenBalances.js";
+import { TokenNotFound } from "./TokenNotFound.js";
+import { VirtualizedTokenList } from "./VirtualizedTokenList.js";
+import { memo, useEffect, useRef } from "react";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TokenList/TokenList.tsx
+const TokenList = memo(({ formType, headerRef }) => {
+	const navigateBack = useNavigateBack();
+	const listParentRef = useRef(null);
+	const { listHeight } = useListHeight({
+		listParentRef,
+		headerRef
+	});
+	const emitter = useWidgetEvents();
+	const [selectedChainId, selectedTokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+	const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
+	const [tokenSearchFilter] = useDebouncedWatch(320, "tokenSearchFilter");
+	const { tokens, withCategories, withPinnedTokens, isTokensLoading, isBalanceLoading, isSearchLoading } = useTokenBalances(selectedChainId, formType, isAllNetworks, tokenSearchFilter);
+	const handleTokenClick = useTokenSelect(formType, navigateBack);
+	const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks;
+	useEffect(() => {
+		const normalizedSearchFilter = tokenSearchFilter?.replaceAll("$", "");
+		if (normalizedSearchFilter) emitter.emit(WidgetEvent.TokenSearch, {
+			value: normalizedSearchFilter,
+			tokens
+		});
+	}, [
+		tokenSearchFilter,
+		tokens,
+		emitter
+	]);
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: listParentRef,
+		style: {
+			height: listHeight,
+			overflow: "auto"
+		},
+		children: [!tokens.length && !isTokensLoading && !isSearchLoading ? /* @__PURE__ */ jsx(TokenNotFound, { formType }) : null, /* @__PURE__ */ jsx(VirtualizedTokenList, {
+			tokens,
+			scrollElementRef: listParentRef,
+			chainId: selectedChainId,
+			isLoading: isTokensLoading || isSearchLoading,
+			isBalanceLoading,
+			showCategories,
+			showPinnedTokens: withPinnedTokens,
+			onClick: handleTokenClick,
+			selectedTokenAddress,
+			isAllNetworks
+		})]
+	});
 });
+//#endregion
+export { TokenList };
+
 //# sourceMappingURL=TokenList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TokenList.js","sourceRoot":"","sources":["../../../../src/components/TokenList/TokenList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TokenList.js","names":[],"sources":["../../../../src/components/TokenList/TokenList.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type FC, memo, useEffect, useRef } from 'react'\nimport { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useTokenBalances } from '../../hooks/useTokenBalances.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { TokenNotFound } from './TokenNotFound.js'\nimport type { TokenListProps } from './types.js'\nimport { useTokenSelect } from './useTokenSelect.js'\nimport { VirtualizedTokenList } from './VirtualizedTokenList.js'\n\nexport const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {\n  const navigateBack = useNavigateBack()\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n  const { listHeight } = useListHeight({\n    listParentRef,\n    headerRef,\n  })\n\n  const emitter = useWidgetEvents()\n\n  const [selectedChainId, selectedTokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    FormKeyHelper.getTokenKey(formType)\n  )\n\n  const isAllNetworks = useChainOrderStore(\n    (state) => state[`${formType}IsAllNetworks`]\n  )\n\n  const [tokenSearchFilter]: string[] = useDebouncedWatch(\n    320,\n    'tokenSearchFilter'\n  )\n\n  const {\n    tokens,\n    withCategories,\n    withPinnedTokens,\n    isTokensLoading,\n    isBalanceLoading,\n    isSearchLoading,\n  } = useTokenBalances(\n    selectedChainId,\n    formType,\n    isAllNetworks,\n    tokenSearchFilter\n  )\n\n  const handleTokenClick = useTokenSelect(formType, navigateBack)\n\n  const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks\n\n  useEffect(() => {\n    const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')\n    if (normalizedSearchFilter) {\n      emitter.emit(WidgetEvent.TokenSearch, {\n        value: normalizedSearchFilter,\n        tokens,\n      })\n    }\n  }, [tokenSearchFilter, tokens, emitter])\n\n  return (\n    <Box ref={listParentRef} style={{ height: listHeight, overflow: 'auto' }}>\n      {!tokens.length && !isTokensLoading && !isSearchLoading ? (\n        <TokenNotFound formType={formType} />\n      ) : null}\n      <VirtualizedTokenList\n        tokens={tokens}\n        scrollElementRef={listParentRef}\n        chainId={selectedChainId}\n        isLoading={isTokensLoading || isSearchLoading}\n        isBalanceLoading={isBalanceLoading}\n        showCategories={showCategories}\n        showPinnedTokens={withPinnedTokens}\n        onClick={handleTokenClick}\n        selectedTokenAddress={selectedTokenAddress}\n        isAllNetworks={isAllNetworks}\n      />\n    </Box>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAa,YAAgC,MAAM,EAAE,UAAU,gBAAgB;CAC7E,MAAM,eAAe,iBAAiB;CACtC,MAAM,gBAAgB,OAAgC,KAAK;CAC3D,MAAM,EAAE,eAAe,cAAc;EACnC;EACA;EACD,CAAC;CAEF,MAAM,UAAU,iBAAiB;CAEjC,MAAM,CAAC,iBAAiB,wBAAwB,eAC9C,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAED,MAAM,gBAAgB,oBACnB,UAAU,MAAM,GAAG,SAAS,gBAC9B;CAED,MAAM,CAAC,qBAA+B,kBACpC,KACA,oBACD;CAED,MAAM,EACJ,QACA,gBACA,kBACA,iBACA,kBACA,oBACE,iBACF,iBACA,UACA,eACA,kBACD;CAED,MAAM,mBAAmB,eAAe,UAAU,aAAa;CAE/D,MAAM,iBAAiB,kBAAkB,CAAC,qBAAqB,CAAC;AAEhE,iBAAgB;EACd,MAAM,yBAAyB,mBAAmB,WAAW,KAAK,GAAG;AACrE,MAAI,uBACF,SAAQ,KAAK,YAAY,aAAa;GACpC,OAAO;GACP;GACD,CAAC;IAEH;EAAC;EAAmB;EAAQ;EAAQ,CAAC;AAExC,QACE,qBAAC,KAAD;EAAK,KAAK;EAAe,OAAO;GAAE,QAAQ;GAAY,UAAU;GAAQ;YAAxE,CACG,CAAC,OAAO,UAAU,CAAC,mBAAmB,CAAC,kBACtC,oBAAC,eAAD,EAAyB,UAAY,CAAA,GACnC,MACJ,oBAAC,sBAAD;GACU;GACR,kBAAkB;GAClB,SAAS;GACT,WAAW,mBAAmB;GACZ;GACF;GAChB,kBAAkB;GAClB,SAAS;GACa;GACP;GACf,CAAA,CACE;;EAER"}

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

@@ -1,30 +1,30 @@
-import { IconButton as MuiIconButton, List as MuiList, styled, } from '@mui/material';
-import { ListItem as ListItemBase } from '../ListItem/ListItem.js';
-export const ListItem = styled(ListItemBase)(() => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
+import { ListItem as ListItem$2 } from "../ListItem/ListItem.js";
+import { IconButton, List, styled } from "@mui/material";
+//#region src/components/TokenList/TokenList.style.tsx
+const ListItem$1 = styled(ListItem$2)(() => ({
+	position: "absolute",
+	top: 0,
+	left: 0
 }));
-export const List = styled(MuiList)(({ theme }) => ({
-    cursor: 'pointer',
-    marginLeft: theme.spacing(1.5),
-    marginRight: theme.spacing(1.5),
+const List$1 = styled(List)(({ theme }) => ({
+	cursor: "pointer",
+	marginLeft: theme.spacing(1.5),
+	marginRight: theme.spacing(1.5)
 }));
-export const IconButton = styled(MuiIconButton)(({ theme }) => ({
-    lineHeight: 1,
-    fontSize: 12,
-    fontWeight: 400,
-    padding: theme.spacing(0.375, 0.375),
-    margin: theme.spacing(0, 0, 0, 0.25),
-    color: 'inherit',
-    backgroundColor: 'unset',
-    minWidth: 'unset',
-    borderRadius: theme.vars.shape.borderRadiusTertiary,
-    '&:hover': {
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-    },
-    svg: {
-        fontSize: 14,
-    },
+const IconButton$1 = styled(IconButton)(({ theme }) => ({
+	lineHeight: 1,
+	fontSize: 12,
+	fontWeight: 400,
+	padding: theme.spacing(.375, .375),
+	margin: theme.spacing(0, 0, 0, .25),
+	color: "inherit",
+	backgroundColor: "unset",
+	minWidth: "unset",
+	borderRadius: theme.vars.shape.borderRadiusTertiary,
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
+	svg: { fontSize: 14 }
 }));
+//#endregion
+export { IconButton$1 as IconButton, List$1 as List, ListItem$1 as ListItem };
+
 //# sourceMappingURL=TokenList.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TokenList.style.js","sourceRoot":"","sources":["../../../../src/components/TokenList/TokenList.style.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,IAAI,aAAa,EAC3B,IAAI,IAAI,OAAO,EACf,MAAM,GACP,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAElE,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAClD,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;CACR,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IAC9B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;CAChC,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,aAAa,CAAC,CAC7C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACd,UAAU,EAAE,CAAC;IACb,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;IACpC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC;IACpC,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,OAAO;IACxB,QAAQ,EAAE,OAAO;IACjB,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB;IACnD,SAAS,EAAE;QACT,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;KACjF;IACD,GAAG,EAAE;QACH,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CACH,CAAA"}
+{"version":3,"file":"TokenList.style.js","names":["ListItem","ListItemBase","List","MuiList","IconButton","MuiIconButton"],"sources":["../../../../src/components/TokenList/TokenList.style.tsx"],"sourcesContent":["import type { IconButtonProps, LinkProps } from '@mui/material'\nimport {\n  IconButton as MuiIconButton,\n  List as MuiList,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { ListItem as ListItemBase } from '../ListItem/ListItem.js'\n\nexport const ListItem: React.FC<\n  React.ComponentProps<typeof ListItemBase> & IconButtonProps & LinkProps\n> = styled(ListItemBase)(() => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}))\n\nexport const List: React.FC<\n  React.ComponentProps<typeof MuiList> & IconButtonProps & LinkProps\n> = styled(MuiList)(({ theme }) => ({\n  cursor: 'pointer',\n  marginLeft: theme.spacing(1.5),\n  marginRight: theme.spacing(1.5),\n}))\n\nexport const IconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> & IconButtonProps & LinkProps\n> = styled(MuiIconButton)<IconButtonProps & LinkProps>(({ theme }) => ({\n  lineHeight: 1,\n  fontSize: 12,\n  fontWeight: 400,\n  padding: theme.spacing(0.375, 0.375),\n  margin: theme.spacing(0, 0, 0, 0.25),\n  color: 'inherit',\n  backgroundColor: 'unset',\n  minWidth: 'unset',\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n  svg: {\n    fontSize: 14,\n  },\n}))\n"],"mappings":";;;AASA,MAAaA,aAET,OAAOC,WAAa,QAAQ;CAC9B,UAAU;CACV,KAAK;CACL,MAAM;CACP,EAAE;AAEH,MAAaC,SAET,OAAOC,KAAQ,EAAE,EAAE,aAAa;CAClC,QAAQ;CACR,YAAY,MAAM,QAAQ,IAAI;CAC9B,aAAa,MAAM,QAAQ,IAAI;CAChC,EAAE;AAEH,MAAaC,eAET,OAAOC,WAAc,EAA+B,EAAE,aAAa;CACrE,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,SAAS,MAAM,QAAQ,MAAO,KAAM;CACpC,QAAQ,MAAM,QAAQ,GAAG,GAAG,GAAG,IAAK;CACpC,OAAO;CACP,iBAAiB;CACjB,UAAU;CACV,cAAc,MAAM,KAAK,MAAM;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACD,KAAK,EACH,UAAU,IACX;CACF,EAAE"}