@lifi/widget 4.0.0-beta.0 → 4.0.0-beta.10

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

@@ -1,45 +1,70 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Collapse } from '@mui/material';
-import { useNavigate } from '@tanstack/react-router';
-import { useTranslation } from 'react-i18next';
-import { useRoutes } from '../../hooks/useRoutes.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { ButtonTertiary } from '../ButtonTertiary.js';
-import { Card } from '../Card/Card.js';
-import { CardTitle } from '../Card/CardTitle.js';
-import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js';
-import { RouteCard } from '../RouteCard/RouteCard.js';
-import { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js';
-import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js';
-export const Routes = (props) => {
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const { subvariant, subvariantOptions, useRecommendedRoute } = useWidgetConfig();
-    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useRoutes();
-    const currentRoute = routes?.[0];
-    if (!currentRoute && !isLoading && !isFetching && !isFetched) {
-        return null;
-    }
-    const handleCardClick = () => {
-        navigate({ to: navigationRoutes.routes });
-    };
-    const routeNotFound = !currentRoute && !isLoading && !isFetching;
-    const onlyRecommendedRoute = subvariant === 'refuel' || useRecommendedRoute;
-    const showAll = !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1;
-    const title = subvariant === 'custom'
-        ? subvariantOptions?.custom === 'deposit'
-            ? t('header.receive')
-            : t('header.youPay')
-        : t('header.receive');
-    return (_jsxs(Card, { ...props, children: [_jsx(CardTitle, { children: title }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || Date.now(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
-                    position: 'absolute',
-                    top: 8,
-                    right: 8,
-                } }), _jsxs(Box, { sx: {
-                    p: 2,
-                }, children: [isLoading && !currentRoute ? (_jsx(RouteCardSkeleton, { variant: "cardless" })) : !currentRoute ? (_jsx(RouteNotFoundCard, {})) : (_jsx(RouteCard, { route: currentRoute, variant: "cardless", active: true })), _jsx(Collapse, { timeout: 225, in: showAll, unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { sx: {
-                                mt: 2,
-                            }, children: _jsx(ButtonTertiary, { onClick: handleCardClick, fullWidth: true, children: t('button.showAll') }) }) })] })] }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { Card as Card$1 } from "../Card/Card.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { ProgressToNextUpdate } from "../ProgressToNextUpdate.js";
+import { RouteCard } from "../RouteCard/RouteCard.js";
+import { RouteCardSkeleton } from "../RouteCard/RouteCardSkeleton.js";
+import { RouteNotFoundCard } from "../RouteCard/RouteNotFoundCard.js";
+import { CardTitle } from "../Card/CardTitle.js";
+import { ButtonTertiary } from "../ButtonTertiary.js";
+import { useNavigate } from "@tanstack/react-router";
+import { Box, Collapse } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/Routes/Routes.tsx
+const Routes = (props) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { subvariant, subvariantOptions, useRecommendedRoute } = useWidgetConfig();
+	const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch } = useRoutes();
+	const currentRoute = routes?.[0];
+	if (!currentRoute && !isLoading && !isFetching && !isFetched) return null;
+	const handleCardClick = () => {
+		navigate({ to: navigationRoutes.routes });
+	};
+	const showAll = !(subvariant === "refuel" || useRecommendedRoute) && !(!currentRoute && !isLoading && !isFetching) && (routes?.length ?? 0) > 1;
+	const title = subvariant === "custom" ? subvariantOptions?.custom === "deposit" ? t("header.receive") : t("header.youPay") : t("header.receive");
+	return /* @__PURE__ */ jsxs(Card$1, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(CardTitle, { children: title }),
+			/* @__PURE__ */ jsx(ProgressToNextUpdate, {
+				updatedAt: dataUpdatedAt || Date.now(),
+				timeToUpdate: refetchTime,
+				isLoading: isFetching,
+				onClick: () => refetch(),
+				sx: {
+					position: "absolute",
+					top: 8,
+					right: 8
+				}
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: { p: 2 },
+				children: [isLoading && !currentRoute ? /* @__PURE__ */ jsx(RouteCardSkeleton, { variant: "cardless" }) : !currentRoute ? /* @__PURE__ */ jsx(RouteNotFoundCard, {}) : /* @__PURE__ */ jsx(RouteCard, {
+					route: currentRoute,
+					variant: "cardless",
+					active: true
+				}), /* @__PURE__ */ jsx(Collapse, {
+					timeout: 225,
+					in: showAll,
+					unmountOnExit: true,
+					mountOnEnter: true,
+					children: /* @__PURE__ */ jsx(Box, {
+						sx: { mt: 2 },
+						children: /* @__PURE__ */ jsx(ButtonTertiary, {
+							onClick: handleCardClick,
+							fullWidth: true,
+							children: t("button.showAll")
+						})
+					})
+				})]
+			})
+		]
+	});
 };
+//#endregion
+export { Routes };
+
 //# sourceMappingURL=Routes.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Routes.js","sourceRoot":"","sources":["../../../../src/components/Routes/Routes.tsx"],"names":[],"mappings":"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"}
+{"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 { subvariant, subvariantOptions, useRecommendedRoute } =\n    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 onlyRecommendedRoute = subvariant === 'refuel' || useRecommendedRoute\n  const showAll =\n    !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1\n\n  const title =\n    subvariant === 'custom'\n      ? subvariantOptions?.custom === '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,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,YAAY,mBAAmB,wBACrC,iBAAiB;CACnB,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,YACE,WAAW;CAEf,MAAM,eAAe,SAAS;AAE9B,KAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,UACjD,QAAO;CAGT,MAAM,wBAAwB;AAC5B,WAAS,EAAE,IAAI,iBAAiB,QAAQ,CAAC;;CAK3C,MAAM,UACJ,EAF2B,eAAe,YAAY,wBAE7B,EAHL,CAAC,gBAAgB,CAAC,aAAa,CAAC,gBAGR,QAAQ,UAAU,KAAK;CAErE,MAAM,QACJ,eAAe,WACX,mBAAmB,WAAW,YAC5B,EAAE,iBAAiB,GACnB,EAAE,gBAAgB,GACpB,EAAE,iBAAiB;AAEzB,QACE,qBAACA,QAAD;EAAM,GAAI;YAAV;GACE,oBAAC,WAAD,EAAA,UAAY,OAAkB,CAAA;GAC9B,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,KAAK;IACtC,cAAc;IACd,WAAW;IACX,eAAe,SAAS;IACxB,IAAI;KACF,UAAU;KACV,KAAK;KACL,OAAO;KACR;IACD,CAAA;GACF,qBAAC,KAAD;IACE,IAAI,EACF,GAAG,GACJ;cAHH,CAKG,aAAa,CAAC,eACb,oBAAC,mBAAD,EAAmB,SAAQ,YAAa,CAAA,GACtC,CAAC,eACH,oBAAC,mBAAD,EAAqB,CAAA,GAErB,oBAAC,WAAD;KAAW,OAAO;KAAc,SAAQ;KAAW,QAAA;KAAS,CAAA,EAG9D,oBAAC,UAAD;KAAU,SAAS;KAAK,IAAI;KAAS,eAAA;KAAc,cAAA;eACjD,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,GACL;gBAED,oBAAC,gBAAD;OAAgB,SAAS;OAAiB,WAAA;iBACvC,EAAE,iBAAiB;OACL,CAAA;MACb,CAAA;KACG,CAAA,CACP;;GACD"}

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

@@ -1,40 +1,73 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAccount } from '@lifi/wallet-management';
-import { Stack, Typography } from '@mui/material';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { PageContainer } from '../PageContainer.js';
-import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js';
-import { RouteCard } from '../RouteCard/RouteCard.js';
-import { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js';
-import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js';
-import { Container, Header } from './RoutesExpanded.style.js';
-const headerHeight = '64px';
-export const RoutesContent = memo(function RoutesContent({ routes, isFetching, isLoading, dataUpdatedAt, refetchTime, fromChain, refetch, onRouteClick, }) {
-    const { t } = useTranslation();
-    const { subvariant, subvariantOptions } = useWidgetConfig();
-    const { account } = useAccount({ chainType: fromChain?.chainType });
-    const [toAddress] = useFieldValues('toAddress');
-    const { requiredToAddress } = useToAddressRequirements();
-    const currentRoute = routes?.[0];
-    const routeNotFound = !currentRoute && !isLoading && !isFetching;
-    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress;
-    const allowInteraction = account.isConnected && !toAddressUnsatisfied;
-    const title = subvariant === 'custom'
-        ? subvariantOptions?.custom === 'deposit'
-            ? t('header.deposit')
-            : t('header.youPay')
-        : t('header.receive');
-    return (_jsxs(Container, { enableColorScheme: true, minimumHeight: isLoading, children: [_jsxs(Header, { sx: { height: headerHeight }, children: [_jsx(Typography, { noWrap: true, sx: {
-                            fontSize: 18,
-                            fontWeight: '700',
-                            flex: 1,
-                        }, children: title }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || Date.now(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(PageContainer, { sx: { height: `calc(100% - ${headerHeight})`, overflow: 'auto' }, children: _jsx(Stack, { direction: "column", spacing: 2, sx: {
-                        flex: 1,
-                        paddingBottom: 3,
-                    }, children: routeNotFound ? (_jsx(RouteNotFoundCard, {})) : (isLoading || isFetching) && !routes?.length ? (Array.from({ length: 3 }).map((_, index) => (_jsx(RouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => (_jsx(RouteCard, { route: route, onClick: allowInteraction ? () => onRouteClick(route) : undefined, active: index === 0, expanded: routes?.length === 1 }, index)))) }) })] }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { PageContainer } from "../PageContainer.js";
+import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
+import { ProgressToNextUpdate } from "../ProgressToNextUpdate.js";
+import { RouteCard } from "../RouteCard/RouteCard.js";
+import { RouteCardSkeleton } from "../RouteCard/RouteCardSkeleton.js";
+import { RouteNotFoundCard } from "../RouteCard/RouteNotFoundCard.js";
+import { Container as Container$1, Header } from "./RoutesExpanded.style.js";
+import { memo } from "react";
+import { Stack, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAccount } from "@lifi/wallet-management";
+//#region src/components/Routes/RoutesContent.tsx
+const headerHeight = "64px";
+const RoutesContent = memo(function RoutesContent({ routes, isFetching, isLoading, dataUpdatedAt, refetchTime, fromChain, refetch, onRouteClick }) {
+	const { t } = useTranslation();
+	const { subvariant, subvariantOptions } = useWidgetConfig();
+	const { account } = useAccount({ chainType: fromChain?.chainType });
+	const [toAddress] = useFieldValues("toAddress");
+	const { requiredToAddress } = useToAddressRequirements();
+	const currentRoute = routes?.[0];
+	const routeNotFound = !currentRoute && !isLoading && !isFetching;
+	const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress;
+	const allowInteraction = account.isConnected && !toAddressUnsatisfied;
+	const title = subvariant === "custom" ? subvariantOptions?.custom === "deposit" ? t("header.deposit") : t("header.youPay") : t("header.receive");
+	return /* @__PURE__ */ jsxs(Container$1, {
+		enableColorScheme: true,
+		minimumHeight: isLoading,
+		children: [/* @__PURE__ */ jsxs(Header, {
+			sx: { height: headerHeight },
+			children: [/* @__PURE__ */ jsx(Typography, {
+				noWrap: true,
+				sx: {
+					fontSize: 18,
+					fontWeight: "700",
+					flex: 1
+				},
+				children: title
+			}), /* @__PURE__ */ jsx(ProgressToNextUpdate, {
+				updatedAt: dataUpdatedAt || Date.now(),
+				timeToUpdate: refetchTime,
+				isLoading: isFetching,
+				onClick: () => refetch(),
+				sx: { marginRight: -1 }
+			})]
+		}), /* @__PURE__ */ jsx(PageContainer, {
+			sx: {
+				height: `calc(100% - ${headerHeight})`,
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsx(Stack, {
+				direction: "column",
+				spacing: 2,
+				sx: {
+					flex: 1,
+					paddingBottom: 3
+				},
+				children: routeNotFound ? /* @__PURE__ */ jsx(RouteNotFoundCard, {}) : (isLoading || isFetching) && !routes?.length ? Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(RouteCardSkeleton, {}, index)) : routes?.map((route, index) => /* @__PURE__ */ jsx(RouteCard, {
+					route,
+					onClick: allowInteraction ? () => onRouteClick(route) : void 0,
+					active: index === 0,
+					expanded: routes?.length === 1
+				}, index))
+			})
+		})]
+	});
 });
+//#endregion
+export { RoutesContent };
+
 //# sourceMappingURL=RoutesContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RoutesContent.js","sourceRoot":"","sources":["../../../../src/components/Routes/RoutesContent.tsx"],"names":[],"mappings":"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"}
+{"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 = '64px'\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 { subvariant, subvariantOptions } = 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      subvariant === 'custom'\n        ? subvariantOptions?.custom === '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              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,gBAAgB;CAC9B,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAE3D,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,WAAW,CAAC;CACnE,MAAM,CAAC,aAAa,eAAe,YAAY;CAC/C,MAAM,EAAE,sBAAsB,0BAA0B;CAExD,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,eAAe,WACX,mBAAmB,WAAW,YAC5B,EAAE,iBAAiB,GACnB,EAAE,gBAAgB,GACpB,EAAE,iBAAiB;AAEzB,QACE,qBAACA,aAAD;EAAW,mBAAA;EAAkB,eAAe;YAA5C,CACE,qBAAC,QAAD;GAAQ,IAAI,EAAE,QAAQ,cAAc;aAApC,CACE,oBAAC,YAAD;IACE,QAAA;IACA,IAAI;KACF,UAAU;KACV,YAAY;KACZ,MAAM;KACP;cAEA;IACU,CAAA,EACb,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,KAAK;IACtC,cAAc;IACd,WAAW;IACX,eAAe,SAAS;IACxB,IAAI,EAAE,aAAa,IAAI;IACvB,CAAA,CACK;MACT,oBAAC,eAAD;GACE,IAAI;IAAE,QAAQ,eAAe,aAAa;IAAI,UAAU;IAAQ;aAEhE,oBAAC,OAAD;IACE,WAAU;IACV,SAAS;IACT,IAAI;KACF,MAAM;KACN,eAAe;KAChB;cAEA,gBACC,oBAAC,mBAAD,EAAqB,CAAA,IAClB,aAAa,eAAe,CAAC,QAAQ,SACxC,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,mBAAD,EAAiC,EAAT,MAAS,CACjC,GAEF,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;KAES;KACP,SACE,yBAAyB,aAAa,MAAM,GAAG,KAAA;KAEjD,QAAQ,UAAU;KAClB,UAAU,QAAQ,WAAW;KAC7B,EAPK,MAOL,CACF;IAEE,CAAA;GACM,CAAA,CACN;;EAEd"}

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

@@ -1,53 +1,69 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useNavigate } from '@tanstack/react-router';
-import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-import { useRoutes } from '../../hooks/useRoutes.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { WidgetEvent } from '../../types/events.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { ExpansionTransition } from '../Expansion/ExpansionTransition.js';
-import { RoutesContent } from './RoutesContent.js';
-import { routesExpansionWidth } from './RoutesExpanded.style.js';
-export const RoutesExpanded = memo(function RoutesExpanded({ canOpen, setOpenExpansion, }) {
-    const emitter = useWidgetEvents();
-    const navigate = useNavigate();
-    const routesRef = useRef(undefined);
-    const routesActiveRef = useRef(false);
-    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, fromChain, refetch, setReviewableRoute, } = useRoutes();
-    const onExit = useCallback(() => {
-        // Clean routes cache on exit
-        routesRef.current = undefined;
-    }, []);
-    // We cache routes results in ref for a better exit animation
-    if (routesRef.current && !routes) {
-        routesActiveRef.current = false;
-        // If we are loading routes with a new queryKey, we need to clear the cache
-        if (isLoading) {
-            routesRef.current = undefined;
-        }
-    }
-    else {
-        routesRef.current = routes;
-        routesActiveRef.current = Boolean(routes);
-    }
-    const expanded = Boolean(routesActiveRef.current || isLoading || isFetching || isFetched) &&
-        canOpen;
-    // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent
-    const onRouteClick = useCallback((route) => {
-        setReviewableRoute(route);
-        navigate({
-            to: navigationRoutes.transactionExecution,
-            search: { routeId: route.id },
-        });
-        emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes });
-    }, [emitter, routes, setReviewableRoute]);
-    // Use layout effect to update parent's width when expansion changes
-    useLayoutEffect(() => {
-        setOpenExpansion(expanded);
-    }, [expanded, setOpenExpansion]);
-    useEffect(() => {
-        emitter.emit(WidgetEvent.WidgetExpanded, expanded);
-    }, [emitter, expanded]);
-    return (_jsx(ExpansionTransition, { in: expanded, width: routesExpansionWidth, onExited: onExit, children: _jsx(RoutesContent, { routes: routesRef.current, isFetching: isFetching, isLoading: isLoading, dataUpdatedAt: dataUpdatedAt, refetchTime: refetchTime, fromChain: fromChain, refetch: refetch, onRouteClick: onRouteClick }) }));
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import { WidgetEvent } from "../../types/events.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { ExpansionTransition } from "../Expansion/ExpansionTransition.js";
+import { useRoutes } from "../../hooks/useRoutes.js";
+import { routesExpansionWidth } from "./RoutesExpanded.style.js";
+import { RoutesContent } from "./RoutesContent.js";
+import { memo, useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Routes/RoutesExpanded.tsx
+const RoutesExpanded = memo(function RoutesExpanded({ canOpen, setOpenExpansion }) {
+	const emitter = useWidgetEvents();
+	const navigate = useNavigate();
+	const routesRef = useRef(void 0);
+	const routesActiveRef = useRef(false);
+	const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, fromChain, refetch, setReviewableRoute } = useRoutes();
+	const onExit = useCallback(() => {
+		routesRef.current = void 0;
+	}, []);
+	if (routesRef.current && !routes) {
+		routesActiveRef.current = false;
+		if (isLoading) routesRef.current = void 0;
+	} else {
+		routesRef.current = routes;
+		routesActiveRef.current = Boolean(routes);
+	}
+	const expanded = Boolean(routesActiveRef.current || isLoading || isFetching || isFetched) && canOpen;
+	const onRouteClick = useCallback((route) => {
+		setReviewableRoute(route);
+		navigate({
+			to: navigationRoutes.transactionExecution,
+			search: { routeId: route.id }
+		});
+		emitter.emit(WidgetEvent.RouteSelected, {
+			route,
+			routes
+		});
+	}, [
+		emitter,
+		routes,
+		setReviewableRoute
+	]);
+	useLayoutEffect(() => {
+		setOpenExpansion(expanded);
+	}, [expanded, setOpenExpansion]);
+	useEffect(() => {
+		emitter.emit(WidgetEvent.WidgetExpanded, expanded);
+	}, [emitter, expanded]);
+	return /* @__PURE__ */ jsx(ExpansionTransition, {
+		in: expanded,
+		width: routesExpansionWidth,
+		onExited: onExit,
+		children: /* @__PURE__ */ jsx(RoutesContent, {
+			routes: routesRef.current,
+			isFetching,
+			isLoading,
+			dataUpdatedAt,
+			refetchTime,
+			fromChain,
+			refetch,
+			onRouteClick
+		})
+	});
 });
+//#endregion
+export { RoutesExpanded };
+
 //# sourceMappingURL=RoutesExpanded.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RoutesExpanded.js","sourceRoot":"","sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RoutesExpanded.js","names":[],"sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport { RoutesContent } from './RoutesContent.js'\nimport { routesExpansionWidth } from './RoutesExpanded.style.js'\n\ninterface RoutesExpandedProps {\n  canOpen: boolean\n  setOpenExpansion: (open: boolean) => void\n}\n\nexport const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =\n  memo(function RoutesExpanded({\n    canOpen,\n    setOpenExpansion,\n  }: RoutesExpandedProps) {\n    const emitter = useWidgetEvents()\n    const navigate = useNavigate()\n    const routesRef = useRef<Route[]>(undefined)\n    const routesActiveRef = useRef(false)\n\n    const {\n      routes,\n      isLoading,\n      isFetching,\n      isFetched,\n      dataUpdatedAt,\n      refetchTime,\n      fromChain,\n      refetch,\n      setReviewableRoute,\n    } = useRoutes()\n\n    const onExit = useCallback(() => {\n      // Clean routes cache on exit\n      routesRef.current = undefined\n    }, [])\n\n    // We cache routes results in ref for a better exit animation\n    if (routesRef.current && !routes) {\n      routesActiveRef.current = false\n      // If we are loading routes with a new queryKey, we need to clear the cache\n      if (isLoading) {\n        routesRef.current = undefined\n      }\n    } else {\n      routesRef.current = routes\n      routesActiveRef.current = Boolean(routes)\n    }\n\n    const expanded =\n      Boolean(\n        routesActiveRef.current || isLoading || isFetching || isFetched\n      ) && canOpen\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent\n    const onRouteClick = useCallback(\n      (route: Route) => {\n        setReviewableRoute(route)\n        navigate({\n          to: navigationRoutes.transactionExecution,\n          search: { routeId: route.id },\n        })\n        emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })\n      },\n      [emitter, routes, setReviewableRoute]\n    )\n\n    // Use layout effect to update parent's width when expansion changes\n    useLayoutEffect(() => {\n      setOpenExpansion(expanded)\n    }, [expanded, setOpenExpansion])\n\n    useEffect(() => {\n      emitter.emit(WidgetEvent.WidgetExpanded, expanded)\n    }, [emitter, expanded])\n\n    return (\n      <ExpansionTransition\n        in={expanded}\n        width={routesExpansionWidth}\n        onExited={onExit}\n      >\n        <RoutesContent\n          routes={routesRef.current}\n          isFetching={isFetching}\n          isLoading={isLoading}\n          dataUpdatedAt={dataUpdatedAt}\n          refetchTime={refetchTime}\n          fromChain={fromChain}\n          refetch={refetch}\n          onRouteClick={onRouteClick}\n        />\n      </ExpansionTransition>\n    )\n  })\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAC3B,SACA,oBACsB;CACtB,MAAM,UAAU,iBAAiB;CACjC,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,OAAgB,KAAA,EAAU;CAC5C,MAAM,kBAAkB,OAAO,MAAM;CAErC,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,WACA,SACA,uBACE,WAAW;CAEf,MAAM,SAAS,kBAAkB;AAE/B,YAAU,UAAU,KAAA;IACnB,EAAE,CAAC;AAGN,KAAI,UAAU,WAAW,CAAC,QAAQ;AAChC,kBAAgB,UAAU;AAE1B,MAAI,UACF,WAAU,UAAU,KAAA;QAEjB;AACL,YAAU,UAAU;AACpB,kBAAgB,UAAU,QAAQ,OAAO;;CAG3C,MAAM,WACJ,QACE,gBAAgB,WAAW,aAAa,cAAc,UACvD,IAAI;CAGP,MAAM,eAAe,aAClB,UAAiB;AAChB,qBAAmB,MAAM;AACzB,WAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,IAAI;GAC9B,CAAC;AACF,UAAQ,KAAK,YAAY,eAAe;GAAE;GAAe;GAAS,CAAC;IAErE;EAAC;EAAS;EAAQ;EAAmB,CACtC;AAGD,uBAAsB;AACpB,mBAAiB,SAAS;IACzB,CAAC,UAAU,iBAAiB,CAAC;AAEhC,iBAAgB;AACd,UAAQ,KAAK,YAAY,gBAAgB,SAAS;IACjD,CAAC,SAAS,SAAS,CAAC;AAEvB,QACE,oBAAC,qBAAD;EACE,IAAI;EACJ,OAAO;EACP,UAAU;YAEV,oBAAC,eAAD;GACE,QAAQ,UAAU;GACN;GACD;GACI;GACF;GACF;GACF;GACK;GACd,CAAA;EACkB,CAAA;EAExB"}

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

@@ -1,34 +1,34 @@
-import { Box, ScopedCssBaseline, styled } from '@mui/material';
-import { defaultMaxHeight } from '../../config/constants.js';
-export const routesExpansionWidth = '436px';
-export const Container = styled(ScopedCssBaseline, {
-    shouldForwardProp: (prop) => !['minimumHeight'].includes(prop),
-})(({ theme, minimumHeight }) => ({
-    ...theme.container,
-    backgroundColor: theme.vars.palette.background.default,
-    overflow: 'hidden',
-    width: routesExpansionWidth,
-    display: 'flex',
-    flexDirection: 'column',
-    whiteSpace: 'normal',
-    ...(theme.container?.display !== 'flex'
-        ? {
-            maxHeight: theme.container?.maxHeight ??
-                theme.container?.height ??
-                defaultMaxHeight,
-            ...(minimumHeight ? { '&': { height: 'auto' } } : {}),
-        }
-        : { height: minimumHeight ? 'auto' : '100%' }),
-    ...theme.routesContainer,
-}));
-export const Header = styled(Box)(({ theme }) => ({
-    backgroundColor: theme.vars.palette.background.default,
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: theme.spacing(1.5, 3),
-    position: 'sticky',
-    top: 0,
-    zIndex: 1200,
+import { getWidgetMaxHeight } from "../../utils/widgetSize.js";
+import { Box, ScopedCssBaseline, styled } from "@mui/material";
+//#region src/components/Routes/RoutesExpanded.style.ts
+const routesExpansionWidth = "436px";
+const Container$1 = styled(ScopedCssBaseline, { shouldForwardProp: (prop) => !["minimumHeight"].includes(prop) })(({ theme, minimumHeight }) => {
+	return {
+		...theme.container,
+		backgroundColor: theme.vars.palette.background.default,
+		overflow: "hidden",
+		width: routesExpansionWidth,
+		display: "flex",
+		flexDirection: "column",
+		whiteSpace: "normal",
+		...theme.container?.display !== "flex" ? {
+			maxHeight: getWidgetMaxHeight(theme),
+			...minimumHeight ? { "&": { height: "auto" } } : {}
+		} : { height: minimumHeight ? "auto" : "100%" },
+		...theme.routesContainer
+	};
+});
+const Header = styled(Box)(({ theme }) => ({
+	backgroundColor: theme.vars.palette.background.default,
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	padding: theme.spacing(1.5, 3),
+	position: "sticky",
+	top: 0,
+	zIndex: 1200
 }));
+//#endregion
+export { Container$1 as Container, Header, routesExpansionWidth };
+
 //# sourceMappingURL=RoutesExpanded.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RoutesExpanded.style.js","sourceRoot":"","sources":["../../../../src/components/Routes/RoutesExpanded.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,MAAM,CAAC,MAAM,oBAAoB,GAAG,OAAO,CAAA;AAM3C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,iBAAiB,EAAE;IACjD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CACzE,CAAC,CAAiB,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC;IAChD,GAAG,KAAK,CAAC,SAAS;IAClB,eAAe,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;IACtD,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,oBAAoB;IAC3B,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,QAAQ;IACpB,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,KAAK,MAAM;QACrC,CAAC,CAAC;YACE,SAAS,EACP,KAAK,CAAC,SAAS,EAAE,SAAS;gBAC1B,KAAK,CAAC,SAAS,EAAE,MAAM;gBACvB,gBAAgB;YAClB,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SACtD;QACH,CAAC,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;IAChD,GAAG,KAAK,CAAC,eAAe;CACzB,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChD,eAAe,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;IACtD,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,eAAe;IAC/B,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IAC9B,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,IAAI;CACb,CAAC,CAAC,CAAA"}
+{"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),\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,gBAAgB,CAAC,SAAS,KAAe,EACzE,CAAC,EAAkB,EAAE,OAAO,oBAAoB;AAC/C,QAAO;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,MAAM;GACpC,GAAI,gBAAgB,EAAE,KAAK,EAAE,QAAQ,QAAQ,EAAE,GAAG,EAAE;GACrD,GACD,EAAE,QAAQ,gBAAgB,SAAS,QAAQ;EAC/C,GAAG,MAAM;EACV;EACD;AAEF,MAAa,SAAqD,OAAO,IAAI,EAC1E,EAAE,aAAa;CACd,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,SAAS,MAAM,QAAQ,KAAK,EAAE;CAC9B,UAAU;CACV,KAAK;CACL,QAAQ;CACT,EACF"}

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

@@ -1,25 +1,57 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ClearIcon from '@mui/icons-material/Clear';
-import Search from '@mui/icons-material/Search';
-import { FormControl, IconButton, InputAdornment } from '@mui/material';
-import { InputCard } from '../../components/Card/InputCard.js';
-import { useHeaderHeight } from '../../stores/header/useHeaderStore.js';
-import { Input, StickySearchInputContainer } from './SearchInput.style.js';
-export const SearchInput = ({ inputRef, name, placeholder, onChange, onBlur, onClear, value, autoFocus, size = 'medium', }) => {
-    return (_jsx(InputCard, { children: _jsx(FormControl, { fullWidth: true, children: _jsx(Input, { inputRef: inputRef, size: size, placeholder: placeholder, startAdornment: _jsx(InputAdornment, { position: "start", children: _jsx(Search, {}) }), endAdornment: (value || inputRef?.current?.value) &&
-                    onClear && (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { size: size, onClick: onClear, "aria-label": "Clear", tabIndex: -1, sx: {
-                            padding: 0.5,
-                        }, children: _jsx(ClearIcon, { fontSize: size }) }) })), inputProps: {
-                    inputMode: 'search',
-                    onChange,
-                    onBlur,
-                    name,
-                    value,
-                    maxLength: 128,
-                }, autoComplete: "off", autoFocus: autoFocus }) }) }));
+import { useHeaderHeight } from "../../stores/header/useHeaderStore.js";
+import { Input, StickySearchInputContainer } from "./SearchInput.style.js";
+import { InputCard } from "../Card/InputCard.js";
+import { FormControl, IconButton, InputAdornment } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import ClearIcon from "@mui/icons-material/Clear";
+import Search from "@mui/icons-material/Search";
+//#region src/components/Search/SearchInput.tsx
+const SearchInput = ({ inputRef, name, placeholder, onChange, onBlur, onClear, value, autoFocus, size = "medium" }) => {
+	return /* @__PURE__ */ jsx(InputCard, { children: /* @__PURE__ */ jsx(FormControl, {
+		fullWidth: true,
+		children: /* @__PURE__ */ jsx(Input, {
+			inputRef,
+			size,
+			placeholder,
+			startAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+				position: "start",
+				children: /* @__PURE__ */ jsx(Search, {})
+			}),
+			endAdornment: (value || inputRef?.current?.value) && onClear && /* @__PURE__ */ jsx(InputAdornment, {
+				position: "end",
+				children: /* @__PURE__ */ jsx(IconButton, {
+					size,
+					onClick: onClear,
+					"aria-label": "Clear",
+					tabIndex: -1,
+					sx: { padding: .5 },
+					children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: size })
+				})
+			}),
+			inputProps: {
+				inputMode: "search",
+				onChange,
+				onBlur,
+				name,
+				value,
+				maxLength: 128
+			},
+			autoComplete: "off",
+			autoFocus
+		})
+	}) });
 };
-export const StickySearchInput = (props) => {
-    const { headerHeight } = useHeaderHeight();
-    return (_jsx(StickySearchInputContainer, { headerHeight: headerHeight, children: _jsx(SearchInput, { ...props, autoFocus: true }) }));
+const StickySearchInput = (props) => {
+	const { headerHeight } = useHeaderHeight();
+	return /* @__PURE__ */ jsx(StickySearchInputContainer, {
+		headerHeight,
+		children: /* @__PURE__ */ jsx(SearchInput, {
+			...props,
+			autoFocus: true
+		})
+	});
 };
+//#endregion
+export { SearchInput, StickySearchInput };
+
 //# sourceMappingURL=SearchInput.js.map