refactor: Refactor UI structure

packages/ui/src/components/Article/Article.stories.tsx

@@ -1,11 +1,11 @@
-import { PaperArticle } from './PaperArticle';
+import { Article } from './Article';
 
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-const meta: Meta<typeof PaperArticle> = {
-  title: 'Components/Paper/PaperArticle',
-  component: PaperArticle,
+const meta: Meta<typeof Article> = {
+  title: 'components/Article',
+  component: Article,
   tags: ['autodocs'],
   argTypes: {
     onPress: { action: 'pressed' },
@@ -16,7 +16,7 @@ export default meta;
 /**
  *
  */
-type Story = StoryObj<typeof PaperArticle>;
+type Story = StoryObj<typeof Article>;
 
 export const Default: Story = {
   args: {

packages/ui/src/components/Article/Article.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { PaperArticle } from './PaperArticle';
-import { render, screen } from '../../../test-utils';
+import { Article } from './Article';
+import { render, screen } from '../../test-utils';
 
-describe('components/paper/PaperArticle', () => {
+describe('components/paper/Article', () => {
   const props = {
     headline: 'Breaking News',
     subHeadline: 'Local cat saves city',
@@ -11,7 +11,7 @@ describe('components/paper/PaperArticle', () => {
   };
 
   it('renders all parts of the article', () => {
-    render(<PaperArticle {...props}>Article body content</PaperArticle>);
+    render(<Article {...props}>Article body content</Article>);
     
     expect(screen.getByText('Breaking News')).toBeInTheDocument();
     expect(screen.getByText('Local cat saves city')).toBeInTheDocument();
@@ -20,11 +20,11 @@ describe('components/paper/PaperArticle', () => {
   });
 
   it('renders separators only when appropriate', () => {
-    const { rerender } = render(<PaperArticle headline="Title">Body</PaperArticle>);
+    const { rerender } = render(<Article headline="Title">Body</Article>);
     // Should have 1 separator (between title and body)
     expect(screen.getAllByRole('separator')).toHaveLength(1);
 
-    rerender(<PaperArticle headline="Title" subHeadline="Sub">Body</PaperArticle>);
+    rerender(<Article headline="Title" subHeadline="Sub">Body</Article>);
     // Should have 2 separators (Title-Sub and Sub-Body)
     expect(screen.getAllByRole('separator')).toHaveLength(2);
   });

packages/ui/src/components/Article/Article.tsx

@@ -1,17 +1,17 @@
 import React, { memo } from 'react';
 
-import { Container } from '../../generic/Container/Container';
-import { Header } from '../../generic/Header/Header';
-import { Text } from '../../generic/Text/Text';
-import { VStack } from '../../generic/VStack/VStack';
-import { PaperSeparator } from '../PaperSeparator/PaperSeparator';
+import { Container } from '../Container/Container';
+import { Header } from '../Header/Header';
+import { Separator } from '../Separator/Separator';
+import { Text } from '../Text/Text';
+import { VStack } from '../VStack/VStack';
 
-import type { ContainerProps } from '../../generic/Container/Container';
+import type { ContainerProps } from '../Container/Container';
 
 /**
- * Props for the newspaper-style PaperArticle component.
+ * Props for the Article component.
  */
-export interface PaperArticleProps {
+export interface ArticleProps {
   /** The main article headline */
   headline: string;
   /** Optional sub-headline displayed between separators */
@@ -25,7 +25,7 @@ export interface PaperArticleProps {
 }
 
 /**
- * A newspaper-style article component with a structured layout.
+ * A article component with a structured layout.
  * 
  * Features:
  * - Centered medium headline (headline-m)
@@ -35,13 +35,13 @@ export interface PaperArticleProps {
  * - Optional bottom gray italic label (label-s)
  * - Interactive wrapper via Container
  */
-export const PaperArticle = memo(function PaperArticle({
+export const Article = memo(function Article({
   headline,
   subHeadline,
   additionalText,
   onPress,
   children,
-}: PaperArticleProps) {
+}: ArticleProps) {
   return (
     <Container padding={4} onPress={onPress}>
       <VStack align="stretch" gap={4}>
@@ -52,13 +52,13 @@ export const PaperArticle = memo(function PaperArticle({
           <VStack align="center" gap={2}>
             {subHeadline ? (
               <>
-                  <PaperSeparator className="w-3/4" type="single" />
+                  <Separator className="w-3/4" type="single" />
                   <Text italic className="text-center" size="m" type="label">
                     {subHeadline}
                   </Text>
-                  <PaperSeparator className="w-3/4" type="single" />
+                  <Separator className="w-3/4" type="single" />
               </>
-            ) : <PaperSeparator className="w-3/4" type="single" />}
+            ) : <Separator className="w-3/4" type="single" />}
           </VStack>
 
         <Text size="m" type="body">

packages/ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -6,7 +6,7 @@ import { Link } from '../Link/Link';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Breadcrumbs> = {
-  title: 'components/generic/Breadcrumbs',
+  title: 'components/Breadcrumbs',
   component: Breadcrumbs,
   tags: ['autodocs'],
 };

packages/ui/src/components/Button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PaperButton } from './PaperButton';
+import { Button } from './Button';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -15,9 +15,9 @@ import type { Meta, StoryObj } from '@storybook/react';
  * - Accessible interaction patterns via react-aria
  * - Responsive hover and focus states
  */
-const meta: Meta<typeof PaperButton> = {
-  title: 'components/paper/PaperButton',
-  component: PaperButton,
+const meta: Meta<typeof Button> = {
+  title: 'components/Button',
+  component: Button,
   parameters: {
     layout: 'centered',
     docs: {
@@ -111,18 +111,18 @@ export const LongText: Story = {
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-col gap-4 items-start">
-      <PaperButton variant="default" onPress={() => console.log('Default')}>
+      <Button variant="default" onPress={() => console.log('Default')}>
         Default Style
-      </PaperButton>
-      <PaperButton variant="primary" onPress={() => console.log('Primary')}>
+      </Button>
+      <Button variant="primary" onPress={() => console.log('Primary')}>
         Primary Style  
-      </PaperButton>
-      <PaperButton variant="secondary" onPress={() => console.log('Secondary')}>
+      </Button>
+      <Button variant="secondary" onPress={() => console.log('Secondary')}>
         Secondary Style
-      </PaperButton>
-      <PaperButton isDisabled>
+      </Button>
+      <Button isDisabled>
         Disabled State
-      </PaperButton>
+      </Button>
     </div>
   ),
 };

packages/ui/src/components/Button/Button.test.tsx

@@ -1,27 +1,27 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { PaperButton } from './PaperButton';
-import { render, screen } from '../../../test-utils';
+import { Button } from './Button';
+import { render, screen } from '../../test-utils';
 
 /**
- * Test suite for the newspaper-style PaperButton component
+ * Test suite for the newspaper-style Button component
  */
-describe('components/paper/PaperButton/PaperButton', () => {
+describe('components/paper/Button/Button', () => {
   const defaultProps = {
-    children: 'Test PaperButton',
+    children: 'Test Button',
   };
 
   it('renders correctly with default props', () => {
-    render(<PaperButton {...defaultProps} />);
+    render(<Button {...defaultProps} />);
     
-    const button = screen.getByRole('button', { name: 'Test PaperButton' });
+    const button = screen.getByRole('button', { name: 'Test Button' });
     expect(button).toBeInTheDocument();
-    expect(button).toHaveTextContent('Test PaperButton');
+    expect(button).toHaveTextContent('Test Button');
   });
 
   it('applies correct styling classes', () => {
-    render(<PaperButton {...defaultProps} />);
+    render(<Button {...defaultProps} />);
     
     const button = screen.getByRole('button');
     
@@ -37,7 +37,7 @@ describe('components/paper/PaperButton/PaperButton', () => {
     const user = userEvent.setup();
     const handlePress = jest.fn();
     
-    render(<PaperButton onPress={handlePress}>{defaultProps.children}</PaperButton>);
+    render(<Button onPress={handlePress}>{defaultProps.children}</Button>);
     
     const button = screen.getByRole('button');
     await user.click(button);
@@ -47,19 +47,19 @@ describe('components/paper/PaperButton/PaperButton', () => {
 
   it('supports different variants', () => {
     const { rerender } = render(
-      <PaperButton variant="primary">{defaultProps.children}</PaperButton>
+      <Button variant="primary">{defaultProps.children}</Button>
     );
     
     let button = screen.getByRole('button');
     expect(button).toHaveClass('bg-primary');
     
-    rerender(<PaperButton variant="secondary">{defaultProps.children}</PaperButton>);
+    rerender(<Button variant="secondary">{defaultProps.children}</Button>);
     button = screen.getByRole('button');
     expect(button).toHaveClass('bg-secondary');
   });
 
   it('handles disabled state correctly', () => {
-    render(<PaperButton isDisabled>{defaultProps.children}</PaperButton>);
+    render(<Button isDisabled>{defaultProps.children}</Button>);
     
     const button = screen.getByRole('button');
     expect(button).toBeDisabled();
@@ -72,9 +72,9 @@ describe('components/paper/PaperButton/PaperButton', () => {
     const handlePress = jest.fn();
     
     render(
-      <PaperButton isDisabled onPress={handlePress}>
+      <Button isDisabled onPress={handlePress}>
         {defaultProps.children}
-      </PaperButton>
+      </Button>
     );
     
     const button = screen.getByRole('button');
@@ -86,7 +86,7 @@ describe('components/paper/PaperButton/PaperButton', () => {
   it('supports custom className prop', () => {
     const customClass = 'custom-button-class';
     
-    render(<PaperButton className={customClass}>{defaultProps.children}</PaperButton>);
+    render(<Button className={customClass}>{defaultProps.children}</Button>);
     
     const button = screen.getByRole('button');
     expect(button).toHaveClass(customClass);
@@ -95,27 +95,27 @@ describe('components/paper/PaperButton/PaperButton', () => {
   it('supports data-testid prop', () => {
     const testId = 'my-test-button';
     
-    render(<PaperButton data-testid={testId}>{defaultProps.children}</PaperButton>);
+    render(<Button data-testid={testId}>{defaultProps.children}</Button>);
     
     const button = screen.getByTestId(testId);
     expect(button).toBeInTheDocument();
-    expect(button).toHaveTextContent('Test PaperButton');
+    expect(button).toHaveTextContent('Test Button');
   });
 
   it('only accepts string children', () => {
     // This test verifies TypeScript constraint - should compile without error
-    render(<PaperButton>Simple string</PaperButton>);
+    render(<Button>Simple string</Button>);
     expect(screen.getByText('Simple string')).toBeInTheDocument();
   });
 
   it('maintains accessibility attributes', () => {
     render(
-      <PaperButton 
+      <Button 
         aria-describedby="button-description"
         aria-label="Custom accessibility label"
       >
         {defaultProps.children}
-      </PaperButton>
+      </Button>
     );
     
     const button = screen.getByRole('button');
@@ -127,7 +127,7 @@ describe('components/paper/PaperButton/PaperButton', () => {
     const user = userEvent.setup();
     const handlePress = jest.fn();
     
-    render(<PaperButton onPress={handlePress}>{defaultProps.children}</PaperButton>);
+    render(<Button onPress={handlePress}>{defaultProps.children}</Button>);
     
     const button = screen.getByRole('button');
     button.focus();
@@ -142,7 +142,7 @@ describe('components/paper/PaperButton/PaperButton', () => {
   });
 
   it('renders string content correctly', () => {
-    render(<PaperButton>Simple text content</PaperButton>);
+    render(<Button>Simple text content</Button>);
     expect(screen.getByText('Simple text content')).toBeInTheDocument();
   });
 });

packages/ui/src/components/Button/Button.tsx

@@ -5,9 +5,9 @@ import type { ClassNameProps, TestIdProps } from '@ermnvldmr/stl';
 import type { AriaButtonProps } from 'react-aria';
 
 /**
- * Props for the newspaper-style PaperButton component.
+ * Props for the Button component.
  */
-export interface PaperButtonProps extends AriaButtonProps, ClassNameProps, TestIdProps {
+export interface ButtonProps extends AriaButtonProps, ClassNameProps, TestIdProps {
   /** The button text content */
   children: string;
   /** Visual style variant */
@@ -15,7 +15,7 @@ export interface PaperButtonProps extends AriaButtonProps, ClassNameProps, TestI
 }
 
 /**
- * A newspaper-style button component with italic Lato font and underlined text.
+ * A button component with italic Lato font and underlined text.
  * 
  * Features:
  * - Rectangular design with subtle background
@@ -26,18 +26,18 @@ export interface PaperButtonProps extends AriaButtonProps, ClassNameProps, TestI
  * 
  * @example
  * ```tsx
- * <PaperButton onPress={() => console.log('Clicked!')}>
+ * <Button onPress={() => console.log('Clicked!')}>
  *   Explore all the articles
- * </PaperButton>
+ * </Button>
  * ```
  */
-export const PaperButton = memo(function PaperButton({ 
+export const Button = memo(function Button({ 
   children,
   variant = 'default',
   className = '',
   'data-testid': testId,
   ...buttonProps
-}: PaperButtonProps) {
+}: ButtonProps) {
   const ref = React.useRef<HTMLButtonElement>(null);
   const { buttonProps: ariaButtonProps } = useButton(buttonProps, ref);
 

packages/ui/src/components/Container/Container.stories.tsx

@@ -8,7 +8,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 
 const meta: Meta<typeof Container> = {
-  title: 'components/generic/Container',
+  title: 'components/Container',
   component: Container,
   tags: ['autodocs'],
   argTypes: {

packages/ui/src/components/Header/Header.stories.tsx

@@ -7,7 +7,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 
 const meta: Meta<typeof Header> = {
-  title: 'Generic/Header',
+  title: 'components/Header',
   component: Header,
   tags: ['autodocs'],
   argTypes: {
@@ -56,4 +56,4 @@ export const Overrides: Story = {
       <Header italic underline level={6}>H6 with Modifiers</Header>
     </VStack>
   ),
-};
+};

packages/ui/src/components/Link/Link.stories.tsx

@@ -4,7 +4,7 @@ import { Link } from './Link';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Link> = {
-  title: 'components/generic/Link',
+  title: 'components/Link',
   component: Link,
   tags: ['autodocs'],
   argTypes: {

packages/ui/src/components/Markdown/Markdown.stories.tsx

@@ -0,0 +1,254 @@
+import { Markdown } from './Markdown';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Metadata for the Markdown component stories.
+ */
+const meta: Meta<typeof Markdown> = {
+  title: 'components/Markdown',
+  component: Markdown,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+/**
+ * Type definition for Markdown component stories.
+ */
+type Story = StoryObj<typeof Markdown>;
+
+/**
+ * Default story showcasing various HTML elements to verify typography.
+ */
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <p>
+          This is a <strong>Markdown</strong> component that uses Tailwind CSS Typography (prose) 
+          to render content with consistent styling.
+        </p>
+        <p>
+          It is designed to be used with rendered HTML from markdown processors, 
+          but works with any HTML content that needs standard document styling.
+        </p>
+      </>
+    ),
+  },
+};
+
+/**
+ * Showcasing all heading levels.
+ */
+export const Typography: Story = {
+  args: {
+    children: (
+      <>
+        <h1>Heading Level 1</h1>
+        <p>Paragraph text following an H1.</p>
+        <h2>Heading Level 2</h2>
+        <p>Paragraph text following an H2.</p>
+        <h3>Heading Level 3</h3>
+        <p>Paragraph text following an H3.</p>
+        <h4>Heading Level 4</h4>
+        <p>Paragraph text following an H4.</p>
+        <h5>Heading Level 5</h5>
+        <p>Paragraph text following an H5.</p>
+        <h6>Heading Level 6</h6>
+        <p>Paragraph text following an H6.</p>
+      </>
+    ),
+  },
+};
+
+/**
+ * Showcasing ordered and unordered lists.
+ */
+export const Lists: Story = {
+  args: {
+    children: (
+      <>
+        <h3>Unordered List</h3>
+        <ul>
+          <li>First item</li>
+          <li>Second item
+            <ul>
+              <li>Nested item A</li>
+              <li>Nested item B</li>
+            </ul>
+          </li>
+          <li>Third item</li>
+        </ul>
+
+        <h3>Ordered List</h3>
+        <ol>
+          <li>Step one</li>
+          <li>Step two
+            <ol>
+              <li>Sub-step 2.1</li>
+              <li>Sub-step 2.2</li>
+            </ol>
+          </li>
+          <li>Step three</li>
+        </ol>
+      </>
+    ),
+  },
+};
+
+/**
+ * Showcasing blockquotes.
+ */
+export const Quotes: Story = {
+  args: {
+    children: (
+      <>
+        <p>Before the quote.</p>
+        <blockquote>
+          &quot;Design is not just what it looks like and feels like. Design is how it works.&quot;
+          <footer>— Steve Jobs</footer>
+        </blockquote>
+        <p>After the quote.</p>
+      </>
+    ),
+  },
+};
+
+/**
+ * Showcasing code and pre blocks.
+ */
+export const Code: Story = {
+  args: {
+    children: (
+      <>
+        <p>
+          You can use <code>inline code</code> for small snippets.
+        </p>
+        <pre>
+          <code>{`function hello() {
+  console.log("Hello, world!");
+}`}</code>
+        </pre>
+      </>
+    ),
+  },
+};
+
+/**
+ * Showcasing tables.
+ */
+export const Tables: Story = {
+  args: {
+    children: (
+      <table>
+        <thead>
+          <tr>
+            <th>Feature</th>
+            <th>Description</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Typography</td>
+            <td>Garamond and Lato fonts</td>
+            <td>✅ Done</td>
+          </tr>
+          <tr>
+            <td>Dark Mode</td>
+            <td>Automatic inversion</td>
+            <td>✅ Done</td>
+          </tr>
+          <tr>
+            <td>Responsive</td>
+            <td>Fluid layouts</td>
+            <td>✅ Done</td>
+          </tr>
+        </tbody>
+      </table>
+    ),
+  },
+};
+
+/**
+ * The "Kitchen Sink" containing everything.
+ */
+export const KitchenSink: Story = {
+  args: {
+    children: (
+      <>
+        <h1>The Art of Markdown Rendering</h1>
+        <p className="lead">
+          A lead paragraph that stands out and sets the tone for the rest of the document.
+        </p>
+        <p>
+          Markdown is a lightweight markup language with plain-text-formatting syntax. 
+          Its design allows it to be converted to many output formats, but the name 
+          originally referred to the tool for converting it to HTML.
+        </p>
+
+        <h2>Key Features</h2>
+        <ul>
+          <li><strong>Easy to read</strong> - The source text looks like the final output.</li>
+          <li><strong>Easy to write</strong> - Minimal syntax overhead.</li>
+          <li><strong>Versatile</strong> - Supports many elements like <em>italics</em>, <del>strikethrough</del>, and <code>code</code>.</li>
+        </ul>
+
+        <h3>Example Code Block</h3>
+        <pre>
+          <code>{`import { Markdown } from '@ermnvldmr/ui';
+
+export const MyPage = () => (
+  <Markdown>
+    <h1>Welcome</h1>
+    <p>This is styled automatically.</p>
+  </Markdown>
+);`}</code>
+        </pre>
+
+        <blockquote>
+          &quot;Simplicity is the ultimate sophistication.&quot;
+          <br />
+          — Leonardo da Vinci
+        </blockquote>
+
+        <hr />
+
+        <h2>Data Representation</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Language</th>
+              <th>Difficulty</th>
+              <th>Usage</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>TypeScript</td>
+              <td>Moderate</td>
+              <td>Frontend/Backend</td>
+            </tr>
+            <tr>
+              <td>Rust</td>
+              <td>High</td>
+              <td>Systems</td>
+            </tr>
+            <tr>
+              <td>Python</td>
+              <td>Low</td>
+              <td>Data Science</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h3>Media Elements</h3>
+        <p>Images should be rounded and have a nice shadow.</p>
+        <img alt="Coding" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80" />
+
+        <p>Conclusion: We&apos;ve built a robust system for rendering content.</p>
+      </>
+    ),
+  },
+};

packages/ui/src/components/Markdown/Markdown.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@ermnvldmr/stl';
+import React from 'react';
+
+/**
+ * Props for the Markdown component.
+ */
+/**
+ * Props for the Markdown component.
+ */
+export interface MarkdownProps {
+  /** The content to be rendered, typically HTML from a markdown processor. */
+  children: React.ReactNode;
+  /** Optional additional class names. */
+  className?: string;
+}
+
+/**
+ * Markdown component provides a styled container for rendered markdown content.
+ * It uses the Tailwind CSS Typography plugin (prose) with custom project styles.
+ *
+ * @param props - The component props.
+ * @param props.children
+ * @param props.className
+ * @returns A React element.
+ * @example
+ * ```tsx
+ * <Markdown>
+ *   <h1>Title</h1>
+ *   <p>Content goes here.</p>
+ * </Markdown>
+ * ```
+ */
+export const Markdown: React.FC<MarkdownProps> = ({ children, className }) => {
+  return (
+    <div
+      className={cn(
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};

packages/ui/src/components/Separator/Separator.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PaperSeparator } from './PaperSeparator';
+import { Separator } from './Separator';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -15,9 +15,9 @@ import type { Meta, StoryObj } from '@storybook/react';
  * - 2px stroke width following print design standards
  * - Semantic div elements with proper ARIA separator role for accessibility
  */
-const meta: Meta<typeof PaperSeparator> = {
-  title: 'components/paper/PaperSeparator',
-  component: PaperSeparator,
+const meta: Meta<typeof Separator> = {
+  title: 'components/Separator',
+  component: Separator,
   parameters: {
     layout: 'centered',
     docs: {
@@ -56,7 +56,7 @@ const meta: Meta<typeof PaperSeparator> = {
 
 export default meta;
 /**
- * Story type for PaperSeparator component stories.
+ * Story type for Separator component stories.
  */
 type Story = StoryObj<typeof meta>;
 
@@ -201,7 +201,7 @@ export const VerticalDouble: Story = {
 };
 
 /**
- * PaperSeparator without thinned ends showing clean, sharp line edges.
+ * Separator without thinned ends showing clean, sharp line edges.
  * Compare with default to see the gradient fade difference.
  */
 export const NonThinned: Story = {
@@ -232,15 +232,15 @@ export const AllColors: Story = {
     <div className="space-y-8 w-96">
       <div>
         <h3 className="text-sm font-medium mb-2">Black</h3>
-        <PaperSeparator color="black" />
+        <Separator color="black" />
       </div>
       <div>
         <h3 className="text-sm font-medium mb-2">Outline (Default for Double)</h3>
-        <PaperSeparator color="outline" />
+        <Separator color="outline" />
       </div>
       <div>
         <h3 className="text-sm font-medium mb-2">Outline Light (Default for Single)</h3>
-        <PaperSeparator color="outline-light" />
+        <Separator color="outline-light" />
       </div>
     </div>
   ),
@@ -255,11 +255,11 @@ export const AllTypes: Story = {
     <div className="space-y-8 w-96">
       <div>
         <h3 className="text-sm font-medium mb-2">Single (Default: Outline Light)</h3>
-        <PaperSeparator type="single" />
+        <Separator type="single" />
       </div>
       <div>
         <h3 className="text-sm font-medium mb-2">Double (Default: Outline)</h3>
-        <PaperSeparator type="double" />
+        <Separator type="double" />
       </div>
     </div>
   ),
@@ -274,11 +274,11 @@ export const ThinnedComparison: Story = {
     <div className="space-y-8 w-96">
       <div>
         <h3 className="text-sm font-medium mb-2">With Thinned Ends (Default)</h3>
-        <PaperSeparator thinned />
+        <Separator thinned />
       </div>
       <div>
         <h3 className="text-sm font-medium mb-2">Without Thinned Ends</h3>
-        <PaperSeparator thinned={false} />
+        <Separator thinned={false} />
       </div>
     </div>
   ),
@@ -296,7 +296,7 @@ export const VerticalShowcase: Story = {
           Short
         </div>
         <div className="px-2">
-          <PaperSeparator direction="vertical" />
+          <Separator direction="vertical" />
         </div>
         <div className="flex items-center justify-center w-20 text-xs text-muted-foreground">
           Content
@@ -308,7 +308,7 @@ export const VerticalShowcase: Story = {
           Medium
         </div>
         <div className="px-2">
-          <PaperSeparator direction="vertical" type="double" />
+          <Separator direction="vertical" type="double" />
         </div>
         <div className="flex items-center justify-center w-20 text-xs text-muted-foreground">
           Content
@@ -320,7 +320,7 @@ export const VerticalShowcase: Story = {
           Tall
         </div>
         <div className="px-2">
-          <PaperSeparator color="black" direction="vertical" />
+          <Separator color="black" direction="vertical" />
         </div>
         <div className="flex items-center justify-center w-20 text-xs text-muted-foreground">
           Content

packages/ui/src/components/Separator/Separator.tsx

@@ -1,15 +1,15 @@
 import { cn } from '@ermnvldmr/stl';
 import React, { memo } from 'react';
 
-import { VStack } from '../../generic/VStack/VStack';
+import { VStack } from '../VStack/VStack';
 
 import type { ClassNameProps, TestIdProps } from '@ermnvldmr/stl';
 
 
 /**
- * Props for the newspaper-style PaperSeparator component.
+ * Props for the Separator component.
  */
-export interface PaperSeparatorProps extends ClassNameProps, TestIdProps {
+export interface SeparatorProps extends ClassNameProps, TestIdProps {
   /** Type of separator line styling */
   type?: 'single' | 'double';
   /** Color variant following newspaper design patterns */
@@ -21,7 +21,7 @@ export interface PaperSeparatorProps extends ClassNameProps, TestIdProps {
 }
 
 /**
- * A newspaper-style separator component for dividing content sections.
+ * A separator component for dividing content sections.
  * 
  * Features:
  * - Single or double line variants inspired by newspaper layout traditions
@@ -37,26 +37,26 @@ export interface PaperSeparatorProps extends ClassNameProps, TestIdProps {
  * @example
  * ```tsx
  * // Basic horizontal separator
- * <PaperSeparator />
+ * <Separator />
  * 
  * // Double-line separator with black color
- * <PaperSeparator type="double" color="black" />
+ * <Separator type="double" color="black" />
  * 
  * // Vertical separator without thinned ends
- * <PaperSeparator direction="vertical" thinned={false} />
+ * <Separator direction="vertical" thinned={false} />
  * 
  * // Light separator for subtle content division
- * <PaperSeparator color="outline-light" />
+ * <Separator color="outline-light" />
  * ```
  */
-export const PaperSeparator = memo(function PaperSeparator({ 
+export const Separator = memo(function Separator({ 
   type = 'single',
   color,
   direction = 'horizontal',
   thinned = true,
   className,
   'data-testid': testId,
-}: PaperSeparatorProps) {
+}: SeparatorProps) {
   // Default color based on type as specified
   const defaultColor = type === 'single' ? 'outline-light' : 'outline';
   const finalColor = color ?? defaultColor;

packages/ui/src/components/Stack/Stack.stories.tsx

@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react';
  * through semantic prop names that map to Tailwind CSS utility classes.
  */
 const meta: Meta<typeof Stack> = {
-  title: 'components/generic/Stack',
+  title: 'components/Stack',
   component: Stack,
   parameters: {
     layout: 'centered',

packages/ui/src/components/Text/Text.stories.tsx

@@ -7,7 +7,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 
 const meta: Meta<typeof Text> = {
-  title: 'components/generic/Text',
+  title: 'components/Text',
   component: Text,
   tags: ['autodocs'],
   argTypes: {

packages/ui/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './Text/Text';
 export * from './VStack/VStack';
 export * from './Link/Link';
 export * from './Breadcrumbs/Breadcrumbs';
+export * from './Markdown/Markdown';
 
 export type { StackProps } from './Stack/Stack';
 export type { ContainerProps, ContainerBackground, ContainerMaxWidth, ContainerRounded } from './Container/Container';

packages/ui/src/components/paper/index.ts

@@ -1,3 +0,0 @@
-export * from './PaperButton/PaperButton';
-export * from './PaperSeparator/PaperSeparator';
-export * from './PaperArticle/PaperArticle';