How to use the @tds/shared-typography.sup function in @tds/shared-typography

const paragraphSize = ({ size }) => typography[size]
const paragraphBold = ({ bold, size }) => (bold ? typography.boldFont : typography[`${size}Font`])
const paragraphAlign = ({ align }) => ({
  textAlign: align,
})

export const StyledParagraph = styled.p(
  paragraphColor,
  typography.wordBreak,
  spacing.noSpacing,
  paragraphInheritColor,
  paragraphSize,
  paragraphBold,
  paragraphAlign,
  { sup: typography.sup }
)

/**
 * Block text as an HTML `<p>` element.
 *
 * @version ./package.json
 */
const Paragraph = ({ children, ...rest }, context) =&gt; (
  
    {children}
  
)

Paragraph.propTypes = {
  /**
   * Embolden paragraph text without conveying any special importance or relevance.</p>

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

import * as typography from '@tds/shared-typography'
import { safeRest } from '@tds/util-helpers'

const textColor = ({ invert }) => (invert ? typography.invertedColor : typography.color)
const textInheritColor = ({ inheritColor }) => (inheritColor ? { color: 'inherit' } : undefined)
const textSize = ({ size }) => typography[size]
const textBold = ({ bold, size }) => (bold ? typography.boldFont : typography[`${size}Font`])
const textBlock = ({ block }) => (block ? typography.blockText : undefined)

export const StyledText = styled.span(textColor, textInheritColor, textSize, textBold, textBlock, {
  sup: typography.sup,
})

/**
 * Inline text usually as an HTML `<span>` element.
 *
 * @version ./package.json
 */
const Text = ({ children, ...rest }, context) =&gt; (
  
    {children}
  
)

Text.propTypes = {
  /**
   * If true, renders a block level element.</span>