@lifi/widget 3.7.0-beta.8 → 3.8.0-beta.0

package/dist/components/Search/SearchNotFound.tsx

@@ -1,23 +0,0 @@
-import { SearchOff } from '@mui/icons-material'
-import {
-  NotFoundContainer,
-  NotFoundIconContainer,
-  NotFoundMessage,
-} from './SearchNotFound.style.js'
-
-interface SearchNotFoundProps {
-  message: string
-  adjustForStickySearchInput?: boolean
-}
-
-export const SearchNotFound = ({
-  message,
-  adjustForStickySearchInput,
-}: SearchNotFoundProps) => (
-  <NotFoundContainer adjustForStickySearchInput={adjustForStickySearchInput}>
-    <NotFoundIconContainer>
-      <SearchOff fontSize="inherit" />
-    </NotFoundIconContainer>
-    <NotFoundMessage>{message}</NotFoundMessage>
-  </NotFoundContainer>
-)

package/dist/components/Select.tsx

@@ -1,32 +0,0 @@
-import {
-  Select as MuiSelect,
-  inputBaseClasses,
-  listItemIconClasses,
-  outlinedInputClasses,
-  selectClasses,
-  styled,
-} from '@mui/material'
-
-export const Select = styled(MuiSelect, {
-  shouldForwardProp: (prop) => prop !== 'dense',
-})<{ dense?: boolean }>(({ theme, dense }) => ({
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.common.white
-      : theme.palette.background.paper,
-  [`.${inputBaseClasses.input}`]: {
-    padding: dense ? theme.spacing(1.625, 2, 1.5, 2) : theme.spacing(2),
-    display: 'flex',
-    alignItems: 'center',
-  },
-  [`.${selectClasses.icon}`]: {
-    right: 10,
-    color: theme.palette.text.primary,
-  },
-  [`.${listItemIconClasses.root}`]: {
-    minWidth: 38,
-  },
-  [`.${outlinedInputClasses.notchedOutline}`]: {
-    display: 'none',
-  },
-}))

package/dist/components/SelectChainAndToken.tsx

@@ -1,58 +0,0 @@
-import type { BoxProps, Theme } from '@mui/material'
-import { Box, useMediaQuery } from '@mui/material'
-import { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'
-import { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'
-import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import { useFieldValues } from '../stores/form/useFieldValues.js'
-import { DisabledUI, HiddenUI } from '../types/widget.js'
-import { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'
-
-export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
-  const prefersNarrowView = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down('sm')
-  )
-  const { disabledUI, hiddenUI, subvariant } = useWidgetConfig()
-
-  const [fromChain, toChain, fromToken, toToken] = useFieldValues(
-    'fromChain',
-    'toChain',
-    'fromToken',
-    'toToken'
-  )
-
-  const hiddenReverse =
-    subvariant === 'refuel' ||
-    disabledUI?.includes(DisabledUI.FromToken) ||
-    disabledUI?.includes(DisabledUI.ToToken) ||
-    hiddenUI?.includes(HiddenUI.ToToken)
-
-  const hiddenToToken =
-    subvariant === 'custom' || hiddenUI?.includes(HiddenUI.ToToken)
-
-  const isCompact =
-    !!fromChain &&
-    !!toChain &&
-    !!fromToken &&
-    !!toToken &&
-    !prefersNarrowView &&
-    !hiddenToToken
-
-  return (
-    <Box
-      sx={{ display: 'flex', flexDirection: isCompact ? 'row' : 'column' }}
-      {...props}
-    >
-      <SelectTokenButton formType="from" compact={isCompact} />
-      {!hiddenToToken ? (
-        !hiddenReverse ? (
-          <ReverseTokensButton vertical={!isCompact} />
-        ) : (
-          <ReverseTokensButtonEmpty />
-        )
-      ) : null}
-      {!hiddenToToken ? (
-        <SelectTokenButton formType="to" compact={isCompact} />
-      ) : null}
-    </Box>
-  )
-}

package/dist/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -1,88 +0,0 @@
-import {
-  CardContent as MuiCardContent,
-  cardHeaderClasses,
-  darken,
-  lighten,
-  styled,
-} from '@mui/material'
-import type { FormType } from '../../stores/form/types.js'
-import { Card } from '../Card/Card.js'
-import { CardHeader } from '../Card/CardHeader.js'
-
-export const SelectTokenCardHeader = styled(CardHeader, {
-  shouldForwardProp: (prop) =>
-    !['selected', 'compact'].includes(prop as string),
-})<{ selected?: boolean; compact?: boolean }>(
-  ({ theme, selected, compact }) => ({
-    padding: theme.spacing(2),
-    [`.${cardHeaderClasses.title}`]: {
-      color: selected
-        ? theme.palette.text.primary
-        : theme.palette.text.secondary,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: compact ? 96 : 256,
-      fontSize: compact && !selected ? 16 : 18,
-      fontWeight: selected ? 600 : 500,
-      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-        width: compact ? 96 : 224,
-      },
-    },
-    [`.${cardHeaderClasses.subheader}`]: {
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      width: compact ? 96 : 256,
-      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-        width: compact ? 96 : 224,
-      },
-    },
-  })
-)
-
-export const SelectTokenCard = styled(Card)(({ theme }) => {
-  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
-  return {
-    flex: 1,
-    ...(cardVariant !== 'outlined' && {
-      background: 'none',
-      '&:hover': {
-        cursor: 'pointer',
-        background: 'none',
-      },
-    }),
-  }
-})
-
-export const CardContent = styled(MuiCardContent, {
-  shouldForwardProp: (prop) => prop !== 'formType' && prop !== 'compact',
-})<{ formType: FormType; compact: boolean }>(({ theme, formType, compact }) => {
-  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
-  const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'
-  const horizontal = compact ? direction : '50%'
-  const vertical = compact ? '50%' : direction
-  return {
-    padding: 0,
-    transition: theme.transitions.create(['background-color'], {
-      duration: theme.transitions.duration.enteringScreen,
-      easing: theme.transitions.easing.easeOut,
-    }),
-    '&:last-child': {
-      paddingBottom: 0,
-    },
-    ...(cardVariant !== 'outlined' && {
-      backgroundColor: theme.palette.background.paper,
-      mask: `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`,
-    }),
-    ...(cardVariant === 'filled' && {
-      '&:hover': {
-        cursor: 'pointer',
-        backgroundColor:
-          theme.palette.mode === 'light'
-            ? darken(theme.palette.background.paper, 0.02)
-            : lighten(theme.palette.background.paper, 0.02),
-      },
-    }),
-  }
-})

package/dist/components/SelectTokenButton/SelectTokenButton.tsx

@@ -1,99 +0,0 @@
-import { Skeleton } from '@mui/material'
-import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
-import { useChain } from '../../hooks/useChain.js'
-import { useSwapOnly } from '../../hooks/useSwapOnly.js'
-import { useToken } from '../../hooks/useToken.js'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import type { FormTypeProps } from '../../stores/form/types.js'
-import { FormKeyHelper } from '../../stores/form/types.js'
-import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { navigationRoutes } from '../../utils/navigationRoutes.js'
-import { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'
-import { TokenAvatar } from '../Avatar/TokenAvatar.js'
-import { CardTitle } from '../Card/CardTitle.js'
-import {
-  CardContent,
-  SelectTokenCard,
-  SelectTokenCardHeader,
-} from './SelectTokenButton.style.js'
-
-export const SelectTokenButton: React.FC<
-  FormTypeProps & {
-    compact: boolean
-  }
-> = ({ formType, compact }) => {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { disabledUI, subvariant } = useWidgetConfig()
-  const swapOnly = useSwapOnly()
-  const tokenKey = FormKeyHelper.getTokenKey(formType)
-  const [chainId, tokenAddress] = useFieldValues(
-    FormKeyHelper.getChainKey(formType),
-    tokenKey
-  )
-  const { chain, isLoading: isChainLoading } = useChain(chainId)
-  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)
-
-  const handleClick = () => {
-    navigate(
-      formType === 'from'
-        ? navigationRoutes.fromToken
-        : subvariant === 'refuel'
-          ? navigationRoutes.toTokenNative
-          : navigationRoutes.toToken
-    )
-  }
-
-  const isSelected = !!(chain && token)
-  const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined
-  const defaultPlaceholder =
-    formType === 'to' && subvariant === 'refuel'
-      ? t('main.selectChain')
-      : formType === 'to' && swapOnly
-        ? t('main.selectToken')
-        : t('main.selectChainAndToken')
-  const cardTitle: string =
-    formType === 'from' && subvariant === 'custom'
-      ? t('header.payWith')
-      : t(`main.${formType}`)
-  return (
-    <SelectTokenCard component="button" onClick={onClick}>
-      <CardContent formType={formType} compact={compact}>
-        <CardTitle>{cardTitle}</CardTitle>
-        {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
-          <SelectTokenCardHeader
-            avatar={<AvatarBadgedSkeleton />}
-            title={<Skeleton variant="text" width={64} height={24} />}
-            subheader={<Skeleton variant="text" width={72} height={16} />}
-            compact={compact}
-          />
-        ) : (
-          <SelectTokenCardHeader
-            avatar={
-              isSelected ? (
-                <TokenAvatar token={token} chain={chain} />
-              ) : (
-                <AvatarBadgedDefault />
-              )
-            }
-            title={isSelected ? token.symbol : defaultPlaceholder}
-            titleTypographyProps={{
-              title: isSelected ? token.symbol : defaultPlaceholder,
-            }}
-            subheader={isSelected ? chain.name : null}
-            subheaderTypographyProps={
-              isSelected
-                ? {
-                    title: chain.name,
-                  }
-                : undefined
-            }
-            selected={isSelected}
-            compact={compact}
-          />
-        )}
-      </CardContent>
-    </SelectTokenCard>
-  )
-}

package/dist/components/SendToWallet/SendToWallet.style.tsx

@@ -1,34 +0,0 @@
-import { cardHeaderClasses, styled } from '@mui/material'
-import { CardHeader } from '../Card/CardHeader.js'
-
-export const SendToWalletCardHeader = styled(CardHeader, {
-  shouldForwardProp: (prop) => !['selected'].includes(prop as string),
-})<{ selected?: boolean }>(({ theme, selected }) => ({
-  width: '100%',
-  [`.${cardHeaderClasses.title}`]: {
-    color: selected ? theme.palette.text.primary : theme.palette.text.secondary,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    fontWeight: selected ? 600 : 500,
-    width: selected ? 224 : 254,
-    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-      width: selected ? 192 : 224,
-    },
-  },
-  [`.${cardHeaderClasses.subheader}`]: {
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    width: selected ? 224 : 254,
-    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-      width: selected ? 192 : 224,
-    },
-  },
-  [`.${cardHeaderClasses.action}`]: {
-    marginRight: 0,
-  },
-  [`.${cardHeaderClasses.action} > button`]: {
-    fontSize: 16,
-  },
-}))

package/dist/components/SendToWallet/SendToWalletButton.tsx

@@ -1,158 +0,0 @@
-import { useAccount } from '@lifi/wallet-management'
-import { CloseRounded } from '@mui/icons-material'
-import { Box, Collapse } from '@mui/material'
-import { type MouseEventHandler, useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
-import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'
-import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js'
-import { DisabledUI, HiddenUI } from '../../types/widget.js'
-import {
-  defaultChainIdsByType,
-  getChainTypeFromAddress,
-} from '../../utils/chainType.js'
-import { navigationRoutes } from '../../utils/navigationRoutes.js'
-import { shortenAddress } from '../../utils/wallet.js'
-import { AccountAvatar } from '../Avatar/AccountAvatar.js'
-import type { CardProps } from '../Card/Card.js'
-import { Card } from '../Card/Card.js'
-import { CardIconButton } from '../Card/CardIconButton.js'
-import { CardTitle } from '../Card/CardTitle.js'
-import { SendToWalletCardHeader } from './SendToWallet.style.js'
-
-export const SendToWalletButton: React.FC<CardProps> = (props) => {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { disabledUI, hiddenUI, toAddress, toAddresses } = useWidgetConfig()
-  const { showSendToWallet } = useSendToWalletStore()
-  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(
-    'toAddress',
-    'toChain',
-    'toToken'
-  )
-  const { setFieldValue } = useFieldActions()
-  const { selectedBookmark } = useBookmarks()
-  const { setSelectedBookmark } = useBookmarkActions()
-  const { accounts } = useAccount()
-  const { requiredToAddress } = useToAddressRequirements()
-  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)
-  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)
-
-  const address = toAddressFieldValue
-    ? shortenAddress(toAddressFieldValue)
-    : t('sendToWallet.enterAddress', {
-        context: 'short',
-      })
-
-  const matchingConnectedAccount = accounts.find(
-    (account) => account.address === toAddressFieldValue
-  )
-
-  const chainType = !matchingConnectedAccount
-    ? selectedBookmark?.chainType ||
-      (toAddressFieldValue
-        ? getChainTypeFromAddress(toAddressFieldValue)
-        : undefined)
-    : undefined
-
-  const chainId =
-    toChainId && toTokenAddress
-      ? toChainId
-      : matchingConnectedAccount
-        ? matchingConnectedAccount.chainId
-        : chainType
-          ? defaultChainIdsByType[chainType]
-          : undefined
-
-  const isConnectedAccount =
-    selectedBookmark?.isConnectedAccount &&
-    matchingConnectedAccount?.isConnected
-  const connectedAccountName = matchingConnectedAccount?.connector?.name
-  const bookmarkName = selectedBookmark?.name
-
-  const headerTitle = isConnectedAccount
-    ? connectedAccountName || address
-    : bookmarkName || connectedAccountName || address
-
-  const headerSubheader =
-    isConnectedAccount || bookmarkName || connectedAccountName ? address : null
-
-  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress
-
-  const handleOnClick = () => {
-    navigate(
-      toAddresses?.length
-        ? navigationRoutes.configuredWallets
-        : navigationRoutes.sendToWallet
-    )
-  }
-
-  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.stopPropagation()
-    setFieldValue('toAddress', '', { isTouched: true })
-    setSelectedBookmark()
-  }
-
-  // The collapse opens instantly on first page load/component mount when there is an address to display
-  // After which it needs an animated transition for open and closing.
-  // collapseTransitionTime is used specify the transition time for opening and closing
-  const collapseTransitionTime = useRef(0)
-
-  // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
-  useEffect(() => {
-    setTimeout(() => {
-      collapseTransitionTime.current = 225
-    }, 0)
-  }, [collapseTransitionTime])
-
-  const isOpenCollapse =
-    requiredToAddress || (showSendToWallet && !hiddenToAddress)
-
-  return (
-    <Collapse
-      timeout={collapseTransitionTime.current}
-      in={isOpenCollapse}
-      mountOnEnter
-      unmountOnExit
-    >
-      <Card
-        // biome-ignore lint/a11y/useSemanticElements:
-        role="button"
-        onClick={disabledForChanges ? undefined : handleOnClick}
-        sx={{ width: '100%', ...props.sx }}
-      >
-        <CardTitle required={requiredToAddress}>
-          {t('header.sendToWallet')}
-        </CardTitle>
-        <Box display="flex" justifyContent="center" alignItems="center">
-          <SendToWalletCardHeader
-            avatar={
-              <AccountAvatar
-                chainId={chainId}
-                account={matchingConnectedAccount}
-                toAddress={toAddress}
-                empty={!toAddressFieldValue}
-              />
-            }
-            title={headerTitle}
-            subheader={headerSubheader}
-            selected={!!toAddressFieldValue || disabledToAddress}
-            action={
-              !!toAddressFieldValue && !disabledForChanges ? (
-                <CardIconButton onClick={clearSelectedBookmark} size="small">
-                  <CloseRounded fontSize="inherit" />
-                </CardIconButton>
-              ) : null
-            }
-          />
-        </Box>
-      </Card>
-    </Collapse>
-  )
-}

package/dist/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -1,58 +0,0 @@
-import { Wallet } from '@mui/icons-material'
-import { Button, Tooltip } from '@mui/material'
-import { useTranslation } from 'react-i18next'
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
-import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js'
-import { WidgetEvent } from '../../types/events.js'
-import { DisabledUI, HiddenUI } from '../../types/widget.js'
-
-export const SendToWalletExpandButton: React.FC = () => {
-  const { t } = useTranslation()
-  const { disabledUI, hiddenUI } = useWidgetConfig()
-  const { setFieldValue } = useFieldActions()
-  const { setSelectedBookmark } = useBookmarkActions()
-  const emitter = useWidgetEvents()
-  const { showSendToWallet, setSendToWallet } = useSendToWalletStore()
-  const [toAddressFieldValue] = useFieldValues('toAddress')
-  const { requiredToAddress } = useToAddressRequirements()
-
-  if (requiredToAddress || hiddenUI?.includes(HiddenUI.ToAddress)) {
-    return null
-  }
-
-  const handleClick = () => {
-    if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
-      setFieldValue('toAddress', '', { isTouched: true })
-      setSelectedBookmark()
-    }
-    setSendToWallet(!showSendToWallet)
-    emitter.emit(
-      WidgetEvent.SendToWalletToggled,
-      useSendToWalletStore.getState().showSendToWallet
-    )
-  }
-
-  const buttonVariant =
-    showSendToWallet || Boolean(toAddressFieldValue) ? 'contained' : 'text'
-
-  return (
-    <Tooltip title={t('main.sendToWallet')} placement="bottom-end">
-      <Button
-        variant={buttonVariant}
-        onClick={handleClick}
-        sx={{
-          minWidth: 48,
-          width: 48,
-          height: 48,
-        }}
-      >
-        <Wallet />
-      </Button>
-    </Tooltip>
-  )
-}

package/dist/components/SettingsListItemButton.tsx

@@ -1,8 +0,0 @@
-import { styled } from '@mui/material'
-import { ListItemButton as ListItemButtonBase } from './ListItemButton.js'
-
-export const SettingsListItemButton = styled(ListItemButtonBase)(
-  ({ theme }) => ({
-    paddingRight: theme.spacing(1),
-  })
-)

package/dist/components/Skeleton/WidgetSkeleton.style.tsx

@@ -1,83 +0,0 @@
-import { Box, Button, Card as MuiCard, styled } from '@mui/material'
-import { InputCard } from '../../components/Card/InputCard.js'
-
-export const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'flex-end',
-  alignItems: 'center',
-  color: theme.palette?.text.primary,
-  paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
-}))
-
-export const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  padding: theme.spacing(1, 0, 1, 1.5),
-  gap: theme.spacing(1),
-}))
-
-export const SkeletonCardRow = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: theme.spacing(2),
-  alignItems: 'center',
-  marginTop: theme.spacing(1.5),
-}))
-
-export const SkeletonAmountContainer = styled(Box)({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  height: 40,
-  overflowY: 'hidden',
-})
-
-export const SkeletonCard = styled(MuiCard)(({ theme }) => ({
-  padding: theme.spacing(1.5, 2, 2),
-}))
-
-export const SkeletonInputCard = styled(InputCard)(({ theme }) => ({
-  padding: theme.spacing(1.5, 2, 2),
-}))
-
-export const SkeletonReviewButtonContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: theme.spacing(1.5),
-  alignItems: 'center',
-}))
-
-export const SkeletonReviewButton = styled(Button)({
-  height: 48,
-  pointerEvents: 'none',
-})
-export const SkeletonSendToWalletButton = styled(Button)({
-  height: 48,
-  minWidth: 48,
-  width: 48,
-  pointerEvents: 'none',
-})
-
-export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexGrow: 1,
-  justifyContent: 'flex-end',
-  alignItems: 'flex-end',
-  paddingBottom: theme.spacing(2),
-  paddingLeft: theme.spacing(3),
-  paddingRight: theme.spacing(3),
-}))
-
-export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: theme.palette.background.default,
-    backdropFilter: 'blur(12px)',
-    position: 'relative',
-    top: 0,
-    zIndex: 1200,
-    gap: theme.spacing(0.5),
-    padding: theme.spacing(1.5, 3, 1.5, 3),
-    overflow: 'auto',
-  }
-})