@lifi/widget 4.1.0 → 4.2.0

package/dist/esm/components/AmountInputCard/PercentageChips.js

@@ -0,0 +1,80 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useGasRecommendation } from "../../hooks/useGasRecommendation.js";
+import { useTokenAddressBalance } from "../../hooks/useTokenAddressBalance.js";
+import { useLinkedLimitFields } from "../../hooks/useLinkedLimitFields.js";
+import { Chip, ChipContainer } from "./PercentageChips.style.js";
+import { formatUnits } from "@lifi/sdk";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAccount } from "@lifi/wallet-management";
+//#region src/components/AmountInputCard/PercentageChips.tsx
+const PercentageChips = memo(({ formType }) => {
+	const { t } = useTranslation();
+	const { getChainById } = useAvailableChains();
+	const { setFieldValue } = useFieldActions();
+	const { disabledUI, mode } = useWidgetConfig();
+	const { setSendAmount } = useLinkedLimitFields();
+	const amountKey = FormKeyHelper.getAmountKey(formType);
+	const isDisabled = !!disabledUI?.[amountKey];
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+	const chain = getChainById(chainId);
+	const { account } = useAccount({ chainType: chain?.chainType });
+	const { data } = useGasRecommendation(chainId);
+	const { token } = useTokenAddressBalance(chainId, tokenAddress);
+	const getMaxAmount = () => {
+		if (!token?.amount) return 0n;
+		let maxAmount = token.amount;
+		if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
+			const recommendedAmount = BigInt(data.recommended.amount);
+			if (token.amount > recommendedAmount) maxAmount = token.amount - recommendedAmount;
+		}
+		return maxAmount;
+	};
+	const applyAmount = (value) => {
+		if (mode === "limit") setSendAmount(value);
+		else setFieldValue(amountKey, value, { isTouched: true });
+	};
+	const handlePercentage = (percentage) => {
+		const maxAmount = getMaxAmount();
+		if (maxAmount && token?.decimals) {
+			const percentageAmount = maxAmount * BigInt(percentage) / 100n;
+			applyAmount(formatUnits(percentageAmount, token.decimals));
+		}
+	};
+	const handleMax = () => {
+		const maxAmount = getMaxAmount();
+		if (maxAmount && token?.decimals) applyAmount(formatUnits(maxAmount, token.decimals));
+	};
+	if (formType !== "from" || isDisabled || !token || !account?.isConnected) return null;
+	return /* @__PURE__ */ jsxs(ChipContainer, { children: [
+		/* @__PURE__ */ jsx(Chip, {
+			"data-delay": "0",
+			onClick: () => handlePercentage(25),
+			children: "25%"
+		}),
+		/* @__PURE__ */ jsx(Chip, {
+			"data-delay": "1",
+			onClick: () => handlePercentage(50),
+			children: "50%"
+		}),
+		/* @__PURE__ */ jsx(Chip, {
+			"data-delay": "2",
+			onClick: () => handlePercentage(75),
+			children: "75%"
+		}),
+		/* @__PURE__ */ jsx(Chip, {
+			"data-delay": "3",
+			onClick: handleMax,
+			children: t("button.max")
+		})
+	] });
+});
+//#endregion
+export { PercentageChips };
+
+//# sourceMappingURL=PercentageChips.js.map

package/dist/esm/components/AmountInputCard/PercentageChips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PercentageChips.js","names":[],"sources":["../../../../src/components/AmountInputCard/PercentageChips.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useGasRecommendation } from '../../hooks/useGasRecommendation.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { Chip, ChipContainer } from './PercentageChips.style.js'\n\nexport const PercentageChips: React.NamedExoticComponent<FormTypeProps> = memo(\n  ({ formType }: FormTypeProps): JSX.Element | null => {\n    const { t } = useTranslation()\n    const { getChainById } = useAvailableChains()\n    const { setFieldValue } = useFieldActions()\n    const { disabledUI, mode } = useWidgetConfig()\n    const { setSendAmount } = useLinkedLimitFields()\n\n    const amountKey = FormKeyHelper.getAmountKey(formType)\n    const isDisabled = !!disabledUI?.[amountKey as keyof DisabledUIConfig]\n\n    const [chainId, tokenAddress] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType)\n    )\n\n    const chain = getChainById(chainId)\n    const { account } = useAccount({ chainType: chain?.chainType })\n\n    const { data } = useGasRecommendation(chainId)\n    const { token } = useTokenAddressBalance(chainId, tokenAddress)\n\n    const getMaxAmount = (): bigint => {\n      if (!token?.amount) {\n        return 0n\n      }\n      let maxAmount = token.amount\n      if (chain?.nativeToken.address === tokenAddress && data?.recommended) {\n        const recommendedAmount = BigInt(data.recommended.amount)\n        if (token.amount > recommendedAmount) {\n          maxAmount = token.amount - recommendedAmount\n        }\n      }\n      return maxAmount\n    }\n\n    // In limit mode the send amount must flow through the linked-field\n    // derivation so the receive amount recomputes; otherwise it is a plain\n    // form-field write.\n    const applyAmount = (value: string): void => {\n      if (mode === 'limit') {\n        setSendAmount(value)\n      } else {\n        setFieldValue(amountKey, value, { isTouched: true })\n      }\n    }\n\n    const handlePercentage = (percentage: number): void => {\n      const maxAmount = getMaxAmount()\n      if (maxAmount && token?.decimals) {\n        const percentageAmount = (maxAmount * BigInt(percentage)) / 100n\n        applyAmount(formatUnits(percentageAmount, token.decimals))\n      }\n    }\n\n    const handleMax = (): void => {\n      const maxAmount = getMaxAmount()\n      if (maxAmount && token?.decimals) {\n        applyAmount(formatUnits(maxAmount, token.decimals))\n      }\n    }\n\n    if (formType !== 'from' || isDisabled || !token || !account?.isConnected) {\n      return null\n    }\n\n    return (\n      <ChipContainer>\n        <Chip data-delay=\"0\" onClick={() => handlePercentage(25)}>\n          25%\n        </Chip>\n        <Chip data-delay=\"1\" onClick={() => handlePercentage(50)}>\n          50%\n        </Chip>\n        <Chip data-delay=\"2\" onClick={() => handlePercentage(75)}>\n          75%\n        </Chip>\n        <Chip data-delay=\"3\" onClick={handleMax}>\n          {t('button.max')}\n        </Chip>\n      </ChipContainer>\n    )\n  }\n)\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,kBAA6D,MACvE,EAAE,eAAkD;CACnD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAC7C,MAAM,EAAE,kBAAkB,qBAAqB;CAE/C,MAAM,YAAY,cAAc,aAAa,QAAQ;CACrD,MAAM,aAAa,CAAC,CAAC,aAAa;CAElC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,QAAQ,aAAa,OAAO;CAClC,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,OAAO,UAAU,CAAC;CAE9D,MAAM,EAAE,SAAS,qBAAqB,OAAO;CAC7C,MAAM,EAAE,UAAU,uBAAuB,SAAS,YAAY;CAE9D,MAAM,qBAA6B;EACjC,IAAI,CAAC,OAAO,QACV,OAAO;EAET,IAAI,YAAY,MAAM;EACtB,IAAI,OAAO,YAAY,YAAY,gBAAgB,MAAM,aAAa;GACpE,MAAM,oBAAoB,OAAO,KAAK,YAAY,MAAM;GACxD,IAAI,MAAM,SAAS,mBACjB,YAAY,MAAM,SAAS;EAE/B;EACA,OAAO;CACT;CAKA,MAAM,eAAe,UAAwB;EAC3C,IAAI,SAAS,SACX,cAAc,KAAK;OAEnB,cAAc,WAAW,OAAO,EAAE,WAAW,KAAK,CAAC;CAEvD;CAEA,MAAM,oBAAoB,eAA6B;EACrD,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UAAU;GAChC,MAAM,mBAAoB,YAAY,OAAO,UAAU,IAAK;GAC5D,YAAY,YAAY,kBAAkB,MAAM,QAAQ,CAAC;EAC3D;CACF;CAEA,MAAM,kBAAwB;EAC5B,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,OAAO,UACtB,YAAY,YAAY,WAAW,MAAM,QAAQ,CAAC;CAEtD;CAEA,IAAI,aAAa,UAAU,cAAc,CAAC,SAAS,CAAC,SAAS,aAC3D,OAAO;CAGT,OACE,qBAAC,eAAD,EAAA,UAAA;EACE,oBAAC,MAAD;GAAM,cAAW;GAAI,eAAe,iBAAiB,EAAE;aAAG;EAEpD,CAAA;EACN,oBAAC,MAAD;GAAM,cAAW;GAAI,eAAe,iBAAiB,EAAE;aAAG;EAEpD,CAAA;EACN,oBAAC,MAAD;GAAM,cAAW;GAAI,eAAe,iBAAiB,EAAE;aAAG;EAEpD,CAAA;EACN,oBAAC,MAAD;GAAM,cAAW;GAAI,SAAS;aAC3B,EAAE,YAAY;EACX,CAAA;CACO,EAAA,CAAA;AAEnB,CACF"}

package/dist/esm/components/AmountInputCard/PercentageChips.style.js

@@ -0,0 +1,43 @@
+import { Box, Button, styled } from "@mui/material";
+import { cardClasses } from "@mui/material/Card";
+//#region src/components/AmountInputCard/PercentageChips.style.tsx
+const chipCount = 4;
+const staggerStepMs = 25;
+const revealStagger = Object.fromEntries(Array.from({ length: chipCount }, (_, index) => [`&[data-delay="${index}"]`, {
+	[`.${cardClasses.root}:hover &`]: {
+		opacity: 1,
+		transform: "scale(1) translateX(0)",
+		pointerEvents: "auto",
+		transitionDelay: `${(chipCount - 1 - index) * staggerStepMs}ms`
+	},
+	[`.${cardClasses.root}:not(:hover) &`]: { transitionDelay: `${index * staggerStepMs}ms` }
+}]));
+const ChipContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	gap: theme.spacing(.5)
+}));
+const Chip = styled(Button)(({ theme }) => ({
+	minWidth: 0,
+	padding: theme.spacing(.5, 1.5),
+	fontSize: 12,
+	fontWeight: 700,
+	lineHeight: 1.3334,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	color: theme.vars.palette.text.primary,
+	transition: "opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms ease",
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+	"@media (hover: hover)": {
+		opacity: 0,
+		transform: "scale(0.85) translateX(10px)",
+		pointerEvents: "none",
+		...revealStagger,
+		"@media (prefers-reduced-motion: reduce)": {
+			transform: "none !important",
+			transitionDelay: "0ms !important"
+		}
+	}
+}));
+//#endregion
+export { Chip, ChipContainer };
+
+//# sourceMappingURL=PercentageChips.style.js.map

package/dist/esm/components/AmountInputCard/PercentageChips.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PercentageChips.style.js","names":[],"sources":["../../../../src/components/AmountInputCard/PercentageChips.style.tsx"],"sourcesContent":["import { Box, Button, styled } from '@mui/material'\nimport { cardClasses } from '@mui/material/Card'\nimport type React from 'react'\n\nconst chipCount = 4\nconst staggerStepMs = 25\n\nconst revealStagger = Object.fromEntries(\n  Array.from({ length: chipCount }, (_, index) => [\n    `&[data-delay=\"${index}\"]`,\n    {\n      [`.${cardClasses.root}:hover &`]: {\n        opacity: 1,\n        transform: 'scale(1) translateX(0)',\n        pointerEvents: 'auto',\n        transitionDelay: `${(chipCount - 1 - index) * staggerStepMs}ms`,\n      },\n      [`.${cardClasses.root}:not(:hover) &`]: {\n        transitionDelay: `${index * staggerStepMs}ms`,\n      },\n    },\n  ])\n)\n\nexport const ChipContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(0.5),\n}))\n\nexport const Chip: React.FC<React.ComponentProps<typeof Button>> = styled(\n  Button\n)(({ theme }) => ({\n  minWidth: 0,\n  padding: theme.spacing(0.5, 1.5),\n  fontSize: 12,\n  fontWeight: 700,\n  lineHeight: 1.3334,\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  color: theme.vars.palette.text.primary,\n  transition:\n    'opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms ease',\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n  },\n  // Reveal-on-hover — only on devices that support hover. On touch there is no\n  // hover, so the chips stay permanently visible (the default above) instead of\n  // becoming an unreachable dead row.\n  '@media (hover: hover)': {\n    opacity: 0,\n    transform: 'scale(0.85) translateX(10px)',\n    pointerEvents: 'none',\n    ...revealStagger,\n    '@media (prefers-reduced-motion: reduce)': {\n      transform: 'none !important',\n      transitionDelay: '0ms !important',\n    },\n  },\n}))\n"],"mappings":";;;AAIA,MAAM,YAAY;AAClB,MAAM,gBAAgB;AAEtB,MAAM,gBAAgB,OAAO,YAC3B,MAAM,KAAK,EAAE,QAAQ,UAAU,IAAI,GAAG,UAAU,CAC9C,iBAAiB,MAAM,KACvB;EACG,IAAI,YAAY,KAAK,YAAY;EAChC,SAAS;EACT,WAAW;EACX,eAAe;EACf,iBAAiB,IAAI,YAAY,IAAI,SAAS,cAAc;CAC9D;EACC,IAAI,YAAY,KAAK,kBAAkB,EACtC,iBAAiB,GAAG,QAAQ,cAAc,IAC5C;AACF,CACF,CAAC,CACH;AAEA,MAAa,gBAA4D,OACvE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,KAAK,MAAM,QAAQ,EAAG;AACxB,EAAE;AAEF,MAAa,OAAsD,OACjE,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,UAAU;CACV,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YACE;CACF,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CAIA,yBAAyB;EACvB,SAAS;EACT,WAAW;EACX,eAAe;EACf,GAAG;EACH,2CAA2C;GACzC,WAAW;GACX,iBAAiB;EACnB;CACF;AACF,EAAE"}

package/dist/esm/components/AmountInputCard/ReceiveAmountCard.js

@@ -0,0 +1,137 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { ProgressToNextUpdate } from "../ProgressToNextUpdate.js";
+import { getPriceImpact } from "../../utils/getPriceImpact.js";
+import { useInputModeStore } from "../../stores/inputMode/useInputModeStore.js";
+import { fitInputText } from "../../utils/input.js";
+import { CardTitle } from "../Card/CardTitle.js";
+import { AmountCard, AmountDisplay, CardBodyRow, CardFooterRow, CardHeaderRow, FooterText, ToggleButton } from "./AmountInputCard.style.js";
+import { TokenPillButton } from "../TokenPillButton/TokenPillButton.js";
+import { useLayoutEffect, useRef } from "react";
+import { Box, Skeleton, Tooltip } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import InfoOutlined from "@mui/icons-material/InfoOutlined";
+import SwapVertIcon from "@mui/icons-material/SwapVert";
+//#region src/components/AmountInputCard/ReceiveAmountCard.tsx
+const formType = "to";
+const ReceiveAmountCardLayout = ({ cardProps, title, headerEnd, amount, footerStart, footerEnd }) => /* @__PURE__ */ jsxs(AmountCard, {
+	...cardProps,
+	formType,
+	children: [
+		/* @__PURE__ */ jsxs(CardHeaderRow, { children: [/* @__PURE__ */ jsx(CardTitle, {
+			sx: { padding: 0 },
+			children: title
+		}), headerEnd] }),
+		/* @__PURE__ */ jsxs(CardBodyRow, { children: [amount, /* @__PURE__ */ jsx(TokenPillButton, { formType })] }),
+		/* @__PURE__ */ jsxs(CardFooterRow, { children: [footerStart, footerEnd] })
+	]
+});
+const PriceImpactBadge = ({ priceImpact }) => {
+	const { t } = useTranslation();
+	if (priceImpact === void 0) return null;
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			gap: .5
+		},
+		children: [/* @__PURE__ */ jsx(FooterText, { children: t("format.percent", {
+			value: priceImpact,
+			usePlusSign: true
+		}) }), /* @__PURE__ */ jsx(Tooltip, {
+			title: t("tooltip.priceImpact"),
+			children: /* @__PURE__ */ jsx(InfoOutlined, { sx: {
+				fontSize: 16,
+				color: "text.secondary",
+				cursor: "help"
+			} })
+		})]
+	});
+};
+const useReceivePriceImpact = (route) => {
+	const { hiddenUI } = useWidgetConfig();
+	if (!route || hiddenUI?.routeCardPriceImpact) return;
+	return getPriceImpact({
+		fromAmount: BigInt(route.fromAmount),
+		toAmount: BigInt(route.toAmount),
+		fromToken: route.fromToken,
+		toToken: route.toToken
+	});
+};
+/**
+* The receive amount is a read-only quote derived from the best route, with a
+* fiat/token toggle and price impact in the footer. In limit mode the amount is
+* still the quote for the current limit (the limit price drives it via the
+* dedicated price card); it is never edited here, and the header shows the
+* refetch progress indicator with a "Buy" title.
+*/
+const ReceiveAmountCard = (props) => {
+	const { t } = useTranslation();
+	const amountRef = useRef(null);
+	const { inputMode, toggleInputMode } = useInputModeStore();
+	const showFiat = inputMode[formType] === "price";
+	const { hiddenUI, mode } = useWidgetConfig();
+	const isLimit = mode === "limit";
+	const [selectedRouteId] = useFieldValues("selectedRouteId");
+	const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes();
+	const route = routes?.find((r) => r.id === selectedRouteId) ?? routes?.[0];
+	const priceImpact = useReceivePriceImpact(route);
+	const showPriceImpact = !hiddenUI?.routeCardPriceImpact;
+	const receiveAmount = route?.toAmount ? formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals) : void 0;
+	const showSkeleton = isFetching && !receiveAmount;
+	const fiatValue = receiveAmount && route?.toToken.priceUSD ? formatTokenPrice(receiveAmount, route.toToken.priceUSD) : 0;
+	const canToggle = !!receiveAmount && !!route?.toToken.priceUSD;
+	const mainDisplay = showFiat ? t("format.currency", { value: fiatValue }) : t("format.tokenAmount", { value: receiveAmount || "0" });
+	const footerDisplay = showFiat ? t("format.tokenAmount", { value: receiveAmount || "0" }) : t("format.currency", { value: fiatValue });
+	useLayoutEffect(() => {
+		if (amountRef.current) fitInputText(30, 20, amountRef.current);
+	}, [mainDisplay]);
+	return /* @__PURE__ */ jsx(ReceiveAmountCardLayout, {
+		cardProps: props,
+		title: isLimit ? t("header.buy") : t("header.receive"),
+		headerEnd: isLimit && (isFetching || routes?.length) ? /* @__PURE__ */ jsx(ProgressToNextUpdate, {
+			updatedAt: dataUpdatedAt || Date.now(),
+			timeToUpdate: refetchTime,
+			isLoading: isFetching,
+			onClick: () => refetch(),
+			sx: { padding: 0 }
+		}) : void 0,
+		amount: showSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
+			variant: "rounded",
+			height: 32,
+			sx: { flex: 1 }
+		}) : /* @__PURE__ */ jsx(AmountDisplay, {
+			ref: amountRef,
+			sx: {
+				color: "text.primary",
+				opacity: receiveAmount ? 1 : .5
+			},
+			children: mainDisplay
+		}),
+		footerStart: showSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			width: 72,
+			sx: { fontSize: 12 }
+		}) : /* @__PURE__ */ jsxs(ToggleButton, {
+			clickable: canToggle,
+			onClick: canToggle ? () => toggleInputMode(formType) : void 0,
+			"aria-label": canToggle ? "Toggle fiat value" : void 0,
+			children: [/* @__PURE__ */ jsx(FooterText, { children: footerDisplay }), canToggle ? /* @__PURE__ */ jsx(SwapVertIcon, { sx: {
+				fontSize: 14,
+				color: "text.secondary"
+			} }) : null]
+		}),
+		footerEnd: showSkeleton ? showPriceImpact ? /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			width: 56,
+			sx: { fontSize: 12 }
+		}) : null : /* @__PURE__ */ jsx(PriceImpactBadge, { priceImpact })
+	});
+};
+//#endregion
+export { ReceiveAmountCard };
+
+//# sourceMappingURL=ReceiveAmountCard.js.map

package/dist/esm/components/AmountInputCard/ReceiveAmountCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReceiveAmountCard.js","names":["InfoOutlinedIcon"],"sources":["../../../../src/components/AmountInputCard/ReceiveAmountCard.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport type { CardProps } from '@mui/material'\nimport { Box, Skeleton, Tooltip } from '@mui/material'\nimport { type JSX, type ReactNode, useLayoutEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'\nimport {\n  AmountCard,\n  AmountDisplay,\n  amountHeight,\n  CardBodyRow,\n  CardFooterRow,\n  CardHeaderRow,\n  FooterText,\n  footerFontSize,\n  maxInputFontSize,\n  minInputFontSize,\n  ToggleButton,\n} from './AmountInputCard.style.js'\n\nconst formType = 'to' as const\n\ntype ReceiveCardProps = CardProps & { mask?: boolean }\n\nconst ReceiveAmountCardLayout = ({\n  cardProps,\n  title,\n  headerEnd,\n  amount,\n  footerStart,\n  footerEnd,\n}: {\n  cardProps: ReceiveCardProps\n  title: string\n  headerEnd?: ReactNode\n  amount: ReactNode\n  footerStart: ReactNode\n  footerEnd?: ReactNode\n}): JSX.Element => (\n  <AmountCard {...cardProps} formType={formType}>\n    <CardHeaderRow>\n      <CardTitle sx={{ padding: 0 }}>{title}</CardTitle>\n      {headerEnd}\n    </CardHeaderRow>\n    <CardBodyRow>\n      {amount}\n      <TokenPillButton formType={formType} />\n    </CardBodyRow>\n    <CardFooterRow>\n      {footerStart}\n      {footerEnd}\n    </CardFooterRow>\n  </AmountCard>\n)\n\nconst PriceImpactBadge = ({\n  priceImpact,\n}: {\n  priceImpact: number | undefined\n}): JSX.Element | null => {\n  const { t } = useTranslation()\n  if (priceImpact === undefined) {\n    return null\n  }\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n      <FooterText>\n        {t('format.percent', { value: priceImpact, usePlusSign: true })}\n      </FooterText>\n      <Tooltip title={t('tooltip.priceImpact')}>\n        <InfoOutlinedIcon\n          sx={{ fontSize: 16, color: 'text.secondary', cursor: 'help' }}\n        />\n      </Tooltip>\n    </Box>\n  )\n}\n\nconst useReceivePriceImpact = (\n  route: Route | undefined\n): number | undefined => {\n  const { hiddenUI } = useWidgetConfig()\n  if (!route || hiddenUI?.routeCardPriceImpact) {\n    return undefined\n  }\n  return getPriceImpact({\n    fromAmount: BigInt(route.fromAmount),\n    toAmount: BigInt(route.toAmount),\n    fromToken: route.fromToken,\n    toToken: route.toToken,\n  })\n}\n\n/**\n * The receive amount is a read-only quote derived from the best route, with a\n * fiat/token toggle and price impact in the footer. In limit mode the amount is\n * still the quote for the current limit (the limit price drives it via the\n * dedicated price card); it is never edited here, and the header shows the\n * refetch progress indicator with a \"Buy\" title.\n */\nexport const ReceiveAmountCard: React.FC<ReceiveCardProps> = (\n  props\n): JSX.Element => {\n  const { t } = useTranslation()\n  const amountRef = useRef<HTMLSpanElement>(null)\n  const { inputMode, toggleInputMode } = useInputModeStore()\n  const showFiat = inputMode[formType] === 'price'\n  const { hiddenUI, mode } = useWidgetConfig()\n  const isLimit = mode === 'limit'\n\n  const [selectedRouteId] = useFieldValues('selectedRouteId')\n  const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } =\n    useRoutes()\n  // Reflect the route the user selected in the routes list (falling back to the\n  // best route), so the buy amount matches the highlighted provider card.\n  const route = routes?.find((r) => r.id === selectedRouteId) ?? routes?.[0]\n  const priceImpact = useReceivePriceImpact(route)\n  const showPriceImpact = !hiddenUI?.routeCardPriceImpact\n\n  const receiveAmount = route?.toAmount\n    ? formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals)\n    : undefined\n  // Only show skeletons on the initial fetch.\n  const showSkeleton = isFetching && !receiveAmount\n\n  const fiatValue =\n    receiveAmount && route?.toToken.priceUSD\n      ? formatTokenPrice(receiveAmount, route.toToken.priceUSD)\n      : 0\n  const canToggle = !!receiveAmount && !!route?.toToken.priceUSD\n\n  const mainDisplay = showFiat\n    ? t('format.currency', { value: fiatValue })\n    : t('format.tokenAmount', { value: receiveAmount || '0' })\n  const footerDisplay = showFiat\n    ? t('format.tokenAmount', { value: receiveAmount || '0' })\n    : t('format.currency', { value: fiatValue })\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: effect must run on value change\n  useLayoutEffect(() => {\n    if (amountRef.current) {\n      fitInputText(maxInputFontSize, minInputFontSize, amountRef.current)\n    }\n  }, [mainDisplay])\n\n  return (\n    <ReceiveAmountCardLayout\n      cardProps={props}\n      title={isLimit ? t('header.buy') : t('header.receive')}\n      headerEnd={\n        isLimit && (isFetching || routes?.length) ? (\n          <ProgressToNextUpdate\n            updatedAt={dataUpdatedAt || Date.now()}\n            timeToUpdate={refetchTime}\n            isLoading={isFetching}\n            onClick={() => refetch()}\n            sx={{ padding: 0 }}\n          />\n        ) : undefined\n      }\n      amount={\n        showSkeleton ? (\n          <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n        ) : (\n          <AmountDisplay\n            ref={amountRef}\n            sx={{ color: 'text.primary', opacity: receiveAmount ? 1 : 0.5 }}\n          >\n            {mainDisplay}\n          </AmountDisplay>\n        )\n      }\n      footerStart={\n        showSkeleton ? (\n          <Skeleton\n            variant=\"text\"\n            width={72}\n            sx={{ fontSize: footerFontSize }}\n          />\n        ) : (\n          <ToggleButton\n            clickable={canToggle}\n            onClick={canToggle ? () => toggleInputMode(formType) : undefined}\n            aria-label={canToggle ? 'Toggle fiat value' : undefined}\n          >\n            <FooterText>{footerDisplay}</FooterText>\n            {canToggle ? (\n              <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />\n            ) : null}\n          </ToggleButton>\n        )\n      }\n      footerEnd={\n        showSkeleton ? (\n          showPriceImpact ? (\n            <Skeleton\n              variant=\"text\"\n              width={56}\n              sx={{ fontSize: footerFontSize }}\n            />\n          ) : null\n        ) : (\n          <PriceImpactBadge priceImpact={priceImpact} />\n        )\n      }\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/AmountInputCard/SendAmountCard.js

@@ -0,0 +1,102 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { formatInputAmount, formatTokenPrice, priceToTokenAmount } from "../../utils/format.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useToken } from "../../hooks/useToken.js";
+import { useInputModeStore } from "../../stores/inputMode/useInputModeStore.js";
+import { fitInputText } from "../../utils/input.js";
+import { CardTitle } from "../Card/CardTitle.js";
+import { useLinkedLimitFields } from "../../hooks/useLinkedLimitFields.js";
+import { AmountCard, CardBodyRow, CardFooterRow, CardHeaderRow, LargeInput } from "./AmountInputCard.style.js";
+import { TokenPillButton } from "../TokenPillButton/TokenPillButton.js";
+import { BalanceDisplay } from "./BalanceDisplay.js";
+import { FiatValueToggle } from "./FiatValueToggle.js";
+import { PercentageChips } from "./PercentageChips.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/AmountInputCard/SendAmountCard.tsx
+const SendAmountCard = (props) => {
+	const { t } = useTranslation();
+	const { disabledUI, mode, modeOptions } = useWidgetConfig();
+	const ref = useRef(null);
+	const isEditingRef = useRef(false);
+	const [formattedPriceInput, setFormattedPriceInput] = useState("");
+	const formType = "from";
+	const [chainId, tokenAddress, value] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType), FormKeyHelper.getAmountKey(formType));
+	const { token } = useToken(chainId, tokenAddress);
+	const { setFieldValue } = useFieldActions();
+	const { inputMode } = useInputModeStore();
+	const { setSendAmount } = useLinkedLimitFields();
+	const currentInputMode = inputMode[formType];
+	const disabled = disabledUI?.fromAmount;
+	const applyFromAmount = (value) => {
+		if (mode === "limit") setSendAmount(value);
+		else setFieldValue("fromAmount", value, {
+			isDirty: true,
+			isTouched: true
+		});
+	};
+	const title = mode === "limit" ? t("header.sell") : mode === "custom" && modeOptions?.custom?.type === "deposit" ? t("header.deposit") : t("header.send");
+	let displayValue;
+	if (isEditingRef.current) if (currentInputMode === "price") displayValue = formattedPriceInput;
+	else displayValue = value;
+	else if (currentInputMode === "price") displayValue = formatInputAmount(formatTokenPrice(value, token?.priceUSD).toFixed(2), 2);
+	else displayValue = value;
+	const handleChange = (event) => {
+		const { value: inputValue } = event.target;
+		isEditingRef.current = true;
+		if (currentInputMode === "price") {
+			const formattedValue = formatInputAmount(inputValue.replace("$", ""), 2, true);
+			const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD);
+			setFormattedPriceInput(formattedValue);
+			applyFromAmount(tokenValue);
+		} else {
+			const formattedValue = formatInputAmount(inputValue, token?.decimals, true);
+			applyFromAmount(formattedValue);
+		}
+	};
+	const handleBlur = (event) => {
+		const { value: inputValue } = event.target;
+		isEditingRef.current = false;
+		if (currentInputMode === "price") {
+			const formattedAmount = formatInputAmount(priceToTokenAmount(formatInputAmount(inputValue.replace("$", ""), 2), token?.priceUSD), token?.decimals);
+			applyFromAmount(formattedAmount);
+		} else {
+			const formattedValue = formatInputAmount(inputValue, token?.decimals);
+			applyFromAmount(formattedValue);
+		}
+	};
+	useLayoutEffect(() => {
+		if (ref.current) fitInputText(30, 20, ref.current);
+	}, [displayValue]);
+	return /* @__PURE__ */ jsxs(AmountCard, {
+		...props,
+		formType,
+		children: [
+			/* @__PURE__ */ jsxs(CardHeaderRow, { children: [/* @__PURE__ */ jsx(CardTitle, {
+				sx: { padding: 0 },
+				children: title
+			}), /* @__PURE__ */ jsx(PercentageChips, { formType })] }),
+			/* @__PURE__ */ jsxs(CardBodyRow, { children: [/* @__PURE__ */ jsx(LargeInput, {
+				inputRef: ref,
+				size: "small",
+				autoComplete: "off",
+				placeholder: currentInputMode === "price" ? "$0" : "0",
+				inputProps: { inputMode: "decimal" },
+				onChange: handleChange,
+				onBlur: handleBlur,
+				value: currentInputMode === "price" ? displayValue ? `$${displayValue}` : "" : displayValue,
+				name: "fromAmount",
+				disabled,
+				required: true
+			}), /* @__PURE__ */ jsx(TokenPillButton, { formType })] }),
+			/* @__PURE__ */ jsxs(CardFooterRow, { children: [/* @__PURE__ */ jsx(FiatValueToggle, { formType }), /* @__PURE__ */ jsx(BalanceDisplay, { formType })] })
+		]
+	});
+};
+//#endregion
+export { SendAmountCard };
+
+//# sourceMappingURL=SendAmountCard.js.map

package/dist/esm/components/AmountInputCard/SendAmountCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendAmountCard.js","names":[],"sources":["../../../../src/components/AmountInputCard/SendAmountCard.tsx"],"sourcesContent":["import type { CardProps } from '@mui/material'\nimport type { ChangeEvent, JSX } from 'react'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport {\n  formatInputAmount,\n  formatTokenPrice,\n  priceToTokenAmount,\n  usdDecimals,\n} from '../../utils/format.js'\nimport { fitInputText } from '../../utils/input.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'\nimport {\n  AmountCard,\n  CardBodyRow,\n  CardFooterRow,\n  CardHeaderRow,\n  LargeInput,\n  maxInputFontSize,\n  minInputFontSize,\n} from './AmountInputCard.style.js'\nimport { BalanceDisplay } from './BalanceDisplay.js'\nimport { FiatValueToggle } from './FiatValueToggle.js'\nimport { PercentageChips } from './PercentageChips.js'\n\nexport const SendAmountCard: React.FC<CardProps & { mask?: boolean }> = (\n  props\n): JSX.Element => {\n  const { t } = useTranslation()\n  const { disabledUI, mode, modeOptions } = useWidgetConfig()\n  const ref = useRef<HTMLInputElement>(null)\n  const isEditingRef = useRef(false)\n  const [formattedPriceInput, setFormattedPriceInput] = useState('')\n\n  const formType = 'from' as const\n\n  const [chainId, tokenAddress, value] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    FormKeyHelper.getTokenKey(formType),\n    FormKeyHelper.getAmountKey(formType)\n  )\n\n  const { token } = useToken(chainId, tokenAddress)\n  const { setFieldValue } = useFieldActions()\n  const { inputMode } = useInputModeStore()\n  const { setSendAmount } = useLinkedLimitFields()\n  const currentInputMode = inputMode[formType]\n  const disabled = disabledUI?.fromAmount\n\n  // In limit mode the send amount drives the linked receive amount; otherwise\n  // it is a plain form-field write.\n  const applyFromAmount = (value: string): void => {\n    if (mode === 'limit') {\n      setSendAmount(value)\n    } else {\n      setFieldValue('fromAmount', value, { isDirty: true, isTouched: true })\n    }\n  }\n\n  const title =\n    mode === 'limit'\n      ? t('header.sell')\n      : mode === 'custom' && modeOptions?.custom?.type === 'deposit'\n        ? t('header.deposit')\n        : t('header.send')\n\n  let displayValue: string\n  if (isEditingRef.current) {\n    if (currentInputMode === 'price') {\n      displayValue = formattedPriceInput\n    } else {\n      displayValue = value as string\n    }\n  } else {\n    if (currentInputMode === 'price') {\n      const priceValue = formatTokenPrice(value as string, token?.priceUSD)\n      displayValue = formatInputAmount(\n        priceValue.toFixed(usdDecimals),\n        usdDecimals\n      )\n    } else {\n      displayValue = value as string\n    }\n  }\n\n  const handleChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ): void => {\n    const { value: inputValue } = event.target\n    isEditingRef.current = true\n\n    if (currentInputMode === 'price') {\n      const cleanInputValue = inputValue.replace('$', '')\n      const formattedValue = formatInputAmount(\n        cleanInputValue,\n        usdDecimals,\n        true\n      )\n      const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n      setFormattedPriceInput(formattedValue)\n      applyFromAmount(tokenValue)\n    } else {\n      const formattedValue = formatInputAmount(\n        inputValue,\n        token?.decimals,\n        true\n      )\n      applyFromAmount(formattedValue)\n    }\n  }\n\n  const handleBlur = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ): void => {\n    const { value: inputValue } = event.target\n    isEditingRef.current = false\n\n    if (currentInputMode === 'price') {\n      const cleanInputValue = inputValue.replace('$', '')\n      const formattedValue = formatInputAmount(cleanInputValue, usdDecimals)\n      const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)\n      const formattedAmount = formatInputAmount(tokenValue, token?.decimals)\n      applyFromAmount(formattedAmount)\n    } else {\n      const formattedValue = formatInputAmount(inputValue, token?.decimals)\n      applyFromAmount(formattedValue)\n    }\n  }\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: effect must run on value change\n  useLayoutEffect(() => {\n    if (ref.current) {\n      fitInputText(maxInputFontSize, minInputFontSize, ref.current)\n    }\n  }, [displayValue])\n\n  return (\n    <AmountCard {...props} formType={formType}>\n      <CardHeaderRow>\n        <CardTitle sx={{ padding: 0 }}>{title}</CardTitle>\n        <PercentageChips formType={formType} />\n      </CardHeaderRow>\n      <CardBodyRow>\n        <LargeInput\n          inputRef={ref}\n          size=\"small\"\n          autoComplete=\"off\"\n          placeholder={currentInputMode === 'price' ? '$0' : '0'}\n          inputProps={{ inputMode: 'decimal' }}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          value={\n            currentInputMode === 'price'\n              ? displayValue\n                ? `$${displayValue}`\n                : ''\n              : displayValue\n          }\n          name=\"fromAmount\"\n          disabled={disabled}\n          required\n        />\n        <TokenPillButton formType={formType} />\n      </CardBodyRow>\n      <CardFooterRow>\n        <FiatValueToggle formType={formType} />\n        <BalanceDisplay formType={formType} />\n      </CardFooterRow>\n    </AmountCard>\n  )\n}\n"],"mappings":"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"}

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

@@ -4,16 +4,25 @@ import { ChainBadgeContent } from "./ChainBadgeContent.js";
 import { Badge, Skeleton } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Avatar/Avatar.tsx
-const AvatarBadgedDefault = ({ sx, chain }) => {
+const AvatarBadgedDefault = ({ sx, chain, avatarSize, badgeSize }) => {
 	return /* @__PURE__ */ jsx(Badge, {
 		overlap: "circular",
 		anchorOrigin: {
 			vertical: "bottom",
 			horizontal: "right"
 		},
-		badgeContent: /* @__PURE__ */ jsx(ChainBadgeContent, { chain }),
+		badgeContent: /* @__PURE__ */ jsx(ChainBadgeContent, {
+			chain,
+			size: badgeSize
+		}),
 		sx,
-		children: /* @__PURE__ */ jsx(AvatarDefault, {})
+		children: /* @__PURE__ */ jsx(AvatarDefault, {
+			badgeSize,
+			sx: avatarSize ? {
+				width: avatarSize,
+				height: avatarSize
+			} : void 0
+		})
 	});
 };
 const AvatarBadgedSkeleton = ({ sx, avatarSize = 40, badgeSize = 16 }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport type { SxProps, Theme } from '@mui/material'\nimport { Badge, Skeleton } from '@mui/material'\nimport { AvatarDefault, AvatarSkeletonMaskedContainer } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\nimport { SmallAvatarSkeleton } from './SmallAvatar.js'\n\nexport const AvatarBadgedDefault: React.FC<{\n  sx?: SxProps<Theme>\n  chain?: ExtendedChain\n}> = ({ sx, chain }) => {\n  return (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<ChainBadgeContent chain={chain} />}\n      sx={sx}\n    >\n      <AvatarDefault />\n    </Badge>\n  )\n}\n\nexport const AvatarBadgedSkeleton: React.FC<{\n  sx?: SxProps<Theme>\n  avatarSize?: number\n  badgeSize?: number\n}> = ({ sx, avatarSize = 40, badgeSize = 16 }) => {\n  return (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<SmallAvatarSkeleton size={badgeSize} />}\n      sx={sx}\n    >\n      <AvatarSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />\n    </Badge>\n  )\n}\n\nconst AvatarSkeleton: React.FC<{\n  avatarSize: number\n  badgeSize: number\n}> = ({ avatarSize, badgeSize }) => {\n  return (\n    <AvatarSkeletonMaskedContainer badgeSize={badgeSize}>\n      <Skeleton width={avatarSize} height={avatarSize} variant=\"circular\" />\n    </AvatarSkeletonMaskedContainer>\n  )\n}\n"],"mappings":";;;;;;AAOA,MAAa,uBAGP,EAAE,IAAI,YAAY;CACtB,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD,EAA0B,MAAQ,CAAA;EAC5C;YAEJ,oBAAC,eAAD,CAAgB,CAAA;CACX,CAAA;AAEX;AAEA,MAAa,wBAIP,EAAE,IAAI,aAAa,IAAI,YAAY,SAAS;CAChD,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,qBAAD,EAAqB,MAAM,UAAY,CAAA;EACjD;YAEJ,oBAAC,gBAAD;GAA4B;GAAuB;EAAY,CAAA;CAC1D,CAAA;AAEX;AAEA,MAAM,kBAGA,EAAE,YAAY,gBAAgB;CAClC,OACE,oBAAC,+BAAD;EAA0C;YACxC,oBAAC,UAAD;GAAU,OAAO;GAAY,QAAQ;GAAY,SAAQ;EAAY,CAAA;CACxC,CAAA;AAEnC"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport type { SxProps, Theme } from '@mui/material'\nimport { Badge, Skeleton } from '@mui/material'\nimport { AvatarDefault, AvatarSkeletonMaskedContainer } from './Avatar.style.js'\nimport { ChainBadgeContent } from './ChainBadgeContent.js'\nimport { SmallAvatarSkeleton } from './SmallAvatar.js'\n\nexport const AvatarBadgedDefault: React.FC<{\n  sx?: SxProps<Theme>\n  chain?: ExtendedChain\n  avatarSize?: number\n  badgeSize?: number\n}> = ({ sx, chain, avatarSize, badgeSize }) => {\n  return (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<ChainBadgeContent chain={chain} size={badgeSize} />}\n      sx={sx}\n    >\n      <AvatarDefault\n        badgeSize={badgeSize}\n        sx={avatarSize ? { width: avatarSize, height: avatarSize } : undefined}\n      />\n    </Badge>\n  )\n}\n\nexport const AvatarBadgedSkeleton: React.FC<{\n  sx?: SxProps<Theme>\n  avatarSize?: number\n  badgeSize?: number\n}> = ({ sx, avatarSize = 40, badgeSize = 16 }) => {\n  return (\n    <Badge\n      overlap=\"circular\"\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      badgeContent={<SmallAvatarSkeleton size={badgeSize} />}\n      sx={sx}\n    >\n      <AvatarSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />\n    </Badge>\n  )\n}\n\nconst AvatarSkeleton: React.FC<{\n  avatarSize: number\n  badgeSize: number\n}> = ({ avatarSize, badgeSize }) => {\n  return (\n    <AvatarSkeletonMaskedContainer badgeSize={badgeSize}>\n      <Skeleton width={avatarSize} height={avatarSize} variant=\"circular\" />\n    </AvatarSkeletonMaskedContainer>\n  )\n}\n"],"mappings":";;;;;;AAOA,MAAa,uBAKP,EAAE,IAAI,OAAO,YAAY,gBAAgB;CAC7C,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,mBAAD;GAA0B;GAAO,MAAM;EAAY,CAAA;EAC7D;YAEJ,oBAAC,eAAD;GACa;GACX,IAAI,aAAa;IAAE,OAAO;IAAY,QAAQ;GAAW,IAAI,KAAA;EAC9D,CAAA;CACI,CAAA;AAEX;AAEA,MAAa,wBAIP,EAAE,IAAI,aAAa,IAAI,YAAY,SAAS;CAChD,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,cAAc,oBAAC,qBAAD,EAAqB,MAAM,UAAY,CAAA;EACjD;YAEJ,oBAAC,gBAAD;GAA4B;GAAuB;EAAY,CAAA;CAC1D,CAAA;AAEX;AAEA,MAAM,kBAGA,EAAE,YAAY,gBAAgB;CAClC,OACE,oBAAC,+BAAD;EAA0C;YACxC,oBAAC,UAAD;GAAU,OAAO;GAAY,QAAQ;GAAY,SAAQ;EAAY,CAAA;CACxC,CAAA;AAEnC"}

package/dist/esm/components/Chains/VirtualizedChainList.js

@@ -34,7 +34,8 @@ const VirtualizedChainList = ({ formType, chains, hasSearchQuery, onSelect, sele
 	const showAllNetworksOption = showAllNetworks && !hasSearchQuery;
 	const getItemKey = useCallback((index) => {
 		if (showAllNetworksOption && index === 0) return "all-chains";
-		return `${sortedChains[index - (showAllNetworksOption ? 1 : 0)].id}-${index}`;
+		const chainIndex = index - (showAllNetworksOption ? 1 : 0);
+		return `${sortedChains[chainIndex].id}-${index}`;
 	}, [sortedChains, showAllNetworksOption]);
 	const onChainSelect = useCallback((chain) => {
 		setIsAllNetworks(false, formType);

package/dist/esm/components/Chains/VirtualizedChainList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedChainList.js","names":[],"sources":["../../../../src/components/Chains/VirtualizedChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { JSX, RefObject } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { AllChainsAvatar } from './AllChainsAvatar.js'\nimport {\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemButton,\n  ListItemText,\n} from './ChainList.style.js'\nimport { ChainListItem } from './ChainListItem.js'\n\ninterface VirtualizedChainListProps {\n  scrollElementRef: RefObject<HTMLDivElement | null>\n  formType: FormType\n  chains: ExtendedChain[]\n  onSelect: (chain: ExtendedChain) => void\n  selectedChainId?: number\n  itemsSize: 'small' | 'medium'\n  hasSearchQuery: boolean\n  withPinnedChains: boolean\n}\n\nexport const VirtualizedChainList = ({\n  formType,\n  chains,\n  hasSearchQuery,\n  onSelect,\n  selectedChainId,\n  itemsSize,\n  scrollElementRef,\n  withPinnedChains,\n}: VirtualizedChainListProps): JSX.Element => {\n  const { t } = useTranslation()\n  const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded\n  const hasScrolledRef = useRef(false)\n  const [\n    pinnedChains,\n    setPinnedChain,\n    isAllNetworks,\n    setIsAllNetworks,\n    showAllNetworks,\n  ] = useChainOrderStore((state) => [\n    state.pinnedChains,\n    state.setPinnedChain,\n    state[`${formType}IsAllNetworks`],\n    state.setIsAllNetworks,\n    state[`${formType}ShowAllNetworks`],\n  ])\n  const { setFieldValue } = useFieldActions()\n  const onPin = useCallback(\n    (chainId: number) => {\n      setPinnedChain(chainId)\n    },\n    [setPinnedChain]\n  )\n\n  const sortedChains = useMemo(() => {\n    if (!pinnedChains.length) {\n      return chains\n    }\n    // Pinning logic: move pinned chains to the top of the list\n    const pinned = pinnedChains\n      .map((id) => chains.find((c) => c.id === id))\n      .filter(Boolean) as ExtendedChain[]\n    const pinnedIds = new Set(pinned.map((c) => c.id))\n    const rest = chains.filter((c) => !pinnedIds.has(c.id))\n    return [...pinned, ...rest]\n  }, [chains, pinnedChains])\n\n  const showAllNetworksOption = showAllNetworks && !hasSearchQuery\n\n  const getItemKey = useCallback(\n    (index: number) => {\n      if (showAllNetworksOption && index === 0) {\n        return 'all-chains'\n      }\n      const chainIndex = index - (showAllNetworksOption ? 1 : 0)\n      return `${sortedChains[chainIndex].id}-${index}`\n    },\n    [sortedChains, showAllNetworksOption]\n  )\n\n  const onChainSelect = useCallback(\n    (chain: ExtendedChain) => {\n      setIsAllNetworks(false, formType)\n      onSelect(chain)\n    },\n    [onSelect, setIsAllNetworks, formType]\n  )\n\n  const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } =\n    useVirtualizer({\n      count: sortedChains.length + (showAllNetworksOption ? 1 : 0), // +1 for the all networks item\n      overscan: 3,\n      paddingEnd: 0,\n      getScrollElement: () => scrollElementRef.current,\n      estimateSize: () => {\n        return itemsSize === 'small' ? 48 : 60\n      },\n      getItemKey,\n    })\n\n  // Using mountOnEnter of the ExpansionTransition component\n  // leads to a short delay for setting up scrollElementRef,\n  // which in turn leads to getVirtualItems() returning an empty array.\n  // Workaround: Re-measure when scroll element becomes available\n  useEffect(() => {\n    if (scrollElementRef.current) {\n      measure()\n    }\n  }, [measure, scrollElementRef.current])\n\n  const scrollToIndex = useCallback(\n    (index: number) => {\n      requestAnimationFrame(() => {\n        const offsetInfo = getOffsetForIndex(index, 'center')\n        if (!scrollElementRef.current || !offsetInfo) {\n          return\n        }\n        scrollElementRef.current.scrollTo({\n          top: offsetInfo[0],\n          left: 0,\n          behavior: 'smooth',\n        })\n      })\n    },\n    [getOffsetForIndex, scrollElementRef.current]\n  )\n\n  useEffect(() => {\n    // Mark as scrolled if \"All Networks\" is initially selected\n    if (isAllNetworks) {\n      hasScrolledRef.current = true\n      return\n    }\n\n    // Only scroll if sortedChains is not empty and we haven't scrolled yet\n    if (!hasScrolledRef.current && sortedChains.length > 0 && range) {\n      const selectedChainIndex = sortedChains.findIndex(\n        (chain) => chain.id === selectedChainIdRef.current\n      )\n      if (selectedChainIndex !== -1) {\n        // Only scroll if the selected chain is not in the visible range\n        // +1 and -1 to account for partially visible items\n        if (\n          range.startIndex + 1 > selectedChainIndex ||\n          range.endIndex - 1 < selectedChainIndex\n        ) {\n          scrollToIndex(selectedChainIndex)\n        }\n      }\n      hasScrolledRef.current = true // Mark as scrolled (when needed)\n    }\n  }, [sortedChains, scrollToIndex, range, isAllNetworks])\n\n  const selectAllNetworks = useCallback(() => {\n    setIsAllNetworks(true, formType)\n    // Reset the chain and token fields when selecting all networks\n    setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })\n    setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })\n  }, [setIsAllNetworks, formType, setFieldValue])\n\n  return (\n    <List\n      className=\"long-list\"\n      style={{ height: getTotalSize() }}\n      disablePadding\n    >\n      {getVirtualItems().map((item) => {\n        if (showAllNetworksOption && item.index === 0) {\n          return (\n            <ListItem\n              key={item.key}\n              style={{\n                height: `${itemsSize}px`,\n                transform: `translateY(${item.start}px)`,\n                padding: 0,\n              }}\n            >\n              <ListItemButton\n                onClick={selectAllNetworks}\n                selected={isAllNetworks}\n                size={itemsSize}\n              >\n                <ListItemAvatar size={itemsSize}>\n                  <AllChainsAvatar chains={chains} size={itemsSize} />\n                </ListItemAvatar>\n                <ListItemText\n                  primary={t('main.allNetworks')}\n                  size={itemsSize}\n                />\n              </ListItemButton>\n            </ListItem>\n          )\n        }\n\n        const chain = sortedChains[item.index - (showAllNetworksOption ? 1 : 0)]\n        return (\n          <ChainListItem\n            key={item.key}\n            chain={chain}\n            onSelect={onChainSelect}\n            selected={!isAllNetworks && chain.id === selectedChainId}\n            itemsSize={itemsSize}\n            size={item.size}\n            start={item.start}\n            withPin={withPinnedChains}\n            isPinned={pinnedChains.includes(chain.id)}\n            onPin={onPin}\n          />\n        )\n      })}\n    </List>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"VirtualizedChainList.js","names":[],"sources":["../../../../src/components/Chains/VirtualizedChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { JSX, RefObject } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { AllChainsAvatar } from './AllChainsAvatar.js'\nimport {\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemButton,\n  ListItemText,\n} from './ChainList.style.js'\nimport { ChainListItem } from './ChainListItem.js'\n\ninterface VirtualizedChainListProps {\n  scrollElementRef: RefObject<HTMLDivElement | null>\n  formType: FormType\n  chains: ExtendedChain[]\n  onSelect: (chain: ExtendedChain) => void\n  selectedChainId?: number\n  itemsSize: 'small' | 'medium'\n  hasSearchQuery: boolean\n  withPinnedChains: boolean\n}\n\nexport const VirtualizedChainList = ({\n  formType,\n  chains,\n  hasSearchQuery,\n  onSelect,\n  selectedChainId,\n  itemsSize,\n  scrollElementRef,\n  withPinnedChains,\n}: VirtualizedChainListProps): JSX.Element => {\n  const { t } = useTranslation()\n  const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded\n  const hasScrolledRef = useRef(false)\n  const [\n    pinnedChains,\n    setPinnedChain,\n    isAllNetworks,\n    setIsAllNetworks,\n    showAllNetworks,\n  ] = useChainOrderStore((state) => [\n    state.pinnedChains,\n    state.setPinnedChain,\n    state[`${formType}IsAllNetworks`],\n    state.setIsAllNetworks,\n    state[`${formType}ShowAllNetworks`],\n  ])\n  const { setFieldValue } = useFieldActions()\n  const onPin = useCallback(\n    (chainId: number) => {\n      setPinnedChain(chainId)\n    },\n    [setPinnedChain]\n  )\n\n  const sortedChains = useMemo(() => {\n    if (!pinnedChains.length) {\n      return chains\n    }\n    // Pinning logic: move pinned chains to the top of the list\n    const pinned = pinnedChains\n      .map((id) => chains.find((c) => c.id === id))\n      .filter(Boolean) as ExtendedChain[]\n    const pinnedIds = new Set(pinned.map((c) => c.id))\n    const rest = chains.filter((c) => !pinnedIds.has(c.id))\n    return [...pinned, ...rest]\n  }, [chains, pinnedChains])\n\n  const showAllNetworksOption = showAllNetworks && !hasSearchQuery\n\n  const getItemKey = useCallback(\n    (index: number) => {\n      if (showAllNetworksOption && index === 0) {\n        return 'all-chains'\n      }\n      const chainIndex = index - (showAllNetworksOption ? 1 : 0)\n      return `${sortedChains[chainIndex].id}-${index}`\n    },\n    [sortedChains, showAllNetworksOption]\n  )\n\n  const onChainSelect = useCallback(\n    (chain: ExtendedChain) => {\n      setIsAllNetworks(false, formType)\n      onSelect(chain)\n    },\n    [onSelect, setIsAllNetworks, formType]\n  )\n\n  const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } =\n    useVirtualizer({\n      count: sortedChains.length + (showAllNetworksOption ? 1 : 0), // +1 for the all networks item\n      overscan: 3,\n      paddingEnd: 0,\n      getScrollElement: () => scrollElementRef.current,\n      estimateSize: () => {\n        return itemsSize === 'small' ? 48 : 60\n      },\n      getItemKey,\n    })\n\n  // Using mountOnEnter of the ExpansionTransition component\n  // leads to a short delay for setting up scrollElementRef,\n  // which in turn leads to getVirtualItems() returning an empty array.\n  // Workaround: Re-measure when scroll element becomes available\n  useEffect(() => {\n    if (scrollElementRef.current) {\n      measure()\n    }\n  }, [measure, scrollElementRef.current])\n\n  const scrollToIndex = useCallback(\n    (index: number) => {\n      requestAnimationFrame(() => {\n        const offsetInfo = getOffsetForIndex(index, 'center')\n        if (!scrollElementRef.current || !offsetInfo) {\n          return\n        }\n        scrollElementRef.current.scrollTo({\n          top: offsetInfo[0],\n          left: 0,\n          behavior: 'smooth',\n        })\n      })\n    },\n    [getOffsetForIndex, scrollElementRef.current]\n  )\n\n  useEffect(() => {\n    // Mark as scrolled if \"All Networks\" is initially selected\n    if (isAllNetworks) {\n      hasScrolledRef.current = true\n      return\n    }\n\n    // Only scroll if sortedChains is not empty and we haven't scrolled yet\n    if (!hasScrolledRef.current && sortedChains.length > 0 && range) {\n      const selectedChainIndex = sortedChains.findIndex(\n        (chain) => chain.id === selectedChainIdRef.current\n      )\n      if (selectedChainIndex !== -1) {\n        // Only scroll if the selected chain is not in the visible range\n        // +1 and -1 to account for partially visible items\n        if (\n          range.startIndex + 1 > selectedChainIndex ||\n          range.endIndex - 1 < selectedChainIndex\n        ) {\n          scrollToIndex(selectedChainIndex)\n        }\n      }\n      hasScrolledRef.current = true // Mark as scrolled (when needed)\n    }\n  }, [sortedChains, scrollToIndex, range, isAllNetworks])\n\n  const selectAllNetworks = useCallback(() => {\n    setIsAllNetworks(true, formType)\n    // Reset the chain and token fields when selecting all networks\n    setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })\n    setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })\n  }, [setIsAllNetworks, formType, setFieldValue])\n\n  return (\n    <List\n      className=\"long-list\"\n      style={{ height: getTotalSize() }}\n      disablePadding\n    >\n      {getVirtualItems().map((item) => {\n        if (showAllNetworksOption && item.index === 0) {\n          return (\n            <ListItem\n              key={item.key}\n              style={{\n                height: `${itemsSize}px`,\n                transform: `translateY(${item.start}px)`,\n                padding: 0,\n              }}\n            >\n              <ListItemButton\n                onClick={selectAllNetworks}\n                selected={isAllNetworks}\n                size={itemsSize}\n              >\n                <ListItemAvatar size={itemsSize}>\n                  <AllChainsAvatar chains={chains} size={itemsSize} />\n                </ListItemAvatar>\n                <ListItemText\n                  primary={t('main.allNetworks')}\n                  size={itemsSize}\n                />\n              </ListItemButton>\n            </ListItem>\n          )\n        }\n\n        const chain = sortedChains[item.index - (showAllNetworksOption ? 1 : 0)]\n        return (\n          <ChainListItem\n            key={item.key}\n            chain={chain}\n            onSelect={onChainSelect}\n            selected={!isAllNetworks && chain.id === selectedChainId}\n            itemsSize={itemsSize}\n            size={item.size}\n            start={item.start}\n            withPin={withPinnedChains}\n            isPinned={pinnedChains.includes(chain.id)}\n            onPin={onPin}\n          />\n        )\n      })}\n    </List>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Header/HeaderNavigationTabs.js

@@ -1,6 +1,9 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
 import { useNavigationTabsStore } from "../../stores/navigationTabs/useNavigationTabsStore.js";
 import { useNavigationTabLabel } from "../../stores/navigationTabs/useNavigationTabLabel.js";
 import { HeaderTabs } from "./HeaderTabs.js";
+import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Header/HeaderNavigationTabs.tsx
 const HeaderNavigationTabs = () => {
@@ -10,6 +13,16 @@ const HeaderNavigationTabs = () => {
 		store.setActiveTab
 	]);
 	const getLabel = useNavigationTabLabel();
+	const emitter = useWidgetEvents();
+	const previousTabRef = useRef(void 0);
+	useEffect(() => {
+		if (!activeTab || previousTabRef.current === activeTab) return;
+		emitter.emit("navigationTabChanged", {
+			tab: activeTab,
+			previousTab: previousTabRef.current
+		});
+		previousTabRef.current = activeTab;
+	}, [emitter, activeTab]);
 	if (!tabs.length || !activeTab) return null;
 	return /* @__PURE__ */ jsx(HeaderTabs, {
 		tabs: tabs.map((key) => ({
@@ -17,7 +30,7 @@ const HeaderNavigationTabs = () => {
 			label: getLabel(key)
 		})),
 		value: activeTab,
-		onChange: (key) => setActiveTab(key)
+		onChange: setActiveTab
 	});
 };
 //#endregion

package/dist/esm/components/Header/HeaderNavigationTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigationTabs.js","names":[],"sources":["../../../../src/components/Header/HeaderNavigationTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useNavigationTabLabel } from '../../stores/navigationTabs/useNavigationTabLabel.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { HeaderTabs } from './HeaderTabs.js'\n\nexport const HeaderNavigationTabs = (): JSX.Element | null => {\n  const [tabs, activeTab, setActiveTab] = useNavigationTabsStore((store) => [\n    store.tabs,\n    store.activeTab,\n    store.setActiveTab,\n  ])\n  const getLabel = useNavigationTabLabel()\n\n  if (!tabs.length || !activeTab) {\n    return null\n  }\n\n  return (\n    <HeaderTabs\n      tabs={tabs.map((key) => ({ key, label: getLabel(key) }))}\n      value={activeTab}\n      onChange={(key) => setActiveTab(key)}\n    />\n  )\n}\n"],"mappings":";;;;;AAKA,MAAa,6BAAiD;CAC5D,MAAM,CAAC,MAAM,WAAW,gBAAgB,wBAAwB,UAAU;EACxE,MAAM;EACN,MAAM;EACN,MAAM;CACR,CAAC;CACD,MAAM,WAAW,sBAAsB;CAEvC,IAAI,CAAC,KAAK,UAAU,CAAC,WACnB,OAAO;CAGT,OACE,oBAAC,YAAD;EACE,MAAM,KAAK,KAAK,SAAS;GAAE;GAAK,OAAO,SAAS,GAAG;EAAE,EAAE;EACvD,OAAO;EACP,WAAW,QAAQ,aAAa,GAAG;CACpC,CAAA;AAEL"}
+{"version":3,"file":"HeaderNavigationTabs.js","names":[],"sources":["../../../../src/components/Header/HeaderNavigationTabs.tsx"],"sourcesContent":["import { type JSX, useEffect, useRef } from 'react'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useNavigationTabLabel } from '../../stores/navigationTabs/useNavigationTabLabel.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { NavigationTabKey } from '../../types/widget.js'\nimport { HeaderTabs } from './HeaderTabs.js'\n\nexport const HeaderNavigationTabs = (): JSX.Element | null => {\n  const [tabs, activeTab, setActiveTab] = useNavigationTabsStore((store) => [\n    store.tabs,\n    store.activeTab,\n    store.setActiveTab,\n  ])\n  const getLabel = useNavigationTabLabel()\n  const emitter = useWidgetEvents()\n  const previousTabRef = useRef<NavigationTabKey | undefined>(undefined)\n\n  // Emit on the first resolved tab and on every subsequent switch.\n  useEffect(() => {\n    if (!activeTab || previousTabRef.current === activeTab) {\n      return\n    }\n    emitter.emit(WidgetEvent.NavigationTabChanged, {\n      tab: activeTab,\n      previousTab: previousTabRef.current,\n    })\n    previousTabRef.current = activeTab\n  }, [emitter, activeTab])\n\n  if (!tabs.length || !activeTab) {\n    return null\n  }\n\n  return (\n    <HeaderTabs\n      tabs={tabs.map((key) => ({ key, label: getLabel(key) }))}\n      value={activeTab}\n      onChange={setActiveTab}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,6BAAiD;CAC5D,MAAM,CAAC,MAAM,WAAW,gBAAgB,wBAAwB,UAAU;EACxE,MAAM;EACN,MAAM;EACN,MAAM;CACR,CAAC;CACD,MAAM,WAAW,sBAAsB;CACvC,MAAM,UAAU,gBAAgB;CAChC,MAAM,iBAAiB,OAAqC,KAAA,CAAS;CAGrE,gBAAgB;EACd,IAAI,CAAC,aAAa,eAAe,YAAY,WAC3C;EAEF,QAAQ,KAAA,wBAAuC;GAC7C,KAAK;GACL,aAAa,eAAe;EAC9B,CAAC;EACD,eAAe,UAAU;CAC3B,GAAG,CAAC,SAAS,SAAS,CAAC;CAEvB,IAAI,CAAC,KAAK,UAAU,CAAC,WACnB,OAAO;CAGT,OACE,oBAAC,YAAD;EACE,MAAM,KAAK,KAAK,SAAS;GAAE;GAAK,OAAO,SAAS,GAAG;EAAE,EAAE;EACvD,OAAO;EACP,UAAU;CACX,CAAA;AAEL"}

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

@@ -52,6 +52,6 @@ const IconCircleRoot = styled(Box, { shouldForwardProp: (prop) => prop !== "colo
 	};
 });
 //#endregion
-export { IconCircleRoot, getStatusColor };
+export { IconCircleRoot, getStatusColor, iconSizeRatio };
 
 //# sourceMappingURL=IconCircle.style.js.map