@xyo-network/react-shared 2.81.10 → 2.82.0

package/src/components/LoadResult.stories.tsx

@@ -1,7 +1,7 @@
-/* eslint-disable import/no-internal-modules */
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 
-import { LoadResult } from './LoadResult.js'
+import { LoadResult } from './LoadResult.tsx'
 
 const StorybookEntry: Meta = {
   argTypes: {},
@@ -32,5 +32,4 @@ SearchResult.args = { children: <h1>Shown when there is a valid result</h1>, sea
 
 export { ApiError, Default, NotFound, SearchResult }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/LoadResult.tsx

@@ -1,7 +1,7 @@
 import { FlexGrowRow } from '@xylabs/react-flexbox'
-import { PropsWithChildren } from 'react'
+import React, { PropsWithChildren } from 'react'
 
-import { NotFound } from './NotFound.js'
+import { NotFound } from './NotFound.tsx'
 
 export interface LoadResultProps<T> {
   /** @deprecated - use error prop */

package/src/components/NotFound.tsx

@@ -1,12 +1,13 @@
 import { Typography } from '@mui/material'
 import { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'
+import React from 'react'
 
 const NotFound: React.FC<FlexBoxProps> = (props) => {
   return (
     <FlexGrowCol {...props}>
       <Typography variant="h2">Sorry!</Typography>
       <Typography marginY={3} variant="body2">
-        {"Can't find anything here"}
+        {'Can\'t find anything here'}
       </Typography>
     </FlexGrowCol>
   )

package/src/components/Pipe.tsx

@@ -1,4 +1,5 @@
 import { Typography, TypographyProps } from '@mui/material'
+import React from 'react'
 
 export const Pipe: React.FC<TypographyProps> = (props) => {
   return (

package/src/components/ScrollTableOnSm.tsx

@@ -1,5 +1,6 @@
 import { styled } from '@mui/material'
 import { WithChildren } from '@xylabs/react-shared'
+import React from 'react'
 
 const StyledScrollTableOnSm = styled('div')(({ theme }) => ({
   [theme.breakpoints.down('md')]: {

package/src/components/SectionSpacingRow/SectionSpacingRow.stories.tsx

@@ -1,8 +1,9 @@
 import { Divider, Typography } from '@mui/material'
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import { SectionSpacingRow } from './SectionSpacingRow.js'
+import { SectionSpacingRow } from './SectionSpacingRow.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: SectionSpacingRow,
@@ -14,7 +15,7 @@ const StorybookEntry = {
   title: 'shared/SectionSpacingRow',
 } as Meta<typeof SectionSpacingRow>
 
-const Template: StoryFn<typeof SectionSpacingRow> = (args) => (
+const Template: StoryFn<typeof SectionSpacingRow> = args => (
   <BrowserRouter>
     <Typography variant="subtitle2">No Spacing</Typography>
     <Typography textAlign="center">Hello World</Typography>
@@ -28,9 +29,8 @@ const Default = Template.bind({})
 Default.args = {}
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
+// @ts-ignore
 
 export { Default }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/SectionSpacingRow/SectionSpacingRow.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material'
 import { FlexBoxProps, FlexGrowRow } from '@xylabs/react-flexbox'
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 export const SectionSpacingRow = forwardRef<HTMLDivElement, FlexBoxProps>(({ children, sx, ...props }, ref) => {
   const theme = useTheme()

package/src/components/SectionSpacingRow/index.ts

@@ -1 +1 @@
-export * from './SectionSpacingRow.js'
+export * from './SectionSpacingRow.tsx'

package/src/components/StyleGuide/AppBars.example.tsx

@@ -2,6 +2,7 @@ import { Menu as MenuIcon } from '@mui/icons-material'
 import { Button, IconButton, Toolbar, Typography } from '@mui/material'
 import { AppBarEx } from '@xylabs/react-appbar'
 import { FlexCol } from '@xylabs/react-flexbox'
+import React from 'react'
 
 export const AppBarsExample = () => {
   const contextToolbar = (

package/src/components/StyleGuide/Buttons.example.tsx

@@ -1,5 +1,6 @@
 import { Button, ButtonTypeMap, Typography } from '@mui/material'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import React, { Fragment } from 'react'
 
 const colors = ['primary', 'secondary'] as ButtonTypeMap['props']['color'][]
 const variants = ['text', 'contained', 'outlined'] as ButtonTypeMap['props']['variant'][]
@@ -10,22 +11,25 @@ export const ButtonsExample: React.FC = ({ ...props }) => {
       <Typography variant="subtitle1">Buttons</Typography>
       <Typography variant="subtitle2">Buttons</Typography>
       <FlexRow alignItems="stretch" mb={2}>
-        {colors.map((color) => (
-          <>
+        {colors.map(color => (
+          <Fragment key={color}>
             <Button variant="contained" color={color}>
               {color}
             </Button>
             &nbsp;
-          </>
+          </Fragment>
         ))}
       </FlexRow>
-      {variants.map((variant) => (
+      {variants.map(variant => (
         <FlexCol key={`btn-${variant}`} alignItems="stretch" mb={2}>
           <Typography variant="subtitle2">
-            <span style={{ textTransform: 'capitalize' }}>{variant}</span> Buttons
+            <span style={{ textTransform: 'capitalize' }}>{variant}</span>
+            {' '}
+            Buttons
           </Typography>
           <FlexRow alignItems="stretch">
-            <Button variant={variant}>Button</Button>&nbsp;
+            <Button variant={variant}>Button</Button>
+&nbsp;
             <Button variant={variant} disabled>
               Disabled
             </Button>

package/src/components/StyleGuide/Papers.example.tsx

@@ -1,5 +1,6 @@
 import { Paper, Typography } from '@mui/material'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import React from 'react'
 
 export const PapersExample: React.FC = ({ ...props }) => {
   return (
@@ -9,7 +10,10 @@ export const PapersExample: React.FC = ({ ...props }) => {
         {Array.from({ length: 5 }, () => {}).map((_, index) => (
           <FlexCol key={`paper-${index}`} marginRight={2}>
             <Paper key={`paper-${index}`} elevation={index * 2} color="secondary">
-              <Typography margin={1}>Elevation-{index * 3}</Typography>
+              <Typography margin={1}>
+                Elevation-
+                {index * 3}
+              </Typography>
             </Paper>
           </FlexCol>
         ))}

package/src/components/StyleGuide/StyleGuide.example.tsx

@@ -1,10 +1,11 @@
 import { Typography } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
+import React from 'react'
 
-import { AppBarsExample } from './AppBars.example.js'
-import { ButtonsExample } from './Buttons.example.js'
-import { PapersExample } from './Papers.example.js'
-import { TextsExample } from './Texts.example.js'
+import { AppBarsExample } from './AppBars.example.tsx'
+import { ButtonsExample } from './Buttons.example.tsx'
+import { PapersExample } from './Papers.example.tsx'
+import { TextsExample } from './Texts.example.tsx'
 
 export const StyleGuideExample: React.FC = () => {
   return (

package/src/components/StyleGuide/StyleGuide.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 
-import { StyleGuideExample } from './StyleGuide.example.js'
+import { StyleGuideExample } from './StyleGuide.example.tsx'
 
 const StorybookEntry = {
   argTypes: {},
@@ -21,5 +22,4 @@ Default.decorators = []
 
 export { Default }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/StyleGuide/Texts.example.tsx

@@ -1,5 +1,6 @@
 import { Typography, TypographyVariant } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
+import React from 'react'
 
 export const TextsExample = () => {
   const variantList: TypographyVariant[] = [
@@ -20,9 +21,11 @@ export const TextsExample = () => {
 
   return (
     <FlexCol>
-      {variantList.map((variant) => (
+      {variantList.map(variant => (
         <Typography key={variant} variant={variant}>
-          {variant} - XYO Network
+          {variant}
+          {' '}
+          - XYO Network
         </Typography>
       ))}
     </FlexCol>

package/src/components/TableCell/AddressTableCell.tsx

@@ -1,6 +1,6 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
-import { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell.js'
+import { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell.tsx'
 
 export interface AddressTableCellProps extends Omit<EllipsisTableCellProps, 'ref'> {
   /** @deprecated - archives are no longer supported */
@@ -10,7 +10,6 @@ export interface AddressTableCellProps extends Omit<EllipsisTableCellProps, 'ref
   link?: boolean
 }
 
-// eslint-disable-next-line deprecation/deprecation
 const AddressTableCell = forwardRef<HTMLElement, AddressTableCellProps>(({ value, archive, exploreDomain, link, ...props }, ref) => {
   const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : undefined
   const to = exploreDomain === undefined && archive ? `/archive/${archive}/address/${value}` : undefined

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -1,13 +1,13 @@
 import { styled, TableCell, TableCellProps } from '@mui/material'
 import { LinkEx } from '@xylabs/react-link'
-import { forwardRef, useMemo } from 'react'
+import React, { forwardRef, useMemo } from 'react'
 import { To } from 'react-router-dom'
 
-import { EllipsizeBox } from '../Ellipsize.js'
+import { EllipsizeBox } from '../Ellipsize.tsx'
 
 const EllipsisTableCellRoot = styled(TableCell, {
   name: 'EllipsisTableCell',
-  shouldForwardProp: (prop) => prop !== 'width',
+  shouldForwardProp: prop => prop !== 'width',
   slot: 'Root',
 })(({ width = '100%' }) => ({
   width,

package/src/components/TableCell/EllipsisTableCellDeprecated.tsx

@@ -1,15 +1,15 @@
 import { TableCell, TableCellProps, useTheme } from '@mui/material'
 import { LinkEx } from '@xylabs/react-link'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { To } from 'react-router-dom'
 
-import { getActualPaddingX } from '../../lib/index.js'
-import { findParent } from './findParent.js'
-import { getRemainingRowWidth } from './getRemainingRowWidth.js'
-import { getSmallestParentWidth } from './getSmallestParentWidth.js'
+import { getActualPaddingX } from '../../lib/index.ts'
+import { findParent } from './findParent.ts'
+import { getRemainingRowWidth } from './getRemainingRowWidth.ts'
+import { getSmallestParentWidth } from './getSmallestParentWidth.ts'
 
 export interface EllipsisTableCellProps extends TableCellProps {
-  forCell?: number //cell index for ellipsized table cell
+  forCell?: number // cell index for ellipsized table cell
   href?: string | undefined
   to?: To | undefined
   value?: string
@@ -57,48 +57,53 @@ export const EllipsisTableCellDeprecated: React.FC<EllipsisTableCellProps> = ({
   return (
     <TableCell {...props}>
       <div ref={hashDivRef}>
-        {children ?
-          <span
-            style={{
-              display: 'block',
-              maxWidth: calcCellWidth,
-              minWidth: theme.spacing(10),
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {children}
-          </span>
-        : href || to ?
-          <LinkEx
-            style={{
-              display: 'block',
-              maxWidth: calcCellWidth,
-              minWidth: theme.spacing(10),
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-            to={to}
-            href={href}
-            target={href ? '_blank' : undefined}
-          >
-            {value}
-          </LinkEx>
-        : <span
-            style={{
-              display: 'block',
-              maxWidth: calcCellWidth,
-              minWidth: theme.spacing(10),
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {value}
-          </span>
-        }
+        {children
+          ? (
+              <span
+                style={{
+                  display: 'block',
+                  maxWidth: calcCellWidth,
+                  minWidth: theme.spacing(10),
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {children}
+              </span>
+            )
+          : href || to
+            ? (
+                <LinkEx
+                  style={{
+                    display: 'block',
+                    maxWidth: calcCellWidth,
+                    minWidth: theme.spacing(10),
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                  to={to}
+                  href={href}
+                  target={href ? '_blank' : undefined}
+                >
+                  {value}
+                </LinkEx>
+              )
+            : (
+                <span
+                  style={{
+                    display: 'block',
+                    maxWidth: calcCellWidth,
+                    minWidth: theme.spacing(10),
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {value}
+                </span>
+              )}
       </div>
     </TableCell>
   )

package/src/components/TableCell/EllipsizeTableCell.stories.tsx

@@ -1,8 +1,9 @@
 import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
 import { Decorator, Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import { EllipsisTableCell } from './EllipsisTableCell.js'
+import { EllipsisTableCell } from './EllipsisTableCell.tsx'
 
 const TableDecorator: Decorator = (Story, args) => {
   return (
@@ -24,7 +25,6 @@ const TableDecorator: Decorator = (Story, args) => {
   )
 }
 
-// eslint-disable-next-line import/no-default-export
 export default {
   component: EllipsisTableCell,
   decorators: [TableDecorator],

package/src/components/TableCell/HashTableCell.tsx

@@ -1,8 +1,8 @@
 import { Hash } from '@xylabs/hex'
 import { useEvent } from '@xyo-network/react-event'
-import { useRef } from 'react'
+import React, { useRef } from 'react'
 
-import { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell.js'
+import { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell.tsx'
 
 export interface HashTableCellProps extends EllipsisTableCellProps {
   archive?: string

package/src/components/TableCell/index.ts

@@ -1,3 +1,3 @@
-export * from './AddressTableCell.js'
-export * from './EllipsisTableCell.js'
-export * from './HashTableCell.js'
+export * from './AddressTableCell.tsx'
+export * from './EllipsisTableCell.tsx'
+export * from './HashTableCell.tsx'

package/src/components/ThemeTokenAvatar/ThemeTokenAvatar.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import * as tokenData from '../TokenData/index.js'
-import { ThemeTokenAvatar } from './ThemeTokenAvatar.js'
+import * as tokenData from '../TokenData/index.ts'
+import { ThemeTokenAvatar } from './ThemeTokenAvatar.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: ThemeTokenAvatar,
@@ -14,7 +15,7 @@ const StorybookEntry = {
   title: 'shared/ThemeTokenAvatar',
 } as Meta<typeof ThemeTokenAvatar>
 
-const Template: StoryFn<typeof ThemeTokenAvatar> = (args) => (
+const Template: StoryFn<typeof ThemeTokenAvatar> = args => (
   <BrowserRouter>
     <ThemeTokenAvatar {...args}></ThemeTokenAvatar>
   </BrowserRouter>
@@ -25,5 +26,4 @@ WithData.args = { src: tokenData.TokenData[0].icon }
 
 export { WithData }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx

@@ -1,4 +1,5 @@
 import { Avatar, AvatarProps, useTheme } from '@mui/material'
+import React from 'react'
 
 export const ThemeTokenAvatar: React.FC<AvatarProps> = ({ ...props }) => {
   const theme = useTheme()

package/src/components/ThemeTokenAvatar/index.ts

@@ -1 +1 @@
-export * from './ThemeTokenAvatar.js'
+export * from './ThemeTokenAvatar.tsx'

package/src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import * as tokenData from '../TokenData/index.js'
-import { ThemeTokenAvatarGroup } from './ThemeTokenAvatarGroup.js'
+import * as tokenData from '../TokenData/index.ts'
+import { ThemeTokenAvatarGroup } from './ThemeTokenAvatarGroup.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: ThemeTokenAvatarGroup,
@@ -14,7 +15,7 @@ const StorybookEntry = {
   title: 'shared/ThemeTokenAvatarGroup',
 } as Meta<typeof ThemeTokenAvatarGroup>
 
-const Template: StoryFn<typeof ThemeTokenAvatarGroup> = (args) => (
+const Template: StoryFn<typeof ThemeTokenAvatarGroup> = args => (
   <BrowserRouter>
     <ThemeTokenAvatarGroup {...args}></ThemeTokenAvatarGroup>
   </BrowserRouter>
@@ -38,5 +39,4 @@ WithData.args = {
 
 export { WithData }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx

@@ -1,6 +1,7 @@
 import { AvatarGroup, AvatarGroupProps } from '@mui/material'
+import React from 'react'
 
-import { ThemeTokenAvatar } from '../ThemeTokenAvatar/index.js'
+import { ThemeTokenAvatar } from '../ThemeTokenAvatar/index.ts'
 
 export interface ThemeTokenAvatarGroupProps extends AvatarGroupProps {
   images?: string[]

package/src/components/ThemeTokenAvatarGroup/index.ts

@@ -1 +1 @@
-export * from './ThemeTokenAvatarGroup.js'
+export * from './ThemeTokenAvatarGroup.tsx'

package/src/components/TokenBar/TokenBar.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryFn } from '@storybook/react'
 import { QuickTipButton } from '@xylabs/react-quick-tip-button'
+import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import { TokenBar } from './TokenBar.js'
+import { TokenBar } from './TokenBar.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: TokenBar,
@@ -14,7 +15,7 @@ const StorybookEntry = {
   title: 'shared/TokenBar',
 } as Meta<typeof TokenBar>
 
-const Template: StoryFn<typeof TokenBar> = (args) => (
+const Template: StoryFn<typeof TokenBar> = args => (
   <BrowserRouter>
     <TokenBar {...args}></TokenBar>
   </BrowserRouter>
@@ -27,9 +28,8 @@ const WithSuffixes = Template.bind({})
 WithSuffixes.args = { text1: 'ETH', text2: '0.062342', text2Suffix: <QuickTipButton title="0.06234298345834958" /> }
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
+// @ts-ignore
 
 export { WithData, WithSuffixes }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/TokenBar/TokenBar.tsx

@@ -1,6 +1,6 @@
 import { Paper, PaperProps, Typography, TypographyProps } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
-import { ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 export interface TokenBarProps extends PaperProps {
   text1?: ReactNode
   text1Props?: TypographyProps

package/src/components/TokenBar/index.ts

@@ -1 +1 @@
-export * from './TokenBar.js'
+export * from './TokenBar.tsx'

package/src/components/TokenData/TokenData.ts

@@ -1,4 +1,4 @@
-import * as tokenImages from './img/index.js'
+import * as tokenImages from './img/index.ts'
 
 export interface TokenData {
   coinmarketcapLink: string

package/src/components/TokenData/index.ts

@@ -1,2 +1,2 @@
-export * from './TokenData.js'
-export * from './useGetTokenData.js'
+export * from './TokenData.ts'
+export * from './useGetTokenData.tsx'

package/src/components/TokenData/useGetTokenData.tsx

@@ -1,8 +1,8 @@
-import { TokenData } from './TokenData.js'
+import { TokenData } from './TokenData.ts'
 
 export const useGetTokenData = (symbols: (string | undefined)[]) => {
   return symbols?.map((symbol) => {
-    const additionalTokenData = TokenData.find((x) => x.tokenSymbol === symbol)
+    const additionalTokenData = TokenData.find(x => x.tokenSymbol === symbol)
     const checkedTokenData = additionalTokenData ?? TokenData[0]
     return checkedTokenData
   })

package/src/components/TokenSummary/TokenSummary.stories.tsx

@@ -1,9 +1,10 @@
 import { Link } from '@mui/material'
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import * as tokenData from '../TokenData/index.js'
-import { TokenSummary } from './TokenSummary.js'
+import * as tokenData from '../TokenData/index.ts'
+import { TokenSummary } from './TokenSummary.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: TokenSummary,
@@ -15,7 +16,7 @@ const StorybookEntry = {
   title: 'shared/TokenSummary',
 } as Meta<typeof TokenSummary>
 
-const Template: StoryFn<typeof TokenSummary> = (args) => (
+const Template: StoryFn<typeof TokenSummary> = args => (
   <BrowserRouter>
     <TokenSummary {...args}></TokenSummary>
   </BrowserRouter>
@@ -37,5 +38,4 @@ SymbolElement.args = {
 
 export { SymbolElement, WithData }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/TokenSummary/TokenSummary.tsx

@@ -1,7 +1,7 @@
 import { AvatarProps, CardHeader, CardHeaderProps, Typography } from '@mui/material'
-import { ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 
-import { ThemeTokenAvatar } from '../ThemeTokenAvatar/index.js'
+import { ThemeTokenAvatar } from '../ThemeTokenAvatar/index.ts'
 
 export interface TokenSummaryProps extends CardHeaderProps {
   icon?: string
@@ -15,11 +15,11 @@ export const TokenSummary: React.FC<TokenSummaryProps> = ({ icon, symbol, symbol
     <>
       <CardHeader
         avatar={<ThemeTokenAvatar src={icon} alt={symbol} />}
-        title={
+        title={(
           <Typography variant="h6" fontWeight={300} textTransform="uppercase">
             {symbolElement ?? symbol}
           </Typography>
-        }
+        )}
         {...props}
       />
       {children}

package/src/components/TokenSummary/index.ts

@@ -1 +1 @@
-export * from './TokenSummary.js'
+export * from './TokenSummary.tsx'

package/src/components/TypographyEx.tsx

@@ -1,6 +1,7 @@
 import { Typography, TypographyProps } from '@mui/material'
+import React from 'react'
 
-import { useGradientStyles } from '../hooks/index.js'
+import { useGradientStyles } from '../hooks/index.ts'
 
 export interface TypographyExProps extends TypographyProps {
   gradient?: 'text'