feat: add Blockquote component

components/Blockquote/Blockquote.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
+import { Blockquote, BlockquoteProps, BlockquoteVariants } from './Blockquote';
+
+const BaseBlockquote = (props: BlockquoteProps): JSX.Element => <Blockquote {...props} />;
+
+const BlockquoteForStory = modifyVariantsForStory<BlockquoteVariants, BlockquoteProps>(
+  BaseBlockquote,
+);
+
+const Component: Meta<typeof BlockquoteForStory> = {
+  title: 'Components/Blockquote',
+  component: BlockquoteForStory,
+};
+
+const Template: StoryFn<typeof BlockquoteForStory> = (args) => (
+  <Blockquote {...args}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Blockquote>
+);
+
+export const Basic: StoryFn<typeof BlockquoteForStory> = Template.bind({});
+
+export default Component;

components/Blockquote/Blockquote.tsx

@@ -0,0 +1,10 @@
+import { CSS, styled, VariantProps } from '../../stitches.config';
+import { Text } from '../Text';
+
+export const Blockquote = styled(Text, {
+  borderLeft: '2px solid $textDefault',
+  p: '$2 $3',
+});
+
+export type BlockquoteVariants = VariantProps<typeof Blockquote>;
+export type BlockquoteProps = BlockquoteVariants & { css?: CSS };

components/Blockquote/index.ts

@@ -0,0 +1 @@
+export * from './Blockquote';

index.ts

@@ -18,6 +18,7 @@ export {
 } from './components/AriaTable';
 export { Avatar } from './components/Avatar';
 export { Badge } from './components/Badge';
+export { Blockquote } from './components/Blockquote';
 export { Box } from './components/Box';
 export { Bubble } from './components/Bubble';
 export { Button } from './components/Button';