@xyo-network/react-shared 7.5.8 → 7.5.11

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

@@ -1,105 +0,0 @@
-import {
-  Table, TableBody, TableCell, TableHead, TableRow,
-} from '@mui/material'
-import type {
-  Decorator, Meta, StoryFn,
-} from '@storybook/react-vite'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { EllipsisTableCell } from './EllipsisTableCell.tsx'
-
-const TableDecorator: Decorator = (Story, args) => {
-  return (
-    <BrowserRouter>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Heading1</TableCell>
-            <TableCell>Heading2</TableCell>
-            <TableCell>Heading3</TableCell>
-            <TableCell>Heading4</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <Story {...args} />
-        </TableBody>
-      </Table>
-    </BrowserRouter>
-  )
-}
-
-export default {
-  component: EllipsisTableCell,
-  decorators: [TableDecorator],
-  title: 'shared/EllipsisTableCell',
-} as Meta
-
-const Template: StoryFn<typeof EllipsisTableCell> = (props) => {
-  return (
-    <TableRow>
-      <EllipsisTableCell to="/foo" value="As-Link-e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915" {...props} />
-      <TableCell>d2fa4a7d47dad915501ff6b2f860b7992c347</TableCell>
-      <TableCell>d2fa4a7d47dad915</TableCell>
-      <TableCell>e0f05</TableCell>
-    </TableRow>
-  )
-}
-
-const TemplateWithMultiple: StoryFn<typeof EllipsisTableCell> = (props) => {
-  return (
-    <TableRow>
-      <EllipsisTableCell width="50%" {...props}>
-        As-children-e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915
-      </EllipsisTableCell>
-      <EllipsisTableCell width="50%" {...props}>
-        e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915
-      </EllipsisTableCell>
-      <TableCell>d2fa4a7d47dad915</TableCell>
-      <TableCell>e0f05</TableCell>
-    </TableRow>
-  )
-}
-
-const TemplateWithMultipleRows: StoryFn<typeof EllipsisTableCell> = (props) => {
-  return (
-    <>
-      <TableRow>
-        <EllipsisTableCell
-          width="50%"
-          href="http://foo.com"
-          {...props}
-          value="As-href-e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915"
-        />
-        <EllipsisTableCell width="50%" {...props}>
-          e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915
-        </EllipsisTableCell>
-        <TableCell>d2fa4a7d47dad915</TableCell>
-        <TableCell>e0f05</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>d2fa4a7d47dad915</TableCell>
-        <TableCell>e0f05</TableCell>
-        <EllipsisTableCell width="50%" {...props}>
-          e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915
-        </EllipsisTableCell>
-        <EllipsisTableCell width="50%" {...props}>
-          e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915
-        </EllipsisTableCell>
-      </TableRow>
-    </>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithMultiple = TemplateWithMultiple.bind({})
-WithMultiple.args = {}
-
-const WithMultipleRows = TemplateWithMultipleRows.bind({})
-WithMultipleRows.args = {}
-
-export {
-  Default, WithMultiple, WithMultipleRows,
-}

package/src/components/TableCell/HashTableCell.tsx

@@ -1,28 +0,0 @@
-import type { Hash } from '@xylabs/sdk-js'
-import React from 'react'
-
-import type { EllipsisTableCellProps } from './EllipsisTableCell.tsx'
-import { EllipsisTableCell } from './EllipsisTableCell.tsx'
-
-export interface HashTableCellProps extends EllipsisTableCellProps {
-  /** @deprecated - archives are no longer used */
-  archive?: string
-  dataType?: 'block' | 'payload'
-  /** @deprecated - use event listeners instead of link building via props */
-  exploreDomain?: string
-  /** @deprecated - use event listeners instead of link building via props */
-  network?: string
-  /** @deprecated - onClick instead */
-  onHashClick?: (value: Hash) => void
-}
-
-export const HashTableCell: React.FC<HashTableCellProps> = ({
-  ref, value, dataType, ...props
-}) => {
-  return (
-    <EllipsisTableCell
-      value={value}
-      {...props}
-    />
-  )
-}

package/src/components/TableCell/findParent.ts

@@ -1,10 +0,0 @@
-export const findParent = (tagName: string, element: HTMLElement | null = null) => {
-  let currentElement = element
-  while (currentElement) {
-    if (currentElement.tagName.toLowerCase() === tagName.toLowerCase()) {
-      return currentElement
-    } else {
-      currentElement = currentElement.parentElement
-    }
-  }
-}

package/src/components/TableCell/getRemainingRowWidth.ts

@@ -1,12 +0,0 @@
-/** @description This is the width of all the cells (except the one passed) in the row combined and the spacing of the main cell */
-export const getRemainingRowWidth = (row: HTMLElement, forCell = 0) => {
-  let width = 0
-  for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
-    const item = row?.children.item(i)
-    if (item && i !== forCell) {
-      width += item?.clientWidth ?? 0
-    }
-  }
-
-  return width
-}

package/src/components/TableCell/getSmallestParentWidth.ts

@@ -1,13 +0,0 @@
-export const getSmallestParentWidth = (element: HTMLElement, maxDepth = 4) => {
-  let currentElement: HTMLElement | null = element?.parentElement
-  let width = currentElement?.clientWidth ?? screen.width
-  let maxDepthCounter = maxDepth
-  while (currentElement && maxDepthCounter > 0) {
-    if (width > currentElement.clientWidth) {
-      width = currentElement.clientWidth
-    }
-    currentElement = currentElement.parentElement
-    maxDepthCounter--
-  }
-  return width
-}

package/src/components/TableCell/index.ts

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

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

@@ -1,25 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import * as tokenData from '../TokenData/index.ts'
-import { ThemeTokenAvatar } from './ThemeTokenAvatar.tsx'
-const StorybookEntry = {
-  argTypes: {},
-  component: ThemeTokenAvatar,
-  parameters: { docs: { page: null } },
-  title: 'shared/ThemeTokenAvatar',
-} as Meta<typeof ThemeTokenAvatar>
-
-const Template: StoryFn<typeof ThemeTokenAvatar> = args => (
-  <BrowserRouter>
-    <ThemeTokenAvatar {...args}></ThemeTokenAvatar>
-  </BrowserRouter>
-)
-
-const WithData = Template.bind({})
-WithData.args = { src: tokenData.TokenData[0].icon }
-
-export { WithData }
-
-export default StorybookEntry

package/src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx

@@ -1,8 +0,0 @@
-import type { AvatarProps } from '@mui/material'
-import { Avatar, useTheme } from '@mui/material'
-import React from 'react'
-
-export const ThemeTokenAvatar: React.FC<AvatarProps> = ({ ...props }) => {
-  const theme = useTheme()
-  return <Avatar sx={{ background: theme.vars.palette.common.white }} {...props} />
-}

package/src/components/ThemeTokenAvatar/index.ts

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

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

@@ -1,38 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import * as tokenData from '../TokenData/index.ts'
-import { ThemeTokenAvatarGroup } from './ThemeTokenAvatarGroup.tsx'
-const StorybookEntry = {
-  argTypes: {},
-  component: ThemeTokenAvatarGroup,
-  parameters: { docs: { page: null } },
-  title: 'shared/ThemeTokenAvatarGroup',
-} as Meta<typeof ThemeTokenAvatarGroup>
-
-const Template: StoryFn<typeof ThemeTokenAvatarGroup> = args => (
-  <BrowserRouter>
-    <ThemeTokenAvatarGroup {...args}></ThemeTokenAvatarGroup>
-  </BrowserRouter>
-)
-
-const WithData = Template.bind({})
-WithData.args = {
-  images: [
-    tokenData.TokenData[0].icon,
-    tokenData.TokenData[1].icon,
-    tokenData.TokenData[2].icon,
-    tokenData.TokenData[3].icon,
-    tokenData.TokenData[4].icon,
-    tokenData.TokenData[6].icon,
-    tokenData.TokenData[7].icon,
-    tokenData.TokenData[8].icon,
-    tokenData.TokenData[9].icon,
-    tokenData.TokenData[10].icon,
-  ],
-}
-
-export { WithData }
-
-export default StorybookEntry

package/src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx

@@ -1,13 +0,0 @@
-import type { AvatarGroupProps } from '@mui/material'
-import { AvatarGroup } from '@mui/material'
-import React from 'react'
-
-import { ThemeTokenAvatar } from '../ThemeTokenAvatar/index.ts'
-
-export interface ThemeTokenAvatarGroupProps extends AvatarGroupProps {
-  images?: string[]
-}
-
-export const ThemeTokenAvatarGroup: React.FC<ThemeTokenAvatarGroupProps> = ({ images, ...props }) => {
-  return <AvatarGroup {...props}>{images?.map((image, index) => <ThemeTokenAvatar key={index} src={image} />)}</AvatarGroup>
-}

package/src/components/ThemeTokenAvatarGroup/index.ts

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

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

@@ -1,33 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { QuickTipButton } from '@xylabs/react-quick-tip-button'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { TokenBar } from './TokenBar.tsx'
-const StorybookEntry = {
-  argTypes: {},
-  component: TokenBar,
-  parameters: { docs: { page: null } },
-  title: 'shared/TokenBar',
-} as Meta<typeof TokenBar>
-
-const Template: StoryFn<typeof TokenBar> = args => (
-  <BrowserRouter>
-    <TokenBar {...args}></TokenBar>
-  </BrowserRouter>
-)
-
-const WithData = Template.bind({})
-WithData.args = { text1: 'Hello', text2: 'World' }
-
-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
-
-export { WithData, WithSuffixes }
-
-export default StorybookEntry

package/src/components/TokenBar/TokenBar.tsx

@@ -1,32 +0,0 @@
-import type { PaperProps, TypographyProps } from '@mui/material'
-import { Paper, Typography } from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import type { ReactNode } from 'react'
-import React from 'react'
-export interface TokenBarProps extends PaperProps {
-  text1?: ReactNode
-  text1Props?: TypographyProps
-  text1Suffix?: ReactNode
-  text2?: ReactNode
-  text2Props?: TypographyProps
-  text2Suffix?: ReactNode
-}
-
-export const TokenBar: React.FC<TokenBarProps> = ({
-  text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props
-}) => {
-  return (
-    <Paper elevation={0} className="TokenBar-root" {...props}>
-      <FlexRow justifyContent="space-between">
-        <Typography variant="body1" fontWeight={300} margin={1} {...text1Props}>
-          {text1}
-          {text1Suffix}
-        </Typography>
-        <Typography variant="body1" fontWeight={300} textTransform="uppercase" color="gray" margin={1} {...text2Props}>
-          {text2}
-          {text2Suffix}
-        </Typography>
-      </FlexRow>
-    </Paper>
-  )
-}

package/src/components/TokenBar/index.ts

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

package/src/components/TokenData/TokenData.ts

@@ -1,141 +0,0 @@
-import * as tokenImages from './img/index.ts'
-
-export interface TokenData {
-  coinmarketcapLink: string
-  etherscanLink: string
-  icon: string
-  readableName: string
-  tokenSymbol: string
-  uniqueTokenId: string
-}
-
-export const TokenData: TokenData[] = [
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/multi-collateral-dai/',
-    etherscanLink: 'https://etherscan.io/token/0x6b175474e89094c44da98b954eedeac495271d0f',
-    icon: tokenImages.dai,
-    readableName: 'Dai',
-    tokenSymbol: 'dai',
-    uniqueTokenId: 'dai',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/weth/',
-    etherscanLink: 'https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
-    icon: tokenImages.weth,
-    readableName: 'Weth',
-    tokenSymbol: 'weth',
-    uniqueTokenId: 'weth',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/ethereum/',
-    etherscanLink: 'n/a',
-    icon: tokenImages.ethereum,
-    readableName: 'Ethereum',
-    tokenSymbol: 'eth',
-    uniqueTokenId: 'ethereum',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/bitcoin/',
-    etherscanLink: 'n/a',
-    icon: tokenImages.btc,
-    readableName: 'Bitcoin',
-    tokenSymbol: 'btc',
-    uniqueTokenId: 'btc',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/xl1/',
-    etherscanLink: 'https://etherscan.io/token/0xf72ae3e0da743033abd7a407557d684c1ae66aed',
-    icon: tokenImages.xl1,
-    readableName: 'XL1',
-    tokenSymbol: 'xl1',
-    uniqueTokenId: 'xl1',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/xyo/',
-    etherscanLink: 'https://etherscan.io/token/0x55296f69f40ea6d20e478533c15a6b08b654e758',
-    icon: tokenImages.xyo,
-    readableName: 'XYO',
-    tokenSymbol: 'xyo',
-    uniqueTokenId: 'xyo',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/frax/',
-    etherscanLink: 'https://etherscan.io/token/0x853d955acef822db058eb8505911ed77f175b99e',
-    icon: tokenImages.frax,
-    readableName: 'Frax',
-    tokenSymbol: 'frax',
-    uniqueTokenId: 'frax',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/wrapped-bitcoin/',
-    etherscanLink: 'https://etherscan.io/token/0x2260fac5e5542a773aa44fbcfedf7c193bc2c599',
-    icon: tokenImages.wrappedBtc,
-    readableName: 'Wrapped BTC',
-    tokenSymbol: 'wbtc',
-    uniqueTokenId: 'wbtc',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/usd-coin/',
-    etherscanLink: 'https://etherscan.io/token/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
-    icon: tokenImages.usdCoin,
-    readableName: 'USDC',
-    tokenSymbol: 'usdc',
-    uniqueTokenId: 'usdc',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/tether/',
-    etherscanLink: 'https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7',
-    icon: tokenImages.tether,
-    readableName: 'Tether',
-    tokenSymbol: 'usdt',
-    uniqueTokenId: 'usdt',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/cardano/',
-    etherscanLink: 'https://etherscan.io/token/0xc14777c94229582e5758c5a79b83dde876b9be98',
-    icon: tokenImages.ada,
-    readableName: 'Cardano',
-    tokenSymbol: 'ada',
-    uniqueTokenId: 'ada',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/binance-usd/',
-    etherscanLink: 'https://etherscan.io/token/0x4Fabb145d64652a948d72533023f6E7A623C7C53',
-    icon: tokenImages.busd,
-    readableName: 'Binance USD',
-    tokenSymbol: 'busd',
-    uniqueTokenId: 'busd',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/dogecoin/',
-    etherscanLink: 'https://etherscan.io/token/0x7618b5024a6349f9aef10ddfd33e3428c734551e',
-    icon: tokenImages.dogecoin,
-    readableName: 'Dogecoin',
-    tokenSymbol: 'doge',
-    uniqueTokenId: 'doge',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/polkadot-new/',
-    etherscanLink: 'https://etherscan.io/token/0x2d4fb6dd969992c881d8e534c747cc925d5ba221',
-    icon: tokenImages.dot,
-    readableName: 'Polkadot',
-    tokenSymbol: 'dot',
-    uniqueTokenId: 'dot',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/chainlink/',
-    etherscanLink: 'https://etherscan.io/token/0x514910771af9ca656af840dff83e8264ecf986ca',
-    icon: tokenImages.link,
-    readableName: 'ChainLink',
-    tokenSymbol: 'link',
-    uniqueTokenId: 'link',
-  },
-  {
-    coinmarketcapLink: 'https://coinmarketcap.com/currencies/solana/',
-    etherscanLink: 'https://etherscan.io/token/0x1f54638b7737193ffd86c19ec51907a7c41755d8',
-    icon: tokenImages.sol,
-    readableName: 'Solana',
-    tokenSymbol: 'sol',
-    uniqueTokenId: 'sol',
-  },
-]

package/src/components/TokenData/img/images.d.ts

@@ -1,5 +0,0 @@
-declare module '*.png'
-declare module '*.jpg'
-declare module '*.svg'
-declare module '*.gif'
-declare module '*.webp'

package/src/components/TokenData/img/index.ts

@@ -1,16 +0,0 @@
-export { default as ada } from './ada.png'
-export { default as btc } from './btc.png'
-export { default as busd } from './busd.png'
-export { default as dai } from './dai.png'
-export { default as dogecoin } from './dogecoin.png'
-export { default as dot } from './dot.png'
-export { default as ethereum } from './ethereum.png'
-export { default as frax } from './frax.png'
-export { default as link } from './link.png'
-export { default as sol } from './sol.png'
-export { default as tether } from './tether.png'
-export { default as usdCoin } from './usd-coin.png'
-export { default as weth } from './weth.png'
-export { default as wrappedBtc } from './wrapped-bitcoin.png'
-export { default as xl1 } from './xl1.png'
-export { default as xyo } from './xyo.png'

package/src/components/TokenData/index.ts

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

package/src/components/TokenData/useGetTokenData.tsx

@@ -1,16 +0,0 @@
-import { TokenData } from './TokenData.ts'
-
-export const getTokenData = (symbols: (string | undefined)[]) => {
-  return symbols?.map((symbol) => {
-    const additionalTokenData = TokenData.find(x => x.tokenSymbol.toLowerCase() === symbol?.toLowerCase())
-    const checkedTokenData = additionalTokenData ?? {
-      coinmarketcapLink: '',
-      etherscanLink: '',
-      icon: '',
-      readableName: 'Unknown Token',
-      tokenSymbol: 'unknown',
-      uniqueTokenId: 'unknown',
-    }
-    return checkedTokenData
-  })
-}

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

@@ -1,37 +0,0 @@
-import { Link } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import * as tokenData from '../TokenData/index.ts'
-import { TokenSummary } from './TokenSummary.tsx'
-const StorybookEntry = {
-  argTypes: {},
-  component: TokenSummary,
-  parameters: { docs: { page: null } },
-  title: 'shared/TokenSummary',
-} as Meta<typeof TokenSummary>
-
-const Template: StoryFn<typeof TokenSummary> = args => (
-  <BrowserRouter>
-    <TokenSummary {...args}></TokenSummary>
-  </BrowserRouter>
-)
-
-const WithData = Template.bind({})
-WithData.args = { icon: tokenData.TokenData[0].icon, symbol: 'string' }
-
-const SymbolElement = Template.bind({})
-SymbolElement.args = {
-  icon: tokenData.TokenData[0].icon,
-  symbol: 'string',
-  symbolElement: (
-    <Link underline="hover" href="#">
-      Linked Title
-    </Link>
-  ),
-}
-
-export { SymbolElement, WithData }
-
-export default StorybookEntry

package/src/components/TokenSummary/TokenSummary.tsx

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

package/src/components/TokenSummary/index.ts

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

package/src/components/TypographyEx.tsx

@@ -1,14 +0,0 @@
-import type { TypographyProps } from '@mui/material'
-import { Typography } from '@mui/material'
-import React from 'react'
-
-import { useGradientStyles } from '../hooks/index.ts'
-
-export interface TypographyExProps extends TypographyProps {
-  gradient?: 'text'
-}
-
-export const TypographyEx: React.FC<TypographyExProps> = ({ gradient, ...props }) => {
-  const styles = useGradientStyles()
-  return <Typography style={gradient === 'text' ? styles.heading : undefined} {...props} />
-}