@lifi/widget 3.7.0-beta.6 → 3.7.0

package/components/AppContainer.tsx

@@ -1,11 +1,19 @@
 import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
 import type { PropsWithChildren } from 'react';
 import { defaultMaxHeight } from '../config/constants.js';
-import { useHeaderHeight } from '../hooks/useHeaderHeight.js';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useHeaderHeight } from '../stores/header/useHeaderStore.js';
 import type { WidgetVariant } from '../types/widget.js';
 import { ElementId, createElementId } from '../utils/elements.js';
 
+// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can
+//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height
+//  A Number of other components and hooks work with height values that are often set on or derived from these elements
+//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use
+//    - useTokenListHeight
+//    - useSetContentHeight
+//  Also check any code that is using the methods from elements.ts utils file
+
 export const AppExpandedContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ theme, variant }) => ({
@@ -80,15 +88,12 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
     overflowY: 'auto',
     height: theme.container?.display === 'flex' ? 'auto' : '100%',
     paddingTop: paddingTopAdjustment,
-    // The following allows for the token list to always fill the available height
-    // use of CSS.escape here is to deal with characters such as ':' returned by reacts useId hook
-    //   related issue - https://github.com/facebook/react/issues/26839
-    [`&:has(#${CSS.escape(createElementId(ElementId.TokenList, elementId))})`]:
-      {
-        height: theme.container?.maxHeight
-          ? theme.container?.maxHeight
-          : theme.container?.height || defaultMaxHeight,
-      },
+    // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes
+    [`&:has(.full-page-container)`]: {
+      height: theme.container?.maxHeight
+        ? theme.container?.maxHeight
+        : theme.container?.height || defaultMaxHeight,
+    },
   }),
 );
 

package/components/Avatar/AccountAvatar.tsx

@@ -1,15 +1,15 @@
-import type { Account } from '@lifi/wallet-management';
 import { getConnectorIcon } from '@lifi/wallet-management';
 import { Wallet } from '@mui/icons-material';
 import { Badge } from '@mui/material';
+import type { Account } from '../../hooks/useAccount.js';
 import { useChain } from '../../hooks/useChain.js';
 import type { ToAddress } from '../../types/widget.js';
+import { SmallAvatar } from '../SmallAvatar.js';
 import {
   AvatarDefault,
   AvatarDefaultBadge,
   AvatarMasked,
 } from './Avatar.style.js';
-import { SmallAvatar } from './SmallAvatar.js';
 
 interface AccountAvatarProps {
   chainId?: number;

package/components/Avatar/Avatar.style.tsx

@@ -3,6 +3,7 @@ import {
   AvatarGroup,
   Box,
   Avatar as MuiAvatar,
+  Skeleton,
   avatarClasses,
   badgeClasses,
   styled,
@@ -13,20 +14,17 @@ export const AvatarMasked = styled(MuiAvatar)(({ theme }) => ({
   mask: avatarMask16,
 }));
 
+export const AvatarSkeleton = styled(Skeleton)(({ theme }) => ({
+  mask: avatarMask16,
+}));
+
 export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: {
-    boxSizing: 'border-box',
-  },
-  [`& .${avatarClasses.root}`]: {
-    border: 'none',
-    marginLeft: 0,
-  },
-  [`& .${badgeClasses.root}:first-child`]: {
     marginLeft: theme.spacing(-1),
-    border: 'none',
+    boxSizing: 'border-box',
   },
   [`& .${badgeClasses.root}:last-child`]: {
-    border: 'none',
+    marginLeft: theme.spacing(1),
   },
 }));
 
@@ -59,14 +57,3 @@ export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
     width: 16,
   };
 });
-
-export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
-  background: theme.palette.background.paper,
-  borderRadius: '50%',
-}));
-
-export const AvatarSkeletonMaskedContainer = styled(Box)(({ theme }) => ({
-  background: theme.palette.background.paper,
-  borderRadius: '50%',
-  mask: avatarMask16,
-}));

package/components/Avatar/Avatar.tsx

@@ -1,11 +1,11 @@
 import type { SxProps, Theme } from '@mui/material';
-import { Badge, Skeleton } from '@mui/material';
+import { Badge } from '@mui/material';
+import { SmallAvatarSkeleton } from '../SmallAvatar.js';
 import {
   AvatarDefault,
   AvatarDefaultBadge,
-  AvatarSkeletonMaskedContainer,
+  AvatarSkeleton,
 } from './Avatar.style.js';
-import { SmallAvatarSkeleton } from './SmallAvatar.js';
 
 export const AvatarBadgedDefault: React.FC<{
   sx?: SxProps<Theme>;
@@ -32,15 +32,7 @@ export const AvatarBadgedSkeleton: React.FC<{
       badgeContent={<SmallAvatarSkeleton />}
       sx={sx}
     >
-      <AvatarSkeleton />
+      <AvatarSkeleton width={40} height={40} variant="circular" />
     </Badge>
   );
 };
-
-export const AvatarSkeleton = () => {
-  return (
-    <AvatarSkeletonMaskedContainer>
-      <Skeleton width={40} height={40} variant="circular" />
-    </AvatarSkeletonMaskedContainer>
-  );
-};

package/components/Avatar/TokenAvatar.tsx

@@ -3,9 +3,9 @@ import type { SxProps, Theme } from '@mui/material';
 import { Badge } from '@mui/material';
 import { useChain } from '../../hooks/useChain.js';
 import { useToken } from '../../hooks/useToken.js';
+import { SmallAvatar } from '../SmallAvatar.js';
 import { AvatarBadgedSkeleton } from './Avatar.js';
 import { AvatarDefaultBadge, AvatarMasked } from './Avatar.style.js';
-import { SmallAvatar } from './SmallAvatar.js';
 
 export const TokenAvatar: React.FC<{
   token?: StaticToken;

package/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -1,9 +1,11 @@
-import { useAccount, useWalletMenu } from '@lifi/wallet-management';
 import { LoadingButton } from '@mui/lab';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAccount } from '../../hooks/useAccount.js';
 import { useChain } from '../../hooks/useChain.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import type { BaseTransactionButtonProps } from './types.js';
 
 export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
@@ -13,8 +15,8 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
   loading,
 }) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { walletConfig } = useWidgetConfig();
-  const { openWalletMenu } = useWalletMenu();
   const [fromChainId] = useFieldValues('fromChain');
   const { chain } = useChain(fromChainId);
   const { account } = useAccount({ chainType: chain?.chainType });
@@ -25,7 +27,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
     } else if (walletConfig?.onConnect) {
       walletConfig.onConnect();
     } else {
-      openWalletMenu();
+      navigate(navigationRoutes.selectWallet);
     }
   };
 

package/components/ChainSelect/useChainSelect.ts

@@ -2,7 +2,6 @@ import type { EVMChain } from '@lifi/sdk';
 import { useChains } from '../../hooks/useChains.js';
 import { useSwapOnly } from '../../hooks/useSwapOnly.js';
 import { useToAddressReset } from '../../hooks/useToAddressReset.js';
-import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useChainOrder } from '../../stores/chains/useChainOrder.js';
 import type { FormType } from '../../stores/form/types.js';
@@ -16,15 +15,7 @@ export const useChainSelect = (formType: FormType) => {
   const chainKey = FormKeyHelper.getChainKey(formType);
   const { onChange } = useFieldController({ name: chainKey });
   const { setFieldValue, getFieldValues } = useFieldActions();
-  const { hasExternalProvider, availableChainTypes } =
-    useHasExternalWalletProvider();
-  const { chains, isLoading, getChainById } = useChains(
-    formType,
-    formType === 'from' && hasExternalProvider
-      ? availableChainTypes
-      : undefined,
-  );
-
+  const { chains, isLoading, getChainById } = useChains(formType);
   const [chainOrder, setChainOrder] = useChainOrder(formType);
   const swapOnly = useSwapOnly();
   const { tryResetToAddress } = useToAddressReset();

package/components/FeeBreakdownTooltip.tsx

@@ -54,10 +54,7 @@ export const getFeeBreakdownTypography = (
       key={`${fee.token.address}${index}`}
     >
       {t(`format.currency`, { value: fee.amountUSD })} (
-      {t(`format.number`, {
-        value: parseFloat(formatUnits(fee.amount, fee.token.decimals)),
-        maximumFractionDigits: Math.min(fee.token.decimals, 9),
-      })}{' '}
+      {parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9)}{' '}
       {fee.token.symbol})
     </Typography>
   ));

package/components/FullPageContainer.tsx

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material';
+import type { PageContainerProps } from './PageContainer.js';
+import { PageContainer } from './PageContainer.js';
+
+// In max height and default layout
+// the PageContainer collapses to use the minimum space need to display its child components whereas
+// the FullPageContainer expands and fills the available vertical space provide by the max-height
+// See the CssBaselineContainer component styles in AppContainer.tsx for usage of full-page-container
+export const FullPageContainer = styled((props: PageContainerProps) => (
+  <PageContainer
+    {...props}
+    className={`${props.className} full-page-container`}
+  />
+))``;

package/components/Header/EVMDisconnectIconButton.tsx

@@ -0,0 +1,24 @@
+import { PowerSettingsNewRounded } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import type { Connector } from 'wagmi';
+import { useDisconnect } from 'wagmi';
+
+export const EVMDisconnectIconButton = ({
+  connector,
+}: {
+  connector?: Connector;
+}) => {
+  const { disconnect } = useDisconnect();
+
+  return (
+    <IconButton
+      size="medium"
+      onClick={(e) => {
+        e.stopPropagation();
+        disconnect({ connector });
+      }}
+    >
+      <PowerSettingsNewRounded />
+    </IconButton>
+  );
+};

package/components/Header/Header.tsx

@@ -1,7 +1,8 @@
 import type { FC, PropsWithChildren } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import { useHeaderHeight } from '../../hooks/useHeaderHeight.js';
+import { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js';
 import { ElementId, createElementId } from '../../utils/elements.js';
 import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
 import { Container } from './Header.style.js';
@@ -11,13 +12,37 @@ import { WalletHeader } from './WalletHeader.js';
 export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { pathname } = useLocation();
   const elementId = useDefaultElementId();
-  const { headerHeight } = useHeaderHeight();
+  const headerRef = useRef<HTMLDivElement>(null);
+  const { setHeaderHeight } = useSetHeaderHeight();
+
+  useLayoutEffect(() => {
+    const handleHeaderResize = () => {
+      const height = headerRef.current?.getBoundingClientRect().height;
+
+      if (height) {
+        setHeaderHeight(height);
+      }
+    };
+
+    let resizeObserver: ResizeObserver;
+
+    if (headerRef.current) {
+      resizeObserver = new ResizeObserver(handleHeaderResize);
+      resizeObserver.observe(headerRef.current);
+    }
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [headerRef, setHeaderHeight]);
 
   return (
     <Container
       id={createElementId(ElementId.Header, elementId)}
       sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}
-      maxHeight={headerHeight}
+      ref={headerRef}
     >
       {children}
     </Container>

package/components/Header/NavigationHeader.tsx

@@ -1,6 +1,6 @@
-import { useAccount } from '@lifi/wallet-management';
 import { Box, Typography } from '@mui/material';
 import { Route, Routes, useLocation } from 'react-router-dom';
+import { useAccount } from '../../hooks/useAccount.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useHeaderStore } from '../../stores/header/useHeaderStore.js';

package/components/Header/SVMDisconnectIconButton.tsx

@@ -0,0 +1,19 @@
+import { PowerSettingsNewRounded } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { useWallet } from '@solana/wallet-adapter-react';
+
+export const SVMDisconnectIconButton = () => {
+  const { disconnect } = useWallet();
+
+  return (
+    <IconButton
+      size="medium"
+      onClick={(e) => {
+        e.stopPropagation();
+        disconnect();
+      }}
+    >
+      <PowerSettingsNewRounded />
+    </IconButton>
+  );
+};

package/components/Header/WalletHeader.tsx

@@ -1,19 +1,18 @@
-import type { Account } from '@lifi/wallet-management';
-import {
-  getConnectorIcon,
-  useAccount,
-  useWalletMenu,
-} from '@lifi/wallet-management';
+import { getConnectorIcon } from '@lifi/wallet-management';
 import { ExpandMore, Wallet } from '@mui/icons-material';
 import { Avatar, Badge } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import type { Account } from '../../hooks/useAccount.js';
+import { useAccount } from '../../hooks/useAccount.js';
 import { useChain } from '../../hooks/useChain.js';
 import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { HiddenUI } from '../../types/widget.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
-import { SmallAvatar } from '../Avatar/SmallAvatar.js';
+import { SmallAvatar } from '../SmallAvatar.js';
 import { CloseDrawerButton } from './CloseDrawerButton.js';
 import {
   DrawerWalletContainer,
@@ -71,16 +70,16 @@ export const WalletMenuButton: React.FC = () => {
 
 const ConnectButton = () => {
   const { t } = useTranslation();
+  const { pathname } = useLocation();
   const { walletConfig, subvariant, variant } = useWidgetConfig();
-  const { openWalletMenu } = useWalletMenu();
+  const navigate = useNavigate();
   const connect = async () => {
     if (walletConfig?.onConnect) {
       walletConfig.onConnect();
       return;
     }
-    openWalletMenu();
+    navigate(navigationRoutes.selectWallet);
   };
-
   return (
     <WalletButton
       subvariant={subvariant}
@@ -92,7 +91,9 @@ const ConnectButton = () => {
           <Wallet sx={{ marginLeft: -0.25 }} />
         ) : undefined
       }
-      onClick={connect}
+      onClick={
+        !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined
+      }
     >
       {t(`button.connectWallet`)}
     </WalletButton>

package/components/Header/WalletMenu.style.tsx

@@ -17,15 +17,11 @@ export const WalletMenuContainer = styled(MuiMenu)(({ theme }) => ({
     },
     [`& .${menuItemClasses.root}`]: {
       borderRadius: theme.shape.borderRadiusSecondary,
-      padding: theme.spacing(1, 0, 1, 1),
+      padding: theme.spacing(1, 2, 1, 1),
       [`& .${svgIconClasses.root}`]: {
         fontSize: 20,
         color: theme.palette.text.primary,
       },
-      ':hover': {
-        background: 'none',
-        cursor: 'default',
-      },
     },
   },
 }));

package/components/Header/WalletMenu.tsx

@@ -1,8 +1,5 @@
-import {
-  getConnectorIcon,
-  useAccount,
-  useWalletMenu,
-} from '@lifi/wallet-management';
+import { ChainType } from '@lifi/sdk';
+import { getConnectorIcon } from '@lifi/wallet-management';
 import {
   ContentCopyRounded,
   OpenInNewRounded,
@@ -17,20 +14,25 @@ import {
   MenuItem,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useAccount } from '../../hooks/useAccount.js';
 import { useAvailableChains } from '../../hooks/useAvailableChains.js';
 import { useExplorer } from '../../hooks/useExplorer.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
 import { AvatarMasked } from '../Avatar/Avatar.style.js';
-import { SmallAvatar } from '../Avatar/SmallAvatar.js';
-import { DisconnectIconButton } from './DisconnectIconButton.js';
+import { SmallAvatar } from '../SmallAvatar.js';
+import { EVMDisconnectIconButton } from './EVMDisconnectIconButton.js';
+import { SVMDisconnectIconButton } from './SVMDisconnectIconButton.js';
 
 export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
   const { accounts } = useAccount();
   const { getChainById } = useAvailableChains();
-  const { openWalletMenu } = useWalletMenu();
   const connect = async () => {
-    openWalletMenu();
+    navigate(navigationRoutes.selectWallet);
     onClose();
   };
   const { getAddressLink } = useExplorer();
@@ -47,7 +49,7 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
           };
 
           return (
-            <MenuItem key={account.address} disableTouchRipple>
+            <MenuItem key={account.address}>
               <Box flex={1} display="flex" alignItems="center">
                 {chain?.logoURI ? (
                   <Badge
@@ -80,7 +82,7 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
                 )}
                 {walletAddress}
               </Box>
-              <Box ml={2}>
+              <Box ml={1}>
                 <IconButton size="medium" onClick={handleCopyAddress}>
                   <ContentCopyRounded />
                 </IconButton>
@@ -97,22 +99,30 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
                 >
                   <OpenInNewRounded />
                 </IconButton>
-                <DisconnectIconButton account={account} />
+                {account.chainType === ChainType.EVM ? (
+                  <EVMDisconnectIconButton connector={account.connector} />
+                ) : account.chainType === ChainType.SVM ? (
+                  <SVMDisconnectIconButton />
+                ) : null}
               </Box>
             </MenuItem>
           );
         })}
       </Box>
-      <Button
-        onClick={connect}
-        fullWidth
-        startIcon={<PowerSettingsNewRounded />}
-        sx={{
-          marginTop: 1,
-        }}
-      >
-        {t(`button.connectAnotherWallet`)}
-      </Button>
+      {!pathname.includes(navigationRoutes.selectWallet) ? (
+        <Button
+          onClick={connect}
+          fullWidth
+          startIcon={<PowerSettingsNewRounded />}
+          sx={{
+            marginTop: 1,
+          }}
+        >
+          {accounts.length > 1
+            ? t(`button.changeWallet`)
+            : t(`button.connectWallet`)}
+        </Button>
+      ) : null}
     </>
   );
 };

package/components/PageContainer.ts

@@ -1,6 +1,7 @@
+import type { ContainerProps } from '@mui/material';
 import { Container, styled } from '@mui/material';
 
-export interface PageContainerProps {
+export interface PageContainerProps extends ContainerProps {
   halfGutters?: boolean;
   topGutters?: boolean;
   bottomGutters?: boolean;

package/components/PageEntered.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useWidgetEvents } from '../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../types/events.js';
+
+export function PageEntered() {
+  const location = useLocation();
+  const emitter = useWidgetEvents();
+
+  useEffect(() => {
+    emitter.emit(WidgetEvent.PageEntered, location.pathname);
+  }, [emitter, location.pathname]);
+  return null;
+}

package/components/Routes/RoutesExpanded.tsx

@@ -1,10 +1,11 @@
+/* eslint-disable react/no-array-index-key */
 import type { Route } from '@lifi/sdk';
-import { useAccount } from '@lifi/wallet-management';
 import { Collapse, Grow, Stack, Typography } from '@mui/material';
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { RouteObject } from 'react-router-dom';
 import { useRoutes as useDOMRoutes, useNavigate } from 'react-router-dom';
+import { useAccount } from '../../hooks/useAccount.js';
 import { useRoutes } from '../../hooks/useRoutes.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';

package/components/Search/SearchInput.style.tsx

@@ -0,0 +1,46 @@
+import { Box, List, styled } from '@mui/material';
+import { Input as InputBase } from '../../components/Input.js';
+
+export const Input = styled(InputBase)(({ theme }) => ({
+  paddingRight: theme.spacing(1.5),
+}));
+
+interface SearchStickyContainerProps {
+  headerHeight: number;
+}
+
+export const searchContainerHeight = 64;
+
+// When the widget is in Full Height layout mode in order to appear "sticky the StickySearchInputContainer needs to use
+// position fixed in the same way as the header (see Header.tsx). The headerHeight value here is used as the top value
+// to ensure that this container positioned correctly beneath the header
+export const StickySearchInputContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'headerHeight',
+})<SearchStickyContainerProps>(({ theme, headerHeight }) => ({
+  position: 'sticky',
+  top: headerHeight,
+  zIndex: 1,
+  height: searchContainerHeight,
+  paddingBottom: theme.spacing(2),
+  paddingLeft: theme.spacing(3),
+  paddingRight: theme.spacing(3),
+  backgroundColor: theme.palette.background.default,
+  ...(theme.header?.position === 'fixed'
+    ? {
+        position: 'fixed',
+        minWidth: theme.breakpoints.values.xs,
+        maxWidth: theme.breakpoints.values.sm,
+        width: '100%',
+      }
+    : {}),
+}));
+
+// When in Full Height layout mode, as the StickySearchInputContainer (see above) uses fixed position, the list element needs to provide
+// additional paddingTop in order to be positioned correctly.
+export const SearchList = styled(List)(({ theme }) => ({
+  paddingTop:
+    theme.header?.position === 'fixed' ? `${searchContainerHeight}px` : 0,
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  paddingBottom: theme.spacing(1.5),
+}));

package/components/Search/SearchInput.tsx

@@ -0,0 +1,57 @@
+import { Search } from '@mui/icons-material';
+import { FormControl, InputAdornment } from '@mui/material';
+import type { FocusEventHandler, FormEventHandler } from 'react';
+import { InputCard } from '../../components/Card/InputCard.js';
+import { useHeaderHeight } from '../../stores/header/useHeaderStore.js';
+import { Input, StickySearchInputContainer } from './SearchInput.style.js';
+
+interface SearchInputProps {
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  onChange?: FormEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+}
+
+export const SearchInput = ({
+  name,
+  placeholder,
+  onChange,
+  onBlur,
+  value,
+}: SearchInputProps) => {
+  return (
+    <InputCard>
+      <FormControl fullWidth>
+        <Input
+          size="small"
+          placeholder={placeholder}
+          endAdornment={
+            <InputAdornment position="end">
+              <Search />
+            </InputAdornment>
+          }
+          inputProps={{
+            inputMode: 'search',
+            onChange,
+            onBlur,
+            name,
+            value,
+            maxLength: 128,
+          }}
+          autoComplete="off"
+        />
+      </FormControl>
+    </InputCard>
+  );
+};
+
+export const StickySearchInput = ({ ...rest }: SearchInputProps) => {
+  const { headerHeight } = useHeaderHeight();
+
+  return (
+    <StickySearchInputContainer headerHeight={headerHeight}>
+      <SearchInput {...rest} />
+    </StickySearchInputContainer>
+  );
+};