How to use the @pluralsight/ps-design-system-text/react.js.Heading.sizes function in @pluralsight/ps-design-system-text

const HeadingComponent = props => (
  <div>
    {props.children}
    <style>{`
      /* TODO: style with jsx without global tag */
      .heading :global(h1),
      .heading :global(h2),
      .heading :global(h3),
      .heading :global(h4) {
        color: ${core.colors.gray06};
      }
      .heading.${Heading.sizes.large} :global(h1),
      .heading.${Heading.sizes.large} :global(h2),
      .heading.${Heading.sizes.large} :global(h3),
      .heading.${Heading.sizes.large} :global(h4) {
        margin: 56px 0 0 0;
      }
      .heading.${Heading.sizes.xLarge} :global(h1),
      .heading.${Heading.sizes.xLarge} :global(h2),
      .heading.${Heading.sizes.xLarge} :global(h3),
      .heading.${Heading.sizes.xLarge} :global(h4) {
        margin: 56px 0;
      }
    `}</style>
  </div>
)

const HeadingComponent = props => (
  <div>
    {props.children}
    <style>{`
      /* TODO: style with jsx without global tag */
      .heading :global(h1),
      .heading :global(h2),
      .heading :global(h3),
      .heading :global(h4) {
        color: ${core.colors.gray06};
      }
      .heading.${Heading.sizes.large} :global(h1),
      .heading.${Heading.sizes.large} :global(h2),
      .heading.${Heading.sizes.large} :global(h3),
      .heading.${Heading.sizes.large} :global(h4) {
        margin: 56px 0 0 0;
      }
      .heading.${Heading.sizes.xLarge} :global(h1),
      .heading.${Heading.sizes.xLarge} :global(h2),
      .heading.${Heading.sizes.xLarge} :global(h3),
      .heading.${Heading.sizes.xLarge} :global(h4) {
        margin: 56px 0;
      }
    `}</style>
  </div>
)

const styleSize = ({ size }) =>
  ({
    [Heading.sizes.large]: {
      margin: '56px 0 0 0'
    },
    [Heading.sizes.xLarge]: {
      margin: '56px 0'
    }
  }[size])

.heading.${Heading.sizes.xLarge} :global(h1),
      .heading.${Heading.sizes.xLarge} :global(h2),
      .heading.${Heading.sizes.xLarge} :global(h3),
      .heading.${Heading.sizes.xLarge} :global(h4) {
        margin: 56px 0;
      }
    `}
  
)

HeadingComponent.propTypes = {
  children: PropTypes.node,
  size: PropTypes.string
}
HeadingComponent.defaultProps = {
  size: Heading.sizes.large
}
HeadingComponent.sizes = Heading.sizes
export default HeadingComponent

const DataWell = React.forwardRef((props, ref) => {
  const themeName = useTheme()

  return (
    <div>
      
        <div>{props.label}</div>
      

      <div>{props.children}</div>
      <div>{props.subLabel}</div>
    </div>
  )
})

const styleSize = ({ size }) =>
  ({
    [Heading.sizes.large]: {
      margin: '56px 0 0 0'
    },
    [Heading.sizes.xLarge]: {
      margin: '56px 0'
    }
  }[size])