From f861e6a269ba9f62700776d3cd13b644a9e836d4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 20 Sep 2023 16:38:54 +0200
Subject: refactor: use named export for everything except pages

Next expect a default export for pages so only those components should
use default exports. Everything else should use named exports to
reduce the number of import statements.
---
 .../organisms/forms/comment-form.stories.tsx       |  2 +-
 .../organisms/forms/comment-form.test.tsx          |  2 +-
 src/components/organisms/forms/comment-form.tsx    | 58 +++++++++++-----------
 .../organisms/forms/contact-form.stories.tsx       |  2 +-
 .../organisms/forms/contact-form.test.tsx          |  2 +-
 src/components/organisms/forms/contact-form.tsx    | 44 ++++++++--------
 src/components/organisms/forms/index.ts            |  3 ++
 .../organisms/forms/search-form.stories.tsx        |  2 +-
 .../organisms/forms/search-form.test.tsx           |  2 +-
 src/components/organisms/forms/search-form.tsx     | 30 +++++------
 .../organisms/images/gallery.stories.tsx           |  4 +-
 src/components/organisms/images/gallery.test.tsx   |  4 +-
 src/components/organisms/images/gallery.tsx        |  6 +--
 src/components/organisms/images/index.ts           |  1 +
 src/components/organisms/index.ts                  |  6 +++
 .../organisms/layout/cards-list.stories.tsx        |  5 +-
 .../organisms/layout/cards-list.test.tsx           |  2 +-
 src/components/organisms/layout/cards-list.tsx     | 14 +++---
 .../organisms/layout/comment.fixture.tsx           |  5 +-
 .../organisms/layout/comment.stories.tsx           | 10 ++--
 src/components/organisms/layout/comment.test.tsx   |  2 +-
 src/components/organisms/layout/comment.tsx        | 27 +++++-----
 .../organisms/layout/comments-list.stories.tsx     | 10 ++--
 .../organisms/layout/comments-list.test.tsx        |  2 +-
 src/components/organisms/layout/comments-list.tsx  |  8 ++-
 src/components/organisms/layout/footer.stories.tsx |  2 +-
 src/components/organisms/layout/footer.test.tsx    |  2 +-
 src/components/organisms/layout/footer.tsx         | 22 ++++----
 src/components/organisms/layout/header.stories.tsx |  2 +-
 src/components/organisms/layout/header.test.tsx    |  2 +-
 src/components/organisms/layout/header.tsx         |  8 ++-
 src/components/organisms/layout/index.ts           |  9 ++++
 .../organisms/layout/no-results.stories.tsx        |  2 +-
 .../organisms/layout/no-results.test.tsx           |  2 +-
 src/components/organisms/layout/no-results.tsx     |  8 +--
 .../organisms/layout/overview.stories.tsx          |  2 +-
 src/components/organisms/layout/overview.test.tsx  |  2 +-
 src/components/organisms/layout/overview.tsx       | 18 ++++---
 .../organisms/layout/posts-list.stories.tsx        |  2 +-
 .../organisms/layout/posts-list.test.tsx           |  2 +-
 src/components/organisms/layout/posts-list.tsx     | 26 +++++-----
 .../organisms/layout/summary.stories.tsx           |  2 +-
 src/components/organisms/layout/summary.test.tsx   |  2 +-
 src/components/organisms/layout/summary.tsx        | 33 ++++++------
 src/components/organisms/modals/index.ts           |  2 +
 .../organisms/modals/search-modal.stories.tsx      |  2 +-
 .../organisms/modals/search-modal.test.tsx         |  2 +-
 src/components/organisms/modals/search-modal.tsx   | 20 ++++----
 .../organisms/modals/settings-modal.stories.tsx    |  2 +-
 .../organisms/modals/settings-modal.test.tsx       |  2 +-
 src/components/organisms/modals/settings-modal.tsx | 33 ++++++------
 src/components/organisms/toolbar/index.ts          |  4 ++
 .../organisms/toolbar/main-nav.stories.tsx         |  2 +-
 src/components/organisms/toolbar/main-nav.test.tsx |  2 +-
 src/components/organisms/toolbar/main-nav.tsx      | 31 ++++++------
 .../organisms/toolbar/search.stories.tsx           |  2 +-
 src/components/organisms/toolbar/search.test.tsx   |  2 +-
 src/components/organisms/toolbar/search.tsx        | 19 +++----
 .../organisms/toolbar/settings.stories.tsx         |  2 +-
 src/components/organisms/toolbar/settings.test.tsx |  2 +-
 src/components/organisms/toolbar/settings.tsx      | 20 ++++----
 .../organisms/toolbar/toolbar.stories.tsx          |  2 +-
 src/components/organisms/toolbar/toolbar.test.tsx  |  2 +-
 src/components/organisms/toolbar/toolbar.tsx       | 25 ++++------
 .../organisms/widgets/image-widget.stories.tsx     |  2 +-
 .../organisms/widgets/image-widget.test.tsx        |  2 +-
 src/components/organisms/widgets/image-widget.tsx  | 16 +++---
 src/components/organisms/widgets/index.ts          |  5 ++
 .../widgets/links-list-widget.stories.tsx          |  2 +-
 .../organisms/widgets/links-list-widget.test.tsx   |  2 +-
 .../organisms/widgets/links-list-widget.tsx        | 19 +++----
 .../organisms/widgets/sharing.stories.tsx          |  2 +-
 src/components/organisms/widgets/sharing.test.tsx  |  2 +-
 src/components/organisms/widgets/sharing.tsx       | 12 ++---
 .../organisms/widgets/social-media.stories.tsx     |  2 +-
 .../organisms/widgets/social-media.test.tsx        |  2 +-
 src/components/organisms/widgets/social-media.tsx  | 10 ++--
 .../widgets/table-of-contents.stories.tsx          |  2 +-
 .../organisms/widgets/table-of-contents.test.tsx   |  2 +-
 .../organisms/widgets/table-of-contents.tsx        | 16 +++---
 80 files changed, 335 insertions(+), 342 deletions(-)
 create mode 100644 src/components/organisms/forms/index.ts
 create mode 100644 src/components/organisms/images/index.ts
 create mode 100644 src/components/organisms/index.ts
 create mode 100644 src/components/organisms/layout/index.ts
 create mode 100644 src/components/organisms/modals/index.ts
 create mode 100644 src/components/organisms/toolbar/index.ts
 create mode 100644 src/components/organisms/widgets/index.ts

(limited to 'src/components/organisms')

diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx
index 1a9e7b7..a6069e6 100644
--- a/src/components/organisms/forms/comment-form.stories.tsx
+++ b/src/components/organisms/forms/comment-form.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CommentForm from './comment-form';
+import { CommentForm } from './comment-form';
 
 const saveComment = async () => {
   /** Do nothing. */
diff --git a/src/components/organisms/forms/comment-form.test.tsx b/src/components/organisms/forms/comment-form.test.tsx
index 10119ce..f11c449 100644
--- a/src/components/organisms/forms/comment-form.test.tsx
+++ b/src/components/organisms/forms/comment-form.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import CommentForm from './comment-form';
+import { CommentForm } from './comment-form';
 
 const saveComment = async () => {
   /** Do nothing. */
diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx
index a823977..e4140dd 100644
--- a/src/components/organisms/forms/comment-form.tsx
+++ b/src/components/organisms/forms/comment-form.tsx
@@ -1,13 +1,15 @@
 import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
-import Button from '../../atoms/buttons/button';
-import Form, { type FormProps } from '../../atoms/forms/form';
-import Heading, {
-  type HeadingProps,
+import {
+  Button,
+  Form,
+  type FormProps,
+  Heading,
   type HeadingLevel,
-} from '../../atoms/headings/heading';
-import Spinner from '../../atoms/loaders/spinner';
-import LabelledField from '../../molecules/forms/labelled-field';
+  type HeadingProps,
+  Spinner,
+} from '../../atoms';
+import { LabelledField } from '../../molecules';
 import styles from './comment-form.module.scss';
 
 export type CommentFormData = {
@@ -46,7 +48,7 @@ export type CommentFormProps = Pick<FormProps, 'className'> & {
   titleLevel?: HeadingLevel;
 };
 
-const CommentForm: FC<CommentFormProps> = ({
+export const CommentForm: FC<CommentFormProps> = ({
   Notice,
   parentId,
   saveComment,
@@ -119,55 +121,55 @@ const CommentForm: FC<CommentFormProps> = ({
 
   return (
     <Form
-      onSubmit={submitHandler}
+      {...props}
       aria-label={formAriaLabel}
       aria-labelledby={formLabelledBy}
-      {...props}
+      onSubmit={submitHandler}
     >
       {title && (
-        <Heading id={formId} level={titleLevel} alignment={titleAlignment}>
+        <Heading alignment={titleAlignment} id={formId} level={titleLevel}>
           {title}
         </Heading>
       )}
       <LabelledField
-        type="text"
+        className={styles.field}
         id="commenter-name"
-        name="commenter-name"
         label={nameLabel}
+        name="commenter-name"
         required={true}
-        value={name}
         setValue={setName}
-        className={styles.field}
+        type="text"
+        value={name}
       />
       <LabelledField
-        type="email"
+        className={styles.field}
         id="commenter-email"
-        name="commenter-email"
         label={emailLabel}
+        name="commenter-email"
         required={true}
-        value={email}
         setValue={setEmail}
-        className={styles.field}
+        type="email"
+        value={email}
       />
       <LabelledField
-        type="text"
+        className={styles.field}
         id="commenter-website"
-        name="commenter-website"
         label={websiteLabel}
+        name="commenter-website"
         required={false}
-        value={website}
         setValue={setWebsite}
-        className={styles.field}
+        type="text"
+        value={website}
       />
       <LabelledField
-        type="textarea"
+        className={styles.field}
         id="commenter-comment"
-        name="commenter-comment"
         label={commentLabel}
+        name="commenter-comment"
         required={true}
-        value={comment}
         setValue={setComment}
-        className={styles.field}
+        type="textarea"
+        value={comment}
       />
       <Button type="submit" kind="primary" className={styles.button}>
         {intl.formatMessage({
@@ -189,5 +191,3 @@ const CommentForm: FC<CommentFormProps> = ({
     </Form>
   );
 };
-
-export default CommentForm;
diff --git a/src/components/organisms/forms/contact-form.stories.tsx b/src/components/organisms/forms/contact-form.stories.tsx
index 191d448..4df3db0 100644
--- a/src/components/organisms/forms/contact-form.stories.tsx
+++ b/src/components/organisms/forms/contact-form.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ContactForm from './contact-form';
+import { ContactForm } from './contact-form';
 
 /**
  * ContactForm - Storybook Meta
diff --git a/src/components/organisms/forms/contact-form.test.tsx b/src/components/organisms/forms/contact-form.test.tsx
index def4346..8e27cd0 100644
--- a/src/components/organisms/forms/contact-form.test.tsx
+++ b/src/components/organisms/forms/contact-form.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import ContactForm from './contact-form';
+import { ContactForm } from './contact-form';
 
 const props = {
   sendMail: async () => {
diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx
index b8dcb5e..ca84c25 100644
--- a/src/components/organisms/forms/contact-form.tsx
+++ b/src/components/organisms/forms/contact-form.tsx
@@ -1,9 +1,7 @@
 import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
-import Button from '../../atoms/buttons/button';
-import Form from '../../atoms/forms/form';
-import Spinner from '../../atoms/loaders/spinner';
-import LabelledField from '../../molecules/forms/labelled-field';
+import { Button, Form, Spinner } from '../../atoms';
+import { LabelledField } from '../../molecules';
 import styles from './contact-form.module.scss';
 
 export type ContactFormData = {
@@ -33,7 +31,7 @@ export type ContactFormProps = {
  *
  * Render a contact form.
  */
-const ContactForm: FC<ContactFormProps> = ({
+export const ContactForm: FC<ContactFormProps> = ({
   className = '',
   Notice,
   sendMail,
@@ -94,45 +92,45 @@ const ContactForm: FC<ContactFormProps> = ({
   };
 
   return (
-    <Form aria-label={formName} onSubmit={submitHandler} className={className}>
+    <Form aria-label={formName} className={className} onSubmit={submitHandler}>
       <LabelledField
-        type="text"
+        className={styles.field}
         id="contact-name"
-        name="contact-name"
         label={nameLabel}
+        name="contact-name"
         required={true}
-        value={name}
         setValue={setName}
-        className={styles.field}
+        type="text"
+        value={name}
       />
       <LabelledField
-        type="email"
+        className={styles.field}
         id="contact-email"
-        name="contact-email"
         label={emailLabel}
+        name="contact-email"
         required={true}
-        value={email}
         setValue={setEmail}
-        className={styles.field}
+        type="email"
+        value={email}
       />
       <LabelledField
-        type="text"
+        className={styles.field}
         id="contact-object"
-        name="contact-object"
         label={objectLabel}
-        value={object}
+        name="contact-object"
         setValue={setObject}
-        className={styles.field}
+        type="text"
+        value={object}
       />
       <LabelledField
-        type="textarea"
+        className={styles.field}
         id="contact-message"
-        name="contact-message"
         label={messageLabel}
+        name="contact-message"
         required={true}
-        value={message}
         setValue={setMessage}
-        className={styles.field}
+        type="textarea"
+        value={message}
       />
       <Button type="submit" kind="primary" className={styles.button}>
         {intl.formatMessage({
@@ -154,5 +152,3 @@ const ContactForm: FC<ContactFormProps> = ({
     </Form>
   );
 };
-
-export default ContactForm;
diff --git a/src/components/organisms/forms/index.ts b/src/components/organisms/forms/index.ts
new file mode 100644
index 0000000..10eaf20
--- /dev/null
+++ b/src/components/organisms/forms/index.ts
@@ -0,0 +1,3 @@
+export * from './comment-form';
+export * from './contact-form';
+export * from './search-form';
diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx
index d8c8e1e..4a0a15c 100644
--- a/src/components/organisms/forms/search-form.stories.tsx
+++ b/src/components/organisms/forms/search-form.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SearchForm from './search-form';
+import { SearchForm } from './search-form';
 
 /**
  * SearchForm - Storybook Meta
diff --git a/src/components/organisms/forms/search-form.test.tsx b/src/components/organisms/forms/search-form.test.tsx
index 0f79caf..bc9b7a0 100644
--- a/src/components/organisms/forms/search-form.test.tsx
+++ b/src/components/organisms/forms/search-form.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import SearchForm from './search-form';
+import { SearchForm } from './search-form';
 
 describe('SearchForm', () => {
   it('renders a search input', () => {
diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx
index a3cb6e4..f80d295 100644
--- a/src/components/organisms/forms/search-form.tsx
+++ b/src/components/organisms/forms/search-form.tsx
@@ -1,12 +1,8 @@
 import { useRouter } from 'next/router';
 import { forwardRef, ForwardRefRenderFunction, useId, useState } from 'react';
 import { useIntl } from 'react-intl';
-import Button from '../../atoms/buttons/button';
-import Form from '../../atoms/forms/form';
-import MagnifyingGlass from '../../atoms/icons/magnifying-glass';
-import LabelledField, {
-  type LabelledFieldProps,
-} from '../../molecules/forms/labelled-field';
+import { Button, Form, MagnifyingGlass } from '../../atoms';
+import { LabelledField, type LabelledFieldProps } from '../../molecules';
 import styles from './search-form.module.scss';
 
 export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & {
@@ -16,12 +12,7 @@ export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & {
   searchPage: string;
 };
 
-/**
- * SearchForm component
- *
- * Render a search form.
- */
-const SearchForm: ForwardRefRenderFunction<
+const SearchFormWithRef: ForwardRefRenderFunction<
   HTMLInputElement,
   SearchFormProps
 > = ({ hideLabel, searchPage }, ref) => {
@@ -48,7 +39,7 @@ const SearchForm: ForwardRefRenderFunction<
   const id = useId();
 
   return (
-    <Form grouped={false} onSubmit={submitHandler} className={styles.wrapper}>
+    <Form className={styles.wrapper} grouped={false} onSubmit={submitHandler}>
       <LabelledField
         className={styles.field}
         hideLabel={hideLabel}
@@ -61,11 +52,11 @@ const SearchForm: ForwardRefRenderFunction<
         value={value}
       />
       <Button
-        type="submit"
+        aria-label={buttonLabel}
+        className={styles.btn}
         kind="neutral"
         shape="initial"
-        className={styles.btn}
-        aria-label={buttonLabel}
+        type="submit"
       >
         <MagnifyingGlass className={styles.btn__icon} />
       </Button>
@@ -73,4 +64,9 @@ const SearchForm: ForwardRefRenderFunction<
   );
 };
 
-export default forwardRef(SearchForm);
+/**
+ * SearchForm component
+ *
+ * Render a search form.
+ */
+export const SearchForm = forwardRef(SearchFormWithRef);
diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx
index b1c308e..8b68777 100644
--- a/src/components/organisms/images/gallery.stories.tsx
+++ b/src/components/organisms/images/gallery.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ResponsiveImage from '../../molecules/images/responsive-image';
-import Gallery from './gallery';
+import { ResponsiveImage } from '../../molecules';
+import { Gallery } from './gallery';
 
 /**
  * Gallery - Storybook Meta
diff --git a/src/components/organisms/images/gallery.test.tsx b/src/components/organisms/images/gallery.test.tsx
index 611262e..6fb7567 100644
--- a/src/components/organisms/images/gallery.test.tsx
+++ b/src/components/organisms/images/gallery.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
-import ResponsiveImage from '../../molecules/images/responsive-image';
-import Gallery from './gallery';
+import { ResponsiveImage } from '../../molecules';
+import { Gallery } from './gallery';
 
 const columns = 3;
 
diff --git a/src/components/organisms/images/gallery.tsx b/src/components/organisms/images/gallery.tsx
index 8b73ce1..ae773f6 100644
--- a/src/components/organisms/images/gallery.tsx
+++ b/src/components/organisms/images/gallery.tsx
@@ -1,5 +1,5 @@
 import { Children, FC, ReactElement } from 'react';
-import { type ResponsiveImageProps } from '../../molecules/images/responsive-image';
+import { type ResponsiveImageProps } from '../../molecules';
 import styles from './gallery.module.scss';
 
 export type GalleryColumn = 2 | 3 | 4;
@@ -20,7 +20,7 @@ export type GalleryProps = {
  *
  * Render a gallery of images.
  */
-const Gallery: FC<GalleryProps> = ({ children, columns }) => {
+export const Gallery: FC<GalleryProps> = ({ children, columns }) => {
   const columnsClass = `wrapper--${columns}-columns`;
 
   return (
@@ -31,5 +31,3 @@ const Gallery: FC<GalleryProps> = ({ children, columns }) => {
     </ul>
   );
 };
-
-export default Gallery;
diff --git a/src/components/organisms/images/index.ts b/src/components/organisms/images/index.ts
new file mode 100644
index 0000000..de0da26
--- /dev/null
+++ b/src/components/organisms/images/index.ts
@@ -0,0 +1 @@
+export * from './gallery';
diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
new file mode 100644
index 0000000..8dfc61b
--- /dev/null
+++ b/src/components/organisms/index.ts
@@ -0,0 +1,6 @@
+export * from './forms';
+export * from './images';
+export * from './layout';
+export * from './modals';
+export * from './toolbar';
+export * from './widgets';
diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx
index c19220a..b5f697a 100644
--- a/src/components/organisms/layout/cards-list.stories.tsx
+++ b/src/components/organisms/layout/cards-list.stories.tsx
@@ -1,5 +1,8 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CardsListComponent, { type CardsListItem } from './cards-list';
+import {
+  CardsList as CardsListComponent,
+  type CardsListItem,
+} from './cards-list';
 
 /**
  * CardsList - Storybook Meta
diff --git a/src/components/organisms/layout/cards-list.test.tsx b/src/components/organisms/layout/cards-list.test.tsx
index 6a0ff7c..968a349 100644
--- a/src/components/organisms/layout/cards-list.test.tsx
+++ b/src/components/organisms/layout/cards-list.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import CardsList, { type CardsListItem } from './cards-list';
+import { CardsList, type CardsListItem } from './cards-list';
 
 const items: CardsListItem[] = [
   {
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index 12ec7d9..e3d1156 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import List, { type ListItem, type ListProps } from '../../atoms/lists/list';
-import Card, { type CardProps } from '../../molecules/layout/card';
+import { List, type ListItem, type ListProps } from '../../atoms';
+import { Card, type CardProps } from '../../molecules';
 import styles from './cards-list.module.scss';
 
 export type CardsListItem = Omit<CardProps, 'className' | 'titleLevel'> & {
@@ -27,7 +27,7 @@ export type CardsListProps = Pick<CardProps, 'titleLevel'> &
  *
  * Return a list of Card components.
  */
-const CardsList: FC<CardsListProps> = ({
+export const CardsList: FC<CardsListProps> = ({
   className = '',
   items,
   kind = 'unordered',
@@ -47,11 +47,11 @@ const CardsList: FC<CardsListProps> = ({
         id,
         value: (
           <Card
-            key={id}
+            {...card}
             className={styles.card}
+            key={id}
             id={id}
             titleLevel={titleLevel}
-            {...card}
           />
         ),
       };
@@ -60,11 +60,9 @@ const CardsList: FC<CardsListProps> = ({
 
   return (
     <List
+      className={`${styles.wrapper} ${styles[kindModifier]} ${className}`}
       kind="flex"
       items={getCards(items)}
-      className={`${styles.wrapper} ${styles[kindModifier]} ${className}`}
     />
   );
 };
-
-export default CardsList;
diff --git a/src/components/organisms/layout/comment.fixture.tsx b/src/components/organisms/layout/comment.fixture.tsx
index 57a4389..eee7981 100644
--- a/src/components/organisms/layout/comment.fixture.tsx
+++ b/src/components/organisms/layout/comment.fixture.tsx
@@ -1,7 +1,4 @@
-import {
-  getFormattedDate,
-  getFormattedTime,
-} from '../../../utils/helpers/dates';
+import { getFormattedDate, getFormattedTime } from '../../../utils/helpers';
 import { CommentProps } from './comment';
 
 export const author = {
diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
index 7a8ac95..a73ba23 100644
--- a/src/components/organisms/layout/comment.stories.tsx
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CommentComponent from './comment';
+import { Comment } from './comment';
 import { data } from './comment.fixture';
 
 const saveComment = async () => {
@@ -11,7 +11,7 @@ const saveComment = async () => {
  */
 export default {
   title: 'Organisms/Layout/Comment',
-  component: CommentComponent,
+  component: Comment,
   args: {
     canReply: true,
     saveComment,
@@ -104,10 +104,10 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof CommentComponent>;
+} as ComponentMeta<typeof Comment>;
 
-const Template: ComponentStory<typeof CommentComponent> = (args) => (
-  <CommentComponent {...args} />
+const Template: ComponentStory<typeof Comment> = (args) => (
+  <Comment {...args} />
 );
 
 /**
diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx
index 5ea8c6f..6414371 100644
--- a/src/components/organisms/layout/comment.test.tsx
+++ b/src/components/organisms/layout/comment.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Comment from './comment';
+import { Comment } from './comment';
 import {
   author,
   data,
diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
index 23073ad..e2a42bf 100644
--- a/src/components/organisms/layout/comment.tsx
+++ b/src/components/organisms/layout/comment.tsx
@@ -3,12 +3,11 @@ import Script from 'next/script';
 import { FC, useCallback, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { type Comment as CommentSchema, type WithContext } from 'schema-dts';
-import { type SingleComment } from '../../../types/app';
-import useSettings from '../../../utils/hooks/use-settings';
-import Button from '../../atoms/buttons/button';
-import Link from '../../atoms/links/link';
-import Meta from '../../molecules/layout/meta';
-import CommentForm, { type CommentFormProps } from '../forms/comment-form';
+import { type SingleComment } from '../../../types';
+import { useSettings } from '../../../utils/hooks';
+import { Button, Link } from '../../atoms';
+import { Meta } from '../../molecules';
+import { CommentForm, type CommentFormProps } from '../forms';
 import styles from './comment.module.scss';
 
 export type CommentProps = Pick<
@@ -27,7 +26,7 @@ export type CommentProps = Pick<
  *
  * Render a single comment.
  */
-const Comment: FC<CommentProps> = ({
+export const Comment: FC<CommentProps> = ({
   approved,
   canReply = true,
   content,
@@ -107,13 +106,13 @@ const Comment: FC<CommentProps> = ({
   return (
     <>
       <Script
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(commentSchema) }}
         id="schema-comments"
         type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(commentSchema) }}
       />
       <article
-        id={`comment-${id}`}
         className={`${styles.wrapper} ${styles['wrapper--comment']}`}
+        id={`comment-${id}`}
       >
         <header className={styles.header}>
           {author.avatar && (
@@ -136,6 +135,7 @@ const Comment: FC<CommentProps> = ({
           )}
         </header>
         <Meta
+          className={styles.date}
           data={{
             publication: {
               date: publicationDate,
@@ -143,10 +143,9 @@ const Comment: FC<CommentProps> = ({
               target: `#comment-${id}`,
             },
           }}
-          layout="inline"
-          itemsLayout="inline"
-          className={styles.date}
           groupClassName={styles.date__item}
+          itemsLayout="inline"
+          layout="inline"
         />
         <div
           className={styles.body}
@@ -162,15 +161,13 @@ const Comment: FC<CommentProps> = ({
       </article>
       {isReplying && (
         <CommentForm
+          className={`${styles.wrapper} ${styles['wrapper--form']}`}
           Notice={Notice}
           parentId={id}
           saveComment={saveComment}
           title={formTitle}
-          className={`${styles.wrapper} ${styles['wrapper--form']}`}
         />
       )}
     </>
   );
 };
-
-export default Comment;
diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx
index 5ed0f2a..4b32d7b 100644
--- a/src/components/organisms/layout/comments-list.stories.tsx
+++ b/src/components/organisms/layout/comments-list.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CommentsListComponent from './comments-list';
+import { CommentsList } from './comments-list';
 import { comments } from './comments-list.fixture';
 
 const saveComment = async () => {
@@ -11,7 +11,7 @@ const saveComment = async () => {
  */
 export default {
   title: 'Organisms/Layout/CommentsList',
-  component: CommentsListComponent,
+  component: CommentsList,
   args: {
     saveComment,
   },
@@ -66,10 +66,10 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof CommentsListComponent>;
+} as ComponentMeta<typeof CommentsList>;
 
-const Template: ComponentStory<typeof CommentsListComponent> = (args) => (
-  <CommentsListComponent {...args} />
+const Template: ComponentStory<typeof CommentsList> = (args) => (
+  <CommentsList {...args} />
 );
 
 /**
diff --git a/src/components/organisms/layout/comments-list.test.tsx b/src/components/organisms/layout/comments-list.test.tsx
index ef4b4af..0518425 100644
--- a/src/components/organisms/layout/comments-list.test.tsx
+++ b/src/components/organisms/layout/comments-list.test.tsx
@@ -1,6 +1,6 @@
 import { render } from '../../../../tests/utils';
 import { saveComment } from './comment.fixture';
-import CommentsList from './comments-list';
+import { CommentsList } from './comments-list';
 import { comments } from './comments-list.fixture';
 
 describe('CommentsList', () => {
diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx
index 227f715..1ce0cf5 100644
--- a/src/components/organisms/layout/comments-list.tsx
+++ b/src/components/organisms/layout/comments-list.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { SingleComment } from '../../../types/app';
-import Comment, { type CommentProps } from '../../organisms/layout/comment';
+import { type SingleComment } from '../../../types';
+import { Comment, type CommentProps } from './comment';
 import styles from './comments-list.module.scss';
 
 export type CommentsListProps = Pick<CommentProps, 'Notice' | 'saveComment'> & {
@@ -19,7 +19,7 @@ export type CommentsListProps = Pick<CommentProps, 'Notice' | 'saveComment'> & {
  *
  * Render a comments list.
  */
-const CommentsList: FC<CommentsListProps> = ({
+export const CommentsList: FC<CommentsListProps> = ({
   comments,
   depth,
   Notice,
@@ -54,5 +54,3 @@ const CommentsList: FC<CommentsListProps> = ({
 
   return <ol className={styles.list}>{getItems(comments, 0)}</ol>;
 };
-
-export default CommentsList;
diff --git a/src/components/organisms/layout/footer.stories.tsx b/src/components/organisms/layout/footer.stories.tsx
index bd5a744..b5097dd 100644
--- a/src/components/organisms/layout/footer.stories.tsx
+++ b/src/components/organisms/layout/footer.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import FooterComponent from './footer';
+import { Footer as FooterComponent } from './footer';
 
 /**
  * Footer - Storybook Meta
diff --git a/src/components/organisms/layout/footer.test.tsx b/src/components/organisms/layout/footer.test.tsx
index 0ba1a57..f513739 100644
--- a/src/components/organisms/layout/footer.test.tsx
+++ b/src/components/organisms/layout/footer.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Footer, { type FooterProps } from './footer';
+import { Footer, type FooterProps } from './footer';
 
 const copyright: FooterProps['copyright'] = {
   dates: { start: '2017', end: '2022' },
diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx
index f67ad7d..f1f3236 100644
--- a/src/components/organisms/layout/footer.tsx
+++ b/src/components/organisms/layout/footer.tsx
@@ -1,10 +1,12 @@
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import Copyright, { type CopyrightProps } from '../../atoms/layout/copyright';
-import BackToTop, {
+import { Copyright, type CopyrightProps } from '../../atoms';
+import {
+  BackToTop,
   type BackToTopProps,
-} from '../../molecules/buttons/back-to-top';
-import Nav, { type NavItem } from '../../molecules/nav/nav';
+  Nav,
+  type NavItem,
+} from '../../molecules';
 import styles from './footer.module.scss';
 
 export type FooterProps = {
@@ -35,7 +37,7 @@ export type FooterProps = {
  *
  * Renders a footer with copyright and nav;
  */
-const Footer: FC<FooterProps> = ({
+export const Footer: FC<FooterProps> = ({
   backToTopClassName,
   className = '',
   copyright,
@@ -53,23 +55,21 @@ const Footer: FC<FooterProps> = ({
     <footer className={`${styles.wrapper} ${className}`}>
       <Copyright
         dates={copyright.dates}
-        owner={copyright.owner}
         icon={copyright.icon}
+        owner={copyright.owner}
       />
       {navItems && (
         <Nav
           aria-label={ariaLabel}
-          kind="footer"
-          items={navItems}
           className={styles.nav}
+          items={navItems}
+          kind="footer"
         />
       )}
       <BackToTop
-        target={topId}
         className={`${styles['back-to-top']} ${backToTopClassName}`}
+        target={topId}
       />
     </footer>
   );
 };
-
-export default Footer;
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx
index 0507e89..31fb0ca 100644
--- a/src/components/organisms/layout/header.stories.tsx
+++ b/src/components/organisms/layout/header.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import HeaderComponent from './header';
+import { Header as HeaderComponent } from './header';
 
 /**
  * Header - Storybook Meta
diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/header.test.tsx
index c7819c0..78df341 100644
--- a/src/components/organisms/layout/header.test.tsx
+++ b/src/components/organisms/layout/header.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Header from './header';
+import { Header } from './header';
 
 const nav = [
   { id: 'home-link', href: '#', label: 'Home' },
diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx
index 4e5e0f2..d2f7620 100644
--- a/src/components/organisms/layout/header.tsx
+++ b/src/components/organisms/layout/header.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import Branding, { type BrandingProps } from '../../molecules/layout/branding';
-import Toolbar, { type ToolbarProps } from '../toolbar/toolbar';
+import { Branding, type BrandingProps } from '../../molecules';
+import { Toolbar, type ToolbarProps } from '../toolbar';
 import styles from './header.module.scss';
 
 export type HeaderProps = BrandingProps &
@@ -19,7 +19,7 @@ export type HeaderProps = BrandingProps &
  *
  * Render the website header.
  */
-const Header: FC<HeaderProps> = ({
+export const Header: FC<HeaderProps> = ({
   ackeeStorageKey,
   className,
   motionStorageKey,
@@ -42,5 +42,3 @@ const Header: FC<HeaderProps> = ({
     </header>
   );
 };
-
-export default Header;
diff --git a/src/components/organisms/layout/index.ts b/src/components/organisms/layout/index.ts
new file mode 100644
index 0000000..35061cb
--- /dev/null
+++ b/src/components/organisms/layout/index.ts
@@ -0,0 +1,9 @@
+export * from './cards-list';
+export * from './comment';
+export * from './comments-list';
+export * from './footer';
+export * from './header';
+export * from './no-results';
+export * from './overview';
+export * from './posts-list';
+export * from './summary';
diff --git a/src/components/organisms/layout/no-results.stories.tsx b/src/components/organisms/layout/no-results.stories.tsx
index aa2e51e..b157572 100644
--- a/src/components/organisms/layout/no-results.stories.tsx
+++ b/src/components/organisms/layout/no-results.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import NoResultsComponent from './no-results';
+import { NoResults as NoResultsComponent } from './no-results';
 
 export default {
   title: 'Organisms/Layout',
diff --git a/src/components/organisms/layout/no-results.test.tsx b/src/components/organisms/layout/no-results.test.tsx
index 551b82f..914b2db 100644
--- a/src/components/organisms/layout/no-results.test.tsx
+++ b/src/components/organisms/layout/no-results.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import NoResults from './no-results';
+import { NoResults } from './no-results';
 
 describe('NoResults', () => {
   it('renders a no results text', () => {
diff --git a/src/components/organisms/layout/no-results.tsx b/src/components/organisms/layout/no-results.tsx
index 1b563da..1e7afe1 100644
--- a/src/components/organisms/layout/no-results.tsx
+++ b/src/components/organisms/layout/no-results.tsx
@@ -1,8 +1,6 @@
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import SearchForm, {
-  type SearchFormProps,
-} from '../../organisms/forms/search-form';
+import { SearchForm, type SearchFormProps } from '../forms';
 
 export type NoResultsProps = Pick<SearchFormProps, 'searchPage'>;
 
@@ -11,7 +9,7 @@ export type NoResultsProps = Pick<SearchFormProps, 'searchPage'>;
  *
  * Renders a no results text with a search form.
  */
-const NoResults: FC<NoResultsProps> = ({ searchPage }) => {
+export const NoResults: FC<NoResultsProps> = ({ searchPage }) => {
   const intl = useIntl();
 
   return (
@@ -34,5 +32,3 @@ const NoResults: FC<NoResultsProps> = ({ searchPage }) => {
     </>
   );
 };
-
-export default NoResults;
diff --git a/src/components/organisms/layout/overview.stories.tsx b/src/components/organisms/layout/overview.stories.tsx
index 26f7ba0..be6db72 100644
--- a/src/components/organisms/layout/overview.stories.tsx
+++ b/src/components/organisms/layout/overview.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Overview, { OverviewMeta } from './overview';
+import { Overview, OverviewMeta } from './overview';
 
 /**
  * Overview - Storybook Meta
diff --git a/src/components/organisms/layout/overview.test.tsx b/src/components/organisms/layout/overview.test.tsx
index 72e4cc0..25c1c26 100644
--- a/src/components/organisms/layout/overview.test.tsx
+++ b/src/components/organisms/layout/overview.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Overview, { type OverviewMeta } from './overview';
+import { Overview, type OverviewMeta } from './overview';
 
 const cover = {
   alt: 'Incidunt unde quam',
diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx
index e539731..51920f6 100644
--- a/src/components/organisms/layout/overview.tsx
+++ b/src/components/organisms/layout/overview.tsx
@@ -1,8 +1,10 @@
 import { FC } from 'react';
-import ResponsiveImage, {
+import {
+  Meta,
+  type MetaData,
+  ResponsiveImage,
   type ResponsiveImageProps,
-} from '../../molecules/images/responsive-image';
-import Meta, { type MetaData } from '../../molecules/layout/meta';
+} from '../../molecules';
 import styles from './overview.module.scss';
 
 export type OverviewMeta = Pick<
@@ -35,7 +37,11 @@ export type OverviewProps = {
  *
  * Render an overview.
  */
-const Overview: FC<OverviewProps> = ({ className = '', cover, meta }) => {
+export const Overview: FC<OverviewProps> = ({
+  className = '',
+  cover,
+  meta,
+}) => {
   const { technologies, ...remainingMeta } = meta;
   const metaModifier = technologies ? styles['meta--has-techno'] : '';
 
@@ -43,13 +49,11 @@ const Overview: FC<OverviewProps> = ({ className = '', cover, meta }) => {
     <div className={`${styles.wrapper} ${className}`}>
       {cover && <ResponsiveImage className={styles.cover} {...cover} />}
       <Meta
+        className={`${styles.meta} ${metaModifier}`}
         data={{ ...remainingMeta, technologies }}
         layout="inline"
-        className={`${styles.meta} ${metaModifier}`}
         withSeparator={false}
       />
     </div>
   );
 };
-
-export default Overview;
diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
index bff1f28..d56c7e6 100644
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ b/src/components/organisms/layout/posts-list.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PostsList from './posts-list';
+import { PostsList } from './posts-list';
 import { posts, searchPage } from './posts-list.fixture';
 
 /**
diff --git a/src/components/organisms/layout/posts-list.test.tsx b/src/components/organisms/layout/posts-list.test.tsx
index 1d6bbcb..41a8679 100644
--- a/src/components/organisms/layout/posts-list.test.tsx
+++ b/src/components/organisms/layout/posts-list.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import PostsList from './posts-list';
+import { PostsList } from './posts-list';
 import { posts, searchPage } from './posts-list.fixture';
 
 describe('PostsList', () => {
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index dede7b6..e214ca7 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -1,17 +1,17 @@
 import { FC, Fragment, useRef } from 'react';
 import { useIntl } from 'react-intl';
-import useIsMounted from '../../../utils/hooks/use-is-mounted';
-import useSettings from '../../../utils/hooks/use-settings';
-import Button from '../../atoms/buttons/button';
-import Heading, { type HeadingLevel } from '../../atoms/headings/heading';
-import ProgressBar from '../../atoms/loaders/progress-bar';
-import Spinner from '../../atoms/loaders/spinner';
-import Pagination, {
-  type PaginationProps,
-} from '../../molecules/nav/pagination';
-import NoResults, { NoResultsProps } from './no-results';
+import { useIsMounted, useSettings } from '../../../utils/hooks';
+import {
+  Button,
+  Heading,
+  type HeadingLevel,
+  ProgressBar,
+  Spinner,
+} from '../../atoms';
+import { Pagination, type PaginationProps } from '../../molecules';
+import { NoResults, type NoResultsProps } from './no-results';
 import styles from './posts-list.module.scss';
-import Summary, { type SummaryProps } from './summary';
+import { Summary, type SummaryProps } from './summary';
 
 export type Post = Omit<SummaryProps, 'titleLevel'> & {
   /**
@@ -84,7 +84,7 @@ const sortPostsByYear = (data: Post[]): YearCollection => {
  *
  * Render a list of post summaries.
  */
-const PostsList: FC<PostsListProps> = ({
+export const PostsList: FC<PostsListProps> = ({
   baseUrl,
   byYear = false,
   isLoading = false,
@@ -237,5 +237,3 @@ const PostsList: FC<PostsListProps> = ({
     </>
   );
 };
-
-export default PostsList;
diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx
index 0b91e24..fe8b704 100644
--- a/src/components/organisms/layout/summary.stories.tsx
+++ b/src/components/organisms/layout/summary.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Summary from './summary';
+import { Summary } from './summary';
 import { cover, intro, meta } from './summary.fixture';
 
 /**
diff --git a/src/components/organisms/layout/summary.test.tsx b/src/components/organisms/layout/summary.test.tsx
index 73f6df8..607d676 100644
--- a/src/components/organisms/layout/summary.test.tsx
+++ b/src/components/organisms/layout/summary.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Summary from './summary';
+import { Summary } from './summary';
 import { cover, intro, meta, title, url } from './summary.fixture';
 
 describe('Summary', () => {
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index f2031d5..cacd6d2 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -1,15 +1,20 @@
 import { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
-import { type Article, type Meta as MetaType } from '../../../types/app';
-import useReadingTime from '../../../utils/hooks/use-reading-time';
-import ButtonLink from '../../atoms/buttons/button-link';
-import Heading, { type HeadingLevel } from '../../atoms/headings/heading';
-import Arrow from '../../atoms/icons/arrow';
-import Link from '../../atoms/links/link';
-import ResponsiveImage, {
+import { type Article, type Meta as MetaType } from '../../../types';
+import { useReadingTime } from '../../../utils/hooks';
+import {
+  Arrow,
+  ButtonLink,
+  Heading,
+  type HeadingLevel,
+  Link,
+} from '../../atoms';
+import {
+  Meta,
+  type MetaData,
+  ResponsiveImage,
   type ResponsiveImageProps,
-} from '../../molecules/images/responsive-image';
-import Meta, { type MetaData } from '../../molecules/layout/meta';
+} from '../../molecules';
 import styles from './summary.module.scss';
 
 export type Cover = Pick<
@@ -48,7 +53,7 @@ export type SummaryProps = Pick<Article, 'intro' | 'title'> & {
  *
  * Render a page summary.
  */
-const Summary: FC<SummaryProps> = ({
+export const Summary: FC<SummaryProps> = ({
   intro,
   meta,
   title,
@@ -125,16 +130,14 @@ const Summary: FC<SummaryProps> = ({
       </div>
       <footer className={styles.footer}>
         <Meta
+          className={styles.meta}
           data={getMeta()}
-          layout="column"
+          groupClassName={styles.meta__item}
           itemsLayout="stacked"
+          layout="column"
           withSeparator={false}
-          className={styles.meta}
-          groupClassName={styles.meta__item}
         />
       </footer>
     </article>
   );
 };
-
-export default Summary;
diff --git a/src/components/organisms/modals/index.ts b/src/components/organisms/modals/index.ts
new file mode 100644
index 0000000..9385fb2
--- /dev/null
+++ b/src/components/organisms/modals/index.ts
@@ -0,0 +1,2 @@
+export * from './search-modal';
+export * from './settings-modal';
diff --git a/src/components/organisms/modals/search-modal.stories.tsx b/src/components/organisms/modals/search-modal.stories.tsx
index 5a607c6..a9cf064 100644
--- a/src/components/organisms/modals/search-modal.stories.tsx
+++ b/src/components/organisms/modals/search-modal.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SearchModal from './search-modal';
+import { SearchModal } from './search-modal';
 
 /**
  * SearchModal - Storybook Meta
diff --git a/src/components/organisms/modals/search-modal.test.tsx b/src/components/organisms/modals/search-modal.test.tsx
index 397c36f..9629648 100644
--- a/src/components/organisms/modals/search-modal.test.tsx
+++ b/src/components/organisms/modals/search-modal.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import SearchModal from './search-modal';
+import { SearchModal } from './search-modal';
 
 describe('SearchModal', () => {
   it('renders a search modal', () => {
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
index 08b28cb..7ba770f 100644
--- a/src/components/organisms/modals/search-modal.tsx
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import Modal, { type ModalProps } from '../../molecules/modals/modal';
-import SearchForm, { type SearchFormProps } from '../forms/search-form';
+import { Modal, type ModalProps } from '../../molecules';
+import { SearchForm, type SearchFormProps } from '../forms';
 import styles from './search-modal.module.scss';
 
 export type SearchModalProps = SearchFormProps & {
@@ -11,12 +11,7 @@ export type SearchModalProps = SearchFormProps & {
   className?: ModalProps['className'];
 };
 
-/**
- * SearchModal
- *
- * Render a search form modal.
- */
-const SearchModal: ForwardRefRenderFunction<
+const SearchModalWithRef: ForwardRefRenderFunction<
   HTMLInputElement,
   SearchModalProps
 > = ({ className, searchPage }, ref) => {
@@ -28,10 +23,15 @@ const SearchModal: ForwardRefRenderFunction<
   });
 
   return (
-    <Modal title={modalTitle} className={`${styles.wrapper} ${className}`}>
+    <Modal className={`${styles.wrapper} ${className}`} title={modalTitle}>
       <SearchForm hideLabel={true} ref={ref} searchPage={searchPage} />
     </Modal>
   );
 };
 
-export default forwardRef(SearchModal);
+/**
+ * SearchModal
+ *
+ * Render a search form modal.
+ */
+export const SearchModal = forwardRef(SearchModalWithRef);
diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx
index 4f0b79b..093922d 100644
--- a/src/components/organisms/modals/settings-modal.stories.tsx
+++ b/src/components/organisms/modals/settings-modal.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { storageKey as ackeeStorageKey } from '../../molecules/forms/ackee-toggle.fixture';
 import { storageKey as motionStorageKey } from '../../molecules/forms/motion-toggle.fixture';
-import SettingsModal from './settings-modal';
+import { SettingsModal } from './settings-modal';
 
 /**
  * SettingsModal - Storybook Meta
diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx
index 9e07175..ec14719 100644
--- a/src/components/organisms/modals/settings-modal.test.tsx
+++ b/src/components/organisms/modals/settings-modal.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '../../../../tests/utils';
 import { storageKey as ackeeStorageKey } from '../../molecules/forms/ackee-toggle.fixture';
 import { storageKey as motionStorageKey } from '../../molecules/forms/motion-toggle.fixture';
-import SettingsModal from './settings-modal';
+import { SettingsModal } from './settings-modal';
 
 describe('SettingsModal', () => {
   it('renders the modal heading', () => {
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index 4e2b119..d4a3a49 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -1,15 +1,16 @@
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import Form from '../../atoms/forms/form';
-import AckeeToggle, {
-  AckeeToggleProps,
-} from '../../molecules/forms/ackee-toggle';
-import MotionToggle, {
-  MotionToggleProps,
-} from '../../molecules/forms/motion-toggle';
-import PrismThemeToggle from '../../molecules/forms/prism-theme-toggle';
-import ThemeToggle from '../../molecules/forms/theme-toggle';
-import Modal, { type ModalProps } from '../../molecules/modals/modal';
+import { Form } from '../../atoms';
+import {
+  AckeeToggle,
+  type AckeeToggleProps,
+  Modal,
+  type ModalProps,
+  MotionToggle,
+  type MotionToggleProps,
+  PrismThemeToggle,
+  ThemeToggle,
+} from '../../molecules';
 import styles from './settings-modal.module.scss';
 
 export type SettingsModalProps = Pick<ModalProps, 'className'> &
@@ -29,7 +30,7 @@ export type SettingsModalProps = Pick<ModalProps, 'className'> &
  *
  * Render a modal with settings options.
  */
-const SettingsModal: FC<SettingsModalProps> = ({
+export const SettingsModal: FC<SettingsModalProps> = ({
   className = '',
   ackeeStorageKey,
   motionStorageKey,
@@ -49,9 +50,9 @@ const SettingsModal: FC<SettingsModalProps> = ({
 
   return (
     <Modal
-      title={title}
-      icon="cogs"
       className={`${styles.wrapper} ${className}`}
+      icon="cogs"
+      title={title}
     >
       <Form
         aria-label={ariaLabel}
@@ -70,16 +71,16 @@ const SettingsModal: FC<SettingsModalProps> = ({
           legendClassName={styles.label}
         />
         <MotionToggle
-          defaultValue="on"
           bodyClassName={styles.fieldset__body}
+          defaultValue="on"
           groupClassName={styles.group}
           legendClassName={styles.label}
           storageKey={motionStorageKey}
         />
         <AckeeToggle
-          defaultValue="full"
           bodyClassName={styles.fieldset__body}
           buttonClassName={styles.btn}
+          defaultValue="full"
           groupClassName={`${styles.group} ${styles['group--ackee']}`}
           legendClassName={`${styles.label} ${styles['label--ackee']}`}
           storageKey={ackeeStorageKey}
@@ -89,5 +90,3 @@ const SettingsModal: FC<SettingsModalProps> = ({
     </Modal>
   );
 };
-
-export default SettingsModal;
diff --git a/src/components/organisms/toolbar/index.ts b/src/components/organisms/toolbar/index.ts
new file mode 100644
index 0000000..9433412
--- /dev/null
+++ b/src/components/organisms/toolbar/index.ts
@@ -0,0 +1,4 @@
+export * from './main-nav';
+export * from './search';
+export * from './settings';
+export * from './toolbar';
diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx
index 7d6d915..1ef10b5 100644
--- a/src/components/organisms/toolbar/main-nav.stories.tsx
+++ b/src/components/organisms/toolbar/main-nav.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import MainNav from './main-nav';
+import { MainNav } from './main-nav';
 
 /**
  * MainNav - Storybook Meta
diff --git a/src/components/organisms/toolbar/main-nav.test.tsx b/src/components/organisms/toolbar/main-nav.test.tsx
index 47e7c38..12f30ce 100644
--- a/src/components/organisms/toolbar/main-nav.test.tsx
+++ b/src/components/organisms/toolbar/main-nav.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import MainNav from './main-nav';
+import { MainNav } from './main-nav';
 
 const items = [
   { id: 'home', label: 'Home', href: '/' },
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index 3a2fbf5..cf49bd4 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -1,11 +1,12 @@
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import BooleanField, {
+import {
+  BooleanField,
   type BooleanFieldProps,
-} from '../../atoms/forms/boolean-field';
-import Label from '../../atoms/forms/label';
-import Hamburger from '../../atoms/icons/hamburger';
-import Nav, { type NavProps, type NavItem } from '../../molecules/nav/nav';
+  Hamburger,
+  Label,
+} from '../../atoms';
+import { Nav, type NavProps, type NavItem } from '../../molecules';
 import mainNavStyles from './main-nav.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
@@ -28,12 +29,7 @@ export type MainNavProps = {
   setIsActive: BooleanFieldProps['onChange'];
 };
 
-/**
- * MainNav component
- *
- * Render the main navigation.
- */
-const MainNav: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
+const MainNavWithRef: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
   { className = '', isActive, items, setIsActive },
   ref
 ) => {
@@ -62,20 +58,25 @@ const MainNav: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
         value="open"
       />
       <Label
-        htmlFor="main-nav-button"
         aria-label={label}
         className={`${sharedStyles.label} ${mainNavStyles.label}`}
+        htmlFor="main-nav-button"
       >
         <Hamburger iconClassName={mainNavStyles.icon} />
       </Label>
       <Nav
-        kind="main"
-        items={items}
         className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`}
+        items={items}
+        kind="main"
         listClassName={mainNavStyles.modal__list}
       />
     </div>
   );
 };
 
-export default forwardRef(MainNav);
+/**
+ * MainNav component
+ *
+ * Render the main navigation.
+ */
+export const MainNav = forwardRef(MainNavWithRef);
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
index 4baf0bf..3b2a747 100644
--- a/src/components/organisms/toolbar/search.stories.tsx
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import Search from './search';
+import { Search } from './search';
 
 /**
  * Search - Storybook Meta
diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx
index bafb58d..625dd4b 100644
--- a/src/components/organisms/toolbar/search.test.tsx
+++ b/src/components/organisms/toolbar/search.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Search from './search';
+import { Search } from './search';
 
 describe('Search', () => {
   it('renders a button to open search modal', () => {
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index 90ee1b4..1b2643c 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,12 +1,13 @@
 import { forwardRef, ForwardRefRenderFunction, useRef } from 'react';
 import { useIntl } from 'react-intl';
-import useInputAutofocus from '../../../utils/hooks/use-input-autofocus';
-import BooleanField, {
+import { useInputAutofocus } from '../../../utils/hooks';
+import {
+  BooleanField,
   type BooleanFieldProps,
-} from '../../atoms/forms/boolean-field';
-import MagnifyingGlass from '../../atoms/icons/magnifying-glass';
-import FlippingLabel from '../../molecules/forms/flipping-label';
-import SearchModal, { type SearchModalProps } from '../modals/search-modal';
+  MagnifyingGlass,
+} from '../../atoms';
+import { FlippingLabel } from '../../molecules';
+import { SearchModal, type SearchModalProps } from '../modals';
 import searchStyles from './search.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
@@ -29,7 +30,7 @@ export type SearchProps = {
   setIsActive: BooleanFieldProps['onChange'];
 };
 
-const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
+const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
   { className = '', isActive, searchPage, setIsActive },
   ref
 ) => {
@@ -65,9 +66,9 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
         value="open"
       />
       <FlippingLabel
+        aria-label={label}
         className={sharedStyles.label}
         htmlFor="search-button"
-        aria-label={label}
         isActive={isActive}
       >
         <MagnifyingGlass aria-hidden={true} />
@@ -81,4 +82,4 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
   );
 };
 
-export default forwardRef(Search);
+export const Search = forwardRef(SearchWithRef);
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index 20d0b4d..a83f8d3 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import Settings from './settings';
+import { Settings } from './settings';
 
 /**
  * Settings - Storybook Meta
diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx
index 44bed56..d4e542d 100644
--- a/src/components/organisms/toolbar/settings.test.tsx
+++ b/src/components/organisms/toolbar/settings.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Settings from './settings';
+import { Settings } from './settings';
 
 describe('Settings', () => {
   it('renders a button to open settings modal', () => {
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 6dc73e4..8a4d4a9 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,13 +1,8 @@
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import BooleanField, {
-  type BooleanFieldProps,
-} from '../../atoms/forms/boolean-field';
-import Cog from '../../atoms/icons/cog';
-import FlippingLabel from '../../molecules/forms/flipping-label';
-import SettingsModal, {
-  type SettingsModalProps,
-} from '../modals/settings-modal';
+import { BooleanField, type BooleanFieldProps, Cog } from '../../atoms';
+import { FlippingLabel } from '../../molecules';
+import { SettingsModal, type SettingsModalProps } from '../modals';
 import settingsStyles from './settings.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
@@ -22,7 +17,10 @@ export type SettingsProps = SettingsModalProps & {
   setIsActive: BooleanFieldProps['onChange'];
 };
 
-const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
+const SettingsWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  SettingsProps
+> = (
   {
     ackeeStorageKey,
     className = '',
@@ -58,9 +56,9 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
         value="open"
       />
       <FlippingLabel
+        aria-label={label}
         className={sharedStyles.label}
         htmlFor="settings-button"
-        aria-label={label}
         isActive={isActive}
       >
         <Cog aria-hidden={true} />
@@ -75,4 +73,4 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
   );
 };
 
-export default forwardRef(Settings);
+export const Settings = forwardRef(SettingsWithRef);
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
index d613442..7bf545b 100644
--- a/src/components/organisms/toolbar/toolbar.stories.tsx
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ToolbarComponent from './toolbar';
+import { Toolbar as ToolbarComponent } from './toolbar';
 
 /**
  * Toolbar - Storybook Meta
diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx
index 01cc5ba..62020dc 100644
--- a/src/components/organisms/toolbar/toolbar.test.tsx
+++ b/src/components/organisms/toolbar/toolbar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Toolbar from './toolbar';
+import { Toolbar } from './toolbar';
 
 const nav = [
   { id: 'home-link', href: '/', label: 'Home' },
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index 339dec4..218b4fb 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -1,9 +1,8 @@
 import { FC, useState } from 'react';
-import useOnClickOutside from '../../../utils/hooks/use-on-click-outside';
-import useRouteChange from '../../../utils/hooks/use-route-change';
-import MainNav, { type MainNavProps } from '../toolbar/main-nav';
-import Search, { type SearchProps } from '../toolbar/search';
-import Settings, { type SettingsProps } from '../toolbar/settings';
+import { useOnClickOutside, useRouteChange } from '../../../utils/hooks';
+import { MainNav, type MainNavProps } from './main-nav';
+import { Search, type SearchProps } from './search';
+import { Settings, type SettingsProps } from './settings';
 import styles from './toolbar.module.scss';
 
 export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
@@ -23,7 +22,7 @@ export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
  *
  * Render the website toolbar.
  */
-const Toolbar: FC<ToolbarProps> = ({
+export const Toolbar: FC<ToolbarProps> = ({
   ackeeStorageKey,
   className = '',
   motionStorageKey,
@@ -49,18 +48,18 @@ const Toolbar: FC<ToolbarProps> = ({
   return (
     <div className={`${styles.wrapper} ${className}`}>
       <MainNav
-        items={nav}
-        isActive={isNavOpened}
-        setIsActive={() => setIsNavOpened(!isNavOpened)}
         className={styles.modal}
+        isActive={isNavOpened}
+        items={nav}
         ref={mainNavRef}
+        setIsActive={() => setIsNavOpened(!isNavOpened)}
       />
       <Search
-        searchPage={searchPage}
-        isActive={isSearchOpened}
-        setIsActive={() => setIsSearchOpened(!isSearchOpened)}
         className={`${styles.modal} ${styles['modal--search']}`}
+        isActive={isSearchOpened}
         ref={searchRef}
+        searchPage={searchPage}
+        setIsActive={() => setIsSearchOpened(!isSearchOpened)}
       />
       <Settings
         ackeeStorageKey={ackeeStorageKey}
@@ -74,5 +73,3 @@ const Toolbar: FC<ToolbarProps> = ({
     </div>
   );
 };
-
-export default Toolbar;
diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx
index 2271c03..9460060 100644
--- a/src/components/organisms/widgets/image-widget.stories.tsx
+++ b/src/components/organisms/widgets/image-widget.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ImageWidget from './image-widget';
+import { ImageWidget } from './image-widget';
 
 /**
  * ImageWidget - Storybook Meta
diff --git a/src/components/organisms/widgets/image-widget.test.tsx b/src/components/organisms/widgets/image-widget.test.tsx
index b41e6a8..4a0f29f 100644
--- a/src/components/organisms/widgets/image-widget.test.tsx
+++ b/src/components/organisms/widgets/image-widget.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import ImageWidget from './image-widget';
+import { ImageWidget } from './image-widget';
 
 const description = 'Ut vitae sit';
 
diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx
index 7ca5d90..f3dc92f 100644
--- a/src/components/organisms/widgets/image-widget.tsx
+++ b/src/components/organisms/widgets/image-widget.tsx
@@ -1,8 +1,10 @@
 import { FC } from 'react';
-import ResponsiveImage, {
+import {
+  ResponsiveImage,
   type ResponsiveImageProps,
-} from '../../molecules/images/responsive-image';
-import Widget, { type WidgetProps } from '../../molecules/layout/widget';
+  Widget,
+  type WidgetProps,
+} from '../../molecules';
 import styles from './image-widget.module.scss';
 
 export type Alignment = 'left' | 'center' | 'right';
@@ -43,7 +45,7 @@ export type ImageWidgetProps = Pick<
  *
  * Renders a widget that print an image and an optional text.
  */
-const ImageWidget: FC<ImageWidgetProps> = ({
+export const ImageWidget: FC<ImageWidgetProps> = ({
   alignment = 'left',
   className = '',
   description,
@@ -57,13 +59,11 @@ const ImageWidget: FC<ImageWidgetProps> = ({
   return (
     <Widget className={`${styles[alignmentClass]} ${className}`} {...props}>
       <ResponsiveImage
-        target={url}
+        {...image}
         caption={description}
         className={`${styles.figure} ${imageClassName}`}
-        {...image}
+        target={url}
       />
     </Widget>
   );
 };
-
-export default ImageWidget;
diff --git a/src/components/organisms/widgets/index.ts b/src/components/organisms/widgets/index.ts
new file mode 100644
index 0000000..222ade0
--- /dev/null
+++ b/src/components/organisms/widgets/index.ts
@@ -0,0 +1,5 @@
+export * from './image-widget';
+export * from './links-list-widget';
+export * from './sharing';
+export * from './social-media';
+export * from './table-of-contents';
diff --git a/src/components/organisms/widgets/links-list-widget.stories.tsx b/src/components/organisms/widgets/links-list-widget.stories.tsx
index cdfa96a..3f62502 100644
--- a/src/components/organisms/widgets/links-list-widget.stories.tsx
+++ b/src/components/organisms/widgets/links-list-widget.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import LinksListWidget from './links-list-widget';
+import { LinksListWidget } from './links-list-widget';
 
 /**
  * LinksListWidget - Storybook Meta
diff --git a/src/components/organisms/widgets/links-list-widget.test.tsx b/src/components/organisms/widgets/links-list-widget.test.tsx
index 8578040..9d3f975 100644
--- a/src/components/organisms/widgets/links-list-widget.test.tsx
+++ b/src/components/organisms/widgets/links-list-widget.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import LinksListWidget from './links-list-widget';
+import { LinksListWidget } from './links-list-widget';
 
 const title = 'Voluptatem minus autem';
 
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 23392b9..df8430d 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -1,8 +1,7 @@
 import { FC } from 'react';
-import { slugify } from '../../../utils/helpers/strings';
-import Link from '../../atoms/links/link';
-import List, { type ListProps, type ListItem } from '../../atoms/lists/list';
-import Widget, { type WidgetProps } from '../../molecules/layout/widget';
+import { slugify } from '../../../utils/helpers';
+import { Link, List, type ListItem, type ListProps } from '../../atoms';
+import { Widget, type WidgetProps } from '../../molecules';
 import styles from './links-list-widget.module.scss';
 
 export type LinksListItems = {
@@ -33,7 +32,7 @@ export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
  *
  * Render a list of links inside a widget.
  */
-const LinksListWidget: FC<LinksListWidgetProps> = ({
+export const LinksListWidget: FC<LinksListWidgetProps> = ({
   className = '',
   items,
   kind = 'unordered',
@@ -63,20 +62,18 @@ const LinksListWidget: FC<LinksListWidgetProps> = ({
 
   return (
     <Widget
+      {...props}
+      className={styles.widget}
       expanded={true}
       withBorders={true}
-      className={styles.widget}
       withScroll={true}
-      {...props}
     >
       <List
-        items={getListItems(items)}
-        kind={kind}
         className={`${styles.list} ${styles[listKindClass]} ${className}`}
+        items={getListItems(items)}
         itemsClassName={styles.list__item}
+        kind={kind}
       />
     </Widget>
   );
 };
-
-export default LinksListWidget;
diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx
index 59b86d3..3f4a79e 100644
--- a/src/components/organisms/widgets/sharing.stories.tsx
+++ b/src/components/organisms/widgets/sharing.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SharingWidget from './sharing';
+import { Sharing as SharingWidget } from './sharing';
 
 /**
  * Sharing - Storybook Meta
diff --git a/src/components/organisms/widgets/sharing.test.tsx b/src/components/organisms/widgets/sharing.test.tsx
index f05a73b..50f92e3 100644
--- a/src/components/organisms/widgets/sharing.test.tsx
+++ b/src/components/organisms/widgets/sharing.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Sharing, { type SharingData } from './sharing';
+import { Sharing, type SharingData } from './sharing';
 
 const postData: SharingData = {
   excerpt: 'A post excerpt',
diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
index 57578cb..61d54d8 100644
--- a/src/components/organisms/widgets/sharing.tsx
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -1,9 +1,7 @@
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import SharingLink, {
-  type SharingMedium,
-} from '../../atoms/links/sharing-link';
-import Widget, { type WidgetProps } from '../../molecules/layout/widget';
+import { SharingLink, type SharingMedium } from '../../atoms';
+import { Widget, type WidgetProps } from '../../molecules';
 import styles from './sharing.module.scss';
 
 export type SharingData = {
@@ -49,7 +47,7 @@ export type SharingProps = {
  *
  * Render a list of sharing links inside a widget.
  */
-const Sharing: FC<SharingProps> = ({
+export const Sharing: FC<SharingProps> = ({
   className = '',
   data,
   media,
@@ -205,10 +203,8 @@ const Sharing: FC<SharingProps> = ({
   };
 
   return (
-    <Widget expanded={expanded} level={level} title={widgetTitle} {...props}>
+    <Widget {...props} expanded={expanded} level={level} title={widgetTitle}>
       <ul className={`${styles.list} ${className}`}>{getItems()}</ul>
     </Widget>
   );
 };
-
-export default Sharing;
diff --git a/src/components/organisms/widgets/social-media.stories.tsx b/src/components/organisms/widgets/social-media.stories.tsx
index 6c9de4d..f012554 100644
--- a/src/components/organisms/widgets/social-media.stories.tsx
+++ b/src/components/organisms/widgets/social-media.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SocialMediaWidget, { Media } from './social-media';
+import { SocialMedia as SocialMediaWidget, Media } from './social-media';
 
 /**
  * SocialMedia - Storybook Meta
diff --git a/src/components/organisms/widgets/social-media.test.tsx b/src/components/organisms/widgets/social-media.test.tsx
index a9056af..7bb1a07 100644
--- a/src/components/organisms/widgets/social-media.test.tsx
+++ b/src/components/organisms/widgets/social-media.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import SocialMedia, { Media } from './social-media';
+import { SocialMedia, Media } from './social-media';
 
 const media: Media[] = [
   { name: 'Github', url: '#' },
diff --git a/src/components/organisms/widgets/social-media.tsx b/src/components/organisms/widgets/social-media.tsx
index 1a261a9..40513f8 100644
--- a/src/components/organisms/widgets/social-media.tsx
+++ b/src/components/organisms/widgets/social-media.tsx
@@ -1,8 +1,6 @@
 import { FC } from 'react';
-import SocialLink, {
-  type SocialLinkProps,
-} from '../../atoms/links/social-link';
-import Widget, { type WidgetProps } from '../../molecules/layout/widget';
+import { SocialLink, type SocialLinkProps } from '../../atoms';
+import { Widget, type WidgetProps } from '../../molecules';
 import styles from './social-media.module.scss';
 
 export type Media = SocialLinkProps;
@@ -16,7 +14,7 @@ export type SocialMediaProps = Pick<WidgetProps, 'level' | 'title'> & {
  *
  * Render a social media list with links.
  */
-const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => {
+export const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => {
   /**
    * Retrieve the social media items.
    *
@@ -37,5 +35,3 @@ const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => {
     </Widget>
   );
 };
-
-export default SocialMedia;
diff --git a/src/components/organisms/widgets/table-of-contents.stories.tsx b/src/components/organisms/widgets/table-of-contents.stories.tsx
index 27a9a15..3078e35 100644
--- a/src/components/organisms/widgets/table-of-contents.stories.tsx
+++ b/src/components/organisms/widgets/table-of-contents.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ToCWidget from './table-of-contents';
+import { TableOfContents as ToCWidget } from './table-of-contents';
 
 /**
  * TableOfContents - Storybook Meta
diff --git a/src/components/organisms/widgets/table-of-contents.test.tsx b/src/components/organisms/widgets/table-of-contents.test.tsx
index dd0338a..32ff4ad 100644
--- a/src/components/organisms/widgets/table-of-contents.test.tsx
+++ b/src/components/organisms/widgets/table-of-contents.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import TableOfContents from './table-of-contents';
+import { TableOfContents } from './table-of-contents';
 
 describe('TableOfContents', () => {
   it('renders the ToC title', () => {
diff --git a/src/components/organisms/widgets/table-of-contents.tsx b/src/components/organisms/widgets/table-of-contents.tsx
index 0c18f03..0e8789a 100644
--- a/src/components/organisms/widgets/table-of-contents.tsx
+++ b/src/components/organisms/widgets/table-of-contents.tsx
@@ -1,9 +1,7 @@
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import useHeadingsTree, {
-  type Heading,
-} from '../../../utils/hooks/use-headings-tree';
-import LinksListWidget, { type LinksListItems } from './links-list-widget';
+import { useHeadingsTree, type Heading } from '../../../utils/hooks';
+import { type LinksListItems, LinksListWidget } from './links-list-widget';
 import styles from './table-of-contents.module.scss';
 
 type TableOfContentsProps = {
@@ -18,7 +16,7 @@ type TableOfContentsProps = {
  *
  * Render a table of contents.
  */
-const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => {
+export const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => {
   const intl = useIntl();
   const headingsTree = useHeadingsTree(wrapper);
   const title = intl.formatMessage({
@@ -45,13 +43,11 @@ const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => {
 
   return (
     <LinksListWidget
+      className={styles.list}
+      items={getItems(headingsTree)}
       kind="ordered"
-      title={title}
       level={2}
-      items={getItems(headingsTree)}
-      className={styles.list}
+      title={title}
     />
   );
 };
-
-export default TableOfContents;
-- 
cgit v1.2.3