@lifi/widget 4.0.0 → 4.2.0

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

@@ -0,0 +1,25 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { CardContainer } from "./AmountInputCard.style.js";
+import { LimitPriceCard } from "../LimitPriceCard/LimitPriceCard.js";
+import { SwapButton } from "../SwapButton/SwapButton.js";
+import { ReceiveAmountCard } from "./ReceiveAmountCard.js";
+import { SendAmountCard } from "./SendAmountCard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/AmountInputCard/AmountInputCardPair.tsx
+const AmountInputCardPair = (props) => {
+	const { mode } = useWidgetConfig();
+	const showSwapButton = mode !== "refuel";
+	return /* @__PURE__ */ jsxs(CardContainer, {
+		...props,
+		children: [
+			mode === "limit" ? /* @__PURE__ */ jsx(LimitPriceCard, { sx: { marginBottom: 1 } }) : null,
+			/* @__PURE__ */ jsx(SendAmountCard, { mask: showSwapButton }),
+			/* @__PURE__ */ jsx(SwapButton, { sx: { visibility: showSwapButton ? "visible" : "hidden" } }),
+			/* @__PURE__ */ jsx(ReceiveAmountCard, { mask: showSwapButton })
+		]
+	});
+};
+//#endregion
+export { AmountInputCardPair };
+
+//# sourceMappingURL=AmountInputCardPair.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputCardPair.js","names":[],"sources":["../../../../src/components/AmountInputCard/AmountInputCardPair.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { LimitPriceCard } from '../LimitPriceCard/LimitPriceCard.js'\nimport { SwapButton } from '../SwapButton/SwapButton.js'\nimport { CardContainer } from './AmountInputCard.style.js'\nimport { ReceiveAmountCard } from './ReceiveAmountCard.js'\nimport { SendAmountCard } from './SendAmountCard.js'\n\nexport const AmountInputCardPair: React.FC<BoxProps> = (props): JSX.Element => {\n  // Refuel's destination is fixed to native gas, so reversing from/to is\n  // meaningless — hide the swap button (and the notch mask it sits in).\n  const { mode } = useWidgetConfig()\n  const showSwapButton = mode !== 'refuel'\n\n  return (\n    <CardContainer {...props}>\n      {mode === 'limit' ? <LimitPriceCard sx={{ marginBottom: 1 }} /> : null}\n      <SendAmountCard mask={showSwapButton} />\n      <SwapButton sx={{ visibility: showSwapButton ? 'visible' : 'hidden' }} />\n      <ReceiveAmountCard mask={showSwapButton} />\n    </CardContainer>\n  )\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,uBAA2C,UAAuB;CAG7E,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,iBAAiB,SAAS;CAEhC,OACE,qBAAC,eAAD;EAAe,GAAI;YAAnB;GACG,SAAS,UAAU,oBAAC,gBAAD,EAAgB,IAAI,EAAE,cAAc,EAAE,EAAI,CAAA,IAAI;GAClE,oBAAC,gBAAD,EAAgB,MAAM,eAAiB,CAAA;GACvC,oBAAC,YAAD,EAAY,IAAI,EAAE,YAAY,iBAAiB,YAAY,SAAS,EAAI,CAAA;GACxE,oBAAC,mBAAD,EAAmB,MAAM,eAAiB,CAAA;EAC7B;;AAEnB"}

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

@@ -0,0 +1,35 @@
+import { formatTokenAmount } from "../../utils/format.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useTokenAddressBalance } from "../../hooks/useTokenAddressBalance.js";
+import { FooterText } from "./AmountInputCard.style.js";
+import { BalanceContainer } from "./BalanceDisplay.style.js";
+import { memo } from "react";
+import { Skeleton } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import AccountBalanceWalletOutlinedIcon from "@mui/icons-material/AccountBalanceWalletOutlined";
+//#region src/components/AmountInputCard/BalanceDisplay.tsx
+const BalanceDisplay = memo(({ formType }) => {
+	const { t } = useTranslation();
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+	const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+	if (isLoading && tokenAddress) return /* @__PURE__ */ jsx(Skeleton, {
+		variant: "text",
+		width: 72,
+		sx: { fontSize: 12 }
+	});
+	if (!token?.amount) return null;
+	const tokenAmount = formatTokenAmount(token.amount, token.decimals);
+	return /* @__PURE__ */ jsxs(BalanceContainer, { children: [/* @__PURE__ */ jsx(FooterText, {
+		title: tokenAmount,
+		children: t("format.tokenAmount", { value: tokenAmount })
+	}), /* @__PURE__ */ jsx(AccountBalanceWalletOutlinedIcon, { sx: {
+		fontSize: 16,
+		color: "text.secondary"
+	} })] });
+});
+//#endregion
+export { BalanceDisplay };
+
+//# sourceMappingURL=BalanceDisplay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceDisplay.js","names":[],"sources":["../../../../src/components/AmountInputCard/BalanceDisplay.tsx"],"sourcesContent":["import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined'\nimport { Skeleton } from '@mui/material'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatTokenAmount } from '../../utils/format.js'\nimport { FooterText, footerFontSize } from './AmountInputCard.style.js'\nimport { BalanceContainer } from './BalanceDisplay.style.js'\n\nexport const BalanceDisplay: React.NamedExoticComponent<FormTypeProps> = memo(\n  ({ formType }: FormTypeProps): JSX.Element | null => {\n    const { t } = useTranslation()\n    const [chainId, tokenAddress] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType)\n    )\n\n    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n    if (isLoading && tokenAddress) {\n      return (\n        <Skeleton variant=\"text\" width={72} sx={{ fontSize: footerFontSize }} />\n      )\n    }\n\n    if (!token?.amount) {\n      return null\n    }\n\n    const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n\n    return (\n      <BalanceContainer>\n        <FooterText title={tokenAmount}>\n          {t('format.tokenAmount', { value: tokenAmount })}\n        </FooterText>\n        <AccountBalanceWalletOutlinedIcon\n          sx={{ fontSize: 16, color: 'text.secondary' }}\n        />\n      </BalanceContainer>\n    )\n  }\n)\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,iBAA4D,MACtE,EAAE,eAAkD;CACnD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,YAAY;CAEzE,IAAI,aAAa,cACf,OACE,oBAAC,UAAD;EAAU,SAAQ;EAAO,OAAO;EAAI,IAAI,EAAE,UAAA,GAAyB;CAAI,CAAA;CAI3E,IAAI,CAAC,OAAO,QACV,OAAO;CAGT,MAAM,cAAc,kBAAkB,MAAM,QAAQ,MAAM,QAAQ;CAElE,OACE,qBAAC,kBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;EAAY,OAAO;YAChB,EAAE,sBAAsB,EAAE,OAAO,YAAY,CAAC;CACrC,CAAA,GACZ,oBAAC,kCAAD,EACE,IAAI;EAAE,UAAU;EAAI,OAAO;CAAiB,EAC7C,CAAA,CACe,EAAA,CAAA;AAEtB,CACF"}

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

@@ -0,0 +1,11 @@
+import { Box, styled } from "@mui/material";
+//#region src/components/AmountInputCard/BalanceDisplay.style.tsx
+const BalanceContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(.5)
+}));
+//#endregion
+export { BalanceContainer };
+
+//# sourceMappingURL=BalanceDisplay.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceDisplay.style.js","names":[],"sources":["../../../../src/components/AmountInputCard/BalanceDisplay.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const BalanceContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  }))\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAG;AACxB,EAAE"}

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

@@ -0,0 +1,41 @@
+import { formatTokenPrice } 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 { FooterText, ToggleButton } from "./AmountInputCard.style.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SwapVertIcon from "@mui/icons-material/SwapVert";
+//#region src/components/AmountInputCard/FiatValueToggle.tsx
+const FiatValueToggle = memo(({ formType }) => {
+	const { t } = useTranslation();
+	const [chainId, tokenAddress, amount] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType), FormKeyHelper.getAmountKey(formType));
+	const { token } = useToken(chainId, tokenAddress);
+	const { inputMode, toggleInputMode } = useInputModeStore();
+	const currentInputMode = inputMode[formType];
+	const handleToggle = (e) => {
+		e.stopPropagation();
+		toggleInputMode(formType);
+	};
+	const canToggle = !!token?.priceUSD;
+	const displayValue = currentInputMode === "amount" ? t("format.currency", { value: formatTokenPrice(amount, token?.priceUSD, token?.decimals) }) : t("format.tokenAmount", { value: amount || "0" });
+	return /* @__PURE__ */ jsxs(ToggleButton, {
+		clickable: canToggle,
+		onClick: canToggle ? handleToggle : void 0,
+		"aria-label": canToggle ? "Toggle fiat value" : void 0,
+		children: [
+			/* @__PURE__ */ jsx(FooterText, { children: displayValue }),
+			currentInputMode === "price" && token?.symbol ? /* @__PURE__ */ jsx(FooterText, { children: token.symbol }) : null,
+			canToggle ? /* @__PURE__ */ jsx(SwapVertIcon, { sx: {
+				fontSize: 14,
+				color: "text.secondary"
+			} }) : null
+		]
+	});
+});
+//#endregion
+export { FiatValueToggle };
+
+//# sourceMappingURL=FiatValueToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FiatValueToggle.js","names":[],"sources":["../../../../src/components/AmountInputCard/FiatValueToggle.tsx"],"sourcesContent":["import SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToken } from '../../hooks/useToken.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenPrice } from '../../utils/format.js'\nimport { FooterText, ToggleButton } from './AmountInputCard.style.js'\n\nexport const FiatValueToggle: React.NamedExoticComponent<FormTypeProps> = memo(\n  ({ formType }: FormTypeProps): JSX.Element => {\n    const { t } = useTranslation()\n    const [chainId, tokenAddress, amount] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType),\n      FormKeyHelper.getAmountKey(formType)\n    )\n\n    const { token } = useToken(chainId, tokenAddress)\n    const { inputMode, toggleInputMode } = useInputModeStore()\n    const currentInputMode = inputMode[formType]\n\n    const handleToggle = (e: React.MouseEvent): void => {\n      e.stopPropagation()\n      toggleInputMode(formType)\n    }\n\n    const canToggle = !!token?.priceUSD\n\n    const displayValue =\n      currentInputMode === 'amount'\n        ? t('format.currency', {\n            value: formatTokenPrice(amount, token?.priceUSD, token?.decimals),\n          })\n        : t('format.tokenAmount', { value: amount || '0' })\n\n    return (\n      <ToggleButton\n        clickable={canToggle}\n        onClick={canToggle ? handleToggle : undefined}\n        aria-label={canToggle ? 'Toggle fiat value' : undefined}\n      >\n        <FooterText>{displayValue}</FooterText>\n        {currentInputMode === 'price' && token?.symbol ? (\n          <FooterText>{token.symbol}</FooterText>\n        ) : null}\n        {canToggle ? (\n          <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />\n        ) : null}\n      </ToggleButton>\n    )\n  }\n)\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,kBAA6D,MACvE,EAAE,eAA2C;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,SAAS,cAAc,UAAU,eACtC,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,GAClC,cAAc,aAAa,QAAQ,CACrC;CAEA,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAChD,MAAM,EAAE,WAAW,oBAAoB,kBAAkB;CACzD,MAAM,mBAAmB,UAAU;CAEnC,MAAM,gBAAgB,MAA8B;EAClD,EAAE,gBAAgB;EAClB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,YAAY,CAAC,CAAC,OAAO;CAE3B,MAAM,eACJ,qBAAqB,WACjB,EAAE,mBAAmB,EACnB,OAAO,iBAAiB,QAAQ,OAAO,UAAU,OAAO,QAAQ,EAClE,CAAC,IACD,EAAE,sBAAsB,EAAE,OAAO,UAAU,IAAI,CAAC;CAEtD,OACE,qBAAC,cAAD;EACE,WAAW;EACX,SAAS,YAAY,eAAe,KAAA;EACpC,cAAY,YAAY,sBAAsB,KAAA;YAHhD;GAKE,oBAAC,YAAD,EAAA,UAAa,aAAyB,CAAA;GACrC,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD,EAAA,UAAa,MAAM,OAAmB,CAAA,IACpC;GACH,YACC,oBAAC,cAAD,EAAc,IAAI;IAAE,UAAU;IAAI,OAAO;GAAiB,EAAI,CAAA,IAC5D;EACQ;;AAElB,CACF"}

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/AppContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppContainer.js","names":[],"sources":["../../../src/components/AppContainer.tsx"],"sourcesContent":["import type { BoxProps, ContainerProps } from '@mui/material'\nimport { Box, Container, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderHeight } from '../stores/header/useHeaderStore.js'\nimport type { WidgetVariant } from '../types/widget.js'\nimport { createElementId, ElementId } from '../utils/elements.js'\nimport { getWidgetMaxHeight } from '../utils/widgetSize.js'\n\n// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can\n//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height\n//  A Number of other components and hooks work with height values that are often set on or derived from these elements\n//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use\n//    - useTokenListHeight\n//    - useSetContentHeight\n//  Also check any code that is using the methods from elements.ts utils file\n\nexport const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(\n  ({ theme }) => {\n    return {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'start',\n      flex: 1,\n      height:\n        theme.container?.display === 'flex'\n          ? '100%'\n          : theme.container?.maxHeight\n            ? 'auto'\n            : theme.container?.height || 'auto',\n    }\n  }\n)\n\nexport const RelativeContainer: React.FC<\n  BoxProps & { variant?: WidgetVariant }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: WidgetVariant }>(({ theme }) => {\n  const maxHeight =\n    theme.container?.height === 'fit-content' ||\n    (!theme.container?.height && !theme.container?.maxHeight)\n      ? 'none'\n      : getWidgetMaxHeight(theme)\n  return {\n    position: 'relative',\n    boxSizing: 'content-box',\n    width: '100%',\n    minWidth: theme.breakpoints.values.xs,\n    maxWidth: theme.breakpoints.values.sm,\n    background: theme.vars.palette.background.default,\n    overflow: 'auto',\n    flex: 1,\n    ...theme.container,\n    maxHeight:\n      theme.container?.display === 'flex' && !theme.container?.height\n        ? '100%'\n        : maxHeight,\n    zIndex: 1, // NB: higher than of expansion containers\n    variants: [\n      {\n        props: {\n          variant: 'drawer',\n        },\n        style: {\n          maxHeight: 'none',\n          height: '100%',\n          boxShadow: 'none',\n          borderRadius: 0,\n        },\n      },\n    ],\n  }\n})\n\ninterface CssBaselineContainerProps {\n  variant?: WidgetVariant\n  paddingTopAdjustment: number\n  elementId: string\n}\n\nconst CssBaselineContainer = styled(ScopedCssBaseline, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),\n})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {\n  const maxHeight =\n    theme.container?.height === 'fit-content' ||\n    (!theme.container?.height && !theme.container?.maxHeight)\n      ? 'none'\n      : getWidgetMaxHeight(theme)\n  return {\n    display: 'flex',\n    flex: 1,\n    flexDirection: 'column',\n    overflowX: 'clip',\n    margin: 0,\n    width: '100%',\n    maxHeight:\n      variant === 'drawer' || theme.container?.display === 'flex'\n        ? 'none'\n        : maxHeight,\n    overflowY: 'auto',\n    height: theme.container?.display === 'flex' ? 'auto' : '100%',\n    paddingTop: paddingTopAdjustment,\n    '&:has(.long-list)': {\n      minHeight: getWidgetMaxHeight(theme),\n      maxHeight: getWidgetMaxHeight(theme),\n    },\n  }\n})\n\nexport const FlexContainer: React.FC<ContainerProps> = styled(Container)({\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n})\n\nexport const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {\n  // const ref = useRef<HTMLDivElement>(null);\n  const { variant, elementId, theme } = useWidgetConfig()\n  const { headerHeight } = useHeaderHeight()\n  const positionFixedAdjustment =\n    theme?.header?.position === 'fixed' ? headerHeight : 0\n\n  return (\n    <RelativeContainer\n      variant={variant}\n      id={createElementId(ElementId.RelativeContainer, elementId)}\n    >\n      <CssBaselineContainer\n        id={createElementId(ElementId.ScrollableContainer, elementId)}\n        variant={variant}\n        enableColorScheme\n        paddingTopAdjustment={positionFixedAdjustment}\n        elementId={elementId}\n        // ref={ref}\n      >\n        <FlexContainer disableGutters>{children}</FlexContainer>\n      </CssBaselineContainer>\n      {/* <ScrollToLocation elementRef={ref} /> */}\n    </RelativeContainer>\n  )\n}\n\n// export const ScrollToLocation: React.FC<{\n//   elementRef: RefObject<HTMLElement>;\n// }> = ({ elementRef }) => {\n//   const { pathname } = useLocation();\n//   useLayoutEffect(() => {\n//     elementRef.current?.scrollTo(0, 0);\n//   }, [elementRef, pathname]);\n//   return null;\n// };\n"],"mappings":";;;;;;;AAkBA,MAAa,uBAA2C,OAAO,GAAG,GAC/D,EAAE,YAAY;CACb,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,MAAM;EACN,QACE,MAAM,WAAW,YAAY,SACzB,SACA,MAAM,WAAW,YACf,SACA,MAAM,WAAW,UAAU;CACrC;AACF,CACF;AAEA,MAAa,oBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACxC,CAAC,GAAgC,EAAE,YAAY;CAC7C,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,KAAK;CAC9B,OAAO;EACL,UAAU;EACV,WAAW;EACX,OAAO;EACP,UAAU,MAAM,YAAY,OAAO;EACnC,UAAU,MAAM,YAAY,OAAO;EACnC,YAAY,MAAM,KAAK,QAAQ,WAAW;EAC1C,UAAU;EACV,MAAM;EACN,GAAG,MAAM;EACT,WACE,MAAM,WAAW,YAAY,UAAU,CAAC,MAAM,WAAW,SACrD,SACA;EACN,QAAQ;EACR,UAAU,CACR;GACE,OAAO,EACL,SAAS,SACX;GACA,OAAO;IACL,WAAW;IACX,QAAQ;IACR,WAAW;IACX,cAAc;GAChB;EACF,CACF;CACF;AACF,CAAC;AAQD,MAAM,uBAAuB,OAAO,mBAAmB,EACrD,oBAAoB,SAClB,CAAC;CAAC;CAAW;CAAwB;AAAW,EAAE,SAAS,IAAc,EAC7E,CAAC,GAA8B,EAAE,OAAO,SAAS,2BAA2B;CAC1E,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,KAAK;CAC9B,OAAO;EACL,SAAS;EACT,MAAM;EACN,eAAe;EACf,WAAW;EACX,QAAQ;EACR,OAAO;EACP,WACE,YAAY,YAAY,MAAM,WAAW,YAAY,SACjD,SACA;EACN,WAAW;EACX,QAAQ,MAAM,WAAW,YAAY,SAAS,SAAS;EACvD,YAAY;EACZ,qBAAqB;GACnB,WAAW,mBAAmB,KAAK;GACnC,WAAW,mBAAmB,KAAK;EACrC;CACF;AACF,CAAC;AAED,MAAa,gBAA0C,OAAO,SAAS,EAAE;CACvE,SAAS;CACT,eAAe;CACf,MAAM;AACR,CAAC;AAED,MAAa,gBAA6C,EAAE,eAAe;CAEzE,MAAM,EAAE,SAAS,WAAW,UAAU,gBAAgB;CACtD,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,0BACJ,OAAO,QAAQ,aAAa,UAAU,eAAe;CAEvD,OACE,oBAAC,mBAAD;EACW;EACT,IAAI,gBAAA,6BAA6C,SAAS;YAE1D,oBAAC,sBAAD;GACE,IAAI,gBAAA,+BAA+C,SAAS;GACnD;GACT,mBAAA;GACA,sBAAsB;GACX;aAGX,oBAAC,eAAD;IAAe,gBAAA;IAAgB;GAAwB,CAAA;EACnC,CAAA;CAEL,CAAA;AAEvB"}
+{"version":3,"file":"AppContainer.js","names":[],"sources":["../../../src/components/AppContainer.tsx"],"sourcesContent":["import type { BoxProps, ContainerProps } from '@mui/material'\nimport { Box, Container, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderHeight } from '../stores/header/useHeaderStore.js'\nimport type { WidgetVariant } from '../types/widget.js'\nimport { createElementId, ElementId } from '../utils/elements.js'\nimport { getWidgetMaxHeight } from '../utils/widgetSize.js'\n\n// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can\n//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height\n//  A Number of other components and hooks work with height values that are often set on or derived from these elements\n//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use\n//    - useTokenListHeight\n//    - useSetContentHeight\n//  Also check any code that is using the methods from elements.ts utils file\n\nexport const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(\n  ({ theme }) => {\n    return {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'start',\n      flex: 1,\n      height:\n        theme.container?.display === 'flex'\n          ? '100%'\n          : theme.container?.maxHeight\n            ? 'auto'\n            : theme.container?.height || 'auto',\n    }\n  }\n)\n\nexport const RelativeContainer: React.FC<\n  BoxProps & { variant?: WidgetVariant }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: WidgetVariant }>(({ theme }) => {\n  const maxHeight =\n    theme.container?.height === 'fit-content' ||\n    (!theme.container?.height && !theme.container?.maxHeight)\n      ? 'none'\n      : getWidgetMaxHeight(theme)\n  return {\n    position: 'relative',\n    boxSizing: 'content-box',\n    width: '100%',\n    minWidth: theme.breakpoints.values.xs,\n    maxWidth: theme.breakpoints.values.sm,\n    background: theme.vars.palette.background.default,\n    overflow: 'auto',\n    flex: 1,\n    ...theme.container,\n    maxHeight:\n      theme.container?.display === 'flex' && !theme.container?.height\n        ? '100%'\n        : maxHeight,\n    zIndex: 1, // NB: higher than of expansion containers\n    variants: [\n      {\n        props: {\n          variant: 'drawer',\n        },\n        style: {\n          maxHeight: 'none',\n          height: '100%',\n          boxShadow: 'none',\n          borderRadius: 0,\n        },\n      },\n    ],\n  }\n})\n\ninterface CssBaselineContainerProps {\n  variant?: WidgetVariant\n  paddingTopAdjustment: number\n  elementId: string\n}\n\nconst CssBaselineContainer = styled(ScopedCssBaseline, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),\n})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {\n  const maxHeight =\n    theme.container?.height === 'fit-content' ||\n    (!theme.container?.height && !theme.container?.maxHeight)\n      ? 'none'\n      : getWidgetMaxHeight(theme)\n  return {\n    display: 'flex',\n    flex: 1,\n    flexDirection: 'column',\n    overflowX: 'clip',\n    margin: 0,\n    width: '100%',\n    maxHeight:\n      variant === 'drawer' || theme.container?.display === 'flex'\n        ? 'none'\n        : maxHeight,\n    overflowY: 'auto',\n    height: theme.container?.display === 'flex' ? 'auto' : '100%',\n    paddingTop: paddingTopAdjustment,\n    '&:has(.long-list)': {\n      minHeight: getWidgetMaxHeight(theme),\n      maxHeight: getWidgetMaxHeight(theme),\n    },\n  }\n})\n\nexport const FlexContainer: React.FC<ContainerProps> = styled(Container)({\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n})\n\nexport const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {\n  // const ref = useRef<HTMLDivElement>(null);\n  const { variant, elementId, theme } = useWidgetConfig()\n  const { headerHeight } = useHeaderHeight()\n  const positionFixedAdjustment =\n    theme?.header?.position === 'fixed' ? headerHeight : 0\n\n  return (\n    <RelativeContainer\n      variant={variant}\n      id={createElementId(ElementId.RelativeContainer, elementId)}\n    >\n      <CssBaselineContainer\n        id={createElementId(ElementId.ScrollableContainer, elementId)}\n        variant={variant}\n        enableColorScheme\n        paddingTopAdjustment={positionFixedAdjustment}\n        elementId={elementId}\n        // ref={ref}\n      >\n        <FlexContainer disableGutters>{children}</FlexContainer>\n      </CssBaselineContainer>\n      {/* <ScrollToLocation elementRef={ref} /> */}\n    </RelativeContainer>\n  )\n}\n\n// export const ScrollToLocation: React.FC<{\n//   elementRef: RefObject<HTMLElement>;\n// }> = ({ elementRef }) => {\n//   const { pathname } = useLocation();\n//   useLayoutEffect(() => {\n//     elementRef.current?.scrollTo(0, 0);\n//   }, [elementRef, pathname]);\n//   return null;\n// };\n"],"mappings":";;;;;;;AAkBA,MAAa,uBAA2C,OAAO,GAAG,CAAC,EAChE,EAAE,YAAY;CACb,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,MAAM;EACN,QACE,MAAM,WAAW,YAAY,SACzB,SACA,MAAM,WAAW,YACf,SACA,MAAM,WAAW,UAAU;CACrC;AACF,CACF;AAEA,MAAa,oBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACxC,CAAC,CAAC,EAA+B,EAAE,YAAY;CAC7C,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,KAAK;CAC9B,OAAO;EACL,UAAU;EACV,WAAW;EACX,OAAO;EACP,UAAU,MAAM,YAAY,OAAO;EACnC,UAAU,MAAM,YAAY,OAAO;EACnC,YAAY,MAAM,KAAK,QAAQ,WAAW;EAC1C,UAAU;EACV,MAAM;EACN,GAAG,MAAM;EACT,WACE,MAAM,WAAW,YAAY,UAAU,CAAC,MAAM,WAAW,SACrD,SACA;EACN,QAAQ;EACR,UAAU,CACR;GACE,OAAO,EACL,SAAS,SACX;GACA,OAAO;IACL,WAAW;IACX,QAAQ;IACR,WAAW;IACX,cAAc;GAChB;EACF,CACF;CACF;AACF,CAAC;AAQD,MAAM,uBAAuB,OAAO,mBAAmB,EACrD,oBAAoB,SAClB,CAAC;CAAC;CAAW;CAAwB;AAAW,CAAC,CAAC,SAAS,IAAc,EAC7E,CAAC,CAAC,EAA6B,EAAE,OAAO,SAAS,2BAA2B;CAC1E,MAAM,YACJ,MAAM,WAAW,WAAW,iBAC3B,CAAC,MAAM,WAAW,UAAU,CAAC,MAAM,WAAW,YAC3C,SACA,mBAAmB,KAAK;CAC9B,OAAO;EACL,SAAS;EACT,MAAM;EACN,eAAe;EACf,WAAW;EACX,QAAQ;EACR,OAAO;EACP,WACE,YAAY,YAAY,MAAM,WAAW,YAAY,SACjD,SACA;EACN,WAAW;EACX,QAAQ,MAAM,WAAW,YAAY,SAAS,SAAS;EACvD,YAAY;EACZ,qBAAqB;GACnB,WAAW,mBAAmB,KAAK;GACnC,WAAW,mBAAmB,KAAK;EACrC;CACF;AACF,CAAC;AAED,MAAa,gBAA0C,OAAO,SAAS,CAAC,CAAC;CACvE,SAAS;CACT,eAAe;CACf,MAAM;AACR,CAAC;AAED,MAAa,gBAA6C,EAAE,eAAe;CAEzE,MAAM,EAAE,SAAS,WAAW,UAAU,gBAAgB;CACtD,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,0BACJ,OAAO,QAAQ,aAAa,UAAU,eAAe;CAEvD,OACE,oBAAC,mBAAD;EACW;EACT,IAAI,gBAAA,6BAA6C,SAAS;YAE1D,oBAAC,sBAAD;GACE,IAAI,gBAAA,+BAA+C,SAAS;GACnD;GACT,mBAAA;GACA,sBAAsB;GACX;aAGX,oBAAC,eAAD;IAAe,gBAAA;IAAgB;GAAwB,CAAA;EACnC,CAAA;CAEL,CAAA;AAEvB"}