@lifi/widget 4.0.0 → 4.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"RouteDetails.style.js","names":["InfoOutlined"],"sources":["../../../../src/components/RouteCard/RouteDetails.style.tsx"],"sourcesContent":["import InfoOutlined from '@mui/icons-material/InfoOutlined'\nimport { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const DetailRow: 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(1),\n}))\n\nexport const DetailLabelContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  }))\n\nexport const DetailLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    fontSize: 12,\n    fontWeight: 500,\n    lineHeight: 1.3334,\n    color: theme.vars.palette.text.secondary,\n  }))\n\nexport const DetailValue: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(() => ({\n    fontSize: 12,\n    fontWeight: 700,\n    lineHeight: 1.3334,\n    textAlign: 'right',\n  }))\n\nexport const DetailInfoIcon: React.FC<\n  React.ComponentProps<typeof InfoOutlined>\n> = styled(InfoOutlined)(({ theme }) => ({\n  fontSize: 16,\n  color: theme.vars.palette.text.secondary,\n  cursor: 'help',\n}))\n"],"mappings":";;;AAIA,MAAa,YAAwD,OACnE,GACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,uBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAG;AACxB,EAAE;AAEJ,MAAa,cACX,OAAO,UAAU,GAAG,EAAE,aAAa;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEJ,MAAa,cACX,OAAO,UAAU,SAAS;CACxB,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,WAAW;AACb,EAAE;AAEJ,MAAa,iBAET,OAAOA,gBAAY,GAAG,EAAE,aAAa;CACvC,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;AACV,EAAE"}
+{"version":3,"file":"RouteDetails.style.js","names":[],"sources":["../../../../src/components/RouteCard/RouteDetails.style.tsx"],"sourcesContent":["import InfoOutlined from '@mui/icons-material/InfoOutlined'\nimport { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const DetailRow: 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(1),\n}))\n\nexport const DetailLabelContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  }))\n\nexport const DetailLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    fontSize: 12,\n    fontWeight: 500,\n    lineHeight: 1.3334,\n    color: theme.vars.palette.text.secondary,\n  }))\n\nexport const DetailValue: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(() => ({\n    fontSize: 12,\n    fontWeight: 700,\n    lineHeight: 1.3334,\n    textAlign: 'right',\n  }))\n\nexport const DetailInfoIcon: React.FC<\n  React.ComponentProps<typeof InfoOutlined>\n> = styled(InfoOutlined)(({ theme }) => ({\n  fontSize: 16,\n  color: theme.vars.palette.text.secondary,\n  cursor: 'help',\n}))\n"],"mappings":";;;AAIA,MAAa,YAAwD,OACnE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,uBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAG;AACxB,EAAE;AAEJ,MAAa,cACX,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEJ,MAAa,cACX,OAAO,UAAU,CAAC,QAAQ;CACxB,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,WAAW;AACb,EAAE;AAEJ,MAAa,iBAET,OAAO,YAAY,CAAC,EAAE,EAAE,aAAa;CACvC,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;AACV,EAAE"}

package/dist/esm/components/RouteCard/RouteProviderCard.js

@@ -0,0 +1,118 @@
+import { Card as Card$1 } from "../Card/Card.js";
+import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
+import { SmallAvatar } from "../Avatar/SmallAvatar.js";
+import { IconTypography } from "../IconTypography.js";
+import { Box, Skeleton, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import LocalGasStationRounded from "@mui/icons-material/LocalGasStationRounded";
+//#region src/components/RouteCard/RouteProviderCard.tsx
+const RouteProviderCard = ({ route, active, onClick, ...other }) => {
+	const { t } = useTranslation();
+	const provider = route.steps[0]?.toolDetails;
+	const { gasCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+	return /* @__PURE__ */ jsx(Card$1, {
+		type: active ? "selected" : "default",
+		selectionColor: "secondary",
+		onClick,
+		sx: {
+			py: 1.5,
+			px: 2,
+			...onClick ? { cursor: "pointer" } : {}
+		},
+		...other,
+		children: /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				gap: 1
+			},
+			children: [/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: 1,
+					minWidth: 0
+				},
+				children: [/* @__PURE__ */ jsx(SmallAvatar, {
+					src: provider?.logoURI,
+					alt: provider?.name,
+					size: 20,
+					children: provider?.name?.[0]
+				}), /* @__PURE__ */ jsx(Typography, {
+					noWrap: true,
+					sx: {
+						fontSize: 14,
+						fontWeight: 600,
+						color: "text.primary"
+					},
+					children: provider?.name
+				})]
+			}), /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center"
+				},
+				children: [/* @__PURE__ */ jsx(IconTypography, {
+					component: "span",
+					sx: {
+						mr: .5,
+						fontSize: 16
+					},
+					children: /* @__PURE__ */ jsx(LocalGasStationRounded, { fontSize: "inherit" })
+				}), /* @__PURE__ */ jsx(Typography, {
+					"data-value": gasCostUSD,
+					sx: {
+						fontSize: 14,
+						color: "text.primary",
+						fontWeight: 600,
+						lineHeight: 1
+					},
+					children: !gasCostUSD ? t("main.fees.free") : t("format.currency", { value: gasCostUSD })
+				})]
+			})]
+		})
+	});
+};
+const RouteProviderCardSkeleton = (props) => {
+	return /* @__PURE__ */ jsx(Card$1, {
+		sx: {
+			py: 1.5,
+			px: 2
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				gap: 1
+			},
+			children: [/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: 1
+				},
+				children: [/* @__PURE__ */ jsx(Skeleton, {
+					variant: "circular",
+					width: 20,
+					height: 20
+				}), /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					width: 80,
+					height: 20
+				})]
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				width: 56,
+				height: 20
+			})]
+		})
+	});
+};
+//#endregion
+export { RouteProviderCard, RouteProviderCardSkeleton };
+
+//# sourceMappingURL=RouteProviderCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RouteProviderCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteProviderCard.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { IconTypography } from '../IconTypography.js'\n\ninterface RouteProviderCardProps {\n  route: Route\n  active?: boolean\n}\n\nexport const RouteProviderCard: React.FC<\n  RouteProviderCardProps & Omit<CardProps, 'variant'>\n> = ({ route, active, onClick, ...other }) => {\n  const { t } = useTranslation()\n\n  const provider = route.steps[0]?.toolDetails\n  const { gasCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n\n  return (\n    <Card\n      type={active ? 'selected' : 'default'}\n      selectionColor=\"secondary\"\n      onClick={onClick}\n      sx={{ py: 1.5, px: 2, ...(onClick ? { cursor: 'pointer' } : {}) }}\n      {...other}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n        }}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 1,\n            minWidth: 0,\n          }}\n        >\n          <SmallAvatar src={provider?.logoURI} alt={provider?.name} size={20}>\n            {provider?.name?.[0]}\n          </SmallAvatar>\n          <Typography\n            noWrap\n            sx={{\n              fontSize: 14,\n              fontWeight: 600,\n              color: 'text.primary',\n            }}\n          >\n            {provider?.name}\n          </Typography>\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n          }}\n        >\n          <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n            <LocalGasStationRounded fontSize=\"inherit\" />\n          </IconTypography>\n          <Typography\n            data-value={gasCostUSD}\n            sx={{\n              fontSize: 14,\n              color: 'text.primary',\n              fontWeight: 600,\n              lineHeight: 1,\n            }}\n          >\n            {!gasCostUSD\n              ? t('main.fees.free')\n              : t('format.currency', {\n                  value: gasCostUSD,\n                })}\n          </Typography>\n        </Box>\n      </Box>\n    </Card>\n  )\n}\n\nexport const RouteProviderCardSkeleton: React.FC<Omit<CardProps, 'variant'>> = (\n  props\n) => {\n  return (\n    <Card sx={{ py: 1.5, px: 2 }} {...props}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n        }}\n      >\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n          <Skeleton variant=\"circular\" width={20} height={20} />\n          <Skeleton variant=\"text\" width={80} height={20} />\n        </Box>\n        <Skeleton variant=\"text\" width={56} height={20} />\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,qBAER,EAAE,OAAO,QAAQ,SAAS,GAAG,YAAY;CAC5C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,WAAW,MAAM,MAAM,EAAE,EAAE;CACjC,MAAM,EAAE,eAAe,gCAAgC,KAAK;CAE5D,OACE,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACN;EACT,IAAI;GAAE,IAAI;GAAK,IAAI;GAAG,GAAI,UAAU,EAAE,QAAQ,UAAU,IAAI,CAAC;EAAG;EAChE,GAAI;YAEJ,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,KAAK;GACP;aANF,CAQE,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,KAAK;KACL,UAAU;IACZ;cANF,CAQE,oBAAC,aAAD;KAAa,KAAK,UAAU;KAAS,KAAK,UAAU;KAAM,MAAM;eAC7D,UAAU,OAAO;IACP,CAAA,GACb,oBAAC,YAAD;KACE,QAAA;KACA,IAAI;MACF,UAAU;MACV,YAAY;MACZ,OAAO;KACT;eAEC,UAAU;IACD,CAAA,CACT;OACL,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;IACd;cAJF,CAME,oBAAC,gBAAD;KAAgB,WAAU;KAAO,IAAI;MAAE,IAAI;MAAK,UAAU;KAAG;eAC3D,oBAAC,wBAAD,EAAwB,UAAS,UAAW,CAAA;IAC9B,CAAA,GAChB,oBAAC,YAAD;KACE,cAAY;KACZ,IAAI;MACF,UAAU;MACV,OAAO;MACP,YAAY;MACZ,YAAY;KACd;eAEC,CAAC,aACE,EAAE,gBAAgB,IAClB,EAAE,mBAAmB,EACnB,OAAO,WACT,CAAC;IACK,CAAA,CACT;KACF;;CACD,CAAA;AAEV;AAEA,MAAa,6BACX,UACG;CACH,OACE,oBAACA,QAAD;EAAM,IAAI;GAAE,IAAI;GAAK,IAAI;EAAE;EAAG,GAAI;YAChC,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,KAAK;GACP;aANF,CAQE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,YAAY;KAAU,KAAK;IAAE;cAAzD,CACE,oBAAC,UAAD;KAAU,SAAQ;KAAW,OAAO;KAAI,QAAQ;IAAK,CAAA,GACrD,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA,CAC9C;OACL,oBAAC,UAAD;IAAU,SAAQ;IAAO,OAAO;IAAI,QAAQ;GAAK,CAAA,CAC9C;;CACD,CAAA;AAEV"}

package/dist/esm/components/RouteCard/RouteToken.style.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n  route: RouteExtended\n  showEssentials?: boolean\n  defaultExpanded?: boolean\n}> = ({ route, showEssentials, defaultExpanded }) => {\n  const { mode } = useWidgetConfig()\n\n  const fromToken = {\n    ...route.steps[0].action.fromToken,\n    amount: BigInt(route.steps[0].action.fromAmount),\n  }\n\n  const lastStepIndex = route.steps.length - 1\n  const toToken = {\n    ...(route.steps[lastStepIndex].execution?.toToken ??\n      route.steps[lastStepIndex].action.toToken),\n    amount: route.steps[lastStepIndex].execution?.toAmount\n      ? BigInt(route.steps[lastStepIndex].execution.toAmount)\n      : mode === 'custom'\n        ? BigInt(route.toAmount)\n        : BigInt(route.steps[lastStepIndex].estimate.toAmount),\n  }\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      {fromToken ? <Token token={fromToken} /> : null}\n      <Box\n        sx={{\n          width: 40,\n          height: 20,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <ArrowDownwardIcon sx={{ fontSize: 16 }} />\n      </Box>\n      {toToken ? (\n        <RouteToken\n          route={route}\n          token={toToken}\n          impactToken={fromToken}\n          showEssentials={showEssentials}\n          defaultExpanded={defaultExpanded}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,eAIP,EAAE,OAAO,gBAAgB,sBAAsB;CACnD,MAAM,EAAE,SAAS,gBAAgB;CAEjC,MAAM,YAAY;EAChB,GAAG,MAAM,MAAM,GAAG,OAAO;EACzB,QAAQ,OAAO,MAAM,MAAM,GAAG,OAAO,UAAU;CACjD;CAEA,MAAM,gBAAgB,MAAM,MAAM,SAAS;CAC3C,MAAM,UAAU;EACd,GAAI,MAAM,MAAM,eAAe,WAAW,WACxC,MAAM,MAAM,eAAe,OAAO;EACpC,QAAQ,MAAM,MAAM,eAAe,WAAW,WAC1C,OAAO,MAAM,MAAM,eAAe,UAAU,QAAQ,IACpD,SAAS,WACP,OAAO,MAAM,QAAQ,IACrB,OAAO,MAAM,MAAM,eAAe,SAAS,QAAQ;CAC3D;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;YAA9D;GACG,YAAY,oBAAC,OAAD,EAAO,OAAO,UAAY,CAAA,IAAI;GAC3C,oBAAC,KAAD;IACE,IAAI;KACF,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;IAClB;cAEA,oBAAC,mBAAD,EAAmB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACvC,CAAA;GACJ,UACC,oBAAC,YAAD;IACS;IACP,OAAO;IACP,aAAa;IACG;IACC;GAClB,CAAA,IACC;EACD;;AAET"}
+{"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n  route: RouteExtended\n  showEssentials?: boolean\n  defaultExpanded?: boolean\n}> = ({ route, showEssentials, defaultExpanded }) => {\n  const { mode } = useWidgetConfig()\n\n  const fromToken = {\n    ...route.steps[0].action.fromToken,\n    amount: BigInt(route.steps[0].action.fromAmount),\n  }\n\n  const lastStepIndex = route.steps.length - 1\n  const toToken = {\n    ...(route.steps[lastStepIndex].execution?.toToken ??\n      route.steps[lastStepIndex].action.toToken),\n    amount: route.steps[lastStepIndex].execution?.toAmount\n      ? BigInt(route.steps[lastStepIndex].execution.toAmount)\n      : mode === 'custom'\n        ? BigInt(route.toAmount)\n        : BigInt(route.steps[lastStepIndex].estimate.toAmount),\n  }\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      {fromToken ? <Token token={fromToken} /> : null}\n      <Box\n        sx={{\n          width: 40,\n          height: 20,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <ArrowDownwardIcon sx={{ fontSize: 16 }} />\n      </Box>\n      {toToken ? (\n        <RouteToken\n          route={route}\n          token={toToken}\n          impactToken={fromToken}\n          showEssentials={showEssentials}\n          defaultExpanded={defaultExpanded}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,eAIP,EAAE,OAAO,gBAAgB,sBAAsB;CACnD,MAAM,EAAE,SAAS,gBAAgB;CAEjC,MAAM,YAAY;EAChB,GAAG,MAAM,MAAM,EAAE,CAAC,OAAO;EACzB,QAAQ,OAAO,MAAM,MAAM,EAAE,CAAC,OAAO,UAAU;CACjD;CAEA,MAAM,gBAAgB,MAAM,MAAM,SAAS;CAC3C,MAAM,UAAU;EACd,GAAI,MAAM,MAAM,cAAc,CAAC,WAAW,WACxC,MAAM,MAAM,cAAc,CAAC,OAAO;EACpC,QAAQ,MAAM,MAAM,cAAc,CAAC,WAAW,WAC1C,OAAO,MAAM,MAAM,cAAc,CAAC,UAAU,QAAQ,IACpD,SAAS,WACP,OAAO,MAAM,QAAQ,IACrB,OAAO,MAAM,MAAM,cAAc,CAAC,SAAS,QAAQ;CAC3D;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;YAA9D;GACG,YAAY,oBAAC,OAAD,EAAO,OAAO,UAAY,CAAA,IAAI;GAC3C,oBAAC,KAAD;IACE,IAAI;KACF,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;IAClB;cAEA,oBAAC,mBAAD,EAAmB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACvC,CAAA;GACJ,UACC,oBAAC,YAAD;IACS;IACP,OAAO;IACP,aAAa;IACG;IACC;GAClB,CAAA,IACC;EACD;;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"getMatchingLabels.js","names":[],"sources":["../../../../src/components/RouteCard/getMatchingLabels.ts"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { RouteLabel, RouteLabelRule } from '../../types/widget.js'\nimport { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'\n\nexport const getMatchingLabels = (\n  route: Route,\n  routeLabels?: RouteLabelRule[]\n): RouteLabel[] => {\n  if (!routeLabels?.length) {\n    return []\n  }\n\n  return routeLabels\n    .filter((rule) => {\n      const conditions: boolean[] = []\n\n      // Check bridge/exchange matches if specified\n      if (rule.bridges || rule.exchanges) {\n        const toolNames = route.steps.flatMap((step) =>\n          step.includedSteps.map((s) => s.tool)\n        )\n        const bridgesConfigSets = getConfigItemSets(\n          rule.bridges,\n          (bridges) => new Set(bridges)\n        )\n        const exchangesConfigSets = getConfigItemSets(\n          rule.exchanges,\n          (exchanges) => new Set(exchanges)\n        )\n        conditions.push(\n          toolNames.some(\n            (toolName) =>\n              isItemAllowedForSets(toolName, bridgesConfigSets) &&\n              isItemAllowedForSets(toolName, exchangesConfigSets)\n          )\n        )\n      }\n\n      // Check token matches if specified\n      if (rule.fromTokenAddress?.length) {\n        conditions.push(rule.fromTokenAddress.includes(route.fromToken.address))\n      }\n\n      if (rule.toTokenAddress?.length) {\n        conditions.push(rule.toTokenAddress.includes(route.toToken.address))\n      }\n\n      // Check chain matches if specified\n      if (rule.fromChainId?.length) {\n        conditions.push(rule.fromChainId.includes(route.fromChainId))\n      }\n\n      if (rule.toChainId?.length) {\n        conditions.push(rule.toChainId.includes(route.toChainId))\n      }\n\n      // Evaluate custom match function if specified\n      if (rule.match) {\n        conditions.push(rule.match(route))\n      }\n\n      // Must have at least one condition and all conditions must be true\n      return conditions.length && conditions.every(Boolean)\n    })\n    .map((rule) => rule.label)\n}\n"],"mappings":";;AAIA,MAAa,qBACX,OACA,gBACiB;CACjB,IAAI,CAAC,aAAa,QAChB,OAAO,CAAC;CAGV,OAAO,YACJ,QAAQ,SAAS;EAChB,MAAM,aAAwB,CAAC;EAG/B,IAAI,KAAK,WAAW,KAAK,WAAW;GAClC,MAAM,YAAY,MAAM,MAAM,SAAS,SACrC,KAAK,cAAc,KAAK,MAAM,EAAE,IAAI,CACtC;GACA,MAAM,oBAAoB,kBACxB,KAAK,UACJ,YAAY,IAAI,IAAI,OAAO,CAC9B;GACA,MAAM,sBAAsB,kBAC1B,KAAK,YACJ,cAAc,IAAI,IAAI,SAAS,CAClC;GACA,WAAW,KACT,UAAU,MACP,aACC,qBAAqB,UAAU,iBAAiB,KAChD,qBAAqB,UAAU,mBAAmB,CACtD,CACF;EACF;EAGA,IAAI,KAAK,kBAAkB,QACzB,WAAW,KAAK,KAAK,iBAAiB,SAAS,MAAM,UAAU,OAAO,CAAC;EAGzE,IAAI,KAAK,gBAAgB,QACvB,WAAW,KAAK,KAAK,eAAe,SAAS,MAAM,QAAQ,OAAO,CAAC;EAIrE,IAAI,KAAK,aAAa,QACpB,WAAW,KAAK,KAAK,YAAY,SAAS,MAAM,WAAW,CAAC;EAG9D,IAAI,KAAK,WAAW,QAClB,WAAW,KAAK,KAAK,UAAU,SAAS,MAAM,SAAS,CAAC;EAI1D,IAAI,KAAK,OACP,WAAW,KAAK,KAAK,MAAM,KAAK,CAAC;EAInC,OAAO,WAAW,UAAU,WAAW,MAAM,OAAO;CACtD,CAAC,EACA,KAAK,SAAS,KAAK,KAAK;AAC7B"}
+{"version":3,"file":"getMatchingLabels.js","names":[],"sources":["../../../../src/components/RouteCard/getMatchingLabels.ts"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { RouteLabel, RouteLabelRule } from '../../types/widget.js'\nimport { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'\n\nexport const getMatchingLabels = (\n  route: Route,\n  routeLabels?: RouteLabelRule[]\n): RouteLabel[] => {\n  if (!routeLabels?.length) {\n    return []\n  }\n\n  return routeLabels\n    .filter((rule) => {\n      const conditions: boolean[] = []\n\n      // Check bridge/exchange matches if specified\n      if (rule.bridges || rule.exchanges) {\n        const toolNames = route.steps.flatMap((step) =>\n          step.includedSteps.map((s) => s.tool)\n        )\n        const bridgesConfigSets = getConfigItemSets(\n          rule.bridges,\n          (bridges) => new Set(bridges)\n        )\n        const exchangesConfigSets = getConfigItemSets(\n          rule.exchanges,\n          (exchanges) => new Set(exchanges)\n        )\n        conditions.push(\n          toolNames.some(\n            (toolName) =>\n              isItemAllowedForSets(toolName, bridgesConfigSets) &&\n              isItemAllowedForSets(toolName, exchangesConfigSets)\n          )\n        )\n      }\n\n      // Check token matches if specified\n      if (rule.fromTokenAddress?.length) {\n        conditions.push(rule.fromTokenAddress.includes(route.fromToken.address))\n      }\n\n      if (rule.toTokenAddress?.length) {\n        conditions.push(rule.toTokenAddress.includes(route.toToken.address))\n      }\n\n      // Check chain matches if specified\n      if (rule.fromChainId?.length) {\n        conditions.push(rule.fromChainId.includes(route.fromChainId))\n      }\n\n      if (rule.toChainId?.length) {\n        conditions.push(rule.toChainId.includes(route.toChainId))\n      }\n\n      // Evaluate custom match function if specified\n      if (rule.match) {\n        conditions.push(rule.match(route))\n      }\n\n      // Must have at least one condition and all conditions must be true\n      return conditions.length && conditions.every(Boolean)\n    })\n    .map((rule) => rule.label)\n}\n"],"mappings":";;AAIA,MAAa,qBACX,OACA,gBACiB;CACjB,IAAI,CAAC,aAAa,QAChB,OAAO,CAAC;CAGV,OAAO,YACJ,QAAQ,SAAS;EAChB,MAAM,aAAwB,CAAC;EAG/B,IAAI,KAAK,WAAW,KAAK,WAAW;GAClC,MAAM,YAAY,MAAM,MAAM,SAAS,SACrC,KAAK,cAAc,KAAK,MAAM,EAAE,IAAI,CACtC;GACA,MAAM,oBAAoB,kBACxB,KAAK,UACJ,YAAY,IAAI,IAAI,OAAO,CAC9B;GACA,MAAM,sBAAsB,kBAC1B,KAAK,YACJ,cAAc,IAAI,IAAI,SAAS,CAClC;GACA,WAAW,KACT,UAAU,MACP,aACC,qBAAqB,UAAU,iBAAiB,KAChD,qBAAqB,UAAU,mBAAmB,CACtD,CACF;EACF;EAGA,IAAI,KAAK,kBAAkB,QACzB,WAAW,KAAK,KAAK,iBAAiB,SAAS,MAAM,UAAU,OAAO,CAAC;EAGzE,IAAI,KAAK,gBAAgB,QACvB,WAAW,KAAK,KAAK,eAAe,SAAS,MAAM,QAAQ,OAAO,CAAC;EAIrE,IAAI,KAAK,aAAa,QACpB,WAAW,KAAK,KAAK,YAAY,SAAS,MAAM,WAAW,CAAC;EAG9D,IAAI,KAAK,WAAW,QAClB,WAAW,KAAK,KAAK,UAAU,SAAS,MAAM,SAAS,CAAC;EAI1D,IAAI,KAAK,OACP,WAAW,KAAK,KAAK,MAAM,KAAK,CAAC;EAInC,OAAO,WAAW,UAAU,WAAW,MAAM,OAAO;CACtD,CAAC,CAAC,CACD,KAAK,SAAS,KAAK,KAAK;AAC7B"}

package/dist/esm/components/Routes/LimitOrderRoutes.js

@@ -0,0 +1,34 @@
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { RouteNotFoundCard } from "../RouteCard/RouteNotFoundCard.js";
+import { RouteProviderCard, RouteProviderCardSkeleton } from "../RouteCard/RouteProviderCard.js";
+import { Stack } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Routes/LimitOrderRoutes.tsx
+const LimitOrderRoutes = (props) => {
+	const { routes, isLoading, isFetching, isFetched } = useRoutes();
+	const [toAddress, selectedRouteId] = useFieldValues("toAddress", "selectedRouteId");
+	const { setFieldValue } = useFieldActions();
+	const { requiredToAddress } = useToAddressRequirements();
+	const currentRoute = routes?.[0];
+	if (!currentRoute && !isLoading && !isFetching && !isFetched) return null;
+	const allowInteraction = !(currentRoute && requiredToAddress && !toAddress);
+	const activeRouteId = routes?.find((route) => route.id === selectedRouteId)?.id ?? currentRoute?.id;
+	return /* @__PURE__ */ jsx(Stack, {
+		direction: "column",
+		spacing: 1,
+		sx: props.sx,
+		className: props.className,
+		children: isLoading && !currentRoute ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsx(RouteProviderCardSkeleton, {}, index)) : !currentRoute ? /* @__PURE__ */ jsx(RouteNotFoundCard, {}) : routes?.map((route) => /* @__PURE__ */ jsx(RouteProviderCard, {
+			route,
+			active: route.id === activeRouteId,
+			onClick: allowInteraction ? () => setFieldValue("selectedRouteId", route.id) : void 0
+		}, route.id))
+	});
+};
+//#endregion
+export { LimitOrderRoutes };
+
+//# sourceMappingURL=LimitOrderRoutes.js.map

package/dist/esm/components/Routes/LimitOrderRoutes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitOrderRoutes.js","names":[],"sources":["../../../../src/components/Routes/LimitOrderRoutes.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport {\n  RouteProviderCard,\n  RouteProviderCardSkeleton,\n} from '../RouteCard/RouteProviderCard.js'\n\nexport const LimitOrderRoutes: React.FC<CardProps> = (props) => {\n  const { routes, isLoading, isFetching, isFetched } = useRoutes()\n  const [toAddress, selectedRouteId] = useFieldValues(\n    'toAddress',\n    'selectedRouteId'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { requiredToAddress } = useToAddressRequirements()\n\n  const currentRoute = routes?.[0]\n\n  if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n    return null\n  }\n\n  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n  const allowInteraction = !toAddressUnsatisfied\n\n  const activeRouteId =\n    routes?.find((route) => route.id === selectedRouteId)?.id ??\n    currentRoute?.id\n\n  return (\n    <Stack\n      direction=\"column\"\n      spacing={1}\n      sx={props.sx}\n      className={props.className}\n    >\n      {isLoading && !currentRoute ? (\n        Array.from({ length: 2 }).map((_, index) => (\n          <RouteProviderCardSkeleton key={index} />\n        ))\n      ) : !currentRoute ? (\n        <RouteNotFoundCard />\n      ) : (\n        routes?.map((route) => (\n          <RouteProviderCard\n            key={route.id}\n            route={route}\n            active={route.id === activeRouteId}\n            onClick={\n              allowInteraction\n                ? () => setFieldValue('selectedRouteId', route.id)\n                : undefined\n            }\n          />\n        ))\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,oBAAyC,UAAU;CAC9D,MAAM,EAAE,QAAQ,WAAW,YAAY,cAAc,UAAU;CAC/D,MAAM,CAAC,WAAW,mBAAmB,eACnC,aACA,iBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAIT,MAAM,mBAAmB,EADI,gBAAgB,qBAAqB,CAAC;CAGnE,MAAM,gBACJ,QAAQ,MAAM,UAAU,MAAM,OAAO,eAAe,CAAC,EAAE,MACvD,cAAc;CAEhB,OACE,oBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,IAAI,MAAM;EACV,WAAW,MAAM;YAEhB,aAAa,CAAC,eACb,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,2BAAD,CAAwC,GAAR,KAAQ,CACzC,IACC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,QAAQ,KAAK,UACX,oBAAC,mBAAD;GAES;GACP,QAAQ,MAAM,OAAO;GACrB,SACE,yBACU,cAAc,mBAAmB,MAAM,EAAE,IAC/C,KAAA;EAEP,GARM,MAAM,EAQZ,CACF;CAEE,CAAA;AAEX"}

package/dist/esm/components/Routes/Routes.js

@@ -16,7 +16,7 @@ import { useTranslation } from "react-i18next";
 const Routes = (props) => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
-	const { mode, modeOptions, showSingleRoute } = useWidgetConfig();
+	const { mode, modeOptions, showSingleRoute, defaultUI } = useWidgetConfig();
 	const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch } = useRoutes();
 	const currentRoute = routes?.[0];
 	if (!currentRoute && !isLoading && !isFetching && !isFetched) return null;
@@ -28,7 +28,7 @@ const Routes = (props) => {
 	return /* @__PURE__ */ jsxs(Card$1, {
 		...props,
 		children: [
-			/* @__PURE__ */ jsx(CardTitle, { children: title }),
+			defaultUI?.layout === "cards" ? null : /* @__PURE__ */ jsx(CardTitle, { children: title }),
 			/* @__PURE__ */ jsx(ProgressToNextUpdate, {
 				updatedAt: dataUpdatedAt || Date.now(),
 				timeToUpdate: refetchTime,

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

@@ -1 +1 @@
-{"version":3,"file":"Routes.js","names":["Card"],"sources":["../../../../src/components/Routes/Routes.tsx"],"sourcesContent":["import { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\n\nexport const Routes: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { mode, modeOptions, showSingleRoute } = useWidgetConfig()\n  const {\n    routes,\n    isLoading,\n    isFetching,\n    isFetched,\n    dataUpdatedAt,\n    refetchTime,\n    refetch,\n  } = useRoutes()\n\n  const currentRoute = routes?.[0]\n\n  if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n    return null\n  }\n\n  const handleCardClick = () => {\n    navigate({ to: navigationRoutes.routes })\n  }\n\n  const routeNotFound = !currentRoute && !isLoading && !isFetching\n  const onlySingleRoute = mode === 'refuel' || showSingleRoute\n  const showAll =\n    !onlySingleRoute && !routeNotFound && (routes?.length ?? 0) > 1\n\n  const title =\n    mode === 'custom'\n      ? modeOptions?.custom?.type === 'deposit'\n        ? t('header.receive')\n        : t('header.youPay')\n      : t('header.receive')\n\n  return (\n    <Card {...props}>\n      <CardTitle>{title}</CardTitle>\n      <ProgressToNextUpdate\n        updatedAt={dataUpdatedAt || Date.now()}\n        timeToUpdate={refetchTime}\n        isLoading={isFetching}\n        onClick={() => refetch()}\n        sx={{\n          position: 'absolute',\n          top: 8,\n          right: 8,\n        }}\n      />\n      <Box\n        sx={{\n          p: 2,\n        }}\n      >\n        {isLoading && !currentRoute ? (\n          <RouteCardSkeleton variant=\"cardless\" />\n        ) : !currentRoute ? (\n          <RouteNotFoundCard />\n        ) : (\n          <RouteCard route={currentRoute} variant=\"cardless\" active />\n        )}\n\n        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>\n          <Box\n            sx={{\n              mt: 2,\n            }}\n          >\n            <ButtonTertiary onClick={handleCardClick} fullWidth>\n              {t('button.showAll')}\n            </ButtonTertiary>\n          </Box>\n        </Collapse>\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,UAA+B,UAAU;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,oBAAoB,gBAAgB;CAC/D,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,YACE,UAAU;CAEd,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAGT,MAAM,wBAAwB;EAC5B,SAAS,EAAE,IAAI,iBAAiB,OAAO,CAAC;CAC1C;CAIA,MAAM,UACJ,EAFsB,SAAS,YAAY,oBAEvB,EAHA,CAAC,gBAAgB,CAAC,aAAa,CAAC,gBAGb,QAAQ,UAAU,KAAK;CAEhE,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,QAAD;EAAM,GAAI;YAAV;GACE,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;GAC7B,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI;KACF,UAAU;KACV,KAAK;KACL,OAAO;IACT;GACD,CAAA;GACD,qBAAC,KAAD;IACE,IAAI,EACF,GAAG,EACL;cAHF,CAKG,aAAa,CAAC,eACb,oBAAC,mBAAD,EAAmB,SAAQ,WAAY,CAAA,IACrC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,oBAAC,WAAD;KAAW,OAAO;KAAc,SAAQ;KAAW,QAAA;IAAQ,CAAA,GAG7D,oBAAC,UAAD;KAAU,SAAS;KAAK,IAAI;KAAS,eAAA;KAAc,cAAA;eACjD,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,gBAAD;OAAgB,SAAS;OAAiB,WAAA;iBACvC,EAAE,gBAAgB;MACL,CAAA;KACb,CAAA;IACG,CAAA,CACP;;EACD;;AAEV"}
+{"version":3,"file":"Routes.js","names":["Card"],"sources":["../../../../src/components/Routes/Routes.tsx"],"sourcesContent":["import { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\n\nexport const Routes: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { mode, modeOptions, showSingleRoute, defaultUI } = useWidgetConfig()\n  const {\n    routes,\n    isLoading,\n    isFetching,\n    isFetched,\n    dataUpdatedAt,\n    refetchTime,\n    refetch,\n  } = useRoutes()\n\n  const currentRoute = routes?.[0]\n\n  if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n    return null\n  }\n\n  const handleCardClick = () => {\n    navigate({ to: navigationRoutes.routes })\n  }\n\n  const routeNotFound = !currentRoute && !isLoading && !isFetching\n  const onlySingleRoute = mode === 'refuel' || showSingleRoute\n  const showAll =\n    !onlySingleRoute && !routeNotFound && (routes?.length ?? 0) > 1\n\n  const title =\n    mode === 'custom'\n      ? modeOptions?.custom?.type === 'deposit'\n        ? t('header.receive')\n        : t('header.youPay')\n      : t('header.receive')\n\n  return (\n    <Card {...props}>\n      {/* The cards layout's Receive card already carries this header. */}\n      {defaultUI?.layout === 'cards' ? null : <CardTitle>{title}</CardTitle>}\n      <ProgressToNextUpdate\n        updatedAt={dataUpdatedAt || Date.now()}\n        timeToUpdate={refetchTime}\n        isLoading={isFetching}\n        onClick={() => refetch()}\n        sx={{\n          position: 'absolute',\n          top: 8,\n          right: 8,\n        }}\n      />\n      <Box\n        sx={{\n          p: 2,\n        }}\n      >\n        {isLoading && !currentRoute ? (\n          <RouteCardSkeleton variant=\"cardless\" />\n        ) : !currentRoute ? (\n          <RouteNotFoundCard />\n        ) : (\n          <RouteCard route={currentRoute} variant=\"cardless\" active />\n        )}\n\n        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>\n          <Box\n            sx={{\n              mt: 2,\n            }}\n          >\n            <ButtonTertiary onClick={handleCardClick} fullWidth>\n              {t('button.showAll')}\n            </ButtonTertiary>\n          </Box>\n        </Collapse>\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,UAA+B,UAAU;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,iBAAiB,cAAc,gBAAgB;CAC1E,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,YACE,UAAU;CAEd,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAGT,MAAM,wBAAwB;EAC5B,SAAS,EAAE,IAAI,iBAAiB,OAAO,CAAC;CAC1C;CAIA,MAAM,UACJ,EAFsB,SAAS,YAAY,oBAEvB,EAHA,CAAC,gBAAgB,CAAC,aAAa,CAAC,gBAGb,QAAQ,UAAU,KAAK;CAEhE,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,QAAD;EAAM,GAAI;YAAV;GAEG,WAAW,WAAW,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;GACrE,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI;KACF,UAAU;KACV,KAAK;KACL,OAAO;IACT;GACD,CAAA;GACD,qBAAC,KAAD;IACE,IAAI,EACF,GAAG,EACL;cAHF,CAKG,aAAa,CAAC,eACb,oBAAC,mBAAD,EAAmB,SAAQ,WAAY,CAAA,IACrC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,oBAAC,WAAD;KAAW,OAAO;KAAc,SAAQ;KAAW,QAAA;IAAQ,CAAA,GAG7D,oBAAC,UAAD;KAAU,SAAS;KAAK,IAAI;KAAS,eAAA;KAAc,cAAA;eACjD,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,gBAAD;OAAgB,SAAS;OAAiB,WAAA;iBACvC,EAAE,gBAAgB;MACL,CAAA;KACb,CAAA;IACG,CAAA,CACP;;EACD;;AAEV"}

package/dist/esm/components/Routes/RoutesContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoutesContent.js","names":["Container"],"sources":["../../../../src/components/Routes/RoutesContent.tsx"],"sourcesContent":["import type { ExtendedChain, Route } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { Stack, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport { Container, Header } from './RoutesExpanded.style.js'\n\ninterface RoutesContentProps {\n  routes?: Route[]\n  isFetching: boolean\n  isLoading: boolean\n  dataUpdatedAt: number\n  refetchTime: number\n  fromChain: ExtendedChain | undefined\n  refetch: () => void\n  onRouteClick: (route: Route) => void\n}\n\nconst headerHeight = '52px'\n\nexport const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =\n  memo(function RoutesContent({\n    routes,\n    isFetching,\n    isLoading,\n    dataUpdatedAt,\n    refetchTime,\n    fromChain,\n    refetch,\n    onRouteClick,\n  }: RoutesContentProps) {\n    const { t } = useTranslation()\n    const { mode, modeOptions } = useWidgetConfig()\n\n    const { account } = useAccount({ chainType: fromChain?.chainType })\n    const [toAddress] = useFieldValues('toAddress')\n    const { requiredToAddress } = useToAddressRequirements()\n\n    const currentRoute = routes?.[0]\n\n    const routeNotFound = !currentRoute && !isLoading && !isFetching\n    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n    const allowInteraction = account.isConnected && !toAddressUnsatisfied\n\n    const title =\n      mode === 'custom'\n        ? modeOptions?.custom?.type === 'deposit'\n          ? t('header.deposit')\n          : t('header.youPay')\n        : t('header.receive')\n\n    return (\n      <Container enableColorScheme minimumHeight={isLoading}>\n        <Header sx={{ height: headerHeight }}>\n          <Typography\n            noWrap\n            sx={{\n              fontSize: 18,\n              fontWeight: '700',\n              flex: 1,\n            }}\n          >\n            {title}\n          </Typography>\n          <ProgressToNextUpdate\n            updatedAt={dataUpdatedAt || Date.now()}\n            timeToUpdate={refetchTime}\n            isLoading={isFetching}\n            onClick={() => refetch()}\n            sx={{ marginRight: -1 }}\n          />\n        </Header>\n        <PageContainer\n          sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}\n        >\n          <Stack\n            direction=\"column\"\n            spacing={2}\n            sx={{\n              flex: 1,\n              paddingTop: 1.5,\n              paddingBottom: 3,\n            }}\n          >\n            {routeNotFound ? (\n              <RouteNotFoundCard />\n            ) : (isLoading || isFetching) && !routes?.length ? (\n              Array.from({ length: 3 }).map((_, index) => (\n                <RouteCardSkeleton key={index} />\n              ))\n            ) : (\n              routes?.map((route: Route, index: number) => (\n                <RouteCard\n                  key={index}\n                  route={route}\n                  onClick={\n                    allowInteraction ? () => onRouteClick(route) : undefined\n                  }\n                  active={index === 0}\n                  expanded={routes?.length === 1}\n                />\n              ))\n            )}\n          </Stack>\n        </PageContainer>\n      </Container>\n    )\n  })\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,eAAe;AAErB,MAAa,gBACX,KAAK,SAAS,cAAc,EAC1B,QACA,YACA,WACA,eACA,aACA,WACA,SACA,gBACqB;CACrB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAE9C,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,UAAU,CAAC;CAClE,MAAM,CAAC,aAAa,eAAe,WAAW;CAC9C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,SAAS;CAE9B,MAAM,gBAAgB,CAAC,gBAAgB,CAAC,aAAa,CAAC;CACtD,MAAM,uBAAuB,gBAAgB,qBAAqB,CAAC;CACnE,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,aAAD;EAAW,mBAAA;EAAkB,eAAe;YAA5C,CACE,qBAAC,QAAD;GAAQ,IAAI,EAAE,QAAQ,aAAa;aAAnC,CACE,oBAAC,YAAD;IACE,QAAA;IACA,IAAI;KACF,UAAU;KACV,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA,GACZ,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI,EAAE,aAAa,GAAG;GACvB,CAAA,CACK;MACR,oBAAC,eAAD;GACE,IAAI;IAAE,QAAQ,eAAe,aAAa;IAAI,UAAU;GAAO;aAE/D,oBAAC,OAAD;IACE,WAAU;IACV,SAAS;IACT,IAAI;KACF,MAAM;KACN,YAAY;KACZ,eAAe;IACjB;cAEC,gBACC,oBAAC,mBAAD,CAAoB,CAAA,KACjB,aAAa,eAAe,CAAC,QAAQ,SACxC,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,GAAG,UAChC,oBAAC,mBAAD,CAAgC,GAAR,KAAQ,CACjC,IAED,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;KAES;KACP,SACE,yBAAyB,aAAa,KAAK,IAAI,KAAA;KAEjD,QAAQ,UAAU;KAClB,UAAU,QAAQ,WAAW;IAC9B,GAPM,KAON,CACF;GAEE,CAAA;EACM,CAAA,CACN;;AAEf,CAAC"}
+{"version":3,"file":"RoutesContent.js","names":["Container"],"sources":["../../../../src/components/Routes/RoutesContent.tsx"],"sourcesContent":["import type { ExtendedChain, Route } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { Stack, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport { Container, Header } from './RoutesExpanded.style.js'\n\ninterface RoutesContentProps {\n  routes?: Route[]\n  isFetching: boolean\n  isLoading: boolean\n  dataUpdatedAt: number\n  refetchTime: number\n  fromChain: ExtendedChain | undefined\n  refetch: () => void\n  onRouteClick: (route: Route) => void\n}\n\nconst headerHeight = '52px'\n\nexport const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =\n  memo(function RoutesContent({\n    routes,\n    isFetching,\n    isLoading,\n    dataUpdatedAt,\n    refetchTime,\n    fromChain,\n    refetch,\n    onRouteClick,\n  }: RoutesContentProps) {\n    const { t } = useTranslation()\n    const { mode, modeOptions } = useWidgetConfig()\n\n    const { account } = useAccount({ chainType: fromChain?.chainType })\n    const [toAddress] = useFieldValues('toAddress')\n    const { requiredToAddress } = useToAddressRequirements()\n\n    const currentRoute = routes?.[0]\n\n    const routeNotFound = !currentRoute && !isLoading && !isFetching\n    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n    const allowInteraction = account.isConnected && !toAddressUnsatisfied\n\n    const title =\n      mode === 'custom'\n        ? modeOptions?.custom?.type === 'deposit'\n          ? t('header.deposit')\n          : t('header.youPay')\n        : t('header.receive')\n\n    return (\n      <Container enableColorScheme minimumHeight={isLoading}>\n        <Header sx={{ height: headerHeight }}>\n          <Typography\n            noWrap\n            sx={{\n              fontSize: 18,\n              fontWeight: '700',\n              flex: 1,\n            }}\n          >\n            {title}\n          </Typography>\n          <ProgressToNextUpdate\n            updatedAt={dataUpdatedAt || Date.now()}\n            timeToUpdate={refetchTime}\n            isLoading={isFetching}\n            onClick={() => refetch()}\n            sx={{ marginRight: -1 }}\n          />\n        </Header>\n        <PageContainer\n          sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}\n        >\n          <Stack\n            direction=\"column\"\n            spacing={2}\n            sx={{\n              flex: 1,\n              paddingTop: 1.5,\n              paddingBottom: 3,\n            }}\n          >\n            {routeNotFound ? (\n              <RouteNotFoundCard />\n            ) : (isLoading || isFetching) && !routes?.length ? (\n              Array.from({ length: 3 }).map((_, index) => (\n                <RouteCardSkeleton key={index} />\n              ))\n            ) : (\n              routes?.map((route: Route, index: number) => (\n                <RouteCard\n                  key={index}\n                  route={route}\n                  onClick={\n                    allowInteraction ? () => onRouteClick(route) : undefined\n                  }\n                  active={index === 0}\n                  expanded={routes?.length === 1}\n                />\n              ))\n            )}\n          </Stack>\n        </PageContainer>\n      </Container>\n    )\n  })\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,eAAe;AAErB,MAAa,gBACX,KAAK,SAAS,cAAc,EAC1B,QACA,YACA,WACA,eACA,aACA,WACA,SACA,gBACqB;CACrB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAE9C,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,UAAU,CAAC;CAClE,MAAM,CAAC,aAAa,eAAe,WAAW;CAC9C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,SAAS;CAE9B,MAAM,gBAAgB,CAAC,gBAAgB,CAAC,aAAa,CAAC;CACtD,MAAM,uBAAuB,gBAAgB,qBAAqB,CAAC;CACnE,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,aAAD;EAAW,mBAAA;EAAkB,eAAe;YAA5C,CACE,qBAAC,QAAD;GAAQ,IAAI,EAAE,QAAQ,aAAa;aAAnC,CACE,oBAAC,YAAD;IACE,QAAA;IACA,IAAI;KACF,UAAU;KACV,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA,GACZ,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI,EAAE,aAAa,GAAG;GACvB,CAAA,CACK;MACR,oBAAC,eAAD;GACE,IAAI;IAAE,QAAQ,eAAe,aAAa;IAAI,UAAU;GAAO;aAE/D,oBAAC,OAAD;IACE,WAAU;IACV,SAAS;IACT,IAAI;KACF,MAAM;KACN,YAAY;KACZ,eAAe;IACjB;cAEC,gBACC,oBAAC,mBAAD,CAAoB,CAAA,KACjB,aAAa,eAAe,CAAC,QAAQ,SACxC,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,mBAAD,CAAgC,GAAR,KAAQ,CACjC,IAED,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;KAES;KACP,SACE,yBAAyB,aAAa,KAAK,IAAI,KAAA;KAEjD,QAAQ,UAAU;KAClB,UAAU,QAAQ,WAAW;IAC9B,GAPM,KAON,CACF;GAEE,CAAA;EACM,CAAA,CACN;;AAEf,CAAC"}

package/dist/esm/components/Routes/RoutesExpanded.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoutesExpanded.style.js","names":["Container"],"sources":["../../../../src/components/Routes/RoutesExpanded.style.ts"],"sourcesContent":["import type { ScopedCssBaselineProps } from '@mui/material'\nimport { Box, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\n\nexport const routesExpansionWidth = '436px'\n\ninterface ContainerProps extends ScopedCssBaselineProps {\n  minimumHeight: boolean\n}\n\nexport const Container: React.FC<\n  React.ComponentProps<typeof ScopedCssBaseline> & ContainerProps\n> = styled(ScopedCssBaseline, {\n  shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),\n})<ContainerProps>(({ theme, minimumHeight }) => {\n  return {\n    ...theme.container,\n    backgroundColor: theme.vars.palette.background.default,\n    overflow: 'hidden',\n    width: routesExpansionWidth,\n    display: 'flex',\n    flexDirection: 'column',\n    whiteSpace: 'normal',\n    ...(theme.container?.display !== 'flex'\n      ? {\n          maxHeight: getWidgetMaxHeight(theme),\n          ...(minimumHeight ? { '&': { height: 'auto' } } : {}),\n        }\n      : { height: minimumHeight ? 'auto' : '100%' }),\n    ...theme.routesContainer,\n  }\n})\n\nexport const Header: React.FC<React.ComponentProps<typeof Box>> = styled(Box)(\n  ({ theme }) => ({\n    backgroundColor: theme.vars.palette.background.default,\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    padding: theme.spacing(1.5, 3, 0, 3),\n    position: 'sticky',\n    top: 0,\n    zIndex: 1200,\n  })\n)\n"],"mappings":";;;AAKA,MAAa,uBAAuB;AAMpC,MAAaA,cAET,OAAO,mBAAmB,EAC5B,oBAAoB,SAAS,CAAC,CAAC,eAAe,EAAE,SAAS,IAAc,EACzE,CAAC,GAAmB,EAAE,OAAO,oBAAoB;CAC/C,OAAO;EACL,GAAG,MAAM;EACT,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU;EACV,OAAO;EACP,SAAS;EACT,eAAe;EACf,YAAY;EACZ,GAAI,MAAM,WAAW,YAAY,SAC7B;GACE,WAAW,mBAAmB,KAAK;GACnC,GAAI,gBAAgB,EAAE,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC;EACrD,IACA,EAAE,QAAQ,gBAAgB,SAAS,OAAO;EAC9C,GAAG,MAAM;CACX;AACF,CAAC;AAED,MAAa,SAAqD,OAAO,GAAG,GACzE,EAAE,aAAa;CACd,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,SAAS,MAAM,QAAQ,KAAK,GAAG,GAAG,CAAC;CACnC,UAAU;CACV,KAAK;CACL,QAAQ;AACV,EACF"}
+{"version":3,"file":"RoutesExpanded.style.js","names":["Container"],"sources":["../../../../src/components/Routes/RoutesExpanded.style.ts"],"sourcesContent":["import type { ScopedCssBaselineProps } from '@mui/material'\nimport { Box, ScopedCssBaseline, styled } from '@mui/material'\nimport type React from 'react'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\n\nexport const routesExpansionWidth = '436px'\n\ninterface ContainerProps extends ScopedCssBaselineProps {\n  minimumHeight: boolean\n}\n\nexport const Container: React.FC<\n  React.ComponentProps<typeof ScopedCssBaseline> & ContainerProps\n> = styled(ScopedCssBaseline, {\n  shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),\n})<ContainerProps>(({ theme, minimumHeight }) => {\n  return {\n    ...theme.container,\n    backgroundColor: theme.vars.palette.background.default,\n    overflow: 'hidden',\n    width: routesExpansionWidth,\n    display: 'flex',\n    flexDirection: 'column',\n    whiteSpace: 'normal',\n    ...(theme.container?.display !== 'flex'\n      ? {\n          maxHeight: getWidgetMaxHeight(theme),\n          ...(minimumHeight ? { '&': { height: 'auto' } } : {}),\n        }\n      : { height: minimumHeight ? 'auto' : '100%' }),\n    ...theme.routesContainer,\n  }\n})\n\nexport const Header: React.FC<React.ComponentProps<typeof Box>> = styled(Box)(\n  ({ theme }) => ({\n    backgroundColor: theme.vars.palette.background.default,\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    padding: theme.spacing(1.5, 3, 0, 3),\n    position: 'sticky',\n    top: 0,\n    zIndex: 1200,\n  })\n)\n"],"mappings":";;;AAKA,MAAa,uBAAuB;AAMpC,MAAaA,cAET,OAAO,mBAAmB,EAC5B,oBAAoB,SAAS,CAAC,CAAC,eAAe,CAAC,CAAC,SAAS,IAAc,EACzE,CAAC,CAAC,EAAkB,EAAE,OAAO,oBAAoB;CAC/C,OAAO;EACL,GAAG,MAAM;EACT,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU;EACV,OAAO;EACP,SAAS;EACT,eAAe;EACf,YAAY;EACZ,GAAI,MAAM,WAAW,YAAY,SAC7B;GACE,WAAW,mBAAmB,KAAK;GACnC,GAAI,gBAAgB,EAAE,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC;EACrD,IACA,EAAE,QAAQ,gBAAgB,SAAS,OAAO;EAC9C,GAAG,MAAM;CACX;AACF,CAAC;AAED,MAAa,SAAqD,OAAO,GAAG,CAAC,EAC1E,EAAE,aAAa;CACd,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,SAAS,MAAM,QAAQ,KAAK,GAAG,GAAG,CAAC;CACnC,UAAU;CACV,KAAK;CACL,QAAQ;AACV,EACF"}

package/dist/esm/components/Search/SearchInput.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.style.js","names":["InputBase"],"sources":["../../../../src/components/Search/SearchInput.style.tsx"],"sourcesContent":["import {\n  inputAdornmentClasses,\n  inputBaseClasses,\n  styled,\n  svgIconClasses,\n} from '@mui/material'\nimport type React from 'react'\nimport { Input as InputBase } from '../../components/Input.js'\n\ninterface InputProps {\n  size?: 'small' | 'medium'\n}\n\nexport const Input: React.FC<\n  React.ComponentProps<typeof InputBase> & InputProps\n> = styled(InputBase, {\n  shouldForwardProp: (prop) => prop !== 'size',\n})<InputProps>(({ theme, size = 'medium' }) => ({\n  paddingRight: size === 'small' ? theme.spacing(1.25) : theme.spacing(1.75),\n  paddingLeft: theme.spacing(1.25),\n  fontSize: size === 'small' ? '0.875rem' : '1rem',\n  borderRadius: theme.vars.shape.borderRadius,\n  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n    paddingRight: theme.spacing(1.25),\n  },\n  [`& .${inputBaseClasses.input}`]: {\n    padding: theme.spacing(1),\n  },\n  [`& .${inputAdornmentClasses.root}`]: {\n    marginLeft: 0,\n    marginRight: 0,\n    [`& .${svgIconClasses.root}`]: {\n      width: size === 'small' ? '1.25rem' : '1.5rem',\n    },\n  },\n  [`& .${inputAdornmentClasses.root}.${inputAdornmentClasses.positionEnd}`]: {\n    marginRight: size === 'small' ? theme.spacing(-0.5) : theme.spacing(-1),\n    [`& .${svgIconClasses.root}`]: {\n      width: size === 'small' ? '1rem' : '1.25rem',\n      height: size === 'small' ? '1rem' : '1.25rem',\n    },\n  },\n}))\n"],"mappings":";;;AAaA,MAAa,QAET,OAAOA,SAAW,EACpB,oBAAoB,SAAS,SAAS,OACxC,CAAC,GAAe,EAAE,OAAO,OAAO,gBAAgB;CAC9C,cAAc,SAAS,UAAU,MAAM,QAAQ,IAAI,IAAI,MAAM,QAAQ,IAAI;CACzE,aAAa,MAAM,QAAQ,IAAI;CAC/B,UAAU,SAAS,UAAU,aAAa;CAC1C,cAAc,MAAM,KAAK,MAAM;EAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,cAAc,MAAM,QAAQ,IAAI,EAClC;EACC,MAAM,iBAAiB,UAAU,EAChC,SAAS,MAAM,QAAQ,CAAC,EAC1B;EACC,MAAM,sBAAsB,SAAS;EACpC,YAAY;EACZ,aAAa;GACZ,MAAM,eAAe,SAAS,EAC7B,OAAO,SAAS,UAAU,YAAY,SACxC;CACF;EACC,MAAM,sBAAsB,KAAK,GAAG,sBAAsB,gBAAgB;EACzE,aAAa,SAAS,UAAU,MAAM,QAAQ,GAAI,IAAI,MAAM,QAAQ,EAAE;GACrE,MAAM,eAAe,SAAS;GAC7B,OAAO,SAAS,UAAU,SAAS;GACnC,QAAQ,SAAS,UAAU,SAAS;EACtC;CACF;AACF,EAAE"}
+{"version":3,"file":"SearchInput.style.js","names":["InputBase"],"sources":["../../../../src/components/Search/SearchInput.style.tsx"],"sourcesContent":["import {\n  inputAdornmentClasses,\n  inputBaseClasses,\n  styled,\n  svgIconClasses,\n} from '@mui/material'\nimport type React from 'react'\nimport { Input as InputBase } from '../../components/Input.js'\n\ninterface InputProps {\n  size?: 'small' | 'medium'\n}\n\nexport const Input: React.FC<\n  React.ComponentProps<typeof InputBase> & InputProps\n> = styled(InputBase, {\n  shouldForwardProp: (prop) => prop !== 'size',\n})<InputProps>(({ theme, size = 'medium' }) => ({\n  paddingRight: size === 'small' ? theme.spacing(1.25) : theme.spacing(1.75),\n  paddingLeft: theme.spacing(1.25),\n  fontSize: size === 'small' ? '0.875rem' : '1rem',\n  borderRadius: theme.vars.shape.borderRadius,\n  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n    paddingRight: theme.spacing(1.25),\n  },\n  [`& .${inputBaseClasses.input}`]: {\n    padding: theme.spacing(1),\n  },\n  [`& .${inputAdornmentClasses.root}`]: {\n    marginLeft: 0,\n    marginRight: 0,\n    [`& .${svgIconClasses.root}`]: {\n      width: size === 'small' ? '1.25rem' : '1.5rem',\n    },\n  },\n  [`& .${inputAdornmentClasses.root}.${inputAdornmentClasses.positionEnd}`]: {\n    marginRight: size === 'small' ? theme.spacing(-0.5) : theme.spacing(-1),\n    [`& .${svgIconClasses.root}`]: {\n      width: size === 'small' ? '1rem' : '1.25rem',\n      height: size === 'small' ? '1rem' : '1.25rem',\n    },\n  },\n}))\n"],"mappings":";;;AAaA,MAAa,QAET,OAAOA,SAAW,EACpB,oBAAoB,SAAS,SAAS,OACxC,CAAC,CAAC,EAAc,EAAE,OAAO,OAAO,gBAAgB;CAC9C,cAAc,SAAS,UAAU,MAAM,QAAQ,IAAI,IAAI,MAAM,QAAQ,IAAI;CACzE,aAAa,MAAM,QAAQ,IAAI;CAC/B,UAAU,SAAS,UAAU,aAAa;CAC1C,cAAc,MAAM,KAAK,MAAM;EAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,cAAc,MAAM,QAAQ,IAAI,EAClC;EACC,MAAM,iBAAiB,UAAU,EAChC,SAAS,MAAM,QAAQ,CAAC,EAC1B;EACC,MAAM,sBAAsB,SAAS;EACpC,YAAY;EACZ,aAAa;GACZ,MAAM,eAAe,SAAS,EAC7B,OAAO,SAAS,UAAU,YAAY,SACxC;CACF;EACC,MAAM,sBAAsB,KAAK,GAAG,sBAAsB,gBAAgB;EACzE,aAAa,SAAS,UAAU,MAAM,QAAQ,GAAI,IAAI,MAAM,QAAQ,EAAE;GACrE,MAAM,eAAe,SAAS;GAC7B,OAAO,SAAS,UAAU,SAAS;GACnC,QAAQ,SAAS,UAAU,SAAS;EACtC;CACF;AACF,EAAE"}

package/dist/esm/components/Search/SearchNotFound.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchNotFound.style.js","names":[],"sources":["../../../../src/components/Search/SearchNotFound.style.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const NotFoundContainer: React.FC<BoxProps> = styled(Box)(\n  ({ theme }) => ({\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'column',\n    flex: 1,\n    padding: theme.spacing(3),\n  })\n)\n\nexport const NotFoundMessage: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  whiteSpace: 'normal',\n  color: theme.vars.palette.text.secondary,\n  textAlign: 'center',\n  flex: 1,\n  marginTop: theme.spacing(2),\n  paddingLeft: theme.spacing(2),\n  paddingRight: theme.spacing(2),\n}))\n\nexport const NotFoundIconContainer: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(() => ({\n  fontSize: 48,\n  lineHeight: 1,\n}))\n"],"mappings":";;AAIA,MAAa,oBAAwC,OAAO,GAAG,GAC5D,EAAE,aAAa;CACd,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,MAAM;CACN,SAAS,MAAM,QAAQ,CAAC;AAC1B,EACF;AAEA,MAAa,kBAET,OAAO,UAAU,GAAG,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;CACX,MAAM;CACN,WAAW,MAAM,QAAQ,CAAC;CAC1B,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;AAC/B,EAAE;AAEF,MAAa,wBAET,OAAO,UAAU,SAAS;CAC5B,UAAU;CACV,YAAY;AACd,EAAE"}
+{"version":3,"file":"SearchNotFound.style.js","names":[],"sources":["../../../../src/components/Search/SearchNotFound.style.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const NotFoundContainer: React.FC<BoxProps> = styled(Box)(\n  ({ theme }) => ({\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'column',\n    flex: 1,\n    padding: theme.spacing(3),\n  })\n)\n\nexport const NotFoundMessage: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  whiteSpace: 'normal',\n  color: theme.vars.palette.text.secondary,\n  textAlign: 'center',\n  flex: 1,\n  marginTop: theme.spacing(2),\n  paddingLeft: theme.spacing(2),\n  paddingRight: theme.spacing(2),\n}))\n\nexport const NotFoundIconContainer: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(() => ({\n  fontSize: 48,\n  lineHeight: 1,\n}))\n"],"mappings":";;AAIA,MAAa,oBAAwC,OAAO,GAAG,CAAC,EAC7D,EAAE,aAAa;CACd,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,MAAM;CACN,SAAS,MAAM,QAAQ,CAAC;AAC1B,EACF;AAEA,MAAa,kBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;CACX,MAAM;CACN,WAAW,MAAM,QAAQ,CAAC;CAC1B,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;AAC/B,EAAE;AAEF,MAAa,wBAET,OAAO,UAAU,CAAC,QAAQ;CAC5B,UAAU;CACV,YAAY;AACd,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectTokenButton.style.js","names":["CardHeader","Card","CardContent","MuiCardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"sourcesContent":["import {\n  cardHeaderClasses,\n  CardContent as MuiCardContent,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { Card } from '../Card/Card.js'\nimport { CardHeader } from '../Card/CardHeader.js'\n\nexport const SelectTokenCardHeader: React.FC<\n  React.ComponentProps<typeof CardHeader> & {\n    selected?: boolean\n  }\n> = styled(CardHeader, {\n  shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n  padding: theme.spacing(2),\n  [`.${cardHeaderClasses.title}`]: {\n    color: theme.vars.palette.text.secondary,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 96,\n    fontSize: 18,\n    fontWeight: 500,\n    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n      fontSize: 16,\n    },\n  },\n  [`.${cardHeaderClasses.subheader}`]: {\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 96,\n  },\n  variants: [\n    {\n      props: ({ selected }) => selected,\n      style: {\n        [`.${cardHeaderClasses.title}`]: {\n          color: theme.vars.palette.text.primary,\n          fontWeight: 600,\n        },\n      },\n    },\n  ],\n}))\n\nexport const SelectTokenCard: React.FC<\n  React.ComponentProps<typeof Card> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(Card)(({ theme }) => {\n  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n  return {\n    flex: 1,\n    ...(cardVariant !== 'outlined' && {\n      background: 'none',\n      '&:hover': {\n        cursor: 'pointer',\n        background: 'none',\n      },\n    }),\n  }\n})\n\nexport const CardContent: React.FC<\n  React.ComponentProps<typeof MuiCardContent> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(MuiCardContent, {\n  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),\n})<{ formType?: FormType; mask?: boolean }>(\n  ({ theme, formType, mask = true }) => {\n    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n    const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'\n    const horizontal = direction\n    const vertical = '50%'\n    return {\n      padding: 0,\n      transition: theme.transitions.create(['background-color'], {\n        duration: theme.transitions.duration.enteringScreen,\n        easing: theme.transitions.easing.easeOut,\n      }),\n      '&:last-child': {\n        paddingBottom: 0,\n      },\n      ...(cardVariant !== 'outlined' && {\n        backgroundColor: theme.vars.palette.background.paper,\n        mask: mask\n          ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n          : 'none',\n      }),\n      ...(cardVariant === 'filled' && {\n        '&:hover': {\n          cursor: 'pointer',\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n          }),\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;;;AAUA,MAAa,wBAIT,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,UAAU,EAAE,SAAS,IAAc,EACpE,CAAC,GAA2B,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,CAAC;EACvB,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACP,UAAU;EACV,YAAY;GACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,UAAU,GACZ;CACF;EACC,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;CACT;CACA,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,GACJ,IAAI,kBAAkB,UAAU;GAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,YAAY;EACd,EACF;CACF,CACF;AACF,EAAE;AAEF,MAAa,kBAKT,OAAOC,MAAI,GAAG,EAAE,YAAY;CAE9B,OAAO;EACL,MAAM;EACN,GAHkB,MAAM,YAAY,SAAS,cAAc,YAGvC,cAAc;GAChC,YAAY;GACZ,WAAW;IACT,QAAQ;IACR,YAAY;GACd;EACF;CACF;AACF,CAAC;AAED,MAAaC,gBAKT,OAAOC,aAAgB,EACzB,oBAAoB,SAAS,CAAC,CAAC,YAAY,MAAM,EAAE,SAAS,IAAc,EAC5E,CAAC,GACE,EAAE,OAAO,UAAU,OAAO,WAAW;CACpC,MAAM,cAAc,MAAM,YAAY,SAAS,cAAc;CAE7D,MAAM,aADY,aAAa,OAAO,SAAS;CAG/C,OAAO;EACL,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG;GACzD,UAAU,MAAM,YAAY,SAAS;GACrC,QAAQ,MAAM,YAAY,OAAO;EACnC,CAAC;EACD,gBAAgB,EACd,eAAe,EACjB;EACA,GAAI,gBAAgB,cAAc;GAChC,iBAAiB,MAAM,KAAK,QAAQ,WAAW;GAC/C,MAAM,OACF,kCAAkC,WAAW,0DAC7C;EACN;EACA,GAAI,gBAAgB,YAAY,EAC9B,WAAW;GACT,QAAQ;GACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;GAC3E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,cAC7E,CAAC;EACH,EACF;CACF;AACF,CACF"}
+{"version":3,"file":"SelectTokenButton.style.js","names":["CardHeader","Card","CardContent","MuiCardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"sourcesContent":["import {\n  cardHeaderClasses,\n  CardContent as MuiCardContent,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { Card } from '../Card/Card.js'\nimport { CardHeader } from '../Card/CardHeader.js'\n\nexport const SelectTokenCardHeader: React.FC<\n  React.ComponentProps<typeof CardHeader> & {\n    selected?: boolean\n  }\n> = styled(CardHeader, {\n  shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n  padding: theme.spacing(2),\n  [`.${cardHeaderClasses.title}`]: {\n    color: theme.vars.palette.text.secondary,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 96,\n    fontSize: 18,\n    fontWeight: 500,\n    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n      fontSize: 16,\n    },\n  },\n  [`.${cardHeaderClasses.subheader}`]: {\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 96,\n  },\n  variants: [\n    {\n      props: ({ selected }) => selected,\n      style: {\n        [`.${cardHeaderClasses.title}`]: {\n          color: theme.vars.palette.text.primary,\n          fontWeight: 600,\n        },\n      },\n    },\n  ],\n}))\n\nexport const SelectTokenCard: React.FC<\n  React.ComponentProps<typeof Card> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(Card)(({ theme }) => {\n  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n  return {\n    flex: 1,\n    ...(cardVariant !== 'outlined' && {\n      background: 'none',\n      '&:hover': {\n        cursor: 'pointer',\n        background: 'none',\n      },\n    }),\n  }\n})\n\nexport const CardContent: React.FC<\n  React.ComponentProps<typeof MuiCardContent> & {\n    formType?: FormType\n    mask?: boolean\n  }\n> = styled(MuiCardContent, {\n  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),\n})<{ formType?: FormType; mask?: boolean }>(\n  ({ theme, formType, mask = true }) => {\n    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n    const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'\n    const horizontal = direction\n    const vertical = '50%'\n    return {\n      padding: 0,\n      transition: theme.transitions.create(['background-color'], {\n        duration: theme.transitions.duration.enteringScreen,\n        easing: theme.transitions.easing.easeOut,\n      }),\n      '&:last-child': {\n        paddingBottom: 0,\n      },\n      ...(cardVariant !== 'outlined' && {\n        backgroundColor: theme.vars.palette.background.paper,\n        mask: mask\n          ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n          : 'none',\n      }),\n      ...(cardVariant === 'filled' && {\n        '&:hover': {\n          cursor: 'pointer',\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n          }),\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;;;AAUA,MAAa,wBAIT,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,SAAS,IAAc,EACpE,CAAC,CAAC,EAA0B,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,CAAC;EACvB,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACP,UAAU;EACV,YAAY;GACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,UAAU,GACZ;CACF;EACC,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;CACT;CACA,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,GACJ,IAAI,kBAAkB,UAAU;GAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,YAAY;EACd,EACF;CACF,CACF;AACF,EAAE;AAEF,MAAa,kBAKT,OAAOC,MAAI,CAAC,EAAE,EAAE,YAAY;CAE9B,OAAO;EACL,MAAM;EACN,GAHkB,MAAM,YAAY,SAAS,cAAc,YAGvC,cAAc;GAChC,YAAY;GACZ,WAAW;IACT,QAAQ;IACR,YAAY;GACd;EACF;CACF;AACF,CAAC;AAED,MAAaC,gBAKT,OAAOC,aAAgB,EACzB,oBAAoB,SAAS,CAAC,CAAC,YAAY,MAAM,CAAC,CAAC,SAAS,IAAc,EAC5E,CAAC,CAAC,EACC,EAAE,OAAO,UAAU,OAAO,WAAW;CACpC,MAAM,cAAc,MAAM,YAAY,SAAS,cAAc;CAE7D,MAAM,aADY,aAAa,OAAO,SAAS;CAG/C,OAAO;EACL,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG;GACzD,UAAU,MAAM,YAAY,SAAS;GACrC,QAAQ,MAAM,YAAY,OAAO;EACnC,CAAC;EACD,gBAAgB,EACd,eAAe,EACjB;EACA,GAAI,gBAAgB,cAAc;GAChC,iBAAiB,MAAM,KAAK,QAAQ,WAAW;GAC/C,MAAM,OACF,kCAAkC,WAAW,0DAC7C;EACN;EACA,GAAI,gBAAgB,YAAY,EAC9B,WAAW;GACT,QAAQ;GACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;GAC3E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,cAC7E,CAAC;EACH,EACF;CACF;AACF,CACF"}

package/dist/esm/components/SendToWallet/SendToWalletButton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletButton.style.js","names":["CardHeader"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.style.tsx"],"sourcesContent":["import { Box, cardHeaderClasses, styled } from '@mui/material'\nimport type React from 'react'\nimport { CardHeader } from '../Card/CardHeader.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\n\nexport const SendToWalletCardTitleRow: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(2, 2, 0, 2),\n  height: 30,\n}))\n\nexport const SendToWalletRequiredLabel: React.FC<\n  React.ComponentProps<typeof CardLabel>\n> = styled(CardLabel)(({ theme }) => ({\n  padding: theme.spacing(0, 1),\n}))\n\nexport const SendToWalletRequiredLabelText: React.FC<\n  React.ComponentProps<typeof CardLabelTypography>\n> = styled(CardLabelTypography)(({ theme }) => ({\n  padding: theme.spacing(0, 0.5),\n}))\n\nexport const SendToWalletCardHeader: React.FC<\n  React.ComponentProps<typeof CardHeader> & { selected?: boolean }\n> = styled(CardHeader, {\n  shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n  width: '100%',\n  [`.${cardHeaderClasses.title}`]: {\n    color: theme.vars.palette.text.secondary,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    fontWeight: 500,\n    width: 254,\n    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n      width: 224,\n    },\n  },\n  [`.${cardHeaderClasses.subheader}`]: {\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 254,\n    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n      width: 224,\n    },\n  },\n  [`.${cardHeaderClasses.action}`]: {\n    marginRight: 0,\n  },\n  [`.${cardHeaderClasses.action} > button`]: {\n    fontSize: 16,\n  },\n  variants: [\n    {\n      props: ({ selected }) => selected,\n      style: {\n        [`.${cardHeaderClasses.title}`]: {\n          color: theme.vars.palette.text.primary,\n          fontWeight: 600,\n          width: 224,\n          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n            width: 192,\n          },\n        },\n        [`.${cardHeaderClasses.subheader}`]: {\n          width: 224,\n          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n            width: 192,\n          },\n        },\n      },\n    },\n  ],\n}))\n"],"mappings":";;;;AAKA,MAAa,2BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;CACjC,QAAQ;AACV,EAAE;AAEF,MAAa,4BAET,OAAO,SAAS,GAAG,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,GAAG,CAAC,EAC7B,EAAE;AAEF,MAAa,gCAET,OAAO,mBAAmB,GAAG,EAAE,aAAa,EAC9C,SAAS,MAAM,QAAQ,GAAG,EAAG,EAC/B,EAAE;AAEF,MAAa,yBAET,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,UAAU,EAAE,SAAS,IAAc,EACpE,CAAC,GAA2B,EAAE,aAAa;CACzC,OAAO;EACN,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,OAAO;GACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;CACF;EACC,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;GACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;CACF;EACC,IAAI,kBAAkB,WAAW,EAChC,aAAa,EACf;EACC,IAAI,kBAAkB,OAAO,aAAa,EACzC,UAAU,GACZ;CACA,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO;IACJ,IAAI,kBAAkB,UAAU;IAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;IAC/B,YAAY;IACZ,OAAO;KACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;GACF;IACC,IAAI,kBAAkB,cAAc;IACnC,OAAO;KACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;GACF;EACF;CACF,CACF;AACF,EAAE"}
+{"version":3,"file":"SendToWalletButton.style.js","names":["CardHeader"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.style.tsx"],"sourcesContent":["import { Box, cardHeaderClasses, styled } from '@mui/material'\nimport type React from 'react'\nimport { CardHeader } from '../Card/CardHeader.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\n\nexport const SendToWalletCardTitleRow: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(2, 2, 0, 2),\n  height: 30,\n}))\n\nexport const SendToWalletRequiredLabel: React.FC<\n  React.ComponentProps<typeof CardLabel>\n> = styled(CardLabel)(({ theme }) => ({\n  padding: theme.spacing(0, 1),\n}))\n\nexport const SendToWalletRequiredLabelText: React.FC<\n  React.ComponentProps<typeof CardLabelTypography>\n> = styled(CardLabelTypography)(({ theme }) => ({\n  padding: theme.spacing(0, 0.5),\n}))\n\nexport const SendToWalletCardHeader: React.FC<\n  React.ComponentProps<typeof CardHeader> & { selected?: boolean }\n> = styled(CardHeader, {\n  shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n  width: '100%',\n  [`.${cardHeaderClasses.title}`]: {\n    color: theme.vars.palette.text.secondary,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    fontWeight: 500,\n    width: 254,\n    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n      width: 224,\n    },\n  },\n  [`.${cardHeaderClasses.subheader}`]: {\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    width: 254,\n    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n      width: 224,\n    },\n  },\n  [`.${cardHeaderClasses.action}`]: {\n    marginRight: 0,\n  },\n  [`.${cardHeaderClasses.action} > button`]: {\n    fontSize: 16,\n  },\n  variants: [\n    {\n      props: ({ selected }) => selected,\n      style: {\n        [`.${cardHeaderClasses.title}`]: {\n          color: theme.vars.palette.text.primary,\n          fontWeight: 600,\n          width: 224,\n          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n            width: 192,\n          },\n        },\n        [`.${cardHeaderClasses.subheader}`]: {\n          width: 224,\n          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {\n            width: 192,\n          },\n        },\n      },\n    },\n  ],\n}))\n"],"mappings":";;;;AAKA,MAAa,2BAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;CACjC,QAAQ;AACV,EAAE;AAEF,MAAa,4BAET,OAAO,SAAS,CAAC,EAAE,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,GAAG,CAAC,EAC7B,EAAE;AAEF,MAAa,gCAET,OAAO,mBAAmB,CAAC,EAAE,EAAE,aAAa,EAC9C,SAAS,MAAM,QAAQ,GAAG,EAAG,EAC/B,EAAE;AAEF,MAAa,yBAET,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,SAAS,IAAc,EACpE,CAAC,CAAC,EAA0B,EAAE,aAAa;CACzC,OAAO;EACN,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,OAAO;GACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;CACF;EACC,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;GACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;CACF;EACC,IAAI,kBAAkB,WAAW,EAChC,aAAa,EACf;EACC,IAAI,kBAAkB,OAAO,aAAa,EACzC,UAAU,GACZ;CACA,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO;IACJ,IAAI,kBAAkB,UAAU;IAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;IAC/B,YAAY;IACZ,OAAO;KACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;GACF;IACC,IAAI,kBAAkB,cAAc;IACnC,OAAO;KACN,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,OAAO,IACT;GACF;EACF;CACF,CACF;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsListItemButton.js","names":["ListItemButtonBase"],"sources":["../../../src/components/SettingsListItemButton.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { ListItemButton as ListItemButtonBase } from './ListItemButton.js'\n\nexport const SettingsListItemButton: React.FC<\n  React.ComponentProps<typeof ListItemButtonBase>\n> = styled(ListItemButtonBase)(({ theme }) => ({\n  paddingRight: theme.spacing(1),\n}))\n"],"mappings":";;;AAIA,MAAa,yBAET,OAAOA,gBAAkB,GAAG,EAAE,aAAa,EAC7C,cAAc,MAAM,QAAQ,CAAC,EAC/B,EAAE"}
+{"version":3,"file":"SettingsListItemButton.js","names":["ListItemButtonBase"],"sources":["../../../src/components/SettingsListItemButton.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { ListItemButton as ListItemButtonBase } from './ListItemButton.js'\n\nexport const SettingsListItemButton: React.FC<\n  React.ComponentProps<typeof ListItemButtonBase>\n> = styled(ListItemButtonBase)(({ theme }) => ({\n  paddingRight: theme.spacing(1),\n}))\n"],"mappings":";;;AAIA,MAAa,yBAET,OAAOA,gBAAkB,CAAC,EAAE,EAAE,aAAa,EAC7C,cAAc,MAAM,QAAQ,CAAC,EAC/B,EAAE"}

package/dist/esm/components/SettingsPanel/SettingsPanel.js

@@ -0,0 +1,51 @@
+import { useSettingsStore } from "../../stores/settings/SettingsStore.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useSplitMode } from "../../stores/navigationTabs/useNavigationTabsStore.js";
+import { Card } from "../Card/Card.js";
+import { useSettings } from "../../stores/settings/useSettings.js";
+import { SettingsPanelButton, SettingsPanelContainer, SettingsPanelTitle, SettingsPanelValue } from "./SettingsPanel.style.js";
+import { bridgeSettingsPanelKeys, swapSettingsPanelKeys } from "./utils.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/SettingsPanel/SettingsPanel.tsx
+const SettingsPanel = (props) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const splitMode = useSplitMode();
+	const { slippage, routePriority } = useSettings(["slippage", "routePriority"]);
+	const [enabledBridges, totalBridges, enabledExchanges, totalExchanges] = useSettingsStore((state) => [
+		Object.values(state._enabledBridges).filter(Boolean).length,
+		Object.values(state._enabledBridges).length,
+		Object.values(state._enabledExchanges).filter(Boolean).length,
+		Object.values(state._enabledExchanges).length
+	]);
+	const rows = splitMode === "bridge" ? bridgeSettingsPanelKeys : swapSettingsPanelKeys;
+	const labelByKey = {
+		routePriority: t("settings.routePriority"),
+		exchanges: t("settings.enabledExchanges"),
+		bridges: t("settings.enabledBridges"),
+		slippage: t("settings.slippage")
+	};
+	const valueByKey = {
+		routePriority: routePriority === "FASTEST" ? t("settings.routePriorityOptions.fastest.title") : t("settings.routePriorityOptions.cheapest.title"),
+		exchanges: `${enabledExchanges}/${totalExchanges}`,
+		bridges: `${enabledBridges}/${totalBridges}`,
+		slippage: slippage ? `${slippage}%` : t("button.auto")
+	};
+	const handleClick = (key) => {
+		navigate({ to: `/${navigationRoutes.settings}/${navigationRoutes[key]}` });
+	};
+	return /* @__PURE__ */ jsx(SettingsPanelContainer, {
+		...props,
+		children: rows.map((key) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(SettingsPanelButton, {
+			onClick: () => handleClick(key),
+			disableRipple: true,
+			children: [/* @__PURE__ */ jsx(SettingsPanelTitle, { children: labelByKey[key] }), /* @__PURE__ */ jsx(SettingsPanelValue, { children: valueByKey[key] })]
+		}) }, key))
+	});
+};
+//#endregion
+export { SettingsPanel };
+
+//# sourceMappingURL=SettingsPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPanel.js","names":[],"sources":["../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { Card } from '../Card/Card.js'\nimport {\n  SettingsPanelButton,\n  SettingsPanelContainer,\n  SettingsPanelTitle,\n  SettingsPanelValue,\n} from './SettingsPanel.style.js'\nimport {\n  bridgeSettingsPanelKeys,\n  type SettingsPanelKey,\n  swapSettingsPanelKeys,\n} from './utils.js'\n\nexport const SettingsPanel: React.FC<BoxProps> = (props): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const splitMode = useSplitMode()\n  const { slippage, routePriority } = useSettings(['slippage', 'routePriority'])\n  const [enabledBridges, totalBridges, enabledExchanges, totalExchanges] =\n    useSettingsStore((state) => [\n      Object.values(state._enabledBridges).filter(Boolean).length,\n      Object.values(state._enabledBridges).length,\n      Object.values(state._enabledExchanges).filter(Boolean).length,\n      Object.values(state._enabledExchanges).length,\n    ])\n\n  const rows =\n    splitMode === 'bridge' ? bridgeSettingsPanelKeys : swapSettingsPanelKeys\n\n  const labelByKey: Record<SettingsPanelKey, string> = {\n    routePriority: t('settings.routePriority'),\n    exchanges: t('settings.enabledExchanges'),\n    bridges: t('settings.enabledBridges'),\n    slippage: t('settings.slippage'),\n  }\n\n  const valueByKey: Record<SettingsPanelKey, string> = {\n    routePriority:\n      routePriority === 'FASTEST'\n        ? t('settings.routePriorityOptions.fastest.title')\n        : t('settings.routePriorityOptions.cheapest.title'),\n    exchanges: `${enabledExchanges}/${totalExchanges}`,\n    bridges: `${enabledBridges}/${totalBridges}`,\n    slippage: slippage ? `${slippage}%` : t('button.auto'),\n  }\n\n  const handleClick = (key: SettingsPanelKey) => {\n    navigate({\n      to: `/${navigationRoutes.settings}/${navigationRoutes[key]}`,\n    })\n  }\n\n  return (\n    <SettingsPanelContainer {...props}>\n      {rows.map((key) => (\n        <Card key={key}>\n          <SettingsPanelButton onClick={() => handleClick(key)} disableRipple>\n            <SettingsPanelTitle>{labelByKey[key]}</SettingsPanelTitle>\n            <SettingsPanelValue>{valueByKey[key]}</SettingsPanelValue>\n          </SettingsPanelButton>\n        </Card>\n      ))}\n    </SettingsPanelContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAqBA,MAAa,iBAAqC,UAAuB;CACvE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,aAAa;CAC/B,MAAM,EAAE,UAAU,kBAAkB,YAAY,CAAC,YAAY,eAAe,CAAC;CAC7E,MAAM,CAAC,gBAAgB,cAAc,kBAAkB,kBACrD,kBAAkB,UAAU;EAC1B,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACrD,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC;EACrC,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACvD,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC;CACzC,CAAC;CAEH,MAAM,OACJ,cAAc,WAAW,0BAA0B;CAErD,MAAM,aAA+C;EACnD,eAAe,EAAE,wBAAwB;EACzC,WAAW,EAAE,2BAA2B;EACxC,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE,mBAAmB;CACjC;CAEA,MAAM,aAA+C;EACnD,eACE,kBAAkB,YACd,EAAE,6CAA6C,IAC/C,EAAE,8CAA8C;EACtD,WAAW,GAAG,iBAAiB,GAAG;EAClC,SAAS,GAAG,eAAe,GAAG;EAC9B,UAAU,WAAW,GAAG,SAAS,KAAK,EAAE,aAAa;CACvD;CAEA,MAAM,eAAe,QAA0B;EAC7C,SAAS,EACP,IAAI,IAAI,iBAAiB,SAAS,GAAG,iBAAiB,OACxD,CAAC;CACH;CAEA,OACE,oBAAC,wBAAD;EAAwB,GAAI;YACzB,KAAK,KAAK,QACT,oBAAC,MAAD,EAAA,UACE,qBAAC,qBAAD;GAAqB,eAAe,YAAY,GAAG;GAAG,eAAA;aAAtD,CACE,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,GACzD,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,CACtC;KACjB,GALK,GAKL,CACP;CACqB,CAAA;AAE5B"}

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

@@ -0,0 +1,33 @@
+import { Box, ButtonBase, Typography, styled } from "@mui/material";
+//#region src/components/SettingsPanel/SettingsPanel.style.tsx
+const SettingsPanelContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(1)
+}));
+const SettingsPanelButton = styled(ButtonBase)(({ theme }) => ({
+	display: "flex",
+	width: "100%",
+	justifyContent: "space-between",
+	alignItems: "center",
+	gap: theme.spacing(1),
+	padding: theme.spacing(2),
+	borderRadius: theme.vars.shape.borderRadius
+}));
+const SettingsPanelTitle = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	lineHeight: 1,
+	fontWeight: 700,
+	color: theme.vars.palette.text.primary
+}));
+const SettingsPanelValue = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	lineHeight: 1,
+	fontWeight: 500,
+	color: theme.vars.palette.text.secondary,
+	whiteSpace: "nowrap"
+}));
+//#endregion
+export { SettingsPanelButton, SettingsPanelContainer, SettingsPanelTitle, SettingsPanelValue };
+
+//# sourceMappingURL=SettingsPanel.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPanel.style.js","names":[],"sources":["../../../../src/components/SettingsPanel/SettingsPanel.style.tsx"],"sourcesContent":["import { Box, ButtonBase, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsPanelContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n}))\n\nexport const SettingsPanelButton: React.FC<\n  React.ComponentProps<typeof ButtonBase>\n> = styled(ButtonBase)(({ theme }) => ({\n  display: 'flex',\n  width: '100%',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  padding: theme.spacing(2),\n  borderRadius: theme.vars.shape.borderRadius,\n}))\n\nexport const SettingsPanelTitle: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  lineHeight: 1,\n  fontWeight: 700,\n  color: theme.vars.palette.text.primary,\n}))\n\nexport const SettingsPanelValue: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  lineHeight: 1,\n  fontWeight: 500,\n  color: theme.vars.palette.text.secondary,\n  whiteSpace: 'nowrap',\n}))\n"],"mappings":";;AAGA,MAAa,yBAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,sBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;CACpB,SAAS,MAAM,QAAQ,CAAC;CACxB,cAAc,MAAM,KAAK,MAAM;AACjC,EAAE;AAEF,MAAa,qBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEF,MAAa,qBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;AACd,EAAE"}

package/dist/esm/components/SettingsPanel/utils.js

@@ -0,0 +1,14 @@
+//#region src/components/SettingsPanel/utils.ts
+/** Navigation tabs that surface the settings panel on the main page. */
+const advancedNavigationTabKeys = ["swap-advanced", "bridge-advanced"];
+const swapSettingsPanelKeys = ["slippage", "exchanges"];
+const bridgeSettingsPanelKeys = [
+	"routePriority",
+	"slippage",
+	"bridges",
+	"exchanges"
+];
+//#endregion
+export { advancedNavigationTabKeys, bridgeSettingsPanelKeys, swapSettingsPanelKeys };
+
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/SettingsPanel/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/SettingsPanel/utils.ts"],"sourcesContent":["import type { NavigationTabKey } from '../../types/widget.js'\n\nexport type SettingsPanelKey =\n  | 'routePriority'\n  | 'exchanges'\n  | 'bridges'\n  | 'slippage'\n\n/** Navigation tabs that surface the settings panel on the main page. */\nexport const advancedNavigationTabKeys: NavigationTabKey[] = [\n  'swap-advanced',\n  'bridge-advanced',\n]\n\n// Keys are ordered to match the settings page layout.\n// Swap is same-chain, so route priority and bridges are not relevant.\nexport const swapSettingsPanelKeys: SettingsPanelKey[] = [\n  'slippage',\n  'exchanges',\n]\n\nexport const bridgeSettingsPanelKeys: SettingsPanelKey[] = [\n  'routePriority',\n  'slippage',\n  'bridges',\n  'exchanges',\n]\n"],"mappings":";;AASA,MAAa,4BAAgD,CAC3D,iBACA,iBACF;AAIA,MAAa,wBAA4C,CACvD,YACA,WACF;AAEA,MAAa,0BAA8C;CACzD;CACA;CACA;CACA;AACF"}