npm - @lifi/widget - Versions diffs - 4.0.0-beta.13 → 4.0.0-beta.17 - Mend

@lifi/widget 4.0.0-beta.13 → 4.0.0-beta.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (289) hide show

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

	@@ -1 +1 @@
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 { HiddenUI } 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 type { StepDetailsLabelProps } from '../StepActions/types.js'\nimport {\n StepActionsHeader,\n StepActionsTitle,\n StepLabelTypography,\n} from './StepActions.style.js'\n\nexport const StepActions: React.FC<{\n route: RouteExtended\n}> = ({ route }) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions, feeConfig, hiddenUI } =\n 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?.includes(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' && subvariant === 'custom' ? (\n <CustomStepDetailsLabel\n step={step}\n subvariant={subvariant}\n subvariantOptions={subvariantOptions}\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 subvariant,\n subvariantOptions,\n}) => {\n const { t } = useTranslation()\n\n if (!subvariant) {\n return null\n }\n\n // FIXME: step transaction request overrides step tool details, but not included step tool details\n const toolDetails =\n subvariant === 'custom' &&\n (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 (subvariant === 'custom' && subvariantOptions?.custom) \|\| '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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"}
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 { HiddenUI } 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 type { StepDetailsLabelProps } from '../StepActions/types.js'\nimport {\n StepActionsHeader,\n StepActionsTitle,\n StepLabelTypography,\n} from './StepActions.style.js'\n\nexport const StepActions: React.FC<{\n route: RouteExtended\n}> = ({ route }) => {\n const { t } = useTranslation()\n const { subvariant, subvariantOptions, feeConfig, hiddenUI } =\n 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?.includes(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' && subvariant === 'custom' ? (\n <CustomStepDetailsLabel\n step={step}\n subvariant={subvariant}\n subvariantOptions={subvariantOptions}\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 subvariant,\n subvariantOptions,\n}) => {\n const { t } = useTranslation()\n\n if (!subvariant) {\n return null\n }\n\n // FIXME: step transaction request overrides step tool details, but not included step tool details\n const toolDetails =\n subvariant === 'custom' &&\n (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 (subvariant === 'custom' && subvariantOptions?.custom) \|\| '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/StepActions/StepActions.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { useAvailableChains } from "../../hooks/useAvailableChains.js";
 import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
 import { CardIconButton } from "../Card/CardIconButton.js";
@@ -77,7 +77,7 @@ const IncludedSteps = ({ step }) => {
 	const { subvariant, subvariantOptions, feeConfig, hiddenUI } = useWidgetConfig();
 	const { isGaslessStep } = useEthereumContext();
 	let includedSteps = step.includedSteps;
-	if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {
+	if (hiddenUI?.includes("integratorStepDetails")) {
 		const feeCollectionStep = includedSteps.find((step) => step.tool === "feeCollection");
 		if (feeCollectionStep) {
 			includedSteps = structuredClone(includedSteps.filter((step) => step.tool !== "feeCollection"));

package/dist/esm/components/StepActions/StepActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepActions.js","names":["StepConnector","MuiStep","StepLabel"],"sources":["../../../../src/components/StepActions/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport type { StepIconProps } from '@mui/material'\nimport {\n Badge,\n Box,\n Collapse,\n Step as MuiStep,\n Stepper,\n Typography,\n} from '@mui/material'\nimport type { MouseEventHandler } from 'react'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { lifiLogoUrl } from '../../icons/lifi.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n StepAvatar,\n StepConnector,\n StepContent,\n StepLabel,\n StepLabelTypography,\n} from './StepActions.style.js'\nimport type {\n IncludedStepsProps,\n StepActionsProps,\n StepDetailsLabelProps,\n} from './types.js'\n\nexport const StepActions: React.FC<StepActionsProps> = ({\n step,\n dense,\n ...other\n}) => {\n const { t } = useTranslation()\n const { subvariant } = useWidgetConfig()\n const [cardExpanded, setCardExpanded] = useState(false)\n\n const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n setCardExpanded((expanded) => !expanded)\n }\n\n // FIXME: step transaction request overrides step tool details, but not included step tool details\n const toolDetails =\n subvariant === 'custom'\n ? step.includedSteps.find(\n (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n )?.toolDetails \|\| step.toolDetails\n : step.toolDetails\n\n return (\n <Box {...other}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={<SmallAvatar src={lifiLogoUrl} />}\n >\n <StepAvatar\n variant=\"circular\"\n src={toolDetails.logoURI ?? lifiLogoUrl}\n alt={toolDetails.name}\n >\n {toolDetails.name[0]}\n </StepAvatar>\n </Badge>\n <Box\n sx={{\n flex: 1,\n }}\n >\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 600,\n lineHeight: 1.3334,\n ml: 2,\n }}\n >\n {toolDetails.name?.includes('LI.FI')\n ? toolDetails.name\n : t('main.stepDetails', {\n tool: toolDetails.name,\n })}\n </Typography>\n {/* <StepFees ml={2} step={step} /> */}\n </Box>\n {dense ? (\n <CardIconButton onClick={handleExpand} size=\"small\">\n {cardExpanded ? (\n <ExpandLess fontSize=\"inherit\" />\n ) : (\n <ExpandMore fontSize=\"inherit\" />\n )}\n </CardIconButton>\n ) : null}\n </Box>\n {dense ? (\n <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n <IncludedSteps step={step} />\n </Collapse>\n ) : (\n <IncludedSteps step={step} />\n )}\n </Box>\n )\n}\n\nconst IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {\n const { subvariant, subvariantOptions, feeConfig, hiddenUI } =\n useWidgetConfig()\n const { isGaslessStep } = useEthereumContext()\n\n let includedSteps = step.includedSteps\n if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {\n const feeCollectionStep = includedSteps.find(\n (step) => step.tool === 'feeCollection'\n )\n if (feeCollectionStep) {\n includedSteps = structuredClone(\n includedSteps.filter((step) => step.tool !== 'feeCollection')\n )\n includedSteps[0].estimate.fromAmount =\n feeCollectionStep.estimate.fromAmount\n }\n }\n\n // biome-ignore lint/correctness/noNestedComponentDefinitions: part of the flow\n const StepIconComponent = ({ icon }: StepIconProps) => {\n const includedStep = includedSteps?.[Number(icon) - 1]\n const feeCollectionStep =\n includedStep?.type === 'protocol' &&\n includedStep?.tool === 'feeCollection'\n const toolName =\n feeCollectionStep && feeConfig?.name\n ? feeConfig?.name\n : includedStep?.toolDetails.name\n const toolLogoURI =\n feeCollectionStep && feeConfig?.logoURI\n ? feeConfig?.logoURI\n : includedStep?.toolDetails.logoURI\n return toolLogoURI ? (\n <SmallAvatar\n src={toolLogoURI}\n alt={toolName}\n sx={{ width: 20, height: 20 }}\n >\n {toolName?.[0]}\n </SmallAvatar>\n ) : null\n }\n\n const hasGaslessSupport = !!isGaslessStep?.(step)\n\n return (\n <Box\n sx={{\n mt: 1,\n }}\n >\n <Stepper\n orientation=\"vertical\"\n connector={<StepConnector />}\n activeStep={-1}\n >\n {includedSteps.map((step, i, includedSteps) => (\n <MuiStep key={step.id} expanded>\n <StepLabel\n slots={{\n stepIcon: StepIconComponent,\n }}\n >\n {step.type === 'custom' && subvariant === 'custom' ? (\n <CustomStepDetailsLabel\n step={step}\n subvariant={subvariant}\n subvariantOptions={subvariantOptions}\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 </StepLabel>\n <StepContent last={i === includedSteps.length - 1}>\n <StepDetailsContent step={step} />\n </StepContent>\n </MuiStep>\n ))}\n </Stepper>\n </Box>\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 <Typography\n sx={{\n fontSize: 12,\n lineHeight: 1,\n fontWeight: '500',\n color: 'text.secondary',\n alignItems: 'center',\n display: 'flex',\n }}\n >\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 </Typography>\n )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n step,\n subvariant,\n subvariantOptions,\n}) => {\n const { t } = useTranslation()\n\n if (!subvariant) {\n return null\n }\n\n // FIXME: step transaction request overrides step tool details, but not included step tool details\n const toolDetails =\n subvariant === 'custom' &&\n (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 (subvariant === 'custom' && subvariantOptions?.custom) \|\| '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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"}
1	+ {"version":3,"file":"StepActions.js","names":["StepConnector","MuiStep","StepLabel"],"sources":["../../../../src/components/StepActions/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport type { StepIconProps } from '@mui/material'\nimport {\n Badge,\n Box,\n Collapse,\n Step as MuiStep,\n Stepper,\n Typography,\n} from '@mui/material'\nimport type { MouseEventHandler } from 'react'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { lifiLogoUrl } from '../../icons/lifi.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n StepAvatar,\n StepConnector,\n StepContent,\n StepLabel,\n StepLabelTypography,\n} from './StepActions.style.js'\nimport type {\n IncludedStepsProps,\n StepActionsProps,\n StepDetailsLabelProps,\n} from './types.js'\n\nexport const StepActions: React.FC<StepActionsProps> = ({\n step,\n dense,\n ...other\n}) => {\n const { t } = useTranslation()\n const { subvariant } = useWidgetConfig()\n const [cardExpanded, setCardExpanded] = useState(false)\n\n const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n setCardExpanded((expanded) => !expanded)\n }\n\n // FIXME: step transaction request overrides step tool details, but not included step tool details\n const toolDetails =\n subvariant === 'custom'\n ? step.includedSteps.find(\n (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n )?.toolDetails \|\| step.toolDetails\n : step.toolDetails\n\n return (\n <Box {...other}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={<SmallAvatar src={lifiLogoUrl} />}\n >\n <StepAvatar\n variant=\"circular\"\n src={toolDetails.logoURI ?? lifiLogoUrl}\n alt={toolDetails.name}\n >\n {toolDetails.name[0]}\n </StepAvatar>\n </Badge>\n <Box\n sx={{\n flex: 1,\n }}\n >\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 600,\n lineHeight: 1.3334,\n ml: 2,\n }}\n >\n {toolDetails.name?.includes('LI.FI')\n ? toolDetails.name\n : t('main.stepDetails', {\n tool: toolDetails.name,\n })}\n </Typography>\n {/* <StepFees ml={2} step={step} /> */}\n </Box>\n {dense ? (\n <CardIconButton onClick={handleExpand} size=\"small\">\n {cardExpanded ? (\n <ExpandLess fontSize=\"inherit\" />\n ) : (\n <ExpandMore fontSize=\"inherit\" />\n )}\n </CardIconButton>\n ) : null}\n </Box>\n {dense ? (\n <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n <IncludedSteps step={step} />\n </Collapse>\n ) : (\n <IncludedSteps step={step} />\n )}\n </Box>\n )\n}\n\nconst IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {\n const { subvariant, subvariantOptions, feeConfig, hiddenUI } =\n useWidgetConfig()\n const { isGaslessStep } = useEthereumContext()\n\n let includedSteps = step.includedSteps\n if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {\n const feeCollectionStep = includedSteps.find(\n (step) => step.tool === 'feeCollection'\n )\n if (feeCollectionStep) {\n includedSteps = structuredClone(\n includedSteps.filter((step) => step.tool !== 'feeCollection')\n )\n includedSteps[0].estimate.fromAmount =\n feeCollectionStep.estimate.fromAmount\n }\n }\n\n // biome-ignore lint/correctness/noNestedComponentDefinitions: part of the flow\n const StepIconComponent = ({ icon }: StepIconProps) => {\n const includedStep = includedSteps?.[Number(icon) - 1]\n const feeCollectionStep =\n includedStep?.type === 'protocol' &&\n includedStep?.tool === 'feeCollection'\n const toolName =\n feeCollectionStep && feeConfig?.name\n ? feeConfig?.name\n : includedStep?.toolDetails.name\n const toolLogoURI =\n feeCollectionStep && feeConfig?.logoURI\n ? feeConfig?.logoURI\n : includedStep?.toolDetails.logoURI\n return toolLogoURI ? (\n <SmallAvatar\n src={toolLogoURI}\n alt={toolName}\n sx={{ width: 20, height: 20 }}\n >\n {toolName?.[0]}\n </SmallAvatar>\n ) : null\n }\n\n const hasGaslessSupport = !!isGaslessStep?.(step)\n\n return (\n <Box\n sx={{\n mt: 1,\n }}\n >\n <Stepper\n orientation=\"vertical\"\n connector={<StepConnector />}\n activeStep={-1}\n >\n {includedSteps.map((step, i, includedSteps) => (\n <MuiStep key={step.id} expanded>\n <StepLabel\n slots={{\n stepIcon: StepIconComponent,\n }}\n >\n {step.type === 'custom' && subvariant === 'custom' ? (\n <CustomStepDetailsLabel\n step={step}\n subvariant={subvariant}\n subvariantOptions={subvariantOptions}\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 </StepLabel>\n <StepContent last={i === includedSteps.length - 1}>\n <StepDetailsContent step={step} />\n </StepContent>\n </MuiStep>\n ))}\n </Stepper>\n </Box>\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 <Typography\n sx={{\n fontSize: 12,\n lineHeight: 1,\n fontWeight: '500',\n color: 'text.secondary',\n alignItems: 'center',\n display: 'flex',\n }}\n >\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 </Typography>\n )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n step,\n subvariant,\n subvariantOptions,\n}) => {\n const { t } = useTranslation()\n\n if (!subvariant) {\n return null\n }\n\n // FIXME: step transaction request overrides step tool details, but not included step tool details\n const toolDetails =\n subvariant === 'custom' &&\n (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 (subvariant === 'custom' && subvariantOptions?.custom) \|\| '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/StepActions/StepActions.style.js CHANGED Viewed

@@ -10,8 +10,8 @@ const StepConnector$1 = styled(StepConnector, { shouldForwardProp: (prop) => ![
 	[`.${stepConnectorClasses.line}`]: {
 		minHeight: 8,
 		borderLeftWidth: 2,
-		borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
-		...theme.applyStyles("dark", { borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)` })
+		borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
+		...theme.applyStyles("dark", { borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)` })
 	}
 }));
 const StepLabel$1 = styled(StepLabel, { shouldForwardProp: (prop) => ![
@@ -43,8 +43,8 @@ const StepLabelTypography = styled(Typography)(({ theme }) => ({
 const StepContent = styled(Box, { shouldForwardProp: (prop) => !["last"].includes(prop) })(({ theme }) => ({
 	margin: theme.spacing(0, 0, 0, 2.375),
 	paddingLeft: theme.spacing(4.375),
-	borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
-	...theme.applyStyles("dark", { borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)` }),
+	borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
+	...theme.applyStyles("dark", { borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)` }),
 	variants: [{
 		props: ({ last }) => last,
 		style: {

package/dist/esm/components/StepActions/StepActions.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepActions.style.js","names":["StepConnector","MuiStepConnector","StepLabel","MuiStepLabel"],"sources":["../../../../src/components/StepActions/StepActions.style.tsx"],"sourcesContent":["import {\n Box,\n StepConnector as MuiStepConnector,\n StepLabel as MuiStepLabel,\n stepConnectorClasses,\n stepLabelClasses,\n styled,\n Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\n\nexport const StepConnector: React.FC<\n React.ComponentProps<typeof MuiStepConnector> & { last?: boolean }\n> = styled(MuiStepConnector, {\n shouldForwardProp: (prop) =>\n !['active', 'completed', 'error'].includes(prop as string),\n})(({ theme }) => ({\n marginLeft: theme.spacing(2.375),\n [`.${stepConnectorClasses.line}`]: {\n minHeight: 8,\n borderLeftWidth: 2,\n borderColor: `~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.12~~)`,\n ...theme.applyStyles('dark', {\n borderColor: `~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.16~~)`,\n }),\n },\n}))\n\nexport const StepLabel: React.FC<\n React.ComponentProps<typeof MuiStepLabel> & { last?: boolean }\n> = styled(MuiStepLabel, {\n shouldForwardProp: (prop) =>\n !['active', 'completed', 'error', 'disabled'].includes(prop as string),\n})(({ theme }) => ({\n padding: 0,\n alignItems: 'center',\n [`.${stepLabelClasses.iconContainer}`]: {\n paddingLeft: theme.spacing(1.25),\n paddingRight: theme.spacing(3.25),\n },\n [`.${stepLabelClasses.labelContainer}`]: {\n minHeight: 24,\n display: 'flex',\n alignItems: 'center',\n },\n [`&.${stepLabelClasses.disabled}`]: {\n cursor: 'inherit',\n },\n}))\n\nexport const StepLabelTypography: React.FC<\n React.ComponentProps<typeof Typography> & { last?: boolean }\n> = styled(Typography)(({ theme }) => ({\n fontSize: 12,\n fontWeight: 500,\n lineHeight: 1.325,\n color: theme.vars.palette.text.secondary,\n padding: theme.spacing(0.5, 0),\n}))\n\nexport const StepContent: React.FC<\n React.ComponentProps<typeof Box> & { last?: boolean }\n> = styled(Box, {\n shouldForwardProp: (prop) => !['last'].includes(prop as string),\n})<{ last?: boolean }>(({ theme }) => ({\n margin: theme.spacing(0, 0, 0, 2.375),\n paddingLeft: theme.spacing(4.375),\n borderLeft: `2px solid ~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.12~~)`,\n ...theme.applyStyles('dark', {\n borderLeft: `2px solid ~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.16~~)`,\n }),\n variants: [\n {\n props: ({ last }) => last,\n style: {\n borderLeft: 'none',\n paddingLeft: theme.spacing(4.625),\n },\n },\n ],\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"],"mappings":";;;AAYA,MAAaA,kBAET,OAAOC,eAAkB,EAC3B,oBAAoB,SAClB,CAAC;CAAC;CAAU;CAAa;CAAQ,CAAC,SAAS,KAAe,EAC7D,CAAC,EAAE,EAAE,aAAa;CACjB,YAAY,MAAM,QAAQ,MAAM;EAC/B,IAAI,qBAAqB,SAAS;EACjC,WAAW;EACX,iBAAiB;EACjB,aAAa,~~QAAQ~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~;~~EACnE~~,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,~~QAAQ~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~,~~WACpE~~,CAAC;EACH;CACF,EAAE;AAEH,MAAaC,cAET,OAAOC,WAAc,EACvB,oBAAoB,SAClB,CAAC;CAAC;CAAU;CAAa;CAAS;CAAW,CAAC,SAAS,KAAe,EACzE,CAAC,EAAE,EAAE,aAAa;CACjB,SAAS;CACT,YAAY;EACX,IAAI,iBAAiB,kBAAkB;EACtC,aAAa,MAAM,QAAQ,KAAK;EAChC,cAAc,MAAM,QAAQ,KAAK;EAClC;EACA,IAAI,iBAAiB,mBAAmB;EACvC,WAAW;EACX,SAAS;EACT,YAAY;EACb;EACA,KAAK,iBAAiB,aAAa,EAClC,QAAQ,WACT;CACF,EAAE;AAEH,MAAa,sBAET,OAAO,WAAW,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,IAAK,EAAE;CAC/B,EAAE;AAEH,MAAa,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,CAAC,CAAC,OAAO,CAAC,SAAS,KAAe,EAChE,CAAC,EAAsB,EAAE,aAAa;CACrC,QAAQ,MAAM,QAAQ,GAAG,GAAG,GAAG,MAAM;CACrC,aAAa,MAAM,QAAQ,MAAM;CACjC,YAAY,~~kBAAkB~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~;~~CAC5E~~,GAAG,MAAM,YAAY,QAAQ,EAC3B,YAAY,~~kBAAkB~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~,~~WAC7E~~,CAAC;CACF,UAAU,CACR;EACE,QAAQ,EAAE,WAAW;EACrB,OAAO;GACL,YAAY;GACZ,aAAa,MAAM,QAAQ,MAAM;GAClC;EACF,CACF;CACF,EAAE;AAEH,MAAa,aACX,OAAO,aAAa,EAAE,EAAE,aAAa;CACnC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB;CAClB,EAAE"}
1	+ {"version":3,"file":"StepActions.style.js","names":["StepConnector","MuiStepConnector","StepLabel","MuiStepLabel"],"sources":["../../../../src/components/StepActions/StepActions.style.tsx"],"sourcesContent":["import {\n Box,\n StepConnector as MuiStepConnector,\n StepLabel as MuiStepLabel,\n stepConnectorClasses,\n stepLabelClasses,\n styled,\n Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\n\nexport const StepConnector: React.FC<\n React.ComponentProps<typeof MuiStepConnector> & { last?: boolean }\n> = styled(MuiStepConnector, {\n shouldForwardProp: (prop) =>\n !['active', 'completed', 'error'].includes(prop as string),\n})(({ theme }) => ({\n marginLeft: theme.spacing(2.375),\n [`.${stepConnectorClasses.line}`]: {\n minHeight: 8,\n borderLeftWidth: 2,\n borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n ...theme.applyStyles('dark', {\n borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n }),\n },\n}))\n\nexport const StepLabel: React.FC<\n React.ComponentProps<typeof MuiStepLabel> & { last?: boolean }\n> = styled(MuiStepLabel, {\n shouldForwardProp: (prop) =>\n !['active', 'completed', 'error', 'disabled'].includes(prop as string),\n})(({ theme }) => ({\n padding: 0,\n alignItems: 'center',\n [`.${stepLabelClasses.iconContainer}`]: {\n paddingLeft: theme.spacing(1.25),\n paddingRight: theme.spacing(3.25),\n },\n [`.${stepLabelClasses.labelContainer}`]: {\n minHeight: 24,\n display: 'flex',\n alignItems: 'center',\n },\n [`&.${stepLabelClasses.disabled}`]: {\n cursor: 'inherit',\n },\n}))\n\nexport const StepLabelTypography: React.FC<\n React.ComponentProps<typeof Typography> & { last?: boolean }\n> = styled(Typography)(({ theme }) => ({\n fontSize: 12,\n fontWeight: 500,\n lineHeight: 1.325,\n color: theme.vars.palette.text.secondary,\n padding: theme.spacing(0.5, 0),\n}))\n\nexport const StepContent: React.FC<\n React.ComponentProps<typeof Box> & { last?: boolean }\n> = styled(Box, {\n shouldForwardProp: (prop) => !['last'].includes(prop as string),\n})<{ last?: boolean }>(({ theme }) => ({\n margin: theme.spacing(0, 0, 0, 2.375),\n paddingLeft: theme.spacing(4.375),\n borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n ...theme.applyStyles('dark', {\n borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n }),\n variants: [\n {\n props: ({ last }) => last,\n style: {\n borderLeft: 'none',\n paddingLeft: theme.spacing(4.625),\n },\n },\n ],\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"],"mappings":";;;AAYA,MAAaA,kBAET,OAAOC,eAAkB,EAC3B,oBAAoB,SAClB,CAAC;CAAC;CAAU;CAAa;CAAQ,CAAC,SAAS,KAAe,EAC7D,CAAC,EAAE,EAAE,aAAa;CACjB,YAAY,MAAM,QAAQ,MAAM;EAC/B,IAAI,qBAAqB,SAAS;EACjC,WAAW;EACX,iBAAiB;EACjB,aAAa,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC1E,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBAC3E,CAAC;EACH;CACF,EAAE;AAEH,MAAaC,cAET,OAAOC,WAAc,EACvB,oBAAoB,SAClB,CAAC;CAAC;CAAU;CAAa;CAAS;CAAW,CAAC,SAAS,KAAe,EACzE,CAAC,EAAE,EAAE,aAAa;CACjB,SAAS;CACT,YAAY;EACX,IAAI,iBAAiB,kBAAkB;EACtC,aAAa,MAAM,QAAQ,KAAK;EAChC,cAAc,MAAM,QAAQ,KAAK;EAClC;EACA,IAAI,iBAAiB,mBAAmB;EACvC,WAAW;EACX,SAAS;EACT,YAAY;EACb;EACA,KAAK,iBAAiB,aAAa,EAClC,QAAQ,WACT;CACF,EAAE;AAEH,MAAa,sBAET,OAAO,WAAW,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,IAAK,EAAE;CAC/B,EAAE;AAEH,MAAa,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,CAAC,CAAC,OAAO,CAAC,SAAS,KAAe,EAChE,CAAC,EAAsB,EAAE,aAAa;CACrC,QAAQ,MAAM,QAAQ,GAAG,GAAG,GAAG,MAAM;CACrC,aAAa,MAAM,QAAQ,MAAM;CACjC,YAAY,gCAAgC,MAAM,KAAK,QAAQ,OAAO,aAAa;CACnF,GAAG,MAAM,YAAY,QAAQ,EAC3B,YAAY,gCAAgC,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACpF,CAAC;CACF,UAAU,CACR;EACE,QAAQ,EAAE,WAAW;EACrB,OAAO;GACL,YAAY;GACZ,aAAa,MAAM,QAAQ,MAAM;GAClC;EACF,CACF;CACF,EAAE;AAEH,MAAa,aACX,OAAO,aAAa,EAAE,EAAE,aAAa;CACnC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB;CAClB,EAAE"}

package/dist/esm/components/Switch.js CHANGED Viewed

@@ -23,7 +23,7 @@ const Switch$1 = styled(Switch)(({ theme }) => ({
 			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.thumb}`]: { color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)` },
 		[`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
 			opacity: .7,
 			...theme.applyStyles("dark", { opacity: .3 })
@@ -38,7 +38,7 @@ const Switch$1 = styled(Switch)(({ theme }) => ({
 		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)`
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`
 	}
 }));
 //#endregion

package/dist/esm/components/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","names":["Switch","MuiSwitch"],"sources":["../../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'\nimport type React from 'react'\n\nexport const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(\n MuiSwitch\n)(({ theme }) => ({\n width: 42,\n height: 24,\n padding: 0,\n [`.${switchClasses.switchBase}`]: {\n padding: 0,\n margin: theme.spacing(0.25),\n transitionDuration: theme.transitions.duration.standard,\n [`&.${switchClasses.checked}`]: {\n transform: 'translateX(18px)',\n color: theme.vars.palette.common.white,\n [`& + .${switchClasses.track}`]: {\n backgroundColor: theme.vars.palette.primary.main,\n opacity: 1,\n border: 0,\n },\n [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n opacity: 0.5,\n },\n },\n [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n color: theme.vars.palette.primary.main,\n border: '6px solid',\n borderColor: theme.vars.palette.common.white,\n },\n [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {\n color: `~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.12~~)`,\n },\n [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n opacity: 0.7,\n ...theme.applyStyles('dark', {\n opacity: 0.3,\n }),\n },\n },\n [`.${switchClasses.thumb}`]: {\n boxSizing: 'border-box',\n width: 20,\n height: 20,\n },\n [`.${switchClasses.track}`]: {\n borderRadius: 24 / 2,\n opacity: 1,\n transition: theme.transitions.create(['background-color'], {\n duration: theme.transitions.duration.standard,\n }),\n backgroundColor: `~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.16~~)`,\n },\n}))\n"],"mappings":";;AAGA,MAAaA,WAA2D,OACtEC,OACD,EAAE,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,IAAK;EAC3B,oBAAoB,MAAM,YAAY,SAAS;GAC9C,KAAK,cAAc,YAAY;GAC9B,WAAW;GACX,OAAO,MAAM,KAAK,QAAQ,OAAO;IAChC,QAAQ,cAAc,UAAU;IAC/B,iBAAiB,MAAM,KAAK,QAAQ,QAAQ;IAC5C,SAAS;IACT,QAAQ;IACT;IACA,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,IACV;GACF;GACA,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;GACxC;GACA,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,~~QAAQ~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~,~~WAC9D~~;GACA,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,IACV,CAAC;GACH;EACF;EACA,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;EACT;EACA,IAAI,cAAc,UAAU;EAC3B,cAAc,KAAK;EACnB,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,mBAAmB,EAAE,EACzD,UAAU,MAAM,YAAY,SAAS,UACtC,CAAC;EACF,iBAAiB,~~QAAQ~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~;~~EACxE~~;CACF,EAAE"}
1	+ {"version":3,"file":"Switch.js","names":["Switch","MuiSwitch"],"sources":["../../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'\nimport type React from 'react'\n\nexport const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(\n MuiSwitch\n)(({ theme }) => ({\n width: 42,\n height: 24,\n padding: 0,\n [`.${switchClasses.switchBase}`]: {\n padding: 0,\n margin: theme.spacing(0.25),\n transitionDuration: theme.transitions.duration.standard,\n [`&.${switchClasses.checked}`]: {\n transform: 'translateX(18px)',\n color: theme.vars.palette.common.white,\n [`& + .${switchClasses.track}`]: {\n backgroundColor: theme.vars.palette.primary.main,\n opacity: 1,\n border: 0,\n },\n [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n opacity: 0.5,\n },\n },\n [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n color: theme.vars.palette.primary.main,\n border: '6px solid',\n borderColor: theme.vars.palette.common.white,\n },\n [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {\n color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n },\n [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n opacity: 0.7,\n ...theme.applyStyles('dark', {\n opacity: 0.3,\n }),\n },\n },\n [`.${switchClasses.thumb}`]: {\n boxSizing: 'border-box',\n width: 20,\n height: 20,\n },\n [`.${switchClasses.track}`]: {\n borderRadius: 24 / 2,\n opacity: 1,\n transition: theme.transitions.create(['background-color'], {\n duration: theme.transitions.duration.standard,\n }),\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n },\n}))\n"],"mappings":";;AAGA,MAAaA,WAA2D,OACtEC,OACD,EAAE,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,IAAK;EAC3B,oBAAoB,MAAM,YAAY,SAAS;GAC9C,KAAK,cAAc,YAAY;GAC9B,WAAW;GACX,OAAO,MAAM,KAAK,QAAQ,OAAO;IAChC,QAAQ,cAAc,UAAU;IAC/B,iBAAiB,MAAM,KAAK,QAAQ,QAAQ;IAC5C,SAAS;IACT,QAAQ;IACT;IACA,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,IACV;GACF;GACA,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;GACxC;GACA,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACrE;GACA,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,IACV,CAAC;GACH;EACF;EACA,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;EACT;EACA,IAAI,cAAc,UAAU;EAC3B,cAAc,KAAK;EACnB,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,mBAAmB,EAAE,EACzD,UAAU,MAAM,YAAY,SAAS,UACtC,CAAC;EACF,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC/E;CACF,EAAE"}

package/dist/esm/components/Tabs/NavigationTabs.js CHANGED Viewed

@@ -22,8 +22,8 @@ const NavigationTabs = styled(Tabs, {
 		height: "100%",
 		width: "100%",
 		borderRadius: theme.vars.shape.borderRadius,
-		backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-		...theme.applyStyles("dark", { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)` })
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+		...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` })
 	}
 }));
 const NavigationTab = styled(Tab$1, {

package/dist/esm/components/Tabs/NavigationTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationTabs.js","names":["Tab"],"sources":["../../../../src/components/Tabs/NavigationTabs.tsx"],"sourcesContent":["import { styled, Tabs, tabsClasses } from '@mui/material'\nimport type React from 'react'\nimport { Tab } from './Tabs.style.js'\n\nexport const NavigationTabs: React.FC<React.ComponentProps<typeof Tabs>> =\n styled(Tabs, {\n name: 'MuiNavigationTabs',\n slot: 'root',\n })(({ theme }) => ({\n overflow: 'visible', // Prevent shadows from being cut off\n width: 'fit-content',\n minHeight: theme.spacing(5),\n maxHeight: theme.spacing(5),\n background: 'transparent',\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n }),\n [`& .${tabsClasses.scroller}`]: {\n padding: 0,\n overflow: 'visible !important', // Enforce since overflow is set dynamically\n },\n [`& .${tabsClasses.indicator}`]: {\n boxShadow: 'none',\n top: 0,\n left: 0,\n height: '100%',\n width: '100%',\n borderRadius: theme.vars.shape.borderRadius,\n backgroundColor: `~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.04~~)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.08~~)`,\n }),\n },\n }))\n\nexport const NavigationTab: React.FC<React.ComponentProps<typeof Tab>> = styled(\n Tab,\n {\n name: 'MuiNavigationTab',\n slot: 'root',\n }\n)(({ theme }) => ({\n minHeight: theme.spacing(5),\n maxHeight: theme.spacing(5),\n}))\n"],"mappings":";;;AAIA,MAAa,iBACX,OAAO,MAAM;CACX,MAAM;CACN,MAAM;CACP,CAAC,EAAE,EAAE,aAAa;CACjB,UAAU;CACV,OAAO;CACP,WAAW,MAAM,QAAQ,EAAE;CAC3B,WAAW,MAAM,QAAQ,EAAE;CAC3B,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;EACD,MAAM,YAAY,aAAa;EAC9B,SAAS;EACT,UAAU;EACX;EACA,MAAM,YAAY,cAAc;EAC/B,WAAW;EACX,KAAK;EACL,MAAM;EACN,QAAQ;EACR,OAAO;EACP,cAAc,MAAM,KAAK,MAAM;EAC/B,iBAAiB,~~QAAQ~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~;~~EACvE~~,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,~~QAAQ~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~,~~WACxE~~,CAAC;EACH;CACF,EAAE;AAEL,MAAa,gBAA4D,OACvEA,OACA;CACE,MAAM;CACN,MAAM;CACP,CACF,EAAE,EAAE,aAAa;CAChB,WAAW,MAAM,QAAQ,EAAE;CAC3B,WAAW,MAAM,QAAQ,EAAE;CAC5B,EAAE"}
1	+ {"version":3,"file":"NavigationTabs.js","names":["Tab"],"sources":["../../../../src/components/Tabs/NavigationTabs.tsx"],"sourcesContent":["import { styled, Tabs, tabsClasses } from '@mui/material'\nimport type React from 'react'\nimport { Tab } from './Tabs.style.js'\n\nexport const NavigationTabs: React.FC<React.ComponentProps<typeof Tabs>> =\n styled(Tabs, {\n name: 'MuiNavigationTabs',\n slot: 'root',\n })(({ theme }) => ({\n overflow: 'visible', // Prevent shadows from being cut off\n width: 'fit-content',\n minHeight: theme.spacing(5),\n maxHeight: theme.spacing(5),\n background: 'transparent',\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n }),\n [`& .${tabsClasses.scroller}`]: {\n padding: 0,\n overflow: 'visible !important', // Enforce since overflow is set dynamically\n },\n [`& .${tabsClasses.indicator}`]: {\n boxShadow: 'none',\n top: 0,\n left: 0,\n height: '100%',\n width: '100%',\n borderRadius: theme.vars.shape.borderRadius,\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n }),\n },\n }))\n\nexport const NavigationTab: React.FC<React.ComponentProps<typeof Tab>> = styled(\n Tab,\n {\n name: 'MuiNavigationTab',\n slot: 'root',\n }\n)(({ theme }) => ({\n minHeight: theme.spacing(5),\n maxHeight: theme.spacing(5),\n}))\n"],"mappings":";;;AAIA,MAAa,iBACX,OAAO,MAAM;CACX,MAAM;CACN,MAAM;CACP,CAAC,EAAE,EAAE,aAAa;CACjB,UAAU;CACV,OAAO;CACP,WAAW,MAAM,QAAQ,EAAE;CAC3B,WAAW,MAAM,QAAQ,EAAE;CAC3B,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;EACD,MAAM,YAAY,aAAa;EAC9B,SAAS;EACT,UAAU;EACX;EACA,MAAM,YAAY,cAAc;EAC/B,WAAW;EACX,KAAK;EACL,MAAM;EACN,QAAQ;EACR,OAAO;EACP,cAAc,MAAM,KAAK,MAAM;EAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E,CAAC;EACH;CACF,EAAE;AAEL,MAAa,gBAA4D,OACvEA,OACA;CACE,MAAM;CACN,MAAM;CACP,CACF,EAAE,EAAE,aAAa;CAChB,WAAW,MAAM,QAAQ,EAAE;CAC3B,WAAW,MAAM,QAAQ,EAAE;CAC5B,EAAE"}

package/dist/esm/components/Tabs/Tabs.style.js CHANGED Viewed

@@ -9,11 +9,11 @@ const CardTabs = styled(styled(Tabs)(({ theme }) => ({
 	},
 	[`.${tabsClasses.fixed}`]: { padding: theme.spacing(.5) }
 })))(({ theme }) => ({
-	backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
 	[`.${tabsClasses.indicator}`]: { backgroundColor: theme.vars.palette.background.paper },
 	...theme.applyStyles("dark", {
-		backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-		[`.${tabsClasses.indicator}`]: { backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)` }
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+		[`.${tabsClasses.indicator}`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)` }
 	})
 }));
 const Tab$1 = styled(Tab)(({ theme }) => ({

package/dist/esm/components/Tabs/Tabs.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.style.js","names":["Tabs","MuiTabs","Tab","MuiTab"],"sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"sourcesContent":["import type { TabProps } from '@mui/material'\nimport {\n Tab as MuiTab,\n Tabs as MuiTabs,\n styled,\n tabClasses,\n tabsClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nconst Tabs = styled(MuiTabs)(({ theme }) => ({\n flex: 1,\n [`.${tabsClasses.indicator}`]: {\n top: theme.spacing(0.5),\n left: theme.spacing(0.5),\n height: `calc(100% - ${theme.spacing(1)})`,\n width: `calc(100% - ${theme.spacing(1)})`,\n },\n [`.${tabsClasses.fixed}`]: {\n padding: theme.spacing(0.5),\n },\n}))\n\nexport const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(\n Tabs\n)(({ theme }) => ({\n backgroundColor: `~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.04~~)`,\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: theme.vars.palette.background.paper,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `~~rgba~~(${theme.vars.palette.common.~~onBackgroundChannel~~} / ~~0.08~~)`,\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: `~~rgba~~(${theme.vars.palette.common.~~backgroundChannel~~} / ~~0.56~~)`,\n },\n }),\n}))\n\nexport const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(\n MuiTab\n)<TabProps>(({ theme }) => ({\n zIndex: 1,\n flex: 1,\n textTransform: 'none',\n fontSize: '1rem',\n fontWeight: 700,\n color: theme.vars.palette.common.onBackground,\n [`&.${tabClasses.selected}`]: {\n color: theme.vars.palette.common.onBackground,\n },\n}))\n"],"mappings":";AAuBA,MAAa,WAA2D,OAb3D,OAAOC,KAAQ,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,GAAI;EACvB,MAAM,MAAM,QAAQ,GAAI;EACxB,QAAQ,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC,OAAO,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC;EACA,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,GAAI,EAC5B;CACF,EAAE,CAIF,EAAE,EAAE,aAAa;CAChB,iBAAiB,~~QAAQ~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~;~~EACtE~~,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,OAChD;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,~~QAAQ~~,MAAM,KAAK,QAAQ,OAAO,~~oBAAoB~~;~~GACtE~~,IAAI,YAAY,cAAc,EAC7B,iBAAiB,~~QAAQ~~,MAAM,KAAK,QAAQ,OAAO,~~kBAAkB~~,~~WACtE~~;EACF,CAAC;CACH,EAAE;AAEH,MAAaC,QAAqD,OAChEC,IACD,EAAY,EAAE,aAAa;CAC1B,QAAQ;CACR,MAAM;CACN,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,OAAO;EAChC,KAAK,WAAW,aAAa,EAC5B,OAAO,MAAM,KAAK,QAAQ,OAAO,cAClC;CACF,EAAE"}
1	+ {"version":3,"file":"Tabs.style.js","names":["Tabs","MuiTabs","Tab","MuiTab"],"sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"sourcesContent":["import type { TabProps } from '@mui/material'\nimport {\n Tab as MuiTab,\n Tabs as MuiTabs,\n styled,\n tabClasses,\n tabsClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nconst Tabs = styled(MuiTabs)(({ theme }) => ({\n flex: 1,\n [`.${tabsClasses.indicator}`]: {\n top: theme.spacing(0.5),\n left: theme.spacing(0.5),\n height: `calc(100% - ${theme.spacing(1)})`,\n width: `calc(100% - ${theme.spacing(1)})`,\n },\n [`.${tabsClasses.fixed}`]: {\n padding: theme.spacing(0.5),\n },\n}))\n\nexport const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(\n Tabs\n)(({ theme }) => ({\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: theme.vars.palette.background.paper,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n [`.${tabsClasses.indicator}`]: {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n },\n }),\n}))\n\nexport const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(\n MuiTab\n)<TabProps>(({ theme }) => ({\n zIndex: 1,\n flex: 1,\n textTransform: 'none',\n fontSize: '1rem',\n fontWeight: 700,\n color: theme.vars.palette.common.onBackground,\n [`&.${tabClasses.selected}`]: {\n color: theme.vars.palette.common.onBackground,\n },\n}))\n"],"mappings":";AAuBA,MAAa,WAA2D,OAb3D,OAAOC,KAAQ,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,GAAI;EACvB,MAAM,MAAM,QAAQ,GAAI;EACxB,QAAQ,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC,OAAO,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC;EACA,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,GAAI,EAC5B;CACF,EAAE,CAIF,EAAE,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,OAChD;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,qBAC7E;EACF,CAAC;CACH,EAAE;AAEH,MAAaC,QAAqD,OAChEC,IACD,EAAY,EAAE,aAAa;CAC1B,QAAQ;CACR,MAAM;CACN,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,OAAO;EAChC,KAAK,WAAW,aAAa,EAC5B,OAAO,MAAM,KAAK,QAAQ,OAAO,cAClC;CACF,EAAE"}

package/dist/esm/components/Timer/TimerContent.js CHANGED Viewed

@@ -17,6 +17,7 @@ const TimerContent = ({ children }) => {
 				height: 14
 			},
 			children: [/* @__PURE__ */ jsx(IconTypography, {
+				component: "span",
 				sx: {
 					marginRight: .5,
 					fontSize: 16,

package/dist/esm/components/Timer/TimerContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimerContent.js","names":[],"sources":["../../../../src/components/Timer/TimerContent.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport { Box, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { IconTypography } from '../IconTypography.js'\n\nexport const TimerContent: FC<PropsWithChildren> = ({ children }) => {\n const { t } = useTranslation()\n return (\n <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n <Box\n component=\"span\"\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: 14,\n }}\n >\n <IconTypography\n sx={{ marginRight: 0.5, fontSize: 16, display: 'inline-flex' }}\n >\n <AccessTimeFilled fontSize=\"inherit\" />\n </IconTypography>\n <Box\n component=\"span\"\n sx={{\n fontVariantNumeric: 'tabular-nums',\n cursor: 'help',\n }}\n >\n {children}\n </Box>\n </Box>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,gBAAuC,EAAE,eAAe;CACnE,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,wBAAwB;EAAE,IAAI,EAAE,QAAQ,QAAQ;YAChE,qBAAC,KAAD;GACE,WAAU;GACV,IAAI;IACF,SAAS;IACT,YAAY;IACZ,QAAQ;IACT;aANH,CAQE,oBAAC,gBAAD;IACE,IAAI;KAAE,aAAa;KAAK,UAAU;KAAI,SAAS;KAAe;cAE9D,oBAAC,kBAAD,EAAkB,UAAS,WAAY,CAAA;IACxB,CAAA,EACjB,oBAAC,KAAD;IACE,WAAU;IACV,IAAI;KACF,oBAAoB;KACpB,QAAQ;KACT;IAEA;IACG,CAAA,CACF;;EACE,CAAA"}
1	+ {"version":3,"file":"TimerContent.js","names":[],"sources":["../../../../src/components/Timer/TimerContent.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport { Box, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { IconTypography } from '../IconTypography.js'\n\nexport const TimerContent: FC<PropsWithChildren> = ({ children }) => {\n const { t } = useTranslation()\n return (\n <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n <Box\n component=\"span\"\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: 14,\n }}\n >\n <IconTypography\n component=\"span\"\n sx={{ marginRight: 0.5, fontSize: 16, display: 'inline-flex' }}\n >\n <AccessTimeFilled fontSize=\"inherit\" />\n </IconTypography>\n <Box\n component=\"span\"\n sx={{\n fontVariantNumeric: 'tabular-nums',\n cursor: 'help',\n }}\n >\n {children}\n </Box>\n </Box>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,gBAAuC,EAAE,eAAe;CACnE,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,wBAAwB;EAAE,IAAI,EAAE,QAAQ,QAAQ;YAChE,qBAAC,KAAD;GACE,WAAU;GACV,IAAI;IACF,SAAS;IACT,YAAY;IACZ,QAAQ;IACT;aANH,CAQE,oBAAC,gBAAD;IACE,WAAU;IACV,IAAI;KAAE,aAAa;KAAK,UAAU;KAAI,SAAS;KAAe;cAE9D,oBAAC,kBAAD,EAAkB,UAAS,WAAY,CAAA;IACxB,CAAA,EACjB,oBAAC,KAAD;IACE,WAAU;IACV,IAAI;KACF,oBAAoB;KACpB,QAAQ;KACT;IAEA;IACG,CAAA,CACF;;EACE,CAAA"}

package/dist/esm/components/Token/Token.js CHANGED Viewed

@@ -88,7 +88,7 @@ const TokenBase = ({ token, impactToken, enableImpactTokenTooltip, step, stepVis
 			}), /* @__PURE__ */ jsxs(TextSecondaryContainer, { children: [
 				/* @__PURE__ */ jsx(TextSecondary, { children: t("format.currency", { value: tokenPrice }) }),
 				impactToken ? /* @__PURE__ */ jsx(TextSecondary, {
-					px: .5,
+					sx: { px: .5 },
 					dot: true,
 					children: "•"
 				}) : null,
@@ -107,7 +107,7 @@ const TokenBase = ({ token, impactToken, enableImpactTokenTooltip, step, stepVis
 					})
 				}) : null,
 				!disableDescription ? /* @__PURE__ */ jsx(TextSecondary, {
-					px: .5,
+					sx: { px: .5 },
 					dot: true,
 					children: "•"
 				}) : null,

package/dist/esm/components/Token/Token.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Token.js","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"sourcesContent":["import type { LiFiStep, TokenAmount } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Grow, Skeleton, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren, ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { TextFitter } from '../TextFitter/TextFitter.js'\nimport { TextSecondary, TextSecondaryContainer } from './Token.style.js'\n\ninterface TokenProps {\n token: TokenAmount\n impactToken?: TokenAmount\n enableImpactTokenTooltip?: boolean\n step?: LiFiStep\n stepVisible?: boolean\n disableDescription?: boolean\n isLoading?: boolean\n}\n\nexport const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {\n if (!token.priceUSD \|\| !token.logoURI) {\n return <TokenFallback token={token} {...other} />\n }\n return <TokenBase token={token} {...other} />\n}\n\nconst TokenFallback: FC<TokenProps & BoxProps> = ({\n token,\n isLoading,\n ...other\n}) => {\n const { token: chainToken, isLoading: isLoadingToken } = useToken(\n token.chainId,\n token.address\n )\n\n return (\n <TokenBase\n token={{ ...token, ...chainToken } as TokenAmount}\n isLoading={isLoading \|\| isLoadingToken}\n {...other}\n />\n )\n}\n\nconst TokenBase: FC<TokenProps & BoxProps> = ({\n token,\n impactToken,\n enableImpactTokenTooltip,\n step,\n stepVisible,\n disableDescription,\n isLoading,\n ...other\n}) => {\n const { t, i18n } = useTranslation()\n const { chain } = useChain(token?.chainId)\n\n if (isLoading) {\n return (\n <TokenSkeleton\n token={token}\n step={step}\n disableDescription={disableDescription}\n {...other}\n />\n )\n }\n\n const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n const tokenPrice = formatTokenPrice(\n token.amount,\n token.priceUSD,\n token.decimals\n )\n\n let priceImpact: number \| undefined\n let priceImpactPercent: number \| undefined\n if (impactToken) {\n priceImpact = getPriceImpact({\n fromToken: impactToken,\n fromAmount: impactToken.amount,\n toToken: token,\n toAmount: token.amount,\n })\n priceImpactPercent = priceImpact * 100\n }\n\n const tokenOnChain = !disableDescription ? (\n <TextSecondary>\n {t('main.tokenOnChain', {\n tokenSymbol: token.symbol,\n chainName: chain?.name,\n })}\n </TextSecondary>\n ) : null\n\n return (\n <Box\n {...other}\n sx={[\n {\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n },\n ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n ]}\n >\n <TokenAvatar\n token={token}\n chain={chain}\n isLoading={isLoading}\n sx={{ marginRight: 2 }}\n />\n <Box\n sx={{\n flex: 1,\n }}\n >\n <Box\n sx={{\n mb: 0.5,\n height: 24,\n display: 'flex',\n alignItems: 'center',\n }}\n title={tokenAmount}\n >\n <TextFitter\n height={30}\n textStyle={{\n fontWeight: 700,\n }}\n >\n {t('format.tokenAmount', {\n value: tokenAmount,\n })}\n </TextFitter>\n </Box>\n <TextSecondaryContainer>\n <TextSecondary>\n {t('format.currency', {\n value: tokenPrice,\n })}\n </TextSecondary>\n {impactToken ? (\n <TextSecondary px={0.5} dot>\n •\n </TextSecondary>\n ) : null}\n {impactToken ? (\n enableImpactTokenTooltip ? (\n <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>\n <TextSecondary>\n {t('format.percent', {\n value: priceImpact,\n usePlusSign: true,\n })}\n </TextSecondary>\n </Tooltip>\n ) : (\n <TextSecondary\n title={priceImpactPercent?.toLocaleString(i18n.language, {\n maximumFractionDigits: 9,\n })}\n >\n {t('format.percent', { value: priceImpact, usePlusSign: true })}\n </TextSecondary>\n )\n ) : null}\n {!disableDescription ? (\n <TextSecondary px={0.5} dot>\n •\n </TextSecondary>\n ) : null}\n {!disableDescription && step ? (\n <TokenStep\n step={step}\n stepVisible={stepVisible}\n disableDescription={disableDescription}\n >\n {tokenOnChain}\n </TokenStep>\n ) : (\n tokenOnChain\n )}\n </TextSecondaryContainer>\n </Box>\n </Box>\n )\n}\n\nconst TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({\n step,\n stepVisible,\n disableDescription,\n children,\n}) => {\n return (\n <Box\n sx={{\n flex: 1,\n position: 'relative',\n overflow: 'hidden',\n height: 16,\n }}\n >\n <Grow\n in={!stepVisible && !disableDescription}\n style={{\n position: 'absolute',\n }}\n appear={false}\n timeout={225}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: 16,\n }}\n >\n {children as ReactElement}\n </Box>\n </Grow>\n <Grow\n in={stepVisible}\n style={{\n position: 'absolute',\n }}\n appear={false}\n timeout={225}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: 16,\n }}\n >\n <Box\n sx={{\n mr: 0.75,\n height: 16,\n }}\n >\n <SmallAvatar\n src={step?.toolDetails.logoURI}\n alt={step?.toolDetails.name}\n >\n {step?.toolDetails.name[0]}\n </SmallAvatar>\n </Box>\n <TextSecondary>{step?.toolDetails.name}</TextSecondary>\n </Box>\n </Grow>\n </Box>\n )\n}\n\nexport const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({\n step,\n disableDescription,\n ...other\n}) => {\n return (\n <Box\n {...other}\n sx={[\n {\n flex: 1,\n },\n ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n ]}\n >\n <Box\n sx={{\n display: 'flex',\n flex: 1,\n alignItems: 'center',\n }}\n >\n <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />\n <Box\n sx={{\n flex: 1,\n }}\n >\n <Skeleton width={112} height={28} variant=\"text\" />\n <TextSecondaryContainer>\n <Skeleton\n width={48}\n height={12}\n variant=\"rounded\"\n sx={{ marginTop: 0.5 }}\n />\n {!step && !disableDescription ? (\n <Skeleton\n width={96}\n height={12}\n variant=\"rounded\"\n sx={{ marginTop: 0.5, marginLeft: 1.5 }}\n />\n ) : null}\n </TextSecondaryContainer>\n </Box>\n </Box>\n </Box>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Token.js","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"sourcesContent":["import type { LiFiStep, TokenAmount } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Grow, Skeleton, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren, ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { TextFitter } from '../TextFitter/TextFitter.js'\nimport { TextSecondary, TextSecondaryContainer } from './Token.style.js'\n\ninterface TokenProps {\n token: TokenAmount\n impactToken?: TokenAmount\n enableImpactTokenTooltip?: boolean\n step?: LiFiStep\n stepVisible?: boolean\n disableDescription?: boolean\n isLoading?: boolean\n}\n\nexport const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {\n if (!token.priceUSD \|\| !token.logoURI) {\n return <TokenFallback token={token} {...other} />\n }\n return <TokenBase token={token} {...other} />\n}\n\nconst TokenFallback: FC<TokenProps & BoxProps> = ({\n token,\n isLoading,\n ...other\n}) => {\n const { token: chainToken, isLoading: isLoadingToken } = useToken(\n token.chainId,\n token.address\n )\n\n return (\n <TokenBase\n token={{ ...token, ...chainToken } as TokenAmount}\n isLoading={isLoading \|\| isLoadingToken}\n {...other}\n />\n )\n}\n\nconst TokenBase: FC<TokenProps & BoxProps> = ({\n token,\n impactToken,\n enableImpactTokenTooltip,\n step,\n stepVisible,\n disableDescription,\n isLoading,\n ...other\n}) => {\n const { t, i18n } = useTranslation()\n const { chain } = useChain(token?.chainId)\n\n if (isLoading) {\n return (\n <TokenSkeleton\n token={token}\n step={step}\n disableDescription={disableDescription}\n {...other}\n />\n )\n }\n\n const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n const tokenPrice = formatTokenPrice(\n token.amount,\n token.priceUSD,\n token.decimals\n )\n\n let priceImpact: number \| undefined\n let priceImpactPercent: number \| undefined\n if (impactToken) {\n priceImpact = getPriceImpact({\n fromToken: impactToken,\n fromAmount: impactToken.amount,\n toToken: token,\n toAmount: token.amount,\n })\n priceImpactPercent = priceImpact * 100\n }\n\n const tokenOnChain = !disableDescription ? (\n <TextSecondary>\n {t('main.tokenOnChain', {\n tokenSymbol: token.symbol,\n chainName: chain?.name,\n })}\n </TextSecondary>\n ) : null\n\n return (\n <Box\n {...other}\n sx={[\n {\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n },\n ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n ]}\n >\n <TokenAvatar\n token={token}\n chain={chain}\n isLoading={isLoading}\n sx={{ marginRight: 2 }}\n />\n <Box\n sx={{\n flex: 1,\n }}\n >\n <Box\n sx={{\n mb: 0.5,\n height: 24,\n display: 'flex',\n alignItems: 'center',\n }}\n title={tokenAmount}\n >\n <TextFitter\n height={30}\n textStyle={{\n fontWeight: 700,\n }}\n >\n {t('format.tokenAmount', {\n value: tokenAmount,\n })}\n </TextFitter>\n </Box>\n <TextSecondaryContainer>\n <TextSecondary>\n {t('format.currency', {\n value: tokenPrice,\n })}\n </TextSecondary>\n {impactToken ? (\n <TextSecondary sx={{ px: 0.5 }} dot>\n •\n </TextSecondary>\n ) : null}\n {impactToken ? (\n enableImpactTokenTooltip ? (\n <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>\n <TextSecondary>\n {t('format.percent', {\n value: priceImpact,\n usePlusSign: true,\n })}\n </TextSecondary>\n </Tooltip>\n ) : (\n <TextSecondary\n title={priceImpactPercent?.toLocaleString(i18n.language, {\n maximumFractionDigits: 9,\n })}\n >\n {t('format.percent', { value: priceImpact, usePlusSign: true })}\n </TextSecondary>\n )\n ) : null}\n {!disableDescription ? (\n <TextSecondary sx={{ px: 0.5 }} dot>\n •\n </TextSecondary>\n ) : null}\n {!disableDescription && step ? (\n <TokenStep\n step={step}\n stepVisible={stepVisible}\n disableDescription={disableDescription}\n >\n {tokenOnChain}\n </TokenStep>\n ) : (\n tokenOnChain\n )}\n </TextSecondaryContainer>\n </Box>\n </Box>\n )\n}\n\nconst TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({\n step,\n stepVisible,\n disableDescription,\n children,\n}) => {\n return (\n <Box\n sx={{\n flex: 1,\n position: 'relative',\n overflow: 'hidden',\n height: 16,\n }}\n >\n <Grow\n in={!stepVisible && !disableDescription}\n style={{\n position: 'absolute',\n }}\n appear={false}\n timeout={225}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: 16,\n }}\n >\n {children as ReactElement}\n </Box>\n </Grow>\n <Grow\n in={stepVisible}\n style={{\n position: 'absolute',\n }}\n appear={false}\n timeout={225}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: 16,\n }}\n >\n <Box\n sx={{\n mr: 0.75,\n height: 16,\n }}\n >\n <SmallAvatar\n src={step?.toolDetails.logoURI}\n alt={step?.toolDetails.name}\n >\n {step?.toolDetails.name[0]}\n </SmallAvatar>\n </Box>\n <TextSecondary>{step?.toolDetails.name}</TextSecondary>\n </Box>\n </Grow>\n </Box>\n )\n}\n\nexport const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({\n step,\n disableDescription,\n ...other\n}) => {\n return (\n <Box\n {...other}\n sx={[\n {\n flex: 1,\n },\n ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n ]}\n >\n <Box\n sx={{\n display: 'flex',\n flex: 1,\n alignItems: 'center',\n }}\n >\n <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />\n <Box\n sx={{\n flex: 1,\n }}\n >\n <Skeleton width={112} height={28} variant=\"text\" />\n <TextSecondaryContainer>\n <Skeleton\n width={48}\n height={12}\n variant=\"rounded\"\n sx={{ marginTop: 0.5 }}\n />\n {!step && !disableDescription ? (\n <Skeleton\n width={96}\n height={12}\n variant=\"rounded\"\n sx={{ marginTop: 0.5, marginLeft: 1.5 }}\n />\n ) : null}\n </TextSecondaryContainer>\n </Box>\n </Box>\n </Box>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/Token/Token.style.js CHANGED Viewed

@@ -15,7 +15,7 @@ const TextSecondary = styled(Typography, { shouldForwardProp: (prop) => !["dot"]
 	whiteSpace: "nowrap",
 	variants: [{
 		props: ({ dot }) => dot,
-		style: { color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)` }
+		style: { color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)` }
 	}]
 }));
 styled(Box)(({ theme }) => ({

package/dist/esm/components/Token/Token.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Token.style.js","names":[],"sources":["../../../../src/components/Token/Token.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const TextSecondaryContainer: React.FC<\n React.ComponentProps<typeof Box> & { dot?: boolean }\n> = styled(Box)(() => ({\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'wrap',\n flex: 1,\n height: 16,\n}))\n\nexport const TextSecondary: React.FC<\n React.ComponentProps<typeof Typography> & { dot?: boolean }\n> = styled(Typography, {\n shouldForwardProp: (prop: string) => !['dot'].includes(prop),\n})<{ dot?: boolean }>(({ theme }) => ({\n fontSize: 12,\n lineHeight: 1,\n fontWeight: 500,\n color: theme.vars.palette.text.secondary,\n whiteSpace: 'nowrap',\n variants: [\n {\n props: ({ dot }) => dot,\n style: {\n color: `~~rgba~~(${theme.vars.palette.text.~~secondaryChannel~~} / ~~0.56~~)`,\n },\n },\n ],\n}))\n\nexport const TokenDivider: React.FC<React.ComponentProps<typeof Box>> = styled(\n Box\n)(({ theme }) => ({\n height: 16,\n borderLeftWidth: 2,\n borderLeftStyle: 'solid',\n borderColor: theme.vars.palette.grey[300],\n ...theme.applyStyles('dark', {\n borderColor: theme.vars.palette.grey[800],\n }),\n}))\n"],"mappings":";;AAGA,MAAa,yBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACV,MAAM;CACN,QAAQ;CACT,EAAE;AAEH,MAAa,gBAET,OAAO,YAAY,EACrB,oBAAoB,SAAiB,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,EAC7D,CAAC,EAAqB,EAAE,aAAa;CACpC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;CACZ,UAAU,CACR;EACE,QAAQ,EAAE,UAAU;EACpB,OAAO,EACL,OAAO,~~QAAQ~~,MAAM,KAAK,QAAQ,KAAK,~~iBAAiB~~,~~WACzD~~;EACF,CACF;CACF,EAAE;AAEqE,OACtE,IACD,EAAE,EAAE,aAAa;CAChB,QAAQ;CACR,iBAAiB;CACjB,iBAAiB;CACjB,aAAa,MAAM,KAAK,QAAQ,KAAK;CACrC,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,MACtC,CAAC;CACH,EAAE"}
1	+ {"version":3,"file":"Token.style.js","names":[],"sources":["../../../../src/components/Token/Token.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const TextSecondaryContainer: React.FC<\n React.ComponentProps<typeof Box> & { dot?: boolean }\n> = styled(Box)(() => ({\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'wrap',\n flex: 1,\n height: 16,\n}))\n\nexport const TextSecondary: React.FC<\n React.ComponentProps<typeof Typography> & { dot?: boolean }\n> = styled(Typography, {\n shouldForwardProp: (prop: string) => !['dot'].includes(prop),\n})<{ dot?: boolean }>(({ theme }) => ({\n fontSize: 12,\n lineHeight: 1,\n fontWeight: 500,\n color: theme.vars.palette.text.secondary,\n whiteSpace: 'nowrap',\n variants: [\n {\n props: ({ dot }) => dot,\n style: {\n color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)`,\n },\n },\n ],\n}))\n\nexport const TokenDivider: React.FC<React.ComponentProps<typeof Box>> = styled(\n Box\n)(({ theme }) => ({\n height: 16,\n borderLeftWidth: 2,\n borderLeftStyle: 'solid',\n borderColor: theme.vars.palette.grey[300],\n ...theme.applyStyles('dark', {\n borderColor: theme.vars.palette.grey[800],\n }),\n}))\n"],"mappings":";;AAGA,MAAa,yBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACV,MAAM;CACN,QAAQ;CACT,EAAE;AAEH,MAAa,gBAET,OAAO,YAAY,EACrB,oBAAoB,SAAiB,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,EAC7D,CAAC,EAAqB,EAAE,aAAa;CACpC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;CACZ,UAAU,CACR;EACE,QAAQ,EAAE,UAAU;EACpB,OAAO,EACL,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,UAAU,qBAChE;EACF,CACF;CACF,EAAE;AAEqE,OACtE,IACD,EAAE,EAAE,aAAa;CAChB,QAAQ;CACR,iBAAiB;CACjB,iBAAiB;CACjB,aAAa,MAAM,KAAK,QAAQ,KAAK;CACrC,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,MACtC,CAAC;CACH,EAAE"}

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

@@ -49,10 +49,12 @@ const TokenDetailsSheetContent = forwardRef(({ tokenAddress, chainId, withoutCon
 				width: 80,
 				height: 16
 			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Typography, {
-				fontWeight: 700,
-				fontSize: "24px",
-				lineHeight: "24px",
-				color: "text.primary",
+				sx: {
+					fontWeight: 700,
+					fontSize: "24px",
+					lineHeight: "24px",
+					color: "text.primary"
+				},
 				children: token?.symbol || noDataLabel
 			}), /* @__PURE__ */ jsx(Label, { children: token?.name || noDataLabel })] }) })]
 		}), /* @__PURE__ */ jsx(IconButton, {

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

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

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

@@ -1,5 +1,5 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { FormKeyHelper } from "../../stores/form/types.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
@@ -30,7 +30,7 @@ const TokenList = memo(({ formType, headerRef }) => {
 	const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks;
 	useEffect(() => {
 		const normalizedSearchFilter = tokenSearchFilter?.replaceAll("$", "");
-		if (normalizedSearchFilter) emitter.emit(WidgetEvent.TokenSearch, {
+		if (normalizedSearchFilter) emitter.emit("tokenSearch", {
 			value: normalizedSearchFilter,
 			tokens
 		});

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

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

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

@@ -21,7 +21,7 @@ const IconButton$1 = styled(IconButton)(({ theme }) => ({
 	backgroundColor: "unset",
 	minWidth: "unset",
 	borderRadius: theme.vars.shape.borderRadiusTertiary,
-	"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` },
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
 	svg: { fontSize: 14 }
 }));
 //#endregion