From 0f936ec0e7606cb79434d94096b6e113a7ce78eb Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 15 Dec 2023 18:35:16 +0100
Subject: refactor(stories): migrate stories to CSF3 format

---
 .../atoms/buttons/button-link/button-link.mdx      |  71 ++++
 .../buttons/button-link/button-link.stories.ts     |  99 +++++
 .../buttons/button-link/button-link.stories.tsx    | 114 ------
 src/components/atoms/buttons/button/button.mdx     |  80 ++++
 .../atoms/buttons/button/button.stories.ts         | 112 +++++
 .../atoms/buttons/button/button.stories.tsx        | 172 --------
 src/components/atoms/figure/figure.stories.tsx     |  95 ++---
 src/components/atoms/flip/flip.stories.tsx         |  98 ++---
 .../fields/boolean-field/boolean-field.stories.ts  |  31 ++
 .../fields/boolean-field/boolean-field.stories.tsx | 172 --------
 .../forms/fields/checkbox/checkbox.stories.ts      |  20 +
 .../atoms/forms/fields/input/input.stories.tsx     | 454 ++++++++++-----------
 .../atoms/forms/fields/radio/radio.stories.ts      |  20 +
 .../atoms/forms/fields/select/select.stories.tsx   | 210 ++++------
 .../forms/fields/text-area/text-area.stories.tsx   | 200 ++++-----
 .../atoms/forms/fieldset/fieldset.stories.tsx      |  96 ++---
 src/components/atoms/forms/label/label.stories.ts  |  48 +++
 src/components/atoms/forms/label/label.stories.tsx | 119 ------
 .../atoms/forms/legend/legend.stories.tsx          |  38 +-
 src/components/atoms/heading/heading.stories.ts    |  69 ++++
 src/components/atoms/heading/heading.stories.tsx   | 106 -----
 src/components/atoms/images/icons/icon.stories.ts  | 135 ++++++
 src/components/atoms/images/icons/icon.stories.tsx | 210 ----------
 src/components/atoms/images/logo/logo.stories.ts   |  15 +
 src/components/atoms/images/logo/logo.stories.tsx  |  34 --
 .../atoms/layout/article/article.stories.ts        |  17 +
 .../atoms/layout/article/article.stories.tsx       |  34 --
 src/components/atoms/layout/aside/aside.stories.ts |  17 +
 .../atoms/layout/aside/aside.stories.tsx           |  34 --
 .../atoms/layout/footer/footer.stories.ts          |  17 +
 .../atoms/layout/footer/footer.stories.tsx         |  34 --
 .../atoms/layout/header/header.stories.ts          |  17 +
 .../atoms/layout/header/header.stories.tsx         |  34 --
 src/components/atoms/layout/main/main.stories.ts   |  17 +
 src/components/atoms/layout/main/main.stories.tsx  |  57 ---
 src/components/atoms/layout/nav/nav.stories.ts     |  17 +
 src/components/atoms/layout/nav/nav.stories.tsx    |  34 --
 .../atoms/layout/section/section.stories.ts        |  17 +
 .../atoms/layout/section/section.stories.tsx       |  37 --
 src/components/atoms/layout/time/time.stories.ts   |  17 +
 src/components/atoms/layout/time/time.stories.tsx  |  32 --
 src/components/atoms/links/link/link.stories.tsx   | 222 +++-------
 .../links/sharing-link/sharing-link.stories.ts     |  59 +++
 .../links/sharing-link/sharing-link.stories.tsx    | 114 ------
 .../atoms/links/social-link/social-link.stories.ts |  43 ++
 .../links/social-link/social-link.stories.tsx      |  66 ---
 .../description-list/description-list.stories.tsx  | 400 +++++++++++-------
 src/components/atoms/lists/list/list.stories.tsx   | 290 ++++++-------
 .../loaders/progress-bar/progress-bar.stories.ts   |  23 ++
 .../loaders/progress-bar/progress-bar.stories.tsx  |  60 ---
 .../atoms/loaders/spinner/spinner.stories.ts       |  45 ++
 .../atoms/loaders/spinner/spinner.stories.tsx      |  37 --
 src/components/atoms/notice/notice.stories.ts      |  39 ++
 src/components/atoms/notice/notice.stories.tsx     |  86 ----
 src/components/atoms/overlay/overlay.stories.tsx   |  96 ++---
 src/components/atoms/sidebar/sidebar.stories.ts    |  17 +
 src/components/atoms/sidebar/sidebar.stories.tsx   |  60 ---
 .../visually-hidden/visually-hidden.stories.tsx    |  62 +--
 58 files changed, 2086 insertions(+), 2883 deletions(-)
 create mode 100644 src/components/atoms/buttons/button-link/button-link.mdx
 create mode 100644 src/components/atoms/buttons/button-link/button-link.stories.ts
 delete mode 100644 src/components/atoms/buttons/button-link/button-link.stories.tsx
 create mode 100644 src/components/atoms/buttons/button/button.mdx
 create mode 100644 src/components/atoms/buttons/button/button.stories.ts
 delete mode 100644 src/components/atoms/buttons/button/button.stories.tsx
 create mode 100644 src/components/atoms/forms/fields/boolean-field/boolean-field.stories.ts
 delete mode 100644 src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx
 create mode 100644 src/components/atoms/forms/fields/checkbox/checkbox.stories.ts
 create mode 100644 src/components/atoms/forms/fields/radio/radio.stories.ts
 create mode 100644 src/components/atoms/forms/label/label.stories.ts
 delete mode 100644 src/components/atoms/forms/label/label.stories.tsx
 create mode 100644 src/components/atoms/heading/heading.stories.ts
 delete mode 100644 src/components/atoms/heading/heading.stories.tsx
 create mode 100644 src/components/atoms/images/icons/icon.stories.ts
 delete mode 100644 src/components/atoms/images/icons/icon.stories.tsx
 create mode 100644 src/components/atoms/images/logo/logo.stories.ts
 delete mode 100644 src/components/atoms/images/logo/logo.stories.tsx
 create mode 100644 src/components/atoms/layout/article/article.stories.ts
 delete mode 100644 src/components/atoms/layout/article/article.stories.tsx
 create mode 100644 src/components/atoms/layout/aside/aside.stories.ts
 delete mode 100644 src/components/atoms/layout/aside/aside.stories.tsx
 create mode 100644 src/components/atoms/layout/footer/footer.stories.ts
 delete mode 100644 src/components/atoms/layout/footer/footer.stories.tsx
 create mode 100644 src/components/atoms/layout/header/header.stories.ts
 delete mode 100644 src/components/atoms/layout/header/header.stories.tsx
 create mode 100644 src/components/atoms/layout/main/main.stories.ts
 delete mode 100644 src/components/atoms/layout/main/main.stories.tsx
 create mode 100644 src/components/atoms/layout/nav/nav.stories.ts
 delete mode 100644 src/components/atoms/layout/nav/nav.stories.tsx
 create mode 100644 src/components/atoms/layout/section/section.stories.ts
 delete mode 100644 src/components/atoms/layout/section/section.stories.tsx
 create mode 100644 src/components/atoms/layout/time/time.stories.ts
 delete mode 100644 src/components/atoms/layout/time/time.stories.tsx
 create mode 100644 src/components/atoms/links/sharing-link/sharing-link.stories.ts
 delete mode 100644 src/components/atoms/links/sharing-link/sharing-link.stories.tsx
 create mode 100644 src/components/atoms/links/social-link/social-link.stories.ts
 delete mode 100644 src/components/atoms/links/social-link/social-link.stories.tsx
 create mode 100644 src/components/atoms/loaders/progress-bar/progress-bar.stories.ts
 delete mode 100644 src/components/atoms/loaders/progress-bar/progress-bar.stories.tsx
 create mode 100644 src/components/atoms/loaders/spinner/spinner.stories.ts
 delete mode 100644 src/components/atoms/loaders/spinner/spinner.stories.tsx
 create mode 100644 src/components/atoms/notice/notice.stories.ts
 delete mode 100644 src/components/atoms/notice/notice.stories.tsx
 create mode 100644 src/components/atoms/sidebar/sidebar.stories.ts
 delete mode 100644 src/components/atoms/sidebar/sidebar.stories.tsx

(limited to 'src/components/atoms')

diff --git a/src/components/atoms/buttons/button-link/button-link.mdx b/src/components/atoms/buttons/button-link/button-link.mdx
new file mode 100644
index 0000000..e22471e
--- /dev/null
+++ b/src/components/atoms/buttons/button-link/button-link.mdx
@@ -0,0 +1,71 @@
+import { ArgTypes, Canvas, Meta, Primary } from '@storybook/blocks';
+import * as ButtonLinkStories from './button-link.stories';
+
+<Meta of={ButtonLinkStories} />
+
+# Button
+
+<Primary />
+
+## Kind
+
+The button appearance can change depending on its kind.
+
+### Primary
+
+<Canvas of={ButtonLinkStories.Primary} />
+
+### Secondary (default)
+
+<Canvas of={ButtonLinkStories.Secondary} />
+
+### Tertiary
+
+<Canvas of={ButtonLinkStories.Tertiary} />
+
+## States
+
+It can be:
+* enabled,
+* disabled
+* external.
+
+### Enabled (default)
+
+<Canvas of={ButtonLinkStories.Enabled} />
+
+### Disabled
+
+<Canvas of={ButtonLinkStories.Disabled} />
+
+### External
+
+<Canvas of={ButtonLinkStories.ExternalLink} />
+
+## Shapes
+
+It can either:
+* be a circle,
+* be a rectangle
+* be a square,
+* or have an automatic shape.
+
+### Circle
+
+<Canvas of={ButtonLinkStories.Circle} />
+
+### Rectangle (default)
+
+<Canvas of={ButtonLinkStories.Rectangle} />
+
+### Square
+
+<Canvas of={ButtonLinkStories.Square} />
+
+### Auto
+
+<Canvas of={ButtonLinkStories.Auto} />
+
+## Props
+
+<ArgTypes of={ButtonLinkStories} />
diff --git a/src/components/atoms/buttons/button-link/button-link.stories.ts b/src/components/atoms/buttons/button-link/button-link.stories.ts
new file mode 100644
index 0000000..bbf940c
--- /dev/null
+++ b/src/components/atoms/buttons/button-link/button-link.stories.ts
@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ButtonLink } from './button-link';
+
+const meta = {
+  component: ButtonLink,
+  title: 'Atoms/Buttons/ButtonLink',
+} satisfies Meta<typeof ButtonLink>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button Link',
+    isDisabled: false,
+    to: '#',
+  },
+};
+
+export const Primary: Story = {
+  name: 'Kind: Primary',
+  args: {
+    ...Default.args,
+    kind: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  name: 'Kind: Secondary',
+  args: {
+    ...Default.args,
+    kind: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  name: 'Kind: Tertiary',
+  args: {
+    ...Default.args,
+    kind: 'tertiary',
+  },
+};
+
+export const Enabled: Story = {
+  name: 'State: Enabled',
+  args: {
+    ...Default.args,
+    isDisabled: false,
+  },
+};
+
+export const Disabled: Story = {
+  name: 'State: Disabled',
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+};
+
+export const ExternalLink: Story = {
+  name: 'State: External',
+  args: {
+    ...Default.args,
+    isExternal: true,
+  },
+};
+
+export const Circle: Story = {
+  name: 'Shape: Circle',
+  args: {
+    ...Default.args,
+    shape: 'circle',
+  },
+};
+
+export const Rectangle: Story = {
+  name: 'Shape: Rectangle',
+  args: {
+    ...Default.args,
+    shape: 'rectangle',
+  },
+};
+
+export const Square: Story = {
+  name: 'Shape: Square',
+  args: {
+    ...Default.args,
+    shape: 'square',
+  },
+};
+
+export const Auto: Story = {
+  name: 'Shape: Auto',
+  args: {
+    ...Default.args,
+    shape: 'auto',
+  },
+};
diff --git a/src/components/atoms/buttons/button-link/button-link.stories.tsx b/src/components/atoms/buttons/button-link/button-link.stories.tsx
deleted file mode 100644
index f048ce9..0000000
--- a/src/components/atoms/buttons/button-link/button-link.stories.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ButtonLink } from './button-link';
-
-/**
- * ButtonLink - Storybook Meta
- */
-export default {
-  title: 'Atoms/Buttons/ButtonLink',
-  component: ButtonLink,
-  args: {
-    isExternal: false,
-    shape: 'rectangle',
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The link body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isExternal: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the link is an external link.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'The link kind.',
-      options: ['primary', 'secondary', 'tertiary'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'secondary' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    shape: {
-      control: {
-        type: 'select',
-      },
-      description: 'The link shape.',
-      options: ['circle', 'rectangle', 'square'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'rectangle' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    to: {
-      control: {
-        type: 'text',
-      },
-      description: 'The link target.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof ButtonLink>;
-
-const Template: ComponentStory<typeof ButtonLink> = (args) => (
-  <ButtonLink {...args} />
-);
-
-/**
- * ButtonLink Story - Primary
- */
-export const Primary = Template.bind({});
-Primary.args = {
-  children: 'Link',
-  kind: 'primary',
-  to: '#',
-};
-
-/**
- * ButtonLink Story - Secondary
- */
-export const Secondary = Template.bind({});
-Secondary.args = {
-  children: 'Link',
-  kind: 'secondary',
-  to: '#',
-};
-
-/**
- * ButtonLink Story - Tertiary
- */
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  children: 'Link',
-  kind: 'tertiary',
-  to: '#',
-};
diff --git a/src/components/atoms/buttons/button/button.mdx b/src/components/atoms/buttons/button/button.mdx
new file mode 100644
index 0000000..d90156e
--- /dev/null
+++ b/src/components/atoms/buttons/button/button.mdx
@@ -0,0 +1,80 @@
+import { ArgTypes, Canvas, Meta, Primary } from '@storybook/blocks';
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+<Primary />
+
+## Kind
+
+The button appearance can change depending on its kind.
+
+### Primary
+
+<Canvas of={ButtonStories.Primary} />
+
+### Secondary (default)
+
+<Canvas of={ButtonStories.Secondary} />
+
+### Tertiary
+
+<Canvas of={ButtonStories.Tertiary} />
+
+### Neutral
+
+<Canvas of={ButtonStories.Neutral} />
+
+## States
+
+It can either:
+* be enabled,
+* be disabled
+* indicate a loading state,
+* indicate a pressed state.
+
+### Enabled (default)
+
+<Canvas of={ButtonStories.Enabled} />
+
+### Disabled
+
+<Canvas of={ButtonStories.Disabled} />
+
+### Loading
+
+<Canvas of={ButtonStories.Loading} />
+
+### Pressed
+
+<Canvas of={ButtonStories.Pressed} />
+
+## Shapes
+
+It can either:
+* be a circle,
+* be a rectangle
+* be a square,
+* or conserves its initial shape.
+
+### Circle
+
+<Canvas of={ButtonStories.Circle} />
+
+### Rectangle (default)
+
+<Canvas of={ButtonStories.Rectangle} />
+
+### Square
+
+<Canvas of={ButtonStories.Square} />
+
+### Initial
+
+<Canvas of={ButtonStories.Initial} />
+
+## Props
+
+<ArgTypes of={ButtonStories} />
diff --git a/src/components/atoms/buttons/button/button.stories.ts b/src/components/atoms/buttons/button/button.stories.ts
new file mode 100644
index 0000000..25fb9f8
--- /dev/null
+++ b/src/components/atoms/buttons/button/button.stories.ts
@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './button';
+
+const meta = {
+  component: Button,
+  title: 'Atoms/Buttons/Button',
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+};
+
+export const Primary: Story = {
+  name: 'Kind: Primary',
+  args: {
+    ...Default.args,
+    kind: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  name: 'Kind: Secondary',
+  args: {
+    ...Default.args,
+    kind: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  name: 'Kind: Tertiary',
+  args: {
+    ...Default.args,
+    kind: 'tertiary',
+  },
+};
+
+export const Neutral: Story = {
+  name: 'Kind: Neutral',
+  args: {
+    ...Default.args,
+    kind: 'neutral',
+  },
+};
+
+export const Enabled: Story = {
+  name: 'State: Enabled',
+  args: {
+    ...Default.args,
+  },
+};
+
+export const Disabled: Story = {
+  name: 'State: Disabled',
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+};
+
+export const Loading: Story = {
+  name: 'State: Loading',
+  args: {
+    ...Default.args,
+    isLoading: true,
+  },
+};
+
+export const Pressed: Story = {
+  name: 'State: Pressed',
+  args: {
+    ...Default.args,
+    isPressed: true,
+  },
+};
+
+export const Circle: Story = {
+  name: 'Shape: Circle',
+  args: {
+    ...Default.args,
+    shape: 'circle',
+  },
+};
+
+export const Rectangle: Story = {
+  name: 'Shape: Rectangle',
+  args: {
+    ...Default.args,
+    shape: 'rectangle',
+  },
+};
+
+export const Square: Story = {
+  name: 'Shape: Square',
+  args: {
+    ...Default.args,
+    shape: 'square',
+  },
+};
+
+export const Initial: Story = {
+  name: 'Shape: Initial',
+  args: {
+    ...Default.args,
+    shape: 'initial',
+  },
+};
diff --git a/src/components/atoms/buttons/button/button.stories.tsx b/src/components/atoms/buttons/button/button.stories.tsx
deleted file mode 100644
index 5ce28fb..0000000
--- a/src/components/atoms/buttons/button/button.stories.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Button } from './button';
-
-/**
- * Button - Storybook Meta
- */
-export default {
-  title: 'Atoms/Buttons/Button',
-  component: Button,
-  args: {
-    type: 'button',
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The button body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Should the button be disabled?',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isLoading: {
-      control: {
-        type: 'boolean',
-      },
-      description:
-        'Should the button be disabled because it is loading something?',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isPressed: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Define if the button is currently pressed.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'Button kind.',
-      options: ['primary', 'secondary', 'tertiary', 'neutral'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'secondary' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    onClick: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle click.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-    shape: {
-      control: {
-        type: 'select',
-      },
-      description: 'The link shape.',
-      options: ['circle', 'rectangle', 'square', 'initial'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'rectangle' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      description: 'Button type attribute.',
-      options: ['button', 'reset', 'submit'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'button' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-const logClick = () => {
-  console.log('Button has been clicked!');
-};
-
-/**
- * Button Story - Primary
- */
-export const Primary = Template.bind({});
-Primary.args = {
-  children: 'Click on the button',
-  kind: 'primary',
-  onClick: logClick,
-};
-
-/**
- * Button Story - Secondary
- */
-export const Secondary = Template.bind({});
-Secondary.args = {
-  children: 'Click on the button',
-  kind: 'secondary',
-  onClick: logClick,
-};
-
-/**
- * Button Story - Tertiary
- */
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  children: 'Click on the button',
-  kind: 'tertiary',
-  onClick: logClick,
-};
-
-/**
- * Button Story - Neutral
- */
-export const Neutral = Template.bind({});
-Neutral.args = {
-  children: 'Click on the button',
-  kind: 'neutral',
-  onClick: logClick,
-};
diff --git a/src/components/atoms/figure/figure.stories.tsx b/src/components/atoms/figure/figure.stories.tsx
index 7763641..ece08b7 100644
--- a/src/components/atoms/figure/figure.stories.tsx
+++ b/src/components/atoms/figure/figure.stories.tsx
@@ -1,74 +1,39 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import NextImage from 'next/image';
 import { Figure } from './figure';
 
-/**
- * Figure - Storybook Meta
- */
-export default {
-  title: 'Atoms/Figure',
+const meta = {
   component: Figure,
-  args: {},
-  argTypes: {
-    caption: {
-      control: {
-        type: 'text',
-      },
-      description: 'A figure caption.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    hasBorders: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Add borders around the figure.',
-      table: {
-        category: 'Styles',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Figure>;
+  title: 'Atoms/Figure',
+} satisfies Meta<typeof Figure>;
 
-const Template: ComponentStory<typeof Figure> = (args) => <Figure {...args} />;
+export default meta;
 
-/**
- * Figure Stories - Illustration
- */
-export const Illustration = Template.bind({});
-Illustration.args = {
-  children: (
-    <NextImage
-      alt="An example"
-      height={480}
-      src="https://picsum.photos/640/480"
-      width={640}
-    />
-  ),
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <NextImage
+        alt="An example"
+        height={480}
+        src="https://picsum.photos/640/480"
+        width={640}
+      />
+    ),
+  },
 };
 
-/**
- * Figure Stories - BorderedIllustration
- */
-export const BorderedIllustration = Template.bind({});
-BorderedIllustration.args = {
-  children: (
-    <NextImage
-      alt="An example"
-      height={480}
-      src="https://picsum.photos/640/480"
-      width={640}
-    />
-  ),
-  hasBorders: true,
+export const Bordered: Story = {
+  args: {
+    children: (
+      <NextImage
+        alt="An example"
+        height={480}
+        src="https://picsum.photos/640/480"
+        width={640}
+      />
+    ),
+    hasBorders: true,
+  },
 };
diff --git a/src/components/atoms/flip/flip.stories.tsx b/src/components/atoms/flip/flip.stories.tsx
index 1e470b1..19b4242 100644
--- a/src/components/atoms/flip/flip.stories.tsx
+++ b/src/components/atoms/flip/flip.stories.tsx
@@ -1,61 +1,53 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Flip as FlipComponent } from './flip';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Flip } from './flip';
 import { FlipSide } from './flip-side';
 
-/**
- * Flip - Storybook Meta
- */
-export default {
+const meta = {
+  component: Flip,
   title: 'Atoms/Flip',
-  component: FlipComponent,
-  argTypes: {},
-} as ComponentMeta<typeof FlipComponent>;
+} satisfies Meta<typeof Flip>;
 
-const Template: ComponentStory<typeof FlipComponent> = (args) => (
-  <FlipComponent {...args} tabIndex={0} />
-);
+export default meta;
 
-/**
- * Images Stories - Horizontal Flipping
- */
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-  children: (
-    <>
-      <FlipSide style={{ padding: '10px' }}>
-        Consequatur natus possimus quia consequatur placeat consectetur. Quia
-        vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur est
-        cum et.
-      </FlipSide>
-      <FlipSide isBack style={{ background: '#eee', padding: '10px' }}>
-        Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque
-        minima velit. Ad consequatur assumenda qui placeat aut consectetur
-        officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et
-        autem non.
-      </FlipSide>
-    </>
-  ),
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  args: {
+    children: (
+      <>
+        <FlipSide style={{ padding: '10px' }}>
+          Consequatur natus possimus quia consequatur placeat consectetur. Quia
+          vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur
+          est cum et.
+        </FlipSide>
+        <FlipSide isBack style={{ background: '#eee', padding: '10px' }}>
+          Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque
+          minima velit. Ad consequatur assumenda qui placeat aut consectetur
+          officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et
+          autem non.
+        </FlipSide>
+      </>
+    ),
+  },
 };
 
-/**
- * Images Stories - Vertical Flipping
- */
-export const Vertical = Template.bind({});
-Vertical.args = {
-  children: (
-    <>
-      <FlipSide style={{ padding: '10px' }}>
-        Consequatur natus possimus quia consequatur placeat consectetur. Quia
-        vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur est
-        cum et.
-      </FlipSide>
-      <FlipSide isBack style={{ background: '#eee', padding: '10px' }}>
-        Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque
-        minima velit. Ad consequatur assumenda qui placeat aut consectetur
-        officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et
-        autem non.
-      </FlipSide>
-    </>
-  ),
-  direction: 'vertical',
+export const Vertical: Story = {
+  args: {
+    children: (
+      <>
+        <FlipSide style={{ padding: '10px' }}>
+          Consequatur natus possimus quia consequatur placeat consectetur. Quia
+          vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur
+          est cum et.
+        </FlipSide>
+        <FlipSide isBack style={{ background: '#eee', padding: '10px' }}>
+          Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque
+          minima velit. Ad consequatur assumenda qui placeat aut consectetur
+          officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et
+          autem non.
+        </FlipSide>
+      </>
+    ),
+    direction: 'vertical',
+  },
 };
diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.ts b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.ts
new file mode 100644
index 0000000..d1be590
--- /dev/null
+++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.ts
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BooleanField } from './boolean-field';
+
+const meta = {
+  component: BooleanField,
+  title: 'Atoms/Forms/Fields/BooleanField',
+} satisfies Meta<typeof BooleanField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Checkbox: Story = {
+  args: {
+    id: 'checkbox',
+    isChecked: false,
+    name: 'checkbox',
+    type: 'checkbox',
+    value: 'checkbox',
+  },
+};
+
+export const Radio: Story = {
+  args: {
+    id: 'radio',
+    isChecked: false,
+    name: 'radio',
+    type: 'radio',
+    value: 'radio',
+  },
+};
diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx
deleted file mode 100644
index 60dd352..0000000
--- a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useCallback, useState } from 'react';
-import { BooleanField } from './boolean-field';
-
-/**
- * BooleanField - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms/Fields',
-  component: BooleanField,
-  args: {
-    isHidden: false,
-  },
-  argTypes: {
-    'aria-labelledby': {
-      control: {
-        type: 'text',
-      },
-      description: 'One or more ids that refers to the field name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'The field id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isChecked: {
-      control: {
-        type: null,
-      },
-      description: 'The field state: true if checked.',
-      type: {
-        name: 'boolean',
-        required: true,
-      },
-    },
-    isHidden: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Define if the field should be visually hidden.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'The field name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    onChange: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle field state change.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    onClick: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle click on field.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      description: 'The field type. Either checkbox or radio.',
-      options: ['checkbox', 'radio'],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    value: {
-      control: {
-        type: 'text',
-      },
-      description: 'The field value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof BooleanField>;
-
-const Template: ComponentStory<typeof BooleanField> = ({
-  isChecked: checked,
-  onChange: _onChange,
-  ...args
-}) => {
-  const [isChecked, setIsChecked] = useState(checked);
-  const handleChange = useCallback(() => {
-    setIsChecked((prev) => !prev);
-  }, []);
-
-  return (
-    <BooleanField isChecked={isChecked} onChange={handleChange} {...args} />
-  );
-};
-
-/**
- * Checkbox Story
- */
-export const Checkbox = Template.bind({});
-Checkbox.args = {
-  id: 'checkbox',
-  isChecked: false,
-  name: 'checkbox',
-  type: 'checkbox',
-  value: 'checkbox',
-};
-
-/**
- * Radio Story
- */
-export const Radio = Template.bind({});
-Radio.args = {
-  id: 'radio',
-  isChecked: false,
-  name: 'radio',
-  type: 'radio',
-  value: 'radio',
-};
diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.stories.ts b/src/components/atoms/forms/fields/checkbox/checkbox.stories.ts
new file mode 100644
index 0000000..e815b91
--- /dev/null
+++ b/src/components/atoms/forms/fields/checkbox/checkbox.stories.ts
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox as CheckboxComponent } from './checkbox';
+
+const meta = {
+  component: CheckboxComponent,
+  title: 'Atoms/Forms/Fields',
+} satisfies Meta<typeof CheckboxComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Checkbox: Story = {
+  args: {
+    id: 'checkbox',
+    isChecked: false,
+    name: 'checkbox',
+    value: 'checkbox',
+  },
+};
diff --git a/src/components/atoms/forms/fields/input/input.stories.tsx b/src/components/atoms/forms/fields/input/input.stories.tsx
index 4744bc5..af1ca60 100644
--- a/src/components/atoms/forms/fields/input/input.stories.tsx
+++ b/src/components/atoms/forms/fields/input/input.stories.tsx
@@ -1,237 +1,231 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { type ChangeEvent, useCallback, useState } from 'react';
-import { Input } from './input';
-
-/**
- * Input - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms/Fields',
+import { useArgs } from '@storybook/client-api';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ChangeEvent, useCallback } from 'react';
+import { Input, type InputProps } from './input';
+
+const meta = {
   component: Input,
+  title: 'Atoms/Forms/Fields/Input',
+  excludeStories: /Controlled.*$/,
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ControlledInput = ({ value, ...args }: InputProps) => {
+  const [_, updateArgs] = useArgs<InputProps>();
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      updateArgs({ ...args, value: e.target.value });
+    },
+    [args, updateArgs]
+  );
+
+  return <Input {...args} onChange={handleChange} value={value} />;
+};
+
+const InputTemplate: Story = {
   args: {
+    id: 'default',
     isDisabled: false,
+    isReadOnly: false,
     isRequired: false,
+    name: 'default',
+    type: 'text',
+    value: '',
   },
-  argTypes: {
-    'aria-labelledby': {
-      control: {
-        type: 'text',
-      },
-      description: 'One or more ids that refers to the field name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Add classnames to the field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'Input id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Input state: either enabled or disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isRequired: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the field is required.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    max: {
-      control: {
-        type: 'number',
-      },
-      description: 'Maximum value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    min: {
-      control: {
-        type: 'number',
-      },
-      description: 'Minimum value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'Input name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    placeholder: {
-      control: {
-        type: 'text',
-      },
-      description: 'A placeholder value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    step: {
-      control: {
-        type: 'number',
-      },
-      description: 'Input incremental values that are valid.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      description: 'Input type: input type or textarea.',
-      options: [
-        'datetime-local',
-        'email',
-        'number',
-        'search',
-        'tel',
-        'text',
-        'textarea',
-        'time',
-        'url',
-      ],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    value: {
-      control: {
-        type: null,
-      },
-      description: 'Input value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
+  render: ControlledInput,
+};
+
+export const IsEditable: Story = {
+  ...InputTemplate,
+  name: 'State: Editable',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of an editable input field',
+    id: 'editable-input',
+    name: 'editable',
+  },
+};
+
+export const IsDisabled: Story = {
+  ...InputTemplate,
+  name: 'State: Disabled',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a disabled input field',
+    id: 'disabled-input',
+    isDisabled: true,
+    name: 'disabled',
+  },
+};
+
+export const IsReadOnly: Story = {
+  ...InputTemplate,
+  name: 'State: Readonly',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a read-only input field',
+    id: 'readonly-input',
+    isReadOnly: true,
+    name: 'readonly',
+  },
+};
+
+export const IsRequired: Story = {
+  ...InputTemplate,
+  name: 'State: Required',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a required input field',
+    id: 'required-input',
+    isRequired: true,
+    name: 'required',
+  },
+};
+
+export const DateInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Date',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a date field',
+    id: 'date',
+    name: 'date',
+    type: 'date',
+  },
+};
+
+export const DatetimeInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Datetime',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a datetime field',
+    id: 'datetime',
+    name: 'datetime',
+    type: 'datetime-local',
+  },
+};
+
+export const EmailInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Email',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of an email field',
+    id: 'email',
+    name: 'email',
+    type: 'email',
+  },
+};
+
+export const MonthInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Month',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a month field',
+    id: 'month',
+    name: 'month',
+    type: 'month',
+  },
+};
+
+export const NumberInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Number',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a number field',
+    id: 'number',
+    name: 'number',
+    type: 'number',
+  },
+};
+
+export const PasswordInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Password',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a password field',
+    id: 'password',
+    name: 'password',
+    type: 'password',
+  },
+};
+
+export const SearchInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Search',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a search field',
+    id: 'search',
+    name: 'search',
+    type: 'search',
+  },
+};
+
+export const TelInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Tel',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a tel field',
+    id: 'tel',
+    name: 'tel',
+    type: 'tel',
+  },
+};
+
+export const TextInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Text',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a text field',
+    id: 'text',
+    name: 'text',
+    type: 'text',
+  },
+};
+
+export const TimeInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Time',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a time field',
+    id: 'time',
+    name: 'time',
+    type: 'time',
+  },
+};
+
+export const UrlInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Url',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of an url field',
+    id: 'url',
+    name: 'url',
+    type: 'url',
+  },
+};
+
+export const WeekInput: Story = {
+  ...InputTemplate,
+  name: 'Type: Week',
+  args: {
+    ...InputTemplate.args,
+    'aria-label': 'Example of a week field',
+    id: 'week',
+    name: 'week',
+    type: 'week',
   },
-} as ComponentMeta<typeof Input>;
-
-const Template: ComponentStory<typeof Input> = ({
-  value: initialValue,
-  onChange: _onChange,
-  ...args
-}) => {
-  const [value, setValue] = useState(initialValue);
-  const updateValue = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  }, []);
-
-  return <Input value={value} onChange={updateValue} {...args} />;
-};
-
-/**
- * Input Story - DateTimeField
- */
-export const DateTimeField = Template.bind({});
-DateTimeField.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'datetime-local',
-};
-
-/**
- * Input Story - EmailField
- */
-export const EmailField = Template.bind({});
-EmailField.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'email',
-};
-
-/**
- * Input Story - NumericField
- */
-export const NumericField = Template.bind({});
-NumericField.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'number',
-};
-
-/**
- * Input Story - TextField
- */
-export const TextField = Template.bind({});
-TextField.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'text',
-};
-
-/**
- * Input Story - TimeField
- */
-export const TimeField = Template.bind({});
-TimeField.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'time',
 };
diff --git a/src/components/atoms/forms/fields/radio/radio.stories.ts b/src/components/atoms/forms/fields/radio/radio.stories.ts
new file mode 100644
index 0000000..c1f5eed
--- /dev/null
+++ b/src/components/atoms/forms/fields/radio/radio.stories.ts
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Radio as RadioComponent } from './radio';
+
+const meta = {
+  component: RadioComponent,
+  title: 'Atoms/Forms/Fields',
+} satisfies Meta<typeof RadioComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Radio: Story = {
+  args: {
+    id: 'radio',
+    isChecked: false,
+    name: 'radio',
+    value: 'radio',
+  },
+};
diff --git a/src/components/atoms/forms/fields/select/select.stories.tsx b/src/components/atoms/forms/fields/select/select.stories.tsx
index fddf354..7884cfb 100644
--- a/src/components/atoms/forms/fields/select/select.stories.tsx
+++ b/src/components/atoms/forms/fields/select/select.stories.tsx
@@ -1,143 +1,91 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { type ChangeEvent, useCallback, useState } from 'react';
-import { Select as SelectComponent } from './select';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ChangeEvent, useState, useCallback } from 'react';
+import { Select, type SelectOptions, type SelectProps } from './select';
 
-const selectOptions = [
-  { id: 'option1', name: 'Option 1', value: 'option1' },
-  { id: 'option2', name: 'Option 2', value: 'option2' },
-  { id: 'option3', name: 'Option 3', value: 'option3' },
-];
+const meta = {
+  component: Select,
+  title: 'Atoms/Forms/Fields/Select',
+  excludeStories: /Controlled.*$/,
+} satisfies Meta<typeof Select>;
 
-/**
- * Select - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms/Fields',
-  component: SelectComponent,
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ControlledSelect = ({ multiple, ...args }: SelectProps) => {
+  const [selected, setSelected] = useState(multiple === true ? [''] : '');
+  const handler = useCallback(
+    (e: ChangeEvent<HTMLSelectElement>) => {
+      if (multiple)
+        setSelected(
+          Array.from(e.target.selectedOptions, (option) => option.value)
+        );
+      else setSelected(e.target.value);
+    },
+    [multiple]
+  );
+
+  return (
+    <Select {...args} multiple={multiple} onChange={handler} value={selected} />
+  );
+};
+
+const options = [
+  { id: 'option-1', name: 'Option 1', value: 'option-1' },
+  { id: 'option-2', name: 'Option 2', value: 'option-2' },
+  { id: 'option-3', name: 'Option 3', value: 'option-3' },
+  { id: 'option-4', name: 'Option 4', value: 'option-4' },
+  { id: 'option-5', name: 'Option 5', value: 'option-5' },
+] satisfies SelectOptions[];
+
+const SelectTemplate: Story = {
   args: {
     isDisabled: false,
     isRequired: false,
+    multiple: false,
+    options,
+    value: '',
   },
-  argTypes: {
-    'aria-labelledby': {
-      control: {
-        type: 'text',
-      },
-      description: 'One or more ids that refers to the select field name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Add classnames to the select field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Field state: either enabled or disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isRequired: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the field is required.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    options: {
-      description: 'Select options.',
-      type: {
-        name: 'array',
-        required: true,
-        value: {
-          name: 'string',
-        },
-      },
-    },
-    value: {
-      control: {
-        type: null,
-      },
-      description: 'Field value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
+  render: ControlledSelect,
+};
+
+export const SingleChoice: Story = {
+  ...SelectTemplate,
+  args: {
+    ...SelectTemplate.args,
+    'aria-label': 'Example of a default select field',
+    options,
   },
-} as ComponentMeta<typeof SelectComponent>;
+};
 
-const Template: ComponentStory<typeof SelectComponent> = ({
-  onChange: _onChange,
-  value,
-  ...args
-}) => {
-  const [selected, setSelected] = useState(value);
-  const updateSelection = useCallback((e: ChangeEvent<HTMLSelectElement>) => {
-    setSelected(e.target.value);
-  }, []);
+export const MultipleChoices: Story = {
+  ...SelectTemplate,
+  args: {
+    ...SelectTemplate.args,
+    'aria-label': 'Example of a select field with multiple choices',
+    multiple: true,
+    options,
+  },
+};
 
-  return (
-    <SelectComponent {...args} onChange={updateSelection} value={selected} />
-  );
+export const IsDisabled: Story = {
+  ...SelectTemplate,
+  name: 'State: Disabled',
+  args: {
+    ...SelectTemplate.args,
+    'aria-label': 'Example of a disabled select field',
+    isDisabled: true,
+    options,
+  },
 };
 
-/**
- * Select Story
- */
-export const Select = Template.bind({});
-Select.args = {
-  id: 'storybook-select',
-  name: 'storybook-select',
-  options: selectOptions,
-  value: 'option2',
+export const IsRequired: Story = {
+  ...SelectTemplate,
+  name: 'State: Required',
+  args: {
+    ...SelectTemplate.args,
+    'aria-label': 'Example of a required select field',
+    isRequired: true,
+    options,
+  },
 };
diff --git a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
index 21214bd..d98dfe3 100644
--- a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
+++ b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
@@ -1,136 +1,86 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { type ChangeEvent, useCallback, useState } from 'react';
-import { TextArea as TextAreaComponent } from './text-area';
+import { useArgs } from '@storybook/client-api';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ChangeEvent, useCallback } from 'react';
+import { TextArea, type TextAreaProps } from './text-area';
 
-/**
- * TextArea - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms/Fields',
-  component: TextAreaComponent,
+const meta = {
+  component: TextArea,
+  title: 'Atoms/Forms/Fields/TextArea',
+  excludeStories: /Controlled.*$/,
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ControlledTextArea = ({ value, ...args }: TextAreaProps) => {
+  const [_, updateArgs] = useArgs<TextAreaProps>();
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      updateArgs({ ...args, value: e.target.value });
+    },
+    [args, updateArgs]
+  );
+
+  return <TextArea {...args} onChange={handleChange} value={value} />;
+};
+
+const TextAreaTemplate: Story = {
   args: {
+    id: 'default',
     isDisabled: false,
+    isReadOnly: false,
     isRequired: false,
+    name: 'default',
+    value: '',
   },
-  argTypes: {
-    'aria-labelledby': {
-      control: {
-        type: 'text',
-      },
-      description: 'One or more ids that refers to the field name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Add classnames to the field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'TextArea id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'TextArea state: either enabled or disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isRequired: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the field is required.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'TextArea name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    placeholder: {
-      control: {
-        type: 'text',
-      },
-      description: 'A placeholder value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    value: {
-      control: {
-        type: null,
-      },
-      description: 'TextArea value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
+  render: ControlledTextArea,
+};
+
+export const IsEditable: Story = {
+  ...TextAreaTemplate,
+  name: 'State: Editable',
+  args: {
+    ...TextAreaTemplate.args,
+    'aria-label': 'Example of a default text area',
+    id: 'disabled',
+    name: 'disabled',
   },
-} as ComponentMeta<typeof TextAreaComponent>;
+};
 
-const Template: ComponentStory<typeof TextAreaComponent> = ({
-  value: initialValue,
-  onChange: _onChange,
-  ...args
-}) => {
-  const [value, setValue] = useState(initialValue);
-  const updateValue = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(e.target.value);
-  }, []);
+export const IsDisabled: Story = {
+  ...TextAreaTemplate,
+  name: 'State: Disabled',
+  args: {
+    ...TextAreaTemplate.args,
+    'aria-label': 'Example of a disabled text area',
+    id: 'disabled',
+    isDisabled: true,
+    name: 'disabled',
+  },
+};
 
-  return <TextAreaComponent value={value} onChange={updateValue} {...args} />;
+export const IsReadOnly: Story = {
+  ...TextAreaTemplate,
+  name: 'State: Readonly',
+  args: {
+    ...TextAreaTemplate.args,
+    'aria-label': 'Example of a read-only text area',
+    id: 'readonly',
+    isReadOnly: true,
+    name: 'readonly',
+  },
 };
 
-/**
- * TextArea Story - TextArea
- */
-export const TextArea = Template.bind({});
-TextArea.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
+export const IsRequired: Story = {
+  ...TextAreaTemplate,
+  name: 'State: Required',
+  args: {
+    ...TextAreaTemplate.args,
+    'aria-label': 'Example of a required text area',
+    id: 'required',
+    isRequired: true,
+    name: 'required',
+  },
 };
diff --git a/src/components/atoms/forms/fieldset/fieldset.stories.tsx b/src/components/atoms/forms/fieldset/fieldset.stories.tsx
index a7d665d..e3dd53e 100644
--- a/src/components/atoms/forms/fieldset/fieldset.stories.tsx
+++ b/src/components/atoms/forms/fieldset/fieldset.stories.tsx
@@ -1,61 +1,47 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Input } from '../fields';
-import { Legend } from '../legend';
-import { Fieldset as FieldsetComponent } from './fieldset';
-
-/**
- * Fieldset - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms',
-  component: FieldsetComponent,
+import { Fieldset, type FieldsetProps } from './fieldset';
+
+const meta = {
+  component: Fieldset,
+  title: 'Atoms/Forms/Fieldset',
+} satisfies Meta<typeof Fieldset>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+const FieldsetWithFields = ({
+  inputLabel,
+  ...props
+}: FieldsetProps & { inputLabel: string }) => (
+  <Fieldset {...props}>
+    <Input aria-label={inputLabel} id="field" name="field" type="text" />
+  </Fieldset>
+);
+
+type WithFieldStory = StoryObj<FieldsetProps & { inputLabel: string }>;
+
+export const Enabled: WithFieldStory = {
+  name: 'State: Enabled',
   args: {
+    ...Default.args,
+    inputLabel: 'Example of a field inside an enabled fieldset',
     isDisabled: false,
   },
-  argTypes: {
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-      description:
-        'Define if the fields inside the fieldset should be disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof FieldsetComponent>;
-
-const Template: ComponentStory<typeof FieldsetComponent> = (args) => (
-  <FieldsetComponent {...args}>
-    <div>
-      <Input
-        aria-label="A field example"
-        id="field1"
-        name="field1"
-        type="text"
-      />
-    </div>
-    <div>
-      <Input
-        aria-label="Another field example"
-        id="field2"
-        name="field2"
-        type="text"
-      />
-    </div>
-  </FieldsetComponent>
-);
+  render: FieldsetWithFields,
+};
 
-/**
- * Fieldset Story
- */
-export const Fieldset = Template.bind({});
-Fieldset.args = {
-  legend: <Legend>The fieldset legend</Legend>,
+export const Disabled: WithFieldStory = {
+  name: 'State: Disabled',
+  args: {
+    ...Default.args,
+    inputLabel: 'Example of a field inside a disabled fieldset',
+    isDisabled: true,
+  },
+  render: FieldsetWithFields,
 };
diff --git a/src/components/atoms/forms/label/label.stories.ts b/src/components/atoms/forms/label/label.stories.ts
new file mode 100644
index 0000000..094a432
--- /dev/null
+++ b/src/components/atoms/forms/label/label.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './label';
+
+const meta = {
+  component: Label,
+  title: 'Atoms/Forms/Label',
+} satisfies Meta<typeof Label>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'A label',
+  },
+};
+
+export const VisuallyHidden: Story = {
+  args: {
+    children: 'A visually hidden label',
+    isHidden: true,
+  },
+};
+
+export const IsRequired: Story = {
+  name: 'State: Required',
+  args: {
+    ...Default.args,
+    isRequired: true,
+  },
+};
+
+export const SizeSM: Story = {
+  name: 'Size: Small',
+  args: {
+    ...Default.args,
+    size: 'sm',
+  },
+};
+
+export const SizeMD: Story = {
+  name: 'Size: Medium',
+  args: {
+    ...Default.args,
+    size: 'md',
+  },
+};
diff --git a/src/components/atoms/forms/label/label.stories.tsx b/src/components/atoms/forms/label/label.stories.tsx
deleted file mode 100644
index 195be97..0000000
--- a/src/components/atoms/forms/label/label.stories.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Label as LabelComponent } from './label';
-
-/**
- * Label - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms',
-  component: LabelComponent,
-  args: {
-    isHidden: false,
-    isRequired: false,
-    size: 'sm',
-  },
-  argTypes: {
-    'aria-label': {
-      control: {
-        type: 'text',
-      },
-      description: 'Define an accessible name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Add classnames to the label.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The label body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    htmlFor: {
-      control: {
-        type: 'text',
-      },
-      description: 'The field id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isHidden: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Set to true if the label should be visually hidden.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isRequired: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Set to true if the field is required.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      description: 'The label size.',
-      options: ['md', 'sm'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'sm' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof LabelComponent>;
-
-const Template: ComponentStory<typeof LabelComponent> = ({
-  children,
-  ...args
-}) => <LabelComponent {...args}>{children}</LabelComponent>;
-
-/**
- * Label Story
- */
-export const Label = Template.bind({});
-Label.args = {
-  children: 'A label',
-};
diff --git a/src/components/atoms/forms/legend/legend.stories.tsx b/src/components/atoms/forms/legend/legend.stories.tsx
index b23d889..963fe33 100644
--- a/src/components/atoms/forms/legend/legend.stories.tsx
+++ b/src/components/atoms/forms/legend/legend.stories.tsx
@@ -1,27 +1,25 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Fieldset } from '../fieldset';
-import { Legend as LegendComponent } from './legend';
+import { Legend, type LegendProps } from './legend';
 
-/**
- * Legend - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms',
-  component: LegendComponent,
-  args: {},
-  argTypes: {},
-} as ComponentMeta<typeof LegendComponent>;
-
-const Template: ComponentStory<typeof LegendComponent> = (args) => (
+const FieldsetWithLegend = (args: LegendProps) => (
   <Fieldset>
-    <LegendComponent {...args} />
+    <Legend {...args} />
   </Fieldset>
 );
 
-/**
- * Legend Story
- */
-export const Legend = Template.bind({});
-Legend.args = {
-  children: 'A fieldset legend',
+const meta = {
+  component: Legend,
+  title: 'Atoms/Forms/Legend',
+  render: FieldsetWithLegend,
+} satisfies Meta<typeof Legend>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'A legend',
+  },
 };
diff --git a/src/components/atoms/heading/heading.stories.ts b/src/components/atoms/heading/heading.stories.ts
new file mode 100644
index 0000000..0bc8c68
--- /dev/null
+++ b/src/components/atoms/heading/heading.stories.ts
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading } from './heading';
+
+const meta = {
+  component: Heading,
+  title: 'Atoms/Headings',
+} satisfies Meta<typeof Heading>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const HeadingTemplate: Story = {
+  args: {
+    children: 'The quick brown fox jumps over a lazy dog',
+    isFake: false,
+    level: 2,
+  },
+};
+
+export const H1: Story = {
+  args: {
+    ...HeadingTemplate.args,
+    level: 1,
+  },
+};
+
+export const H2: Story = {
+  args: {
+    ...HeadingTemplate.args,
+    level: 2,
+  },
+};
+
+export const H3: Story = {
+  args: {
+    ...HeadingTemplate.args,
+    level: 3,
+  },
+};
+
+export const H4: Story = {
+  args: {
+    ...HeadingTemplate.args,
+    level: 4,
+  },
+};
+
+export const H5: Story = {
+  args: {
+    ...HeadingTemplate.args,
+    level: 5,
+  },
+};
+
+export const H6: Story = {
+  args: {
+    ...HeadingTemplate.args,
+    level: 6,
+  },
+};
+
+export const FakeH2: Story = {
+  args: {
+    ...HeadingTemplate.args,
+    isFake: true,
+    level: 2,
+  },
+};
diff --git a/src/components/atoms/heading/heading.stories.tsx b/src/components/atoms/heading/heading.stories.tsx
deleted file mode 100644
index c5ac4a0..0000000
--- a/src/components/atoms/heading/heading.stories.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Heading } from './heading';
-
-/**
- * Heading - Storybook Meta
- */
-export default {
-  title: 'Atoms/Headings',
-  component: Heading,
-  args: {
-    isFake: false,
-  },
-  argTypes: {
-    children: {
-      description: 'Heading body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isFake: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Use an heading element or only its styles.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    level: {
-      control: {
-        type: 'number',
-        min: 1,
-        max: 6,
-      },
-      description: 'Heading level.',
-      type: {
-        name: 'number',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof Heading>;
-
-const Template: ComponentStory<typeof Heading> = (args) => (
-  <Heading {...args} />
-);
-
-/**
- * Heading Story - h1
- */
-export const H1 = Template.bind({});
-H1.args = {
-  children: 'Your title',
-  level: 1,
-};
-
-/**
- * Heading Story - h2
- */
-export const H2 = Template.bind({});
-H2.args = {
-  children: 'Your title',
-  level: 2,
-};
-
-/**
- * Heading Story - h3
- */
-export const H3 = Template.bind({});
-H3.args = {
-  children: 'Your title',
-  level: 3,
-};
-
-/**
- * Heading Story - h4
- */
-export const H4 = Template.bind({});
-H4.args = {
-  children: 'Your title',
-  level: 4,
-};
-
-/**
- * Heading Story - h5
- */
-export const H5 = Template.bind({});
-H5.args = {
-  children: 'Your title',
-  level: 5,
-};
-
-/**
- * Heading Story - h6
- */
-export const H6 = Template.bind({});
-H6.args = {
-  children: 'Your title',
-  level: 6,
-};
diff --git a/src/components/atoms/images/icons/icon.stories.ts b/src/components/atoms/images/icons/icon.stories.ts
new file mode 100644
index 0000000..55b5c31
--- /dev/null
+++ b/src/components/atoms/images/icons/icon.stories.ts
@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from './icon';
+
+const meta = {
+  component: Icon,
+  title: 'Atoms/Images/Icons',
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ArrowRight: Story = {
+  args: {
+    orientation: 'right',
+    shape: 'arrow',
+  },
+};
+
+export const ArrowLeft: Story = {
+  args: {
+    orientation: 'left',
+    shape: 'arrow',
+  },
+};
+
+export const ArrowBottom: Story = {
+  args: {
+    orientation: 'bottom',
+    shape: 'arrow',
+  },
+};
+
+export const ArrowTop: Story = {
+  args: {
+    orientation: 'top',
+    shape: 'arrow',
+  },
+};
+
+export const Career: Story = {
+  args: {
+    shape: 'career',
+  },
+};
+
+export const CCBySA: Story = {
+  args: {
+    shape: 'cc-by-sa',
+  },
+};
+
+export const Cog: Story = {
+  args: {
+    shape: 'cog',
+  },
+};
+
+export const Computer: Story = {
+  args: {
+    shape: 'computer',
+  },
+};
+
+export const Cross: Story = {
+  args: {
+    shape: 'cross',
+  },
+};
+
+export const Envelop: Story = {
+  args: {
+    shape: 'envelop',
+  },
+};
+
+export const Feed: Story = {
+  args: {
+    shape: 'feed',
+  },
+};
+
+export const Hamburger: Story = {
+  args: {
+    shape: 'hamburger',
+  },
+};
+
+export const Help: Story = {
+  args: {
+    shape: 'help',
+  },
+};
+
+export const Home: Story = {
+  args: {
+    shape: 'home',
+  },
+};
+
+export const MagnifyingGlass: Story = {
+  args: {
+    shape: 'magnifying-glass',
+  },
+};
+
+export const Minus: Story = {
+  args: {
+    shape: 'minus',
+  },
+};
+
+export const Moon: Story = {
+  args: {
+    shape: 'moon',
+  },
+};
+
+export const Plus: Story = {
+  args: {
+    shape: 'plus',
+  },
+};
+
+export const PostsStack: Story = {
+  args: {
+    shape: 'posts-stack',
+  },
+};
+
+export const Sun: Story = {
+  args: {
+    shape: 'sun',
+  },
+};
diff --git a/src/components/atoms/images/icons/icon.stories.tsx b/src/components/atoms/images/icons/icon.stories.tsx
deleted file mode 100644
index 0da568a..0000000
--- a/src/components/atoms/images/icons/icon.stories.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Icon, type IconProps, type IconShape } from './icon';
-
-/**
- * Home icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Images/Icons',
-  component: Icon,
-  argTypes: {
-    shape: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'arrow',
-        'career',
-        'cc-by-sa',
-        'cog',
-        'computer',
-        'cross',
-        'envelop',
-        'feed',
-        'hamburger',
-        'help',
-        'home',
-        'magnifying-glass',
-        'minus',
-        'moon',
-        'posts-stack',
-        'plus',
-        'sun',
-      ],
-      description: 'Define the icon shape.',
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Icon>;
-
-const Template: ComponentStory<typeof Icon> = ({
-  shape,
-  ...args
-}: IconProps<IconShape>) => <Icon {...args} shape={shape} />;
-
-/**
- * Icon Stories - ArrowRight
- */
-export const ArrowRight = Template.bind({});
-ArrowRight.args = {
-  orientation: 'right',
-  shape: 'arrow',
-};
-
-/**
- * Icon Stories - ArrowLeft
- */
-export const ArrowLeft = Template.bind({});
-ArrowLeft.args = {
-  orientation: 'left',
-  shape: 'arrow',
-};
-
-/**
- * Icon Stories - ArrowBottom
- */
-export const ArrowBottom = Template.bind({});
-ArrowBottom.args = {
-  orientation: 'bottom',
-  shape: 'arrow',
-};
-
-/**
- * Icon Stories - ArrowTop
- */
-export const ArrowTop = Template.bind({});
-ArrowTop.args = {
-  orientation: 'top',
-  shape: 'arrow',
-};
-
-/**
- * Icon Stories - Career
- */
-export const Career = Template.bind({});
-Career.args = {
-  shape: 'career',
-};
-
-/**
- * Icon Stories - CCBySA
- */
-export const CCBySA = Template.bind({});
-CCBySA.args = {
-  shape: 'cc-by-sa',
-};
-
-/**
- * Icon Stories - Cog
- */
-export const Cog = Template.bind({});
-Cog.args = {
-  shape: 'cog',
-};
-
-/**
- * Icon Stories - Computer
- */
-export const Computer = Template.bind({});
-Computer.args = {
-  shape: 'computer',
-};
-
-/**
- * Icon Stories - Cross
- */
-export const Cross = Template.bind({});
-Cross.args = {
-  shape: 'cross',
-};
-
-/**
- * Icon Stories - Envelop
- */
-export const Envelop = Template.bind({});
-Envelop.args = {
-  shape: 'envelop',
-};
-
-/**
- * Icon Stories - Feed
- */
-export const Feed = Template.bind({});
-Feed.args = {
-  shape: 'feed',
-};
-
-/**
- * Icon Stories - Hamburger
- */
-export const Hamburger = Template.bind({});
-Hamburger.args = {
-  shape: 'hamburger',
-};
-
-/**
- * Icon Stories - Help
- */
-export const Help = Template.bind({});
-Help.args = {
-  shape: 'help',
-};
-
-/**
- * Icon Stories - Home
- */
-export const Home = Template.bind({});
-Home.args = {
-  shape: 'home',
-};
-
-/**
- * Icon Stories - MagnifyingGlass
- */
-export const MagnifyingGlass = Template.bind({});
-MagnifyingGlass.args = {
-  shape: 'magnifying-glass',
-};
-
-/**
- * Icon Stories - Minus
- */
-export const Minus = Template.bind({});
-Minus.args = {
-  shape: 'minus',
-};
-
-/**
- * Icon Stories - Moon
- */
-export const Moon = Template.bind({});
-Moon.args = {
-  shape: 'moon',
-};
-
-/**
- * Icon Stories - Plus
- */
-export const Plus = Template.bind({});
-Plus.args = {
-  shape: 'plus',
-};
-
-/**
- * Icon Stories - PostsStack
- */
-export const PostsStack = Template.bind({});
-PostsStack.args = {
-  shape: 'posts-stack',
-};
-
-/**
- * Icon Stories - Sun
- */
-export const Sun = Template.bind({});
-Sun.args = {
-  shape: 'sun',
-};
diff --git a/src/components/atoms/images/logo/logo.stories.ts b/src/components/atoms/images/logo/logo.stories.ts
new file mode 100644
index 0000000..4324c80
--- /dev/null
+++ b/src/components/atoms/images/logo/logo.stories.ts
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Logo } from './logo';
+
+const meta = {
+  component: Logo,
+  title: 'Atoms/Images/Logo',
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/src/components/atoms/images/logo/logo.stories.tsx b/src/components/atoms/images/logo/logo.stories.tsx
deleted file mode 100644
index cfccb65..0000000
--- a/src/components/atoms/images/logo/logo.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Logo as LogoComponent } from './logo';
-
-/**
- * Logo - Storybook Meta
- */
-export default {
-  title: 'Atoms/Images',
-  component: LogoComponent,
-  argTypes: {
-    heading: {
-      control: {
-        type: 'text',
-      },
-      description: 'The SVG title.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof LogoComponent>;
-
-const Template: ComponentStory<typeof LogoComponent> = (args) => (
-  <LogoComponent {...args} />
-);
-
-/**
- * Images Stories - Logo
- */
-export const Logo = Template.bind({});
diff --git a/src/components/atoms/layout/article/article.stories.ts b/src/components/atoms/layout/article/article.stories.ts
new file mode 100644
index 0000000..f0bda0e
--- /dev/null
+++ b/src/components/atoms/layout/article/article.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Article } from './article';
+
+const meta = {
+  component: Article,
+  title: 'Atoms/Layout/Article',
+} satisfies Meta<typeof Article>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    children: 'The article contents.',
+  },
+};
diff --git a/src/components/atoms/layout/article/article.stories.tsx b/src/components/atoms/layout/article/article.stories.tsx
deleted file mode 100644
index 4c5b158..0000000
--- a/src/components/atoms/layout/article/article.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Article as ArticleComponent } from './article';
-
-/**
- * Article - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout',
-  component: ArticleComponent,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The contents.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof ArticleComponent>;
-
-const Template: ComponentStory<typeof ArticleComponent> = (args) => (
-  <ArticleComponent {...args} />
-);
-
-/**
- * Layout Stories - Article
- */
-export const Article = Template.bind({});
-Article.args = {
-  children: 'The article content.',
-};
diff --git a/src/components/atoms/layout/aside/aside.stories.ts b/src/components/atoms/layout/aside/aside.stories.ts
new file mode 100644
index 0000000..c58372a
--- /dev/null
+++ b/src/components/atoms/layout/aside/aside.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Aside } from './aside';
+
+const meta = {
+  component: Aside,
+  title: 'Atoms/Layout/Aside',
+} satisfies Meta<typeof Aside>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    children: 'The aside contents.',
+  },
+};
diff --git a/src/components/atoms/layout/aside/aside.stories.tsx b/src/components/atoms/layout/aside/aside.stories.tsx
deleted file mode 100644
index a394d1b..0000000
--- a/src/components/atoms/layout/aside/aside.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Aside as AsideComponent } from './aside';
-
-/**
- * Aside - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout',
-  component: AsideComponent,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The contents.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof AsideComponent>;
-
-const Template: ComponentStory<typeof AsideComponent> = (args) => (
-  <AsideComponent {...args} />
-);
-
-/**
- * Layout Stories - Aside
- */
-export const Aside = Template.bind({});
-Aside.args = {
-  children: 'The aside content.',
-};
diff --git a/src/components/atoms/layout/footer/footer.stories.ts b/src/components/atoms/layout/footer/footer.stories.ts
new file mode 100644
index 0000000..662524c
--- /dev/null
+++ b/src/components/atoms/layout/footer/footer.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Footer } from './footer';
+
+const meta = {
+  component: Footer,
+  title: 'Atoms/Layout/Footer',
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    children: 'The footer contents.',
+  },
+};
diff --git a/src/components/atoms/layout/footer/footer.stories.tsx b/src/components/atoms/layout/footer/footer.stories.tsx
deleted file mode 100644
index 0df1647..0000000
--- a/src/components/atoms/layout/footer/footer.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Footer as FooterComponent } from './footer';
-
-/**
- * Footer - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout',
-  component: FooterComponent,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The contents.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof FooterComponent>;
-
-const Template: ComponentStory<typeof FooterComponent> = (args) => (
-  <FooterComponent {...args} />
-);
-
-/**
- * Layout Stories - Footer
- */
-export const Footer = Template.bind({});
-Footer.args = {
-  children: 'The footer content.',
-};
diff --git a/src/components/atoms/layout/header/header.stories.ts b/src/components/atoms/layout/header/header.stories.ts
new file mode 100644
index 0000000..2afe715
--- /dev/null
+++ b/src/components/atoms/layout/header/header.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './header';
+
+const meta = {
+  component: Header,
+  title: 'Atoms/Layout/Header',
+} satisfies Meta<typeof Header>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    children: 'The header contents.',
+  },
+};
diff --git a/src/components/atoms/layout/header/header.stories.tsx b/src/components/atoms/layout/header/header.stories.tsx
deleted file mode 100644
index 3d98263..0000000
--- a/src/components/atoms/layout/header/header.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Header as HeaderComponent } from './header';
-
-/**
- * Header - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout',
-  component: HeaderComponent,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The contents.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof HeaderComponent>;
-
-const Template: ComponentStory<typeof HeaderComponent> = (args) => (
-  <HeaderComponent {...args} />
-);
-
-/**
- * Layout Stories - Header
- */
-export const Header = Template.bind({});
-Header.args = {
-  children: 'The header content.',
-};
diff --git a/src/components/atoms/layout/main/main.stories.ts b/src/components/atoms/layout/main/main.stories.ts
new file mode 100644
index 0000000..79aedbb
--- /dev/null
+++ b/src/components/atoms/layout/main/main.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Main } from './main';
+
+const meta = {
+  component: Main,
+  title: 'Atoms/Layout/Main',
+} satisfies Meta<typeof Main>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    children: 'The main contents.',
+  },
+};
diff --git a/src/components/atoms/layout/main/main.stories.tsx b/src/components/atoms/layout/main/main.stories.tsx
deleted file mode 100644
index 6a22ed5..0000000
--- a/src/components/atoms/layout/main/main.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Main as MainComponent } from './main';
-
-/**
- * Main - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout',
-  component: MainComponent,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The content.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the main element.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'The main element id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof MainComponent>;
-
-const Template: ComponentStory<typeof MainComponent> = (args) => (
-  <MainComponent {...args} />
-);
-
-/**
- * Layout Stories - Main
- */
-export const Main = Template.bind({});
-Main.args = {
-  children: 'The main content.',
-};
diff --git a/src/components/atoms/layout/nav/nav.stories.ts b/src/components/atoms/layout/nav/nav.stories.ts
new file mode 100644
index 0000000..6ee4e5e
--- /dev/null
+++ b/src/components/atoms/layout/nav/nav.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Nav } from './nav';
+
+const meta = {
+  component: Nav,
+  title: 'Atoms/Layout/Nav',
+} satisfies Meta<typeof Nav>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    children: 'The nav contents.',
+  },
+};
diff --git a/src/components/atoms/layout/nav/nav.stories.tsx b/src/components/atoms/layout/nav/nav.stories.tsx
deleted file mode 100644
index 5649abf..0000000
--- a/src/components/atoms/layout/nav/nav.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Nav as NavComponent } from './nav';
-
-/**
- * Nav - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout',
-  component: NavComponent,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The contents.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof NavComponent>;
-
-const Template: ComponentStory<typeof NavComponent> = (args) => (
-  <NavComponent {...args} />
-);
-
-/**
- * Layout Stories - Nav
- */
-export const Nav = Template.bind({});
-Nav.args = {
-  children: 'The nav content.',
-};
diff --git a/src/components/atoms/layout/section/section.stories.ts b/src/components/atoms/layout/section/section.stories.ts
new file mode 100644
index 0000000..f8df223
--- /dev/null
+++ b/src/components/atoms/layout/section/section.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Section } from './section';
+
+const meta = {
+  component: Section,
+  title: 'Atoms/Layout/Section',
+} satisfies Meta<typeof Section>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    children: 'The section contents.',
+  },
+};
diff --git a/src/components/atoms/layout/section/section.stories.tsx b/src/components/atoms/layout/section/section.stories.tsx
deleted file mode 100644
index fdc8217..0000000
--- a/src/components/atoms/layout/section/section.stories.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Heading } from '../../heading';
-import { Section as SectionComponent } from './section';
-
-/**
- * Section - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout/Section',
-  component: SectionComponent,
-  argTypes: {
-    children: {
-      description: 'The section contents.',
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof SectionComponent>;
-
-const Template: ComponentStory<typeof SectionComponent> = (args) => (
-  <SectionComponent {...args} />
-);
-
-/**
- * Section Story
- */
-export const Section = Template.bind({});
-Section.args = {
-  children: (
-    <>
-      <Heading level={2}>A section title</Heading>
-      <div>The body</div>
-    </>
-  ),
-};
diff --git a/src/components/atoms/layout/time/time.stories.ts b/src/components/atoms/layout/time/time.stories.ts
new file mode 100644
index 0000000..6e00a4c
--- /dev/null
+++ b/src/components/atoms/layout/time/time.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Time } from './time';
+
+const meta = {
+  component: Time,
+  title: 'Atoms/Layout/Time',
+} satisfies Meta<typeof Time>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    date: '2022-03-15 10:44:20',
+  },
+};
diff --git a/src/components/atoms/layout/time/time.stories.tsx b/src/components/atoms/layout/time/time.stories.tsx
deleted file mode 100644
index d534f14..0000000
--- a/src/components/atoms/layout/time/time.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Time } from './time';
-
-/**
- * Time - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout/Time',
-  component: Time,
-  argTypes: {
-    date: {
-      control: {
-        type: 'text',
-      },
-      description: 'A valid date string.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof Time>;
-
-const Template: ComponentStory<typeof Time> = (args) => <Time {...args} />;
-
-/**
- * Time Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  date: '2022-03-15 10:44:20',
-};
diff --git a/src/components/atoms/links/link/link.stories.tsx b/src/components/atoms/links/link/link.stories.tsx
index 0a6a6c5..30b0eab 100644
--- a/src/components/atoms/links/link/link.stories.tsx
+++ b/src/components/atoms/links/link/link.stories.tsx
@@ -1,178 +1,84 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Link } from './link';
 
-/**
- * Link - Storybook Meta
- */
-export default {
-  title: 'Atoms/Links/Link',
+const meta = {
   component: Link,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The link body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    href: {
-      control: {
-        type: 'text',
-      },
-      description: 'The link target.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isDownload: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the link purpose is to download a file.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isExternal: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the link is external of the current website.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    lang: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        category: 'Options',
-      },
-      description: 'The target language as code language.',
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Link>;
+  title: 'Atoms/Links',
+} satisfies Meta<typeof Link>;
+
+export default meta;
 
-const Template: ComponentStory<typeof Link> = (args) => <Link {...args} />;
+type Story = StoryObj<typeof meta>;
 
-/**
- * Links Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  children: 'A link',
-  href: '#',
+export const Default: Story = {
+  args: {
+    children: 'A link',
+    href: '#link',
+  },
 };
 
-/**
- * Links Stories - Download
- */
-export const DownloadLink = Template.bind({});
-DownloadLink.args = {
-  children: 'A link to a file',
-  href: '#',
-  isDownload: true,
-  isExternal: false,
+export const WithLang: Story = {
+  args: {
+    children: 'Github repository',
+    href: 'https://github.com/ArmandPhilippot/apcom',
+    lang: 'en',
+  },
+  render: (args) => (
+    <>
+      Go to the <Link {...args} />.
+    </>
+  ),
 };
 
-/**
- * Links Stories - Download link with lang
- */
-export const DownloadLinkWithLang = Template.bind({});
-DownloadLinkWithLang.args = {
-  children: 'A link to a file',
-  href: '#',
-  isDownload: true,
-  isExternal: false,
-  lang: 'en',
+export const DownloadLink: Story = {
+  args: {
+    children: 'Download the file',
+    href: '#file',
+    isDownload: true,
+  },
 };
 
-/**
- * Links Stories - External
- */
-export const ExternalLink = Template.bind({});
-ExternalLink.args = {
-  children: 'A link',
-  href: '#',
-  isDownload: false,
-  isExternal: true,
+export const DownloadLinkWithLang: Story = {
+  args: {
+    children: 'Download the file',
+    href: '#file',
+    isDownload: true,
+    lang: 'en',
+  },
 };
 
-/**
- * Links Stories - External download link
- */
-export const ExternalDownload = Template.bind({});
-ExternalDownload.args = {
-  children: 'A link',
-  href: '#',
-  isDownload: true,
-  isExternal: true,
+export const ExternalLink: Story = {
+  args: {
+    children: 'Go to the Github repository',
+    href: 'https://github.com/ArmandPhilippot/apcom',
+    isExternal: true,
+  },
 };
 
-/**
- * Links Stories - External link with Lang
- */
-export const ExternalLinkWithLang = Template.bind({});
-ExternalLinkWithLang.args = {
-  children: 'A link',
-  href: '#',
-  isDownload: false,
-  isExternal: true,
-  lang: 'en',
+export const ExternalLinkWithLang: Story = {
+  args: {
+    children: 'Go to the Github repository',
+    href: 'https://github.com/ArmandPhilippot/apcom',
+    isExternal: true,
+    lang: 'en',
+  },
 };
 
-/**
- * Links Stories - External download with lang
- */
-export const ExternalDownloadWithLang = Template.bind({});
-ExternalDownloadWithLang.args = {
-  children: 'A link',
-  href: '#',
-  isDownload: true,
-  isExternal: true,
-  lang: 'en',
+export const ExternalDownloadLink: Story = {
+  args: {
+    children: 'Download the file',
+    href: '#file',
+    isDownload: true,
+    isExternal: true,
+  },
 };
 
-/**
- * Links Stories - With Lang
- */
-export const LinkLang = Template.bind({});
-LinkLang.args = {
-  children: 'A link',
-  href: '#',
-  isDownload: false,
-  isExternal: false,
-  lang: 'en',
+export const ExternalDownloadLinkWithLang: Story = {
+  args: {
+    children: 'Download the file',
+    href: '#file',
+    isDownload: true,
+    isExternal: true,
+    lang: 'en',
+  },
 };
diff --git a/src/components/atoms/links/sharing-link/sharing-link.stories.ts b/src/components/atoms/links/sharing-link/sharing-link.stories.ts
new file mode 100644
index 0000000..53d2507
--- /dev/null
+++ b/src/components/atoms/links/sharing-link/sharing-link.stories.ts
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SharingLink } from './sharing-link';
+
+const meta = {
+  component: SharingLink,
+  title: 'Atoms/Links/Share',
+} satisfies Meta<typeof SharingLink>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Diaspora: Story = {
+  args: {
+    label: 'Share on Diaspora',
+    medium: 'diaspora',
+    url: '#diaspora',
+  },
+};
+
+export const Email: Story = {
+  args: {
+    label: 'Share by Email',
+    medium: 'email',
+    url: '#email',
+  },
+};
+
+export const Facebook: Story = {
+  args: {
+    label: 'Share on Facebook',
+    medium: 'facebook',
+    url: '#facebook',
+  },
+};
+
+export const JournalDuHacker: Story = {
+  args: {
+    label: 'Share on Journal du Hacker',
+    medium: 'journal-du-hacker',
+    url: '#journal-du-hacker',
+  },
+};
+
+export const LinkedIn: Story = {
+  args: {
+    label: 'Share on LinkedIn',
+    medium: 'linkedin',
+    url: '#linkedin',
+  },
+};
+
+export const Twitter: Story = {
+  args: {
+    label: 'Share on Twitter',
+    medium: 'twitter',
+    url: '#twitter',
+  },
+};
diff --git a/src/components/atoms/links/sharing-link/sharing-link.stories.tsx b/src/components/atoms/links/sharing-link/sharing-link.stories.tsx
deleted file mode 100644
index 932d468..0000000
--- a/src/components/atoms/links/sharing-link/sharing-link.stories.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { SharingLink } from './sharing-link';
-
-/**
- * SharingLink - Storybook Meta
- */
-export default {
-  title: 'Atoms/Links/Sharing',
-  component: SharingLink,
-  argTypes: {
-    medium: {
-      control: {
-        type: 'select',
-      },
-      description: 'The sharing medium.',
-      options: [
-        'diaspora',
-        'email',
-        'facebook',
-        'journal-du-hacker',
-        'linkedin',
-        'twitter',
-      ],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'An accessible label that describe the link..',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    url: {
-      control: {
-        type: 'text',
-      },
-      description: 'The sharing url.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof SharingLink>;
-
-const Template: ComponentStory<typeof SharingLink> = (args) => (
-  <SharingLink {...args} />
-);
-
-/**
- * Sharing Link Stories - Diaspora
- */
-export const Diaspora = Template.bind({});
-Diaspora.args = {
-  label: 'Share on Diaspora',
-  medium: 'diaspora',
-  url: '#',
-};
-
-/**
- * Sharing Link Stories - Email
- */
-export const Email = Template.bind({});
-Email.args = {
-  label: 'Share by Email',
-  medium: 'email',
-  url: '#',
-};
-
-/**
- * Sharing Link Stories - Facebook
- */
-export const Facebook = Template.bind({});
-Facebook.args = {
-  label: 'Share on Facebook',
-  medium: 'facebook',
-  url: '#',
-};
-
-/**
- * Sharing Link Stories - Journal du Hacker
- */
-export const JournalDuHacker = Template.bind({});
-JournalDuHacker.args = {
-  label: 'Share on Journal du Hacker',
-  medium: 'journal-du-hacker',
-  url: '#',
-};
-
-/**
- * Sharing Link Stories - LinkedIn
- */
-export const LinkedIn = Template.bind({});
-LinkedIn.args = {
-  label: 'Share on LinkedIn',
-  medium: 'linkedin',
-  url: '#',
-};
-
-/**
- * Sharing Link Stories - Twitter
- */
-export const Twitter = Template.bind({});
-Twitter.args = {
-  label: 'Share on Twitter',
-  medium: 'twitter',
-  url: '#',
-};
diff --git a/src/components/atoms/links/social-link/social-link.stories.ts b/src/components/atoms/links/social-link/social-link.stories.ts
new file mode 100644
index 0000000..f7f4302
--- /dev/null
+++ b/src/components/atoms/links/social-link/social-link.stories.ts
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SocialLink } from './social-link';
+
+const meta = {
+  component: SocialLink,
+  title: 'Atoms/Links/Social',
+} satisfies Meta<typeof SocialLink>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Github: Story = {
+  args: {
+    icon: 'Github',
+    label: 'Github profile',
+    url: '#github',
+  },
+};
+
+export const Gitlab: Story = {
+  args: {
+    icon: 'Gitlab',
+    label: 'Gitlab profile',
+    url: '#gitlab',
+  },
+};
+
+export const LinkedIn: Story = {
+  args: {
+    icon: 'LinkedIn',
+    label: 'LinkedIn profile',
+    url: '#linkedin',
+  },
+};
+
+export const Twitter: Story = {
+  args: {
+    icon: 'Twitter',
+    label: 'Twitter profile',
+    url: '#twitter',
+  },
+};
diff --git a/src/components/atoms/links/social-link/social-link.stories.tsx b/src/components/atoms/links/social-link/social-link.stories.tsx
deleted file mode 100644
index cfb4ac7..0000000
--- a/src/components/atoms/links/social-link/social-link.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { SocialLink } from './social-link';
-
-/**
- * SocialLink - Storybook Meta
- */
-export default {
-  title: 'Atoms/Links/Social',
-  component: SocialLink,
-  argTypes: {
-    url: {
-      control: {
-        type: null,
-      },
-      description: 'Social profile url.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof SocialLink>;
-
-const Template: ComponentStory<typeof SocialLink> = (args) => (
-  <SocialLink {...args} />
-);
-
-/**
- * Social Link Stories - Github
- */
-export const Github = Template.bind({});
-Github.args = {
-  icon: 'Github',
-  label: 'Github profile',
-  url: '#',
-};
-
-/**
- * Social Link Stories - Gitlab
- */
-export const Gitlab = Template.bind({});
-Gitlab.args = {
-  icon: 'Gitlab',
-  label: 'Gitlab profile',
-  url: '#',
-};
-
-/**
- * Social Link Stories - LinkedIn
- */
-export const LinkedIn = Template.bind({});
-LinkedIn.args = {
-  icon: 'LinkedIn',
-  label: 'LinkedIn profile',
-  url: '#',
-};
-
-/**
- * Social Link Stories - Twitter
- */
-export const Twitter = Template.bind({});
-Twitter.args = {
-  icon: 'Twitter',
-  label: 'Twitter profile',
-  url: '#',
-};
diff --git a/src/components/atoms/lists/description-list/description-list.stories.tsx b/src/components/atoms/lists/description-list/description-list.stories.tsx
index d051fcd..65efc28 100644
--- a/src/components/atoms/lists/description-list/description-list.stories.tsx
+++ b/src/components/atoms/lists/description-list/description-list.stories.tsx
@@ -1,150 +1,270 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Description } from './description';
 import { DescriptionList } from './description-list';
 import { Group } from './group';
 import { Term } from './term';
 
-/**
- * DescriptionList - Storybook Meta
- */
-export default {
-  title: 'Atoms/Lists/DescriptionList',
+const meta = {
   component: DescriptionList,
+  title: 'Atoms/Lists/Description List',
+} satisfies Meta<typeof DescriptionList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Default: Story = {
+  args: {
+    children: [
+      <Term key="term">A term</Term>,
+      <Description key="description">A description of the term.</Description>,
+    ],
+  },
+};
+
+export const SingleTermSingleDescription: Story = {
+  args: {
+    ...Default.args,
+  },
+};
+
+export const MultipleTermsSingleDescription: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <Term key="term-1">First term</Term>,
+      <Term key="term-2">Second term</Term>,
+      <Term key="term-3">Third term</Term>,
+      <Description key="description-1">Description of the terms</Description>,
+    ],
+  },
+};
+
+export const SingleTermMultipleDescriptions: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <Term key="term-1">A term</Term>,
+      <Description key="description-1">
+        First description of the term
+      </Description>,
+      <Description key="description-2">
+        Second description of the term
+      </Description>,
+      <Description key="description-3">
+        Third description of the term
+      </Description>,
+    ],
+  },
+};
+
+export const MultipleTermsMultipleDescriptions: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <Term key="term-1">First term</Term>,
+      <Description key="description-1">
+        Description of the first term
+      </Description>,
+      <Term key="term-2">Second term</Term>,
+      <Term key="term-2-alternative">Alternative of second term</Term>,
+      <Description key="description-2">
+        Description of the second term
+      </Description>,
+      <Term key="term-3">Third term</Term>,
+      <Description key="first-description-3">
+        First description of the third term
+      </Description>,
+      <Description key="second-description-3">
+        Second description of the third term
+      </Description>,
+    ],
+  },
+};
+
+export const GroupOfMultipleTermsMultipleDescriptions: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <Group key="group-1">
+        <Term>First term</Term>
+        <Description>Description of the first term</Description>
+      </Group>,
+      <Group key="group-2">
+        <Term>Second term</Term>
+        <Term>Alternative of second term</Term>
+        <Description>Description of the second term</Description>
+      </Group>,
+      <Group key="group-3">
+        <Term>Third term</Term>
+        <Description>First description of the third term</Description>
+        <Description>Second description of the third term</Description>
+      </Group>,
+    ],
+  },
+};
+
+export const SpacingXXSWithoutGroup: Story = {
+  name: 'Spacing: Double extra-small (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: '2xs',
+  },
+};
+
+export const SpacingXSWithoutGroup: Story = {
+  name: 'Spacing: Extra-small (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: 'xs',
+  },
+};
+
+export const SpacingSMWithoutGroup: Story = {
+  name: 'Spacing: Small (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: 'sm',
+  },
+};
+
+export const SpacingMDWithoutGroup: Story = {
+  name: 'Spacing: Medium (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: 'md',
+  },
+};
+
+export const SpacingLGWithoutGroup: Story = {
+  name: 'Spacing: Large (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: 'lg',
+  },
+};
+
+export const SpacingXLWithoutGroup: Story = {
+  name: 'Spacing: Extra-large (without group)',
   args: {
-    isInline: false,
-  },
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the list wrapper',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof DescriptionList>;
-
-const Template: ComponentStory<typeof DescriptionList> = (args) => (
-  <DescriptionList {...args} />
-);
-
-/**
- * Description List Stories - Single term, single description
- */
-export const SingleTermSingleDescription = Template.bind({});
-SingleTermSingleDescription.args = {
-  children: (
-    <>
-      <Term>A term</Term>
-      <Description>A description of the term.</Description>
-    </>
-  ),
-};
-
-/**
- * Description List Stories - Multiple terms, single description
- */
-export const MultipleTermsSingleDescription = Template.bind({});
-MultipleTermsSingleDescription.args = {
-  children: (
-    <>
-      <Term>A first term</Term>
-      <Term>A second term</Term>
-      <Term>A third term</Term>
-      <Description>A description of the term.</Description>
-    </>
-  ),
-};
-
-/**
- * Description List Stories - Single term, multiple descriptions
- */
-export const SingleTermMultipleDescriptions = Template.bind({});
-SingleTermMultipleDescriptions.args = {
-  children: (
-    <>
-      <Term>A term</Term>
-      <Description>A first description of the term.</Description>
-      <Description>A second description of the term.</Description>
-      <Description>A third description of the term.</Description>
-    </>
-  ),
-};
-
-/**
- * Description List Stories - Multiple terms, multiple descriptions
- */
-export const MultipleTermsMultipleDescriptions = Template.bind({});
-MultipleTermsMultipleDescriptions.args = {
-  children: (
-    <>
-      <Term>A first term</Term>
-      <Term>A second term</Term>
-      <Term>A third term</Term>
-      <Description>A first description of the term.</Description>
-      <Description>A second description of the term.</Description>
-      <Description>A third description of the term.</Description>
-    </>
-  ),
-};
-
-/**
- * Description List Stories - Group of terms & descriptions
- */
-export const GroupOfTermsDescriptions = Template.bind({});
-GroupOfTermsDescriptions.args = {
-  children: (
-    <>
-      <Group>
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: 'xl',
+  },
+};
+
+export const SpacingXXLWithoutGroup: Story = {
+  name: 'Spacing: Double extra-large (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: '2xl',
+  },
+};
+
+export const SpacingXXSWithGroup: Story = {
+  name: 'Spacing: Double extra-small (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: '2xs',
+  },
+};
+
+export const SpacingXSWithGroup: Story = {
+  name: 'Spacing: Extra-small (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: 'xs',
+  },
+};
+
+export const SpacingSMWithGroup: Story = {
+  name: 'Spacing: Small (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: 'sm',
+  },
+};
+
+export const SpacingMDWithGroup: Story = {
+  name: 'Spacing: Medium (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: 'md',
+  },
+};
+
+export const SpacingLGWithGroup: Story = {
+  name: 'Spacing: Large (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: 'lg',
+  },
+};
+
+export const SpacingXLWithGroup: Story = {
+  name: 'Spacing: Extra-large (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: 'xl',
+  },
+};
+
+export const SpacingXXLWithGroup: Story = {
+  name: 'Spacing: Double extra-large (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: '2xl',
+  },
+};
+
+export const InlinedWithoutGroups: Story = {
+  name: 'Alignment: inlined without groups',
+  args: {
+    ...Default.args,
+    children: [
+      <Term key="term1">A term</Term>,
+      <Description key="description1">A description.</Description>,
+      <Term key="term2">Another term</Term>,
+      <Description key="description2">Another description.</Description>,
+    ],
+    isInline: true,
+    spacing: 'xs',
+  },
+};
+
+export const InlinedWithGroups: Story = {
+  name: 'Alignment: inlined with groups',
+  args: {
+    ...Default.args,
+    children: [
+      <Group key="group1">
         <Term>A term</Term>
-        <Description>A description of the term.</Description>
-      </Group>
-      <Group>
+        <Description>A description.</Description>
+      </Group>,
+      <Group key="group2">
         <Term>Another term</Term>
-        <Description>A description of the other term.</Description>
-      </Group>
-    </>
-  ),
-};
-
-/**
- * Description List Stories - Inlined list of term and descriptions
- */
-export const InlinedList = Template.bind({});
-InlinedList.args = {
-  children: (
-    <>
-      <Term>A term:</Term>
-      <Description>A first description of the term.</Description>
-      <Description>A second description of the term.</Description>
-      <Description>A third description of the term.</Description>
-    </>
-  ),
-  isInline: true,
-  spacing: 'xs',
-};
-
-/**
- * Description List Stories - Inlined group of terms & descriptions
- */
-export const InlinedGroupOfTermsDescriptions = Template.bind({});
-InlinedGroupOfTermsDescriptions.args = {
-  children: (
-    <>
-      <Group isInline spacing="2xs">
-        <Term>A term:</Term>
-        <Description>A description of the term.</Description>
-      </Group>
-      <Group isInline spacing="2xs">
-        <Term>Another term:</Term>
-        <Description>A description of the other term.</Description>
-      </Group>
-    </>
-  ),
+        <Description>Another description.</Description>
+      </Group>,
+    ],
+    isInline: true,
+    spacing: 'xs',
+  },
+};
+
+export const InlinedWithInlinedGroups: Story = {
+  name: 'Alignment: inlined with inlined groups',
+  args: {
+    ...Default.args,
+    children: [
+      <Group key="group1" isInline spacing="xs">
+        <Term>A term</Term>
+        <Description>A description.</Description>
+      </Group>,
+      <Group key="group2" isInline spacing="xs">
+        <Term>Another term</Term>
+        <Description>Another description.</Description>
+      </Group>,
+    ],
+    isInline: true,
+    spacing: 'xs',
+  },
 };
diff --git a/src/components/atoms/lists/list/list.stories.tsx b/src/components/atoms/lists/list/list.stories.tsx
index 538947a..6e7d254 100644
--- a/src/components/atoms/lists/list/list.stories.tsx
+++ b/src/components/atoms/lists/list/list.stories.tsx
@@ -1,196 +1,140 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { List, type ListProps } from './list';
+import type { Meta, StoryObj } from '@storybook/react';
+import { List } from './list';
 import { ListItem } from './list-item';
 
-/**
- * List - Storybook Meta
- */
-export default {
-  title: 'Atoms/Lists',
+const meta = {
   component: List,
-  args: {},
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the list wrapper',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof List>;
+  title: 'Atoms/Lists/List',
+} satisfies Meta<typeof List>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-const Template: ComponentStory<typeof List> = <
-  O extends boolean,
-  H extends boolean,
->(
-  args: ListProps<O, H>
-) => <List {...args} />;
+export const Default: Story = {
+  args: {
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="item-2">Item 2</ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+  },
+};
 
-/**
- * List Stories - Hierarchical list
- */
-export const Hierarchical = Template.bind({});
-Hierarchical.args = {
-  children: [
-    <ListItem key="item-1">
-      Item 1
-      <List isHierarchical isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>Subitem 2</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-2">
-      Item 2
-      <List isHierarchical isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>
-          Subitem 2
-          <List isHierarchical isOrdered>
-            <ListItem>Nested item 1</ListItem>
-            <ListItem>Nested item 2</ListItem>
-          </List>
-        </ListItem>
-        <ListItem>Subitem 3</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-3">Item 3</ListItem>,
-  ],
-  isHierarchical: true,
+export const OrderedList: Story = {
+  args: {
+    ...Default.args,
+    isOrdered: true,
+  },
 };
 
-/**
- * List Stories - Ordered list
- */
-export const Ordered = Template.bind({});
-Ordered.args = {
-  children: [
-    <ListItem key="item-1">
-      Item 1
-      <List isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>Subitem 2</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-2">
-      Item 2
-      <List isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>
-          Subitem 2
-          <List isOrdered>
-            <ListItem>Nested item 1</ListItem>
-            <ListItem>Nested item 2</ListItem>
-          </List>
-        </ListItem>
-        <ListItem>Subitem 3</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-3">Item 3</ListItem>,
-  ],
-  isOrdered: true,
+export const UnorderedList: Story = {
+  args: {
+    ...Default.args,
+    isOrdered: false,
+  },
 };
 
-/**
- * List Stories - Unordered list
- */
-export const Unordered = Template.bind({});
-Unordered.args = {
-  children: [
-    <ListItem key="item-1">
-      Item 1
-      <List>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>Subitem 2</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-2">
-      Item 2
-      <List isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>
-          Subitem 2
-          <List>
-            <ListItem>Nested item 1</ListItem>
-            <ListItem>Nested item 2</ListItem>
-          </List>
-        </ListItem>
-        <ListItem>Subitem 3</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-3">Item 3</ListItem>,
-  ],
+export const Nested: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="item-2">
+        Item 2
+        <List isOrdered>
+          <ListItem>Nested item 1</ListItem>
+          <ListItem>Nested item 2</ListItem>
+          <ListItem>
+            Nested item 3
+            <List>
+              <ListItem>Deeper item 1</ListItem>
+              <ListItem>Deeper item 2</ListItem>
+              <ListItem>Deeper item 3</ListItem>
+            </List>
+          </ListItem>
+        </List>
+      </ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+    isOrdered: false,
+  },
 };
 
-const items = [
-  { id: 'item-1', label: 'Item 1' },
-  { id: 'item-2', label: 'Item 2' },
-  {
-    id: 'item-3',
-    label: (
-      <>
-        Item 3
-        <List>
+export const HierarchicalList: Story = {
+  args: {
+    ...OrderedList.args,
+    children: [
+      <ListItem key="item-1">
+        Item 1
+        <List isHierarchical isOrdered>
           <ListItem>Subitem 1</ListItem>
           <ListItem>Subitem 2</ListItem>
         </List>
-      </>
-    ),
+      </ListItem>,
+      <ListItem key="item-2">
+        Item 2
+        <List isHierarchical isOrdered>
+          <ListItem>Subitem 1</ListItem>
+          <ListItem>
+            Subitem 2
+            <List isHierarchical isOrdered>
+              <ListItem>Nested item 1</ListItem>
+              <ListItem>Nested item 2</ListItem>
+            </List>
+          </ListItem>
+          <ListItem>Subitem 3</ListItem>
+        </List>
+      </ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+    isHierarchical: true,
   },
-  { id: 'item-4', label: 'Item 4' },
-  { id: 'item-5', label: 'Item 5' },
-];
+};
 
-/**
- * List Stories - Inline and ordered list
- */
-export const InlineOrdered = Template.bind({});
-InlineOrdered.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  isInline: true,
-  isOrdered: true,
-  spacing: 'sm',
+export const WithMarker: Story = {
+  args: {
+    ...Default.args,
+    hideMarker: false,
+  },
 };
 
-/**
- * List Stories - Inline and unordered list
- */
-export const InlineUnordered = Template.bind({});
-InlineUnordered.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  isInline: true,
-  spacing: 'sm',
+export const WithoutMarker: Story = {
+  args: {
+    ...Default.args,
+    hideMarker: true,
+  },
 };
 
-/**
- * List Stories - Ordered list without marker
- */
-export const OrderedHideMarker = Template.bind({});
-OrderedHideMarker.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  hideMarker: true,
-  isOrdered: true,
+export const InlineList: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="sep-1">{'>'}</ListItem>,
+      <ListItem key="item-2">Item 2</ListItem>,
+      <ListItem key="sep-2">{'>'}</ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+    hideMarker: true,
+    isInline: true,
+    spacing: 'xs',
+  },
 };
 
-/**
- * List Stories - Unordered list without marker
- */
-export const UnorderedHideMarker = Template.bind({});
-UnorderedHideMarker.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  hideMarker: true,
+export const ListInInlineList: Story = {
+  args: {
+    ...InlineList.args,
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="item-2">
+        Item 2
+        <List>
+          <ListItem>Nested item 1</ListItem>
+          <ListItem>Nested item 2</ListItem>
+        </List>
+      </ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+  },
 };
diff --git a/src/components/atoms/loaders/progress-bar/progress-bar.stories.ts b/src/components/atoms/loaders/progress-bar/progress-bar.stories.ts
new file mode 100644
index 0000000..82f6f18
--- /dev/null
+++ b/src/components/atoms/loaders/progress-bar/progress-bar.stories.ts
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProgressBar } from './progress-bar';
+
+const meta = {
+  component: ProgressBar,
+  title: 'Atoms/Loaders/ProgressBar',
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const max = 50;
+const current = 10;
+const label = `${current} loaded out of a total of ${max}`;
+
+export const Example: Story = {
+  args: {
+    current,
+    label,
+    max,
+  },
+};
diff --git a/src/components/atoms/loaders/progress-bar/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar/progress-bar.stories.tsx
deleted file mode 100644
index fb600fb..0000000
--- a/src/components/atoms/loaders/progress-bar/progress-bar.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ProgressBar as ProgressBarComponent } from './progress-bar';
-
-/**
- * ProgressBar - Storybook Meta
- */
-export default {
-  title: 'Atoms/Loaders',
-  component: ProgressBarComponent,
-  argTypes: {
-    current: {
-      control: {
-        type: 'number',
-      },
-      description: 'The current value.',
-      type: {
-        name: 'number',
-        required: true,
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'The progress bar label.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    max: {
-      control: {
-        type: 'number',
-      },
-      description: 'The maximal value.',
-      type: {
-        name: 'number',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof ProgressBarComponent>;
-
-const Template: ComponentStory<typeof ProgressBarComponent> = (args) => (
-  <ProgressBarComponent {...args} />
-);
-
-const max = 50;
-const current = 10;
-const label = `${current} loaded out of a total of ${max}`;
-
-/**
- * Loaders Stories - Progress bar
- */
-export const ProgressBar = Template.bind({});
-ProgressBar.args = {
-  current,
-  label,
-  max,
-};
diff --git a/src/components/atoms/loaders/spinner/spinner.stories.ts b/src/components/atoms/loaders/spinner/spinner.stories.ts
new file mode 100644
index 0000000..63d7f21
--- /dev/null
+++ b/src/components/atoms/loaders/spinner/spinner.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from './spinner';
+
+const meta = {
+  component: Spinner,
+  title: 'Atoms/Loaders/Spinner',
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    'aria-label': 'A spinner example',
+  },
+};
+
+export const WithTextOnBottom: Story = {
+  args: {
+    children: 'A spinner example',
+    position: 'bottom',
+  },
+};
+
+export const WithTextOnLeft: Story = {
+  args: {
+    children: 'A spinner example',
+    position: 'left',
+  },
+};
+
+export const WithTextOnRight: Story = {
+  args: {
+    children: 'A spinner example',
+    position: 'right',
+  },
+};
+
+export const WithTextOnTop: Story = {
+  args: {
+    children: 'A spinner example',
+    position: 'top',
+  },
+};
diff --git a/src/components/atoms/loaders/spinner/spinner.stories.tsx b/src/components/atoms/loaders/spinner/spinner.stories.tsx
deleted file mode 100644
index e9dfae4..0000000
--- a/src/components/atoms/loaders/spinner/spinner.stories.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Spinner as SpinnerComponent } from './spinner';
-
-/**
- * Spinner - Storybook Meta
- */
-export default {
-  title: 'Atoms/Loaders',
-  component: SpinnerComponent,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'Loading message.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof SpinnerComponent>;
-
-const Template: ComponentStory<typeof SpinnerComponent> = (args) => (
-  <SpinnerComponent {...args} />
-);
-
-/**
- * Loaders Stories - Spinner
- */
-export const Spinner = Template.bind({});
-Spinner.args = {
-  children: 'Submitting...',
-};
diff --git a/src/components/atoms/notice/notice.stories.ts b/src/components/atoms/notice/notice.stories.ts
new file mode 100644
index 0000000..1f0723b
--- /dev/null
+++ b/src/components/atoms/notice/notice.stories.ts
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Notice } from './notice';
+
+const meta = {
+  component: Notice,
+  title: 'Atoms/Notice',
+} satisfies Meta<typeof Notice>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ErrorKind: Story = {
+  args: {
+    children: 'Nisi provident sapiente.',
+    kind: 'error',
+  },
+};
+
+export const InfoKind: Story = {
+  args: {
+    children: 'Nisi provident sapiente.',
+    kind: 'info',
+  },
+};
+
+export const SuccessKind: Story = {
+  args: {
+    children: 'Nisi provident sapiente.',
+    kind: 'success',
+  },
+};
+
+export const WarningKind: Story = {
+  args: {
+    children: 'Nisi provident sapiente.',
+    kind: 'warning',
+  },
+};
diff --git a/src/components/atoms/notice/notice.stories.tsx b/src/components/atoms/notice/notice.stories.tsx
deleted file mode 100644
index 60d97d9..0000000
--- a/src/components/atoms/notice/notice.stories.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Notice as NoticeComponent } from './notice';
-
-/**
- * Notice - Storybook Meta
- */
-export default {
-  title: 'Atoms/Notice',
-  component: NoticeComponent,
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the notice wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'The notice kind.',
-      options: ['error', 'info', 'success', 'warning'],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The notice body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof NoticeComponent>;
-
-const Template: ComponentStory<typeof NoticeComponent> = (args) => (
-  <NoticeComponent {...args} />
-);
-
-/**
- * Notice stories - Error
- */
-export const ErrorKind = Template.bind({});
-ErrorKind.args = {
-  children: 'Nisi provident sapiente.',
-  kind: 'error',
-};
-
-/**
- * Notice stories - Info
- */
-export const InfoKind = Template.bind({});
-InfoKind.args = {
-  children: 'Nisi provident sapiente.',
-  kind: 'info',
-};
-
-/**
- * Notice stories - Success
- */
-export const SuccessKind = Template.bind({});
-SuccessKind.args = {
-  children: 'Nisi provident sapiente.',
-  kind: 'success',
-};
-
-/**
- * Notice stories - Warning
- */
-export const WarningKind = Template.bind({});
-WarningKind.args = {
-  children: 'Nisi provident sapiente.',
-  kind: 'warning',
-};
diff --git a/src/components/atoms/overlay/overlay.stories.tsx b/src/components/atoms/overlay/overlay.stories.tsx
index f9c478c..5c56d6a 100644
--- a/src/components/atoms/overlay/overlay.stories.tsx
+++ b/src/components/atoms/overlay/overlay.stories.tsx
@@ -1,63 +1,65 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useToggle } from '../../../utils/hooks';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useCallback, useState } from 'react';
 import { Button } from '../buttons';
-import { Overlay } from './overlay';
+import { Overlay, type OverlayProps } from './overlay';
 
-/**
- * Overlay - Storybook Meta
- */
-export default {
-  title: 'Atoms/Overlay',
-  component: Overlay,
-  argTypes: {},
-} as ComponentMeta<typeof Overlay>;
+type OverlayTemplateProps = OverlayProps & {
+  isActive?: boolean;
+};
 
-const Template: ComponentStory<typeof Overlay> = ({ isVisible, ...props }) => {
-  const [isActive, toggle] = useToggle(isVisible);
+const OverlayTemplate = ({
+  isActive: active = false,
+  ...props
+}: OverlayTemplateProps) => {
+  const [isActive, setIsActive] = useState(active);
+
+  const handleClick = useCallback(() => {
+    setIsActive((prev) => !prev);
+  }, []);
 
   return (
     <div>
       <p>
-        Itaque reprehenderit sint rerum placeat et sapiente similique ut
-        distinctio. Libero illo reprehenderit qui quaerat dolorem. Officiis
-        asperiores sapiente eaque. Aut numquam porro quasi delectus excepturi
-        aut eaque et. Commodi et necessitatibus provident blanditiis rem qui
-        atque.
+        Ad eos id. In nihil fugit nisi dolorem numquam fuga aut quod voluptatem.
+        Dicta id nisi quia laboriosam sit ipsam deserunt ex. Omnis quia error
+        ipsum ea numquam quia veniam omnis voluptatem. Dolor corrupti mollitia
+        quod fugit est animi totam sed.
       </p>
       <p>
-        Aut architecto vitae dolor hic explicabo iure quia quae beatae.
-        Exercitationem nulla dignissimos doloribus sunt at nisi. A modi quasi
-        est sed quas repellendus vel sed dolores. Sed neque aperiam adipisci eos
-        autem. Libero omnis quis aut quas omnis magni harum et.
+        Eum et laudantium eaque cumque. Voluptatem voluptas fugit incidunt quos
+        voluptatibus velit et voluptatem laboriosam. Et voluptas ut quia
+        mollitia eum voluptatem. Similique cum ratione ea illo autem facilis
+        laudantium.
       </p>
-      <Button onClick={toggle}>Open overlay</Button>
-      <Overlay {...props} isVisible={isActive} onClick={toggle} />
+      <Button onClick={handleClick}>Open overlay</Button>
+      {isActive ? <Overlay {...props} onClick={handleClick} /> : null}
     </div>
   );
 };
 
-/**
- * Overlay Stories - Hidden
- */
-export const Hidden = Template.bind({});
-Hidden.args = {
-  children: (
-    <div style={{ background: '#FFF', margin: '1rem', padding: '1rem' }}>
-      Some modal contents.
-    </div>
-  ),
-  isVisible: false,
-};
+const meta = {
+  title: 'Atoms/Overlay',
+  component: Overlay,
+  render: OverlayTemplate,
+} satisfies Meta<typeof Overlay>;
 
-/**
- * Overlay Stories - Visible
- */
-export const Visible = Template.bind({});
-Visible.args = {
-  children: (
-    <div style={{ background: '#FFF', margin: '1rem', padding: '1rem' }}>
-      Some modal contents.
-    </div>
-  ),
-  isVisible: true,
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div
+        style={{
+          background: '#FFF',
+          padding: '1rem',
+          margin: '1rem',
+        }}
+      >
+        The modal contents.
+      </div>
+    ),
+    isActive: true,
+  },
 };
diff --git a/src/components/atoms/sidebar/sidebar.stories.ts b/src/components/atoms/sidebar/sidebar.stories.ts
new file mode 100644
index 0000000..f3883b9
--- /dev/null
+++ b/src/components/atoms/sidebar/sidebar.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Sidebar } from './sidebar';
+
+const meta = {
+  component: Sidebar,
+  title: 'Atoms/Sidebar',
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    children: 'Some widgets.',
+  },
+};
diff --git a/src/components/atoms/sidebar/sidebar.stories.tsx b/src/components/atoms/sidebar/sidebar.stories.tsx
deleted file mode 100644
index 4debb41..0000000
--- a/src/components/atoms/sidebar/sidebar.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Sidebar as SidebarComponent } from './sidebar';
-
-/**
- * Sidebar - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout',
-  component: SidebarComponent,
-  argTypes: {
-    'aria-label': {
-      control: {
-        type: 'text',
-      },
-      description: 'An accessible name for the sidebar.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The sidebar content.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the aside element.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof SidebarComponent>;
-
-const Template: ComponentStory<typeof SidebarComponent> = (args) => (
-  <SidebarComponent {...args} />
-);
-
-/**
- * Layout Stories - Sidebar
- */
-export const Sidebar = Template.bind({});
-Sidebar.args = {
-  children: 'Some widgets.',
-};
diff --git a/src/components/atoms/visually-hidden/visually-hidden.stories.tsx b/src/components/atoms/visually-hidden/visually-hidden.stories.tsx
index 24ac921..f2868fd 100644
--- a/src/components/atoms/visually-hidden/visually-hidden.stories.tsx
+++ b/src/components/atoms/visually-hidden/visually-hidden.stories.tsx
@@ -1,48 +1,30 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Link } from '../links';
+import type { Meta, StoryObj } from '@storybook/react';
 import { VisuallyHidden } from './visually-hidden';
 
-/**
- * Sidebar - Storybook Meta
- */
-export default {
-  title: 'Atoms/VisuallyHidden',
+const meta = {
   component: VisuallyHidden,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The contents to visually hide.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof VisuallyHidden>;
+  title: 'Atoms/Visually Hidden',
+} satisfies Meta<typeof VisuallyHidden>;
+
+export default meta;
 
-const Template: ComponentStory<typeof VisuallyHidden> = (args) => (
-  <VisuallyHidden {...args} />
-);
+type Story = StoryObj<typeof meta>;
 
-/**
- * VisuallyHidden Stories - Not focusable
- */
-export const NotFocusable = Template.bind({});
-NotFocusable.args = {
-  children: 'Esse quia deserunt animi id sit voluptatem aperiam.',
+const VisuallyHiddenTemplate: Story = {
+  args: {
+    children: 'Some content not focusable.',
+  },
 };
 
-/**
- * VisuallyHidden Stories - Focusable
- */
-export const Focusable = Template.bind({});
-Focusable.args = {
-  children: (
-    <>
-      {'Esse quia deserunt animi id sit voluptatem aperiam. '}
-      <Link href="#">Any link.</Link>
-    </>
-  ),
+export const NotFocusable: Story = {
+  args: {
+    ...VisuallyHiddenTemplate.args,
+  },
+};
+
+export const Focusable: Story = {
+  args: {
+    ...VisuallyHiddenTemplate.args,
+    children: <a href="#anchor">A skip to anchor link</a>,
+  },
 };
-- 
cgit v1.2.3