@lifi/widget 4.0.0-beta.9 → 4.1.0

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

@@ -0,0 +1,198 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
+import { Card as Card$1 } from "../Card/Card.js";
+import { CardIconButton } from "../Card/CardIconButton.js";
+import { SmallAvatar } from "../Avatar/SmallAvatar.js";
+import { StepActionsHeader, StepActionsTitle, StepLabelTypography } from "./StepActions.style.js";
+import { Fragment } from "react";
+import { Box, Divider, Tooltip } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useEthereumContext } from "@lifi/widget-provider";
+import ArrowForward from "@mui/icons-material/ArrowForward";
+//#region src/components/Step/StepActions.tsx
+const StepActions = ({ route }) => {
+	const { t } = useTranslation();
+	const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig();
+	const { isGaslessStep } = useEthereumContext();
+	const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps);
+	const tooltipContent = /* @__PURE__ */ jsx(Card$1, {
+		indented: true,
+		children: /* @__PURE__ */ jsx(Box, {
+			sx: {
+				display: "grid",
+				gridTemplateColumns: "32px 1fr",
+				columnGap: 1.5
+			},
+			children: route.steps.flatMap((routeStep) => {
+				let steps = routeStep.includedSteps;
+				if (hiddenUI?.integratorStepDetails) {
+					const feeCollectionStep = steps.find((s) => s.tool === "feeCollection");
+					if (feeCollectionStep) {
+						steps = structuredClone(steps.filter((s) => s.tool !== "feeCollection"));
+						steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount;
+					}
+				}
+				const hasGaslessSupport = !!isGaslessStep?.(routeStep);
+				return steps.map((includedStep) => ({
+					includedStep,
+					hasGaslessSupport
+				}));
+			}).map(({ includedStep: step, hasGaslessSupport }, i, arr) => {
+				const showDivider = i !== arr.length - 1;
+				const isFeeCollection = step.type === "protocol" && step.tool === "feeCollection";
+				const toolName = isFeeCollection && feeConfig?.name ? feeConfig.name : step.toolDetails.name;
+				const toolLogoURI = isFeeCollection && feeConfig?.logoURI ? feeConfig.logoURI : step.toolDetails.logoURI;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Box, {
+						sx: {
+							display: "flex",
+							justifyContent: "center"
+						},
+						children: toolLogoURI ? /* @__PURE__ */ jsx(SmallAvatar, {
+							src: toolLogoURI,
+							alt: toolName,
+							sx: {
+								width: 32,
+								height: 32
+							},
+							children: toolName?.[0]
+						}) : null
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "flex",
+							flexDirection: "column",
+							minHeight: 32
+						},
+						children: [step.type === "custom" && mode === "custom" ? /* @__PURE__ */ jsx(CustomStepDetailsLabel, {
+							step,
+							mode,
+							modeOptions
+						}) : step.type === "cross" ? /* @__PURE__ */ jsx(BridgeStepDetailsLabel, { step }) : step.type === "protocol" ? /* @__PURE__ */ jsx(ProtocolStepDetailsLabel, {
+							step,
+							feeConfig,
+							relayerSupport: hasGaslessSupport
+						}) : /* @__PURE__ */ jsx(SwapStepDetailsLabel, { step }), /* @__PURE__ */ jsx(StepDetailsContent, { step })]
+					}),
+					showDivider && /* @__PURE__ */ jsx(Box, {
+						sx: {
+							display: "flex",
+							alignItems: "center",
+							px: "15px"
+						},
+						children: /* @__PURE__ */ jsx(Divider, {
+							orientation: "vertical",
+							sx: {
+								my: .5,
+								height: 8,
+								borderRightWidth: 2
+							}
+						})
+					}),
+					showDivider && /* @__PURE__ */ jsx(Box, {})
+				] }, step.id);
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs(StepActionsHeader, { children: [/* @__PURE__ */ jsx(StepActionsTitle, { children: t("main.route") }), /* @__PURE__ */ jsx(Tooltip, {
+		title: tooltipContent,
+		placement: "bottom-end",
+		arrow: false,
+		slotProps: {
+			tooltip: { sx: {
+				bgcolor: "transparent",
+				p: 0,
+				boxShadow: "none",
+				maxWidth: "none"
+			} },
+			transition: { style: { transformOrigin: "right top" } }
+		},
+		children: /* @__PURE__ */ jsx(CardIconButton, {
+			size: "small",
+			sx: (theme) => ({ borderRadius: theme.vars.shape.borderRadiusSecondary }),
+			children: /* @__PURE__ */ jsx(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center"
+				},
+				children: headerIncludedSteps.map((includedStep, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? /* @__PURE__ */ jsx(Divider, { sx: {
+					width: 8,
+					mx: .5,
+					borderWidth: 1
+				} }) : null, /* @__PURE__ */ jsx(SmallAvatar, {
+					src: includedStep.toolDetails.logoURI,
+					alt: includedStep.toolDetails.name,
+					sx: {
+						width: 16,
+						height: 16
+					},
+					children: includedStep.toolDetails.name[0]
+				})] }, index))
+			})
+		})
+	})] });
+};
+const StepDetailsContent = ({ step }) => {
+	const { t } = useTranslation();
+	const sameTokenProtocolStep = step.action.fromToken.chainId === step.action.toToken.chainId && step.action.fromToken.address === step.action.toToken.address;
+	let fromAmount;
+	if (sameTokenProtocolStep) {
+		const estimatedFromAmount = BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount);
+		fromAmount = estimatedFromAmount > 0n ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals) : formatTokenAmount(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals);
+	} else fromAmount = formatTokenAmount(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals);
+	const showToAmount = step.type !== "custom" && step.tool !== "custom" && !sameTokenProtocolStep;
+	return /* @__PURE__ */ jsxs(StepLabelTypography, { children: [
+		!showToAmount ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			t("format.tokenAmount", { value: formatTokenAmount(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals) }),
+			" ",
+			step.action.fromToken.symbol,
+			" - "
+		] }) : null,
+		t("format.tokenAmount", { value: fromAmount }),
+		" ",
+		step.action.fromToken.symbol,
+		showToAmount ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(ArrowForward, { sx: {
+				fontSize: 18,
+				paddingX: .5,
+				height: 12
+			} }),
+			t("format.tokenAmount", { value: formatTokenAmount(BigInt(step.execution?.toAmount ?? step.estimate.toAmount), step.execution?.toToken?.decimals ?? step.action.toToken.decimals) }),
+			" ",
+			step.execution?.toToken?.symbol ?? step.action.toToken.symbol
+		] }) : ` (${t("format.currency", { value: formatTokenPrice(fromAmount, step.action.fromToken.priceUSD, step.action.fromToken.decimals) })})`
+	] });
+};
+const CustomStepDetailsLabel = ({ step, mode, modeOptions }) => {
+	const { t } = useTranslation();
+	if (!mode) return null;
+	const toolDetails = mode === "custom" && step.includedSteps?.length > 0 ? step.includedSteps.find((step) => step.tool === "custom" && step.toolDetails.key !== "custom")?.toolDetails || step.toolDetails : step.toolDetails;
+	return /* @__PURE__ */ jsx(StepLabelTypography, { children: t(`main.${mode === "custom" && modeOptions?.custom?.type || "checkout"}StepDetails`, { tool: toolDetails.name }) });
+};
+const BridgeStepDetailsLabel = ({ step }) => {
+	const { t } = useTranslation();
+	const { getChainById } = useAvailableChains();
+	return /* @__PURE__ */ jsx(StepLabelTypography, { children: t("main.bridgeStepDetails", {
+		from: getChainById(step.action.fromChainId)?.name,
+		to: getChainById(step.action.toChainId)?.name,
+		tool: step.toolDetails.name
+	}) });
+};
+const SwapStepDetailsLabel = ({ step }) => {
+	const { t } = useTranslation();
+	const { getChainById } = useAvailableChains();
+	return /* @__PURE__ */ jsx(StepLabelTypography, { children: t("main.swapStepDetails", {
+		chain: getChainById(step.action.fromChainId)?.name,
+		tool: step.toolDetails.name
+	}) });
+};
+const ProtocolStepDetailsLabel = ({ step, feeConfig, relayerSupport }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(StepLabelTypography, { children: step.toolDetails.key === "feeCollection" ? feeConfig?.name || (relayerSupport ? t("main.fees.relayerService") : t("main.fees.defaultIntegrator")) : step.toolDetails.key === "gasZip" ? t("main.refuelStepDetails", { tool: step.toolDetails.name }) : step.toolDetails.name });
+};
+//#endregion
+export { StepActions };
+
+//# sourceMappingURL=StepActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepActions.js","names":["Card"],"sources":["../../../../src/components/Step/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport { Box, Divider, Tooltip } from '@mui/material'\nimport { Fragment } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type {\n  ModeOptions,\n  WidgetFeeConfig,\n  WidgetMode,\n} from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  StepActionsHeader,\n  StepActionsTitle,\n  StepLabelTypography,\n} from './StepActions.style.js'\n\ninterface StepDetailsLabelProps {\n  step: StepExtended\n  mode?: Extract<WidgetMode, 'custom'>\n  modeOptions?: ModeOptions\n  feeConfig?: WidgetFeeConfig\n  relayerSupport?: boolean\n}\n\nexport const StepActions: React.FC<{\n  route: RouteExtended\n}> = ({ route }) => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)\n\n  const flatSteps = route.steps.flatMap((routeStep) => {\n    let steps = routeStep.includedSteps\n    if (hiddenUI?.integratorStepDetails) {\n      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')\n      if (feeCollectionStep) {\n        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))\n        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount\n      }\n    }\n    const hasGaslessSupport = !!isGaslessStep?.(routeStep)\n    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))\n  })\n\n  const tooltipContent = (\n    <Card indented>\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '32px 1fr',\n          columnGap: 1.5,\n        }}\n      >\n        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {\n          const showDivider = i !== arr.length - 1\n          const isFeeCollection =\n            step.type === 'protocol' && step.tool === 'feeCollection'\n          const toolName =\n            isFeeCollection && feeConfig?.name\n              ? feeConfig.name\n              : step.toolDetails.name\n          const toolLogoURI =\n            isFeeCollection && feeConfig?.logoURI\n              ? feeConfig.logoURI\n              : step.toolDetails.logoURI\n\n          return (\n            <Fragment key={step.id}>\n              <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n                {toolLogoURI ? (\n                  <SmallAvatar\n                    src={toolLogoURI}\n                    alt={toolName}\n                    sx={{ width: 32, height: 32 }}\n                  >\n                    {toolName?.[0]}\n                  </SmallAvatar>\n                ) : null}\n              </Box>\n              <Box\n                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}\n              >\n                {step.type === 'custom' && mode === 'custom' ? (\n                  <CustomStepDetailsLabel\n                    step={step}\n                    mode={mode}\n                    modeOptions={modeOptions}\n                  />\n                ) : step.type === 'cross' ? (\n                  <BridgeStepDetailsLabel step={step} />\n                ) : step.type === 'protocol' ? (\n                  <ProtocolStepDetailsLabel\n                    step={step}\n                    feeConfig={feeConfig}\n                    relayerSupport={hasGaslessSupport}\n                  />\n                ) : (\n                  <SwapStepDetailsLabel step={step} />\n                )}\n                <StepDetailsContent step={step} />\n              </Box>\n              {showDivider && (\n                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>\n                  <Divider\n                    orientation=\"vertical\"\n                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}\n                  />\n                </Box>\n              )}\n              {showDivider && <Box />}\n            </Fragment>\n          )\n        })}\n      </Box>\n    </Card>\n  )\n\n  return (\n    <StepActionsHeader>\n      <StepActionsTitle>{t('main.route')}</StepActionsTitle>\n      <Tooltip\n        title={tooltipContent}\n        placement=\"bottom-end\"\n        arrow={false}\n        slotProps={{\n          tooltip: {\n            sx: {\n              bgcolor: 'transparent',\n              p: 0,\n              boxShadow: 'none',\n              maxWidth: 'none',\n            },\n          },\n          transition: {\n            style: { transformOrigin: 'right top' },\n          },\n        }}\n      >\n        <CardIconButton\n          size=\"small\"\n          sx={(theme) => ({\n            borderRadius: theme.vars.shape.borderRadiusSecondary,\n          })}\n        >\n          <Box sx={{ display: 'flex', alignItems: 'center' }}>\n            {headerIncludedSteps.map((includedStep, index) => (\n              <Fragment key={index}>\n                {index > 0 ? (\n                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />\n                ) : null}\n                <SmallAvatar\n                  src={includedStep.toolDetails.logoURI}\n                  alt={includedStep.toolDetails.name}\n                  sx={{ width: 16, height: 16 }}\n                >\n                  {includedStep.toolDetails.name[0]}\n                </SmallAvatar>\n              </Fragment>\n            ))}\n          </Box>\n        </CardIconButton>\n      </Tooltip>\n    </StepActionsHeader>\n  )\n}\n\nconst StepDetailsContent: React.FC<{\n  step: StepExtended\n}> = ({ step }) => {\n  const { t } = useTranslation()\n\n  const sameTokenProtocolStep =\n    step.action.fromToken.chainId === step.action.toToken.chainId &&\n    step.action.fromToken.address === step.action.toToken.address\n\n  let fromAmount: string | undefined\n  if (sameTokenProtocolStep) {\n    const estimatedFromAmount =\n      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n    fromAmount =\n      estimatedFromAmount > 0n\n        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n        : formatTokenAmount(\n            BigInt(step.estimate.fromAmount),\n            step.action.fromToken.decimals\n          )\n  } else {\n    fromAmount = formatTokenAmount(\n      BigInt(step.estimate.fromAmount),\n      step.action.fromToken.decimals\n    )\n  }\n\n  const showToAmount =\n    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n  return (\n    <StepLabelTypography>\n      {!showToAmount ? (\n        <>\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.estimate.fromAmount),\n              step.action.fromToken.decimals\n            ),\n          })}{' '}\n          {step.action.fromToken.symbol}\n          {' - '}\n        </>\n      ) : null}\n      {t('format.tokenAmount', {\n        value: fromAmount,\n      })}{' '}\n      {step.action.fromToken.symbol}\n      {showToAmount ? (\n        <>\n          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n              step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n            ),\n          })}{' '}\n          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n        </>\n      ) : (\n        ` (${t('format.currency', {\n          value: formatTokenPrice(\n            fromAmount,\n            step.action.fromToken.priceUSD,\n            step.action.fromToken.decimals\n          ),\n        })})`\n      )}\n    </StepLabelTypography>\n  )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n  step,\n  mode,\n  modeOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!mode) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    mode === 'custom' && (step as unknown as LiFiStep).includedSteps?.length > 0\n      ? (step as unknown as LiFiStep).includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  const stepDetailsKey =\n    (mode === 'custom' && modeOptions?.custom?.type) || 'checkout'\n\n  return (\n    <StepLabelTypography>\n      {t(`main.${stepDetailsKey}StepDetails`, {\n        tool: toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.bridgeStepDetails', {\n        from: getChainById(step.action.fromChainId)?.name,\n        to: getChainById(step.action.toChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.swapStepDetails', {\n        chain: getChainById(step.action.fromChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n  const { t } = useTranslation()\n  return (\n    <StepLabelTypography>\n      {step.toolDetails.key === 'feeCollection'\n        ? feeConfig?.name ||\n          (relayerSupport\n            ? t('main.fees.relayerService')\n            : t('main.fees.defaultIntegrator'))\n        : step.toolDetails.key === 'gasZip'\n          ? t('main.refuelStepDetails', {\n              tool: step.toolDetails.name,\n            })\n          : step.toolDetails.name}\n    </StepLabelTypography>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Step/StepActions.style.js

@@ -0,0 +1,27 @@
+import { AvatarMasked } from "../Avatar/Avatar.style.js";
+import { Box, Typography, styled } from "@mui/material";
+//#region src/components/Step/StepActions.style.tsx
+const StepLabelTypography = styled(Typography)(({ theme }) => ({
+	fontSize: 12,
+	fontWeight: 500,
+	lineHeight: 1.3334,
+	color: theme.vars.palette.text.primary,
+	whiteSpace: "nowrap"
+}));
+styled(AvatarMasked)(({ theme }) => ({
+	color: theme.vars.palette.text.primary,
+	backgroundColor: "transparent"
+}));
+const StepActionsHeader = styled(Box)(() => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+}));
+const StepActionsTitle = styled(Typography)(() => ({
+	fontSize: 12,
+	fontWeight: 700
+}));
+//#endregion
+export { StepActionsHeader, StepActionsTitle, StepLabelTypography };
+
+//# sourceMappingURL=StepActions.style.js.map

package/dist/esm/components/Step/StepActions.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepActions.style.js","names":[],"sources":["../../../../src/components/Step/StepActions.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\n\nexport const StepLabelTypography: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 12,\n  fontWeight: 500,\n  lineHeight: 1.3334,\n  color: theme.vars.palette.text.primary,\n  whiteSpace: 'nowrap',\n}))\n\nexport const StepAvatar: React.FC<React.ComponentProps<typeof AvatarMasked>> =\n  styled(AvatarMasked)(({ theme }) => ({\n    color: theme.vars.palette.text.primary,\n    backgroundColor: 'transparent',\n  }))\n\nexport const StepActionsHeader: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(() => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  }))\n\nexport const StepActionsTitle: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(() => ({\n  fontSize: 12,\n  fontWeight: 700,\n}))\n"],"mappings":";;;AAIA,MAAa,sBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;AACd,EAAE;AAGA,OAAO,YAAY,CAAC,EAAE,EAAE,aAAa;CACnC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB;AACnB,EAAE;AAEJ,MAAa,oBACX,OAAO,GAAG,CAAC,QAAQ;CACjB,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,EAAE;AAEJ,MAAa,mBAET,OAAO,UAAU,CAAC,QAAQ;CAC5B,UAAU;CACV,YAAY;AACd,EAAE"}

package/dist/esm/components/StepActions/SentToWalletRow.js

@@ -0,0 +1,49 @@
+import { shortenAddress } from "../../utils/wallet.js";
+import { useExplorer } from "../../hooks/useExplorer.js";
+import { ActionRow } from "../ActionRow/ActionRow.js";
+import { ActionIconCircle, ExternalLink } from "./SentToWalletRow.style.js";
+import { Box, IconButton } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Wallet from "@mui/icons-material/Wallet";
+import ContentCopyRounded from "@mui/icons-material/ContentCopyRounded";
+import OpenInNew from "@mui/icons-material/OpenInNew";
+//#region src/components/StepActions/SentToWalletRow.tsx
+const SentToWalletRow = ({ toAddress, toChainId }) => {
+	const { t } = useTranslation();
+	const { getAddressLink } = useExplorer();
+	const addressLink = getAddressLink(toAddress, toChainId);
+	const handleCopy = (e) => {
+		e.stopPropagation();
+		navigator.clipboard.writeText(toAddress);
+	};
+	return /* @__PURE__ */ jsx(ActionRow, {
+		startAdornment: /* @__PURE__ */ jsx(ActionIconCircle, { children: /* @__PURE__ */ jsx(Wallet, {
+			color: "success",
+			sx: { fontSize: 16 }
+		}) }),
+		message: `${t("main.sentToWallet")}: ${shortenAddress(toAddress)}`,
+		endAdornment: /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .5
+			},
+			children: [/* @__PURE__ */ jsx(IconButton, {
+				size: "small",
+				onClick: handleCopy,
+				sx: { p: .5 },
+				children: /* @__PURE__ */ jsx(ContentCopyRounded, { sx: { fontSize: 16 } })
+			}), addressLink ? /* @__PURE__ */ jsx(ExternalLink, {
+				href: addressLink,
+				target: "_blank",
+				rel: "nofollow noreferrer",
+				children: /* @__PURE__ */ jsx(OpenInNew, { sx: { fontSize: 16 } })
+			}) : void 0]
+		})
+	});
+};
+//#endregion
+export { SentToWalletRow };
+
+//# sourceMappingURL=SentToWalletRow.js.map

package/dist/esm/components/StepActions/SentToWalletRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SentToWalletRow.js","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.tsx"],"sourcesContent":["import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Box, IconButton } from '@mui/material'\nimport type { MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { ActionIconCircle, ExternalLink } from './SentToWalletRow.style.js'\n\ninterface SentToWalletRowProps {\n  toAddress: string\n  toChainId: number\n}\n\nexport const SentToWalletRow: React.FC<SentToWalletRowProps> = ({\n  toAddress,\n  toChainId,\n}) => {\n  const { t } = useTranslation()\n  const { getAddressLink } = useExplorer()\n  const addressLink = getAddressLink(toAddress, toChainId)\n\n  const handleCopy = (e: MouseEvent) => {\n    e.stopPropagation()\n    navigator.clipboard.writeText(toAddress)\n  }\n\n  return (\n    <ActionRow\n      startAdornment={\n        <ActionIconCircle>\n          <Wallet color=\"success\" sx={{ fontSize: 16 }} />\n        </ActionIconCircle>\n      }\n      message={`${t('main.sentToWallet')}: ${shortenAddress(toAddress)}`}\n      endAdornment={\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n          <IconButton size=\"small\" onClick={handleCopy} sx={{ p: 0.5 }}>\n            <ContentCopyRounded sx={{ fontSize: 16 }} />\n          </IconButton>\n          {addressLink ? (\n            <ExternalLink\n              href={addressLink}\n              target=\"_blank\"\n              rel=\"nofollow noreferrer\"\n            >\n              <OpenInNew sx={{ fontSize: 16 }} />\n            </ExternalLink>\n          ) : undefined}\n        </Box>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,mBAAmD,EAC9D,WACA,gBACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,mBAAmB,YAAY;CACvC,MAAM,cAAc,eAAe,WAAW,SAAS;CAEvD,MAAM,cAAc,MAAkB;EACpC,EAAE,gBAAgB;EAClB,UAAU,UAAU,UAAU,SAAS;CACzC;CAEA,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,QAAD;GAAQ,OAAM;GAAU,IAAI,EAAE,UAAU,GAAG;EAAI,CAAA,EAC/B,CAAA;EAEpB,SAAS,GAAG,EAAE,mBAAmB,EAAE,IAAI,eAAe,SAAS;EAC/D,cACE,qBAAC,KAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,YAAY;IAAU,KAAK;GAAI;aAA3D,CACE,oBAAC,YAAD;IAAY,MAAK;IAAQ,SAAS;IAAY,IAAI,EAAE,GAAG,GAAI;cACzD,oBAAC,oBAAD,EAAoB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACjC,CAAA,GACX,cACC,oBAAC,cAAD;IACE,MAAM;IACN,QAAO;IACP,KAAI;cAEJ,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACtB,CAAA,IACZ,KAAA,CACD;;CAER,CAAA;AAEL"}

package/dist/esm/components/StepActions/SentToWalletRow.style.js

@@ -0,0 +1,26 @@
+import { Box, Link, styled } from "@mui/material";
+//#region src/components/StepActions/SentToWalletRow.style.tsx
+const ActionIconCircle = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: 24,
+	height: 24,
+	borderRadius: "50%",
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`
+}));
+const ExternalLink = styled(Link)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: 24,
+	height: 24,
+	borderRadius: "50%",
+	textDecoration: "none",
+	color: theme.vars.palette.text.primary,
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
+}));
+//#endregion
+export { ActionIconCircle, ExternalLink };
+
+//# sourceMappingURL=SentToWalletRow.style.js.map

package/dist/esm/components/StepActions/SentToWalletRow.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SentToWalletRow.style.js","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.style.tsx"],"sourcesContent":["import { Box, Link, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24,\n    height: 24,\n    borderRadius: '50%',\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`,\n  }))\n\nexport const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(\n  Link\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 24,\n  height: 24,\n  borderRadius: '50%',\n  textDecoration: 'none',\n  color: theme.vars.palette.text.primary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,WAAW,MAAM;AACrH,EAAE;AAEJ,MAAa,eAA4D,OACvE,IACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE"}

package/dist/esm/components/StepActions/StepActionRow.js

@@ -0,0 +1,27 @@
+import { useActionMessage } from "../../hooks/useActionMessage.js";
+import { ActionRow } from "../ActionRow/ActionRow.js";
+import { IconCircle } from "../IconCircle/IconCircle.js";
+import { ExternalLink } from "./StepActionRow.style.js";
+import { jsx } from "react/jsx-runtime";
+import OpenInNew from "@mui/icons-material/OpenInNew";
+//#region src/components/StepActions/StepActionRow.tsx
+const StepActionRow = ({ step, action, href, defaultLabelsOnly }) => {
+	const { title } = useActionMessage(step, action, defaultLabelsOnly);
+	return /* @__PURE__ */ jsx(ActionRow, {
+		startAdornment: /* @__PURE__ */ jsx(IconCircle, {
+			status: action?.status === "FAILED" ? "error" : "success",
+			size: 24
+		}),
+		message: title ?? "",
+		endAdornment: /* @__PURE__ */ jsx(ExternalLink, {
+			href,
+			target: "_blank",
+			rel: "nofollow noreferrer",
+			children: /* @__PURE__ */ jsx(OpenInNew, { sx: { fontSize: 16 } })
+		})
+	});
+};
+//#endregion
+export { StepActionRow };
+
+//# sourceMappingURL=StepActionRow.js.map

package/dist/esm/components/StepActions/StepActionRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepActionRow.js","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.tsx"],"sourcesContent":["import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport type React from 'react'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { ExternalLink } from './StepActionRow.style.js'\n\nexport const StepActionRow: React.FC<{\n  step: LiFiStepExtended\n  action: ExecutionAction\n  href: string\n  defaultLabelsOnly?: boolean\n}> = ({ step, action, href, defaultLabelsOnly }) => {\n  const { title } = useActionMessage(step, action, defaultLabelsOnly)\n  const isFailed = action?.status === 'FAILED'\n  return (\n    <ActionRow\n      startAdornment={\n        <IconCircle status={isFailed ? 'error' : 'success'} size={24} />\n      }\n      message={title ?? ''}\n      endAdornment={\n        <ExternalLink href={href} target=\"_blank\" rel=\"nofollow noreferrer\">\n          <OpenInNew sx={{ fontSize: 16 }} />\n        </ExternalLink>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;AAQA,MAAa,iBAKP,EAAE,MAAM,QAAQ,MAAM,wBAAwB;CAClD,MAAM,EAAE,UAAU,iBAAiB,MAAM,QAAQ,iBAAiB;CAElE,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,YAAD;GAAY,QAJD,QAAQ,WAAW,WAIC,UAAU;GAAW,MAAM;EAAK,CAAA;EAEjE,SAAS,SAAS;EAClB,cACE,oBAAC,cAAD;GAAoB;GAAM,QAAO;GAAS,KAAI;aAC5C,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;EACtB,CAAA;CAEjB,CAAA;AAEL"}

package/dist/esm/components/StepActions/StepActionRow.style.js

@@ -0,0 +1,17 @@
+import { Link, styled } from "@mui/material";
+//#region src/components/StepActions/StepActionRow.style.tsx
+const ExternalLink = styled(Link)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: 24,
+	height: 24,
+	borderRadius: "50%",
+	textDecoration: "none",
+	color: theme.vars.palette.text.primary,
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
+}));
+//#endregion
+export { ExternalLink };
+
+//# sourceMappingURL=StepActionRow.style.js.map

package/dist/esm/components/StepActions/StepActionRow.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepActionRow.style.js","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.style.tsx"],"sourcesContent":["import { Link, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(\n  Link\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 24,\n  height: 24,\n  borderRadius: '50%',\n  textDecoration: 'none',\n  color: theme.vars.palette.text.primary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,eAA4D,OACvE,IACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE"}

package/dist/esm/components/StepActions/StepActionsList.js

@@ -0,0 +1,23 @@
+import { renderExecutionRow, useExecutionRows } from "./executionRows.js";
+import { Fragment } from "react";
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/StepActions/StepActionsList.tsx
+/** Non-animated list of completed execution step rows (transaction details view). */
+const StepActionsList = ({ route, toAddress }) => {
+	const rows = useExecutionRows(route, toAddress);
+	if (rows.length === 0) return null;
+	const lastActionIndex = rows.findLastIndex((r) => r.kind === "action");
+	return /* @__PURE__ */ jsx(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1.5
+		},
+		children: rows.map((row, index) => /* @__PURE__ */ jsx(Fragment, { children: renderExecutionRow(row, index === lastActionIndex) }, row.kind === "action" ? `${row.step.id}-${row.action.type}-${index}` : `wallet-${row.toChainId}`))
+	});
+};
+//#endregion
+export { StepActionsList };
+
+//# sourceMappingURL=StepActionsList.js.map

package/dist/esm/components/StepActions/StepActionsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepActionsList.js","names":[],"sources":["../../../../src/components/StepActions/StepActionsList.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { Fragment } from 'react'\nimport { renderExecutionRow, useExecutionRows } from './executionRows.js'\n\ninterface StepActionsListProps {\n  route: RouteExtended\n  toAddress?: string\n}\n\n/** Non-animated list of completed execution step rows (transaction details view). */\nexport const StepActionsList: React.FC<StepActionsListProps> = ({\n  route,\n  toAddress,\n}) => {\n  const rows = useExecutionRows(route, toAddress)\n\n  if (rows.length === 0) {\n    return null\n  }\n\n  const lastActionIndex = rows.findLastIndex((r) => r.kind === 'action')\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      {rows.map((row, index) => (\n        <Fragment\n          key={\n            row.kind === 'action'\n              ? `${row.step.id}-${row.action.type}-${index}`\n              : `wallet-${row.toChainId}`\n          }\n        >\n          {renderExecutionRow(row, index === lastActionIndex)}\n        </Fragment>\n      ))}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAYA,MAAa,mBAAmD,EAC9D,OACA,gBACI;CACJ,MAAM,OAAO,iBAAiB,OAAO,SAAS;CAE9C,IAAI,KAAK,WAAW,GAClB,OAAO;CAGT,MAAM,kBAAkB,KAAK,eAAe,MAAM,EAAE,SAAS,QAAQ;CAErE,OACE,oBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;YAC3D,KAAK,KAAK,KAAK,UACd,oBAAC,UAAD,EAAA,UAOG,mBAAmB,KAAK,UAAU,eAAe,EAC1C,GANN,IAAI,SAAS,WACT,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,OAAO,KAAK,GAAG,UACrC,UAAU,IAAI,WAIZ,CACX;CACE,CAAA;AAET"}

package/dist/esm/components/StepActions/executionRows.js

@@ -0,0 +1,67 @@
+import { useExplorer } from "../../hooks/useExplorer.js";
+import { prepareActions } from "../../utils/prepareActions.js";
+import { SentToWalletRow } from "./SentToWalletRow.js";
+import { StepActionRow } from "./StepActionRow.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/StepActions/executionRows.tsx
+/**
+* The rows to display for a route: every `DONE`/`FAILED` action that has a
+* transaction link, plus a wallet row when `toAddress` is set. Shared by the
+* static step lists and the animated checklist.
+*/
+function useExecutionRows(route, toAddress) {
+	const { getTransactionLink } = useExplorer();
+	return useMemo(() => {
+		const rows = [];
+		for (const step of route.steps) {
+			const groups = prepareActions(step.execution?.actions ?? []);
+			for (const group of groups) {
+				const action = group.at(-1);
+				if (!action) continue;
+				if (!(action.status === "DONE" || action.status === "FAILED")) continue;
+				const href = getTransactionLink({
+					txHash: action.txHash,
+					txLink: action.txLink,
+					chain: action.chainId
+				});
+				if (!href) continue;
+				rows.push({
+					kind: "action",
+					step,
+					action,
+					href
+				});
+			}
+		}
+		if (toAddress) rows.push({
+			kind: "wallet",
+			toAddress,
+			toChainId: route.toChainId
+		});
+		return rows;
+	}, [
+		route,
+		toAddress,
+		getTransactionLink
+	]);
+}
+/**
+* Renders an {@link ExecutionRow} as the appropriate row component.
+* Callers are responsible for React keys on the returned node.
+*/
+function renderExecutionRow(row, isLast) {
+	return row.kind === "action" ? /* @__PURE__ */ jsx(StepActionRow, {
+		step: row.step,
+		action: row.action,
+		href: row.href,
+		defaultLabelsOnly: !isLast
+	}) : /* @__PURE__ */ jsx(SentToWalletRow, {
+		toAddress: row.toAddress,
+		toChainId: row.toChainId
+	});
+}
+//#endregion
+export { renderExecutionRow, useExecutionRows };
+
+//# sourceMappingURL=executionRows.js.map

package/dist/esm/components/StepActions/executionRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"executionRows.js","names":[],"sources":["../../../../src/components/StepActions/executionRows.tsx"],"sourcesContent":["import type {\n  ExecutionAction,\n  LiFiStepExtended,\n  RouteExtended,\n} from '@lifi/sdk'\nimport type { ReactNode } from 'react'\nimport { useMemo } from 'react'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { prepareActions } from '../../utils/prepareActions.js'\nimport { SentToWalletRow } from './SentToWalletRow.js'\nimport { StepActionRow } from './StepActionRow.js'\n\n/**\n * A row in an execution list: either a completed/failed action with an explorer\n * link, or the recipient wallet row appended when a route has a `toAddress`.\n */\nexport type ExecutionRow =\n  | {\n      kind: 'action'\n      step: LiFiStepExtended\n      action: ExecutionAction\n      href: string\n    }\n  | { kind: 'wallet'; toAddress: string; toChainId: number }\n\n/**\n * The rows to display for a route: every `DONE`/`FAILED` action that has a\n * transaction link, plus a wallet row when `toAddress` is set. Shared by the\n * static step lists and the animated checklist.\n */\nexport function useExecutionRows(\n  route: RouteExtended,\n  toAddress?: string\n): ExecutionRow[] {\n  const { getTransactionLink } = useExplorer()\n  return useMemo(() => {\n    const rows: ExecutionRow[] = []\n    for (const step of route.steps) {\n      const groups = prepareActions(step.execution?.actions ?? [])\n      for (const group of groups) {\n        const action = group.at(-1)\n        if (!action) {\n          continue\n        }\n        const isDoneOrFailed =\n          action.status === 'DONE' || action.status === 'FAILED'\n        if (!isDoneOrFailed) {\n          continue\n        }\n        const href = getTransactionLink({\n          txHash: action.txHash,\n          txLink: action.txLink,\n          chain: action.chainId,\n        })\n        if (!href) {\n          continue\n        }\n        rows.push({ kind: 'action', step, action, href })\n      }\n    }\n    if (toAddress) {\n      rows.push({ kind: 'wallet', toAddress, toChainId: route.toChainId })\n    }\n    return rows\n  }, [route, toAddress, getTransactionLink])\n}\n\n/**\n * Renders an {@link ExecutionRow} as the appropriate row component.\n * Callers are responsible for React keys on the returned node.\n */\nexport function renderExecutionRow(\n  row: ExecutionRow,\n  isLast: boolean\n): ReactNode {\n  return row.kind === 'action' ? (\n    <StepActionRow\n      step={row.step}\n      action={row.action}\n      href={row.href}\n      defaultLabelsOnly={!isLast}\n    />\n  ) : (\n    <SentToWalletRow toAddress={row.toAddress} toChainId={row.toChainId} />\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA8BA,SAAgB,iBACd,OACA,WACgB;CAChB,MAAM,EAAE,uBAAuB,YAAY;CAC3C,OAAO,cAAc;EACnB,MAAM,OAAuB,CAAC;EAC9B,KAAK,MAAM,QAAQ,MAAM,OAAO;GAC9B,MAAM,SAAS,eAAe,KAAK,WAAW,WAAW,CAAC,CAAC;GAC3D,KAAK,MAAM,SAAS,QAAQ;IAC1B,MAAM,SAAS,MAAM,GAAG,EAAE;IAC1B,IAAI,CAAC,QACH;IAIF,IAAI,EADF,OAAO,WAAW,UAAU,OAAO,WAAW,WAE9C;IAEF,MAAM,OAAO,mBAAmB;KAC9B,QAAQ,OAAO;KACf,QAAQ,OAAO;KACf,OAAO,OAAO;IAChB,CAAC;IACD,IAAI,CAAC,MACH;IAEF,KAAK,KAAK;KAAE,MAAM;KAAU;KAAM;KAAQ;IAAK,CAAC;GAClD;EACF;EACA,IAAI,WACF,KAAK,KAAK;GAAE,MAAM;GAAU;GAAW,WAAW,MAAM;EAAU,CAAC;EAErE,OAAO;CACT,GAAG;EAAC;EAAO;EAAW;CAAkB,CAAC;AAC3C;;;;;AAMA,SAAgB,mBACd,KACA,QACW;CACX,OAAO,IAAI,SAAS,WAClB,oBAAC,eAAD;EACE,MAAM,IAAI;EACV,QAAQ,IAAI;EACZ,MAAM,IAAI;EACV,mBAAmB,CAAC;CACrB,CAAA,IAED,oBAAC,iBAAD;EAAiB,WAAW,IAAI;EAAW,WAAW,IAAI;CAAY,CAAA;AAE1E"}

package/dist/esm/components/Switch.js

@@ -1,51 +1,47 @@
-import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material';
-export const Switch = styled(MuiSwitch)(({ theme }) => ({
-    width: 42,
-    height: 24,
-    padding: 0,
-    [`.${switchClasses.switchBase}`]: {
-        padding: 0,
-        margin: theme.spacing(0.25),
-        transitionDuration: theme.transitions.duration.standard,
-        [`&.${switchClasses.checked}`]: {
-            transform: 'translateX(18px)',
-            color: theme.vars.palette.common.white,
-            [`& + .${switchClasses.track}`]: {
-                backgroundColor: theme.vars.palette.primary.main,
-                opacity: 1,
-                border: 0,
-            },
-            [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
-                opacity: 0.5,
-            },
-        },
-        [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
-            color: theme.vars.palette.primary.main,
-            border: '6px solid',
-            borderColor: theme.vars.palette.common.white,
-        },
-        [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
-            color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
-        },
-        [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
-            opacity: 0.7,
-            ...theme.applyStyles('dark', {
-                opacity: 0.3,
-            }),
-        },
-    },
-    [`.${switchClasses.thumb}`]: {
-        boxSizing: 'border-box',
-        width: 20,
-        height: 20,
-    },
-    [`.${switchClasses.track}`]: {
-        borderRadius: 24 / 2,
-        opacity: 1,
-        transition: theme.transitions.create(['background-color'], {
-            duration: theme.transitions.duration.standard,
-        }),
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
-    },
+import { Switch, styled, switchClasses } from "@mui/material";
+//#region src/components/Switch.tsx
+const Switch$1 = styled(Switch)(({ theme }) => ({
+	width: 42,
+	height: 24,
+	padding: 0,
+	[`.${switchClasses.switchBase}`]: {
+		padding: 0,
+		margin: theme.spacing(.25),
+		transitionDuration: theme.transitions.duration.standard,
+		[`&.${switchClasses.checked}`]: {
+			transform: "translateX(18px)",
+			color: theme.vars.palette.common.white,
+			[`& + .${switchClasses.track}`]: {
+				backgroundColor: theme.vars.palette.primary.main,
+				opacity: 1,
+				border: 0
+			},
+			[`&.${switchClasses.disabled} + .${switchClasses.track}`]: { opacity: .5 }
+		},
+		[`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+			color: theme.vars.palette.primary.main,
+			border: "6px solid",
+			borderColor: theme.vars.palette.common.white
+		},
+		[`&.${switchClasses.disabled} .${switchClasses.thumb}`]: { color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)` },
+		[`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+			opacity: .7,
+			...theme.applyStyles("dark", { opacity: .3 })
+		}
+	},
+	[`.${switchClasses.thumb}`]: {
+		boxSizing: "border-box",
+		width: 20,
+		height: 20
+	},
+	[`.${switchClasses.track}`]: {
+		borderRadius: 24 / 2,
+		opacity: 1,
+		transition: theme.transitions.create(["background-color"], { duration: theme.transitions.duration.standard }),
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`
+	}
 }));
+//#endregion
+export { Switch$1 as Switch };
+
 //# sourceMappingURL=Switch.js.map