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.

80 files changed, 335 insertions, 342 deletions

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;