Allow custom wrapper components in Phrase, Text

[kumar303]

This is currently how you'd work with Phrase and Text in a layout:

import { Phrase, SkeletonGroup, Text } from 'skeleton-kit';

<div>
  <SkeletonGroup showSkeletons={!isLoaded}>
    <Heading><Phrase>{data.title}</Phrase></Heading>
    <p><Text>{data.description}</Text></p>
  </SkeletonGroup>
</div>

Maybe it would be easier to support a new as prop for this:

import { Phrase, SkeletonGroup, Text } from 'skeleton-kit';

<div>
  <SkeletonGroup showSkeletons={!isLoaded}>
    <Phrase as={Heading}>{data.title}</Phrase>
    <Text as="p">{data.description}</Text>
  </SkeletonGroup>
</div>

[kumar303]

Non-goal: we don't need to go overboard and support a custom wrapper component with custom props.