@lifi/widget 4.0.0-beta.9 → 4.1.0

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

@@ -1,22 +1,65 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge } from '@mui/material';
-import { useChain } from '../../hooks/useChain.js';
-import { useToken } from '../../hooks/useToken.js';
-import { AvatarBadgedSkeleton } from './Avatar.js';
-import { AvatarMasked } from './Avatar.style.js';
-import { ChainBadgeContent } from './ChainBadgeContent.js';
-export const TokenAvatar = ({ token, chain, isLoading, sx, tokenAvatarSize = 40, chainAvatarSize = 16, }) => {
-    if (!chain || !token?.logoURI) {
-        return (_jsx(TokenAvatarFallback, { token: token, isLoading: isLoading, sx: sx, tokenAvatarSize: tokenAvatarSize, chainAvatarSize: chainAvatarSize }));
-    }
-    return (_jsx(TokenAvatarBase, { token: token, chain: chain, isLoading: isLoading, sx: sx, avatarSize: tokenAvatarSize, badgeSize: chainAvatarSize }));
+import { useChain } from "../../hooks/useChain.js";
+import { useToken } from "../../hooks/useToken.js";
+import { AvatarMasked } from "./Avatar.style.js";
+import { ChainBadgeContent } from "./ChainBadgeContent.js";
+import { AvatarBadgedSkeleton } from "./Avatar.js";
+import { Badge } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/TokenAvatar.tsx
+const TokenAvatar = ({ token, chain, isLoading, sx, tokenAvatarSize = 40, chainAvatarSize = 16 }) => {
+	if (!chain || !token?.logoURI) return /* @__PURE__ */ jsx(TokenAvatarFallback, {
+		token,
+		isLoading,
+		sx,
+		tokenAvatarSize,
+		chainAvatarSize
+	});
+	return /* @__PURE__ */ jsx(TokenAvatarBase, {
+		token,
+		chain,
+		isLoading,
+		sx,
+		avatarSize: tokenAvatarSize,
+		badgeSize: chainAvatarSize
+	});
 };
 const TokenAvatarFallback = ({ token, isLoading, sx, tokenAvatarSize, chainAvatarSize }) => {
-    const { chain } = useChain(token?.chainId);
-    const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
-    return (_jsx(TokenAvatarBase, { token: chainToken ?? token, isLoading: isLoading || isLoadingToken, chain: chain, sx: sx, avatarSize: tokenAvatarSize, badgeSize: chainAvatarSize }));
+	const { chain } = useChain(token?.chainId);
+	const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
+	return /* @__PURE__ */ jsx(TokenAvatarBase, {
+		token: chainToken ?? token,
+		isLoading: isLoading || isLoadingToken,
+		chain,
+		sx,
+		avatarSize: tokenAvatarSize,
+		badgeSize: chainAvatarSize
+	});
 };
 const TokenAvatarBase = ({ token, chain, isLoading, sx, avatarSize, badgeSize }) => {
-    return isLoading ? (_jsx(AvatarBadgedSkeleton, { avatarSize: avatarSize, badgeSize: badgeSize })) : (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(ChainBadgeContent, { chain: chain, size: badgeSize }), sx: sx, children: _jsx(AvatarMasked, { src: token?.logoURI, alt: token?.symbol, avatarSize: avatarSize, badgeSize: badgeSize, children: token?.symbol?.[0] }) }));
+	return isLoading ? /* @__PURE__ */ jsx(AvatarBadgedSkeleton, {
+		avatarSize,
+		badgeSize
+	}) : /* @__PURE__ */ jsx(Badge, {
+		overlap: "circular",
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		badgeContent: /* @__PURE__ */ jsx(ChainBadgeContent, {
+			chain,
+			size: badgeSize
+		}),
+		sx,
+		children: /* @__PURE__ */ jsx(AvatarMasked, {
+			src: token?.logoURI,
+			alt: token?.symbol,
+			avatarSize,
+			badgeSize,
+			children: token?.symbol?.[0]
+		})
+	});
 };
+//#endregion
+export { TokenAvatar };
+
 //# sourceMappingURL=TokenAvatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TokenAvatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/TokenAvatar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE1D,MAAM,CAAC,MAAM,WAAW,GAOnB,CAAC,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,EAAE,EACF,eAAe,GAAG,EAAE,EACpB,eAAe,GAAG,EAAE,GACrB,EAAE,EAAE;IACH,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;QAC9B,OAAO,CACL,KAAC,mBAAmB,IAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,GAChC,CACH,CAAA;IACH,CAAC;IACD,OAAO,CACL,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,eAAe,EAC3B,SAAS,EAAE,eAAe,GAC1B,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAMpB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAAE,EAAE;IAClE,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IAC1C,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,QAAQ,CAC/D,KAAK,EAAE,OAAO,EACd,KAAK,EAAE,OAAO,CACf,CAAA;IACD,OAAO,CACL,KAAC,eAAe,IACd,KAAK,EAAE,UAAU,IAAI,KAAK,EAC1B,SAAS,EAAE,SAAS,IAAI,cAAc,EACtC,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,eAAe,EAC3B,SAAS,EAAE,eAAe,GAC1B,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAOhB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE;IAC9D,OAAO,SAAS,CAAC,CAAC,CAAC,CACjB,KAAC,oBAAoB,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,GAAI,CACvE,CAAC,CAAC,CAAC,CACF,KAAC,KAAK,IACJ,OAAO,EAAC,UAAU,EAClB,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,EACzD,YAAY,EAAE,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAI,EAClE,EAAE,EAAE,EAAE,YAEN,KAAC,YAAY,IACX,GAAG,EAAE,KAAK,EAAE,OAAO,EACnB,GAAG,EAAE,KAAK,EAAE,MAAM,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,YAEnB,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,GACN,GACT,CACT,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TokenAvatar.js","names":[],"sources":["../../../../src/components/Avatar/TokenAvatar.tsx"],"sourcesContent":["import type { Chain, StaticToken } from '@lifi/sdk'\nimport type { SxProps, Theme } from '@mui/material'\nimport { Badge } from '@mui/material'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { AvatarBadgedSkeleton } from './Avatar.js'\nimport { AvatarMasked } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\n\nexport const TokenAvatar: React.FC<{\n  token?: StaticToken\n  chain?: Chain\n  isLoading?: boolean\n  sx?: SxProps<Theme>\n  tokenAvatarSize?: number\n  chainAvatarSize?: number\n}> = ({\n  token,\n  chain,\n  isLoading,\n  sx,\n  tokenAvatarSize = 40,\n  chainAvatarSize = 16,\n}) => {\n  if (!chain || !token?.logoURI) {\n    return (\n      <TokenAvatarFallback\n        token={token}\n        isLoading={isLoading}\n        sx={sx}\n        tokenAvatarSize={tokenAvatarSize}\n        chainAvatarSize={chainAvatarSize}\n      />\n    )\n  }\n  return (\n    <TokenAvatarBase\n      token={token}\n      chain={chain}\n      isLoading={isLoading}\n      sx={sx}\n      avatarSize={tokenAvatarSize}\n      badgeSize={chainAvatarSize}\n    />\n  )\n}\n\nconst TokenAvatarFallback: React.FC<{\n  token?: StaticToken\n  isLoading?: boolean\n  sx?: SxProps<Theme>\n  tokenAvatarSize: number\n  chainAvatarSize: number\n}> = ({ token, isLoading, sx, tokenAvatarSize, chainAvatarSize }) => {\n  const { chain } = useChain(token?.chainId)\n  const { token: chainToken, isLoading: isLoadingToken } = useToken(\n    token?.chainId,\n    token?.address\n  )\n  return (\n    <TokenAvatarBase\n      token={chainToken ?? token}\n      isLoading={isLoading || isLoadingToken}\n      chain={chain}\n      sx={sx}\n      avatarSize={tokenAvatarSize}\n      badgeSize={chainAvatarSize}\n    />\n  )\n}\n\nconst TokenAvatarBase: React.FC<{\n  token?: StaticToken\n  chain?: Chain\n  isLoading?: boolean\n  sx?: SxProps<Theme>\n  avatarSize: number\n  badgeSize: number\n}> = ({ token, chain, isLoading, sx, avatarSize, badgeSize }) => {\n  return isLoading ? (\n    <AvatarBadgedSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />\n  ) : (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<ChainBadgeContent chain={chain} size={badgeSize} />}\n      sx={sx}\n    >\n      <AvatarMasked\n        src={token?.logoURI}\n        alt={token?.symbol}\n        avatarSize={avatarSize}\n        badgeSize={badgeSize}\n      >\n        {token?.symbol?.[0]}\n      </AvatarMasked>\n    </Badge>\n  )\n}\n"],"mappings":";;;;;;;;AASA,MAAa,eAOP,EACJ,OACA,OACA,WACA,IACA,kBAAkB,IAClB,kBAAkB,SACd;CACJ,IAAI,CAAC,SAAS,CAAC,OAAO,SACpB,OACE,oBAAC,qBAAD;EACS;EACI;EACP;EACa;EACA;CAClB,CAAA;CAGL,OACE,oBAAC,iBAAD;EACS;EACA;EACI;EACP;EACJ,YAAY;EACZ,WAAW;CACZ,CAAA;AAEL;AAEA,MAAM,uBAMA,EAAE,OAAO,WAAW,IAAI,iBAAiB,sBAAsB;CACnE,MAAM,EAAE,UAAU,SAAS,OAAO,OAAO;CACzC,MAAM,EAAE,OAAO,YAAY,WAAW,mBAAmB,SACvD,OAAO,SACP,OAAO,OACT;CACA,OACE,oBAAC,iBAAD;EACE,OAAO,cAAc;EACrB,WAAW,aAAa;EACjB;EACH;EACJ,YAAY;EACZ,WAAW;CACZ,CAAA;AAEL;AAEA,MAAM,mBAOA,EAAE,OAAO,OAAO,WAAW,IAAI,YAAY,gBAAgB;CAC/D,OAAO,YACL,oBAAC,sBAAD;EAAkC;EAAuB;CAAY,CAAA,IAErE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD;GAA0B;GAAO,MAAM;EAAY,CAAA;EAC7D;YAEJ,oBAAC,cAAD;GACE,KAAK,OAAO;GACZ,KAAK,OAAO;GACA;GACD;aAEV,OAAO,SAAS;EACL,CAAA;CACT,CAAA;AAEX"}

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

@@ -1,6 +1,9 @@
+//#region src/components/Avatar/utils.ts
 const borderWidthPx = 2.5;
-// 14% is the right bottom offset of the MUI's badge (MuiBadge-badge class)
-export const getAvatarMask = (badgeSize) => {
-    return `radial-gradient(circle ${badgeSize / 2 + borderWidthPx}px at calc(100% - 14%) calc(100% - 14%), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`;
+const getAvatarMask = (badgeSize) => {
+	return `radial-gradient(circle ${badgeSize / 2 + borderWidthPx}px at calc(100% - 14%) calc(100% - 14%), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`;
 };
+//#endregion
+export { getAvatarMask };
+
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/Avatar/utils.ts"],"names":[],"mappings":"AAAA,MAAM,aAAa,GAAG,GAAG,CAAA;AAEzB,2EAA2E;AAC3E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAE,EAAE;IACjD,OAAO,0BAA0B,SAAS,GAAG,CAAC,GAAG,aAAa,2FAA2F,CAAA;AAC3J,CAAC,CAAA"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/Avatar/utils.ts"],"sourcesContent":["const borderWidthPx = 2.5\n\n// 14% is the right bottom offset of the MUI's badge (MuiBadge-badge class)\nexport const getAvatarMask = (badgeSize: number) => {\n  return `radial-gradient(circle ${badgeSize / 2 + borderWidthPx}px at calc(100% - 14%) calc(100% - 14%), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n}\n"],"mappings":";AAAA,MAAM,gBAAgB;AAGtB,MAAa,iBAAiB,cAAsB;CAClD,OAAO,0BAA0B,YAAY,IAAI,cAAc;AACjE"}

package/dist/esm/components/BaseTransactionButton/BaseTransactionButton.js

@@ -1,45 +1,51 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useWalletMenu } from '@lifi/wallet-management';
-import { Button } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useChain } from '../../hooks/useChain.js';
-import { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-export const BaseTransactionButton = ({ onClick, text, disabled, loading, route, }) => {
-    const { t } = useTranslation();
-    const { walletConfig } = useWidgetConfig();
-    const { openWalletMenu } = useWalletMenu();
-    const [fromChainId] = useFieldValues('fromChain');
-    const { chain } = useChain(fromChainId);
-    const { connected, missingChain } = useRouteRequiredAccountConnection(route, chain);
-    const handleClick = async (e) => {
-        if (connected) {
-            onClick?.();
-            return;
-        }
-        const connectionOptions = missingChain ? { chain: missingChain } : undefined;
-        if (walletConfig?.onConnect &&
-            !walletConfig?.forceInternalWalletManagement) {
-            walletConfig.onConnect(connectionOptions);
-        }
-        else {
-            openWalletMenu(connectionOptions);
-            e.currentTarget.blur(); // Remove focus to prevent accessibility issues when opening drawer
-        }
-    };
-    const getButtonText = () => {
-        if (connected) {
-            if (text) {
-                return text;
-            }
-        }
-        return missingChain
-            ? t('button.connectChainWallet', {
-                chain: missingChain.name,
-            })
-            : t('button.connectWallet');
-    };
-    return (_jsx(Button, { variant: "contained", color: "primary", onClick: handleClick, disabled: connected && disabled, loading: loading, loadingPosition: "center", fullWidth: true, children: getButtonText() }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChain } from "../../hooks/useChain.js";
+import { useRouteRequiredAccountConnection } from "../../hooks/useRouteRequiredAccountConnection.js";
+import { Button } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useWalletMenu } from "@lifi/wallet-management";
+//#region src/components/BaseTransactionButton/BaseTransactionButton.tsx
+const BaseTransactionButton = ({ onClick, text, disabled, loading, route, sx }) => {
+	const { t } = useTranslation();
+	const { walletConfig } = useWidgetConfig();
+	const { openWalletMenu } = useWalletMenu();
+	const [fromChainId] = useFieldValues("fromChain");
+	const { chain } = useChain(fromChainId);
+	const { connected, missingChain } = useRouteRequiredAccountConnection(route, chain);
+	const handleClick = async (e) => {
+		if (connected) {
+			onClick?.();
+			return;
+		}
+		const connectionOptions = missingChain ? { chain: missingChain } : void 0;
+		if (walletConfig?.onConnect && !walletConfig?.forceInternalWalletManagement) walletConfig.onConnect(connectionOptions);
+		else {
+			openWalletMenu(connectionOptions);
+			e.currentTarget.blur();
+		}
+	};
+	const getButtonText = () => {
+		if (connected) {
+			if (text) return text;
+		}
+		return missingChain ? t("button.connectChainWallet", { chain: missingChain.name }) : t("button.connectWallet");
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "contained",
+		color: "primary",
+		onClick: handleClick,
+		disabled: connected && disabled,
+		loading,
+		loadingPosition: "center",
+		fullWidth: true,
+		sx,
+		"data-testid": "widget-transaction-button",
+		children: getButtonText()
+	});
 };
+//#endregion
+export { BaseTransactionButton };
+
 //# sourceMappingURL=BaseTransactionButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseTransactionButton.js","sourceRoot":"","sources":["../../../../src/components/BaseTransactionButton/BaseTransactionButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,iCAAiC,EAAE,MAAM,kDAAkD,CAAA;AACpG,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AAGpE,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EAC1E,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,KAAK,GACN,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAA;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,EAAE,CAAA;IAC1C,MAAM,CAAC,WAAW,CAAC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IACjD,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IACvC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,iCAAiC,CACnE,KAAK,EACL,KAAK,CACN,CAAA;IACD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAgC,EAAE,EAAE;QAC7D,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,EAAE,EAAE,CAAA;YACX,OAAM;QACR,CAAC;QACD,MAAM,iBAAiB,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;QAC5E,IACE,YAAY,EAAE,SAAS;YACvB,CAAC,YAAY,EAAE,6BAA6B,EAC5C,CAAC;YACD,YAAY,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;QAC3C,CAAC;aAAM,CAAC;YACN,cAAc,CAAC,iBAAiB,CAAC,CAAA;YACjC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA,CAAC,mEAAmE;QAC5F,CAAC;IACH,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,SAAS,EAAE,CAAC;YACd,IAAI,IAAI,EAAE,CAAC;gBACT,OAAO,IAAI,CAAA;YACb,CAAC;QACH,CAAC;QACD,OAAO,YAAY;YACjB,CAAC,CAAC,CAAC,CAAC,2BAA2B,EAAE;gBAC7B,KAAK,EAAE,YAAY,CAAC,IAAI;aACzB,CAAC;YACJ,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,SAAS,IAAI,QAAQ,EAC/B,OAAO,EAAE,OAAO,EAChB,eAAe,EAAC,QAAQ,EACxB,SAAS,kBAER,aAAa,EAAE,GACT,CACV,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"BaseTransactionButton.js","names":[],"sources":["../../../../src/components/BaseTransactionButton/BaseTransactionButton.tsx"],"sourcesContent":["import { useWalletMenu } from '@lifi/wallet-management'\nimport { Button } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { BaseTransactionButtonProps } from './types.js'\n\nexport const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({\n  onClick,\n  text,\n  disabled,\n  loading,\n  route,\n  sx,\n}) => {\n  const { t } = useTranslation()\n  const { walletConfig } = useWidgetConfig()\n  const { openWalletMenu } = useWalletMenu()\n  const [fromChainId] = useFieldValues('fromChain')\n  const { chain } = useChain(fromChainId)\n  const { connected, missingChain } = useRouteRequiredAccountConnection(\n    route,\n    chain\n  )\n  const handleClick = async (e: React.MouseEvent<HTMLElement>) => {\n    if (connected) {\n      onClick?.()\n      return\n    }\n    const connectionOptions = missingChain ? { chain: missingChain } : undefined\n    if (\n      walletConfig?.onConnect &&\n      !walletConfig?.forceInternalWalletManagement\n    ) {\n      walletConfig.onConnect(connectionOptions)\n    } else {\n      openWalletMenu(connectionOptions)\n      e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n    }\n  }\n\n  const getButtonText = () => {\n    if (connected) {\n      if (text) {\n        return text\n      }\n    }\n    return missingChain\n      ? t('button.connectChainWallet', {\n          chain: missingChain.name,\n        })\n      : t('button.connectWallet')\n  }\n\n  return (\n    <Button\n      variant=\"contained\"\n      color=\"primary\"\n      onClick={handleClick}\n      disabled={connected && disabled}\n      loading={loading}\n      loadingPosition=\"center\"\n      fullWidth\n      sx={sx}\n      data-testid=\"widget-transaction-button\"\n    >\n      {getButtonText()}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,yBAA+D,EAC1E,SACA,MACA,UACA,SACA,OACA,SACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,CAAC,eAAe,eAAe,WAAW;CAChD,MAAM,EAAE,UAAU,SAAS,WAAW;CACtC,MAAM,EAAE,WAAW,iBAAiB,kCAClC,OACA,KACF;CACA,MAAM,cAAc,OAAO,MAAqC;EAC9D,IAAI,WAAW;GACb,UAAU;GACV;EACF;EACA,MAAM,oBAAoB,eAAe,EAAE,OAAO,aAAa,IAAI,KAAA;EACnE,IACE,cAAc,aACd,CAAC,cAAc,+BAEf,aAAa,UAAU,iBAAiB;OACnC;GACL,eAAe,iBAAiB;GAChC,EAAE,cAAc,KAAK;EACvB;CACF;CAEA,MAAM,sBAAsB;EAC1B,IAAI;OACE,MACF,OAAO;EAAA;EAGX,OAAO,eACH,EAAE,6BAA6B,EAC7B,OAAO,aAAa,KACtB,CAAC,IACD,EAAE,sBAAsB;CAC9B;CAEA,OACE,oBAAC,QAAD;EACE,SAAQ;EACR,OAAM;EACN,SAAS;EACT,UAAU,aAAa;EACd;EACT,iBAAgB;EAChB,WAAA;EACI;EACJ,eAAY;YAEX,cAAc;CACT,CAAA;AAEZ"}

package/dist/esm/components/BottomSheet/BottomSheet.js

@@ -1,33 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Drawer } from '@mui/material';
-import { forwardRef, startTransition, useCallback, useImperativeHandle, useRef, useState, } from 'react';
-import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js';
-import { modalProps, slotProps } from '../Dialog.js';
-export const BottomSheet = forwardRef(({ elementRef, children, open, onClose, keepMounted = false }, ref) => {
-    const getContainer = useGetScrollableContainer();
-    const openRef = useRef(open);
-    const [drawerOpen, setDrawerOpen] = useState(open);
-    const [isInert, setIsInert] = useState(!open);
-    const close = useCallback(() => {
-        // Set inert first to prevent focus issues
-        setIsInert(true);
-        // Push the state update to the next event loop tick
-        // to ensure the inert is applied to before the drawer is closed
-        startTransition(() => {
-            setDrawerOpen(false);
-            openRef.current = false;
-            onClose?.();
-        });
-    }, [onClose]);
-    useImperativeHandle(ref, () => ({
-        isOpen: () => openRef.current,
-        open: () => {
-            setIsInert(false);
-            setDrawerOpen(true);
-            openRef.current = true;
-        },
-        close,
-    }), [close]);
-    return (_jsx(Drawer, { container: getContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, slotProps: slotProps, disableAutoFocus: true, keepMounted: keepMounted, inert: isInert, children: children }));
-});
+import { useGetScrollableContainer } from "../../hooks/useScrollableContainer.js";
+import { modalProps, slotProps } from "../Dialog/Dialog.js";
+import { startTransition, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { Drawer } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/BottomSheet/BottomSheet.tsx
+const BottomSheet = ({ elementRef, children, open, onClose, keepMounted = false, ref }) => {
+	const getContainer = useGetScrollableContainer();
+	const openRef = useRef(open);
+	const [drawerOpen, setDrawerOpen] = useState(open);
+	const [isInert, setIsInert] = useState(!open);
+	const close = useCallback(() => {
+		setIsInert(true);
+		startTransition(() => {
+			setDrawerOpen(false);
+			openRef.current = false;
+			onClose?.();
+		});
+	}, [onClose]);
+	useImperativeHandle(ref, () => ({
+		isOpen: () => openRef.current,
+		open: () => {
+			setIsInert(false);
+			setDrawerOpen(true);
+			openRef.current = true;
+		},
+		close
+	}), [close]);
+	return /* @__PURE__ */ jsx(Drawer, {
+		container: getContainer,
+		ref: elementRef,
+		anchor: "bottom",
+		open: drawerOpen,
+		onClose: close,
+		ModalProps: modalProps,
+		slotProps,
+		disableAutoFocus: true,
+		keepMounted,
+		inert: isInert,
+		children
+	});
+};
+//#endregion
+export { BottomSheet };
+
 //# sourceMappingURL=BottomSheet.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["../../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAA;AACjF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAGpD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpE,MAAM,YAAY,GAAG,yBAAyB,EAAE,CAAA;IAChD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAA;IAE7C,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,0CAA0C;QAC1C,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,oDAAoD;QACpD,gEAAgE;QAChE,eAAe,CAAC,GAAG,EAAE;YACnB,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,OAAO,CAAC,OAAO,GAAG,KAAK,CAAA;YACvB,OAAO,EAAE,EAAE,CAAA;QACb,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO;QAC7B,IAAI,EAAE,GAAG,EAAE;YACT,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;QACxB,CAAC;QACD,KAAK;KACN,CAAC,EACF,CAAC,KAAK,CAAC,CACR,CAAA;IAED,OAAO,CACL,KAAC,MAAM,IACL,SAAS,EAAE,YAAY,EACvB,GAAG,EAAE,UAAU,EACf,MAAM,EAAC,QAAQ,EACf,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,QAChB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,OAAO,YAEb,QAAQ,GACF,CACV,CAAA;AACH,CAAC,CACF,CAAA"}
+{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import { Drawer } from '@mui/material'\nimport type { JSX, Ref } from 'react'\nimport {\n  startTransition,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { modalProps, slotProps } from '../Dialog/Dialog.js'\nimport type { BottomSheetBase, BottomSheetProps } from './types.js'\n\nexport const BottomSheet = ({\n  elementRef,\n  children,\n  open,\n  onClose,\n  keepMounted = false,\n  ref,\n}: Omit<BottomSheetProps, 'ref'> & {\n  ref?: Ref<BottomSheetBase>\n}): JSX.Element => {\n  const getContainer = useGetScrollableContainer()\n  const openRef = useRef(open)\n  const [drawerOpen, setDrawerOpen] = useState(open)\n  const [isInert, setIsInert] = useState(!open)\n\n  const close = useCallback(() => {\n    // Set inert first to prevent focus issues\n    setIsInert(true)\n    // Push the state update to the next event loop tick\n    // to ensure the inert is applied to before the drawer is closed\n    startTransition(() => {\n      setDrawerOpen(false)\n      openRef.current = false\n      onClose?.()\n    })\n  }, [onClose])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      isOpen: () => openRef.current,\n      open: () => {\n        setIsInert(false)\n        setDrawerOpen(true)\n        openRef.current = true\n      },\n      close,\n    }),\n    [close]\n  )\n\n  return (\n    <Drawer\n      container={getContainer}\n      ref={elementRef}\n      anchor=\"bottom\"\n      open={drawerOpen}\n      onClose={close}\n      ModalProps={modalProps}\n      slotProps={slotProps}\n      disableAutoFocus\n      keepMounted={keepMounted}\n      inert={isInert}\n    >\n      {children}\n    </Drawer>\n  )\n}\n"],"mappings":";;;;;;AAaA,MAAa,eAAe,EAC1B,YACA,UACA,MACA,SACA,cAAc,OACd,UAGiB;CACjB,MAAM,eAAe,0BAA0B;CAC/C,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,IAAI;CAE5C,MAAM,QAAQ,kBAAkB;EAE9B,WAAW,IAAI;EAGf,sBAAsB;GACpB,cAAc,KAAK;GACnB,QAAQ,UAAU;GAClB,UAAU;EACZ,CAAC;CACH,GAAG,CAAC,OAAO,CAAC;CAEZ,oBACE,YACO;EACL,cAAc,QAAQ;EACtB,YAAY;GACV,WAAW,KAAK;GAChB,cAAc,IAAI;GAClB,QAAQ,UAAU;EACpB;EACA;CACF,IACA,CAAC,KAAK,CACR;CAEA,OACE,oBAAC,QAAD;EACE,WAAW;EACX,KAAK;EACL,QAAO;EACP,MAAM;EACN,SAAS;EACT,YAAY;EACD;EACX,kBAAA;EACa;EACb,OAAO;EAEN;CACK,CAAA;AAEZ"}

package/dist/esm/components/ButtonTertiary.js

@@ -1,27 +1,21 @@
-import { Button, buttonClasses, styled } from '@mui/material';
-export const ButtonTertiary = styled(Button)(({ theme }) => ({
-    color: theme.vars.palette.text.primary,
-    height: 40,
-    fontSize: 14,
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-    '&:hover, &:active': {
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-    },
-    [`&.${buttonClasses.loading}:disabled`]: {
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-    },
-    ...theme.applyStyles('dark', {
-        color: theme.vars.palette.text.primary,
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-        '&:hover, &:active': {
-            backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-        },
-        [`&.${buttonClasses.loading}:disabled`]: {
-            backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-        },
-    }),
-    [`.${buttonClasses.loadingIndicator}`]: {
-        color: theme.vars.palette.text.primary,
-    },
+import { Button, buttonClasses, styled } from "@mui/material";
+//#region src/components/ButtonTertiary.tsx
+const ButtonTertiary = styled(Button)(({ theme }) => ({
+	color: theme.vars.palette.text.primary,
+	height: 40,
+	fontSize: 14,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	"&:hover, &:active": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+	[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
+	...theme.applyStyles("dark", {
+		color: theme.vars.palette.text.primary,
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+		"&:hover, &:active": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+		[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
+	}),
+	[`.${buttonClasses.loadingIndicator}`]: { color: theme.vars.palette.text.primary }
 }));
+//#endregion
+export { ButtonTertiary };
+
 //# sourceMappingURL=ButtonTertiary.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.js","sourceRoot":"","sources":["../../../src/components/ButtonTertiary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3D,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;IACtC,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;IAChF,mBAAmB,EAAE;QACnB,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;KACjF;IACD,CAAC,KAAK,aAAa,CAAC,OAAO,WAAW,CAAC,EAAE;QACvC,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;KACjF;IACD,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;QAC3B,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;QACtC,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;QAChF,mBAAmB,EAAE;YACnB,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;SACjF;QACD,CAAC,KAAK,aAAa,CAAC,OAAO,WAAW,CAAC,EAAE;YACvC,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;SACjF;KACF,CAAC;IACF,CAAC,IAAI,aAAa,CAAC,gBAAgB,EAAE,CAAC,EAAE;QACtC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;KACvC;CACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"ButtonTertiary.js","names":[],"sources":["../../../src/components/ButtonTertiary.tsx"],"sourcesContent":["import { Button, buttonClasses, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =\n  styled(Button)(({ theme }) => ({\n    color: theme.vars.palette.text.primary,\n    height: 40,\n    fontSize: 14,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    '&:hover, &:active': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    },\n    [`&.${buttonClasses.loading}:disabled`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    },\n    ...theme.applyStyles('dark', {\n      color: theme.vars.palette.text.primary,\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n      '&:hover, &:active': {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n      },\n      [`&.${buttonClasses.loading}:disabled`]: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n      },\n    }),\n    [`.${buttonClasses.loadingIndicator}`]: {\n      color: theme.vars.palette.text.primary,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,iBACX,OAAO,MAAM,CAAC,EAAE,EAAE,aAAa;CAC7B,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;CACR,UAAU;CACV,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,qBAAqB,EACnB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;EACC,KAAK,cAAc,QAAQ,aAAa,EACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,qBAAqB,EACnB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;GACC,KAAK,cAAc,QAAQ,aAAa,EACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACF,CAAC;EACA,IAAI,cAAc,qBAAqB,EACtC,OAAO,MAAM,KAAK,QAAQ,KAAK,QACjC;AACF,EAAE"}

package/dist/esm/components/Card/Card.js

@@ -1,71 +1,65 @@
-import { Card as MuiCard, styled } from '@mui/material';
-export const Card = styled(MuiCard, {
-    shouldForwardProp: (prop) => !['type', 'indented', 'selectionColor'].includes(prop),
-})(({ theme }) => {
-    return {
-        padding: 0,
-        variants: [
-            {
-                props: ({ indented }) => indented,
-                style: {
-                    padding: theme.spacing(2),
-                },
-            },
-            {
-                props: {
-                    selectionColor: 'primary',
-                    type: 'selected',
-                },
-                style: {
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: theme.vars.palette.primary.main,
-                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,
-                    '&:hover': {
-                        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,
-                    },
-                    ...theme.applyStyles('dark', {
-                        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,
-                        '&:hover': {
-                            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,
-                        },
-                        borderColor: theme.vars.palette.primary.main,
-                    }),
-                },
-            },
-            {
-                props: {
-                    selectionColor: 'secondary',
-                    type: 'selected',
-                },
-                style: {
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
-                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
-                    '&:hover': {
-                        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,
-                    },
-                    ...theme.applyStyles('dark', {
-                        borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
-                        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
-                        '&:hover': {
-                            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,
-                        },
-                    }),
-                },
-            },
-            {
-                props: {
-                    type: 'error',
-                },
-                style: {
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: theme.vars.palette.error.main,
-                },
-            },
-        ],
-    };
+import { Card, styled } from "@mui/material";
+//#region src/components/Card/Card.tsx
+const Card$1 = styled(Card, { shouldForwardProp: (prop) => ![
+	"type",
+	"indented",
+	"selectionColor"
+].includes(prop) })(({ theme }) => {
+	return {
+		padding: 0,
+		variants: [
+			{
+				props: ({ indented }) => indented,
+				style: { padding: theme.spacing(2) }
+			},
+			{
+				props: {
+					selectionColor: "primary",
+					type: "selected"
+				},
+				style: {
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: theme.vars.palette.primary.main,
+					backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,
+					"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)` },
+					...theme.applyStyles("dark", {
+						backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,
+						"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)` },
+						borderColor: theme.vars.palette.primary.main
+					})
+				}
+			},
+			{
+				props: {
+					selectionColor: "secondary",
+					type: "selected"
+				},
+				style: {
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
+					backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
+					"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)` },
+					...theme.applyStyles("dark", {
+						borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
+						backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
+						"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)` }
+					})
+				}
+			},
+			{
+				props: { type: "error" },
+				style: {
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: theme.vars.palette.error.main
+				}
+			}
+		]
+	};
 });
+//#endregion
+export { Card$1 as Card };
+
 //# sourceMappingURL=Card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["Card","MuiCard"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { CardProps as MuiCardProps } from '@mui/material'\nimport { Card as MuiCard, styled } from '@mui/material'\nimport type React from 'react'\n\nexport interface CardProps extends MuiCardProps {\n  type?: 'default' | 'selected' | 'error'\n  selectionColor?: 'primary' | 'secondary'\n  indented?: boolean\n}\n\nexport const Card: React.FC<React.ComponentProps<typeof MuiCard> & CardProps> =\n  styled(MuiCard, {\n    shouldForwardProp: (prop) =>\n      !['type', 'indented', 'selectionColor'].includes(prop as string),\n  })<CardProps>(({ theme }) => {\n    return {\n      padding: 0,\n      variants: [\n        {\n          props: ({ indented }) => indented,\n          style: {\n            padding: theme.spacing(2),\n          },\n        },\n        {\n          props: {\n            selectionColor: 'primary',\n            type: 'selected',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: theme.vars.palette.primary.main,\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,\n            },\n            ...theme.applyStyles('dark', {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,\n              '&:hover': {\n                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,\n              },\n              borderColor: theme.vars.palette.primary.main,\n            }),\n          },\n        },\n        {\n          props: {\n            selectionColor: 'secondary',\n            type: 'selected',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n            },\n            ...theme.applyStyles('dark', {\n              borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n              '&:hover': {\n                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n              },\n            }),\n          },\n        },\n        {\n          props: {\n            type: 'error',\n          },\n          style: {\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderColor: theme.vars.palette.error.main,\n          },\n        },\n      ],\n    }\n  })\n"],"mappings":";;AAUA,MAAaA,SACX,OAAOC,MAAS,EACd,oBAAoB,SAClB,CAAC;CAAC;CAAQ;CAAY;AAAgB,CAAC,CAAC,SAAS,IAAc,EACnE,CAAC,CAAC,EAAa,EAAE,YAAY;CAC3B,OAAO;EACL,SAAS;EACT,UAAU;GACR;IACE,QAAQ,EAAE,eAAe;IACzB,OAAO,EACL,SAAS,MAAM,QAAQ,CAAC,EAC1B;GACF;GACA;IACE,OAAO;KACL,gBAAgB;KAChB,MAAM;IACR;IACA,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,MAAM,KAAK,QAAQ,QAAQ;KACxC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACvE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,cACzE;KACA,GAAG,MAAM,YAAY,QAAQ;MAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;MACvE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,cACzE;MACA,aAAa,MAAM,KAAK,QAAQ,QAAQ;KAC1C,CAAC;IACH;GACF;GACA;IACE,OAAO;KACL,gBAAgB;KAChB,MAAM;IACR;IACA,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;KACrE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;KACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,cAC3E;KACA,GAAG,MAAM,YAAY,QAAQ;MAC3B,aAAa,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;MACrE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;MACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,cAC3E;KACF,CAAC;IACH;GACF;GACA;IACE,OAAO,EACL,MAAM,QACR;IACA,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,MAAM,KAAK,QAAQ,MAAM;IACxC;GACF;EACF;CACF;AACF,CAAC"}

package/dist/esm/components/Card/CardButton.js

@@ -1,5 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card } from './Card.js';
-import { CardRowButton, CardTitleContainer, CardValue, } from './CardButton.style.js';
-export const CardButton = ({ onClick, icon, title, children }) => (_jsx(Card, { children: _jsxs(CardRowButton, { onClick: onClick, disableRipple: true, children: [_jsxs(CardTitleContainer, { children: [icon, _jsx(CardValue, { children: title })] }), children] }) }));
+import { Card } from "./Card.js";
+import { CardRowButton, CardTitleContainer, CardValue } from "./CardButton.style.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Card/CardButton.tsx
+const CardButton = ({ onClick, icon, title, children }) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardRowButton, {
+	onClick,
+	disableRipple: true,
+	children: [/* @__PURE__ */ jsxs(CardTitleContainer, { children: [icon, /* @__PURE__ */ jsx(CardValue, { children: title })] }), children]
+}) });
+//#endregion
+export { CardButton };
+
 //# sourceMappingURL=CardButton.js.map

package/dist/esm/components/Card/CardButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardButton.js","sourceRoot":"","sources":["../../../../src/components/Card/CardButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,SAAS,GACV,MAAM,uBAAuB,CAAA;AAM9B,MAAM,CAAC,MAAM,UAAU,GAEnB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC1C,KAAC,IAAI,cACH,MAAC,aAAa,IAAC,OAAO,EAAE,OAAO,EAAE,aAAa,mBAC5C,MAAC,kBAAkB,eAChB,IAAI,EACL,KAAC,SAAS,cAAE,KAAK,GAAa,IACX,EACpB,QAAQ,IACK,GACX,CACR,CAAA"}
+{"version":3,"file":"CardButton.js","names":[],"sources":["../../../../src/components/Card/CardButton.tsx"],"sourcesContent":["import type { MouseEventHandler, PropsWithChildren } from 'react'\nimport type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types.js'\nimport { Card } from './Card.js'\nimport {\n  CardRowButton,\n  CardTitleContainer,\n  CardValue,\n} from './CardButton.style.js'\n\ninterface SettingCardButtonProps extends SettingCardTitle {\n  onClick: MouseEventHandler\n}\n\nexport const CardButton: React.FC<\n  PropsWithChildren<SettingCardButtonProps>\n> = ({ onClick, icon, title, children }) => (\n  <Card>\n    <CardRowButton onClick={onClick} disableRipple>\n      <CardTitleContainer>\n        {icon}\n        <CardValue>{title}</CardValue>\n      </CardTitleContainer>\n      {children}\n    </CardRowButton>\n  </Card>\n)\n"],"mappings":";;;;AAaA,MAAa,cAER,EAAE,SAAS,MAAM,OAAO,eAC3B,oBAAC,MAAD,EAAA,UACE,qBAAC,eAAD;CAAwB;CAAS,eAAA;WAAjC,CACE,qBAAC,oBAAD,EAAA,UAAA,CACG,MACD,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,CACX,EAAA,CAAA,GACnB,QACY;GACX,CAAA"}