typography: add Meta

src/typography/Meta/Meta.story.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import { Meta } from './Meta';
+import { Props } from './Meta.types';
+
+export default {
+  title: 'typography/Meta',
+  component: Meta,
+  argTypes: {
+    contentEditable: { control: { disable: true } },
+  },
+};
+
+const Template: Story<Props> = (args) => {
+  return (
+    <>
+      <Meta {...args}>Meta</Meta>
+    </>
+  );
+};
+export const Controls = Template.bind({});
+Controls.storyName = 'Meta';

src/typography/Meta/Meta.style.ts

@@ -0,0 +1,15 @@
+/* stylelint-disable */
+
+import styled from 'styled-components';
+
+import { Text } from '../Text/Text';
+
+export const Meta = styled(Text)`
+  line-height: 1.5;
+  font-weight: 400;
+  letter-spacing: 0.1px;
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizelegibility;
+`;

src/typography/Meta/Meta.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { Props } from './Meta.types';
+import { Meta as Styled } from './Meta.style';
+
+import { withIris } from '../../utils';
+
+export const Meta = withIris<
+  HTMLParagraphElement | HTMLSpanElement | HTMLLabelElement,
+  Props
+>(MetaComponent);
+
+function MetaComponent({
+  element = 'span',
+  forwardRef,
+  format = 'basic',
+  ...props
+}: Props) {
+  return (
+    <Styled
+      element={element}
+      format={format}
+      ref={forwardRef}
+      size={100}
+      {...props}
+    />
+  );
+}

src/typography/Meta/Meta.types.ts

@@ -0,0 +1,18 @@
+import { IrisProps } from '../../utils';
+import { Statuses } from '../../themes';
+
+export type Props = IrisProps<
+  {
+    contentEditable?: never;
+    /**
+     * [default = 'span']
+     */
+    element?: 'p' | 'span' | 'label';
+    /**
+     * [default = 'basic']
+     */
+    format?: 'basic' | 'soft' | 'alternative';
+    status?: Statuses;
+  },
+  HTMLParagraphElement
+>;