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

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

@@ -1,41 +1,50 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Wallet from '@mui/icons-material/Wallet';
-import { Button, Tooltip } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { sendToWalletStore, useSendToWalletStore, } from '../../stores/settings/useSendToWalletStore.js';
-import { WidgetEvent } from '../../types/events.js';
-import { DisabledUI, HiddenUI } from '../../types/widget.js';
-export const SendToWalletExpandButton = () => {
-    const { t } = useTranslation();
-    const { disabledUI, hiddenUI } = useWidgetConfig();
-    const { setFieldValue } = useFieldActions();
-    const { setSelectedBookmark } = useBookmarkActions();
-    const emitter = useWidgetEvents();
-    const { showSendToWallet, setSendToWallet } = useSendToWalletStore((state) => state);
-    const [toAddressFieldValue] = useFieldValues('toAddress');
-    const { requiredToAddress } = useToAddressRequirements();
-    if (requiredToAddress || hiddenUI?.includes(HiddenUI.ToAddress)) {
-        return null;
-    }
-    const handleClick = () => {
-        if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
-            setFieldValue('toAddress', '', { isTouched: true });
-            setSelectedBookmark();
-        }
-        setSendToWallet(!showSendToWallet);
-        emitter.emit(WidgetEvent.SendToWalletToggled, sendToWalletStore.getState().showSendToWallet);
-    };
-    const buttonVariant = showSendToWallet || Boolean(toAddressFieldValue) ? 'contained' : 'text';
-    return (_jsx(Tooltip, { title: t('main.sendToWallet'), placement: "bottom-end", children: _jsx(Button, { variant: buttonVariant, onClick: handleClick, sx: {
-                minWidth: 48,
-                width: 48,
-                height: 48,
-            }, children: _jsx(Wallet, {}) }) }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { DisabledUI, HiddenUI } from "../../types/widget.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?.includes(HiddenUI.ToAddress);
+	const disabledToAddress = disabledUI?.includes(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

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletExpandButton.js","sourceRoot":"","sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAA;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAA;AACjF,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EACL,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,+CAA+C,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE5D,MAAM,CAAC,MAAM,wBAAwB,GAAa,GAAG,EAAE;IACrD,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAA;IAClD,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,EAAE,CAAA;IAC3C,MAAM,EAAE,mBAAmB,EAAE,GAAG,kBAAkB,EAAE,CAAA;IACpD,MAAM,OAAO,GAAG,eAAe,EAAE,CAAA;IACjC,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,oBAAoB,CAChE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CACjB,CAAA;IACD,MAAM,CAAC,mBAAmB,CAAC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IACzD,MAAM,EAAE,iBAAiB,EAAE,GAAG,wBAAwB,EAAE,CAAA;IAExD,IAAI,iBAAiB,IAAI,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QAChE,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,gBAAgB,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;YACpE,aAAa,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;YACnD,mBAAmB,EAAE,CAAA;QACvB,CAAC;QACD,eAAe,CAAC,CAAC,gBAAgB,CAAC,CAAA;QAClC,OAAO,CAAC,IAAI,CACV,WAAW,CAAC,mBAAmB,EAC/B,iBAAiB,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAC9C,CAAA;IACH,CAAC,CAAA;IAED,MAAM,aAAa,GACjB,gBAAgB,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAA;IAEzE,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAAE,SAAS,EAAC,YAAY,YAC5D,KAAC,MAAM,IACL,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,WAAW,EACpB,EAAE,EAAE;gBACF,QAAQ,EAAE,EAAE;gBACZ,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,EAAE;aACX,YAED,KAAC,MAAM,KAAG,GACH,GACD,CACX,CAAA;AACH,CAAC,CAAA"}
+{"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 { DisabledUI, HiddenUI } from '../../types/widget.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?.includes(HiddenUI.ToAddress)\n  const disabledToAddress = disabledUI?.includes(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":";;;;;;;;;;;;;AAaA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,aAAa,YAAY,aAAa,iBAAiB;CAC/D,MAAM,kBAAkB,UAAU,SAAS,SAAS,UAAU;CAC9D,MAAM,oBAAoB,YAAY,SAAS,WAAW,UAAU;CACpE,MAAM,EAAE,sBAAsB,0BAA0B;CACxD,MAAM,CAAC,kBAAkB,eAAe,YAAY;CAEpD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,cACtB,CAAC;AAEJ,QACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;YAEA,oBAAC,SAAD;GAAS,OAAO,EAAE,oBAAoB;GAAE,WAAU;aAChD,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;KACT;cAED,oBAAC,QAAD,EAAU,CAAA;IACH,CAAA;GACD,CAAA;EACD,CAAA"}

package/dist/esm/components/SettingsListItemButton.js

@@ -1,6 +1,8 @@
-import { styled } from '@mui/material';
-import { ListItemButton as ListItemButtonBase } from './ListItemButton.js';
-export const SettingsListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
-    paddingRight: theme.spacing(1),
-}));
+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

@@ -1 +1 @@
-{"version":3,"file":"SettingsListItemButton.js","sourceRoot":"","sources":["../../../src/components/SettingsListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAE1E,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAC9D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACd,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAC/B,CAAC,CACH,CAAA"}
+{"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,iBAAmB,EAAE,EAAE,aAAa,EAC7C,cAAc,MAAM,QAAQ,EAAE,EAC/B,EAAE"}

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

@@ -1,2 +1,10 @@
-import type { WidgetConfigPartialProps } from '../../types/widget.js';
-export declare const WidgetSkeleton: ({ config }: WidgetConfigPartialProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,28 +1,121 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material';
-import { useMemo } from 'react';
-import { createTheme } from '../../themes/createTheme.js';
-import { AppExpandedContainer, FlexContainer, RelativeContainer, } from '../AppContainer.js';
-import { SkeletonAmountContainer, SkeletonCard, SkeletonCardRow, SkeletonHeaderAppBar, SkeletonHeaderContainer, SkeletonInputCard, SkeletonPoweredByContainer, SkeletonReviewButton, SkeletonReviewButtonContainer, SkeletonSendToWalletButton, SkeletonWalletMenuButtonContainer, } from './WidgetSkeleton.style.js';
-const SkeletonIcon = () => _jsx(Skeleton, { width: 24, height: 24, variant: "rounded" });
-const SkeletonWalletMenuButton = () => (_jsxs(SkeletonWalletMenuButtonContainer, { children: [_jsx(Skeleton, { width: 98, height: 24, variant: "text" }), _jsx(SkeletonIcon, {})] }));
-const SkeletonSelectCard = ({ titleWidth = 36, placeholderWidth = 195, }) => (_jsxs(SkeletonCard, { elevation: 0, children: [_jsx(Skeleton, { width: titleWidth, height: 22, variant: "text" }), _jsxs(SkeletonCardRow, { children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: placeholderWidth, height: 27, variant: "text" })] })] }));
-const SkeletonYouPayCard = () => (_jsxs(SkeletonInputCard, { elevation: 0, children: [_jsx(Skeleton, { width: 55, height: 22, variant: "text" }), _jsxs(SkeletonCardRow, { children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsxs(SkeletonAmountContainer, { children: [_jsx(Skeleton, { width: 48, height: 37, variant: "text", sx: { marginTop: -0.75 } }), _jsx(Skeleton, { width: 48, height: 12, variant: "text" })] })] })] }));
-export 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;
-    const theme = useMemo(() => createTheme(configTheme), [configTheme]);
-    return (_jsx(ThemeProvider, { theme: theme, defaultMode: appearanceMode, modeStorageKey: "li.fi-widget-mode", colorSchemeStorageKey: "li.fi-widget-color-scheme", disableTransitionOnChange: true, children: _jsx(AppExpandedContainer, { children: _jsxs(RelativeContainer, { sx: { display: 'flex', flexDirection: 'column' }, children: [_jsxs(SkeletonHeaderContainer, { children: [!hiddenUI.includes('walletMenu') ? (_jsx(SkeletonHeaderAppBar, { children: _jsx(SkeletonWalletMenuButton, {}) })) : null, _jsxs(SkeletonHeaderAppBar, { sx: { justifyContent: 'space-between', height: 52 }, children: [_jsx(Skeleton, { width: 124, height: 36, variant: "text" }), _jsx(SkeletonIcon, {})] })] }), _jsxs(FlexContainer, { sx: {
-                            gap: 2,
-                            paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,
-                        }, children: [_jsx(SkeletonSelectCard, {}), _jsx(SkeletonSelectCard, {}), _jsx(SkeletonYouPayCard, {}), requiredUI.includes('toAddress') ? (_jsx(SkeletonSelectCard, { titleWidth: 104, placeholderWidth: 175 })) : null, _jsxs(SkeletonReviewButtonContainer, { children: [_jsx(SkeletonReviewButton, { variant: "contained", fullWidth: true, children: "\u00A0" }), !requiredUI.includes('toAddress') ? (_jsx(SkeletonSendToWalletButton, { variant: "text", fullWidth: true, children: "\u00A0" })) : null] })] }), !hiddenUI.includes('poweredBy') ? (_jsx(SkeletonPoweredByContainer, { children: _jsx(Skeleton, { width: 96, height: 18, variant: "text" }) })) : null] }) }) }));
+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, { children: /* @__PURE__ */ jsxs(RelativeContainer, {
+			sx: {
+				display: "flex",
+				flexDirection: "column"
+			},
+			children: [
+				/* @__PURE__ */ jsxs(SkeletonHeaderContainer, { children: [!hiddenUI.includes("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.includes("poweredBy") ? 3 : 2
+					},
+					children: [
+						/* @__PURE__ */ jsx(SkeletonSelectCard, {}),
+						/* @__PURE__ */ jsx(SkeletonSelectCard, {}),
+						/* @__PURE__ */ jsx(SkeletonYouPayCard, {}),
+						requiredUI.includes("toAddress") ? /* @__PURE__ */ jsx(SkeletonSelectCard, {
+							titleWidth: 104,
+							placeholderWidth: 175
+						}) : null,
+						/* @__PURE__ */ jsxs(SkeletonReviewButtonContainer, { children: [/* @__PURE__ */ jsx(SkeletonReviewButton, {
+							variant: "contained",
+							fullWidth: true,
+							children: "\xA0"
+						}), !requiredUI.includes("toAddress") ? /* @__PURE__ */ jsx(SkeletonSendToWalletButton, {
+							variant: "text",
+							fullWidth: true,
+							children: "\xA0"
+						}) : null] })
+					]
+				}),
+				!hiddenUI.includes("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

@@ -1 +1 @@
-{"version":3,"file":"WidgetSkeleton.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"names":[],"mappings":"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"}
+{"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>\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI.includes('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.includes('poweredBy') ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI.includes('toAddress') ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI.includes('toAddress') ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI.includes('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

@@ -1,73 +1,73 @@
-import { Box, Button, Card as MuiCard, styled } from '@mui/material';
-import { InputCard } from '../../components/Card/InputCard.js';
-export 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),
+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)
 }));
-export const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(1, 0, 1, 1.5),
-    gap: theme.spacing(1),
+const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	padding: theme.spacing(1, 0, 1, 1.5),
+	gap: theme.spacing(1)
 }));
-export const SkeletonCardRow = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    gap: theme.spacing(2),
-    alignItems: 'center',
-    marginTop: theme.spacing(1.5),
+const SkeletonCardRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	gap: theme.spacing(2),
+	alignItems: "center",
+	marginTop: theme.spacing(1.5)
 }));
-export const SkeletonAmountContainer = styled(Box)({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    height: 40,
-    overflowY: 'hidden',
+const SkeletonAmountContainer = styled(Box)({
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center",
+	height: 40,
+	overflowY: "hidden"
 });
-export const SkeletonCard = styled(MuiCard)(({ theme }) => ({
-    padding: theme.spacing(1.5, 2, 2),
+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"
 }));
-export const SkeletonInputCard = styled(InputCard)(({ theme }) => ({
-    padding: theme.spacing(1.5, 2, 2),
-}));
-export const SkeletonReviewButtonContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    gap: theme.spacing(1.5),
-    alignItems: 'center',
-}));
-export const SkeletonReviewButton = styled(Button)({
-    height: 48,
-    pointerEvents: 'none',
+const SkeletonReviewButton = styled(Button)({
+	height: 48,
+	pointerEvents: "none"
 });
-export const SkeletonSendToWalletButton = styled(Button)({
-    height: 48,
-    minWidth: 48,
-    width: 48,
-    pointerEvents: 'none',
+const SkeletonSendToWalletButton = styled(Button)({
+	height: 48,
+	minWidth: 48,
+	width: 48,
+	pointerEvents: "none"
 });
-export 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 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)
 }));
-export 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(0.5),
-        padding: theme.spacing(1.5, 3, 1.5, 3),
-        overflow: 'auto',
-    };
+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

@@ -1 +1 @@
-{"version":3,"file":"WidgetSkeleton.style.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/WidgetSkeleton.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAA;AAE9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9D,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,UAAU;IAC1B,UAAU,EAAE,QAAQ;IACpB,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;IACxC,YAAY,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;CAC9D,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3E,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;IACpC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CACtB,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,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACrB,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;CAC9B,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACjD,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,cAAc,EAAE,QAAQ;IACxB,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1D,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;CAClC,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACjE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;CAClC,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACvE,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IACvB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,EAAE,EAAE;IACV,aAAa,EAAE,MAAM;CACtB,CAAC,CAAA;AACF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACvD,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,EAAE;IACT,aAAa,EAAE,MAAM;CACtB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpE,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,CAAC;IACX,cAAc,EAAE,UAAU;IAC1B,UAAU,EAAE,UAAU;IACtB,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAC/B,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,OAAO;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,eAAe,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QACtD,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,IAAI;QACZ,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACvB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;QACtC,QAAQ,EAAE,MAAM;KACjB,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"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,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,YAAY;CACZ,OAAO,MAAM,MAAM,SAAS,KAAK;CACjC,cAAc,MAAM,YAAY,OAAO,IAAI,MAAM,UAAU,EAAE;CAC9D,EAAE;AAEL,MAAa,oCAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,IAAI;CACpC,KAAK,MAAM,QAAQ,EAAE;CACtB,EAAE;AAEH,MAAa,kBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,KAAK,MAAM,QAAQ,EAAE;CACrB,YAAY;CACZ,WAAW,MAAM,QAAQ,IAAI;CAC9B,EAAE;AAEL,MAAa,0BAET,OAAO,IAAI,CAAC;CACd,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,QAAQ;CACR,WAAW;CACZ,CAAC;AAEF,MAAa,eACX,OAAOA,KAAQ,EAAE,EAAE,aAAa,EAC9B,SAAS,MAAM,QAAQ,KAAK,GAAG,EAAE,EAClC,EAAE;AAEL,MAAa,oBAET,OAAO,UAAU,EAAE,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,KAAK,GAAG,EAAE,EAClC,EAAE;AAEH,MAAa,gCAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,IAAI;CACvB,YAAY;CACb,EAAE;AAEH,MAAa,uBAET,OAAO,OAAO,CAAC;CACjB,QAAQ;CACR,eAAe;CAChB,CAAC;AACF,MAAa,6BAET,OAAO,OAAO,CAAC;CACjB,QAAQ;CACR,UAAU;CACV,OAAO;CACP,eAAe;CAChB,CAAC;AAEF,MAAa,6BAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,eAAe,MAAM,QAAQ,EAAE;CAC/B,aAAa,MAAM,QAAQ,EAAE;CAC7B,cAAc,MAAM,QAAQ,EAAE;CAC/B,EAAE;AAEH,MAAa,0BAET,OAAO,IAAI,EAAE,EAAE,YAAY;AAC7B,QAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU;EACV,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,GAAI;EACvB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,EAAE;EACtC,UAAU;EACX;EACD"}

package/dist/esm/components/Step/CircularProgress.js

@@ -1,26 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Done from '@mui/icons-material/Done';
-import ErrorRounded from '@mui/icons-material/ErrorRounded';
-import InfoRounded from '@mui/icons-material/InfoRounded';
-import WarningRounded from '@mui/icons-material/WarningRounded';
-import { CircularIcon, CircularProgressPending, } from './CircularProgress.style.js';
-export function CircularProgress({ action }) {
-    return (_jsxs(CircularIcon, { status: action.status, substatus: action.substatus, children: [action.status === 'STARTED' || action.status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 40 })) : null, action.status === 'ACTION_REQUIRED' ||
-                action.status === 'MESSAGE_REQUIRED' ||
-                action.status === 'RESET_REQUIRED' ? (_jsx(InfoRounded, { color: "info", sx: {
-                    position: 'absolute',
-                    fontSize: '1.5rem',
-                } })) : null, action.status === 'DONE' &&
-                (action.substatus === 'PARTIAL' || action.substatus === 'REFUNDED') ? (_jsx(WarningRounded, { sx: (theme) => ({
-                    position: 'absolute',
-                    fontSize: '1.5rem',
-                    color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 68%, black)`,
-                }) })) : action.status === 'DONE' ? (_jsx(Done, { color: "success", sx: {
-                    position: 'absolute',
-                    fontSize: '1.5rem',
-                } })) : null, action.status === 'FAILED' ? (_jsx(ErrorRounded, { color: "error", sx: {
-                    position: 'absolute',
-                    fontSize: '1.5rem',
-                } })) : null] }));
+import { CircularIcon, CircularProgressPending } from "./CircularProgress.style.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ErrorRounded from "@mui/icons-material/ErrorRounded";
+import Done from "@mui/icons-material/Done";
+import InfoRounded from "@mui/icons-material/InfoRounded";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/components/Step/CircularProgress.tsx
+function CircularProgress({ action }) {
+	return /* @__PURE__ */ jsxs(CircularIcon, {
+		status: action.status,
+		substatus: action.substatus,
+		children: [
+			action.status === "STARTED" || action.status === "PENDING" ? /* @__PURE__ */ jsx(CircularProgressPending, { size: 40 }) : null,
+			action.status === "ACTION_REQUIRED" || action.status === "MESSAGE_REQUIRED" || action.status === "RESET_REQUIRED" ? /* @__PURE__ */ jsx(InfoRounded, {
+				color: "info",
+				sx: {
+					position: "absolute",
+					fontSize: "1.5rem"
+				}
+			}) : null,
+			action.status === "DONE" && (action.substatus === "PARTIAL" || action.substatus === "REFUNDED") ? /* @__PURE__ */ jsx(WarningRounded, { sx: (theme) => ({
+				position: "absolute",
+				fontSize: "1.5rem",
+				color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 68%, black)`
+			}) }) : action.status === "DONE" ? /* @__PURE__ */ jsx(Done, {
+				color: "success",
+				sx: {
+					position: "absolute",
+					fontSize: "1.5rem"
+				}
+			}) : null,
+			action.status === "FAILED" ? /* @__PURE__ */ jsx(ErrorRounded, {
+				color: "error",
+				sx: {
+					position: "absolute",
+					fontSize: "1.5rem"
+				}
+			}) : null
+		]
+	});
 }
+//#endregion
+export { CircularProgress };
+
 //# sourceMappingURL=CircularProgress.js.map

package/dist/esm/components/Step/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","sourceRoot":"","sources":["../../../../src/components/Step/CircularProgress.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,0BAA0B,CAAA;AAC3C,OAAO,YAAY,MAAM,kCAAkC,CAAA;AAC3D,OAAO,WAAW,MAAM,iCAAiC,CAAA;AACzD,OAAO,cAAc,MAAM,oCAAoC,CAAA;AAC/D,OAAO,EACL,YAAY,EACZ,uBAAuB,GACxB,MAAM,6BAA6B,CAAA;AAEpC,MAAM,UAAU,gBAAgB,CAAC,EAAE,MAAM,EAA+B;IACtE,OAAO,CACL,MAAC,YAAY,IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,aAC7D,MAAM,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAC5D,KAAC,uBAAuB,IAAC,IAAI,EAAE,EAAE,GAAI,CACtC,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,CAAC,MAAM,KAAK,iBAAiB;gBACpC,MAAM,CAAC,MAAM,KAAK,kBAAkB;gBACpC,MAAM,CAAC,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CACnC,KAAC,WAAW,IACV,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE;oBACF,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,QAAQ;iBACnB,GACD,CACH,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,CAAC,MAAM,KAAK,MAAM;gBACzB,CAAC,MAAM,CAAC,SAAS,KAAK,SAAS,IAAI,MAAM,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CACpE,KAAC,cAAc,IACb,EAAE,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;oBACd,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,QAAQ;oBAClB,KAAK,EAAE,sBAAsB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,cAAc;iBAC3E,CAAC,GACF,CACH,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAC7B,KAAC,IAAI,IACH,KAAK,EAAC,SAAS,EACf,EAAE,EAAE;oBACF,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,QAAQ;iBACnB,GACD,CACH,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC5B,KAAC,YAAY,IACX,KAAK,EAAC,OAAO,EACb,EAAE,EAAE;oBACF,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,QAAQ;iBACnB,GACD,CACH,CAAC,CAAC,CAAC,IAAI,IACK,CAChB,CAAA;AACH,CAAC"}
+{"version":3,"file":"CircularProgress.js","names":[],"sources":["../../../../src/components/Step/CircularProgress.tsx"],"sourcesContent":["import type { ExecutionAction } from '@lifi/sdk'\nimport Done from '@mui/icons-material/Done'\nimport ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport InfoRounded from '@mui/icons-material/InfoRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport {\n  CircularIcon,\n  CircularProgressPending,\n} from './CircularProgress.style.js'\n\nexport function CircularProgress({ action }: { action: ExecutionAction }): any {\n  return (\n    <CircularIcon status={action.status} substatus={action.substatus}>\n      {action.status === 'STARTED' || action.status === 'PENDING' ? (\n        <CircularProgressPending size={40} />\n      ) : null}\n      {action.status === 'ACTION_REQUIRED' ||\n      action.status === 'MESSAGE_REQUIRED' ||\n      action.status === 'RESET_REQUIRED' ? (\n        <InfoRounded\n          color=\"info\"\n          sx={{\n            position: 'absolute',\n            fontSize: '1.5rem',\n          }}\n        />\n      ) : null}\n      {action.status === 'DONE' &&\n      (action.substatus === 'PARTIAL' || action.substatus === 'REFUNDED') ? (\n        <WarningRounded\n          sx={(theme) => ({\n            position: 'absolute',\n            fontSize: '1.5rem',\n            color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 68%, black)`,\n          })}\n        />\n      ) : action.status === 'DONE' ? (\n        <Done\n          color=\"success\"\n          sx={{\n            position: 'absolute',\n            fontSize: '1.5rem',\n          }}\n        />\n      ) : null}\n      {action.status === 'FAILED' ? (\n        <ErrorRounded\n          color=\"error\"\n          sx={{\n            position: 'absolute',\n            fontSize: '1.5rem',\n          }}\n        />\n      ) : null}\n    </CircularIcon>\n  )\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,iBAAiB,EAAE,UAA4C;AAC7E,QACE,qBAAC,cAAD;EAAc,QAAQ,OAAO;EAAQ,WAAW,OAAO;YAAvD;GACG,OAAO,WAAW,aAAa,OAAO,WAAW,YAChD,oBAAC,yBAAD,EAAyB,MAAM,IAAM,CAAA,GACnC;GACH,OAAO,WAAW,qBACnB,OAAO,WAAW,sBAClB,OAAO,WAAW,mBAChB,oBAAC,aAAD;IACE,OAAM;IACN,IAAI;KACF,UAAU;KACV,UAAU;KACX;IACD,CAAA,GACA;GACH,OAAO,WAAW,WAClB,OAAO,cAAc,aAAa,OAAO,cAAc,cACtD,oBAAC,gBAAD,EACE,KAAK,WAAW;IACd,UAAU;IACV,UAAU;IACV,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IAC9D,GACD,CAAA,GACA,OAAO,WAAW,SACpB,oBAAC,MAAD;IACE,OAAM;IACN,IAAI;KACF,UAAU;KACV,UAAU;KACX;IACD,CAAA,GACA;GACH,OAAO,WAAW,WACjB,oBAAC,cAAD;IACE,OAAM;IACN,IAAI;KACF,UAAU;KACV,UAAU;KACX;IACD,CAAA,GACA;GACS"}