@lifi/widget 4.0.0 → 4.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"LimitOrderSettings.style.js","names":["Container"],"sources":["../../../../src/components/LimitOrderSettings/LimitOrderSettings.style.tsx"],"sourcesContent":["import { Box, ButtonBase, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const Container: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n}))\n\nexport const SettingsRow: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  gap: theme.spacing(2),\n  padding: theme.spacing(1.5, 2),\n}))\n\nexport const ToggleLabel: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  fontSize: 14,\n  fontWeight: 700,\n  lineHeight: 1,\n  color: theme.vars.palette.text.primary,\n  flex: '1 0 0',\n  minWidth: 0,\n}))\n\nexport const ExpiryValue: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  color: theme.vars.palette.text.secondary,\n  height: 14,\n}))\n\nexport const SettingItemButton: React.FC<\n  React.ComponentProps<typeof ButtonBase>\n> = styled(ButtonBase)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  width: '100%',\n  padding: theme.spacing(2),\n  borderRadius: theme.vars.shape.borderRadius,\n}))\n\nexport const SettingItemTitle: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  fontWeight: 700,\n  color: theme.vars.palette.text.primary,\n  lineHeight: 1,\n}))\n\nexport const SettingItemValue: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  fontWeight: 700,\n  color: theme.vars.palette.text.primary,\n}))\n"],"mappings":";;AAGA,MAAaA,cAAwD,OACnE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,cAA0D,OACrE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;CACpB,SAAS,MAAM,QAAQ,KAAK,CAAC;AAC/B,EAAE;AAEF,MAAa,cAA0D,OACrE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,MAAM;CACN,UAAU;AACZ,EAAE;AAEF,MAAa,cAA0D,OACrE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAG;CACtB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;AACV,EAAE;AAEF,MAAa,oBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,SAAS,MAAM,QAAQ,CAAC;CACxB,cAAc,MAAM,KAAK,MAAM;AACjC,EAAE;AAEF,MAAa,mBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;AACd,EAAE;AAEF,MAAa,mBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE"}

package/dist/esm/components/LimitPriceCard/LimitPriceCard.js

@@ -0,0 +1,115 @@
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { formatInputAmount } 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 { useRoutes } from "../../hooks/useRoutes.js";
+import { CardTitle } from "../Card/CardTitle.js";
+import { useLimitMarketRate } from "../../hooks/useLimitMarketRate.js";
+import { applyPriceOffset, invertPrice } from "../../utils/limitOrder.js";
+import { useLinkedLimitFields } from "../../hooks/useLinkedLimitFields.js";
+import { AmountCard, CardBodyRow, CardHeaderRow, LargeInput } from "../AmountInputCard/AmountInputCard.style.js";
+import { InvertChip } from "./LimitPriceCard.style.js";
+import { LimitPricePresets } from "./LimitPricePresets.js";
+import { useEffect, useRef, useState } from "react";
+import { Skeleton } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
+//#region src/components/LimitPriceCard/LimitPriceCard.tsx
+const cleanDisplay = (value) => value ? formatInputAmount(value, 8) : "";
+const LimitPriceCard = (props) => {
+	const { t } = useTranslation();
+	const isEditingRef = useRef(false);
+	const [inputValue, setInputValue] = useState("");
+	const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, priceInverted] = useFieldValues(FormKeyHelper.getChainKey("from"), FormKeyHelper.getTokenKey("from"), FormKeyHelper.getChainKey("to"), FormKeyHelper.getTokenKey("to"), "priceInverted");
+	const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
+	const { token: toToken } = useToken(toChainId, toTokenAddress);
+	const { isFetching } = useRoutes();
+	const { limitPrice, setLimitPrice } = useLinkedLimitFields();
+	const { setFieldValue } = useFieldActions();
+	const hasTokens = Boolean(fromToken && toToken);
+	const showSkeleton = isFetching && !limitPrice;
+	const leadToken = priceInverted ? toToken : fromToken;
+	const unitToken = priceInverted ? fromToken : toToken;
+	const marketCanonical = useLimitMarketRate();
+	const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice;
+	useEffect(() => {
+		setFieldValue("toAmount", "", {
+			isDirty: false,
+			isTouched: false
+		});
+		setFieldValue("selectedRouteId", void 0);
+	}, [
+		fromChainId,
+		fromTokenAddress,
+		toChainId,
+		toTokenAddress
+	]);
+	useEffect(() => {
+		if (!isEditingRef.current) setInputValue(cleanDisplay(displayPrice));
+	}, [displayPrice]);
+	const handleChange = (event) => {
+		isEditingRef.current = true;
+		const formatted = formatInputAmount(event.target.value, 18, true);
+		setInputValue(formatted);
+		const numeric = Number(formatted);
+		if (!formatted || Number.isNaN(numeric) || numeric <= 0) {
+			setLimitPrice("");
+			return;
+		}
+		const canonical = priceInverted ? 1 / numeric : numeric;
+		setLimitPrice(String(canonical));
+	};
+	const handleBlur = () => {
+		isEditingRef.current = false;
+		setInputValue(cleanDisplay(displayPrice));
+	};
+	const handleInvert = () => {
+		isEditingRef.current = false;
+		setFieldValue("priceInverted", !priceInverted);
+	};
+	const handlePreset = (pct) => {
+		if (marketCanonical === void 0) return;
+		isEditingRef.current = false;
+		setLimitPrice(applyPriceOffset(String(marketCanonical), pct));
+	};
+	const label = hasTokens ? t("limitOrder.priceLabel", { symbol: leadToken?.symbol }) : t("limitOrder.price");
+	return /* @__PURE__ */ jsxs(AmountCard, {
+		...props,
+		mask: false,
+		children: [
+			/* @__PURE__ */ jsxs(CardHeaderRow, { children: [/* @__PURE__ */ jsx(CardTitle, {
+				sx: { padding: 0 },
+				children: label
+			}), hasTokens ? /* @__PURE__ */ jsxs(InvertChip, {
+				onClick: handleInvert,
+				"aria-label": "invert price",
+				children: [unitToken?.symbol, /* @__PURE__ */ jsx(SwapHorizIcon, { sx: { fontSize: 16 } })]
+			}) : null] }),
+			/* @__PURE__ */ jsx(CardBodyRow, { children: showSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
+				variant: "rounded",
+				height: 32,
+				sx: { flex: 1 }
+			}) : /* @__PURE__ */ jsx(LargeInput, {
+				size: "small",
+				autoComplete: "off",
+				placeholder: "0",
+				inputProps: { inputMode: "decimal" },
+				onChange: handleChange,
+				onBlur: handleBlur,
+				value: inputValue,
+				name: "limitPrice",
+				disabled: !hasTokens
+			}) }),
+			/* @__PURE__ */ jsx(LimitPricePresets, {
+				onSelect: handlePreset,
+				disabled: !hasTokens || marketCanonical === void 0
+			})
+		]
+	});
+};
+//#endregion
+export { LimitPriceCard };
+
+//# sourceMappingURL=LimitPriceCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LimitPriceCard.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPriceCard.tsx"],"sourcesContent":["import SwapHorizIcon from '@mui/icons-material/SwapHoriz'\nimport type { CardProps } from '@mui/material'\nimport { Skeleton } from '@mui/material'\nimport { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLimitMarketRate } from '../../hooks/useLimitMarketRate.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatInputAmount } from '../../utils/format.js'\nimport { applyPriceOffset, invertPrice } from '../../utils/limitOrder.js'\nimport {\n  AmountCard,\n  amountHeight,\n  CardBodyRow,\n  CardHeaderRow,\n  LargeInput,\n} from '../AmountInputCard/AmountInputCard.style.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { InvertChip } from './LimitPriceCard.style.js'\nimport { LimitPricePresets } from './LimitPricePresets.js'\n\nconst cleanDisplay = (value: string): string =>\n  value ? formatInputAmount(value, 8) : ''\n\nexport const LimitPriceCard: React.FC<CardProps> = (props): JSX.Element => {\n  const { t } = useTranslation()\n  const isEditingRef = useRef(false)\n  const [inputValue, setInputValue] = useState('')\n\n  const [\n    fromChainId,\n    fromTokenAddress,\n    toChainId,\n    toTokenAddress,\n    priceInverted,\n  ] = useFieldValues(\n    FormKeyHelper.getChainKey('from'),\n    FormKeyHelper.getTokenKey('from'),\n    FormKeyHelper.getChainKey('to'),\n    FormKeyHelper.getTokenKey('to'),\n    'priceInverted'\n  )\n  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)\n  const { token: toToken } = useToken(toChainId, toTokenAddress)\n\n  const { isFetching } = useRoutes()\n\n  // limitPrice is derived from the from/to amount fields, not stored.\n  const { limitPrice, setLimitPrice } = useLinkedLimitFields()\n  const { setFieldValue } = useFieldActions()\n\n  const hasTokens = Boolean(fromToken && toToken)\n  const showSkeleton = isFetching && !limitPrice\n  const leadToken = priceInverted ? toToken : fromToken\n  const unitToken = priceInverted ? fromToken : toToken\n\n  const marketCanonical = useLimitMarketRate()\n\n  // Canonical price is orientation-independent; flip only for display.\n  const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: pair fields are intentional re-run triggers, not read in the body\n  useEffect(() => {\n    setFieldValue('toAmount', '', { isDirty: false, isTouched: false })\n    setFieldValue('selectedRouteId', undefined)\n  }, [fromChainId, fromTokenAddress, toChainId, toTokenAddress])\n\n  // Keep the input in sync with derived/preset/invert updates, but never yank\n  // the value out from under an actively-typing user.\n  useEffect(() => {\n    if (!isEditingRef.current) {\n      setInputValue(cleanDisplay(displayPrice))\n    }\n  }, [displayPrice])\n\n  const handleChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ): void => {\n    isEditingRef.current = true\n    const formatted = formatInputAmount(event.target.value, 18, true)\n    setInputValue(formatted)\n    const numeric = Number(formatted)\n    if (!formatted || Number.isNaN(numeric) || numeric <= 0) {\n      setLimitPrice('')\n      return\n    }\n    // Canonical price is orientation-independent; un-flip the displayed value.\n    const canonical = priceInverted ? 1 / numeric : numeric\n    setLimitPrice(String(canonical))\n  }\n\n  const handleBlur = (): void => {\n    isEditingRef.current = false\n    setInputValue(cleanDisplay(displayPrice))\n  }\n\n  const handleInvert = (): void => {\n    isEditingRef.current = false\n    setFieldValue('priceInverted', !priceInverted)\n  }\n\n  // Apply a percentage offset to the canonical market rate (0 = at market).\n  const handlePreset = (pct: number): void => {\n    if (marketCanonical === undefined) {\n      return\n    }\n    isEditingRef.current = false\n    setLimitPrice(applyPriceOffset(String(marketCanonical), pct))\n  }\n\n  const label = hasTokens\n    ? t('limitOrder.priceLabel', { symbol: leadToken?.symbol })\n    : t('limitOrder.price')\n\n  return (\n    <AmountCard {...props} mask={false}>\n      <CardHeaderRow>\n        <CardTitle sx={{ padding: 0 }}>{label}</CardTitle>\n        {hasTokens ? (\n          <InvertChip onClick={handleInvert} aria-label=\"invert price\">\n            {unitToken?.symbol}\n            <SwapHorizIcon sx={{ fontSize: 16 }} />\n          </InvertChip>\n        ) : null}\n      </CardHeaderRow>\n      <CardBodyRow>\n        {showSkeleton ? (\n          <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n        ) : (\n          <LargeInput\n            size=\"small\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            inputProps={{ inputMode: 'decimal' }}\n            onChange={handleChange}\n            onBlur={handleBlur}\n            value={inputValue}\n            name=\"limitPrice\"\n            disabled={!hasTokens}\n          />\n        )}\n      </CardBodyRow>\n      <LimitPricePresets\n        onSelect={handlePreset}\n        disabled={!hasTokens || marketCanonical === undefined}\n      />\n    </AmountCard>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,MAAM,gBAAgB,UACpB,QAAQ,kBAAkB,OAAO,CAAC,IAAI;AAExC,MAAa,kBAAuC,UAAuB;CACzE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAE/C,MAAM,CACJ,aACA,kBACA,WACA,gBACA,iBACE,eACF,cAAc,YAAY,MAAM,GAChC,cAAc,YAAY,MAAM,GAChC,cAAc,YAAY,IAAI,GAC9B,cAAc,YAAY,IAAI,GAC9B,eACF;CACA,MAAM,EAAE,OAAO,cAAc,SAAS,aAAa,gBAAgB;CACnE,MAAM,EAAE,OAAO,YAAY,SAAS,WAAW,cAAc;CAE7D,MAAM,EAAE,eAAe,UAAU;CAGjC,MAAM,EAAE,YAAY,kBAAkB,qBAAqB;CAC3D,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,YAAY,QAAQ,aAAa,OAAO;CAC9C,MAAM,eAAe,cAAc,CAAC;CACpC,MAAM,YAAY,gBAAgB,UAAU;CAC5C,MAAM,YAAY,gBAAgB,YAAY;CAE9C,MAAM,kBAAkB,mBAAmB;CAG3C,MAAM,eAAe,gBAAgB,YAAY,UAAU,IAAI;CAG/D,gBAAgB;EACd,cAAc,YAAY,IAAI;GAAE,SAAS;GAAO,WAAW;EAAM,CAAC;EAClE,cAAc,mBAAmB,KAAA,CAAS;CAC5C,GAAG;EAAC;EAAa;EAAkB;EAAW;CAAc,CAAC;CAI7D,gBAAgB;EACd,IAAI,CAAC,aAAa,SAChB,cAAc,aAAa,YAAY,CAAC;CAE5C,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,gBACJ,UACS;EACT,aAAa,UAAU;EACvB,MAAM,YAAY,kBAAkB,MAAM,OAAO,OAAO,IAAI,IAAI;EAChE,cAAc,SAAS;EACvB,MAAM,UAAU,OAAO,SAAS;EAChC,IAAI,CAAC,aAAa,OAAO,MAAM,OAAO,KAAK,WAAW,GAAG;GACvD,cAAc,EAAE;GAChB;EACF;EAEA,MAAM,YAAY,gBAAgB,IAAI,UAAU;EAChD,cAAc,OAAO,SAAS,CAAC;CACjC;CAEA,MAAM,mBAAyB;EAC7B,aAAa,UAAU;EACvB,cAAc,aAAa,YAAY,CAAC;CAC1C;CAEA,MAAM,qBAA2B;EAC/B,aAAa,UAAU;EACvB,cAAc,iBAAiB,CAAC,aAAa;CAC/C;CAGA,MAAM,gBAAgB,QAAsB;EAC1C,IAAI,oBAAoB,KAAA,GACtB;EAEF,aAAa,UAAU;EACvB,cAAc,iBAAiB,OAAO,eAAe,GAAG,GAAG,CAAC;CAC9D;CAEA,MAAM,QAAQ,YACV,EAAE,yBAAyB,EAAE,QAAQ,WAAW,OAAO,CAAC,IACxD,EAAE,kBAAkB;CAExB,OACE,qBAAC,YAAD;EAAY,GAAI;EAAO,MAAM;YAA7B;GACE,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,WAAD;IAAW,IAAI,EAAE,SAAS,EAAE;cAAI;GAAiB,CAAA,GAChD,YACC,qBAAC,YAAD;IAAY,SAAS;IAAc,cAAW;cAA9C,CACG,WAAW,QACZ,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,CAC5B;QACV,IACS,EAAA,CAAA;GACf,oBAAC,aAAD,EAAA,UACG,eACC,oBAAC,UAAD;IAAU,SAAQ;IAAU,QAAA;IAAsB,IAAI,EAAE,MAAM,EAAE;GAAI,CAAA,IAEpE,oBAAC,YAAD;IACE,MAAK;IACL,cAAa;IACb,aAAY;IACZ,YAAY,EAAE,WAAW,UAAU;IACnC,UAAU;IACV,QAAQ;IACR,OAAO;IACP,MAAK;IACL,UAAU,CAAC;GACZ,CAAA,EAEQ,CAAA;GACb,oBAAC,mBAAD;IACE,UAAU;IACV,UAAU,CAAC,aAAa,oBAAoB,KAAA;GAC7C,CAAA;EACS;;AAEhB"}

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

@@ -0,0 +1,89 @@
+import { Box, Button, ButtonBase, Typography, styled } from "@mui/material";
+//#region src/components/LimitPriceCard/LimitPriceCard.style.tsx
+/**
+* Quick-set preset pill. Mirrors the percentage chips' pill look but is always
+* visible (no reveal-on-hover), since presets are the card's primary control.
+*/
+const PriceChip = 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: "background-color 200ms ease",
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` }
+}));
+/**
+* Editable variant of the preset pill: looks identical to {@link PriceChip} but
+* wraps an inline input so the user can type an arbitrary percentage premium
+* (`+__%`) instead of picking a fixed preset.
+*/
+const EditablePriceChip = styled(Box)(({ theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	minWidth: 0,
+	padding: theme.spacing(.5, 1.5),
+	borderRadius: theme.vars.shape.borderRadius,
+	fontSize: 12,
+	fontWeight: 700,
+	lineHeight: 1.3334,
+	color: theme.vars.palette.text.primary,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	transition: "background-color 200ms ease",
+	cursor: "text",
+	"&:hover, &:focus-within": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+	"&[aria-disabled=\"true\"]": {
+		opacity: .5,
+		pointerEvents: "none"
+	}
+}));
+/** Bare input inside {@link EditablePriceChip}; inherits the pill's typography. */
+const PriceChipInput = styled("input")(({ theme }) => ({
+	appearance: "none",
+	border: "none",
+	outline: "none",
+	background: "transparent",
+	padding: 0,
+	margin: 0,
+	font: "inherit",
+	color: "inherit",
+	textAlign: "right",
+	minWidth: "1ch",
+	"&::placeholder": {
+		color: theme.vars.palette.text.secondary,
+		opacity: 1
+	}
+}));
+styled(Typography)(({ theme }) => ({
+	fontSize: 18,
+	fontWeight: 600,
+	lineHeight: 1.4,
+	whiteSpace: "nowrap",
+	color: theme.vars.palette.text.primary
+}));
+/**
+* Invert affordance anchored to the far right of the lead row. Styled as a
+* pill to mirror the percentage chips, but always visible (no reveal-on-hover).
+*/
+const InvertChip = styled(ButtonBase)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: theme.spacing(.5),
+	minWidth: 0,
+	padding: theme.spacing(.5, 1.5),
+	borderRadius: "9999px",
+	fontSize: 12,
+	fontWeight: 700,
+	lineHeight: 1.3334,
+	color: theme.vars.palette.text.primary,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	transition: "background-color 200ms ease",
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` }
+}));
+//#endregion
+export { EditablePriceChip, InvertChip, PriceChip, PriceChipInput };
+
+//# sourceMappingURL=LimitPriceCard.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LimitPriceCard.style.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPriceCard.style.tsx"],"sourcesContent":["import { Box, Button, ButtonBase, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\n/**\n * Quick-set preset pill. Mirrors the percentage chips' pill look but is always\n * visible (no reveal-on-hover), since presets are the card's primary control.\n */\nexport const PriceChip: 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: 'background-color 200ms ease',\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n  },\n}))\n\n/**\n * Editable variant of the preset pill: looks identical to {@link PriceChip} but\n * wraps an inline input so the user can type an arbitrary percentage premium\n * (`+__%`) instead of picking a fixed preset.\n */\nexport const EditablePriceChip: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'inline-flex',\n    alignItems: 'center',\n    minWidth: 0,\n    padding: theme.spacing(0.5, 1.5),\n    borderRadius: theme.vars.shape.borderRadius,\n    fontSize: 12,\n    fontWeight: 700,\n    lineHeight: 1.3334,\n    color: theme.vars.palette.text.primary,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    transition: 'background-color 200ms ease',\n    cursor: 'text',\n    '&:hover, &:focus-within': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    },\n    '&[aria-disabled=\"true\"]': {\n      opacity: 0.5,\n      pointerEvents: 'none',\n    },\n  }))\n\n/** Bare input inside {@link EditablePriceChip}; inherits the pill's typography. */\nexport const PriceChipInput: React.FC<React.ComponentProps<'input'>> = styled(\n  'input'\n)(({ theme }) => ({\n  appearance: 'none',\n  border: 'none',\n  outline: 'none',\n  background: 'transparent',\n  padding: 0,\n  margin: 0,\n  font: 'inherit',\n  color: 'inherit',\n  textAlign: 'right',\n  minWidth: '1ch',\n  '&::placeholder': {\n    color: theme.vars.palette.text.secondary,\n    opacity: 1,\n  },\n}))\n\nexport const UnitSymbol: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    fontSize: 18,\n    fontWeight: 600,\n    lineHeight: 1.4,\n    whiteSpace: 'nowrap',\n    color: theme.vars.palette.text.primary,\n  }))\n\n/**\n * Invert affordance anchored to the far right of the lead row. Styled as a\n * pill to mirror the percentage chips, but always visible (no reveal-on-hover).\n */\nexport const InvertChip: React.FC<React.ComponentProps<typeof ButtonBase>> =\n  styled(ButtonBase)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(0.5),\n    minWidth: 0,\n    padding: theme.spacing(0.5, 1.5),\n    borderRadius: '9999px',\n    fontSize: 12,\n    fontWeight: 700,\n    lineHeight: 1.3334,\n    color: theme.vars.palette.text.primary,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    transition: 'background-color 200ms ease',\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    },\n  }))\n"],"mappings":";;;;;;AAOA,MAAa,YAA2D,OACtE,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,YAAY;CACZ,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE;;;;;;AAOF,MAAa,oBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,UAAU;CACV,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,cAAc,MAAM,KAAK,MAAM;CAC/B,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,YAAY;CACZ,QAAQ;CACR,2BAA2B,EACzB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACA,6BAA2B;EACzB,SAAS;EACT,eAAe;CACjB;AACF,EAAE;;AAGJ,MAAa,iBAA0D,OACrE,OACF,CAAC,EAAE,EAAE,aAAa;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;CACP,WAAW;CACX,UAAU;CACV,kBAAkB;EAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,SAAS;CACX;AACF,EAAE;AAGA,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;;;;;AAMJ,MAAa,aACX,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK,MAAM,QAAQ,EAAG;CACtB,UAAU;CACV,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,cAAc;CACd,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,YAAY;CACZ,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE"}

package/dist/esm/components/LimitPriceCard/LimitPricePresets.js

@@ -0,0 +1,91 @@
+import { EditablePriceChip, PriceChip, PriceChipInput } from "./LimitPriceCard.style.js";
+import { ChipContainer } from "../AmountInputCard/PercentageChips.style.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/LimitPriceCard/LimitPricePresets.tsx
+/** Quick-set presets, as percentage offsets from market (0 = at market). */
+const PRESETS = [
+	0,
+	1,
+	5,
+	10
+];
+/**
+* Row of quick-set price controls: fixed percentage presets plus a free-form
+* "custom %" pill that collapses to a button until engaged. Owns its own
+* custom-input state so the card only deals with applying an offset.
+*/
+const LimitPricePresets = ({ onSelect, disabled }) => {
+	const { t } = useTranslation();
+	const customInputRef = useRef(null);
+	const [customPct, setCustomPct] = useState("");
+	const [customFocused, setCustomFocused] = useState(false);
+	useEffect(() => {
+		if (customFocused) customInputRef.current?.focus();
+	}, [customFocused]);
+	const handlePresetClick = (pct) => {
+		setCustomPct("");
+		setCustomFocused(false);
+		onSelect(pct);
+	};
+	const handleCustomChange = (event) => {
+		const raw = event.target.value;
+		if (raw && !/^[+-]?\d*\.?\d*$/.test(raw)) return;
+		setCustomPct(raw);
+		const numeric = Number(raw);
+		if (raw === "" || Number.isNaN(numeric)) return;
+		onSelect(numeric);
+	};
+	const handleCustomKeyDown = (event) => {
+		if (event.key === "Enter") event.currentTarget.blur();
+	};
+	const handleCustomBlur = () => {
+		setCustomFocused(false);
+		setCustomPct((prev) => {
+			if (!prev || prev.startsWith("+") || prev.startsWith("-")) return prev;
+			return Number.isNaN(Number(prev)) ? prev : `+${prev}`;
+		});
+	};
+	const showCustomLabel = customPct === "" && !customFocused;
+	return /* @__PURE__ */ jsxs(ChipContainer, {
+		sx: {
+			marginTop: .5,
+			flexWrap: "wrap"
+		},
+		children: [PRESETS.map((pct) => /* @__PURE__ */ jsx(PriceChip, {
+			onClick: () => handlePresetClick(pct),
+			children: pct === 0 ? t("limitOrder.market") : `+${pct}%`
+		}, pct)), showCustomLabel ? /* @__PURE__ */ jsx(PriceChip, {
+			disabled,
+			onClick: () => setCustomFocused(true),
+			children: t("limitOrder.custom")
+		}) : /* @__PURE__ */ jsxs(EditablePriceChip, {
+			"aria-disabled": disabled,
+			onClick: (event) => {
+				if (disabled) return;
+				event.currentTarget.querySelector("input")?.focus();
+				const numeric = Number(customPct);
+				if (customPct && !Number.isNaN(numeric)) onSelect(numeric);
+			},
+			children: [/* @__PURE__ */ jsx(PriceChipInput, {
+				ref: customInputRef,
+				inputMode: "decimal",
+				autoComplete: "off",
+				placeholder: "0",
+				"aria-label": t("limitOrder.custom"),
+				value: customPct,
+				onChange: handleCustomChange,
+				onKeyDown: handleCustomKeyDown,
+				onFocus: () => setCustomFocused(true),
+				onBlur: handleCustomBlur,
+				disabled,
+				style: { width: `${Math.max(customPct.length, 1)}ch` }
+			}), "%"]
+		})]
+	});
+};
+//#endregion
+export { LimitPricePresets };
+
+//# sourceMappingURL=LimitPricePresets.js.map

package/dist/esm/components/LimitPriceCard/LimitPricePresets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitPricePresets.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPricePresets.tsx"],"sourcesContent":["import { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChipContainer } from '../AmountInputCard/PercentageChips.style.js'\nimport {\n  EditablePriceChip,\n  PriceChip,\n  PriceChipInput,\n} from './LimitPriceCard.style.js'\n\n/** Quick-set presets, as percentage offsets from market (0 = at market). */\nconst PRESETS = [0, 1, 5, 10] as const\n\ninterface LimitPricePresetsProps {\n  /** Apply a percentage offset from the market rate (0 = at market). */\n  onSelect: (pct: number) => void\n  /** Disables the free-form custom pill (no tokens / no market rate yet). */\n  disabled: boolean\n}\n\n/**\n * Row of quick-set price controls: fixed percentage presets plus a free-form\n * \"custom %\" pill that collapses to a button until engaged. Owns its own\n * custom-input state so the card only deals with applying an offset.\n */\nexport const LimitPricePresets = ({\n  onSelect,\n  disabled,\n}: LimitPricePresetsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const customInputRef = useRef<HTMLInputElement>(null)\n  const [customPct, setCustomPct] = useState('')\n  const [customFocused, setCustomFocused] = useState(false)\n\n  // The custom pill renders as a plain button until engaged; when it flips into\n  // edit mode (focused), move the caret into the freshly-mounted input.\n  useEffect(() => {\n    if (customFocused) {\n      customInputRef.current?.focus()\n    }\n  }, [customFocused])\n\n  // Picking a fixed preset clears any custom value so the custom pill collapses\n  // back to its \"Custom\" button instead of showing a stale, no-longer-applied %.\n  const handlePresetClick = (pct: number): void => {\n    setCustomPct('')\n    setCustomFocused(false)\n    onSelect(pct)\n  }\n\n  // Free-form offset pill: apply the typed percentage live so the price input\n  // tracks the offset as the user types. Accepts an optional leading +/- sign\n  // so the price can be set above (premium) or below (discount) market.\n  const handleCustomChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const raw = event.target.value\n    if (raw && !/^[+-]?\\d*\\.?\\d*$/.test(raw)) {\n      return\n    }\n    setCustomPct(raw)\n    const numeric = Number(raw)\n    // Bare '', '+', '-', '.' etc. aren't applicable numbers yet — Number() maps\n    // the signs/dot to NaN, and '' to 0, so guard both.\n    if (raw === '' || Number.isNaN(numeric)) {\n      return\n    }\n    onSelect(numeric)\n  }\n\n  const handleCustomKeyDown = (\n    event: React.KeyboardEvent<HTMLInputElement>\n  ): void => {\n    if (event.key === 'Enter') {\n      event.currentTarget.blur()\n    }\n  }\n\n  // On blur, surface an explicit sign: a bare positive entry like \"10\" reads as\n  // \"+10\" so the direction (above/below market) is unambiguous once collapsed.\n  const handleCustomBlur = (): void => {\n    setCustomFocused(false)\n    setCustomPct((prev) => {\n      if (!prev || prev.startsWith('+') || prev.startsWith('-')) {\n        return prev\n      }\n      return Number.isNaN(Number(prev)) ? prev : `+${prev}`\n    })\n  }\n\n  // Collapse to a plain \"Custom\" label only while empty and unfocused; once the\n  // user engages (focus) or has typed a value, reveal the `+__%` affixes.\n  const showCustomLabel = customPct === '' && !customFocused\n\n  return (\n    <ChipContainer sx={{ marginTop: 0.5, flexWrap: 'wrap' }}>\n      {PRESETS.map((pct) => (\n        <PriceChip key={pct} onClick={() => handlePresetClick(pct)}>\n          {pct === 0 ? t('limitOrder.market') : `+${pct}%`}\n        </PriceChip>\n      ))}\n      {showCustomLabel ? (\n        <PriceChip disabled={disabled} onClick={() => setCustomFocused(true)}>\n          {t('limitOrder.custom')}\n        </PriceChip>\n      ) : (\n        <EditablePriceChip\n          aria-disabled={disabled}\n          onClick={(event) => {\n            // `aria-disabled` only announces the state; enforce it so a\n            // programmatic click can't apply an offset while disabled.\n            if (disabled) {\n              return\n            }\n            const input = event.currentTarget.querySelector('input')\n            input?.focus()\n            const numeric = Number(customPct)\n            if (customPct && !Number.isNaN(numeric)) {\n              onSelect(numeric)\n            }\n          }}\n        >\n          <PriceChipInput\n            ref={customInputRef}\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            aria-label={t('limitOrder.custom')}\n            value={customPct}\n            onChange={handleCustomChange}\n            onKeyDown={handleCustomKeyDown}\n            onFocus={() => setCustomFocused(true)}\n            onBlur={handleCustomBlur}\n            disabled={disabled}\n            style={{ width: `${Math.max(customPct.length, 1)}ch` }}\n          />\n          %\n        </EditablePriceChip>\n      )}\n    </ChipContainer>\n  )\n}\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU;CAAC;CAAG;CAAG;CAAG;AAAE;;;;;;AAc5B,MAAa,qBAAqB,EAChC,UACA,eACyC;CACzC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,iBAAiB,OAAyB,IAAI;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAIxD,gBAAgB;EACd,IAAI,eACF,eAAe,SAAS,MAAM;CAElC,GAAG,CAAC,aAAa,CAAC;CAIlB,MAAM,qBAAqB,QAAsB;EAC/C,aAAa,EAAE;EACf,iBAAiB,KAAK;EACtB,SAAS,GAAG;CACd;CAKA,MAAM,sBAAsB,UAA+C;EACzE,MAAM,MAAM,MAAM,OAAO;EACzB,IAAI,OAAO,CAAC,mBAAmB,KAAK,GAAG,GACrC;EAEF,aAAa,GAAG;EAChB,MAAM,UAAU,OAAO,GAAG;EAG1B,IAAI,QAAQ,MAAM,OAAO,MAAM,OAAO,GACpC;EAEF,SAAS,OAAO;CAClB;CAEA,MAAM,uBACJ,UACS;EACT,IAAI,MAAM,QAAQ,SAChB,MAAM,cAAc,KAAK;CAE7B;CAIA,MAAM,yBAA+B;EACnC,iBAAiB,KAAK;EACtB,cAAc,SAAS;GACrB,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,KAAK,KAAK,WAAW,GAAG,GACtD,OAAO;GAET,OAAO,OAAO,MAAM,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI;EACjD,CAAC;CACH;CAIA,MAAM,kBAAkB,cAAc,MAAM,CAAC;CAE7C,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,WAAW;GAAK,UAAU;EAAO;YAAtD,CACG,QAAQ,KAAK,QACZ,oBAAC,WAAD;GAAqB,eAAe,kBAAkB,GAAG;aACtD,QAAQ,IAAI,EAAE,mBAAmB,IAAI,IAAI,IAAI;EACrC,GAFK,GAEL,CACZ,GACA,kBACC,oBAAC,WAAD;GAAqB;GAAU,eAAe,iBAAiB,IAAI;aAChE,EAAE,mBAAmB;EACb,CAAA,IAEX,qBAAC,mBAAD;GACE,iBAAe;GACf,UAAU,UAAU;IAGlB,IAAI,UACF;IAGF,MADoB,cAAc,cAAc,OAC5C,CAAC,EAAE,MAAM;IACb,MAAM,UAAU,OAAO,SAAS;IAChC,IAAI,aAAa,CAAC,OAAO,MAAM,OAAO,GACpC,SAAS,OAAO;GAEpB;aAdF,CAgBE,oBAAC,gBAAD;IACE,KAAK;IACL,WAAU;IACV,cAAa;IACb,aAAY;IACZ,cAAY,EAAE,mBAAmB;IACjC,OAAO;IACP,UAAU;IACV,WAAW;IACX,eAAe,iBAAiB,IAAI;IACpC,QAAQ;IACE;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,QAAQ,CAAC,EAAE,IAAI;GACtD,CAAA,GAAC,GAEe;IAER;;AAEnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["ListItem","MuiListItem"],"sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  listItemSecondaryActionClasses,\n  listItemTextClasses,\n  ListItem as MuiListItem,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItem: React.FC<React.ComponentProps<typeof MuiListItem>> =\n  styled(MuiListItem)(({ theme }) => ({\n    height: 64,\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    padding: theme.spacing(0, 1.5),\n    [`.${listItemSecondaryActionClasses.root}`]: {\n      right: theme.spacing(3),\n    },\n    [`& .${listItemTextClasses.secondary}`]: {\n      fontSize: 12,\n      fontWeight: 500,\n    },\n    [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]:\n      {\n        lineHeight: 1.3334,\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n      },\n  }))\n"],"mappings":";;AAQA,MAAaA,aACX,OAAOC,QAAW,GAAG,EAAE,aAAa;CAClC,QAAQ;CACR,eAAe;CACf,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG;EAC5B,IAAI,+BAA+B,SAAS,EAC3C,OAAO,MAAM,QAAQ,CAAC,EACxB;EACC,MAAM,oBAAoB,cAAc;EACvC,UAAU;EACV,YAAY;CACd;EACC,MAAM,oBAAoB,QAAQ,OAAO,oBAAoB,cAC5D;EACE,YAAY;EACZ,cAAc;EACd,UAAU;EACV,YAAY;CACd;AACJ,EAAE"}
+{"version":3,"file":"ListItem.js","names":["ListItem","MuiListItem"],"sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  listItemSecondaryActionClasses,\n  listItemTextClasses,\n  ListItem as MuiListItem,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItem: React.FC<React.ComponentProps<typeof MuiListItem>> =\n  styled(MuiListItem)(({ theme }) => ({\n    height: 64,\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    padding: theme.spacing(0, 1.5),\n    [`.${listItemSecondaryActionClasses.root}`]: {\n      right: theme.spacing(3),\n    },\n    [`& .${listItemTextClasses.secondary}`]: {\n      fontSize: 12,\n      fontWeight: 500,\n    },\n    [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]:\n      {\n        lineHeight: 1.3334,\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n      },\n  }))\n"],"mappings":";;AAQA,MAAaA,aACX,OAAOC,QAAW,CAAC,EAAE,EAAE,aAAa;CAClC,QAAQ;CACR,eAAe;CACf,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG;EAC5B,IAAI,+BAA+B,SAAS,EAC3C,OAAO,MAAM,QAAQ,CAAC,EACxB;EACC,MAAM,oBAAoB,cAAc;EACvC,UAAU;EACV,YAAY;CACd;EACC,MAAM,oBAAoB,QAAQ,OAAO,oBAAoB,cAC5D;EACE,YAAY;EACZ,cAAc;EACd,UAAU;EACV,YAAY;CACd;AACJ,EAAE"}

package/dist/esm/components/ListItem/ListItemButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.js","names":["ListItemButton","ListItemButtonBase"],"sources":["../../../../src/components/ListItem/ListItemButton.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'\n\nexport const ListItemButton: React.FC<\n  React.ComponentProps<typeof ListItemButtonBase>\n> = styled(ListItemButtonBase)(({ theme }) => ({\n  paddingLeft: theme.spacing(1.5),\n  paddingRight: theme.spacing(1.5),\n  height: 64,\n  width: '100%',\n}))\n"],"mappings":";;;AAIA,MAAaA,mBAET,OAAOC,gBAAkB,GAAG,EAAE,aAAa;CAC7C,aAAa,MAAM,QAAQ,GAAG;CAC9B,cAAc,MAAM,QAAQ,GAAG;CAC/B,QAAQ;CACR,OAAO;AACT,EAAE"}
+{"version":3,"file":"ListItemButton.js","names":["ListItemButton","ListItemButtonBase"],"sources":["../../../../src/components/ListItem/ListItemButton.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'\n\nexport const ListItemButton: React.FC<\n  React.ComponentProps<typeof ListItemButtonBase>\n> = styled(ListItemButtonBase)(({ theme }) => ({\n  paddingLeft: theme.spacing(1.5),\n  paddingRight: theme.spacing(1.5),\n  height: 64,\n  width: '100%',\n}))\n"],"mappings":";;;AAIA,MAAaA,mBAET,OAAOC,gBAAkB,CAAC,EAAE,EAAE,aAAa;CAC7C,aAAa,MAAM,QAAQ,GAAG;CAC9B,cAAc,MAAM,QAAQ,GAAG;CAC/B,QAAQ;CACR,OAAO;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.js","names":["ListItemButton","MuiListItemButton"],"sources":["../../../src/components/ListItemButton.tsx"],"sourcesContent":["import {\n  listItemButtonClasses,\n  ListItemButton as MuiListItemButton,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItemButton: React.FC<\n  React.ComponentProps<typeof MuiListItemButton>\n> = styled(MuiListItemButton)(({ theme }) => {\n  return {\n    borderRadius: theme.vars.shape.borderRadius,\n    paddingLeft: theme.spacing(1.5),\n    height: 56,\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    },\n    [`&.${listItemButtonClasses.selected}`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n      '&:hover': {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n      },\n      ...theme.applyStyles('dark', {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n        },\n      }),\n    },\n    variants: [\n      {\n        props: ({ disabled }) => disabled,\n        style: {\n          opacity: 0.5,\n          cursor: 'auto',\n          '&:hover': {\n            backgroundColor: 'none',\n          },\n        },\n      },\n    ],\n  }\n})\n"],"mappings":";;AAOA,MAAaA,mBAET,OAAOC,cAAiB,GAAG,EAAE,YAAY;CAC3C,OAAO;EACL,cAAc,MAAM,KAAK,MAAM;EAC/B,aAAa,MAAM,QAAQ,GAAG;EAC9B,QAAQ;EACR,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;GACC,KAAK,sBAAsB,aAAa;GACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;GACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,cAC3E;GACA,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;IACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,cAC3E;GACF,CAAC;EACH;EACA,UAAU,CACR;GACE,QAAQ,EAAE,eAAe;GACzB,OAAO;IACL,SAAS;IACT,QAAQ;IACR,WAAW,EACT,iBAAiB,OACnB;GACF;EACF,CACF;CACF;AACF,CAAC"}
+{"version":3,"file":"ListItemButton.js","names":["ListItemButton","MuiListItemButton"],"sources":["../../../src/components/ListItemButton.tsx"],"sourcesContent":["import {\n  listItemButtonClasses,\n  ListItemButton as MuiListItemButton,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItemButton: React.FC<\n  React.ComponentProps<typeof MuiListItemButton>\n> = styled(MuiListItemButton)(({ theme }) => {\n  return {\n    borderRadius: theme.vars.shape.borderRadius,\n    paddingLeft: theme.spacing(1.5),\n    height: 56,\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    },\n    [`&.${listItemButtonClasses.selected}`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n      '&:hover': {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n      },\n      ...theme.applyStyles('dark', {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n        },\n      }),\n    },\n    variants: [\n      {\n        props: ({ disabled }) => disabled,\n        style: {\n          opacity: 0.5,\n          cursor: 'auto',\n          '&:hover': {\n            backgroundColor: 'none',\n          },\n        },\n      },\n    ],\n  }\n})\n"],"mappings":";;AAOA,MAAaA,mBAET,OAAOC,cAAiB,CAAC,EAAE,EAAE,YAAY;CAC3C,OAAO;EACL,cAAc,MAAM,KAAK,MAAM;EAC/B,aAAa,MAAM,QAAQ,GAAG;EAC9B,QAAQ;EACR,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;GACC,KAAK,sBAAsB,aAAa;GACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;GACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,cAC3E;GACA,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;IACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,cAC3E;GACF,CAAC;EACH;EACA,UAAU,CACR;GACE,QAAQ,EAAE,eAAe;GACzB,OAAO;IACL,SAAS;IACT,QAAQ;IACR,WAAW,EACT,iBAAiB,OACnB;GACF;EACF,CACF;CACF;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemText.js","names":["ListItemText","MuiListItemText"],"sources":["../../../src/components/ListItemText.tsx"],"sourcesContent":["import {\n  listItemTextClasses,\n  ListItemText as MuiListItemText,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItemText: React.FC<\n  React.ComponentProps<typeof MuiListItemText>\n> = styled(MuiListItemText)(() => ({\n  [`.${listItemTextClasses.primary}`]: {\n    fontWeight: 500,\n  },\n}))\n"],"mappings":";;AAOA,MAAaA,iBAET,OAAOC,YAAe,SAAS,GAChC,IAAI,oBAAoB,YAAY,EACnC,YAAY,IACd,EACF,EAAE"}
+{"version":3,"file":"ListItemText.js","names":["ListItemText","MuiListItemText"],"sources":["../../../src/components/ListItemText.tsx"],"sourcesContent":["import {\n  listItemTextClasses,\n  ListItemText as MuiListItemText,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItemText: React.FC<\n  React.ComponentProps<typeof MuiListItemText>\n> = styled(MuiListItemText)(() => ({\n  [`.${listItemTextClasses.primary}`]: {\n    fontWeight: 500,\n  },\n}))\n"],"mappings":";;AAOA,MAAaA,iBAET,OAAOC,YAAe,CAAC,QAAQ,GAChC,IAAI,oBAAoB,YAAY,EACnC,YAAY,IACd,EACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["Menu","MuiMenu"],"sources":["../../../src/components/Menu.tsx"],"sourcesContent":["import {\n  Menu as MuiMenu,\n  menuClasses,\n  menuItemClasses,\n  styled,\n  svgIconClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const Menu: React.FC<React.ComponentProps<typeof MuiMenu>> = styled(\n  MuiMenu\n)(({ theme }) => ({\n  [`& .${menuClasses.paper}`]: {\n    borderRadius: theme.vars.shape.borderRadius,\n    boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',\n    padding: theme.spacing(2),\n    [`& .${menuClasses.list}`]: {\n      padding: 0,\n    },\n    [`& .${menuItemClasses.root}`]: {\n      borderRadius: theme.vars.shape.borderRadiusSecondary,\n      padding: theme.spacing(1, 2, 1, 1),\n      [`& .${svgIconClasses.root}`]: {\n        fontSize: 20,\n        color: theme.vars.palette.text.primary,\n        marginRight: theme.spacing(1.5),\n      },\n    },\n  },\n}))\n"],"mappings":";;AASA,MAAaA,SAAuD,OAClEC,IACF,GAAG,EAAE,aAAa,GACf,MAAM,YAAY,UAAU;CAC3B,cAAc,MAAM,KAAK,MAAM;CAC/B,WAAW;CACX,SAAS,MAAM,QAAQ,CAAC;EACvB,MAAM,YAAY,SAAS,EAC1B,SAAS,EACX;EACC,MAAM,gBAAgB,SAAS;EAC9B,cAAc,MAAM,KAAK,MAAM;EAC/B,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;GAChC,MAAM,eAAe,SAAS;GAC7B,UAAU;GACV,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,aAAa,MAAM,QAAQ,GAAG;EAChC;CACF;AACF,EACF,EAAE"}
+{"version":3,"file":"Menu.js","names":["Menu","MuiMenu"],"sources":["../../../src/components/Menu.tsx"],"sourcesContent":["import {\n  Menu as MuiMenu,\n  menuClasses,\n  menuItemClasses,\n  styled,\n  svgIconClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const Menu: React.FC<React.ComponentProps<typeof MuiMenu>> = styled(\n  MuiMenu\n)(({ theme }) => ({\n  [`& .${menuClasses.paper}`]: {\n    borderRadius: theme.vars.shape.borderRadius,\n    boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',\n    padding: theme.spacing(2),\n    [`& .${menuClasses.list}`]: {\n      padding: 0,\n    },\n    [`& .${menuItemClasses.root}`]: {\n      borderRadius: theme.vars.shape.borderRadiusSecondary,\n      padding: theme.spacing(1, 2, 1, 1),\n      [`& .${svgIconClasses.root}`]: {\n        fontSize: 20,\n        color: theme.vars.palette.text.primary,\n        marginRight: theme.spacing(1.5),\n      },\n    },\n  },\n}))\n"],"mappings":";;AASA,MAAaA,SAAuD,OAClEC,IACF,CAAC,EAAE,EAAE,aAAa,GACf,MAAM,YAAY,UAAU;CAC3B,cAAc,MAAM,KAAK,MAAM;CAC/B,WAAW;CACX,SAAS,MAAM,QAAQ,CAAC;EACvB,MAAM,YAAY,SAAS,EAC1B,SAAS,EACX;EACC,MAAM,gBAAgB,SAAS;EAC9B,cAAc,MAAM,KAAK,MAAM;EAC/B,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;GAChC,MAAM,eAAe,SAAS;GAC7B,UAAU;GACV,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,aAAa,MAAM,QAAQ,GAAG;EAChC;CACF;AACF,EACF,EAAE"}

package/dist/esm/components/Messages/AlertMessage.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertMessage.style.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { Severity } from './types.js'\n\ninterface AlertSeverityProps {\n  severity: Severity\n}\n\nexport const AlertMessageCard: React.FC<\n  React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n  borderRadius: theme.vars.shape.borderRadius,\n  position: 'relative',\n  whiteSpace: 'pre-line',\n  width: '100%',\n  paddingBottom: theme.spacing(2),\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n  }),\n  variants: [\n    {\n      props: {\n        severity: 'warning',\n      },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n        }),\n      },\n    },\n  ],\n}))\n\nexport const AlertMessageCardTitle: React.FC<\n  React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n  display: 'flex',\n  paddingLeft: theme.spacing(2),\n  paddingRight: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  gap: theme.spacing(1),\n  color: theme.vars.palette.info.main,\n  ...theme.applyStyles('dark', {\n    color: `color-mix(in srgb, ${theme.vars.palette.info.main} 76%, white)`,\n  }),\n  variants: [\n    {\n      props: {\n        severity: 'warning',\n      },\n      style: {\n        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n        ...theme.applyStyles('dark', {\n          color: theme.vars.palette.warning.main,\n        }),\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAQA,MAAa,mBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACxC,CAAC,GAAuB,EAAE,aAAa;CACrC,cAAc,MAAM,KAAK,MAAM;CAC/B,UAAU;CACV,YAAY;CACZ,OAAO;CACP,eAAe,MAAM,QAAQ,CAAC;CAC9B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;CACpE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE,CAAC;CACD,UAAU,CACR;EACE,OAAO,EACL,UAAU,UACZ;EACA,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,oBACzE,CAAC;EACH;CACF,CACF;AACF,EAAE;AAEF,MAAa,wBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACxC,CAAC,GAAuB,EAAE,aAAa;CACrC,SAAS;CACT,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;CAC7B,YAAY,MAAM,QAAQ,CAAC;CAC3B,KAAK,MAAM,QAAQ,CAAC;CACpB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,cAC5D,CAAC;CACD,UAAU,CACR;EACE,OAAO,EACL,UAAU,UACZ;EACA,OAAO;GACL,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GAC7D,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,KACpC,CAAC;EACH;CACF,CACF;AACF,EAAE"}
+{"version":3,"file":"AlertMessage.style.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { Severity } from './types.js'\n\ninterface AlertSeverityProps {\n  severity: Severity\n}\n\nexport const AlertMessageCard: React.FC<\n  React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n  borderRadius: theme.vars.shape.borderRadius,\n  position: 'relative',\n  whiteSpace: 'pre-line',\n  width: '100%',\n  paddingBottom: theme.spacing(2),\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n  }),\n  variants: [\n    {\n      props: {\n        severity: 'warning',\n      },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n        }),\n      },\n    },\n  ],\n}))\n\nexport const AlertMessageCardTitle: React.FC<\n  React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n  display: 'flex',\n  paddingLeft: theme.spacing(2),\n  paddingRight: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  gap: theme.spacing(1),\n  color: theme.vars.palette.info.main,\n  ...theme.applyStyles('dark', {\n    color: `color-mix(in srgb, ${theme.vars.palette.info.main} 76%, white)`,\n  }),\n  variants: [\n    {\n      props: {\n        severity: 'warning',\n      },\n      style: {\n        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n        ...theme.applyStyles('dark', {\n          color: theme.vars.palette.warning.main,\n        }),\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAQA,MAAa,mBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACxC,CAAC,CAAC,EAAsB,EAAE,aAAa;CACrC,cAAc,MAAM,KAAK,MAAM;CAC/B,UAAU;CACV,YAAY;CACZ,OAAO;CACP,eAAe,MAAM,QAAQ,CAAC;CAC9B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;CACpE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE,CAAC;CACD,UAAU,CACR;EACE,OAAO,EACL,UAAU,UACZ;EACA,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,oBACzE,CAAC;EACH;CACF,CACF;AACF,EAAE;AAEF,MAAa,wBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACxC,CAAC,CAAC,EAAsB,EAAE,aAAa;CACrC,SAAS;CACT,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;CAC7B,YAAY,MAAM,QAAQ,CAAC;CAC3B,KAAK,MAAM,QAAQ,CAAC;CACpB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,cAC5D,CAAC;CACD,UAAU,CACR;EACE,OAAO,EACL,UAAU,UACZ;EACA,OAAO;GACL,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GAC7D,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,KACpC,CAAC;EACH;CACF,CACF;AACF,EAAE"}

package/dist/esm/components/Messages/GasRefuelMessage.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"GasRefuelMessage.style.js","names":["Switch"],"sources":["../../../../src/components/Messages/GasRefuelMessage.style.ts"],"sourcesContent":["import { styled, switchClasses } from '@mui/material'\nimport type React from 'react'\nimport { Switch } from '../Switch.js'\n\nexport const InfoMessageSwitch: React.FC<React.ComponentProps<typeof Switch>> =\n  styled(Switch)(({ theme }) => ({\n    [`.${switchClasses.switchBase}`]: {\n      [`&.${switchClasses.checked}`]: {\n        [`& + .${switchClasses.track}`]: {\n          backgroundColor: theme.vars.palette.info.main,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,\n          }),\n        },\n      },\n      [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n        color: theme.vars.palette.info.main,\n        ...theme.applyStyles('dark', {\n          color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,\n        }),\n      },\n    },\n  }))\n"],"mappings":";;;AAIA,MAAa,oBACX,OAAOA,QAAM,GAAG,EAAE,aAAa,GAC5B,IAAI,cAAc,eAAe;EAC/B,KAAK,cAAc,YAAY,GAC7B,QAAQ,cAAc,UAAU;EAC/B,iBAAiB,MAAM,KAAK,QAAQ,KAAK;EACzC,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE,CAAC;CACH,EACF;EACC,uBAAuB,cAAc,UAAU;EAC9C,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBAC5D,CAAC;CACH;AACF,EACF,EAAE"}
+{"version":3,"file":"GasRefuelMessage.style.js","names":["Switch"],"sources":["../../../../src/components/Messages/GasRefuelMessage.style.ts"],"sourcesContent":["import { styled, switchClasses } from '@mui/material'\nimport type React from 'react'\nimport { Switch } from '../Switch.js'\n\nexport const InfoMessageSwitch: React.FC<React.ComponentProps<typeof Switch>> =\n  styled(Switch)(({ theme }) => ({\n    [`.${switchClasses.switchBase}`]: {\n      [`&.${switchClasses.checked}`]: {\n        [`& + .${switchClasses.track}`]: {\n          backgroundColor: theme.vars.palette.info.main,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,\n          }),\n        },\n      },\n      [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n        color: theme.vars.palette.info.main,\n        ...theme.applyStyles('dark', {\n          color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,\n        }),\n      },\n    },\n  }))\n"],"mappings":";;;AAIA,MAAa,oBACX,OAAOA,QAAM,CAAC,EAAE,EAAE,aAAa,GAC5B,IAAI,cAAc,eAAe;EAC/B,KAAK,cAAc,YAAY,GAC7B,QAAQ,cAAc,UAAU;EAC/B,iBAAiB,MAAM,KAAK,QAAQ,KAAK;EACzC,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE,CAAC;CACH,EACF;EACC,uBAAuB,cAAc,UAAU;EAC9C,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBAC5D,CAAC;CACH;AACF,EACF,EAAE"}

package/dist/esm/components/Messages/WarningMessages.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningMessages.js","names":[],"sources":["../../../../src/components/Messages/WarningMessages.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport { AccountDeployedMessage } from './AccountDeployedMessage.js'\nimport { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'\nimport { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'\nimport { GasSufficiencyMessage } from './GasSufficiencyMessage.js'\nimport { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'\nimport { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'\nimport { useMessageQueue } from './useMessageQueue.js'\n\ntype WarningMessagesProps = BoxProps & {\n  route?: Route\n  allowInteraction?: boolean\n}\n\nexport const WarningMessages: React.FC<WarningMessagesProps> = ({\n  route,\n  allowInteraction,\n  ...props\n}) => {\n  const { messages, hasMessages } = useMessageQueue(route, allowInteraction)\n\n  const getMessage = () => {\n    switch (messages[0]?.id) {\n      case 'MISSING_ROUTE_REQUIRED_ACCOUNT':\n        return (\n          <MissingRouteRequiredAccountMessage\n            chain={messages[0].props?.chain}\n            address={messages[0].props?.address}\n            {...props}\n          />\n        )\n      case 'INSUFFICIENT_FUNDS':\n        return <FundsSufficiencyMessage {...props} />\n      case 'INSUFFICIENT_GAS':\n        return (\n          <GasSufficiencyMessage\n            insufficientGas={messages[0].props?.insufficientGas}\n            {...props}\n          />\n        )\n      case 'MIN_FROM_AMOUNT_USD':\n        return (\n          <MinFromAmountUSDMessage\n            minFromAmountUSD={messages[0].props?.minFromAmountUSD}\n            {...props}\n          />\n        )\n      case 'ACCOUNT_NOT_DEPLOYED':\n        return <AccountNotDeployedMessage {...props} />\n      case 'ACCOUNT_DEPLOYED':\n        return <AccountDeployedMessage {...props} />\n      default:\n        return null\n    }\n  }\n\n  return (\n    <Collapse in={hasMessages} timeout={225} unmountOnExit mountOnEnter>\n      {getMessage()}\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,mBAAmD,EAC9D,OACA,kBACA,GAAG,YACC;CACJ,MAAM,EAAE,UAAU,gBAAgB,gBAAgB,OAAO,gBAAgB;CAEzE,MAAM,mBAAmB;EACvB,QAAQ,SAAS,IAAI,IAArB;GACE,KAAK,kCACH,OACE,oBAAC,oCAAD;IACE,OAAO,SAAS,GAAG,OAAO;IAC1B,SAAS,SAAS,GAAG,OAAO;IAC5B,GAAI;GACL,CAAA;GAEL,KAAK,sBACH,OAAO,oBAAC,yBAAD,EAAyB,GAAI,MAAQ,CAAA;GAC9C,KAAK,oBACH,OACE,oBAAC,uBAAD;IACE,iBAAiB,SAAS,GAAG,OAAO;IACpC,GAAI;GACL,CAAA;GAEL,KAAK,uBACH,OACE,oBAAC,yBAAD;IACE,kBAAkB,SAAS,GAAG,OAAO;IACrC,GAAI;GACL,CAAA;GAEL,KAAK,wBACH,OAAO,oBAAC,2BAAD,EAA2B,GAAI,MAAQ,CAAA;GAChD,KAAK,oBACH,OAAO,oBAAC,wBAAD,EAAwB,GAAI,MAAQ,CAAA;GAC7C,SACE,OAAO;EACX;CACF;CAEA,OACE,oBAAC,UAAD;EAAU,IAAI;EAAa,SAAS;EAAK,eAAA;EAAc,cAAA;YACpD,WAAW;CACJ,CAAA;AAEd"}
+{"version":3,"file":"WarningMessages.js","names":[],"sources":["../../../../src/components/Messages/WarningMessages.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport { AccountDeployedMessage } from './AccountDeployedMessage.js'\nimport { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'\nimport { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'\nimport { GasSufficiencyMessage } from './GasSufficiencyMessage.js'\nimport { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'\nimport { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'\nimport { useMessageQueue } from './useMessageQueue.js'\n\ntype WarningMessagesProps = BoxProps & {\n  route?: Route\n  allowInteraction?: boolean\n}\n\nexport const WarningMessages: React.FC<WarningMessagesProps> = ({\n  route,\n  allowInteraction,\n  ...props\n}) => {\n  const { messages, hasMessages } = useMessageQueue(route, allowInteraction)\n\n  const getMessage = () => {\n    switch (messages[0]?.id) {\n      case 'MISSING_ROUTE_REQUIRED_ACCOUNT':\n        return (\n          <MissingRouteRequiredAccountMessage\n            chain={messages[0].props?.chain}\n            address={messages[0].props?.address}\n            {...props}\n          />\n        )\n      case 'INSUFFICIENT_FUNDS':\n        return <FundsSufficiencyMessage {...props} />\n      case 'INSUFFICIENT_GAS':\n        return (\n          <GasSufficiencyMessage\n            insufficientGas={messages[0].props?.insufficientGas}\n            {...props}\n          />\n        )\n      case 'MIN_FROM_AMOUNT_USD':\n        return (\n          <MinFromAmountUSDMessage\n            minFromAmountUSD={messages[0].props?.minFromAmountUSD}\n            {...props}\n          />\n        )\n      case 'ACCOUNT_NOT_DEPLOYED':\n        return <AccountNotDeployedMessage {...props} />\n      case 'ACCOUNT_DEPLOYED':\n        return <AccountDeployedMessage {...props} />\n      default:\n        return null\n    }\n  }\n\n  return (\n    <Collapse in={hasMessages} timeout={225} unmountOnExit mountOnEnter>\n      {getMessage()}\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,mBAAmD,EAC9D,OACA,kBACA,GAAG,YACC;CACJ,MAAM,EAAE,UAAU,gBAAgB,gBAAgB,OAAO,gBAAgB;CAEzE,MAAM,mBAAmB;EACvB,QAAQ,SAAS,EAAE,EAAE,IAArB;GACE,KAAK,kCACH,OACE,oBAAC,oCAAD;IACE,OAAO,SAAS,EAAE,CAAC,OAAO;IAC1B,SAAS,SAAS,EAAE,CAAC,OAAO;IAC5B,GAAI;GACL,CAAA;GAEL,KAAK,sBACH,OAAO,oBAAC,yBAAD,EAAyB,GAAI,MAAQ,CAAA;GAC9C,KAAK,oBACH,OACE,oBAAC,uBAAD;IACE,iBAAiB,SAAS,EAAE,CAAC,OAAO;IACpC,GAAI;GACL,CAAA;GAEL,KAAK,uBACH,OACE,oBAAC,yBAAD;IACE,kBAAkB,SAAS,EAAE,CAAC,OAAO;IACrC,GAAI;GACL,CAAA;GAEL,KAAK,wBACH,OAAO,oBAAC,2BAAD,EAA2B,GAAI,MAAQ,CAAA;GAChD,KAAK,oBACH,OAAO,oBAAC,wBAAD,EAAwB,GAAI,MAAQ,CAAA;GAC7C,SACE,OAAO;EACX;CACF;CAEA,OACE,oBAAC,UAAD;EAAU,IAAI;EAAa,SAAS;EAAK,eAAA;EAAc,cAAA;YACpD,WAAW;CACJ,CAAA;AAEd"}

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

@@ -1 +1 @@
-{"version":3,"file":"PageContainer.js","names":[],"sources":["../../../src/components/PageContainer.ts"],"sourcesContent":["import type { ContainerProps } from '@mui/material'\nimport { Container, styled } from '@mui/material'\nimport type React from 'react'\n\nexport interface PageContainerProps extends ContainerProps {\n  halfGutters?: boolean\n  topGutters?: boolean\n  bottomGutters?: boolean\n}\n\nexport const PageContainer: React.FC<\n  React.ComponentProps<typeof Container> & PageContainerProps\n> = styled(Container, {\n  shouldForwardProp: (prop) =>\n    !['halfGutters', 'topGutters', 'bottomGutters'].includes(prop as string),\n})<PageContainerProps>(({ theme, halfGutters, topGutters, bottomGutters }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n  padding: theme.spacing(\n    topGutters ? 1.5 : 0,\n    halfGutters ? 1.5 : 3,\n    bottomGutters ? 3 : 0,\n    halfGutters ? 1.5 : 3\n  ),\n  variants: [\n    {\n      props: ({ disableGutters }) => disableGutters,\n      style: {\n        padding: 0,\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAUA,MAAa,gBAET,OAAO,WAAW,EACpB,oBAAoB,SAClB,CAAC;CAAC;CAAe;CAAc;AAAe,EAAE,SAAS,IAAc,EAC3E,CAAC,GAAuB,EAAE,OAAO,aAAa,YAAY,qBAAqB;CAC7E,SAAS;CACT,eAAe;CACf,MAAM;CACN,SAAS,MAAM,QACb,aAAa,MAAM,GACnB,cAAc,MAAM,GACpB,gBAAgB,IAAI,GACpB,cAAc,MAAM,CACtB;CACA,UAAU,CACR;EACE,QAAQ,EAAE,qBAAqB;EAC/B,OAAO,EACL,SAAS,EACX;CACF,CACF;AACF,EAAE"}
+{"version":3,"file":"PageContainer.js","names":[],"sources":["../../../src/components/PageContainer.ts"],"sourcesContent":["import type { ContainerProps } from '@mui/material'\nimport { Container, styled } from '@mui/material'\nimport type React from 'react'\n\nexport interface PageContainerProps extends ContainerProps {\n  halfGutters?: boolean\n  topGutters?: boolean\n  bottomGutters?: boolean\n}\n\nexport const PageContainer: React.FC<\n  React.ComponentProps<typeof Container> & PageContainerProps\n> = styled(Container, {\n  shouldForwardProp: (prop) =>\n    !['halfGutters', 'topGutters', 'bottomGutters'].includes(prop as string),\n})<PageContainerProps>(({ theme, halfGutters, topGutters, bottomGutters }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n  padding: theme.spacing(\n    topGutters ? 1.5 : 0,\n    halfGutters ? 1.5 : 3,\n    bottomGutters ? 3 : 0,\n    halfGutters ? 1.5 : 3\n  ),\n  variants: [\n    {\n      props: ({ disableGutters }) => disableGutters,\n      style: {\n        padding: 0,\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAUA,MAAa,gBAET,OAAO,WAAW,EACpB,oBAAoB,SAClB,CAAC;CAAC;CAAe;CAAc;AAAe,CAAC,CAAC,SAAS,IAAc,EAC3E,CAAC,CAAC,EAAsB,EAAE,OAAO,aAAa,YAAY,qBAAqB;CAC7E,SAAS;CACT,eAAe;CACf,MAAM;CACN,SAAS,MAAM,QACb,aAAa,MAAM,GACnB,cAAc,MAAM,GACpB,gBAAgB,IAAI,GACpB,cAAc,MAAM,CACtB;CACA,UAAU,CACR;EACE,QAAQ,EAAE,qBAAqB;EAC/B,OAAO,EACL,SAAS,EACX;CACF,CACF;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"PoweredBy.js","names":["Link"],"sources":["../../../../src/components/PoweredBy/PoweredBy.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { version } from '../../config/version.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Link } from './PoweredBy.style.js'\n\nconst poweredByConfig = {\n  default: {\n    url: 'https://li.fi',\n    text: 'LI.FI',\n  },\n  jumper: {\n    url: 'https://jumper.exchange',\n    text: 'Jumper',\n  },\n}\n\nexport const PoweredBy: React.FC = () => {\n  const { poweredBy = 'default' } = useWidgetConfig()\n\n  return (\n    <Box\n      sx={{\n        pt: 1,\n        pb: 2,\n        flex: 1,\n        display: 'flex',\n        alignItems: 'flex-end',\n        justifyContent: 'flex-end',\n      }}\n    >\n      <Tooltip title={`v${version}`} enterDelay={1000}>\n        <Link\n          href={poweredByConfig[poweredBy].url}\n          target=\"_blank\"\n          underline=\"none\"\n          color=\"text.primary\"\n        >\n          <Typography\n            sx={{\n              color: 'text.secondary',\n              fontSize: 12,\n              fontWeight: 500,\n              px: 0.5,\n            }}\n          >\n            Powered by\n          </Typography>\n          <Typography\n            sx={{\n              color: 'text.primary',\n              fontSize: 12,\n              fontWeight: 600,\n            }}\n          >\n            {poweredByConfig[poweredBy].text}\n          </Typography>\n        </Link>\n      </Tooltip>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAM,kBAAkB;CACtB,SAAS;EACP,KAAK;EACL,MAAM;CACR;CACA,QAAQ;EACN,KAAK;EACL,MAAM;CACR;AACF;AAEA,MAAa,kBAA4B;CACvC,MAAM,EAAE,YAAY,cAAc,gBAAgB;CAElD,OACE,oBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;EAClB;YAEA,oBAAC,SAAD;GAAS,OAAO,IAAI;GAAW,YAAY;aACzC,qBAACA,QAAD;IACE,MAAM,gBAAgB,WAAW;IACjC,QAAO;IACP,WAAU;IACV,OAAM;cAJR,CAME,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,UAAU;MACV,YAAY;MACZ,IAAI;KACN;eACD;IAEW,CAAA,GACZ,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,UAAU;MACV,YAAY;KACd;eAEC,gBAAgB,WAAW;IAClB,CAAA,CACR;;EACC,CAAA;CACN,CAAA;AAET"}
+{"version":3,"file":"PoweredBy.js","names":["Link"],"sources":["../../../../src/components/PoweredBy/PoweredBy.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { version } from '../../config/version.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Link } from './PoweredBy.style.js'\n\nconst poweredByConfig = {\n  default: {\n    url: 'https://li.fi',\n    text: 'LI.FI',\n  },\n  jumper: {\n    url: 'https://jumper.exchange',\n    text: 'Jumper',\n  },\n}\n\nexport const PoweredBy: React.FC = () => {\n  const { poweredBy = 'default' } = useWidgetConfig()\n\n  return (\n    <Box\n      sx={{\n        pt: 1,\n        pb: 2,\n        flex: 1,\n        display: 'flex',\n        alignItems: 'flex-end',\n        justifyContent: 'flex-end',\n      }}\n    >\n      <Tooltip title={`v${version}`} enterDelay={1000}>\n        <Link\n          href={poweredByConfig[poweredBy].url}\n          target=\"_blank\"\n          underline=\"none\"\n          color=\"text.primary\"\n        >\n          <Typography\n            sx={{\n              color: 'text.secondary',\n              fontSize: 12,\n              fontWeight: 500,\n              px: 0.5,\n            }}\n          >\n            Powered by\n          </Typography>\n          <Typography\n            sx={{\n              color: 'text.primary',\n              fontSize: 12,\n              fontWeight: 600,\n            }}\n          >\n            {poweredByConfig[poweredBy].text}\n          </Typography>\n        </Link>\n      </Tooltip>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAM,kBAAkB;CACtB,SAAS;EACP,KAAK;EACL,MAAM;CACR;CACA,QAAQ;EACN,KAAK;EACL,MAAM;CACR;AACF;AAEA,MAAa,kBAA4B;CACvC,MAAM,EAAE,YAAY,cAAc,gBAAgB;CAElD,OACE,oBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;EAClB;YAEA,oBAAC,SAAD;GAAS,OAAO,IAAI;GAAW,YAAY;aACzC,qBAACA,QAAD;IACE,MAAM,gBAAgB,UAAU,CAAC;IACjC,QAAO;IACP,WAAU;IACV,OAAM;cAJR,CAME,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,UAAU;MACV,YAAY;MACZ,IAAI;KACN;eACD;IAEW,CAAA,GACZ,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,UAAU;MACV,YAAY;KACd;eAEC,gBAAgB,UAAU,CAAC;IAClB,CAAA,CACR;;EACC,CAAA;CACN,CAAA;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"PoweredBy.style.js","names":["Link","MuiLink"],"sources":["../../../../src/components/PoweredBy/PoweredBy.style.ts"],"sourcesContent":["import { Link as MuiLink, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const Link: React.FC<React.ComponentProps<typeof MuiLink>> = styled(\n  MuiLink\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  border: 'none',\n  ':hover': {\n    color: theme.vars.palette.primary.main,\n  },\n}))\n"],"mappings":";;AAGA,MAAaA,SAAuD,OAClEC,IACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,UAAU,EACR,OAAO,MAAM,KAAK,QAAQ,QAAQ,KACpC;AACF,EAAE"}
+{"version":3,"file":"PoweredBy.style.js","names":["Link","MuiLink"],"sources":["../../../../src/components/PoweredBy/PoweredBy.style.ts"],"sourcesContent":["import { Link as MuiLink, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const Link: React.FC<React.ComponentProps<typeof MuiLink>> = styled(\n  MuiLink\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  border: 'none',\n  ':hover': {\n    color: theme.vars.palette.primary.main,\n  },\n}))\n"],"mappings":";;AAGA,MAAaA,SAAuD,OAClEC,IACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,UAAU,EACR,OAAO,MAAM,KAAK,QAAQ,QAAQ,KACpC;AACF,EAAE"}

package/dist/esm/components/ReverseTokensButton/ReverseTokensButton.js

@@ -29,6 +29,7 @@ const ReverseTokensButton = () => {
 		if (toChain) tryResetToAddress(toChain);
 	};
 	return /* @__PURE__ */ jsx(ReverseContainer, { children: /* @__PURE__ */ jsx(IconCard, {
+		"data-testid": "widget-reverse-tokens-button",
 		onClick: handleClick,
 		children: /* @__PURE__ */ jsx(ArrowForward, { fontSize: "inherit" })
 	}) });

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

@@ -1 +1 @@
-{"version":3,"file":"ReverseTokensButton.js","names":[],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.tsx"],"sourcesContent":["import ArrowForward from '@mui/icons-material/ArrowForward'\nimport type { JSX } from 'react'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'\n\nexport const ReverseTokensButton = (): JSX.Element => {\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const { getChainById } = useAvailableChains()\n  const { tryResetToAddress } = useToAddressReset()\n  const autoPopulateToAddress = useToAddressAutoPopulate()\n\n  const handleClick = () => {\n    const [fromChainId, fromToken, toChainId, toToken, toAddress] =\n      getFieldValues(\n        'fromChain',\n        'fromToken',\n        'toChain',\n        'toToken',\n        'toAddress'\n      )\n    setFieldValue('fromAmount', '', { isTouched: true })\n    setFieldValue('fromChain', toChainId, { isTouched: true })\n    setFieldValue('fromToken', toToken, { isTouched: true })\n    setFieldValue('toChain', fromChainId, { isTouched: true })\n    setFieldValue('toToken', fromToken, { isTouched: true })\n\n    const autoPopulatedToAddress = autoPopulateToAddress({\n      formType: 'from',\n      selectedToAddress: toAddress,\n      selectedChainId: toChainId,\n      selectedOppositeChainId: fromChainId,\n      selectedOppositeTokenAddress: fromToken,\n    })\n\n    // Returning early as a compatible connected wallet was found, and toAddress has been populated\n    if (autoPopulatedToAddress) {\n      return\n    }\n\n    // Auto-population applies in certain scenarios, but otherwise,\n    // we attempt to reset `toAddress` when bridging across ecosystems\n    // fromChainId becomes toChainId after using reverse\n    const toChain = getChainById(fromChainId)\n    if (toChain) {\n      tryResetToAddress(toChain)\n    }\n  }\n  return (\n    <ReverseContainer>\n      <IconCard onClick={handleClick}>\n        <ArrowForward fontSize=\"inherit\" />\n      </IconCard>\n    </ReverseContainer>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,4BAAyC;CACpD,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAAoB;EACxB,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,aACjD,eACE,aACA,aACA,WACA,WACA,WACF;EACF,cAAc,cAAc,IAAI,EAAE,WAAW,KAAK,CAAC;EACnD,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAWvD,IAT+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAGyB,GACvB;EAMF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CACA,OACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,UAAD;EAAU,SAAS;YACjB,oBAAC,cAAD,EAAc,UAAS,UAAW,CAAA;CAC1B,CAAA,EACM,CAAA;AAEtB"}
+{"version":3,"file":"ReverseTokensButton.js","names":[],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.tsx"],"sourcesContent":["import ArrowForward from '@mui/icons-material/ArrowForward'\nimport type { JSX } from 'react'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'\n\nexport const ReverseTokensButton = (): JSX.Element => {\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const { getChainById } = useAvailableChains()\n  const { tryResetToAddress } = useToAddressReset()\n  const autoPopulateToAddress = useToAddressAutoPopulate()\n\n  const handleClick = () => {\n    const [fromChainId, fromToken, toChainId, toToken, toAddress] =\n      getFieldValues(\n        'fromChain',\n        'fromToken',\n        'toChain',\n        'toToken',\n        'toAddress'\n      )\n    setFieldValue('fromAmount', '', { isTouched: true })\n    setFieldValue('fromChain', toChainId, { isTouched: true })\n    setFieldValue('fromToken', toToken, { isTouched: true })\n    setFieldValue('toChain', fromChainId, { isTouched: true })\n    setFieldValue('toToken', fromToken, { isTouched: true })\n\n    const autoPopulatedToAddress = autoPopulateToAddress({\n      formType: 'from',\n      selectedToAddress: toAddress,\n      selectedChainId: toChainId,\n      selectedOppositeChainId: fromChainId,\n      selectedOppositeTokenAddress: fromToken,\n    })\n\n    // Returning early as a compatible connected wallet was found, and toAddress has been populated\n    if (autoPopulatedToAddress) {\n      return\n    }\n\n    // Auto-population applies in certain scenarios, but otherwise,\n    // we attempt to reset `toAddress` when bridging across ecosystems\n    // fromChainId becomes toChainId after using reverse\n    const toChain = getChainById(fromChainId)\n    if (toChain) {\n      tryResetToAddress(toChain)\n    }\n  }\n  return (\n    <ReverseContainer>\n      <IconCard\n        data-testid=\"widget-reverse-tokens-button\"\n        onClick={handleClick}\n      >\n        <ArrowForward fontSize=\"inherit\" />\n      </IconCard>\n    </ReverseContainer>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,4BAAyC;CACpD,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAAoB;EACxB,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,aACjD,eACE,aACA,aACA,WACA,WACA,WACF;EACF,cAAc,cAAc,IAAI,EAAE,WAAW,KAAK,CAAC;EACnD,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAWvD,IAT+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAGyB,GACvB;EAMF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CACA,OACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,UAAD;EACE,eAAY;EACZ,SAAS;YAET,oBAAC,cAAD,EAAc,UAAS,UAAW,CAAA;CAC1B,CAAA,EACM,CAAA;AAEtB"}

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

@@ -1 +1 @@
-{"version":3,"file":"ReverseTokensButton.style.js","names":["Card"],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { Card } from '../Card/Card.js'\n\nexport const IconCard: React.FC<React.ComponentProps<typeof Card>> = styled(\n  Card\n)(({ theme }) => ({\n  height: 32,\n  width: 32,\n  fontSize: 16,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  zIndex: 1110,\n}))\n\nexport const ReverseContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => {\n    return {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      margin: theme.spacing(-1),\n    }\n  })\n\nexport const ReverseTokensButtonEmpty: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    margin: theme.spacing(1),\n  }\n})\n"],"mappings":";;;AAIA,MAAa,WAAwD,OACnEA,MACF,GAAG,EAAE,aAAa;CAChB,QAAQ;CACR,OAAO;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,cAAc,MAAM,KAAK,MAAM;CAC/B,QAAQ;AACV,EAAE;AAEF,MAAa,mBACX,OAAO,GAAG,GAAG,EAAE,YAAY;CACzB,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ,MAAM,QAAQ,EAAE;CAC1B;AACF,CAAC;AAEH,MAAa,2BAET,OAAO,GAAG,GAAG,EAAE,YAAY;CAC7B,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ,MAAM,QAAQ,CAAC;CACzB;AACF,CAAC"}
+{"version":3,"file":"ReverseTokensButton.style.js","names":["Card"],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { Card } from '../Card/Card.js'\n\nexport const IconCard: React.FC<React.ComponentProps<typeof Card>> = styled(\n  Card\n)(({ theme }) => ({\n  height: 32,\n  width: 32,\n  fontSize: 16,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  zIndex: 1110,\n}))\n\nexport const ReverseContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => {\n    return {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      margin: theme.spacing(-1),\n    }\n  })\n\nexport const ReverseTokensButtonEmpty: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    margin: theme.spacing(1),\n  }\n})\n"],"mappings":";;;AAIA,MAAa,WAAwD,OACnEA,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,QAAQ;CACR,OAAO;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,cAAc,MAAM,KAAK,MAAM;CAC/B,QAAQ;AACV,EAAE;AAEF,MAAa,mBACX,OAAO,GAAG,CAAC,EAAE,EAAE,YAAY;CACzB,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ,MAAM,QAAQ,EAAE;CAC1B;AACF,CAAC;AAEH,MAAa,2BAET,OAAO,GAAG,CAAC,EAAE,EAAE,YAAY;CAC7B,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ,MAAM,QAAQ,CAAC;CACzB;AACF,CAAC"}

package/dist/esm/components/RouteCard/RouteDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"RouteDetails.js","names":[],"sources":["../../../../src/components/RouteCard/RouteDetails.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport { Box, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenRateText } from '../../hooks/useTokenRateText.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { isRouteDone } from '../../stores/routes/utils.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport {\n  formatDuration,\n  formatTokenAmount,\n  formatTokenPrice,\n} from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { StepActions } from '../Step/StepActions.js'\nimport {\n  DetailInfoIcon,\n  DetailLabel,\n  DetailLabelContainer,\n  DetailRow,\n  DetailValue,\n} from './RouteDetails.style.js'\n\ninterface RouteDetailsProps {\n  route: RouteExtended\n}\n\nexport const RouteDetails = ({ route }: RouteDetailsProps): JSX.Element => {\n  const { t, i18n } = useTranslation()\n  const { rateText, toggleRate } = useTokenRateText(route)\n  const { feeConfig } = useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n    getAccumulatedFeeCostsBreakdown(route)\n\n  const priceImpact = getPriceImpact({\n    fromAmount: BigInt(route.fromAmount),\n    toAmount: BigInt(route.toAmount),\n    fromToken: route.fromToken,\n    toToken: route.toToken,\n  })\n\n  let feeAmountUSD = 0\n  let feePercentage = 0\n\n  const feeCollectionStep = route.steps[0].includedSteps.find(\n    (includedStep) => includedStep.tool === 'feeCollection'\n  )\n\n  if (feeCollectionStep) {\n    const estimatedFromAmount =\n      BigInt(feeCollectionStep.estimate.fromAmount) -\n      BigInt(feeCollectionStep.estimate.toAmount)\n\n    feeAmountUSD = formatTokenPrice(\n      estimatedFromAmount,\n      feeCollectionStep.action.fromToken.priceUSD,\n      feeCollectionStep.action.fromToken.decimals\n    )\n\n    feePercentage =\n      feeCollectionStep.estimate.feeCosts?.reduce(\n        (percentage, feeCost) =>\n          percentage + Number.parseFloat(feeCost.percentage || '0'),\n        0\n      ) ?? 0\n  }\n\n  const executionTimeSeconds = Math.floor(\n    route.steps.reduce(\n      (duration, step) => duration + step.estimate.executionDuration,\n      0\n    )\n  )\n\n  const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))\n\n  const showIntegratorFeeCollectionDetails =\n    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, pt: 1.5 }}>\n      <StepActions route={route} />\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.fees.network')}</DetailLabel>\n          <FeeBreakdownTooltip gasCosts={gasCosts} gasless={hasGaslessSupport}>\n            <DetailInfoIcon />\n          </FeeBreakdownTooltip>\n        </DetailLabelContainer>\n        <DetailValue>\n          {!gasCostUSD\n            ? t('main.fees.free')\n            : t('format.currency', { value: gasCostUSD })}\n        </DetailValue>\n      </DetailRow>\n      {feeCosts.length ? (\n        <DetailRow>\n          <DetailLabelContainer>\n            <DetailLabel>{t('main.fees.provider')}</DetailLabel>\n            <FeeBreakdownTooltip feeCosts={feeCosts}>\n              <DetailInfoIcon />\n            </FeeBreakdownTooltip>\n          </DetailLabelContainer>\n          <DetailValue>\n            {t('format.currency', { value: feeCostUSD })}\n          </DetailValue>\n        </DetailRow>\n      ) : null}\n      {showIntegratorFeeCollectionDetails ? (\n        <DetailRow>\n          <DetailLabelContainer>\n            <DetailLabel>\n              {feeConfig?.name || t('main.fees.defaultIntegrator')}\n              {feeConfig?.showFeePercentage && (\n                <> ({t('format.percent', { value: feePercentage })})</>\n              )}\n            </DetailLabel>\n            {feeConfig?.showFeeTooltip &&\n            (feeConfig?.name || feeConfig?.feeTooltipComponent) ? (\n              <Tooltip\n                title={\n                  feeConfig?.feeTooltipComponent ||\n                  t('tooltip.feeCollection', { tool: feeConfig.name })\n                }\n              >\n                <DetailInfoIcon />\n              </Tooltip>\n            ) : null}\n          </DetailLabelContainer>\n          <DetailValue>\n            {t('format.currency', { value: feeAmountUSD })}\n          </DetailValue>\n        </DetailRow>\n      ) : null}\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.priceImpact')}</DetailLabel>\n          <Tooltip title={t('tooltip.priceImpact')}>\n            <DetailInfoIcon />\n          </Tooltip>\n        </DetailLabelContainer>\n        <DetailValue>\n          {t('format.percent', { value: priceImpact, usePlusSign: true })}\n        </DetailValue>\n      </DetailRow>\n      {!isRouteDone(route) ? (\n        <>\n          <DetailRow>\n            <DetailLabelContainer>\n              <DetailLabel>{t('main.maxSlippage')}</DetailLabel>\n              <Tooltip title={t('tooltip.slippage')}>\n                <DetailInfoIcon />\n              </Tooltip>\n            </DetailLabelContainer>\n            <DetailValue>\n              {route.steps[0].action.slippage\n                ? t('format.percent', {\n                    value: route.steps[0].action.slippage,\n                  })\n                : t('button.auto')}\n            </DetailValue>\n          </DetailRow>\n          <DetailRow>\n            <DetailLabelContainer>\n              <DetailLabel>{t('main.minReceived')}</DetailLabel>\n              <Tooltip title={t('tooltip.minReceived')}>\n                <DetailInfoIcon />\n              </Tooltip>\n            </DetailLabelContainer>\n            <DetailValue>\n              {t('format.tokenAmount', {\n                value: formatTokenAmount(\n                  BigInt(route.toAmountMin),\n                  route.toToken.decimals\n                ),\n              })}{' '}\n              {route.toToken.symbol}\n            </DetailValue>\n          </DetailRow>\n        </>\n      ) : null}\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.exchangeRate')}</DetailLabel>\n          <Tooltip title={t('tooltip.exchangeRate')}>\n            <DetailInfoIcon />\n          </Tooltip>\n        </DetailLabelContainer>\n        <DetailValue\n          onClick={toggleRate}\n          role=\"button\"\n          sx={{ cursor: 'pointer' }}\n        >\n          {rateText}\n        </DetailValue>\n      </DetailRow>\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.estimatedTime')}</DetailLabel>\n          <Tooltip title={t('tooltip.estimatedTime')}>\n            <DetailInfoIcon />\n          </Tooltip>\n        </DetailLabelContainer>\n        <DetailValue>\n          {formatDuration(executionTimeSeconds, i18n.language)}\n        </DetailValue>\n      </DetailRow>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"RouteDetails.js","names":[],"sources":["../../../../src/components/RouteCard/RouteDetails.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport { Box, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenRateText } from '../../hooks/useTokenRateText.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { isRouteDone } from '../../stores/routes/utils.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport {\n  formatDuration,\n  formatTokenAmount,\n  formatTokenPrice,\n} from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { StepActions } from '../Step/StepActions.js'\nimport {\n  DetailInfoIcon,\n  DetailLabel,\n  DetailLabelContainer,\n  DetailRow,\n  DetailValue,\n} from './RouteDetails.style.js'\n\ninterface RouteDetailsProps {\n  route: RouteExtended\n}\n\nexport const RouteDetails = ({ route }: RouteDetailsProps): JSX.Element => {\n  const { t, i18n } = useTranslation()\n  const { rateText, toggleRate } = useTokenRateText(route)\n  const { feeConfig } = useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n    getAccumulatedFeeCostsBreakdown(route)\n\n  const priceImpact = getPriceImpact({\n    fromAmount: BigInt(route.fromAmount),\n    toAmount: BigInt(route.toAmount),\n    fromToken: route.fromToken,\n    toToken: route.toToken,\n  })\n\n  let feeAmountUSD = 0\n  let feePercentage = 0\n\n  const feeCollectionStep = route.steps[0].includedSteps.find(\n    (includedStep) => includedStep.tool === 'feeCollection'\n  )\n\n  if (feeCollectionStep) {\n    const estimatedFromAmount =\n      BigInt(feeCollectionStep.estimate.fromAmount) -\n      BigInt(feeCollectionStep.estimate.toAmount)\n\n    feeAmountUSD = formatTokenPrice(\n      estimatedFromAmount,\n      feeCollectionStep.action.fromToken.priceUSD,\n      feeCollectionStep.action.fromToken.decimals\n    )\n\n    feePercentage =\n      feeCollectionStep.estimate.feeCosts?.reduce(\n        (percentage, feeCost) =>\n          percentage + Number.parseFloat(feeCost.percentage || '0'),\n        0\n      ) ?? 0\n  }\n\n  const executionTimeSeconds = Math.floor(\n    route.steps.reduce(\n      (duration, step) => duration + step.estimate.executionDuration,\n      0\n    )\n  )\n\n  const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))\n\n  const showIntegratorFeeCollectionDetails =\n    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, pt: 1.5 }}>\n      <StepActions route={route} />\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.fees.network')}</DetailLabel>\n          <FeeBreakdownTooltip gasCosts={gasCosts} gasless={hasGaslessSupport}>\n            <DetailInfoIcon />\n          </FeeBreakdownTooltip>\n        </DetailLabelContainer>\n        <DetailValue>\n          {!gasCostUSD\n            ? t('main.fees.free')\n            : t('format.currency', { value: gasCostUSD })}\n        </DetailValue>\n      </DetailRow>\n      {feeCosts.length ? (\n        <DetailRow>\n          <DetailLabelContainer>\n            <DetailLabel>{t('main.fees.provider')}</DetailLabel>\n            <FeeBreakdownTooltip feeCosts={feeCosts}>\n              <DetailInfoIcon />\n            </FeeBreakdownTooltip>\n          </DetailLabelContainer>\n          <DetailValue>\n            {t('format.currency', { value: feeCostUSD })}\n          </DetailValue>\n        </DetailRow>\n      ) : null}\n      {showIntegratorFeeCollectionDetails ? (\n        <DetailRow>\n          <DetailLabelContainer>\n            <DetailLabel>\n              {feeConfig?.name || t('main.fees.defaultIntegrator')}\n              {feeConfig?.showFeePercentage && (\n                <> ({t('format.percent', { value: feePercentage })})</>\n              )}\n            </DetailLabel>\n            {feeConfig?.showFeeTooltip &&\n            (feeConfig?.name || feeConfig?.feeTooltipComponent) ? (\n              <Tooltip\n                title={\n                  feeConfig?.feeTooltipComponent ||\n                  t('tooltip.feeCollection', { tool: feeConfig.name })\n                }\n              >\n                <DetailInfoIcon />\n              </Tooltip>\n            ) : null}\n          </DetailLabelContainer>\n          <DetailValue>\n            {t('format.currency', { value: feeAmountUSD })}\n          </DetailValue>\n        </DetailRow>\n      ) : null}\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.priceImpact')}</DetailLabel>\n          <Tooltip title={t('tooltip.priceImpact')}>\n            <DetailInfoIcon />\n          </Tooltip>\n        </DetailLabelContainer>\n        <DetailValue>\n          {t('format.percent', { value: priceImpact, usePlusSign: true })}\n        </DetailValue>\n      </DetailRow>\n      {!isRouteDone(route) ? (\n        <>\n          <DetailRow>\n            <DetailLabelContainer>\n              <DetailLabel>{t('main.maxSlippage')}</DetailLabel>\n              <Tooltip title={t('tooltip.slippage')}>\n                <DetailInfoIcon />\n              </Tooltip>\n            </DetailLabelContainer>\n            <DetailValue>\n              {route.steps[0].action.slippage\n                ? t('format.percent', {\n                    value: route.steps[0].action.slippage,\n                  })\n                : t('button.auto')}\n            </DetailValue>\n          </DetailRow>\n          <DetailRow>\n            <DetailLabelContainer>\n              <DetailLabel>{t('main.minReceived')}</DetailLabel>\n              <Tooltip title={t('tooltip.minReceived')}>\n                <DetailInfoIcon />\n              </Tooltip>\n            </DetailLabelContainer>\n            <DetailValue>\n              {t('format.tokenAmount', {\n                value: formatTokenAmount(\n                  BigInt(route.toAmountMin),\n                  route.toToken.decimals\n                ),\n              })}{' '}\n              {route.toToken.symbol}\n            </DetailValue>\n          </DetailRow>\n        </>\n      ) : null}\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.exchangeRate')}</DetailLabel>\n          <Tooltip title={t('tooltip.exchangeRate')}>\n            <DetailInfoIcon />\n          </Tooltip>\n        </DetailLabelContainer>\n        <DetailValue\n          onClick={toggleRate}\n          role=\"button\"\n          sx={{ cursor: 'pointer' }}\n        >\n          {rateText}\n        </DetailValue>\n      </DetailRow>\n      <DetailRow>\n        <DetailLabelContainer>\n          <DetailLabel>{t('main.estimatedTime')}</DetailLabel>\n          <Tooltip title={t('tooltip.estimatedTime')}>\n            <DetailInfoIcon />\n          </Tooltip>\n        </DetailLabelContainer>\n        <DetailValue>\n          {formatDuration(executionTimeSeconds, i18n.language)}\n        </DetailValue>\n      </DetailRow>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/RouteCard/RouteDetails.style.js

@@ -1,5 +1,5 @@
 import { Box, Typography, styled } from "@mui/material";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import InfoOutlined from "@mui/icons-material/InfoOutlined";
 //#region src/components/RouteCard/RouteDetails.style.tsx
 const DetailRow = styled(Box)(({ theme }) => ({
 	display: "flex",
@@ -24,7 +24,7 @@ const DetailValue = styled(Typography)(() => ({
 	lineHeight: 1.3334,
 	textAlign: "right"
 }));
-const DetailInfoIcon = styled(InfoOutlinedIcon)(({ theme }) => ({
+const DetailInfoIcon = styled(InfoOutlined)(({ theme }) => ({
 	fontSize: 16,
 	color: theme.vars.palette.text.secondary,
 	cursor: "help"