@lifi/widget 4.0.0-beta.9 → 4.1.0

package/src/components/AmountInput/PriceFormHelperText.style.tsx

@@ -1,32 +1,34 @@
 import { Button, styled } from '@mui/material'
+import type React from 'react'
 
-export const InputPriceButton = styled(Button)(({ theme, onClick }) => ({
-  color: theme.vars.palette.text.secondary,
-  padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
-  maxHeight: 16,
-  fontSize: '0.75rem',
-  fontWeight: 500,
-  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
-  backgroundColor: 'transparent',
-  minWidth: 32,
-  ...(onClick
-    ? {
-        '&:hover': {
-          backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: 'transparent',
+export const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =
+  styled(Button)(({ theme, onClick }) => ({
+    color: theme.vars.palette.text.secondary,
+    padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
+    maxHeight: 16,
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
+    backgroundColor: 'transparent',
+    minWidth: 32,
+    ...(onClick
+      ? {
           '&:hover': {
-            backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
           },
+          ...theme.applyStyles('dark', {
+            backgroundColor: 'transparent',
+            '&:hover': {
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+            },
+          }),
+        }
+      : {
+          cursor: 'text',
+          userSelect: 'text',
+          pointerEvents: 'none',
+          ...theme.applyStyles('dark', {
+            backgroundColor: 'transparent',
+          }),
         }),
-      }
-    : {
-        cursor: 'text',
-        userSelect: 'text',
-        pointerEvents: 'none',
-        ...theme.applyStyles('dark', {
-          backgroundColor: 'transparent',
-        }),
-      }),
-}))
+  }))

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -1,6 +1,7 @@
 import type { TokenAmount } from '@lifi/sdk'
 import SwapVertIcon from '@mui/icons-material/SwapVert'
 import { FormHelperText, Skeleton, Typography } from '@mui/material'
+import type React from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
@@ -11,22 +12,23 @@ import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { InputPriceButton } from './PriceFormHelperText.style.js'
 
-export const PriceFormHelperText = memo<FormTypeProps>(({ formType }) => {
-  const [chainId, tokenAddress] = useFieldValues(
-    FormKeyHelper.getChainKey(formType),
-    FormKeyHelper.getTokenKey(formType)
-  )
-  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
+export const PriceFormHelperText: React.NamedExoticComponent<FormTypeProps> =
+  memo<FormTypeProps>(({ formType }) => {
+    const [chainId, tokenAddress] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType)
+    )
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
 
-  return (
-    <PriceFormHelperTextBase
-      formType={formType}
-      isLoading={isLoading}
-      tokenAddress={tokenAddress}
-      token={token}
-    />
-  )
-})
+    return (
+      <PriceFormHelperTextBase
+        formType={formType}
+        isLoading={isLoading}
+        tokenAddress={tokenAddress}
+        token={token}
+      />
+    )
+  })
 
 const PriceFormHelperTextBase: React.FC<
   FormTypeProps & {

package/src/components/AppContainer.tsx

@@ -1,6 +1,7 @@
+import type { BoxProps, ContainerProps } from '@mui/material'
 import { Box, Container, ScopedCssBaseline, styled } from '@mui/material'
+import type React from 'react'
 import type { PropsWithChildren } from 'react'
-import { defaultMaxHeight } from '../config/constants.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useHeaderHeight } from '../stores/header/useHeaderStore.js'
 import type { WidgetVariant } from '../types/widget.js'
@@ -15,36 +16,31 @@ import { getWidgetMaxHeight } from '../utils/widgetSize.js'
 //    - 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 }) => ({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'start',
-  flex: 1,
-  height:
-    theme.container?.display === 'flex'
-      ? '100%'
-      : theme.container?.maxHeight
-        ? 'auto'
-        : theme.container?.height || 'auto',
-  variants: [
-    {
-      props: {
-        variant: 'drawer',
-      },
-      style: {
-        height: 'none',
-      },
-    },
-  ],
-}))
+export const AppExpandedContainer: React.FC<BoxProps> = styled(Box)(
+  ({ theme }) => {
+    return {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'start',
+      flex: 1,
+      height:
+        theme.container?.display === 'flex'
+          ? '100%'
+          : theme.container?.maxHeight
+            ? 'auto'
+            : theme.container?.height || 'auto',
+    }
+  }
+)
 
-export const RelativeContainer = styled(Box, {
+export const RelativeContainer: React.FC<
+  BoxProps & { variant?: WidgetVariant }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ theme }) => {
   const maxHeight =
-    theme.container?.height === 'fit-content'
+    theme.container?.height === 'fit-content' ||
+    (!theme.container?.height && !theme.container?.maxHeight)
       ? 'none'
       : getWidgetMaxHeight(theme)
   return {
@@ -89,7 +85,8 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
     !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),
 })<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {
   const maxHeight =
-    theme.container?.height === 'fit-content'
+    theme.container?.height === 'fit-content' ||
+    (!theme.container?.height && !theme.container?.maxHeight)
       ? 'none'
       : getWidgetMaxHeight(theme)
   return {
@@ -106,13 +103,6 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
     overflowY: 'auto',
     height: theme.container?.display === 'flex' ? 'auto' : '100%',
     paddingTop: paddingTopAdjustment,
-    // 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?.height ||
-        defaultMaxHeight,
-    },
     '&:has(.long-list)': {
       minHeight: getWidgetMaxHeight(theme),
       maxHeight: getWidgetMaxHeight(theme),
@@ -120,7 +110,7 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
   }
 })
 
-export const FlexContainer = styled(Container)({
+export const FlexContainer: React.FC<ContainerProps> = styled(Container)({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,

package/src/components/Avatar/AccountAvatar.tsx

@@ -2,6 +2,7 @@ import { getConnectorIcon } from '@lifi/wallet-management'
 import type { Account } from '@lifi/widget-provider'
 import Wallet from '@mui/icons-material/Wallet'
 import { Badge } from '@mui/material'
+import type { JSX } from 'react'
 import { useChain } from '../../hooks/useChain.js'
 import type { ToAddress } from '../../types/widget.js'
 import { AvatarDefault, AvatarMasked } from './Avatar.style.js'
@@ -19,7 +20,7 @@ export const AccountAvatar = ({
   account,
   empty,
   toAddress,
-}: AccountAvatarProps) => {
+}: AccountAvatarProps): JSX.Element => {
   const { chain } = useChain(chainId)
 
   const avatar = empty ? (

package/src/components/Avatar/Avatar.style.tsx

@@ -7,9 +7,15 @@ import {
   Avatar as MuiAvatar,
   styled,
 } from '@mui/material'
+import type React from 'react'
 import { getAvatarMask } from './utils.js'
 
-export const AvatarMasked = styled(MuiAvatar, {
+export const AvatarMasked: React.FC<
+  React.ComponentProps<typeof MuiAvatar> & {
+    avatarSize?: number
+    badgeSize?: number
+  }
+> = styled(MuiAvatar, {
   shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',
 })<{ avatarSize?: number; badgeSize?: number }>(
   ({ avatarSize = 40, badgeSize = 16 }) => ({
@@ -19,7 +25,9 @@ export const AvatarMasked = styled(MuiAvatar, {
   })
 )
 
-export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
+export const TokenAvatarGroup: React.FC<
+  React.ComponentProps<typeof AvatarGroup> & { badgeSize?: number }
+> = styled(AvatarGroup)(({ theme }) => ({
   [`& .${badgeClasses.badge}:last-of-type .${avatarClasses.root}`]: {
     boxSizing: 'border-box',
   },
@@ -36,7 +44,9 @@ export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   },
 }))
 
-export const AvatarDefault = styled(Box, {
+export const AvatarDefault: React.FC<
+  React.ComponentProps<typeof Box> & { badgeSize?: number }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'badgeSize',
 })<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => {
   const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject
@@ -56,7 +66,9 @@ export const AvatarDefault = styled(Box, {
   }
 })
 
-export const AvatarDefaultBadge = styled(Box, {
+export const AvatarDefaultBadge: React.FC<
+  React.ComponentProps<typeof Box> & { size?: number }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'size',
 })<{ size?: number }>(({ theme, size = 16 }) => {
   return {
@@ -70,12 +82,16 @@ export const AvatarDefaultBadge = styled(Box, {
   }
 })
 
-export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+export const AvatarSkeletonContainer: React.FC<
+  React.ComponentProps<typeof Box> & { badgeSize?: number }
+> = styled(Box)(({ theme }) => ({
   background: theme.vars.palette.background.paper,
   borderRadius: '50%',
 }))
 
-export const AvatarSkeletonMaskedContainer = styled(Box, {
+export const AvatarSkeletonMaskedContainer: React.FC<
+  React.ComponentProps<typeof Box> & { badgeSize?: number }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'badgeSize',
 })<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => ({
   background: theme.vars.palette.background.paper,

package/src/components/Avatar/SmallAvatar.tsx

@@ -1,11 +1,14 @@
 import { Avatar, Skeleton, styled } from '@mui/material'
+import type React from 'react'
 import { AvatarSkeletonContainer } from './Avatar.style.js'
 
 interface SmallAvatarProps {
   size?: number
 }
 
-export const SmallAvatar = styled(Avatar, {
+export const SmallAvatar: React.FC<
+  React.ComponentProps<typeof Avatar> & SmallAvatarProps
+> = styled(Avatar, {
   shouldForwardProp: (prop) => prop !== 'size',
 })<SmallAvatarProps>(({ theme, size = 16 }) => ({
   background: theme.vars.palette.background.paper,

package/src/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -13,6 +13,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
   disabled,
   loading,
   route,
+  sx,
 }) => {
   const { t } = useTranslation()
   const { walletConfig } = useWidgetConfig()
@@ -62,6 +63,8 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
       loading={loading}
       loadingPosition="center"
       fullWidth
+      sx={sx}
+      data-testid="widget-transaction-button"
     >
       {getButtonText()}
     </Button>

package/src/components/BaseTransactionButton/types.ts

@@ -1,4 +1,5 @@
 import type { RouteExtended } from '@lifi/sdk'
+import type { SxProps, Theme } from '@mui/material'
 
 export interface BaseTransactionButtonProps {
   onClick?(): void
@@ -6,4 +7,5 @@ export interface BaseTransactionButtonProps {
   disabled?: boolean
   loading?: boolean
   route?: RouteExtended
+  sx?: SxProps<Theme>
 }

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,6 +1,6 @@
 import { Drawer } from '@mui/material'
+import type { JSX, Ref } from 'react'
 import {
-  forwardRef,
   startTransition,
   useCallback,
   useImperativeHandle,
@@ -8,57 +8,64 @@ import {
   useState,
 } from 'react'
 import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'
-import { modalProps, slotProps } from '../Dialog.js'
+import { modalProps, slotProps } from '../Dialog/Dialog.js'
 import type { BottomSheetBase, BottomSheetProps } from './types.js'
 
-export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
-  ({ elementRef, children, open, onClose, keepMounted = false }, ref) => {
-    const getContainer = useGetScrollableContainer()
-    const openRef = useRef(open)
-    const [drawerOpen, setDrawerOpen] = useState(open)
-    const [isInert, setIsInert] = useState(!open)
+export const BottomSheet = ({
+  elementRef,
+  children,
+  open,
+  onClose,
+  keepMounted = false,
+  ref,
+}: Omit<BottomSheetProps, 'ref'> & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
+  const getContainer = useGetScrollableContainer()
+  const openRef = useRef(open)
+  const [drawerOpen, setDrawerOpen] = useState(open)
+  const [isInert, setIsInert] = useState(!open)
 
-    const close = useCallback(() => {
-      // Set inert first to prevent focus issues
-      setIsInert(true)
-      // Push the state update to the next event loop tick
-      // to ensure the inert is applied to before the drawer is closed
-      startTransition(() => {
-        setDrawerOpen(false)
-        openRef.current = false
-        onClose?.()
-      })
-    }, [onClose])
+  const close = useCallback(() => {
+    // Set inert first to prevent focus issues
+    setIsInert(true)
+    // Push the state update to the next event loop tick
+    // to ensure the inert is applied to before the drawer is closed
+    startTransition(() => {
+      setDrawerOpen(false)
+      openRef.current = false
+      onClose?.()
+    })
+  }, [onClose])
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        isOpen: () => openRef.current,
-        open: () => {
-          setIsInert(false)
-          setDrawerOpen(true)
-          openRef.current = true
-        },
-        close,
-      }),
-      [close]
-    )
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => openRef.current,
+      open: () => {
+        setIsInert(false)
+        setDrawerOpen(true)
+        openRef.current = true
+      },
+      close,
+    }),
+    [close]
+  )
 
-    return (
-      <Drawer
-        container={getContainer}
-        ref={elementRef}
-        anchor="bottom"
-        open={drawerOpen}
-        onClose={close}
-        ModalProps={modalProps}
-        slotProps={slotProps}
-        disableAutoFocus
-        keepMounted={keepMounted}
-        inert={isInert}
-      >
-        {children}
-      </Drawer>
-    )
-  }
-)
+  return (
+    <Drawer
+      container={getContainer}
+      ref={elementRef}
+      anchor="bottom"
+      open={drawerOpen}
+      onClose={close}
+      ModalProps={modalProps}
+      slotProps={slotProps}
+      disableAutoFocus
+      keepMounted={keepMounted}
+      inert={isInert}
+    >
+      {children}
+    </Drawer>
+  )
+}

package/src/components/ButtonTertiary.tsx

@@ -1,27 +1,29 @@
 import { Button, buttonClasses, styled } from '@mui/material'
+import type React from 'react'
 
-export const ButtonTertiary = styled(Button)(({ theme }) => ({
-  color: theme.vars.palette.text.primary,
-  height: 40,
-  fontSize: 14,
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-  '&:hover, &:active': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-  },
-  [`&.${buttonClasses.loading}:disabled`]: {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-  },
-  ...theme.applyStyles('dark', {
+export const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =
+  styled(Button)(({ theme }) => ({
     color: theme.vars.palette.text.primary,
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    height: 40,
+    fontSize: 14,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     '&:hover, &:active': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
     },
     [`&.${buttonClasses.loading}:disabled`]: {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     },
-  }),
-  [`.${buttonClasses.loadingIndicator}`]: {
-    color: theme.vars.palette.text.primary,
-  },
-}))
+    ...theme.applyStyles('dark', {
+      color: theme.vars.palette.text.primary,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+      '&:hover, &:active': {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+      },
+      [`&.${buttonClasses.loading}:disabled`]: {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+      },
+    }),
+    [`.${buttonClasses.loadingIndicator}`]: {
+      color: theme.vars.palette.text.primary,
+    },
+  }))

package/src/components/Card/Card.tsx

@@ -1,5 +1,6 @@
 import type { CardProps as MuiCardProps } from '@mui/material'
 import { Card as MuiCard, styled } from '@mui/material'
+import type React from 'react'
 
 export interface CardProps extends MuiCardProps {
   type?: 'default' | 'selected' | 'error'
@@ -7,73 +8,74 @@ export interface CardProps extends MuiCardProps {
   indented?: boolean
 }
 
-export const Card = styled(MuiCard, {
-  shouldForwardProp: (prop) =>
-    !['type', 'indented', 'selectionColor'].includes(prop as string),
-})<CardProps>(({ theme }) => {
-  return {
-    padding: 0,
-    variants: [
-      {
-        props: ({ indented }) => indented,
-        style: {
-          padding: theme.spacing(2),
-        },
-      },
-      {
-        props: {
-          selectionColor: 'primary',
-          type: 'selected',
+export const Card: React.FC<React.ComponentProps<typeof MuiCard> & CardProps> =
+  styled(MuiCard, {
+    shouldForwardProp: (prop) =>
+      !['type', 'indented', 'selectionColor'].includes(prop as string),
+  })<CardProps>(({ theme }) => {
+    return {
+      padding: 0,
+      variants: [
+        {
+          props: ({ indented }) => indented,
+          style: {
+            padding: theme.spacing(2),
+          },
         },
-        style: {
-          borderWidth: 1,
-          borderStyle: 'solid',
-          borderColor: theme.vars.palette.primary.main,
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,
-          '&:hover': {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,
+        {
+          props: {
+            selectionColor: 'primary',
+            type: 'selected',
           },
-          ...theme.applyStyles('dark', {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,
+          style: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.vars.palette.primary.main,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,
             '&:hover': {
-              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,
             },
-            borderColor: theme.vars.palette.primary.main,
-          }),
-        },
-      },
-      {
-        props: {
-          selectionColor: 'secondary',
-          type: 'selected',
+            ...theme.applyStyles('dark', {
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,
+              '&:hover': {
+                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,
+              },
+              borderColor: theme.vars.palette.primary.main,
+            }),
+          },
         },
-        style: {
-          borderWidth: 1,
-          borderStyle: 'solid',
-          borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
-          '&:hover': {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,
+        {
+          props: {
+            selectionColor: 'secondary',
+            type: 'selected',
           },
-          ...theme.applyStyles('dark', {
-            borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.32)`,
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
+          style: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
             '&:hover': {
-              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,
             },
-          }),
-        },
-      },
-      {
-        props: {
-          type: 'error',
+            ...theme.applyStyles('dark', {
+              borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
+              '&:hover': {
+                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,
+              },
+            }),
+          },
         },
-        style: {
-          borderWidth: 1,
-          borderStyle: 'solid',
-          borderColor: theme.vars.palette.error.main,
+        {
+          props: {
+            type: 'error',
+          },
+          style: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.vars.palette.error.main,
+          },
         },
-      },
-    ],
-  }
-})
+      ],
+    }
+  })