@lifi/widget 3.24.3 → 3.25.0-beta.1

package/src/components/RouteCard/RouteCard.tsx

@@ -1,5 +1,5 @@
 import type { TokenAmount } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
 import { Box, Collapse } from '@mui/material'
@@ -14,10 +14,10 @@ import { CardIconButton } from '../Card/CardIconButton.js'
 import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'
 import { StepActions } from '../StepActions/StepActions.js'
 import { Token } from '../Token/Token.js'
+import { getMatchingLabels } from './getMatchingLabels.js'
 import { TokenContainer } from './RouteCard.style.js'
 import { RouteCardEssentials } from './RouteCardEssentials.js'
 import { RouteCardEssentialsExpanded } from './RouteCardEssentialsExpanded.js'
-import { getMatchingLabels } from './getMatchingLabels.js'
 import type { RouteCardProps } from './types.js'
 
 export const RouteCard: React.FC<
@@ -53,8 +53,8 @@ export const RouteCard: React.FC<
     (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'
   )
   const tags: string[] = mainTag ? [mainTag] : []
-  const hasGaslessSupport = route.steps.some(isGaslessStep)
-  if (hasGaslessSupport) {
+  const hasRelayerSupport = route.steps.every(isRelayerStep)
+  if (hasRelayerSupport) {
     tags.push('GASLESS')
   }
 

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,4 +1,4 @@
-import { isGaslessStep } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
 import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
 import { Box, Tooltip, Typography } from '@mui/material'
@@ -22,7 +22,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
   )
   const { gasCosts, feeCosts, combinedFeesUSD } =
     getAccumulatedFeeCostsBreakdown(route)
-  const hasGaslessSupport = route.steps.some(isGaslessStep)
+  const hasRelayerSupport = route.steps.every(isRelayerStep)
   return (
     <Box
       sx={{
@@ -43,7 +43,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
         <FeeBreakdownTooltip
           gasCosts={gasCosts}
           feeCosts={feeCosts}
-          relayerSupport={hasGaslessSupport}
+          relayerSupport={hasRelayerSupport}
         >
           <Box
             sx={{
@@ -56,7 +56,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
               <LocalGasStationRounded fontSize="inherit" />
             </IconTypography>
             <Typography
-              data-value={hasGaslessSupport ? 0 : combinedFeesUSD}
+              data-value={hasRelayerSupport ? 0 : combinedFeesUSD}
               sx={{
                 fontSize: 14,
                 color: 'text.primary',
@@ -64,7 +64,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
                 lineHeight: 1,
               }}
             >
-              {hasGaslessSupport
+              {hasRelayerSupport
                 ? t('main.fees.free')
                 : t('format.currency', {
                     value: combinedFeesUSD,

package/src/components/RouteCard/RouteNotFoundCard.tsx

@@ -13,6 +13,7 @@ export const RouteNotFoundCard: React.FC = () => {
         justifyContent: 'center',
         flexDirection: 'column',
         flex: 1,
+        whiteSpace: 'normal',
       }}
     >
       <Typography

package/src/components/RouteCard/getMatchingLabels.ts

@@ -1,6 +1,6 @@
 import type { Route } from '@lifi/sdk'
 import type { RouteLabel, RouteLabelRule } from '../../types/widget.js'
-import { isItemAllowed } from '../../utils/item.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
 
 export const getMatchingLabels = (
   route: Route,
@@ -19,11 +19,19 @@ export const getMatchingLabels = (
         const toolNames = route.steps.flatMap((step) =>
           step.includedSteps.map((s) => s.tool)
         )
+        const bridgesConfigSets = getConfigItemSets(
+          rule.bridges,
+          (bridges) => new Set(bridges)
+        )
+        const exchangesConfigSets = getConfigItemSets(
+          rule.exchanges,
+          (exchanges) => new Set(exchanges)
+        )
         conditions.push(
           toolNames.some(
             (toolName) =>
-              isItemAllowed(toolName, rule.bridges) &&
-              isItemAllowed(toolName, rule.exchanges)
+              isItemAllowedForSets(toolName, bridgesConfigSets) &&
+              isItemAllowedForSets(toolName, exchangesConfigSets)
           )
         )
       }

package/src/components/Routes/Routes.tsx

@@ -54,7 +54,7 @@ export const Routes: React.FC<CardProps> = (props) => {
     <Card {...props}>
       <CardTitle>{title}</CardTitle>
       <ProgressToNextUpdate
-        updatedAt={dataUpdatedAt || new Date().getTime()}
+        updatedAt={dataUpdatedAt || Date.now()}
         timeToUpdate={refetchTime}
         isLoading={isFetching}
         onClick={() => refetch()}

package/src/components/Routes/RoutesContent.tsx

@@ -0,0 +1,137 @@
+import type { ExtendedChain, Route } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { Stack, Typography } from '@mui/material'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { WidgetEvent } from '../../types/events.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.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,
+  ScrollableContainer,
+} from './RoutesExpanded.style.js'
+
+interface RoutesContentProps {
+  routes: Route[]
+  isFetching: boolean
+  isLoading: boolean
+  expanded: boolean
+  setReviewableRoute: (route: Route) => void
+  dataUpdatedAt: number
+  refetchTime: number
+  fromChain: ExtendedChain | undefined
+  refetch: () => void
+}
+
+export const RoutesContent = ({
+  routes,
+  isFetching,
+  isLoading,
+  expanded,
+  setReviewableRoute,
+  dataUpdatedAt,
+  refetchTime,
+  fromChain,
+  refetch,
+}: RoutesContentProps) => {
+  const { t } = useTranslation()
+
+  const navigate = useNavigate()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
+
+  const { account } = useAccount({ chainType: fromChain?.chainType })
+  const [toAddress] = useFieldValues('toAddress')
+  const { requiredToAddress } = useToAddressRequirements()
+
+  const emitter = useWidgetEvents()
+
+  const handleRouteClick = (route: Route) => {
+    setReviewableRoute(route)
+    navigate(navigationRoutes.transactionExecution, {
+      state: { routeId: route.id },
+    })
+    emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })
+  }
+  const currentRoute = routes?.[0]
+
+  const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded
+  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
+  const allowInteraction = account.isConnected && !toAddressUnsatisfied
+
+  useEffect(() => {
+    emitter.emit(WidgetEvent.WidgetExpanded, expanded)
+  }, [emitter, expanded])
+
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.deposit')
+        : t('header.youPay')
+      : t('header.receive')
+
+  return (
+    <Container enableColorScheme minimumHeight={isLoading}>
+      <ScrollableContainer>
+        <Header>
+          <Typography
+            noWrap
+            sx={{
+              fontSize: 18,
+              fontWeight: '700',
+              flex: 1,
+            }}
+          >
+            {title}
+          </Typography>
+          <ProgressToNextUpdate
+            updatedAt={dataUpdatedAt || Date.now()}
+            timeToUpdate={refetchTime}
+            isLoading={isFetching}
+            onClick={() => refetch()}
+            sx={{ marginRight: -1 }}
+          />
+        </Header>
+        <PageContainer>
+          <Stack
+            direction="column"
+            spacing={2}
+            sx={{
+              flex: 1,
+              paddingBottom: 3,
+            }}
+          >
+            {routeNotFound ? (
+              <RouteNotFoundCard />
+            ) : (isLoading || isFetching) && !routes?.length ? (
+              Array.from({ length: 3 }).map((_, index) => (
+                <RouteCardSkeleton key={index} />
+              ))
+            ) : (
+              routes?.map((route: Route, index: number) => (
+                <RouteCard
+                  key={index}
+                  route={route}
+                  onClick={
+                    allowInteraction ? () => handleRouteClick(route) : undefined
+                  }
+                  active={index === 0}
+                  expanded={routes?.length === 1}
+                />
+              ))
+            )}
+          </Stack>
+        </PageContainer>
+      </ScrollableContainer>
+    </Container>
+  )
+}

package/src/components/Routes/RoutesExpanded.style.ts

@@ -1,21 +1,8 @@
 import type { ScopedCssBaselineProps } from '@mui/material'
-import { Box, Collapse, Grow, ScopedCssBaseline, styled } from '@mui/material'
+import { Box, ScopedCssBaseline, styled } from '@mui/material'
 import { defaultMaxHeight } from '../../config/constants.js'
 
-export const CollapseContainer = styled(Box)(({ theme }) => ({
-  zIndex: 0,
-  ...(theme.container.display === 'flex'
-    ? { display: 'flex', maxHeight: '100%' }
-    : { height: 'auto' }),
-}))
-
-export const RoutesExpandedCollapse = styled(Collapse)(({ theme }) => ({
-  ...(theme.container?.display === 'flex' ? { height: '100%' } : {}),
-}))
-
-export const RouteTopLevelGrow = styled(Grow)(({ theme }) => ({
-  ...(theme.container?.display === 'flex' ? { height: '100%' } : {}),
-}))
+export const routesExpansionWidth = '436px'
 
 export const ScrollableContainer = styled(Box)({
   overflowY: 'auto',
@@ -35,10 +22,10 @@ export const Container = styled(ScopedCssBaseline, {
 })<ContainerProps>(({ theme, minimumHeight }) => ({
   backgroundColor: theme.vars.palette.background.default,
   overflow: 'auto',
-  width: 436,
-  marginLeft: theme.spacing(3),
+  width: routesExpansionWidth,
   display: 'flex',
   flexDirection: 'column',
+  whiteSpace: 'normal',
   ...(theme.container?.display !== 'flex'
     ? {
         maxHeight:
@@ -53,7 +40,6 @@ export const Container = styled(ScopedCssBaseline, {
 
 export const Header = styled(Box)(({ theme }) => ({
   backgroundColor: theme.vars.palette.background.default,
-  backdropFilter: 'blur(12px)',
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',

package/src/components/Routes/RoutesExpanded.tsx

@@ -1,72 +1,22 @@
 import type { Route } from '@lifi/sdk'
-import { useAccount } from '@lifi/wallet-management'
-import { Collapse, Grow, Stack, Typography } from '@mui/material'
-import { type PropsWithChildren, 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 { useEffect, useRef } from 'react'
 import { useRoutes } from '../../hooks/useRoutes.js'
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { WidgetEvent } from '../../types/events.js'
-import { navigationRoutes } from '../../utils/navigationRoutes.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 {
-  CollapseContainer,
-  Container,
-  Header,
-  RouteTopLevelGrow,
-  RoutesExpandedCollapse,
-  ScrollableContainer,
-} from './RoutesExpanded.style.js'
+import { ExpansionType } from '../../types/widget.js'
+import { ExpansionTransition } from '../Expansion/ExpansionTransition.js'
+import { RoutesContent } from './RoutesContent.js'
+import { routesExpansionWidth } from './RoutesExpanded.style.js'
 
-const timeout = { enter: 225, exit: 225, appear: 0 }
-
-const routes: RouteObject[] = [
-  {
-    path: '/',
-    element: true,
-  },
-  {
-    path: '*',
-    element: null,
-  },
-]
-
-export const RoutesExpanded = () => {
-  const element = useDOMRoutes(routes)
-  const match = Boolean((element?.props as PropsWithChildren)?.children)
-
-  return (
-    <CollapseContainer>
-      <Collapse timeout={timeout} in={match} orientation="horizontal">
-        <RouteTopLevelGrow
-          timeout={timeout}
-          in={match}
-          mountOnEnter
-          unmountOnExit
-        >
-          <div>
-            <RoutesExpandedElement />
-          </div>
-        </RouteTopLevelGrow>
-      </Collapse>
-    </CollapseContainer>
-  )
+interface RoutesExpandedProps {
+  expansionType: ExpansionType
+  setOpenExpansion: (open: boolean) => void
 }
 
-export const RoutesExpandedElement = () => {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { subvariant, subvariantOptions } = useWidgetConfig()
+export const RoutesExpanded = ({
+  expansionType,
+  setOpenExpansion,
+}: RoutesExpandedProps) => {
   const routesRef = useRef<Route[]>(undefined)
-  const emitter = useWidgetEvents()
+
   const routesActiveRef = useRef(false)
   const {
     routes,
@@ -79,17 +29,6 @@ export const RoutesExpandedElement = () => {
     refetch,
     setReviewableRoute,
   } = useRoutes()
-  const { account } = useAccount({ chainType: fromChain?.chainType })
-  const [toAddress] = useFieldValues('toAddress')
-  const { requiredToAddress } = useToAddressRequirements()
-
-  const handleRouteClick = (route: Route) => {
-    setReviewableRoute(route)
-    navigate(navigationRoutes.transactionExecution, {
-      state: { routeId: route.id },
-    })
-    emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })
-  }
 
   const onExit = () => {
     // Clean routes cache on exit
@@ -104,96 +43,32 @@ export const RoutesExpandedElement = () => {
     routesActiveRef.current = Boolean(routes)
   }
 
-  const currentRoute = routesRef.current?.[0]
-
-  const expanded = Boolean(
-    routesActiveRef.current || isLoading || isFetching || isFetched
-  )
-
-  const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded
-  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
-  const allowInteraction = account.isConnected && !toAddressUnsatisfied
+  const expanded =
+    Boolean(routesActiveRef.current || isLoading || isFetching || isFetched) &&
+    expansionType === ExpansionType.Routes
 
   useEffect(() => {
-    emitter.emit(WidgetEvent.WidgetExpanded, expanded)
-  }, [emitter, expanded])
-
-  const title =
-    subvariant === 'custom'
-      ? subvariantOptions?.custom === 'deposit'
-        ? t('header.deposit')
-        : t('header.youPay')
-      : t('header.receive')
+    // To update parent's width when expansion changes
+    setOpenExpansion(expanded)
+  }, [expanded, setOpenExpansion])
 
   return (
-    <RoutesExpandedCollapse
-      timeout={timeout.enter as number}
+    <ExpansionTransition
       in={expanded}
-      orientation="horizontal"
+      width={routesExpansionWidth}
       onExited={onExit}
     >
-      <Grow
-        timeout={timeout.enter as number}
-        in={expanded}
-        mountOnEnter
-        unmountOnExit
-      >
-        <Container enableColorScheme minimumHeight={isLoading}>
-          <ScrollableContainer>
-            <Header>
-              <Typography
-                noWrap
-                sx={{
-                  fontSize: 18,
-                  fontWeight: '700',
-                  flex: 1,
-                }}
-              >
-                {title}
-              </Typography>
-              <ProgressToNextUpdate
-                updatedAt={dataUpdatedAt || new Date().getTime()}
-                timeToUpdate={refetchTime}
-                isLoading={isFetching}
-                onClick={() => refetch()}
-                sx={{ marginRight: -1 }}
-              />
-            </Header>
-            <PageContainer>
-              <Stack
-                direction="column"
-                spacing={2}
-                sx={{
-                  flex: 1,
-                  paddingBottom: 3,
-                }}
-              >
-                {routeNotFound ? (
-                  <RouteNotFoundCard />
-                ) : (isLoading || isFetching) && !routesRef.current?.length ? (
-                  Array.from({ length: 3 }).map((_, index) => (
-                    <RouteCardSkeleton key={index} />
-                  ))
-                ) : (
-                  routesRef.current?.map((route: Route, index: number) => (
-                    <RouteCard
-                      key={index}
-                      route={route}
-                      onClick={
-                        allowInteraction
-                          ? () => handleRouteClick(route)
-                          : undefined
-                      }
-                      active={index === 0}
-                      expanded={routesRef.current?.length === 1}
-                    />
-                  ))
-                )}
-              </Stack>
-            </PageContainer>
-          </ScrollableContainer>
-        </Container>
-      </Grow>
-    </RoutesExpandedCollapse>
+      <RoutesContent
+        routes={routesRef.current || []}
+        isFetching={isFetching}
+        isLoading={isLoading}
+        expanded={expanded}
+        setReviewableRoute={setReviewableRoute}
+        dataUpdatedAt={dataUpdatedAt}
+        refetchTime={refetchTime}
+        fromChain={fromChain}
+        refetch={refetch}
+      />
+    </ExpansionTransition>
   )
 }

package/src/components/Search/SearchInput.style.tsx

@@ -1,8 +1,41 @@
-import { Box, List, styled } from '@mui/material'
+import {
+  Box,
+  inputAdornmentClasses,
+  inputBaseClasses,
+  List,
+  styled,
+  svgIconClasses,
+} from '@mui/material'
 import { Input as InputBase } from '../../components/Input.js'
 
-export const Input = styled(InputBase)(({ theme }) => ({
-  paddingRight: theme.spacing(1.5),
+interface InputProps {
+  size?: 'small' | 'medium'
+}
+
+export const Input = styled(InputBase, {
+  shouldForwardProp: (prop) => prop !== 'size',
+})<InputProps>(({ theme, size = 'medium' }) => ({
+  paddingRight: size === 'small' ? theme.spacing(1.25) : theme.spacing(1.75),
+  paddingLeft: theme.spacing(1.25),
+  fontSize: size === 'small' ? '0.875rem' : '1rem',
+  borderRadius: theme.vars.shape.borderRadius,
+  [`& .${inputBaseClasses.input}`]: {
+    padding: theme.spacing(1),
+  },
+  [`& .${inputAdornmentClasses.root}`]: {
+    marginLeft: 0,
+    marginRight: 0,
+    [`& .${svgIconClasses.root}`]: {
+      width: size === 'small' ? '1.25rem' : '1.5rem',
+    },
+  },
+  [`& .${inputAdornmentClasses.root}.${inputAdornmentClasses.positionEnd}`]: {
+    marginRight: size === 'small' ? theme.spacing(-0.5) : theme.spacing(-1),
+    [`& .${svgIconClasses.root}`]: {
+      width: size === 'small' ? '1rem' : '1.25rem',
+      height: size === 'small' ? '1rem' : '1.25rem',
+    },
+  },
 }))
 
 interface SearchStickyContainerProps {

package/src/components/Search/SearchInput.tsx

@@ -1,38 +1,64 @@
+import ClearIcon from '@mui/icons-material/Clear'
 import Search from '@mui/icons-material/Search'
-import { FormControl, InputAdornment } from '@mui/material'
-import type { FocusEventHandler, FormEventHandler } from 'react'
+import { FormControl, IconButton, InputAdornment } from '@mui/material'
+import type { FocusEventHandler, FormEventHandler, RefObject } 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 {
+  inputRef?: RefObject<HTMLInputElement | null>
   name?: string
   value?: string
   placeholder?: string
   onChange?: FormEventHandler<HTMLInputElement>
   onBlur?: FocusEventHandler<HTMLInputElement>
+  onClear?: () => void
   autoFocus?: boolean
+  size?: 'small' | 'medium'
 }
 
 export const SearchInput = ({
+  inputRef,
   name,
   placeholder,
   onChange,
   onBlur,
+  onClear,
   value,
   autoFocus,
+  size = 'medium',
 }: SearchInputProps) => {
   return (
     <InputCard>
       <FormControl fullWidth>
         <Input
-          size="small"
+          inputRef={inputRef}
+          size={size}
           placeholder={placeholder}
-          endAdornment={
-            <InputAdornment position="end">
+          startAdornment={
+            <InputAdornment position="start">
               <Search />
             </InputAdornment>
           }
+          endAdornment={
+            (value || inputRef?.current?.value) &&
+            onClear && (
+              <InputAdornment position="end">
+                <IconButton
+                  size={size}
+                  onClick={onClear}
+                  aria-label="Clear"
+                  tabIndex={-1}
+                  sx={{
+                    padding: 0.5,
+                  }}
+                >
+                  <ClearIcon fontSize={size} />
+                </IconButton>
+              </InputAdornment>
+            )
+          }
           inputProps={{
             inputMode: 'search',
             onChange,

package/src/components/Search/SearchNotFound.style.tsx

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@mui/material'
-import { Box, Typography, styled } from '@mui/material'
+import { Box, styled, Typography } from '@mui/material'
 import { searchContainerHeight } from './SearchInput.style.js'
 
 interface NotFoundContainerProps extends BoxProps {
@@ -22,6 +22,7 @@ export const NotFoundContainer = styled(Box, {
 
 export const NotFoundMessage = styled(Typography)(({ theme }) => ({
   fontSize: 14,
+  whiteSpace: 'normal',
   color: theme.vars.palette.text.secondary,
   textAlign: 'center',
   flex: 1,

package/src/components/Select.tsx

@@ -1,7 +1,7 @@
 import {
-  Select as MuiSelect,
   inputBaseClasses,
   listItemIconClasses,
+  Select as MuiSelect,
   outlinedInputClasses,
   selectClasses,
   styled,

package/src/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -1,6 +1,6 @@
 import {
-  CardContent as MuiCardContent,
   cardHeaderClasses,
+  CardContent as MuiCardContent,
   styled,
 } from '@mui/material'
 import type { FormType } from '../../stores/form/types.js'