@lifi/widget 4.0.0-alpha.3 → 4.0.0-alpha.5

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

@@ -1,46 +1,38 @@
-import { Box, InputBase, inputBaseClasses, FormControl as MuiFormControl, styled, } from '@mui/material';
-import { CardTitle } from '../Card/CardTitle.js';
-export const maxInputFontSize = 24;
-export const minInputFontSize = 14;
-export const FormContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(2),
+import { CardTitle } from "../Card/CardTitle.js";
+import { Box, FormControl, InputBase, inputBaseClasses, styled } from "@mui/material";
+//#region src/components/AmountInput/AmountInput.style.tsx
+const FormContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	padding: theme.spacing(2)
 }));
-export const FormControl = styled(MuiFormControl)(() => ({
-    height: 40,
+const FormControl$1 = styled(FormControl)(() => ({ height: 40 }));
+const Input = styled(InputBase)(({ theme }) => ({
+	fontSize: 24,
+	fontWeight: 700,
+	boxShadow: "none",
+	lineHeight: 1.5,
+	[`.${inputBaseClasses.input}`]: {
+		height: 24,
+		padding: theme.spacing(0, 0, 0, 2)
+	},
+	"& input[type=\"number\"]::-webkit-outer-spin-button, & input[type=\"number\"]::-webkit-inner-spin-button": {
+		WebkitAppearance: "none",
+		margin: 0
+	},
+	"& input[type=\"number\"]": { MozAppearance: "textfield" },
+	[`&.${inputBaseClasses.disabled}`]: { color: "inherit" },
+	[`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: { WebkitTextFillColor: "unset" }
 }));
-export const Input = styled(InputBase)(({ theme }) => ({
-    fontSize: 24,
-    fontWeight: 700,
-    boxShadow: 'none',
-    lineHeight: 1.5,
-    [`.${inputBaseClasses.input}`]: {
-        height: 24,
-        padding: theme.spacing(0, 0, 0, 2),
-    },
-    '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button': {
-        WebkitAppearance: 'none',
-        margin: 0,
-    },
-    '& input[type="number"]': {
-        MozAppearance: 'textfield',
-    },
-    [`&.${inputBaseClasses.disabled}`]: {
-        color: 'inherit',
-    },
-    [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
-        WebkitTextFillColor: 'unset',
-    },
-}));
-export const AmountInputCardTitle = styled(CardTitle)(({ theme }) => ({
-    padding: theme.spacing(2, 0, 0, 0),
-}));
-export const AmountInputCardHeader = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(0, 2, 0, 2),
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'start',
-    height: 30,
+const AmountInputCardTitle = styled(CardTitle)(({ theme }) => ({ padding: theme.spacing(0) }));
+const AmountInputCardHeader = styled(Box)(({ theme }) => ({
+	padding: theme.spacing(2, 2, 0, 2),
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	height: 30
 }));
+//#endregion
+export { AmountInputCardHeader, AmountInputCardTitle, FormContainer, FormControl$1 as FormControl, Input };
+
 //# sourceMappingURL=AmountInput.style.js.map

package/dist/esm/components/AmountInput/AmountInput.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.style.js","sourceRoot":"","sources":["../../../../src/components/AmountInput/AmountInput.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,SAAS,EACT,gBAAgB,EAChB,WAAW,IAAI,cAAc,EAC7B,MAAM,GACP,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAEhD,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAClC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACvD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAC1B,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACvD,MAAM,EAAE,EAAE;CACX,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACrD,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,GAAG;IACf,CAAC,IAAI,gBAAgB,CAAC,KAAK,EAAE,CAAC,EAAE;QAC9B,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;KACnC;IACD,sGAAsG,EACpG;QACE,gBAAgB,EAAE,MAAM;QACxB,MAAM,EAAE,CAAC;KACV;IACH,wBAAwB,EAAE;QACxB,aAAa,EAAE,WAAW;KAC3B;IACD,CAAC,KAAK,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE;QAClC,KAAK,EAAE,SAAS;KACjB;IACD,CAAC,IAAI,gBAAgB,CAAC,KAAK,IAAI,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE;QAC3D,mBAAmB,EAAE,OAAO;KAC7B;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;CACnC,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAClC,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,eAAe;IAC/B,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,EAAE;CACX,CAAC,CAAC,CAAA"}
+{"version":3,"file":"AmountInput.style.js","names":["FormControl","MuiFormControl"],"sources":["../../../../src/components/AmountInput/AmountInput.style.tsx"],"sourcesContent":["import {\n  Box,\n  InputBase,\n  inputBaseClasses,\n  FormControl as MuiFormControl,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { CardTitle } from '../Card/CardTitle.js'\n\nexport const maxInputFontSize = 24\nexport const minInputFontSize = 14\n\nexport const FormContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(2),\n}))\n\nexport const FormControl: React.FC<\n  React.ComponentProps<typeof MuiFormControl>\n> = styled(MuiFormControl)(() => ({\n  height: 40,\n}))\n\nexport const Input: React.FC<React.ComponentProps<typeof InputBase>> = styled(\n  InputBase\n)(({ theme }) => ({\n  fontSize: 24,\n  fontWeight: 700,\n  boxShadow: 'none',\n  lineHeight: 1.5,\n  [`.${inputBaseClasses.input}`]: {\n    height: 24,\n    padding: theme.spacing(0, 0, 0, 2),\n  },\n  '& input[type=\"number\"]::-webkit-outer-spin-button, & input[type=\"number\"]::-webkit-inner-spin-button':\n    {\n      WebkitAppearance: 'none',\n      margin: 0,\n    },\n  '& input[type=\"number\"]': {\n    MozAppearance: 'textfield',\n  },\n  [`&.${inputBaseClasses.disabled}`]: {\n    color: 'inherit',\n  },\n  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {\n    WebkitTextFillColor: 'unset',\n  },\n}))\n\nexport const AmountInputCardTitle: React.FC<\n  React.ComponentProps<typeof CardTitle>\n> = styled(CardTitle)(({ theme }) => ({\n  padding: theme.spacing(0),\n}))\n\nexport const AmountInputCardHeader: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    padding: theme.spacing(2, 2, 0, 2),\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    height: 30,\n  }))\n"],"mappings":";;;AAaA,MAAa,gBAA4D,OACvE,IACD,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,SAAS,MAAM,QAAQ,EAAE;CAC1B,EAAE;AAEH,MAAaA,gBAET,OAAOC,YAAe,QAAQ,EAChC,QAAQ,IACT,EAAE;AAEH,MAAa,QAA0D,OACrE,UACD,EAAE,EAAE,aAAa;CAChB,UAAU;CACV,YAAY;CACZ,WAAW;CACX,YAAY;EACX,IAAI,iBAAiB,UAAU;EAC9B,QAAQ;EACR,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,EAAE;EACnC;CACD,4GACE;EACE,kBAAkB;EAClB,QAAQ;EACT;CACH,4BAA0B,EACxB,eAAe,aAChB;EACA,KAAK,iBAAiB,aAAa,EAClC,OAAO,WACR;EACA,IAAI,iBAAiB,MAAM,GAAG,iBAAiB,aAAa,EAC3D,qBAAqB,SACtB;CACF,EAAE;AAEH,MAAa,uBAET,OAAO,UAAU,EAAE,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,EAAE,EAC1B,EAAE;AAEH,MAAa,wBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,EAAE;CAClC,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACT,EAAE"}

package/dist/esm/components/AmountInput/AmountInputEndAdornment.js

@@ -1,55 +1,64 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatUnits } from '@lifi/sdk';
-import { InputAdornment } from '@mui/material';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAvailableChains } from '../../hooks/useAvailableChains.js';
-import { useGasRecommendation } from '../../hooks/useGasRecommendation.js';
-import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { ButtonContainer, MaxButton } from './AmountInputAdornment.style.js';
-export const AmountInputEndAdornment = memo(({ formType }) => {
-    const { t } = useTranslation();
-    const { getChainById } = useAvailableChains();
-    const { setFieldValue } = useFieldActions();
-    const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
-    // We get gas recommendations for the source chain to make sure that after pressing the Max button
-    // the user will have enough funds remaining to cover gas costs
-    const { data } = useGasRecommendation(chainId);
-    const { token } = useTokenAddressBalance(chainId, tokenAddress);
-    const getMaxAmount = () => {
-        if (!token?.amount) {
-            return 0n;
-        }
-        const chain = getChainById(chainId);
-        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 handlePercentage = (percentage) => {
-        const maxAmount = getMaxAmount();
-        if (maxAmount && token?.decimals) {
-            const percentageAmount = (maxAmount * BigInt(percentage)) / 100n;
-            setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(percentageAmount, token.decimals), {
-                isTouched: true,
-            });
-        }
-    };
-    const handleMax = () => {
-        const maxAmount = getMaxAmount();
-        if (maxAmount && token?.decimals) {
-            setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(maxAmount, token.decimals), {
-                isTouched: true,
-            });
-        }
-    };
-    return (_jsx(InputAdornment, { position: "end", sx: { paddingTop: 2 }, children: formType === 'from' && token?.amount ? (_jsxs(ButtonContainer, { children: [_jsx(MaxButton, { onClick: () => handlePercentage(25), "data-delay": "0", children: "25%" }), _jsx(MaxButton, { onClick: () => handlePercentage(50), "data-delay": "1", children: "50%" }), _jsx(MaxButton, { onClick: () => handlePercentage(75), "data-delay": "2", children: "75%" }), _jsx(MaxButton, { onClick: handleMax, "data-delay": "3", children: t('button.max') })] })) : null }));
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useGasRecommendation } from "../../hooks/useGasRecommendation.js";
+import { useTokenAddressBalance } from "../../hooks/useTokenAddressBalance.js";
+import { AmountInputButton, ButtonContainer } from "./AmountInputEndAdornment.style.js";
+import { formatUnits } from "@lifi/sdk";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/AmountInput/AmountInputEndAdornment.tsx
+const AmountInputEndAdornment = memo(({ formType }) => {
+	const { t } = useTranslation();
+	const { getChainById } = useAvailableChains();
+	const { setFieldValue } = useFieldActions();
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+	const { data } = useGasRecommendation(chainId);
+	const { token } = useTokenAddressBalance(chainId, tokenAddress);
+	const getMaxAmount = () => {
+		if (!token?.amount) return 0n;
+		const chain = getChainById(chainId);
+		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 handlePercentage = (percentage) => {
+		const maxAmount = getMaxAmount();
+		if (maxAmount && token?.decimals) {
+			const percentageAmount = maxAmount * BigInt(percentage) / 100n;
+			setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(percentageAmount, token.decimals), { isTouched: true });
+		}
+	};
+	const handleMax = () => {
+		const maxAmount = getMaxAmount();
+		if (maxAmount && token?.decimals) setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(maxAmount, token.decimals), { isTouched: true });
+	};
+	if (formType !== "from" || !token) return null;
+	return /* @__PURE__ */ jsxs(ButtonContainer, { children: [
+		/* @__PURE__ */ jsx(AmountInputButton, {
+			onClick: () => handlePercentage(25),
+			children: "25%"
+		}),
+		/* @__PURE__ */ jsx(AmountInputButton, {
+			onClick: () => handlePercentage(50),
+			children: "50%"
+		}),
+		/* @__PURE__ */ jsx(AmountInputButton, {
+			onClick: () => handlePercentage(75),
+			children: "75%"
+		}),
+		/* @__PURE__ */ jsx(AmountInputButton, {
+			onClick: handleMax,
+			children: t("button.max")
+		})
+	] });
 });
+//#endregion
+export { AmountInputEndAdornment };
+
 //# sourceMappingURL=AmountInputEndAdornment.js.map

package/dist/esm/components/AmountInput/AmountInputEndAdornment.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInputEndAdornment.js","sourceRoot":"","sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AmountInputEndAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useGasRecommendation } from '../../hooks/useGasRecommendation.js'\nimport { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.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 {\n  AmountInputButton,\n  ButtonContainer,\n} from './AmountInputEndAdornment.style.js'\n\nexport const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps> =\n  memo(({ formType }: FormTypeProps): JSX.Element | null => {\n    const { t } = useTranslation()\n    const { getChainById } = useAvailableChains()\n    const { setFieldValue } = useFieldActions()\n\n    const [chainId, tokenAddress] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType)\n    )\n\n    // We get gas recommendations for the source chain to make sure that after pressing the Max button\n    // the user will have enough funds remaining to cover gas costs\n    const { data } = useGasRecommendation(chainId)\n\n    const { token } = useTokenAddressBalance(chainId, tokenAddress)\n\n    const getMaxAmount = () => {\n      if (!token?.amount) {\n        return 0n\n      }\n      const chain = getChainById(chainId)\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    const handlePercentage = (percentage: number) => {\n      const maxAmount = getMaxAmount()\n      if (maxAmount && token?.decimals) {\n        const percentageAmount = (maxAmount * BigInt(percentage)) / 100n\n        setFieldValue(\n          FormKeyHelper.getAmountKey(formType),\n          formatUnits(percentageAmount, token.decimals),\n          {\n            isTouched: true,\n          }\n        )\n      }\n    }\n\n    const handleMax = () => {\n      const maxAmount = getMaxAmount()\n      if (maxAmount && token?.decimals) {\n        setFieldValue(\n          FormKeyHelper.getAmountKey(formType),\n          formatUnits(maxAmount, token.decimals),\n          {\n            isTouched: true,\n          }\n        )\n      }\n    }\n\n    if (formType !== 'from' || !token) {\n      return null\n    }\n\n    return (\n      <ButtonContainer>\n        <AmountInputButton onClick={() => handlePercentage(25)}>\n          25%\n        </AmountInputButton>\n        <AmountInputButton onClick={() => handlePercentage(50)}>\n          50%\n        </AmountInputButton>\n        <AmountInputButton onClick={() => handlePercentage(75)}>\n          75%\n        </AmountInputButton>\n        <AmountInputButton onClick={handleMax}>\n          {t('button.max')}\n        </AmountInputButton>\n      </ButtonContainer>\n    )\n  })\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAa,0BACX,MAAM,EAAE,eAAkD;CACxD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,iBAAiB,oBAAoB;CAC7C,MAAM,EAAE,kBAAkB,iBAAiB;CAE3C,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAID,MAAM,EAAE,SAAS,qBAAqB,QAAQ;CAE9C,MAAM,EAAE,UAAU,uBAAuB,SAAS,aAAa;CAE/D,MAAM,qBAAqB;AACzB,MAAI,CAAC,OAAO,OACV,QAAO;EAET,MAAM,QAAQ,aAAa,QAAQ;EACnC,IAAI,YAAY,MAAM;AACtB,MAAI,OAAO,YAAY,YAAY,gBAAgB,MAAM,aAAa;GACpE,MAAM,oBAAoB,OAAO,KAAK,YAAY,OAAO;AACzD,OAAI,MAAM,SAAS,kBACjB,aAAY,MAAM,SAAS;;AAG/B,SAAO;;CAGT,MAAM,oBAAoB,eAAuB;EAC/C,MAAM,YAAY,cAAc;AAChC,MAAI,aAAa,OAAO,UAAU;GAChC,MAAM,mBAAoB,YAAY,OAAO,WAAW,GAAI;AAC5D,iBACE,cAAc,aAAa,SAAS,EACpC,YAAY,kBAAkB,MAAM,SAAS,EAC7C,EACE,WAAW,MACZ,CACF;;;CAIL,MAAM,kBAAkB;EACtB,MAAM,YAAY,cAAc;AAChC,MAAI,aAAa,OAAO,SACtB,eACE,cAAc,aAAa,SAAS,EACpC,YAAY,WAAW,MAAM,SAAS,EACtC,EACE,WAAW,MACZ,CACF;;AAIL,KAAI,aAAa,UAAU,CAAC,MAC1B,QAAO;AAGT,QACE,qBAAC,iBAAD,EAAA,UAAA;EACE,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,GAAG;aAAE;GAEpC,CAAA;EACpB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,GAAG;aAAE;GAEpC,CAAA;EACpB,oBAAC,mBAAD;GAAmB,eAAe,iBAAiB,GAAG;aAAE;GAEpC,CAAA;EACpB,oBAAC,mBAAD;GAAmB,SAAS;aACzB,EAAE,aAAa;GACE,CAAA;EACJ,EAAA,CAAA;EAEpB"}

package/dist/esm/components/AmountInput/AmountInputEndAdornment.style.js

@@ -0,0 +1,21 @@
+import { ButtonTertiary } from "../ButtonTertiary.js";
+import { Box, styled } from "@mui/material";
+//#region src/components/AmountInput/AmountInputEndAdornment.style.ts
+const ButtonContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	gap: theme.spacing(1),
+	padding: theme.spacing(0, 2, 2, 2)
+}));
+const AmountInputButton = styled(ButtonTertiary)(({ theme }) => ({
+	flex: 1,
+	padding: theme.spacing(.5, 1.5),
+	fontSize: 12,
+	fontWeight: 700,
+	lineHeight: 1.3334,
+	height: "auto",
+	borderRadius: theme.shape.borderRadiusSecondary
+}));
+//#endregion
+export { AmountInputButton, ButtonContainer };
+
+//# sourceMappingURL=AmountInputEndAdornment.style.js.map

package/dist/esm/components/AmountInput/AmountInputEndAdornment.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputEndAdornment.style.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.style.ts"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\n\nexport const ButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    gap: theme.spacing(1),\n    padding: theme.spacing(0, 2, 2, 2),\n  }))\n\nexport const AmountInputButton: React.FC<\n  React.ComponentProps<typeof ButtonTertiary>\n> = styled(ButtonTertiary)(({ theme }) => ({\n  flex: 1,\n  padding: theme.spacing(0.5, 1.5),\n  fontSize: 12,\n  fontWeight: 700,\n  lineHeight: 1.3334,\n  height: 'auto',\n  borderRadius: theme.shape.borderRadiusSecondary,\n}))\n"],"mappings":";;;AAIA,MAAa,kBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,KAAK,MAAM,QAAQ,EAAE;CACrB,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,EAAE;CACnC,EAAE;AAEL,MAAa,oBAET,OAAO,eAAe,EAAE,EAAE,aAAa;CACzC,MAAM;CACN,SAAS,MAAM,QAAQ,IAAK,IAAI;CAChC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,cAAc,MAAM,MAAM;CAC3B,EAAE"}

package/dist/esm/components/AmountInput/AmountInputStartAdornment.js

@@ -1,15 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useChain } from '../../hooks/useChain.js';
-import { useToken } from '../../hooks/useToken.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { AvatarBadgedDefault } from '../Avatar/Avatar.js';
-import { TokenAvatar } from '../Avatar/TokenAvatar.js';
-export const AmountInputStartAdornment = ({ formType, }) => {
-    const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
-    const { chain } = useChain(chainId);
-    const { token } = useToken(chainId, tokenAddress);
-    const isSelected = !!(chain && token);
-    return isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(AvatarBadgedDefault, {}));
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChain } from "../../hooks/useChain.js";
+import { useToken } from "../../hooks/useToken.js";
+import { AvatarBadgedDefault } from "../Avatar/Avatar.js";
+import { TokenAvatar } from "../Avatar/TokenAvatar.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/AmountInput/AmountInputStartAdornment.tsx
+const AmountInputStartAdornment = ({ formType }) => {
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+	const { chain } = useChain(chainId);
+	const { token } = useToken(chainId, tokenAddress);
+	return !!(chain && token) ? /* @__PURE__ */ jsx(TokenAvatar, {
+		token,
+		chain
+	}) : /* @__PURE__ */ jsx(AvatarBadgedDefault, {});
 };
+//#endregion
+export { AmountInputStartAdornment };
+
 //# sourceMappingURL=AmountInputStartAdornment.js.map

package/dist/esm/components/AmountInput/AmountInputStartAdornment.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInputStartAdornment.js","sourceRoot":"","sources":["../../../../src/components/AmountInput/AmountInputStartAdornment.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,MAAM,CAAC,MAAM,yBAAyB,GAA4B,CAAC,EACjE,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,cAAc,CAC5C,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,EACnC,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,CACpC,CAAA;IAED,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,CAAA;IACjD,MAAM,UAAU,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,CAAA;IAErC,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5C,CAAC,CAAC,CAAC,CACF,KAAC,mBAAmB,KAAG,CACxB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"AmountInputStartAdornment.js","names":[],"sources":["../../../../src/components/AmountInput/AmountInputStartAdornment.tsx"],"sourcesContent":["import { useChain } from '../../hooks/useChain.js'\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 { AvatarBadgedDefault } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\n\nexport const AmountInputStartAdornment: React.FC<FormTypeProps> = ({\n  formType,\n}) => {\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    FormKeyHelper.getTokenKey(formType)\n  )\n\n  const { chain } = useChain(chainId)\n  const { token } = useToken(chainId, tokenAddress)\n  const isSelected = !!(chain && token)\n\n  return isSelected ? (\n    <TokenAvatar token={token} chain={chain} />\n  ) : (\n    <AvatarBadgedDefault />\n  )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,6BAAsD,EACjE,eACI;CACJ,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAED,MAAM,EAAE,UAAU,SAAS,QAAQ;CACnC,MAAM,EAAE,UAAU,SAAS,SAAS,aAAa;AAGjD,QAFmB,CAAC,EAAE,SAAS,SAG7B,oBAAC,aAAD;EAAoB;EAAc;EAAS,CAAA,GAE3C,oBAAC,qBAAD,EAAuB,CAAA"}

package/dist/esm/components/AmountInput/PriceFormHelperText.js

@@ -1,73 +1,98 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SwapVertIcon from '@mui/icons-material/SwapVert';
-import { FormHelperText, Skeleton, Typography } from '@mui/material';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js';
-import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
-import { InputPriceButton } from './PriceFormHelperText.style.js';
-export const PriceFormHelperText = memo(({ formType }) => {
-    const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
-    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
-    return (_jsx(PriceFormHelperTextBase, { formType: formType, isLoading: isLoading, tokenAddress: tokenAddress, token: token }));
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
+import { useInputModeStore } from "../../stores/inputMode/useInputModeStore.js";
+import { useTokenAddressBalance } from "../../hooks/useTokenAddressBalance.js";
+import { InputPriceButton } from "./PriceFormHelperText.style.js";
+import { memo } from "react";
+import { FormHelperText, Skeleton, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SwapVertIcon from "@mui/icons-material/SwapVert";
+//#region src/components/AmountInput/PriceFormHelperText.tsx
+const PriceFormHelperText = memo(({ formType }) => {
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+	const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+	return /* @__PURE__ */ jsx(PriceFormHelperTextBase, {
+		formType,
+		isLoading,
+		tokenAddress,
+		token
+	});
 });
 const PriceFormHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
-    const { t } = useTranslation();
-    const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType));
-    const { inputMode, toggleInputMode } = useInputModeStore();
-    const currentInputMode = inputMode[formType];
-    const tokenAmount = token
-        ? formatTokenAmount(token.amount, token.decimals)
-        : '0';
-    const getPriceAmountDisplayValue = () => {
-        if (currentInputMode === 'amount') {
-            const tokenPrice = formatTokenPrice(amount, token?.priceUSD, token?.decimals);
-            return t('format.currency', { value: tokenPrice });
-        }
-        else {
-            return t('format.tokenAmount', { value: amount || '0' });
-        }
-    };
-    const handleToggleMode = (e) => {
-        e.stopPropagation();
-        toggleInputMode(formType);
-    };
-    return (_jsxs(FormHelperText, { component: "div", sx: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            margin: 0,
-            marginLeft: 1.25,
-            marginTop: 0.5,
-        }, children: [_jsxs(InputPriceButton, { onClick: token?.priceUSD ? handleToggleMode : undefined, children: [_jsx(Typography, { sx: {
-                            color: 'text.secondary',
-                            fontWeight: 500,
-                            fontSize: 12,
-                            lineHeight: 1,
-                            marginRight: 0.25,
-                            maxWidth: 136,
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }, children: getPriceAmountDisplayValue() }), currentInputMode === 'price' && token?.symbol ? (_jsx(Typography, { sx: {
-                            color: 'text.secondary',
-                            fontWeight: 500,
-                            fontSize: 12,
-                            lineHeight: 1,
-                            wordBreak: 'break-word',
-                            overflowWrap: 'break-word',
-                            marginRight: 0.25,
-                        }, children: token.symbol })) : null, token?.priceUSD && _jsx(SwapVertIcon, { sx: { fontSize: 14 } })] }), isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "text", width: 56, height: 16 })) : token?.amount ? (_jsx(Typography, { sx: {
-                    fontWeight: 500,
-                    fontSize: 12,
-                    color: 'text.secondary',
-                    lineHeight: 1,
-                    paddingLeft: 0.25,
-                }, title: tokenAmount, children: `/ ${t('format.tokenAmount', {
-                    value: tokenAmount,
-                })}` })) : null] }));
+	const { t } = useTranslation();
+	const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType));
+	const { inputMode, toggleInputMode } = useInputModeStore();
+	const currentInputMode = inputMode[formType];
+	const tokenAmount = token ? formatTokenAmount(token.amount, token.decimals) : "0";
+	const getPriceAmountDisplayValue = () => {
+		if (currentInputMode === "amount") return t("format.currency", { value: formatTokenPrice(amount, token?.priceUSD, token?.decimals) });
+		else return t("format.tokenAmount", { value: amount || "0" });
+	};
+	const handleToggleMode = (e) => {
+		e.stopPropagation();
+		toggleInputMode(formType);
+	};
+	return /* @__PURE__ */ jsxs(FormHelperText, {
+		component: "div",
+		sx: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "center",
+			margin: 0,
+			marginLeft: 1.25,
+			marginTop: .5
+		},
+		children: [/* @__PURE__ */ jsxs(InputPriceButton, {
+			onClick: token?.priceUSD ? handleToggleMode : void 0,
+			children: [
+				/* @__PURE__ */ jsx(Typography, {
+					sx: {
+						color: "text.secondary",
+						fontWeight: 500,
+						fontSize: 12,
+						lineHeight: 1,
+						marginRight: .25,
+						maxWidth: 136,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					children: getPriceAmountDisplayValue()
+				}),
+				currentInputMode === "price" && token?.symbol ? /* @__PURE__ */ jsx(Typography, {
+					sx: {
+						color: "text.secondary",
+						fontWeight: 500,
+						fontSize: 12,
+						lineHeight: 1,
+						wordBreak: "break-word",
+						overflowWrap: "break-word",
+						marginRight: .25
+					},
+					children: token.symbol
+				}) : null,
+				token?.priceUSD && /* @__PURE__ */ jsx(SwapVertIcon, { sx: { fontSize: 14 } })
+			]
+		}), isLoading && tokenAddress ? /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			width: 56,
+			height: 16
+		}) : token?.amount ? /* @__PURE__ */ jsx(Typography, {
+			sx: {
+				fontWeight: 500,
+				fontSize: 12,
+				color: "text.secondary",
+				lineHeight: 1,
+				paddingLeft: .25
+			},
+			title: tokenAmount,
+			children: `/ ${t("format.tokenAmount", { value: tokenAmount })}`
+		}) : null]
+	});
 };
+//#endregion
+export { PriceFormHelperText };
+
 //# sourceMappingURL=PriceFormHelperText.js.map

package/dist/esm/components/AmountInput/PriceFormHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"PriceFormHelperText.js","sourceRoot":"","sources":["../../../../src/components/AmountInput/PriceFormHelperText.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PriceFormHelperText.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\nimport { FormHelperText, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { 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 { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { InputPriceButton } from './PriceFormHelperText.style.js'\n\nexport const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =\n  memo<FormTypeProps>(({ formType }) => {\n    const [chainId, tokenAddress] = useFieldValues(\n      FormKeyHelper.getChainKey(formType),\n      FormKeyHelper.getTokenKey(formType)\n    )\n    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)\n\n    return (\n      <PriceFormHelperTextBase\n        formType={formType}\n        isLoading={isLoading}\n        tokenAddress={tokenAddress}\n        token={token}\n      />\n    )\n  })\n\nconst PriceFormHelperTextBase: React.FC<\n  FormTypeProps & {\n    isLoading?: boolean\n    tokenAddress?: string\n    token?: TokenAmount\n  }\n> = ({ formType, isLoading, tokenAddress, token }) => {\n  const { t } = useTranslation()\n  const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))\n  const { inputMode, toggleInputMode } = useInputModeStore()\n\n  const currentInputMode = inputMode[formType]\n\n  const tokenAmount = token\n    ? formatTokenAmount(token.amount, token.decimals)\n    : '0'\n\n  const getPriceAmountDisplayValue = () => {\n    if (currentInputMode === 'amount') {\n      const tokenPrice = formatTokenPrice(\n        amount,\n        token?.priceUSD,\n        token?.decimals\n      )\n      return t('format.currency', { value: tokenPrice })\n    } else {\n      return t('format.tokenAmount', { value: amount || '0' })\n    }\n  }\n\n  const handleToggleMode = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    toggleInputMode(formType)\n  }\n\n  return (\n    <FormHelperText\n      component=\"div\"\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        margin: 0,\n        marginLeft: 1.25,\n        marginTop: 0.5,\n      }}\n    >\n      <InputPriceButton\n        onClick={token?.priceUSD ? handleToggleMode : undefined}\n      >\n        <Typography\n          sx={{\n            color: 'text.secondary',\n            fontWeight: 500,\n            fontSize: 12,\n            lineHeight: 1,\n            marginRight: 0.25,\n            maxWidth: 136,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {getPriceAmountDisplayValue()}\n        </Typography>\n        {currentInputMode === 'price' && token?.symbol ? (\n          <Typography\n            sx={{\n              color: 'text.secondary',\n              fontWeight: 500,\n              fontSize: 12,\n              lineHeight: 1,\n              wordBreak: 'break-word',\n              overflowWrap: 'break-word',\n              marginRight: 0.25,\n            }}\n          >\n            {token.symbol}\n          </Typography>\n        ) : null}\n        {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}\n      </InputPriceButton>\n      {isLoading && tokenAddress ? (\n        <Skeleton variant=\"text\" width={56} height={16} />\n      ) : token?.amount ? (\n        <Typography\n          sx={{\n            fontWeight: 500,\n            fontSize: 12,\n            color: 'text.secondary',\n            lineHeight: 1,\n            paddingLeft: 0.25,\n          }}\n          title={tokenAmount}\n        >\n          {`/ ${t('format.tokenAmount', {\n            value: tokenAmount,\n          })}`}\n        </Typography>\n      ) : null}\n    </FormHelperText>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,sBACX,MAAqB,EAAE,eAAe;CACpC,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,EAAE,OAAO,cAAc,uBAAuB,SAAS,aAAa;AAE1E,QACE,oBAAC,yBAAD;EACY;EACC;EACG;EACP;EACP,CAAA;EAEJ;AAEJ,MAAM,2BAMD,EAAE,UAAU,WAAW,cAAc,YAAY;CACpD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,cAAc,aAAa,SAAS,CAAC;CACrE,MAAM,EAAE,WAAW,oBAAoB,mBAAmB;CAE1D,MAAM,mBAAmB,UAAU;CAEnC,MAAM,cAAc,QAChB,kBAAkB,MAAM,QAAQ,MAAM,SAAS,GAC/C;CAEJ,MAAM,mCAAmC;AACvC,MAAI,qBAAqB,SAMvB,QAAO,EAAE,mBAAmB,EAAE,OALX,iBACjB,QACA,OAAO,UACP,OAAO,SACR,EACgD,CAAC;MAElD,QAAO,EAAE,sBAAsB,EAAE,OAAO,UAAU,KAAK,CAAC;;CAI5D,MAAM,oBAAoB,MAAwB;AAChD,IAAE,iBAAiB;AACnB,kBAAgB,SAAS;;AAG3B,QACE,qBAAC,gBAAD;EACE,WAAU;EACV,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;GACZ;YATH,CAWE,qBAAC,kBAAD;GACE,SAAS,OAAO,WAAW,mBAAmB,KAAA;aADhD;IAGE,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,aAAa;MACb,UAAU;MACV,UAAU;MACV,cAAc;MACd,YAAY;MACb;eAEA,4BAA4B;KAClB,CAAA;IACZ,qBAAqB,WAAW,OAAO,SACtC,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,YAAY;MACZ,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACd,aAAa;MACd;eAEA,MAAM;KACI,CAAA,GACX;IACH,OAAO,YAAY,oBAAC,cAAD,EAAc,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA;IACzC;MAClB,aAAa,eACZ,oBAAC,UAAD;GAAU,SAAQ;GAAO,OAAO;GAAI,QAAQ;GAAM,CAAA,GAChD,OAAO,SACT,oBAAC,YAAD;GACE,IAAI;IACF,YAAY;IACZ,UAAU;IACV,OAAO;IACP,YAAY;IACZ,aAAa;IACd;GACD,OAAO;aAEN,KAAK,EAAE,sBAAsB,EAC5B,OAAO,aACR,CAAC;GACS,CAAA,GACX,KACW"}

package/dist/esm/components/AmountInput/PriceFormHelperText.style.js

@@ -1,32 +1,28 @@
-import { Button, styled } from '@mui/material';
-export const InputPriceButton = styled(Button)(({ theme, onClick }) => ({
-    color: theme.vars.palette.text.secondary,
-    padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
-    maxHeight: 16,
-    fontSize: '0.75rem',
-    fontWeight: 500,
-    borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
-    backgroundColor: 'transparent',
-    minWidth: 32,
-    ...(onClick
-        ? {
-            '&:hover': {
-                backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-            },
-            ...theme.applyStyles('dark', {
-                backgroundColor: 'transparent',
-                '&:hover': {
-                    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-                },
-            }),
-        }
-        : {
-            cursor: 'text',
-            userSelect: 'text',
-            pointerEvents: 'none',
-            ...theme.applyStyles('dark', {
-                backgroundColor: 'transparent',
-            }),
-        }),
+import { Button, styled } from "@mui/material";
+//#region src/components/AmountInput/PriceFormHelperText.style.tsx
+const InputPriceButton = styled(Button)(({ theme, onClick }) => ({
+	color: theme.vars.palette.text.secondary,
+	padding: theme.spacing(.25, .5, .25, .75),
+	maxHeight: 16,
+	fontSize: "0.75rem",
+	fontWeight: 500,
+	borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
+	backgroundColor: "transparent",
+	minWidth: 32,
+	...onClick ? {
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
+		...theme.applyStyles("dark", {
+			backgroundColor: "transparent",
+			"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
+		})
+	} : {
+		cursor: "text",
+		userSelect: "text",
+		pointerEvents: "none",
+		...theme.applyStyles("dark", { backgroundColor: "transparent" })
+	}
 }));
+//#endregion
+export { InputPriceButton };
+
 //# sourceMappingURL=PriceFormHelperText.style.js.map

package/dist/esm/components/AmountInput/PriceFormHelperText.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PriceFormHelperText.style.js","sourceRoot":"","sources":["../../../../src/components/AmountInput/PriceFormHelperText.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACtE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;IACxC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;IAC7C,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,GAAG;IACf,YAAY,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,OAAO;IAC1D,eAAe,EAAE,aAAa;IAC9B,QAAQ,EAAE,EAAE;IACZ,GAAG,CAAC,OAAO;QACT,CAAC,CAAC;YACE,SAAS,EAAE;gBACT,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;aACjF;YACD,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;gBAC3B,eAAe,EAAE,aAAa;gBAC9B,SAAS,EAAE;oBACT,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;iBACjF;aACF,CAAC;SACH;QACH,CAAC,CAAC;YACE,MAAM,EAAE,MAAM;YACd,UAAU,EAAE,MAAM;YAClB,aAAa,EAAE,MAAM;YACrB,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;gBAC3B,eAAe,EAAE,aAAa;aAC/B,CAAC;SACH,CAAC;CACP,CAAC,CAAC,CAAA"}
+{"version":3,"file":"PriceFormHelperText.style.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.style.tsx"],"sourcesContent":["import { Button, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =\n  styled(Button)(({ theme, onClick }) => ({\n    color: theme.vars.palette.text.secondary,\n    padding: theme.spacing(0.25, 0.5, 0.25, 0.75),\n    maxHeight: 16,\n    fontSize: '0.75rem',\n    fontWeight: 500,\n    borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n    backgroundColor: 'transparent',\n    minWidth: 32,\n    ...(onClick\n      ? {\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n          },\n          ...theme.applyStyles('dark', {\n            backgroundColor: 'transparent',\n            '&:hover': {\n              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n            },\n          }),\n        }\n      : {\n          cursor: 'text',\n          userSelect: 'text',\n          pointerEvents: 'none',\n          ...theme.applyStyles('dark', {\n            backgroundColor: 'transparent',\n          }),\n        }),\n  }))\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,OAAO,EAAE,EAAE,OAAO,eAAe;CACtC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,KAAM,IAAK,KAAM,IAAK;CAC7C,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,UAAU;CACV,GAAI,UACA;EACE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACD,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB;GACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;GACF,CAAC;EACH,GACD;EACE,QAAQ;EACR,YAAY;EACZ,eAAe;EACf,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;EACH;CACN,EAAE"}