3 files changed, 33 insertions, 15 deletions
diff --git a/src/components/molecules/layout/columns.stories.tsx b/src/components/molecules/layout/columns.stories.tsx
index 4745dbf..43d0629 100644
--- a/src/components/molecules/layout/columns.stories.tsx
+++ b/src/components/molecules/layout/columns.stories.tsx
@@ -1,6 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Column } from '../../atoms';
-import { Columns } from './columns';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Column, Columns } from './columns';
 
 export default {
   title: 'Molecules/Layout/Columns',
@@ -66,7 +65,7 @@ const column1 =
   'Non praesentium voluptas quisquam ex est. Distinctio accusamus facilis libero in aut. Et veritatis quo impedit fugit amet sit accusantium. Ut est rerum asperiores sint libero eveniet. Molestias placeat recusandae suscipit eligendi sunt hic.';
 
 const column2 =
-  'Occaecati consectetur ad similique itaque rem doloremque commodi voluptate porro. Nam quo voluptas commodi qui rerum qui. Explicabo quis adipisci rerum. Culpa alias laboriosam temporibus iusto harum at placeat.';
+  'Quaerat eum dignissimos tempore ab enim. Iusto inventore nemo. Veritatis voluptas quod maxime earum soluta illo atque vel. Nam et corrupti. Dolorem qui cum dolorem. Aut ut nobis. Mollitia qui voluptas rerum et quibusdam.';
 
 const column3 =
   'Libero aut ab neque voluptatem commodi. Quam quia voluptatem iusto dolorum. Enim ipsa totam corrupti qui cum quidem ea. Eos sed aliquam porro consequatur officia sed.';
diff --git a/src/components/molecules/layout/columns.test.tsx b/src/components/molecules/layout/columns.test.tsx
index d63e477..2b016e7 100644
--- a/src/components/molecules/layout/columns.test.tsx
+++ b/src/components/molecules/layout/columns.test.tsx
@@ -1,7 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Column } from '../../atoms';
-import { Columns } from './columns';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { Column, Columns } from './columns';
 
 const column1 =
   'Non praesentium voluptas quisquam ex est. Distinctio accusamus facilis libero in aut. Et veritatis quo impedit fugit amet sit accusantium. Ut est rerum asperiores sint libero eveniet. Molestias placeat recusandae suscipit eligendi sunt hic.';
@@ -26,10 +25,10 @@ describe('Columns', () => {
       </Columns>
     );
 
-    expect(screen.getByText(column1)).toBeInTheDocument();
-    expect(screen.getByText(column2)).toBeInTheDocument();
-    expect(screen.getByText(column3)).toBeInTheDocument();
-    expect(screen.getByText(column4)).toBeInTheDocument();
+    expect(rtlScreen.getByText(column1)).toBeInTheDocument();
+    expect(rtlScreen.getByText(column2)).toBeInTheDocument();
+    expect(rtlScreen.getByText(column3)).toBeInTheDocument();
+    expect(rtlScreen.getByText(column4)).toBeInTheDocument();
   });
 
   it('renders the right number of columns', () => {
@@ -42,7 +41,7 @@ describe('Columns', () => {
       </Columns>
     );
 
-    const container = screen.getByText(column1).parentElement;
+    const container = rtlScreen.getByText(column1).parentElement;
 
     expect(container).toHaveClass('wrapper--3-columns');
   });
diff --git a/src/components/molecules/layout/columns.tsx b/src/components/molecules/layout/columns.tsx
index b5bd9b5..56cd1a1 100644
--- a/src/components/molecules/layout/columns.tsx
+++ b/src/components/molecules/layout/columns.tsx
@@ -1,7 +1,27 @@
-import { FC, ReactComponentElement } from 'react';
-import { Column } from '../../atoms';
+import type {
+  FC,
+  HTMLAttributes,
+  ReactComponentElement,
+  ReactNode,
+} from 'react';
 import styles from './columns.module.scss';
 
+export type ColumnProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+};
+
+/**
+ * Column component.
+ *
+ * Render the body as a column.
+ */
+export const Column: FC<ColumnProps> = ({ children, ...props }) => (
+  <div {...props}>{children}</div>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+type ColumnsNumber = 2 | 3 | 4;
+
 export type ColumnsProps = {
   /**
    * The columns.
@@ -14,7 +34,7 @@ export type ColumnsProps = {
   /**
    * The number of columns.
    */
-  count: 2 | 3 | 4;
+  count: ColumnsNumber;
   /**
    * Should the columns be stacked on small devices? Default: true.
    */