@lifi/widget 0.0.0-preview-6cc63bac

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

@@ -0,0 +1,67 @@
+import { Card as Card$1 } from "../Card/Card.js";
+import { CardHeader as CardHeader$1 } from "../Card/CardHeader.js";
+import { CardContent, cardHeaderClasses, styled } from "@mui/material";
+//#region src/components/SelectTokenButton/SelectTokenButton.style.tsx
+const SelectTokenCardHeader = styled(CardHeader$1, { shouldForwardProp: (prop) => !["selected"].includes(prop) })(({ theme }) => ({
+	padding: theme.spacing(2),
+	[`.${cardHeaderClasses.title}`]: {
+		color: theme.vars.palette.text.secondary,
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		width: 96,
+		fontSize: 18,
+		fontWeight: 500,
+		[theme.breakpoints.down(theme.breakpoints.values.xs)]: { fontSize: 16 }
+	},
+	[`.${cardHeaderClasses.subheader}`]: {
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		width: 96
+	},
+	variants: [{
+		props: ({ selected }) => selected,
+		style: { [`.${cardHeaderClasses.title}`]: {
+			color: theme.vars.palette.text.primary,
+			fontWeight: 600
+		} }
+	}]
+}));
+const SelectTokenCard = styled(Card$1)(({ theme }) => {
+	return {
+		flex: 1,
+		...theme.components?.MuiCard?.defaultProps?.variant !== "outlined" && {
+			background: "none",
+			"&:hover": {
+				cursor: "pointer",
+				background: "none"
+			}
+		}
+	};
+});
+const CardContent$1 = styled(CardContent, { shouldForwardProp: (prop) => !["formType", "mask"].includes(prop) })(({ theme, formType, mask = true }) => {
+	const cardVariant = theme.components?.MuiCard?.defaultProps?.variant;
+	const horizontal = formType === "to" ? "-8px" : "calc(100% + 8px)";
+	return {
+		padding: 0,
+		transition: theme.transitions.create(["background-color"], {
+			duration: theme.transitions.duration.enteringScreen,
+			easing: theme.transitions.easing.easeOut
+		}),
+		"&:last-child": { paddingBottom: 0 },
+		...cardVariant !== "outlined" && {
+			backgroundColor: theme.vars.palette.background.paper,
+			mask: mask ? `radial-gradient(circle 20px at ${horizontal} 50%, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat` : "none"
+		},
+		...cardVariant === "filled" && { "&:hover": {
+			cursor: "pointer",
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
+			...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)` })
+		} }
+	};
+});
+//#endregion
+export { CardContent$1 as CardContent, SelectTokenCard, SelectTokenCardHeader };
+
+//# sourceMappingURL=SelectTokenButton.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTokenButton.style.js","names":["CardHeader","Card","CardContent","MuiCardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"sourcesContent":["import {\n  cardHeaderClasses,\n  CardContent as MuiCardContent,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { Card } from '../Card/Card.js'\nimport { CardHeader } from '../Card/CardHeader.js'\n\nexport const SelectTokenCardHeader: React.FC<\n  React.ComponentProps<typeof CardHeader> & {\n    selected?: boolean\n  }\n> = styled(CardHeader, {\n  shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n  padding: theme.spacing(2),\n  [`.${cardHeaderClasses.title}`]: {\n    color: theme.vars.palette.text.secondary,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 96,\n    fontSize: 18,\n    fontWeight: 500,\n    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n      fontSize: 16,\n    },\n  },\n  [`.${cardHeaderClasses.subheader}`]: {\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 96,\n  },\n  variants: [\n    {\n      props: ({ selected }) => selected,\n      style: {\n        [`.${cardHeaderClasses.title}`]: {\n          color: theme.vars.palette.text.primary,\n          fontWeight: 600,\n        },\n      },\n    },\n  ],\n}))\n\nexport const SelectTokenCard: React.FC<\n  React.ComponentProps<typeof Card> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(Card)(({ theme }) => {\n  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n  return {\n    flex: 1,\n    ...(cardVariant !== 'outlined' && {\n      background: 'none',\n      '&:hover': {\n        cursor: 'pointer',\n        background: 'none',\n      },\n    }),\n  }\n})\n\nexport const CardContent: React.FC<\n  React.ComponentProps<typeof MuiCardContent> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(MuiCardContent, {\n  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),\n})<{ formType?: FormType; mask?: boolean }>(\n  ({ theme, formType, mask = true }) => {\n    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n    const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'\n    const horizontal = direction\n    const vertical = '50%'\n    return {\n      padding: 0,\n      transition: theme.transitions.create(['background-color'], {\n        duration: theme.transitions.duration.enteringScreen,\n        easing: theme.transitions.easing.easeOut,\n      }),\n      '&:last-child': {\n        paddingBottom: 0,\n      },\n      ...(cardVariant !== 'outlined' && {\n        backgroundColor: theme.vars.palette.background.paper,\n        mask: mask\n          ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n          : 'none',\n      }),\n      ...(cardVariant === 'filled' && {\n        '&:hover': {\n          cursor: 'pointer',\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n          }),\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;;;AAUA,MAAa,wBAIT,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,UAAU,EAAE,SAAS,IAAc,EACpE,CAAC,GAA2B,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,CAAC;EACvB,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACP,UAAU;EACV,YAAY;GACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,UAAU,GACZ;CACF;EACC,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;CACT;CACA,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,GACJ,IAAI,kBAAkB,UAAU;GAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,YAAY;EACd,EACF;CACF,CACF;AACF,EAAE;AAEF,MAAa,kBAKT,OAAOC,MAAI,GAAG,EAAE,YAAY;CAE9B,OAAO;EACL,MAAM;EACN,GAHkB,MAAM,YAAY,SAAS,cAAc,YAGvC,cAAc;GAChC,YAAY;GACZ,WAAW;IACT,QAAQ;IACR,YAAY;GACd;EACF;CACF;AACF,CAAC;AAED,MAAaC,gBAKT,OAAOC,aAAgB,EACzB,oBAAoB,SAAS,CAAC,CAAC,YAAY,MAAM,EAAE,SAAS,IAAc,EAC5E,CAAC,GACE,EAAE,OAAO,UAAU,OAAO,WAAW;CACpC,MAAM,cAAc,MAAM,YAAY,SAAS,cAAc;CAE7D,MAAM,aADY,aAAa,OAAO,SAAS;CAG/C,OAAO;EACL,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG;GACzD,UAAU,MAAM,YAAY,SAAS;GACrC,QAAQ,MAAM,YAAY,OAAO;EACnC,CAAC;EACD,gBAAgB,EACd,eAAe,EACjB;EACA,GAAI,gBAAgB,cAAc;GAChC,iBAAiB,MAAM,KAAK,QAAQ,WAAW;GAC/C,MAAM,OACF,kCAAkC,WAAW,0DAC7C;EACN;EACA,GAAI,gBAAgB,YAAY,EAC9B,WAAW;GACT,QAAQ;GACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;GAC3E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,cAC7E,CAAC;EACH,EACF;CACF;AACF,CACF"}

package/dist/esm/components/SendToWallet/SendToWalletButton.js

@@ -0,0 +1,115 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useBookmarkActions } from "../../stores/bookmarks/useBookmarkActions.js";
+import { useBookmarks } from "../../stores/bookmarks/useBookmarks.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { Card as Card$1 } from "../Card/Card.js";
+import { defaultChainIdsByType } from "../../utils/chainType.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { CardIconButton } from "../Card/CardIconButton.js";
+import { shortenAddress } from "../../utils/wallet.js";
+import { CardTitle } from "../Card/CardTitle.js";
+import { AccountAvatar } from "../Avatar/AccountAvatar.js";
+import { SendToWalletCardHeader, SendToWalletCardTitleRow, SendToWalletRequiredLabel, SendToWalletRequiredLabelText } from "./SendToWalletButton.style.js";
+import { useEffect, useRef } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Box, Collapse } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useChainTypeFromAddress } from "@lifi/widget-provider";
+import { useAccount } from "@lifi/wallet-management";
+import CloseRounded from "@mui/icons-material/CloseRounded";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/components/SendToWallet/SendToWalletButton.tsx
+const SendToWalletButton = (props) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } = useWidgetConfig();
+	const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues("toAddress", "toChain", "toToken");
+	const { setFieldValue } = useFieldActions();
+	const { selectedBookmark } = useBookmarks();
+	const { setSelectedBookmark } = useBookmarkActions();
+	const { accounts } = useAccount();
+	const { getChainTypeFromAddress } = useChainTypeFromAddress();
+	const { requiredToAddress } = useToAddressRequirements();
+	const disabledToAddress = disabledUI?.toAddress;
+	const hiddenToAddress = hiddenUI?.toAddress;
+	const address = toAddressFieldValue ? shortenAddress(toAddressFieldValue) : t("sendToWallet.enterAddress", { context: "short" });
+	const matchingConnectedAccount = accounts.find((account) => account.address === toAddressFieldValue);
+	const chainType = !matchingConnectedAccount ? selectedBookmark?.chainType || (toAddressFieldValue ? getChainTypeFromAddress(toAddressFieldValue) : void 0) : void 0;
+	const chainId = toChainId && toTokenAddress ? toChainId : matchingConnectedAccount ? matchingConnectedAccount.chainId : chainType ? defaultChainIdsByType[chainType] : void 0;
+	const isConnectedAccount = selectedBookmark?.isConnectedAccount && matchingConnectedAccount?.isConnected;
+	const connectedAccountName = matchingConnectedAccount?.connector?.name;
+	const bookmarkName = selectedBookmark?.name;
+	const headerTitle = isConnectedAccount ? connectedAccountName || address : bookmarkName || connectedAccountName || address;
+	const headerSubheader = isConnectedAccount || bookmarkName || connectedAccountName ? address : null;
+	const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress;
+	const handleOnClick = () => {
+		navigate({ to: toAddresses?.length ? navigationRoutes.configuredWallets : navigationRoutes.sendToWallet });
+	};
+	const clearSelectedBookmark = (e) => {
+		e.stopPropagation();
+		setFieldValue("toAddress", "", { isTouched: true });
+		setSelectedBookmark();
+	};
+	const collapseTransitionTime = useRef(0);
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			collapseTransitionTime.current = 225;
+		}, 0);
+		return () => clearTimeout(timeout);
+	}, []);
+	const isOpenCollapse = !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue);
+	const title = mode === "custom" && modeOptions?.custom?.type === "deposit" ? t("header.depositTo") : t("header.sendToWallet");
+	return /* @__PURE__ */ jsx(Collapse, {
+		timeout: collapseTransitionTime.current,
+		in: isOpenCollapse,
+		mountOnEnter: true,
+		unmountOnExit: true,
+		children: /* @__PURE__ */ jsxs(Card$1, {
+			role: "button",
+			onClick: disabledForChanges ? void 0 : handleOnClick,
+			sx: {
+				width: "100%",
+				...props.sx
+			},
+			children: [/* @__PURE__ */ jsxs(SendToWalletCardTitleRow, { children: [/* @__PURE__ */ jsx(CardTitle, {
+				sx: { p: 0 },
+				children: title
+			}), requiredToAddress && !toAddressFieldValue ? /* @__PURE__ */ jsxs(SendToWalletRequiredLabel, {
+				variant: "warning",
+				children: [/* @__PURE__ */ jsx(WarningRounded, { sx: { fontSize: 14 } }), /* @__PURE__ */ jsx(SendToWalletRequiredLabelText, {
+					type: "icon",
+					children: t("sendToWallet.required")
+				})]
+			}) : null] }), /* @__PURE__ */ jsx(Box, {
+				sx: {
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center"
+				},
+				children: /* @__PURE__ */ jsx(SendToWalletCardHeader, {
+					avatar: /* @__PURE__ */ jsx(AccountAvatar, {
+						chainId,
+						account: matchingConnectedAccount,
+						toAddress,
+						empty: !toAddressFieldValue
+					}),
+					title: headerTitle,
+					subheader: headerSubheader,
+					selected: !!toAddressFieldValue || disabledToAddress,
+					action: toAddressFieldValue && !disabledForChanges ? /* @__PURE__ */ jsx(CardIconButton, {
+						onClick: clearSelectedBookmark,
+						size: "small",
+						children: /* @__PURE__ */ jsx(CloseRounded, { fontSize: "inherit" })
+					}) : null
+				})
+			})]
+		})
+	});
+};
+//#endregion
+export { SendToWalletButton };
+
+//# sourceMappingURL=SendToWalletButton.js.map

package/dist/esm/components/SendToWallet/SendToWalletButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  SendToWalletCardHeader,\n  SendToWalletCardTitleRow,\n  SendToWalletRequiredLabel,\n  SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } =\n    useWidgetConfig()\n  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n    'toAddress',\n    'toChain',\n    'toToken'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { selectedBookmark } = useBookmarks()\n  const { setSelectedBookmark } = useBookmarkActions()\n  const { accounts } = useAccount()\n  const { getChainTypeFromAddress } = useChainTypeFromAddress()\n  const { requiredToAddress } = useToAddressRequirements()\n  const disabledToAddress = disabledUI?.toAddress\n  const hiddenToAddress = hiddenUI?.toAddress\n\n  const address = toAddressFieldValue\n    ? shortenAddress(toAddressFieldValue)\n    : t('sendToWallet.enterAddress', {\n        context: 'short',\n      })\n\n  const matchingConnectedAccount = accounts.find(\n    (account) => account.address === toAddressFieldValue\n  )\n\n  const chainType = !matchingConnectedAccount\n    ? selectedBookmark?.chainType ||\n      (toAddressFieldValue\n        ? getChainTypeFromAddress(toAddressFieldValue)\n        : undefined)\n    : undefined\n\n  const chainId =\n    toChainId && toTokenAddress\n      ? toChainId\n      : matchingConnectedAccount\n        ? matchingConnectedAccount.chainId\n        : chainType\n          ? defaultChainIdsByType[chainType]\n          : undefined\n\n  const isConnectedAccount =\n    selectedBookmark?.isConnectedAccount &&\n    matchingConnectedAccount?.isConnected\n  const connectedAccountName = matchingConnectedAccount?.connector?.name\n  const bookmarkName = selectedBookmark?.name\n\n  const headerTitle = isConnectedAccount\n    ? connectedAccountName || address\n    : bookmarkName || connectedAccountName || address\n\n  const headerSubheader =\n    isConnectedAccount || bookmarkName || connectedAccountName ? address : null\n\n  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n  const handleOnClick = () => {\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n  }\n\n  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setFieldValue('toAddress', '', { isTouched: true })\n    setSelectedBookmark()\n  }\n\n  // The collapse opens instantly on first page load/component mount when there is an address to display\n  // After which it needs an animated transition for open and closing.\n  // collapseTransitionTime is used specify the transition time for opening and closing\n  const collapseTransitionTime = useRef(0)\n\n  // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      collapseTransitionTime.current = 225\n    }, 0)\n    return () => clearTimeout(timeout)\n  }, [])\n\n  const isOpenCollapse =\n    !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue)\n\n  const title =\n    mode === 'custom' && modeOptions?.custom?.type === 'deposit'\n      ? t('header.depositTo')\n      : t('header.sendToWallet')\n\n  return (\n    <Collapse\n      timeout={collapseTransitionTime.current as number}\n      in={isOpenCollapse}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Card\n        role=\"button\"\n        onClick={disabledForChanges ? undefined : handleOnClick}\n        sx={{ width: '100%', ...props.sx }}\n      >\n        <SendToWalletCardTitleRow>\n          <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n          {requiredToAddress && !toAddressFieldValue ? (\n            <SendToWalletRequiredLabel variant=\"warning\">\n              <WarningRounded sx={{ fontSize: 14 }} />\n              <SendToWalletRequiredLabelText type=\"icon\">\n                {t('sendToWallet.required')}\n              </SendToWalletRequiredLabelText>\n            </SendToWalletRequiredLabel>\n          ) : null}\n        </SendToWalletCardTitleRow>\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          <SendToWalletCardHeader\n            avatar={\n              <AccountAvatar\n                chainId={chainId}\n                account={matchingConnectedAccount}\n                toAddress={toAddress}\n                empty={!toAddressFieldValue}\n              />\n            }\n            title={headerTitle}\n            subheader={headerSubheader}\n            selected={!!toAddressFieldValue || disabledToAddress}\n            action={\n              toAddressFieldValue && !disabledForChanges ? (\n                <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n                  <CloseRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              ) : null\n            }\n          />\n        </Box>\n      </Card>\n    </Collapse>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/SendToWallet/SendToWalletButton.style.js

@@ -0,0 +1,53 @@
+import { CardLabel, CardLabelTypography } from "../Card/CardLabel.js";
+import { CardHeader as CardHeader$1 } from "../Card/CardHeader.js";
+import { Box, cardHeaderClasses, styled } from "@mui/material";
+//#region src/components/SendToWallet/SendToWalletButton.style.tsx
+const SendToWalletCardTitleRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	padding: theme.spacing(2, 2, 0, 2),
+	height: 30
+}));
+const SendToWalletRequiredLabel = styled(CardLabel)(({ theme }) => ({ padding: theme.spacing(0, 1) }));
+const SendToWalletRequiredLabelText = styled(CardLabelTypography)(({ theme }) => ({ padding: theme.spacing(0, .5) }));
+const SendToWalletCardHeader = styled(CardHeader$1, { shouldForwardProp: (prop) => !["selected"].includes(prop) })(({ theme }) => ({
+	width: "100%",
+	[`.${cardHeaderClasses.title}`]: {
+		color: theme.vars.palette.text.secondary,
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		fontWeight: 500,
+		width: 254,
+		[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 224 }
+	},
+	[`.${cardHeaderClasses.subheader}`]: {
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		width: 254,
+		[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 224 }
+	},
+	[`.${cardHeaderClasses.action}`]: { marginRight: 0 },
+	[`.${cardHeaderClasses.action} > button`]: { fontSize: 16 },
+	variants: [{
+		props: ({ selected }) => selected,
+		style: {
+			[`.${cardHeaderClasses.title}`]: {
+				color: theme.vars.palette.text.primary,
+				fontWeight: 600,
+				width: 224,
+				[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 192 }
+			},
+			[`.${cardHeaderClasses.subheader}`]: {
+				width: 224,
+				[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 192 }
+			}
+		}
+	}]
+}));
+//#endregion
+export { SendToWalletCardHeader, SendToWalletCardTitleRow, SendToWalletRequiredLabel, SendToWalletRequiredLabelText };
+
+//# sourceMappingURL=SendToWalletButton.style.js.map

package/dist/esm/components/SendToWallet/SendToWalletButton.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToWalletButton.style.js","names":["CardHeader"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.style.tsx"],"sourcesContent":["import { Box, cardHeaderClasses, styled } from '@mui/material'\nimport type React from 'react'\nimport { CardHeader } from '../Card/CardHeader.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\n\nexport const SendToWalletCardTitleRow: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(2, 2, 0, 2),\n  height: 30,\n}))\n\nexport const SendToWalletRequiredLabel: React.FC<\n  React.ComponentProps<typeof CardLabel>\n> = styled(CardLabel)(({ theme }) => ({\n  padding: theme.spacing(0, 1),\n}))\n\nexport const SendToWalletRequiredLabelText: React.FC<\n  React.ComponentProps<typeof CardLabelTypography>\n> = styled(CardLabelTypography)(({ theme }) => ({\n  padding: theme.spacing(0, 0.5),\n}))\n\nexport const SendToWalletCardHeader: React.FC<\n  React.ComponentProps<typeof CardHeader> & { selected?: boolean }\n> = styled(CardHeader, {\n  shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n  width: '100%',\n  [`.${cardHeaderClasses.title}`]: {\n    color: theme.vars.palette.text.secondary,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    fontWeight: 500,\n    width: 254,\n    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n      width: 224,\n    },\n  },\n  [`.${cardHeaderClasses.subheader}`]: {\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 254,\n    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n      width: 224,\n    },\n  },\n  [`.${cardHeaderClasses.action}`]: {\n    marginRight: 0,\n  },\n  [`.${cardHeaderClasses.action} > button`]: {\n    fontSize: 16,\n  },\n  variants: [\n    {\n      props: ({ selected }) => selected,\n      style: {\n        [`.${cardHeaderClasses.title}`]: {\n          color: theme.vars.palette.text.primary,\n          fontWeight: 600,\n          width: 224,\n          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n            width: 192,\n          },\n        },\n        [`.${cardHeaderClasses.subheader}`]: {\n          width: 224,\n          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n            width: 192,\n          },\n        },\n      },\n    },\n  ],\n}))\n"],"mappings":";;;;AAKA,MAAa,2BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;CACjC,QAAQ;AACV,EAAE;AAEF,MAAa,4BAET,OAAO,SAAS,GAAG,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,GAAG,CAAC,EAC7B,EAAE;AAEF,MAAa,gCAET,OAAO,mBAAmB,GAAG,EAAE,aAAa,EAC9C,SAAS,MAAM,QAAQ,GAAG,EAAG,EAC/B,EAAE;AAEF,MAAa,yBAET,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,UAAU,EAAE,SAAS,IAAc,EACpE,CAAC,GAA2B,EAAE,aAAa;CACzC,OAAO;EACN,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,OAAO;GACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;CACF;EACC,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;GACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;CACF;EACC,IAAI,kBAAkB,WAAW,EAChC,aAAa,EACf;EACC,IAAI,kBAAkB,OAAO,aAAa,EACzC,UAAU,GACZ;CACA,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO;IACJ,IAAI,kBAAkB,UAAU;IAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;IAC/B,YAAY;IACZ,OAAO;KACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;GACF;IACC,IAAI,kBAAkB,cAAc;IACnC,OAAO;KACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;GACF;EACF;CACF,CACF;AACF,EAAE"}

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js

@@ -0,0 +1,49 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Wallet from "@mui/icons-material/Wallet";
+import Button from "@mui/material/Button";
+import Collapse from "@mui/material/Collapse";
+import Tooltip from "@mui/material/Tooltip";
+//#region src/components/SendToWallet/SendToWalletExpandButton.tsx
+const SendToWalletExpandButton = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig();
+	const hiddenToAddress = hiddenUI?.toAddress;
+	const disabledToAddress = disabledUI?.toAddress;
+	const { requiredToAddress } = useToAddressRequirements();
+	const [toAddressValue] = useFieldValues("toAddress");
+	const visible = !hiddenToAddress && !disabledToAddress && !toAddressValue && !requiredToAddress;
+	const handleClick = () => navigate({ to: toAddresses?.length ? navigationRoutes.configuredWallets : navigationRoutes.sendToWallet });
+	return /* @__PURE__ */ jsx(Collapse, {
+		orientation: "horizontal",
+		in: visible,
+		timeout: 225,
+		mountOnEnter: true,
+		unmountOnExit: true,
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			title: t("main.sendToWallet"),
+			placement: "bottom-end",
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: handleClick,
+				sx: {
+					ml: 1.5,
+					minWidth: 48,
+					width: 48,
+					height: 48
+				},
+				children: /* @__PURE__ */ jsx(Wallet, {})
+			})
+		})
+	});
+};
+//#endregion
+export { SendToWalletExpandButton };
+
+//# sourceMappingURL=SendToWalletExpandButton.js.map

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToWalletExpandButton.js","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport Button from '@mui/material/Button'\nimport Collapse from '@mui/material/Collapse'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const SendToWalletExpandButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()\n  const hiddenToAddress = hiddenUI?.toAddress\n  const disabledToAddress = disabledUI?.toAddress\n  const { requiredToAddress } = useToAddressRequirements()\n  const [toAddressValue] = useFieldValues('toAddress')\n\n  const visible =\n    !hiddenToAddress &&\n    !disabledToAddress &&\n    !toAddressValue &&\n    !requiredToAddress\n\n  const handleClick = () =>\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n\n  return (\n    <Collapse\n      orientation=\"horizontal\"\n      in={visible}\n      timeout={225}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Tooltip title={t('main.sendToWallet')} placement=\"bottom-end\">\n        <Button\n          variant=\"text\"\n          onClick={handleClick}\n          sx={{\n            ml: 1.5,\n            minWidth: 48,\n            width: 48,\n            height: 48,\n          }}\n        >\n          <Wallet />\n        </Button>\n      </Tooltip>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,aAAa,YAAY,aAAa,gBAAgB;CAC9D,MAAM,kBAAkB,UAAU;CAClC,MAAM,oBAAoB,YAAY;CACtC,MAAM,EAAE,sBAAsB,yBAAyB;CACvD,MAAM,CAAC,kBAAkB,eAAe,WAAW;CAEnD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,aACvB,CAAC;CAEH,OACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;YAEA,oBAAC,SAAD;GAAS,OAAO,EAAE,mBAAmB;GAAG,WAAU;aAChD,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;IACV;cAEA,oBAAC,QAAD,CAAS,CAAA;GACH,CAAA;EACD,CAAA;CACD,CAAA;AAEd"}

package/dist/esm/components/SettingsListItemButton.js

@@ -0,0 +1,8 @@
+import { ListItemButton as ListItemButton$1 } from "./ListItemButton.js";
+import { styled } from "@mui/material";
+//#region src/components/SettingsListItemButton.tsx
+const SettingsListItemButton = styled(ListItemButton$1)(({ theme }) => ({ paddingRight: theme.spacing(1) }));
+//#endregion
+export { SettingsListItemButton };
+
+//# sourceMappingURL=SettingsListItemButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsListItemButton.js","names":["ListItemButtonBase"],"sources":["../../../src/components/SettingsListItemButton.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { ListItemButton as ListItemButtonBase } from './ListItemButton.js'\n\nexport const SettingsListItemButton: React.FC<\n  React.ComponentProps<typeof ListItemButtonBase>\n> = styled(ListItemButtonBase)(({ theme }) => ({\n  paddingRight: theme.spacing(1),\n}))\n"],"mappings":";;;AAIA,MAAa,yBAET,OAAOA,gBAAkB,GAAG,EAAE,aAAa,EAC7C,cAAc,MAAM,QAAQ,CAAC,EAC/B,EAAE"}

package/dist/esm/components/Skeleton/WidgetSkeleton.d.ts

@@ -0,0 +1,10 @@
+import { WidgetConfigPartialProps } from "../../types/widget.js";
+import { JSX } from "react";
+
+//#region src/components/Skeleton/WidgetSkeleton.d.ts
+declare const WidgetSkeleton: ({
+  config
+}: WidgetConfigPartialProps) => JSX.Element;
+//#endregion
+export { WidgetSkeleton };
+//# sourceMappingURL=WidgetSkeleton.d.ts.map

package/dist/esm/components/Skeleton/WidgetSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetSkeleton.d.ts","names":[],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"mappings":";;;;cAkEa,cAAA;EACX;AAAA,GACC,wBAAA,KAA2B,GAAA,CAAI,OAAA"}

package/dist/esm/components/Skeleton/WidgetSkeleton.js

@@ -0,0 +1,124 @@
+import { AppExpandedContainer, FlexContainer, RelativeContainer } from "../AppContainer.js";
+import { createTheme as createTheme$1 } from "../../themes/createTheme.js";
+import { SkeletonAmountContainer, SkeletonCard, SkeletonCardRow, SkeletonHeaderAppBar, SkeletonHeaderContainer, SkeletonInputCard, SkeletonPoweredByContainer, SkeletonReviewButton, SkeletonReviewButtonContainer, SkeletonSendToWalletButton, SkeletonWalletMenuButtonContainer } from "./WidgetSkeleton.style.js";
+import { useMemo } from "react";
+import { Skeleton, ThemeProvider, useMediaQuery } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Skeleton/WidgetSkeleton.tsx
+const SkeletonIcon = () => /* @__PURE__ */ jsx(Skeleton, {
+	width: 24,
+	height: 24,
+	variant: "rounded"
+});
+const SkeletonWalletMenuButton = () => /* @__PURE__ */ jsxs(SkeletonWalletMenuButtonContainer, { children: [/* @__PURE__ */ jsx(Skeleton, {
+	width: 98,
+	height: 24,
+	variant: "text"
+}), /* @__PURE__ */ jsx(SkeletonIcon, {})] });
+const SkeletonSelectCard = ({ titleWidth = 36, placeholderWidth = 195 }) => /* @__PURE__ */ jsxs(SkeletonCard, {
+	elevation: 0,
+	children: [/* @__PURE__ */ jsx(Skeleton, {
+		width: titleWidth,
+		height: 22,
+		variant: "text"
+	}), /* @__PURE__ */ jsxs(SkeletonCardRow, { children: [/* @__PURE__ */ jsx(Skeleton, {
+		width: 40,
+		height: 40,
+		variant: "circular"
+	}), /* @__PURE__ */ jsx(Skeleton, {
+		width: placeholderWidth,
+		height: 27,
+		variant: "text"
+	})] })]
+});
+const SkeletonYouPayCard = () => /* @__PURE__ */ jsxs(SkeletonInputCard, {
+	elevation: 0,
+	children: [/* @__PURE__ */ jsx(Skeleton, {
+		width: 55,
+		height: 22,
+		variant: "text"
+	}), /* @__PURE__ */ jsxs(SkeletonCardRow, { children: [/* @__PURE__ */ jsx(Skeleton, {
+		width: 40,
+		height: 40,
+		variant: "circular"
+	}), /* @__PURE__ */ jsxs(SkeletonAmountContainer, { children: [/* @__PURE__ */ jsx(Skeleton, {
+		width: 48,
+		height: 37,
+		variant: "text",
+		sx: { marginTop: -.75 }
+	}), /* @__PURE__ */ jsx(Skeleton, {
+		width: 48,
+		height: 12,
+		variant: "text"
+	})] })] })]
+});
+const WidgetSkeleton = ({ config }) => {
+	const appearance = config?.appearance;
+	const hiddenUI = config?.hiddenUI;
+	const requiredUI = config?.requiredUI;
+	const configTheme = config?.theme;
+	const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+	const appearanceMode = !appearance || appearance === "system" ? prefersDarkMode ? "dark" : "light" : appearance;
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		theme: useMemo(() => createTheme$1(configTheme), [configTheme]),
+		defaultMode: appearanceMode,
+		modeStorageKey: "li.fi-widget-mode",
+		colorSchemeStorageKey: "li.fi-widget-color-scheme",
+		disableTransitionOnChange: true,
+		children: /* @__PURE__ */ jsx(AppExpandedContainer, {
+			"data-testid": "widget-skeleton-container",
+			children: /* @__PURE__ */ jsxs(RelativeContainer, {
+				sx: {
+					display: "flex",
+					flexDirection: "column"
+				},
+				children: [
+					/* @__PURE__ */ jsxs(SkeletonHeaderContainer, { children: [!hiddenUI?.walletMenu ? /* @__PURE__ */ jsx(SkeletonHeaderAppBar, { children: /* @__PURE__ */ jsx(SkeletonWalletMenuButton, {}) }) : null, /* @__PURE__ */ jsxs(SkeletonHeaderAppBar, {
+						sx: {
+							justifyContent: "space-between",
+							height: 52
+						},
+						children: [/* @__PURE__ */ jsx(Skeleton, {
+							width: 124,
+							height: 36,
+							variant: "text"
+						}), /* @__PURE__ */ jsx(SkeletonIcon, {})]
+					})] }),
+					/* @__PURE__ */ jsxs(FlexContainer, {
+						sx: {
+							gap: 2,
+							paddingBottom: hiddenUI?.poweredBy ? 3 : 2
+						},
+						children: [
+							/* @__PURE__ */ jsx(SkeletonSelectCard, {}),
+							/* @__PURE__ */ jsx(SkeletonSelectCard, {}),
+							/* @__PURE__ */ jsx(SkeletonYouPayCard, {}),
+							requiredUI?.toAddress ? /* @__PURE__ */ jsx(SkeletonSelectCard, {
+								titleWidth: 104,
+								placeholderWidth: 175
+							}) : null,
+							/* @__PURE__ */ jsxs(SkeletonReviewButtonContainer, { children: [/* @__PURE__ */ jsx(SkeletonReviewButton, {
+								variant: "contained",
+								fullWidth: true,
+								children: "\xA0"
+							}), !requiredUI?.toAddress ? /* @__PURE__ */ jsx(SkeletonSendToWalletButton, {
+								variant: "text",
+								fullWidth: true,
+								children: "\xA0"
+							}) : null] })
+						]
+					}),
+					!hiddenUI?.poweredBy ? /* @__PURE__ */ jsx(SkeletonPoweredByContainer, { children: /* @__PURE__ */ jsx(Skeleton, {
+						width: 96,
+						height: 18,
+						variant: "text"
+					}) }) : null
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { WidgetSkeleton };
+
+//# sourceMappingURL=WidgetSkeleton.js.map

package/dist/esm/components/Skeleton/WidgetSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n  AppExpandedContainer,\n  FlexContainer,\n  RelativeContainer,\n} from '../AppContainer.js'\nimport {\n  SkeletonAmountContainer,\n  SkeletonCard,\n  SkeletonCardRow,\n  SkeletonHeaderAppBar,\n  SkeletonHeaderContainer,\n  SkeletonInputCard,\n  SkeletonPoweredByContainer,\n  SkeletonReviewButton,\n  SkeletonReviewButtonContainer,\n  SkeletonSendToWalletButton,\n  SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n  <SkeletonWalletMenuButtonContainer>\n    <Skeleton width={98} height={24} variant=\"text\" />\n    <SkeletonIcon />\n  </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n  titleWidth?: number\n  placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n  titleWidth = 36,\n  placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n  <SkeletonCard elevation={0}>\n    <Skeleton width={titleWidth} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n    </SkeletonCardRow>\n  </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n  <SkeletonInputCard elevation={0}>\n    <Skeleton width={55} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <SkeletonAmountContainer>\n        <Skeleton\n          width={48}\n          height={37}\n          variant=\"text\"\n          sx={{ marginTop: -0.75 }}\n        />\n        <Skeleton width={48} height={12} variant=\"text\" />\n      </SkeletonAmountContainer>\n    </SkeletonCardRow>\n  </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n  config,\n}: WidgetConfigPartialProps): JSX.Element => {\n  const appearance = config?.appearance\n  const hiddenUI = config?.hiddenUI\n  const requiredUI = config?.requiredUI\n  const configTheme = config?.theme\n  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n  const appearanceMode =\n    !appearance || appearance === 'system'\n      ? prefersDarkMode\n        ? 'dark'\n        : 'light'\n      : appearance\n\n  const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n  return (\n    <ThemeProvider\n      theme={theme}\n      defaultMode={appearanceMode}\n      modeStorageKey=\"li.fi-widget-mode\"\n      colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n      disableTransitionOnChange\n    >\n      <AppExpandedContainer data-testid=\"widget-skeleton-container\">\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI?.walletMenu ? (\n              <SkeletonHeaderAppBar>\n                <SkeletonWalletMenuButton />\n              </SkeletonHeaderAppBar>\n            ) : null}\n            <SkeletonHeaderAppBar\n              sx={{ justifyContent: 'space-between', height: 52 }}\n            >\n              <Skeleton width={124} height={36} variant=\"text\" />\n              <SkeletonIcon />\n            </SkeletonHeaderAppBar>\n          </SkeletonHeaderContainer>\n\n          <FlexContainer\n            sx={{\n              gap: 2,\n              paddingBottom: hiddenUI?.poweredBy ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI?.toAddress ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI?.toAddress ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI?.poweredBy ? (\n            <SkeletonPoweredByContainer>\n              <Skeleton width={96} height={18} variant=\"text\" />\n            </SkeletonPoweredByContainer>\n          ) : null}\n        </RelativeContainer>\n      </AppExpandedContainer>\n    </ThemeProvider>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Skeleton/WidgetSkeleton.style.js

@@ -0,0 +1,73 @@
+import { InputCard } from "../Card/InputCard.js";
+import { Box, Button, Card, styled } from "@mui/material";
+//#region src/components/Skeleton/WidgetSkeleton.style.tsx
+const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "row",
+	justifyContent: "flex-end",
+	alignItems: "center",
+	color: theme.vars?.palette?.text.primary,
+	paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1)
+}));
+const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	padding: theme.spacing(1, 0, 1, 1.5),
+	gap: theme.spacing(1)
+}));
+const SkeletonCardRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	gap: theme.spacing(2),
+	alignItems: "center",
+	marginTop: theme.spacing(1.5)
+}));
+const SkeletonAmountContainer = styled(Box)({
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center",
+	height: 40,
+	overflowY: "hidden"
+});
+const SkeletonCard = styled(Card)(({ theme }) => ({ padding: theme.spacing(1.5, 2, 2) }));
+const SkeletonInputCard = styled(InputCard)(({ theme }) => ({ padding: theme.spacing(1.5, 2, 2) }));
+const SkeletonReviewButtonContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	gap: theme.spacing(1.5),
+	alignItems: "center"
+}));
+const SkeletonReviewButton = styled(Button)({
+	height: 48,
+	pointerEvents: "none"
+});
+const SkeletonSendToWalletButton = styled(Button)({
+	height: 48,
+	minWidth: 48,
+	width: 48,
+	pointerEvents: "none"
+});
+const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexGrow: 1,
+	justifyContent: "flex-end",
+	alignItems: "flex-end",
+	paddingBottom: theme.spacing(2),
+	paddingLeft: theme.spacing(3),
+	paddingRight: theme.spacing(3)
+}));
+const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
+	return {
+		display: "flex",
+		flexDirection: "column",
+		backgroundColor: theme.vars.palette.background.default,
+		position: "relative",
+		top: 0,
+		zIndex: 1200,
+		gap: theme.spacing(.5),
+		padding: theme.spacing(1.5, 3, 1.5, 3),
+		overflow: "auto"
+	};
+});
+//#endregion
+export { SkeletonAmountContainer, SkeletonCard, SkeletonCardRow, SkeletonHeaderAppBar, SkeletonHeaderContainer, SkeletonInputCard, SkeletonPoweredByContainer, SkeletonReviewButton, SkeletonReviewButtonContainer, SkeletonSendToWalletButton, SkeletonWalletMenuButtonContainer };
+
+//# sourceMappingURL=WidgetSkeleton.style.js.map

package/dist/esm/components/Skeleton/WidgetSkeleton.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetSkeleton.style.js","names":["MuiCard"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.style.tsx"],"sourcesContent":["import { Box, Button, Card as MuiCard, styled } from '@mui/material'\nimport type React from 'react'\nimport { InputCard } from '../../components/Card/InputCard.js'\n\nexport const SkeletonHeaderAppBar: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n    color: theme.vars?.palette?.text.primary,\n    paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),\n  }))\n\nexport const SkeletonWalletMenuButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(1, 0, 1, 1.5),\n  gap: theme.spacing(1),\n}))\n\nexport const SkeletonCardRow: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    gap: theme.spacing(2),\n    alignItems: 'center',\n    marginTop: theme.spacing(1.5),\n  }))\n\nexport const SkeletonAmountContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  height: 40,\n  overflowY: 'hidden',\n})\n\nexport const SkeletonCard: React.FC<React.ComponentProps<typeof MuiCard>> =\n  styled(MuiCard)(({ theme }) => ({\n    padding: theme.spacing(1.5, 2, 2),\n  }))\n\nexport const SkeletonInputCard: React.FC<\n  React.ComponentProps<typeof InputCard>\n> = styled(InputCard)(({ theme }) => ({\n  padding: theme.spacing(1.5, 2, 2),\n}))\n\nexport const SkeletonReviewButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1.5),\n  alignItems: 'center',\n}))\n\nexport const SkeletonReviewButton: React.FC<\n  React.ComponentProps<typeof Button>\n> = styled(Button)({\n  height: 48,\n  pointerEvents: 'none',\n})\nexport const SkeletonSendToWalletButton: React.FC<\n  React.ComponentProps<typeof Button>\n> = styled(Button)({\n  height: 48,\n  minWidth: 48,\n  width: 48,\n  pointerEvents: 'none',\n})\n\nexport const SkeletonPoweredByContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n  alignItems: 'flex-end',\n  paddingBottom: theme.spacing(2),\n  paddingLeft: theme.spacing(3),\n  paddingRight: theme.spacing(3),\n}))\n\nexport const SkeletonHeaderContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => {\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    backgroundColor: theme.vars.palette.background.default,\n    position: 'relative',\n    top: 0,\n    zIndex: 1200,\n    gap: theme.spacing(0.5),\n    padding: theme.spacing(1.5, 3, 1.5, 3),\n    overflow: 'auto',\n  }\n})\n"],"mappings":";;;AAIA,MAAa,uBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,YAAY;CACZ,OAAO,MAAM,MAAM,SAAS,KAAK;CACjC,cAAc,MAAM,YAAY,OAAO,IAAI,MAAM,UAAU,CAAC;AAC9D,EAAE;AAEJ,MAAa,oCAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG;CACnC,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,kBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,KAAK,MAAM,QAAQ,CAAC;CACpB,YAAY;CACZ,WAAW,MAAM,QAAQ,GAAG;AAC9B,EAAE;AAEJ,MAAa,0BAET,OAAO,GAAG,EAAE;CACd,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,QAAQ;CACR,WAAW;AACb,CAAC;AAED,MAAa,eACX,OAAOA,IAAO,GAAG,EAAE,aAAa,EAC9B,SAAS,MAAM,QAAQ,KAAK,GAAG,CAAC,EAClC,EAAE;AAEJ,MAAa,oBAET,OAAO,SAAS,GAAG,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,KAAK,GAAG,CAAC,EAClC,EAAE;AAEF,MAAa,gCAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,GAAG;CACtB,YAAY;AACd,EAAE;AAEF,MAAa,uBAET,OAAO,MAAM,EAAE;CACjB,QAAQ;CACR,eAAe;AACjB,CAAC;AACD,MAAa,6BAET,OAAO,MAAM,EAAE;CACjB,QAAQ;CACR,UAAU;CACV,OAAO;CACP,eAAe;AACjB,CAAC;AAED,MAAa,6BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,eAAe,MAAM,QAAQ,CAAC;CAC9B,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;AAC/B,EAAE;AAEF,MAAa,0BAET,OAAO,GAAG,GAAG,EAAE,YAAY;CAC7B,OAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU;EACV,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,EAAG;EACtB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,CAAC;EACrC,UAAU;CACZ;AACF,CAAC"}