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.
author: Armand Philippot <git@armandphilippot.com> 2023-09-20 16:38:54 +0200
committer: Armand Philippot <git@armandphilippot.com> 2023-09-20 16:38:54 +0200
commit: f861e6a269ba9f62700776d3cd13b644a9e836d4 (patch)
tree: a5a107e7a6e4ff8b4261fe04349357bc00b783ee /src
parent: 03331c44276ec56e9f235e4d5ee75030455a753f (diff)
378 files changed, 1534 insertions, 1795 deletions
diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index ff0a67f..32c2a7f 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ButtonLink from './button-link';
+import { ButtonLink } from './button-link';
 
 /**
  * ButtonLink - Storybook Meta
diff --git a/src/components/atoms/buttons/button-link.test.tsx b/src/components/atoms/buttons/button-link.test.tsx
index a5aa7b1..8fabacf 100644
--- a/src/components/atoms/buttons/button-link.test.tsx
+++ b/src/components/atoms/buttons/button-link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import ButtonLink from './button-link';
+import { ButtonLink } from './button-link';
 
 describe('ButtonLink', () => {
   it('renders a ButtonLink component', () => {
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index 7182d94..c8180c9 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -1,25 +1,13 @@
 import Link from 'next/link';
-import { FC, ReactNode } from 'react';
+import { AnchorHTMLAttributes, FC, ReactNode } from 'react';
 import styles from './buttons.module.scss';
 
-export type ButtonLinkProps = {
-  /**
-   * ButtonLink accessible label.
-   */
-  'aria-label'?: string;
-  /**
-   * One or more ids that refer to the accessible label.
-   */
-  'aria-labelledby'?: string;
+export type ButtonLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   /**
    * The button link body.
    */
   children: ReactNode;
   /**
-   * Set additional classnames to the button link.
-   */
-  className?: string;
-  /**
    * True if it is an external link. Default: false.
    */
   external?: boolean;
@@ -42,7 +30,7 @@ export type ButtonLinkProps = {
  *
  * Use a button-like link as call to action.
  */
-const ButtonLink: FC<ButtonLinkProps> = ({
+export const ButtonLink: FC<ButtonLinkProps> = ({
   children,
   className,
   target,
@@ -53,24 +41,15 @@ const ButtonLink: FC<ButtonLinkProps> = ({
 }) => {
   const kindClass = styles[`btn--${kind}`];
   const shapeClass = styles[`btn--${shape}`];
+  const btnClass = `${styles.btn} ${kindClass} ${shapeClass} ${className}`;
 
   return external ? (
-    <a
-      href={target}
-      className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
-      {...props}
-    >
+    <a {...props} className={btnClass} href={target}>
       {children}
     </a>
   ) : (
-    <Link
-      {...props}
-      className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
-      href={target}
-    >
+    <Link {...props} className={btnClass} href={target}>
       {children}
     </Link>
   );
 };
-
-export default ButtonLink;
diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx
index 6803706..ba09a0d 100644
--- a/src/components/atoms/buttons/button.stories.tsx
+++ b/src/components/atoms/buttons/button.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Button from './button';
+import { Button } from './button';
 
 /**
  * Button - Storybook Meta
diff --git a/src/components/atoms/buttons/button.test.tsx b/src/components/atoms/buttons/button.test.tsx
index 90fca02..1162b2b 100644
--- a/src/components/atoms/buttons/button.test.tsx
+++ b/src/components/atoms/buttons/button.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Button from './button';
+import { Button } from './button';
 
 describe('Button', () => {
   it('renders the Button component', () => {
diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index fecbcfd..6ef5775 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -1,56 +1,46 @@
 import {
+  ButtonHTMLAttributes,
   forwardRef,
   ForwardRefRenderFunction,
-  MouseEventHandler,
   ReactNode,
 } from 'react';
 import styles from './buttons.module.scss';
 
-export type ButtonProps = {
-  /**
-   * Button accessible label.
-   */
-  'aria-label'?: string;
-  /**
-   * Indicates the current "pressed" state of a toggle button.
-   */
-  'aria-pressed'?: boolean | 'mixed';
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   /**
    * The button body.
    */
   children: ReactNode;
   /**
-   * Set additional classnames to the button wrapper.
-   */
-  className?: string;
-  /**
-   * Button state. Default: false.
+   * Button state.
+   *
+   * @default false
    */
   disabled?: boolean;
   /**
-   * Button kind. Default: secondary.
+   * Button kind.
+   *
+   * @default 'secondary'
    */
   kind?: 'primary' | 'secondary' | 'tertiary' | 'neutral';
   /**
-   * A callback function to handle click.
-   */
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  /**
-   * Button shape. Default: rectangle.
+   * Button shape.
+   *
+   * @default 'rectangle'
    */
   shape?: 'circle' | 'rectangle' | 'square' | 'initial';
   /**
-   * Button type attribute. Default: button.
+   * Button type attribute.
+   *
+   * @default 'button'
    */
   type?: 'button' | 'reset' | 'submit';
 };
 
-/**
- * Button component
- *
- * Use a button as call to action.
- */
-const Button: ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
+const ButtonWithRef: ForwardRefRenderFunction<
+  HTMLButtonElement,
+  ButtonProps
+> = (
   {
     className = '',
     children,
@@ -64,18 +54,24 @@ const Button: ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
 ) => {
   const kindClass = styles[`btn--${kind}`];
   const shapeClass = styles[`btn--${shape}`];
+  const btnClass = `${styles.btn} ${kindClass} ${shapeClass} ${className}`;
 
   return (
     <button
-      className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
+      {...props}
+      className={btnClass}
       disabled={disabled}
       ref={ref}
       type={type}
-      {...props}
     >
       {children}
     </button>
   );
 };
 
-export default forwardRef(Button);
+/**
+ * Button component
+ *
+ * Use a button as call to action.
+ */
+export const Button = forwardRef(ButtonWithRef);
diff --git a/src/components/atoms/buttons/index.ts b/src/components/atoms/buttons/index.ts
new file mode 100644
index 0000000..486e485
--- /dev/null
+++ b/src/components/atoms/buttons/index.ts
@@ -0,0 +1,2 @@
+export * from './button';
+export * from './button-link';
diff --git a/src/components/atoms/forms/boolean-field.stories.tsx b/src/components/atoms/forms/boolean-field.stories.tsx
index 8b6136b..3d6f8c3 100644
--- a/src/components/atoms/forms/boolean-field.stories.tsx
+++ b/src/components/atoms/forms/boolean-field.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import BooleanFieldComponent from './boolean-field';
+import { BooleanField } from './boolean-field';
 
 /**
  * BooleanField - Storybook Meta
  */
 export default {
   title: 'Atoms/Forms',
-  component: BooleanFieldComponent,
+  component: BooleanField,
   args: {
     hidden: false,
   },
@@ -130,9 +130,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof BooleanFieldComponent>;
+} as ComponentMeta<typeof BooleanField>;
 
-const Template: ComponentStory<typeof BooleanFieldComponent> = ({
+const Template: ComponentStory<typeof BooleanField> = ({
   checked,
   onChange: _onChange,
   ...args
@@ -140,7 +140,7 @@ const Template: ComponentStory<typeof BooleanFieldComponent> = ({
   const [isChecked, setIsChecked] = useState<boolean>(checked);
 
   return (
-    <BooleanFieldComponent
+    <BooleanField
       checked={isChecked}
       onChange={() => {
         setIsChecked(!isChecked);
diff --git a/src/components/atoms/forms/boolean-field.test.tsx b/src/components/atoms/forms/boolean-field.test.tsx
index b6fa625..503d1ce 100644
--- a/src/components/atoms/forms/boolean-field.test.tsx
+++ b/src/components/atoms/forms/boolean-field.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import BooleanField from './boolean-field';
+import { BooleanField } from './boolean-field';
 
 describe('BooleanField', () => {
   it('renders an unchecked checkbox', () => {
diff --git a/src/components/atoms/forms/boolean-field.tsx b/src/components/atoms/forms/boolean-field.tsx
index 946e375..8f33a42 100644
--- a/src/components/atoms/forms/boolean-field.tsx
+++ b/src/components/atoms/forms/boolean-field.tsx
@@ -1,24 +1,15 @@
-import { ChangeEventHandler, FC, MouseEventHandler } from 'react';
+import { FC, InputHTMLAttributes } from 'react';
 import styles from './boolean-field.module.scss';
 
-export type BooleanFieldProps = {
-  /**
-   * One or more ids that refers to the checkbox name.
-   */
-  'aria-labelledby'?: string;
+export type BooleanFieldProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'hidden' | 'name' | 'type' | 'value'
+> & {
   /**
    * True if the field should be checked.
    */
   checked: boolean;
   /**
-   * Add classnames to the checkbox.
-   */
-  className?: string;
-  /**
-   * Field id attribute.
-   */
-  id: string;
-  /**
    * True if the field should be visually hidden. Default: false.
    */
   hidden?: boolean;
@@ -27,14 +18,6 @@ export type BooleanFieldProps = {
    */
   name: string;
   /**
-   * Callback function to handle state change.
-   */
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  /**
-   * A callback function to handle click.
-   */
-  onClick?: MouseEventHandler<HTMLInputElement>;
-  /**
    * The input type.
    */
   type: 'checkbox' | 'radio';
@@ -49,14 +32,13 @@ export type BooleanFieldProps = {
  *
  * Render a checkbox or a radio input type.
  */
-const BooleanField: FC<BooleanFieldProps> = ({
+export const BooleanField: FC<BooleanFieldProps> = ({
   className = '',
   hidden = false,
   ...props
 }) => {
   const modifier = hidden ? 'hidden' : '';
+  const inputClass = `${styles[modifier]} ${className}`;
 
-  return <input className={`${styles[modifier]} ${className}`} {...props} />;
+  return <input {...props} className={inputClass} />;
 };
-
-export default BooleanField;
diff --git a/src/components/atoms/forms/field.stories.tsx b/src/components/atoms/forms/field.stories.tsx
index 00a183d..27fd3be 100644
--- a/src/components/atoms/forms/field.stories.tsx
+++ b/src/components/atoms/forms/field.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import Field from './field';
+import { Field } from './field';
 
 /**
  * Field - Storybook Meta
diff --git a/src/components/atoms/forms/field.test.tsx b/src/components/atoms/forms/field.test.tsx
index 26ad764..492aa48 100644
--- a/src/components/atoms/forms/field.test.tsx
+++ b/src/components/atoms/forms/field.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Field from './field';
+import { Field } from './field';
 
 describe('Field', () => {
   it('renders a text input', () => {
diff --git a/src/components/atoms/forms/field.tsx b/src/components/atoms/forms/field.tsx
index 377e1b0..a4553e3 100644
--- a/src/components/atoms/forms/field.tsx
+++ b/src/components/atoms/forms/field.tsx
@@ -72,12 +72,7 @@ export type FieldProps = {
   value: string;
 };
 
-/**
- * Field component.
- *
- * Render either an input or a textarea.
- */
-const Field: ForwardRefRenderFunction<HTMLInputElement, FieldProps> = (
+const FieldWithRef: ForwardRefRenderFunction<HTMLInputElement, FieldProps> = (
   { className = '', setValue, type, ...props },
   ref
 ) => {
@@ -93,19 +88,24 @@ const Field: ForwardRefRenderFunction<HTMLInputElement, FieldProps> = (
 
   return type === 'textarea' ? (
     <textarea
-      onChange={updateValue}
-      className={`${styles.field} ${styles['field--textarea']} ${className}`}
       {...props}
+      className={`${styles.field} ${styles['field--textarea']} ${className}`}
+      onChange={updateValue}
     />
   ) : (
     <input
+      {...props}
       className={`${styles.field} ${className}`}
       onChange={updateValue}
       ref={ref}
       type={type}
-      {...props}
     />
   );
 };
 
-export default forwardRef(Field);
+/**
+ * Field component.
+ *
+ * Render either an input or a textarea.
+ */
+export const Field = forwardRef(FieldWithRef);
diff --git a/src/components/atoms/forms/form.test.tsx b/src/components/atoms/forms/form.test.tsx
index 3a055ed..b040665 100644
--- a/src/components/atoms/forms/form.test.tsx
+++ b/src/components/atoms/forms/form.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Form from './form';
+import { Form } from './form';
 
 describe('Form', () => {
   it('renders a form', () => {
diff --git a/src/components/atoms/forms/form.tsx b/src/components/atoms/forms/form.tsx
index 3307153..85ff8fd 100644
--- a/src/components/atoms/forms/form.tsx
+++ b/src/components/atoms/forms/form.tsx
@@ -1,24 +1,22 @@
-import { Children, FC, FormEvent, Fragment, ReactNode } from 'react';
+import {
+  Children,
+  FC,
+  FormEvent,
+  FormHTMLAttributes,
+  Fragment,
+  ReactNode,
+} from 'react';
 import styles from './forms.module.scss';
 
-export type FormProps = {
-  /**
-   * An accessible name.
-   */
-  'aria-label'?: string;
-  /**
-   * One or more ids that refers to the form name.
-   */
-  'aria-labelledby'?: string;
+export type FormProps = Omit<
+  FormHTMLAttributes<HTMLFormElement>,
+  'onSubmit'
+> & {
   /**
    * The form body.
    */
   children: ReactNode;
   /**
-   * Set additional classnames to the form wrapper.
-   */
-  className?: string;
-  /**
    * Wrap each items with a div. Default: true.
    */
   grouped?: boolean;
@@ -37,7 +35,7 @@ export type FormProps = {
  *
  * Render children wrapped in a form element.
  */
-const Form: FC<FormProps> = ({
+export const Form: FC<FormProps> = ({
   children,
   grouped = true,
   itemsClassName = '',
@@ -75,10 +73,8 @@ const Form: FC<FormProps> = ({
   };
 
   return (
-    <form onSubmit={handleSubmit} {...props}>
+    <form {...props} onSubmit={handleSubmit}>
       {getFormItems()}
     </form>
   );
 };
-
-export default Form;
diff --git a/src/components/atoms/forms/index.ts b/src/components/atoms/forms/index.ts
new file mode 100644
index 0000000..0af138f
--- /dev/null
+++ b/src/components/atoms/forms/index.ts
@@ -0,0 +1,5 @@
+export * from './boolean-field';
+export * from './field';
+export * from './form';
+export * from './label';
+export * from './select';
diff --git a/src/components/atoms/forms/label.stories.tsx b/src/components/atoms/forms/label.stories.tsx
index f66aa13..3adc92a 100644
--- a/src/components/atoms/forms/label.stories.tsx
+++ b/src/components/atoms/forms/label.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import LabelComponent from './label';
+import { Label as LabelComponent } from './label';
 
 /**
  * Label - Storybook Meta
diff --git a/src/components/atoms/forms/label.test.tsx b/src/components/atoms/forms/label.test.tsx
index 761d3b4..091737b 100644
--- a/src/components/atoms/forms/label.test.tsx
+++ b/src/components/atoms/forms/label.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Label from './label';
+import { Label } from './label';
 
 describe('Label', () => {
   it('renders a field label', () => {
diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx
index 2ec614f..6764579 100644
--- a/src/components/atoms/forms/label.tsx
+++ b/src/components/atoms/forms/label.tsx
@@ -1,24 +1,12 @@
-import { FC, ReactNode } from 'react';
+import { FC, LabelHTMLAttributes, ReactNode } from 'react';
 import styles from './label.module.scss';
 
-export type LabelProps = {
-  /**
-   * An accessible name for the label.
-   */
-  'aria-label'?: string;
+export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
   /**
    * The label body.
    */
   children: ReactNode;
   /**
-   * Add classnames to the label.
-   */
-  className?: string;
-  /**
-   * The field id.
-   */
-  htmlFor?: string;
-  /**
    * Is the field required? Default: false.
    */
   required?: boolean;
@@ -33,7 +21,7 @@ export type LabelProps = {
  *
  * Render a HTML label element.
  */
-const Label: FC<LabelProps> = ({
+export const Label: FC<LabelProps> = ({
   children,
   className = '',
   required = false,
@@ -41,13 +29,12 @@ const Label: FC<LabelProps> = ({
   ...props
 }) => {
   const sizeClass = styles[`label--${size}`];
+  const labelClass = `${styles.label} ${sizeClass} ${className}`;
 
   return (
-    <label className={`${styles.label} ${sizeClass} ${className}`} {...props}>
+    <label {...props} className={labelClass}>
       {children}
       {required && <span className={styles.required}> *</span>}
     </label>
   );
 };
-
-export default Label;
diff --git a/src/components/atoms/forms/select.stories.tsx b/src/components/atoms/forms/select.stories.tsx
index 7127597..b98ebed 100644
--- a/src/components/atoms/forms/select.stories.tsx
+++ b/src/components/atoms/forms/select.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import SelectComponent from './select';
+import { Select as SelectComponent } from './select';
 
 const selectOptions = [
   { id: 'option1', name: 'Option 1', value: 'option1' },
diff --git a/src/components/atoms/forms/select.test.tsx b/src/components/atoms/forms/select.test.tsx
index ca9f6d3..53d9b1f 100644
--- a/src/components/atoms/forms/select.test.tsx
+++ b/src/components/atoms/forms/select.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Select from './select';
+import { Select } from './select';
 
 const selectOptions = [
   { id: 'option1', name: 'Option 1', value: 'option1' },
diff --git a/src/components/atoms/forms/select.tsx b/src/components/atoms/forms/select.tsx
index dbe9b37..14f85dc 100644
--- a/src/components/atoms/forms/select.tsx
+++ b/src/components/atoms/forms/select.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, SetStateAction } from 'react';
+import { ChangeEvent, FC, SelectHTMLAttributes, SetStateAction } from 'react';
 import styles from './forms.module.scss';
 
 export type SelectOptions = {
@@ -16,19 +16,7 @@ export type SelectOptions = {
   value: string;
 };
 
-export type SelectProps = {
-  /**
-   * One or more ids that refers to the select field name.
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Add classnames to the select field.
-   */
-  className?: string;
-  /**
-   * Field state. Either enabled (false) or disabled (true).
-   */
-  disabled?: boolean;
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
   /**
    * Field id attribute.
    */
@@ -42,10 +30,6 @@ export type SelectProps = {
    */
   options: SelectOptions[];
   /**
-   * True if the field is required. Default: false.
-   */
-  required?: boolean;
-  /**
    * Callback function to set field value.
    */
   setValue: (value: SetStateAction<string>) => void;
@@ -60,12 +44,14 @@ export type SelectProps = {
  *
  * Render a HTML select element.
  */
-const Select: FC<SelectProps> = ({
+export const Select: FC<SelectProps> = ({
   className = '',
   options,
   setValue,
   ...props
 }) => {
+  const selectClass = `${styles.field} ${styles['field--select']} ${className}`;
+
   /**
    * Update select value when an option is selected.
    * @param e - The option change event.
@@ -86,14 +72,8 @@ const Select: FC<SelectProps> = ({
     ));
 
   return (
-    <select
-      className={`${styles.field} ${styles['field--select']} ${className}`}
-      onChange={updateValue}
-      {...props}
-    >
+    <select {...props} className={selectClass} onChange={updateValue}>
       {getOptions()}
     </select>
   );
 };
-
-export default Select;
diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx
index 0e3885d..4aa79c2 100644
--- a/src/components/atoms/headings/heading.stories.tsx
+++ b/src/components/atoms/headings/heading.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Heading from './heading';
+import { Heading } from './heading';
 
 /**
  * Heading - Storybook Meta
diff --git a/src/components/atoms/headings/heading.test.tsx b/src/components/atoms/headings/heading.test.tsx
index e1eef77..636fae0 100644
--- a/src/components/atoms/headings/heading.test.tsx
+++ b/src/components/atoms/headings/heading.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Heading from './heading';
+import { Heading } from './heading';
 
 describe('Heading', () => {
   it('renders a h1', () => {
diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx
index b1e4c5f..b1b6164 100644
--- a/src/components/atoms/headings/heading.tsx
+++ b/src/components/atoms/headings/heading.tsx
@@ -3,13 +3,14 @@ import {
   ForwardedRef,
   forwardRef,
   ForwardRefRenderFunction,
+  HTMLAttributes,
   ReactNode,
 } from 'react';
 import styles from './heading.module.scss';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
-export type HeadingProps = {
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
   /**
    * The title alignment. Default: left;
    */
@@ -19,14 +20,6 @@ export type HeadingProps = {
    */
   children: ReactNode;
   /**
-   * Set additional classnames.
-   */
-  className?: string;
-  /**
-   * The heading id.
-   */
-  id?: string;
-  /**
    * Use an heading element or only its styles. Default: false.
    */
   isFake?: boolean;
@@ -57,23 +50,19 @@ const TitleTag = forwardRef<
 );
 TitleTag.displayName = 'TitleTag';
 
-/**
- * Heading component.
- *
- * Render an HTML heading element or a paragraph with heading styles.
- */
-const Heading: ForwardRefRenderFunction<
+const HeadingWithRef: ForwardRefRenderFunction<
   HTMLHeadingElement | HTMLParagraphElement,
   HeadingProps
 > = (
   {
     alignment = 'left',
     children,
-    className,
+    className = '',
     id,
     isFake = false,
     level,
     withMargin = true,
+    ...props
   },
   ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement>
 ) => {
@@ -81,17 +70,24 @@ const Heading: ForwardRefRenderFunction<
   const levelClass = `heading--${level}`;
   const alignmentClass = `heading--${alignment}`;
   const marginClass = withMargin ? 'heading--margin' : 'heading--regular';
+  const headingClass = `${styles.heading} ${styles[levelClass]} ${styles[alignmentClass]} ${styles[marginClass]} ${className}`;
 
   return (
     <TitleTag
-      tagName={tagName}
-      className={`${styles.heading} ${styles[levelClass]} ${styles[alignmentClass]} ${styles[marginClass]} ${className}`}
+      {...props}
+      className={headingClass}
       id={id}
       ref={ref}
+      tagName={tagName}
     >
       {children}
     </TitleTag>
   );
 };
 
-export default forwardRef(Heading);
+/**
+ * Heading component.
+ *
+ * Render an HTML heading element or a paragraph with heading styles.
+ */
+export const Heading = forwardRef(HeadingWithRef);
diff --git a/src/components/atoms/headings/index.ts b/src/components/atoms/headings/index.ts
new file mode 100644
index 0000000..3de265c
--- /dev/null
+++ b/src/components/atoms/headings/index.ts
@@ -0,0 +1 @@
+export * from './heading';
diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx
index 9234886..a49be55 100644
--- a/src/components/atoms/icons/arrow.stories.tsx
+++ b/src/components/atoms/icons/arrow.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ArrowIcon from './arrow';
+import { Arrow as ArrowIcon } from './arrow';
 
 /**
  * Arrow icon - Storybook Meta
diff --git a/src/components/atoms/icons/arrow.test.tsx b/src/components/atoms/icons/arrow.test.tsx
index 9985717..ed1d1e2 100644
--- a/src/components/atoms/icons/arrow.test.tsx
+++ b/src/components/atoms/icons/arrow.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Arrow from './arrow';
+import { Arrow } from './arrow';
 
 describe('Arrow', () => {
   it('renders an arrow icon oriented to the right', () => {
diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx
index 8aec5a1..2ef0185 100644
--- a/src/components/atoms/icons/arrow.tsx
+++ b/src/components/atoms/icons/arrow.tsx
@@ -1,17 +1,9 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './arrow.module.scss';
 
 export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
 
-export type ArrowProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
+export type ArrowProps = SVGAttributes<SVGElement> & {
   /**
    * The arrow direction. Default: right.
    */
@@ -23,17 +15,21 @@ export type ArrowProps = {
  *
  * Render a svg arrow icon.
  */
-const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
+export const Arrow: FC<ArrowProps> = ({
+  className = '',
+  direction,
+  ...props
+}) => {
   const directionClass = styles[`icon--${direction}`];
   const classes = `${styles.icon} ${directionClass} ${className}`;
 
   if (direction === 'top') {
     return (
       <svg
+        {...props}
         className={classes}
         viewBox="0 0 23.476 64.644995"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
       >
         <path
           className="arrow-head"
@@ -50,10 +46,10 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
   if (direction === 'bottom') {
     return (
       <svg
+        {...props}
         className={classes}
         viewBox="0 0 23.476 64.644995"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
       >
         <path
           className="arrow-head"
@@ -70,10 +66,10 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
   if (direction === 'left') {
     return (
       <svg
+        {...props}
         className={classes}
         viewBox="0 0 64.644997 23.476001"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
       >
         <path
           className="arrow-head"
@@ -89,10 +85,10 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
 
   return (
     <svg
+      {...props}
       className={classes}
       viewBox="0 0 64.644997 23.476001"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
     >
       <path
         className="arrow-head"
@@ -105,5 +101,3 @@ const Arrow: FC<ArrowProps> = ({ className = '', direction, ...props }) => {
     </svg>
   );
 };
-
-export default Arrow;
diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx
index 400ed21..5c3ae12 100644
--- a/src/components/atoms/icons/career.stories.tsx
+++ b/src/components/atoms/icons/career.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CareerIcon from './career';
+import { Career as CareerIcon } from './career';
 
 /**
  * Career icon - Storybook Meta
diff --git a/src/components/atoms/icons/career.test.tsx b/src/components/atoms/icons/career.test.tsx
index 0c47262..7e53f6e 100644
--- a/src/components/atoms/icons/career.test.tsx
+++ b/src/components/atoms/icons/career.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Career from './career';
+import { Career } from './career';
 
 describe('Career', () => {
   it('renders a Career icon', () => {
diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx
index 009c2b4..6456d40 100644
--- a/src/components/atoms/icons/career.tsx
+++ b/src/components/atoms/icons/career.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './career.module.scss';
 
-export type CareerProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CareerProps = SVGAttributes<SVGElement>;
 
 /**
  * Career Component
  *
  * Render a career svg icon.
  */
-const Career: FC<CareerProps> = ({ className = '', ...props }) => {
+export const Career: FC<CareerProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.bottom}
@@ -72,5 +63,3 @@ const Career: FC<CareerProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Career;
diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx
index 4229725..2a29ee3 100644
--- a/src/components/atoms/icons/cc-by-sa.stories.tsx
+++ b/src/components/atoms/icons/cc-by-sa.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CCBySAIcon from './cc-by-sa';
+import { CCBySA as CCBySAIcon } from './cc-by-sa';
 
 /**
  * CC BY SA icon - Storybook Meta
diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx
index 2bcb437..a23059d 100644
--- a/src/components/atoms/icons/cc-by-sa.test.tsx
+++ b/src/components/atoms/icons/cc-by-sa.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import CCBySA from './cc-by-sa';
+import { CCBySA } from './cc-by-sa';
 
 describe('CCBySA', () => {
   it('renders a CC BY SA icon', () => {
diff --git a/src/components/atoms/icons/cc-by-sa.tsx b/src/components/atoms/icons/cc-by-sa.tsx
index 8239154..ba6d278 100644
--- a/src/components/atoms/icons/cc-by-sa.tsx
+++ b/src/components/atoms/icons/cc-by-sa.tsx
@@ -1,24 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './cc-by-sa.module.scss';
 
-export type CCBySAProps = {
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CCBySAProps = SVGAttributes<SVGElement>;
 
 /**
  * CCBySA component
  *
  * Render a CC BY SA svg icon.
  */
-const CCBySA: FC<CCBySAProps> = ({ className = '' }) => {
+export const CCBySA: FC<CCBySAProps> = ({ className = '', ...props }) => {
   const intl = useIntl();
 
   return (
     <svg
+      {...props}
       className={`${styles.icon} ${className}`}
       viewBox="0 0 211.99811 63.999996"
       xmlns="http://www.w3.org/2000/svg"
@@ -41,5 +37,3 @@ const CCBySA: FC<CCBySAProps> = ({ className = '' }) => {
     </svg>
   );
 };
-
-export default CCBySA;
diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx
index 05251c5..d075141 100644
--- a/src/components/atoms/icons/close.stories.tsx
+++ b/src/components/atoms/icons/close.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CloseIcon from './close';
+import { Close as CloseIcon } from './close';
 
 /**
  * Close icon - Storybook Meta
diff --git a/src/components/atoms/icons/close.test.tsx b/src/components/atoms/icons/close.test.tsx
index dc82a2d..058b793 100644
--- a/src/components/atoms/icons/close.test.tsx
+++ b/src/components/atoms/icons/close.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Close from './close';
+import { Close } from './close';
 
 describe('Close', () => {
   it('renders a Close icon', () => {
diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx
index 14239a1..5db8620 100644
--- a/src/components/atoms/icons/close.tsx
+++ b/src/components/atoms/icons/close.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './close.module.scss';
 
-export type CloseProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CloseProps = SVGAttributes<SVGElement>;
 
 /**
  * Close component
  *
  * Render a close svg icon.
  */
-const Close: FC<CloseProps> = ({ className = '', ...props }) => {
+export const Close: FC<CloseProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.line}
@@ -36,5 +27,3 @@ const Close: FC<CloseProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Close;
diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx
index 74228ca..1b6d440 100644
--- a/src/components/atoms/icons/cog.stories.tsx
+++ b/src/components/atoms/icons/cog.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CogIcon from './cog';
+import { Cog as CogIcon } from './cog';
 
 /**
  * Cogs icon - Storybook Meta
diff --git a/src/components/atoms/icons/cog.test.tsx b/src/components/atoms/icons/cog.test.tsx
index 9d201b1..016ef15 100644
--- a/src/components/atoms/icons/cog.test.tsx
+++ b/src/components/atoms/icons/cog.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Cog from './cog';
+import { Cog } from './cog';
 
 describe('Cog', () => {
   it('renders a Cog icon', () => {
diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx
index 5431f9e..6e44708 100644
--- a/src/components/atoms/icons/cog.tsx
+++ b/src/components/atoms/icons/cog.tsx
@@ -1,34 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './cog.module.scss';
 
-export type CogProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type CogProps = SVGAttributes<SVGElement>;
 
 /**
  * Cog component
  *
  * Render a cog svg icon.
  */
-const Cog: FC<CogProps> = ({ className = '', ...props }) => {
+export const Cog: FC<CogProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" />
       <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" />
     </svg>
   );
 };
-
-export default Cog;
diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx
index ad457a9..d4b257b 100644
--- a/src/components/atoms/icons/computer-screen.stories.tsx
+++ b/src/components/atoms/icons/computer-screen.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ComputerScreenIcon from './computer-screen';
+import { ComputerScreen as ComputerScreenIcon } from './computer-screen';
 
 /**
  * Computer Screen icon - Storybook Meta
diff --git a/src/components/atoms/icons/computer-screen.test.tsx b/src/components/atoms/icons/computer-screen.test.tsx
index baa2c78..d74933a 100644
--- a/src/components/atoms/icons/computer-screen.test.tsx
+++ b/src/components/atoms/icons/computer-screen.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import ComputerScreen from './computer-screen';
+import { ComputerScreen } from './computer-screen';
 
 describe('ComputerScreen', () => {
   it('renders a computer screen icon', () => {
diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx
index 9293316..32f41a0 100644
--- a/src/components/atoms/icons/computer-screen.tsx
+++ b/src/components/atoms/icons/computer-screen.tsx
@@ -1,32 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './computer-screen.module.scss';
 
-export type ComputerScreenProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type ComputerScreenProps = SVGAttributes<SVGElement>;
 
 /**
  * ComputerScreen component
  *
  * Render a computer screen svg icon.
  */
-const ComputerScreen: FC<ComputerScreenProps> = ({
+export const ComputerScreen: FC<ComputerScreenProps> = ({
   className = '',
   ...props
 }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
@@ -83,5 +74,3 @@ const ComputerScreen: FC<ComputerScreenProps> = ({
     </svg>
   );
 };
-
-export default ComputerScreen;
diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx
index 3d24d2e..666cd86 100644
--- a/src/components/atoms/icons/envelop.stories.tsx
+++ b/src/components/atoms/icons/envelop.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import EnvelopIcon from './envelop';
+import { Envelop as EnvelopIcon } from './envelop';
 
 /**
  * Envelop icon - Storybook Meta
diff --git a/src/components/atoms/icons/envelop.test.tsx b/src/components/atoms/icons/envelop.test.tsx
index c040134..1829fe2 100644
--- a/src/components/atoms/icons/envelop.test.tsx
+++ b/src/components/atoms/icons/envelop.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Envelop from './envelop';
+import { Envelop } from './envelop';
 
 describe('Envelop', () => {
   it('renders an envelop icon', () => {
diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx
index 99a003b..968c51f 100644
--- a/src/components/atoms/icons/envelop.tsx
+++ b/src/components/atoms/icons/envelop.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './envelop.module.scss';
 
-export type EnvelopProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type EnvelopProps = SVGAttributes<SVGElement>;
 
 /**
  * Envelop Component
  *
  * Render an envelop svg icon.
  */
-const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
+export const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.background}
@@ -68,5 +59,3 @@ const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Envelop;
diff --git a/src/components/atoms/icons/feed.stories.tsx b/src/components/atoms/icons/feed.stories.tsx
index 5e4615f..1a297e9 100644
--- a/src/components/atoms/icons/feed.stories.tsx
+++ b/src/components/atoms/icons/feed.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import FeedIcon from './feed';
+import { Feed as FeedIcon } from './feed';
 
 /**
  * Feed icon - Storybook Meta
diff --git a/src/components/atoms/icons/feed.test.tsx b/src/components/atoms/icons/feed.test.tsx
index 630089d..ca6f331 100644
--- a/src/components/atoms/icons/feed.test.tsx
+++ b/src/components/atoms/icons/feed.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Feed from './feed';
+import { Feed } from './feed';
 
 describe('Feed', () => {
   it('renders a feed icon', () => {
diff --git a/src/components/atoms/icons/feed.tsx b/src/components/atoms/icons/feed.tsx
index 4428eb9..40b3156 100644
--- a/src/components/atoms/icons/feed.tsx
+++ b/src/components/atoms/icons/feed.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './feed.module.scss';
 
-export type FeedProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type FeedProps = SVGAttributes<SVGElement>;
 
 /**
  * Feed Component
  *
  * Render a feed svg icon.
  */
-const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
+export const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 256 256"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <defs>
         <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
@@ -75,5 +66,3 @@ const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Feed;
diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx
index 0a8a8cc..b2416c6 100644
--- a/src/components/atoms/icons/hamburger.stories.tsx
+++ b/src/components/atoms/icons/hamburger.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import HamburgerIcon from './hamburger';
+import { Hamburger as HamburgerIcon } from './hamburger';
 
 /**
  * Hamburger icon - Storybook Meta
diff --git a/src/components/atoms/icons/hamburger.test.tsx b/src/components/atoms/icons/hamburger.test.tsx
index 4f6a457..b208a42 100644
--- a/src/components/atoms/icons/hamburger.test.tsx
+++ b/src/components/atoms/icons/hamburger.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Hamburger from './hamburger';
+import { Hamburger } from './hamburger';
 
 describe('Hamburger', () => {
   it('renders a Hamburger icon', () => {
diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx
index 93aed2a..cc4e7b9 100644
--- a/src/components/atoms/icons/hamburger.tsx
+++ b/src/components/atoms/icons/hamburger.tsx
@@ -6,7 +6,6 @@ export type HamburgerProps = {
    * Set additional classnames to the icon wrapper.
    */
   className?: string;
-
   /**
    * Set additional classnames to the icon.
    */
@@ -18,7 +17,7 @@ export type HamburgerProps = {
  *
  * Render a Hamburger icon.
  */
-const Hamburger: FC<HamburgerProps> = ({
+export const Hamburger: FC<HamburgerProps> = ({
   className = '',
   iconClassName = '',
 }) => {
@@ -28,5 +27,3 @@ const Hamburger: FC<HamburgerProps> = ({
     </span>
   );
 };
-
-export default Hamburger;
diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx
index 90650fc..7492af7 100644
--- a/src/components/atoms/icons/home.stories.tsx
+++ b/src/components/atoms/icons/home.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import HomeIcon from './home';
+import { Home as HomeIcon } from './home';
 
 /**
  * Home icon - Storybook Meta
diff --git a/src/components/atoms/icons/home.test.tsx b/src/components/atoms/icons/home.test.tsx
index 0473d0b..2fbe42f 100644
--- a/src/components/atoms/icons/home.test.tsx
+++ b/src/components/atoms/icons/home.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Home from './home';
+import { Home } from './home';
 
 describe('Home', () => {
   it('renders a home icon', () => {
diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx
index dd39b15..0081f37 100644
--- a/src/components/atoms/icons/home.tsx
+++ b/src/components/atoms/icons/home.tsx
@@ -1,29 +1,20 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './home.module.scss';
 
-export type HomeProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type HomeProps = SVGAttributes<SVGElement>;
 
 /**
  * Home component.
  *
  * Render a home svg icon.
  */
-const Home: FC<HomeProps> = ({ className = '', ...props }) => {
+export const Home: FC<HomeProps> = ({ className = '', ...props }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.wall}
@@ -56,5 +47,3 @@ const Home: FC<HomeProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default Home;
diff --git a/src/components/atoms/icons/index.ts b/src/components/atoms/icons/index.ts
new file mode 100644
index 0000000..1b413ba
--- /dev/null
+++ b/src/components/atoms/icons/index.ts
@@ -0,0 +1,15 @@
+export * from './arrow';
+export * from './career';
+export * from './cc-by-sa';
+export * from './close';
+export * from './cog';
+export * from './computer-screen';
+export * from './envelop';
+export * from './feed';
+export * from './hamburger';
+export * from './home';
+export * from './magnifying-glass';
+export * from './moon';
+export * from './plus-minus';
+export * from './posts-stack';
+export * from './sun';
diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx
index 0715a11..7dec505 100644
--- a/src/components/atoms/icons/magnifying-glass.stories.tsx
+++ b/src/components/atoms/icons/magnifying-glass.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import MagnifyingGlassIcon from './magnifying-glass';
+import { MagnifyingGlass as MagnifyingGlassIcon } from './magnifying-glass';
 
 /**
  * Magnifying Glass icon - Storybook Meta
diff --git a/src/components/atoms/icons/magnifying-glass.test.tsx b/src/components/atoms/icons/magnifying-glass.test.tsx
index c6ddb18..4e2f449 100644
--- a/src/components/atoms/icons/magnifying-glass.test.tsx
+++ b/src/components/atoms/icons/magnifying-glass.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import MagnifyingGlass from './magnifying-glass';
+import { MagnifyingGlass } from './magnifying-glass';
 
 describe('MagnifyingGlass', () => {
   it('renders a magnifying glass icon', () => {
diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx
index ad8da39..619adef 100644
--- a/src/components/atoms/icons/magnifying-glass.tsx
+++ b/src/components/atoms/icons/magnifying-glass.tsx
@@ -1,32 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './magnifying-glass.module.scss';
 
-export type MagnifyingGlassProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type MagnifyingGlassProps = SVGAttributes<SVGElement>;
 
 /**
  * MagnifyingGlass component
  *
  * Render a magnifying glass svg icon.
  */
-const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
+export const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
   className = '',
   ...props
 }) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles['small-handle']}
@@ -47,5 +38,3 @@ const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
     </svg>
   );
 };
-
-export default MagnifyingGlass;
diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx
index 9584e47..a8faf03 100644
--- a/src/components/atoms/icons/moon.stories.tsx
+++ b/src/components/atoms/icons/moon.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import MoonIcon from './moon';
+import { Moon as MoonIcon } from './moon';
 
 /**
  * Moon icon - Storybook Meta
diff --git a/src/components/atoms/icons/moon.test.tsx b/src/components/atoms/icons/moon.test.tsx
index 09415a9..3c1021a 100644
--- a/src/components/atoms/icons/moon.test.tsx
+++ b/src/components/atoms/icons/moon.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Moon from './moon';
+import { Moon } from './moon';
 
 describe('Moon', () => {
   it('renders a moon icon', () => {
diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx
index d04605a..2139ce1 100644
--- a/src/components/atoms/icons/moon.tsx
+++ b/src/components/atoms/icons/moon.tsx
@@ -1,33 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './moon.module.scss';
 
-export type MoonProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
+export type MoonProps = SVGAttributes<SVGElement> & {
   /**
    * The SVG title.
    */
   title?: string;
 };
 
-const Moon: FC<MoonProps> = ({ className = '', title, ...props }) => {
+export const Moon: FC<MoonProps> = ({ className = '', title, ...props }) => {
   return (
     <svg
+      {...props}
       className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
     >
-      {title !== 'undefined' && <title>{title}</title>}
+      {title ? <title>{title}</title> : null}
       <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" />
     </svg>
   );
 };
-
-export default Moon;
diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx
index eebf1e5..c556076 100644
--- a/src/components/atoms/icons/plus-minus.stories.tsx
+++ b/src/components/atoms/icons/plus-minus.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PlusMinusIcon from './plus-minus';
+import { PlusMinus as PlusMinusIcon } from './plus-minus';
 
 /**
  * Plus/Minus icon - Storybook Meta
diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx
index 5105403..174f8e1 100644
--- a/src/components/atoms/icons/plus-minus.test.tsx
+++ b/src/components/atoms/icons/plus-minus.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import PlusMinus from './plus-minus';
+import { PlusMinus } from './plus-minus';
 
 describe('PlusMinus', () => {
   it('renders a plus/minus icon', () => {
diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx
index e8897b7..e2eb55e 100644
--- a/src/components/atoms/icons/plus-minus.tsx
+++ b/src/components/atoms/icons/plus-minus.tsx
@@ -17,15 +17,13 @@ export type PlusMinusProps = {
  *
  * Render a plus or a minus icon.
  */
-const PlusMinus: FC<PlusMinusProps> = ({ className, state }) => {
+export const PlusMinus: FC<PlusMinusProps> = ({ className = '', state }) => {
   const stateClass = `icon--${state}`;
 
   return (
     <div
-      className={`${styles.icon} ${styles[stateClass]} ${className}`}
       aria-hidden={true}
-    ></div>
+      className={`${styles.icon} ${styles[stateClass]} ${className}`}
+    />
   );
 };
-
-export default PlusMinus;
diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx
index f11b13b..7daeecf 100644
--- a/src/components/atoms/icons/posts-stack.stories.tsx
+++ b/src/components/atoms/icons/posts-stack.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PostsStackIcon from './posts-stack';
+import { PostsStack as PostsStackIcon } from './posts-stack';
 
 /**
  * Posts Stack icon - Storybook Meta
diff --git a/src/components/atoms/icons/posts-stack.test.tsx b/src/components/atoms/icons/posts-stack.test.tsx
index 65e0d3b..3728d1e 100644
--- a/src/components/atoms/icons/posts-stack.test.tsx
+++ b/src/components/atoms/icons/posts-stack.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import PostsStack from './posts-stack';
+import { PostsStack } from './posts-stack';
 
 describe('PostsStack', () => {
   it('renders a posts stack icon', () => {
diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx
index af070de..c783892 100644
--- a/src/components/atoms/icons/posts-stack.tsx
+++ b/src/components/atoms/icons/posts-stack.tsx
@@ -1,29 +1,23 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './posts-stack.module.scss';
 
-export type PostsStackProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-};
+export type PostsStackProps = SVGAttributes<SVGElement>;
 
 /**
  * Posts stack component.
  *
  * Render a posts stack svg icon.
  */
-const PostsStack: FC<PostsStackProps> = ({ className = '', ...props }) => {
+export const PostsStack: FC<PostsStackProps> = ({
+  className = '',
+  ...props
+}) => {
   return (
     <svg
+      {...props}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${styles.icon} ${className}`}
-      {...props}
     >
       <path
         className={styles.background}
@@ -76,5 +70,3 @@ const PostsStack: FC<PostsStackProps> = ({ className = '', ...props }) => {
     </svg>
   );
 };
-
-export default PostsStack;
diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx
index dabda66..a332bcd 100644
--- a/src/components/atoms/icons/sun.stories.tsx
+++ b/src/components/atoms/icons/sun.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SunIcon from './sun';
+import { Sun as SunIcon } from './sun';
 
 /**
  * Sun icon - Storybook Meta
diff --git a/src/components/atoms/icons/sun.test.tsx b/src/components/atoms/icons/sun.test.tsx
index af52a5f..8a43221 100644
--- a/src/components/atoms/icons/sun.test.tsx
+++ b/src/components/atoms/icons/sun.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Sun from './sun';
+import { Sun } from './sun';
 
 describe('Sun', () => {
   it('renders a sun icon', () => {
diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx
index 1d29ff4..69a3044 100644
--- a/src/components/atoms/icons/sun.tsx
+++ b/src/components/atoms/icons/sun.tsx
@@ -1,15 +1,7 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './sun.module.scss';
 
-export type SunProps = {
-  /**
-   * Should the svg be hidden from assistive technologies?
-   */
-  'aria-hidden'?: boolean;
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
+export type SunProps = SVGAttributes<SVGElement> & {
   /**
    * The SVG title.
    */
@@ -21,18 +13,16 @@ export type SunProps = {
  *
  * Render a svg sun icon.
  */
-const Sun: FC<SunProps> = ({ className = '', title, ...props }) => {
+export const Sun: FC<SunProps> = ({ className = '', title, ...props }) => {
   return (
     <svg
+      {...props}
       className={`${styles.sun} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
     >
       {title !== 'undefined' && <title>{title}</title>}
       <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" />
     </svg>
   );
 };
-
-export default Sun;
diff --git a/src/components/atoms/images/index.ts b/src/components/atoms/images/index.ts
new file mode 100644
index 0000000..cb6151d
--- /dev/null
+++ b/src/components/atoms/images/index.ts
@@ -0,0 +1 @@
+export * from './logo';
diff --git a/src/components/atoms/images/logo.stories.tsx b/src/components/atoms/images/logo.stories.tsx
index 458ec08..bf19b34 100644
--- a/src/components/atoms/images/logo.stories.tsx
+++ b/src/components/atoms/images/logo.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import LogoComponent from './logo';
+import { Logo as LogoComponent } from './logo';
 
 /**
  * Logo - Storybook Meta
diff --git a/src/components/atoms/images/logo.test.tsx b/src/components/atoms/images/logo.test.tsx
index e56a737..81aec3a 100644
--- a/src/components/atoms/images/logo.test.tsx
+++ b/src/components/atoms/images/logo.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Logo from './logo';
+import { Logo } from './logo';
 
 describe('Logo', () => {
   it('renders a logo with a title', () => {
diff --git a/src/components/atoms/images/logo.tsx b/src/components/atoms/images/logo.tsx
index 3978882..491539d 100644
--- a/src/components/atoms/images/logo.tsx
+++ b/src/components/atoms/images/logo.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import styles from './logo.module.scss';
 
-export type LogoProps = {
+export type LogoProps = SVGAttributes<SVGElement> & {
   /**
    * SVG Image title.
    */
@@ -13,14 +13,15 @@ export type LogoProps = {
  *
  * Render a SVG logo.
  */
-const Logo: FC<LogoProps> = ({ title }) => {
+export const Logo: FC<LogoProps> = ({ title, ...props }) => {
   return (
     <svg
+      {...props}
+      className={styles.wrapper}
       viewBox="0 0 512 512"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.wrapper}
     >
-      {title && <title>{title}</title>}
+      {title ? <title>{title}</title> : null}
       <path className={styles['bg-left']} d="M 0,0 H 506 L 0,506 Z" />
       <path className={styles['bg-right']} d="M 512,512 H 6 L 512,6 Z" />
       <path
@@ -42,5 +43,3 @@ const Logo: FC<LogoProps> = ({ title }) => {
     </svg>
   );
 };
-
-export default Logo;
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
new file mode 100644
index 0000000..72b5598
--- /dev/null
+++ b/src/components/atoms/index.ts
@@ -0,0 +1,9 @@
+export * from './buttons';
+export * from './forms';
+export * from './headings';
+export * from './icons';
+export * from './images';
+export * from './layout';
+export * from './links';
+export * from './lists';
+export * from './loaders';
diff --git a/src/components/atoms/layout/column.stories.tsx b/src/components/atoms/layout/column.stories.tsx
index a03c462..a8d43bf 100644
--- a/src/components/atoms/layout/column.stories.tsx
+++ b/src/components/atoms/layout/column.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ColumnComponent from './column';
+import { Column as ColumnComponent } from './column';
 
 export default {
   title: 'Atoms/Layout/Column',
diff --git a/src/components/atoms/layout/column.test.tsx b/src/components/atoms/layout/column.test.tsx
index c722082..fd3c9e7 100644
--- a/src/components/atoms/layout/column.test.tsx
+++ b/src/components/atoms/layout/column.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Column from './column';
+import { Column } from './column';
 
 const body =
   'Non praesentium voluptas quisquam ex est. Distinctio accusamus facilis libero in aut. Et veritatis quo impedit fugit amet sit accusantium. Ut est rerum asperiores sint libero eveniet. Molestias placeat recusandae suscipit eligendi sunt hic.';
diff --git a/src/components/atoms/layout/column.tsx b/src/components/atoms/layout/column.tsx
index ec6440d..632799c 100644
--- a/src/components/atoms/layout/column.tsx
+++ b/src/components/atoms/layout/column.tsx
@@ -1,7 +1,7 @@
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 
-export type ColumnProps = {
-  children: ReactNode | ReactNode[];
+export type ColumnProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
 };
 
 /**
@@ -9,8 +9,6 @@ export type ColumnProps = {
  *
  * Render the body as a column.
  */
-const Column: FC<ColumnProps> = ({ children }) => {
-  return <div>{children}</div>;
+export const Column: FC<ColumnProps> = ({ children, ...props }) => {
+  return <div {...props}>{children}</div>;
 };
-
-export default Column;
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index 25d54b0..fa79d32 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CCBySA from '../icons/cc-by-sa';
-import CopyrightComponent from './copyright';
+import { CCBySA } from '../icons';
+import { Copyright as CopyrightComponent } from './copyright';
 
 /**
  * Copyright - Storybook Meta
diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx
index c3eef67..3631545 100644
--- a/src/components/atoms/layout/copyright.test.tsx
+++ b/src/components/atoms/layout/copyright.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
-import CCBySA from '../icons/cc-by-sa';
-import Copyright from './copyright';
+import { CCBySA } from '../icons';
+import { Copyright } from './copyright';
 
 const dates = {
   start: '2012',
diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx
index f70695d..1e4af5e 100644
--- a/src/components/atoms/layout/copyright.tsx
+++ b/src/components/atoms/layout/copyright.tsx
@@ -32,7 +32,7 @@ export type CopyrightProps = {
  *
  * Renders a copyright information (owner, dates, license icon).
  */
-const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
+export const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
   const getFormattedDate = (date: string) => {
     const datetime = new Date(date).toISOString();
 
@@ -55,5 +55,3 @@ const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
     </div>
   );
 };
-
-export default Copyright;
diff --git a/src/components/atoms/layout/index.ts b/src/components/atoms/layout/index.ts
new file mode 100644
index 0000000..8cbc597
--- /dev/null
+++ b/src/components/atoms/layout/index.ts
@@ -0,0 +1,7 @@
+export * from './column';
+export * from './copyright';
+export * from './main';
+export * from './no-script';
+export * from './notice';
+export * from './section';
+export * from './sidebar';
diff --git a/src/components/atoms/layout/main.stories.tsx b/src/components/atoms/layout/main.stories.tsx
index 5bde475..ef4d728 100644
--- a/src/components/atoms/layout/main.stories.tsx
+++ b/src/components/atoms/layout/main.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import MainComponent from './main';
+import { Main as MainComponent } from './main';
 
 /**
  * Main - Storybook Meta
diff --git a/src/components/atoms/layout/main.test.tsx b/src/components/atoms/layout/main.test.tsx
index d9b9e57..f6b8064 100644
--- a/src/components/atoms/layout/main.test.tsx
+++ b/src/components/atoms/layout/main.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Main from './main';
+import { Main } from './main';
 
 const id = 'main';
 const children = 'The main content.';
diff --git a/src/components/atoms/layout/main.tsx b/src/components/atoms/layout/main.tsx
index d92a5c7..919b25a 100644
--- a/src/components/atoms/layout/main.tsx
+++ b/src/components/atoms/layout/main.tsx
@@ -1,18 +1,10 @@
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 
-export type MainProps = {
+export type MainProps = HTMLAttributes<HTMLElement> & {
   /**
    * The main body.
    */
   children: ReactNode;
-  /**
-   * Set additional classnames to the main element.
-   */
-  className?: string;
-  /**
-   * The main wrapper id.
-   */
-  id: string;
 };
 
 /**
@@ -20,8 +12,6 @@ export type MainProps = {
  *
  * Render a main element.
  */
-const Main: FC<MainProps> = ({ children, ...props }) => {
+export const Main: FC<MainProps> = ({ children, ...props }) => {
   return <main {...props}>{children}</main>;
 };
-
-export default Main;
diff --git a/src/components/atoms/layout/no-script.stories.tsx b/src/components/atoms/layout/no-script.stories.tsx
index 22d2fea..79548a1 100644
--- a/src/components/atoms/layout/no-script.stories.tsx
+++ b/src/components/atoms/layout/no-script.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import NoScript from './no-script';
+import { NoScript } from './no-script';
 
 /**
  * NoScript - Storybook Meta
diff --git a/src/components/atoms/layout/no-script.test.tsx b/src/components/atoms/layout/no-script.test.tsx
index 4c62879..3f6b79c 100644
--- a/src/components/atoms/layout/no-script.test.tsx
+++ b/src/components/atoms/layout/no-script.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import NoScript from './no-script';
+import { NoScript } from './no-script';
 
 const message = 'A noscript message.';
 
diff --git a/src/components/atoms/layout/no-script.tsx b/src/components/atoms/layout/no-script.tsx
index a503e0c..a79feaf 100644
--- a/src/components/atoms/layout/no-script.tsx
+++ b/src/components/atoms/layout/no-script.tsx
@@ -12,10 +12,11 @@ export type NoScriptProps = {
   position?: 'initial' | 'top';
 };
 
-const NoScript: FC<NoScriptProps> = ({ message, position = 'initial' }) => {
+export const NoScript: FC<NoScriptProps> = ({
+  message,
+  position = 'initial',
+}) => {
   const positionClass = styles[`noscript--${position}`];
 
   return <div className={`${styles.noscript} ${positionClass}`}>{message}</div>;
 };
-
-export default NoScript;
diff --git a/src/components/atoms/layout/notice.stories.tsx b/src/components/atoms/layout/notice.stories.tsx
index dedf834..57dddb3 100644
--- a/src/components/atoms/layout/notice.stories.tsx
+++ b/src/components/atoms/layout/notice.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import NoticeComponent from './notice';
+import { Notice as NoticeComponent } from './notice';
 
 /**
  * Notice - Storybook Meta
diff --git a/src/components/atoms/layout/notice.test.tsx b/src/components/atoms/layout/notice.test.tsx
index 56b5f85..16c530d 100644
--- a/src/components/atoms/layout/notice.test.tsx
+++ b/src/components/atoms/layout/notice.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Notice from './notice';
+import { Notice } from './notice';
 
 const message = 'Tenetur consequuntur tempore.';
 
diff --git a/src/components/atoms/layout/notice.tsx b/src/components/atoms/layout/notice.tsx
index a0d1d3e..9f69af2 100644
--- a/src/components/atoms/layout/notice.tsx
+++ b/src/components/atoms/layout/notice.tsx
@@ -1,13 +1,9 @@
-import { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 import styles from './notice.module.scss';
 
 export type NoticeKind = 'error' | 'info' | 'success' | 'warning';
 
-export type NoticeProps = {
-  /**
-   * Set additional classnames to the notice wrapper.
-   */
-  className?: string;
+export type NoticeProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
   /**
    * The notice kind.
    */
@@ -23,16 +19,18 @@ export type NoticeProps = {
  *
  * Render a colored message depending on notice kind.
  */
-const Notice: FC<NoticeProps> = ({ className = '', kind, message }) => {
+export const Notice: FC<NoticeProps> = ({
+  className = '',
+  kind,
+  message,
+  ...props
+}) => {
   const kindClass = `wrapper--${kind}`;
+  const noticeClass = `${styles.wrapper} ${styles[kindClass]} ${className}`;
 
-  return message ? (
-    <div className={`${styles.wrapper} ${styles[kindClass]} ${className}`}>
+  return (
+    <div {...props} className={noticeClass}>
       {message}
     </div>
-  ) : (
-    <></>
   );
 };
-
-export default Notice;
diff --git a/src/components/atoms/layout/section.stories.tsx b/src/components/atoms/layout/section.stories.tsx
index 530b2a0..8ab2729 100644
--- a/src/components/atoms/layout/section.stories.tsx
+++ b/src/components/atoms/layout/section.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Section from './section';
+import { Section } from './section';
 
 /**
  * Section - Storybook Meta
diff --git a/src/components/atoms/layout/section.test.tsx b/src/components/atoms/layout/section.test.tsx
index e31dc32..c81a0a0 100644
--- a/src/components/atoms/layout/section.test.tsx
+++ b/src/components/atoms/layout/section.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Section from './section';
+import { Section } from './section';
 
 const title = 'Section title';
 const content = 'Section content.';
diff --git a/src/components/atoms/layout/section.tsx b/src/components/atoms/layout/section.tsx
index cb727ff..107e80a 100644
--- a/src/components/atoms/layout/section.tsx
+++ b/src/components/atoms/layout/section.tsx
@@ -1,18 +1,17 @@
-import { FC, ReactNode } from 'react';
-import Heading from '../headings/heading';
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import { Heading } from '../headings';
 import styles from './section.module.scss';
 
 export type SectionVariant = 'dark' | 'light';
 
-export type SectionProps = {
-  /**
-   * Set additional classnames to the section element.
-   */
-  className?: string;
+export type SectionProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  'children' | 'content'
+> & {
   /**
    * The section content.
    */
-  content: ReactNode;
+  content: ReactNode | ReactNode[];
   /**
    * The section title.
    */
@@ -32,20 +31,20 @@ export type SectionProps = {
  *
  * Render a section element.
  */
-const Section: FC<SectionProps> = ({
+export const Section: FC<SectionProps> = ({
   className = '',
   content,
   title,
   variant = 'dark',
   withBorder = true,
+  ...props
 }) => {
   const borderClass = withBorder ? styles[`wrapper--borders`] : '';
   const variantClass = styles[`wrapper--${variant}`];
+  const sectionClass = `${styles.wrapper} ${borderClass} ${variantClass} ${className}`;
 
   return (
-    <section
-      className={`${styles.wrapper} ${borderClass} ${variantClass} ${className}`}
-    >
+    <section {...props} className={sectionClass}>
       <Heading level={2} className={styles.title}>
         {title}
       </Heading>
@@ -53,5 +52,3 @@ const Section: FC<SectionProps> = ({
     </section>
   );
 };
-
-export default Section;
diff --git a/src/components/atoms/layout/sidebar.stories.tsx b/src/components/atoms/layout/sidebar.stories.tsx
index 6876f95..f85e468 100644
--- a/src/components/atoms/layout/sidebar.stories.tsx
+++ b/src/components/atoms/layout/sidebar.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SidebarComponent from './sidebar';
+import { Sidebar as SidebarComponent } from './sidebar';
 
 /**
  * Sidebar - Storybook Meta
diff --git a/src/components/atoms/layout/sidebar.test.tsx b/src/components/atoms/layout/sidebar.test.tsx
index c23c551..e2c15c3 100644
--- a/src/components/atoms/layout/sidebar.test.tsx
+++ b/src/components/atoms/layout/sidebar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Sidebar from './sidebar';
+import { Sidebar } from './sidebar';
 
 const children = 'A widget';
 
diff --git a/src/components/atoms/layout/sidebar.tsx b/src/components/atoms/layout/sidebar.tsx
index d86af37..d290069 100644
--- a/src/components/atoms/layout/sidebar.tsx
+++ b/src/components/atoms/layout/sidebar.tsx
@@ -1,19 +1,11 @@
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 import styles from './sidebar.module.scss';
 
-export type SidebarProps = {
-  /**
-   * An accessible name for the sidebar.
-   */
-  'aria-label'?: string;
+export type SidebarProps = HTMLAttributes<HTMLElement> & {
   /**
    * The sidebar body.
    */
   children: ReactNode;
-  /**
-   * Set additional classnames to the aside element.
-   */
-  className?: string;
 };
 
 /**
@@ -21,12 +13,14 @@ export type SidebarProps = {
  *
  * Render an aside element.
  */
-const Sidebar: FC<SidebarProps> = ({ children, className = '', ...props }) => {
+export const Sidebar: FC<SidebarProps> = ({
+  children,
+  className = '',
+  ...props
+}) => {
   return (
-    <aside className={`${styles.wrapper} ${className}`} {...props}>
+    <aside {...props} className={`${styles.wrapper} ${className}`}>
       <div className={styles.body}>{children}</div>
     </aside>
   );
 };
-
-export default Sidebar;
diff --git a/src/components/atoms/links/index.ts b/src/components/atoms/links/index.ts
new file mode 100644
index 0000000..ad8824e
--- /dev/null
+++ b/src/components/atoms/links/index.ts
@@ -0,0 +1,4 @@
+export * from './link';
+export * from './nav-link';
+export * from './sharing-link';
+export * from './social-link';
diff --git a/src/components/atoms/links/link.stories.tsx b/src/components/atoms/links/link.stories.tsx
index 4baabe5..8351de7 100644
--- a/src/components/atoms/links/link.stories.tsx
+++ b/src/components/atoms/links/link.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Link from './link';
+import { Link } from './link';
 
 /**
  * Link - Storybook Meta
diff --git a/src/components/atoms/links/link.test.tsx b/src/components/atoms/links/link.test.tsx
index ef74821..e3c005f 100644
--- a/src/components/atoms/links/link.test.tsx
+++ b/src/components/atoms/links/link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Link from './link';
+import { Link } from './link';
 
 describe('Link', () => {
   it('render a link', () => {
diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx
index 8991f38..1765bb5 100644
--- a/src/components/atoms/links/link.tsx
+++ b/src/components/atoms/links/link.tsx
@@ -1,17 +1,13 @@
 import NextLink from 'next/link';
-import { FC, ReactNode } from 'react';
+import { AnchorHTMLAttributes, FC, ReactNode } from 'react';
 import styles from './link.module.scss';
 
-export type LinkProps = {
+export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   /**
    * The link body.
    */
   children: ReactNode;
   /**
-   * Set additional classnames to the link.
-   */
-  className?: string;
-  /**
    * True if it is a download link. Default: false.
    */
   download?: boolean;
@@ -34,33 +30,26 @@ export type LinkProps = {
  *
  * Render a link.
  */
-const Link: FC<LinkProps> = ({
+export const Link: FC<LinkProps> = ({
   children,
   className = '',
   download = false,
   external = false,
   href,
   lang,
+  ...props
 }) => {
   const downloadClass = download ? styles['link--download'] : '';
+  const linkClass = `${styles.link} ${downloadClass} ${className}`;
+  const externalLinkClass = `${linkClass} ${styles['link--external']}`;
 
   return external ? (
-    <a
-      href={href}
-      hrefLang={lang}
-      className={`${styles.link} ${styles['link--external']} ${downloadClass} ${className}`}
-    >
+    <a {...props} className={externalLinkClass} href={href} hrefLang={lang}>
       {children}
     </a>
   ) : (
-    <NextLink
-      className={`${styles.link} ${downloadClass} ${className}`}
-      href={href}
-      hrefLang={lang}
-    >
+    <NextLink {...props} className={linkClass} href={href} hrefLang={lang}>
       {children}
     </NextLink>
   );
 };
-
-export default Link;
diff --git a/src/components/atoms/links/nav-link.stories.tsx b/src/components/atoms/links/nav-link.stories.tsx
index 7f7a334..7fca926 100644
--- a/src/components/atoms/links/nav-link.stories.tsx
+++ b/src/components/atoms/links/nav-link.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import NavLinkComponent from './nav-link';
+import { NavLink as NavLinkComponent } from './nav-link';
 
 /**
  * NavLink - Storybook Meta
diff --git a/src/components/atoms/links/nav-link.test.tsx b/src/components/atoms/links/nav-link.test.tsx
index a5f5b5f..be0cd50 100644
--- a/src/components/atoms/links/nav-link.test.tsx
+++ b/src/components/atoms/links/nav-link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import NavLink from './nav-link';
+import { NavLink } from './nav-link';
 
 describe('NavLink', () => {
   it('renders a nav link to blog page', () => {
diff --git a/src/components/atoms/links/nav-link.tsx b/src/components/atoms/links/nav-link.tsx
index 66ee570..109529c 100644
--- a/src/components/atoms/links/nav-link.tsx
+++ b/src/components/atoms/links/nav-link.tsx
@@ -22,7 +22,7 @@ export type NavLinkProps = {
  *
  * Render a navigation link.
  */
-const NavLink: FC<NavLinkProps> = ({ href, label, logo }) => {
+export const NavLink: FC<NavLinkProps> = ({ href, label, logo }) => {
   return (
     <Link className={styles.link} href={href}>
       {logo}
@@ -30,5 +30,3 @@ const NavLink: FC<NavLinkProps> = ({ href, label, logo }) => {
     </Link>
   );
 };
-
-export default NavLink;
diff --git a/src/components/atoms/links/sharing-link.stories.tsx b/src/components/atoms/links/sharing-link.stories.tsx
index e6bd11b..7ab5caf 100644
--- a/src/components/atoms/links/sharing-link.stories.tsx
+++ b/src/components/atoms/links/sharing-link.stories.tsx
@@ -1,12 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SharingLinkComponent from './sharing-link';
+import { SharingLink } from './sharing-link';
 
 /**
  * SharingLink - Storybook Meta
  */
 export default {
   title: 'Atoms/Buttons/Sharing',
-  component: SharingLinkComponent,
+  component: SharingLink,
   argTypes: {
     medium: {
       control: {
@@ -37,10 +37,10 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof SharingLinkComponent>;
+} as ComponentMeta<typeof SharingLink>;
 
-const Template: ComponentStory<typeof SharingLinkComponent> = (args) => (
-  <SharingLinkComponent {...args} />
+const Template: ComponentStory<typeof SharingLink> = (args) => (
+  <SharingLink {...args} />
 );
 
 /**
diff --git a/src/components/atoms/links/sharing-link.test.tsx b/src/components/atoms/links/sharing-link.test.tsx
index 0a8b87c..63fb4f5 100644
--- a/src/components/atoms/links/sharing-link.test.tsx
+++ b/src/components/atoms/links/sharing-link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import SharingLink from './sharing-link';
+import { SharingLink } from './sharing-link';
 
 describe('SharingLink', () => {
   it('render a Diaspora sharing link', () => {
diff --git a/src/components/atoms/links/sharing-link.tsx b/src/components/atoms/links/sharing-link.tsx
index ca53ef9..0b9d5fb 100644
--- a/src/components/atoms/links/sharing-link.tsx
+++ b/src/components/atoms/links/sharing-link.tsx
@@ -26,7 +26,7 @@ export type SharingLinkProps = {
  *
  * Render a sharing link.
  */
-const SharingLink: FC<SharingLinkProps> = ({ medium, url }) => {
+export const SharingLink: FC<SharingLinkProps> = ({ medium, url }) => {
   const intl = useIntl();
   const text = intl.formatMessage(
     {
@@ -37,12 +37,11 @@ const SharingLink: FC<SharingLinkProps> = ({ medium, url }) => {
     { name: medium }
   );
   const mediumClass = `link--${medium}`;
+  const linkClass = `${styles.link} ${styles[mediumClass]}`;
 
   return (
-    <a href={url} className={`${styles.link} ${styles[mediumClass]}`}>
+    <a className={linkClass} href={url}>
       <span className="screen-reader-text">{text}</span>
     </a>
   );
 };
-
-export default SharingLink;
diff --git a/src/components/atoms/links/social-link.stories.tsx b/src/components/atoms/links/social-link.stories.tsx
index 977ae6b..b627e9f 100644
--- a/src/components/atoms/links/social-link.stories.tsx
+++ b/src/components/atoms/links/social-link.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SocialLink from './social-link';
+import { SocialLink } from './social-link';
 
 /**
  * SocialLink - Storybook Meta
diff --git a/src/components/atoms/links/social-link.test.tsx b/src/components/atoms/links/social-link.test.tsx
index b55dbcc..1aca4e3 100644
--- a/src/components/atoms/links/social-link.test.tsx
+++ b/src/components/atoms/links/social-link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import SocialLink from './social-link';
+import { SocialLink } from './social-link';
 
 /**
  * Next.js mock images to use next/image component. So for now, I need to mock
diff --git a/src/components/atoms/links/social-link.tsx b/src/components/atoms/links/social-link.tsx
index d0719a3..9f8feb6 100644
--- a/src/components/atoms/links/social-link.tsx
+++ b/src/components/atoms/links/social-link.tsx
@@ -23,7 +23,7 @@ export type SocialLinkProps = {
  *
  * Render a social icon link.
  */
-const SocialLink: FC<SocialLinkProps> = ({ name, url }) => {
+export const SocialLink: FC<SocialLinkProps> = ({ name, url }) => {
   /**
    * Retrieve a social link icon by id.
    * @param {string} id - The social website id.
@@ -44,10 +44,8 @@ const SocialLink: FC<SocialLinkProps> = ({ name, url }) => {
   };
 
   return (
-    <a href={url} className={styles.link} aria-label={name}>
+    <a aria-label={name} className={styles.link} href={url}>
       {getIcon(name)}
     </a>
   );
 };
-
-export default SocialLink;
diff --git a/src/components/atoms/lists/description-list-item.module.scss b/src/components/atoms/lists/description-list-group.module.scss
index aba90ce..aba90ce 100644
--- a/src/components/atoms/lists/description-list-item.module.scss
+++ b/src/components/atoms/lists/description-list-group.module.scss
diff --git a/src/components/atoms/lists/description-list-item.stories.tsx b/src/components/atoms/lists/description-list-group.stories.tsx
index c7beb0d..e6766a3 100644
--- a/src/components/atoms/lists/description-list-item.stories.tsx
+++ b/src/components/atoms/lists/description-list-group.stories.tsx
@@ -1,9 +1,9 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import DescriptionListItemComponent from './description-list-item';
+import { DescriptionListGroup } from './description-list-group';
 
 export default {
   title: 'Atoms/Typography/Lists/DescriptionList/Item',
-  component: DescriptionListItemComponent,
+  component: DescriptionListGroup,
   args: {
     layout: 'stacked',
     withSeparator: false,
@@ -96,11 +96,11 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof DescriptionListItemComponent>;
+} as ComponentMeta<typeof DescriptionListGroup>;
 
-const Template: ComponentStory<typeof DescriptionListItemComponent> = (
-  args
-) => <DescriptionListItemComponent {...args} />;
+const Template: ComponentStory<typeof DescriptionListGroup> = (args) => (
+  <DescriptionListGroup {...args} />
+);
 
 export const SingleValueStacked = Template.bind({});
 SingleValueStacked.args = {
diff --git a/src/components/atoms/lists/description-list-item.test.tsx b/src/components/atoms/lists/description-list-group.test.tsx
index 07632a6..4e665e0 100644
--- a/src/components/atoms/lists/description-list-item.test.tsx
+++ b/src/components/atoms/lists/description-list-group.test.tsx
@@ -1,17 +1,17 @@
 import { render, screen } from '../../../../tests/utils';
-import DescriptionListItem from './description-list-item';
+import { DescriptionListGroup } from './description-list-group';
 
 const itemLabel = 'Repellendus corporis facilis';
 const itemValue = ['quos', 'eum'];
 
-describe('DescriptionListItem', () => {
+describe('DescriptionListGroup', () => {
   it('renders a couple of label', () => {
-    render(<DescriptionListItem label={itemLabel} value={itemValue} />);
+    render(<DescriptionListGroup label={itemLabel} value={itemValue} />);
     expect(screen.getByRole('term')).toHaveTextContent(itemLabel);
   });
 
   it('renders the right number of values', () => {
-    render(<DescriptionListItem label={itemLabel} value={itemValue} />);
+    render(<DescriptionListGroup label={itemLabel} value={itemValue} />);
     expect(screen.getAllByRole('definition')).toHaveLength(itemValue.length);
   });
 });
diff --git a/src/components/atoms/lists/description-list-item.tsx b/src/components/atoms/lists/description-list-group.tsx
index 9505d01..63ae541 100644
--- a/src/components/atoms/lists/description-list-item.tsx
+++ b/src/components/atoms/lists/description-list-group.tsx
@@ -1,9 +1,9 @@
 import { FC, ReactNode, useId } from 'react';
-import styles from './description-list-item.module.scss';
+import styles from './description-list-group.module.scss';
 
 export type ItemLayout = 'inline' | 'inline-values' | 'stacked';
 
-export type DescriptionListItemProps = {
+export type DescriptionListGroupProps = {
   /**
    * Set additional classnames to the list item wrapper.
    */
@@ -39,7 +39,7 @@ export type DescriptionListItemProps = {
  *
  * Render a couple of dt/dd wrapped in a div.
  */
-const DescriptionListItem: FC<DescriptionListItemProps> = ({
+export const DescriptionListGroup: FC<DescriptionListGroupProps> = ({
   className = '',
   descriptionClassName = '',
   label,
@@ -52,16 +52,15 @@ const DescriptionListItem: FC<DescriptionListItemProps> = ({
   const layoutStyles = styles[`wrapper--${layout}`];
   const separatorStyles = withSeparator ? styles['wrapper--has-separator'] : '';
   const itemValues = Array.isArray(value) ? value : [value];
+  const groupClass = `${styles.wrapper} ${layoutStyles} ${separatorStyles} ${className}`;
 
   return (
-    <div
-      className={`${styles.wrapper} ${layoutStyles} ${separatorStyles} ${className}`}
-    >
+    <div className={groupClass}>
       <dt className={`${styles.term} ${termClassName}`}>{label}</dt>
       {itemValues.map((currentValue, index) => (
         <dd
-          key={`${id}-${index}`}
           className={`${styles.description} ${descriptionClassName}`}
+          key={`${id}-${index}`}
         >
           {currentValue}
         </dd>
@@ -69,5 +68,3 @@ const DescriptionListItem: FC<DescriptionListItemProps> = ({
     </div>
   );
 };
-
-export default DescriptionListItem;
diff --git a/src/components/atoms/lists/description-list.stories.tsx b/src/components/atoms/lists/description-list.stories.tsx
index 347fd78..0194817 100644
--- a/src/components/atoms/lists/description-list.stories.tsx
+++ b/src/components/atoms/lists/description-list.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import DescriptionList, { DescriptionListItem } from './description-list';
+import { DescriptionList, DescriptionListItem } from './description-list';
 
 /**
  * DescriptionList - Storybook Meta
diff --git a/src/components/atoms/lists/description-list.test.tsx b/src/components/atoms/lists/description-list.test.tsx
index 11b4965..6190c5c 100644
--- a/src/components/atoms/lists/description-list.test.tsx
+++ b/src/components/atoms/lists/description-list.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import DescriptionList, { DescriptionListItem } from './description-list';
+import { DescriptionList, DescriptionListItem } from './description-list';
 
 const items: DescriptionListItem[] = [
   { id: 'term-1', label: 'Term 1:', value: ['Value for term 1'] },
diff --git a/src/components/atoms/lists/description-list.tsx b/src/components/atoms/lists/description-list.tsx
index a8e2d53..d97e505 100644
--- a/src/components/atoms/lists/description-list.tsx
+++ b/src/components/atoms/lists/description-list.tsx
@@ -1,7 +1,8 @@
-import { FC } from 'react';
-import DescriptionListItem, {
-  type DescriptionListItemProps,
-} from './description-list-item';
+import { FC, HTMLAttributes } from 'react';
+import {
+  DescriptionListGroup,
+  type DescriptionListGroupProps,
+} from './description-list-group';
 import styles from './description-list.module.scss';
 
 export type DescriptionListItem = {
@@ -12,22 +13,21 @@ export type DescriptionListItem = {
   /**
    * The list item layout.
    */
-  layout?: DescriptionListItemProps['layout'];
+  layout?: DescriptionListGroupProps['layout'];
   /**
    * A list label.
    */
-  label: DescriptionListItemProps['label'];
+  label: DescriptionListGroupProps['label'];
   /**
    * An array of values for the list item.
    */
-  value: DescriptionListItemProps['value'];
+  value: DescriptionListGroupProps['value'];
 };
 
-export type DescriptionListProps = {
-  /**
-   * Set additional classnames to the list wrapper.
-   */
-  className?: string;
+export type DescriptionListProps = Omit<
+  HTMLAttributes<HTMLDListElement>,
+  'children'
+> & {
   /**
    * Set additional classnames to the `dt`/`dd` couple wrapper.
    */
@@ -51,7 +51,7 @@ export type DescriptionListProps = {
   /**
    * If true, use a slash to delimitate multiple values.
    */
-  withSeparator?: DescriptionListItemProps['withSeparator'];
+  withSeparator?: DescriptionListGroupProps['withSeparator'];
 };
 
 /**
@@ -59,7 +59,7 @@ export type DescriptionListProps = {
  *
  * Render a description list.
  */
-const DescriptionList: FC<DescriptionListProps> = ({
+export const DescriptionList: FC<DescriptionListProps> = ({
   className = '',
   groupClassName = '',
   items,
@@ -67,19 +67,21 @@ const DescriptionList: FC<DescriptionListProps> = ({
   layout = 'column',
   valueClassName = '',
   withSeparator,
+  ...props
 }) => {
   const layoutModifier = `list--${layout}`;
+  const listClass = `${styles.list} ${styles[layoutModifier]} ${className}`;
 
   /**
    * Retrieve the description list items.
    *
-   * @param {DescriptionListItem[]} listItems - An array of items.
+   * @param {DescriptionListGroup[]} listItems - An array of items.
    * @returns {JSX.Element[]} The description list items.
    */
   const getItems = (listItems: DescriptionListItem[]): JSX.Element[] => {
     return listItems.map(({ id, layout: itemLayout, label, value }) => {
       return (
-        <DescriptionListItem
+        <DescriptionListGroup
           key={id}
           label={label}
           value={value}
@@ -94,10 +96,8 @@ const DescriptionList: FC<DescriptionListProps> = ({
   };
 
   return (
-    <dl className={`${styles.list} ${styles[layoutModifier]} ${className}`}>
+    <dl {...props} className={listClass}>
       {getItems(items)}
     </dl>
   );
 };
-
-export default DescriptionList;
diff --git a/src/components/atoms/lists/index.ts b/src/components/atoms/lists/index.ts
new file mode 100644
index 0000000..d16fb34
--- /dev/null
+++ b/src/components/atoms/lists/index.ts
@@ -0,0 +1,3 @@
+export * from './description-list';
+export * from './description-list-group';
+export * from './list';
diff --git a/src/components/atoms/lists/list.stories.tsx b/src/components/atoms/lists/list.stories.tsx
index eac3cd3..c4f3c3b 100644
--- a/src/components/atoms/lists/list.stories.tsx
+++ b/src/components/atoms/lists/list.stories.tsx
@@ -1,12 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ListComponent, { type ListItem } from './list';
+import { List, type ListItem } from './list';
 
 /**
  * List - Storybook Meta
  */
 export default {
   title: 'Atoms/Typography/Lists',
-  component: ListComponent,
+  component: List,
   args: {
     kind: 'unordered',
   },
@@ -64,11 +64,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ListComponent>;
+} as ComponentMeta<typeof List>;
 
-const Template: ComponentStory<typeof ListComponent> = (args) => (
-  <ListComponent {...args} />
-);
+const Template: ComponentStory<typeof List> = (args) => <List {...args} />;
 
 const items: ListItem[] = [
   { id: 'item-1', value: 'Item 1' },
diff --git a/src/components/atoms/lists/list.test.tsx b/src/components/atoms/lists/list.test.tsx
index fbe56a4..18ffed2 100644
--- a/src/components/atoms/lists/list.test.tsx
+++ b/src/components/atoms/lists/list.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import List, { type ListItem } from './list';
+import { List, type ListItem } from './list';
 
 const items: ListItem[] = [
   { id: 'item-1', value: 'Item 1' },
diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx
index aa0a241..8fc9672 100644
--- a/src/components/atoms/lists/list.tsx
+++ b/src/components/atoms/lists/list.tsx
@@ -40,7 +40,7 @@ export type ListProps = {
  *
  * Render either an ordered or an unordered list.
  */
-const List: FC<ListProps> = ({
+export const List: FC<ListProps> = ({
   className = '',
   items,
   itemsClassName = '',
@@ -48,6 +48,7 @@ const List: FC<ListProps> = ({
 }) => {
   const ListTag = kind === 'ordered' ? 'ol' : 'ul';
   const kindClass = `list--${kind}`;
+  const listClass = `${styles.list} ${styles[kindClass]} ${className}`;
 
   /**
    * Retrieve the list items.
@@ -69,11 +70,5 @@ const List: FC<ListProps> = ({
     ));
   };
 
-  return (
-    <ListTag className={`${styles.list} ${styles[kindClass]} ${className}`}>
-      {getItems(items)}
-    </ListTag>
-  );
+  return <ListTag className={listClass}>{getItems(items)}</ListTag>;
 };
-
-export default List;
diff --git a/src/components/atoms/loaders/index.ts b/src/components/atoms/loaders/index.ts
new file mode 100644
index 0000000..20c1500
--- /dev/null
+++ b/src/components/atoms/loaders/index.ts
@@ -0,0 +1,2 @@
+export * from './progress-bar';
+export * from './spinner';
diff --git a/src/components/atoms/loaders/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar.stories.tsx
index 1eead64..799aacb 100644
--- a/src/components/atoms/loaders/progress-bar.stories.tsx
+++ b/src/components/atoms/loaders/progress-bar.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ProgressBarComponent from './progress-bar';
+import { ProgressBar as ProgressBarComponent } from './progress-bar';
 import { current, id, label, max, min } from './progress-bar.fixture';
 
 /**
diff --git a/src/components/atoms/loaders/progress-bar.test.tsx b/src/components/atoms/loaders/progress-bar.test.tsx
index 0310aec..be4d2c1 100644
--- a/src/components/atoms/loaders/progress-bar.test.tsx
+++ b/src/components/atoms/loaders/progress-bar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import ProgressBar from './progress-bar';
+import { ProgressBar } from './progress-bar';
 import { current, id, label, max, min } from './progress-bar.fixture';
 
 describe('ProgressBar', () => {
diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx
index 60c585a..195bb21 100644
--- a/src/components/atoms/loaders/progress-bar.tsx
+++ b/src/components/atoms/loaders/progress-bar.tsx
@@ -29,7 +29,7 @@ export type ProgressBarProps = {
  *
  * Render a progress bar.
  */
-const ProgressBar: FC<ProgressBarProps> = ({
+export const ProgressBar: FC<ProgressBarProps> = ({
   current,
   id,
   label,
@@ -42,18 +42,16 @@ const ProgressBar: FC<ProgressBarProps> = ({
         {label}
       </label>
       <progress
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={current}
         className={styles.progress__bar}
         id={id}
         max={max}
         value={current}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-valuenow={current}
       >
         {current}/{max}
       </progress>
     </div>
   );
 };
-
-export default ProgressBar;
diff --git a/src/components/atoms/loaders/spinner.stories.tsx b/src/components/atoms/loaders/spinner.stories.tsx
index 1792c6c..197d06c 100644
--- a/src/components/atoms/loaders/spinner.stories.tsx
+++ b/src/components/atoms/loaders/spinner.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SpinnerComponent from './spinner';
+import { Spinner as SpinnerComponent } from './spinner';
 
 /**
  * Spinner - Storybook Meta
diff --git a/src/components/atoms/loaders/spinner.test.tsx b/src/components/atoms/loaders/spinner.test.tsx
index 0bcc189..cb0d8e2 100644
--- a/src/components/atoms/loaders/spinner.test.tsx
+++ b/src/components/atoms/loaders/spinner.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Spinner from './spinner';
+import { Spinner } from './spinner';
 
 describe('Spinner', () => {
   it('renders a spinner loader', () => {
diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx
index 6655141..968290b 100644
--- a/src/components/atoms/loaders/spinner.tsx
+++ b/src/components/atoms/loaders/spinner.tsx
@@ -14,7 +14,7 @@ export type SpinnerProps = {
  *
  * Render a loading message with animation.
  */
-const Spinner: FC<SpinnerProps> = ({ message }) => {
+export const Spinner: FC<SpinnerProps> = ({ message }) => {
   const intl = useIntl();
 
   return (
@@ -23,7 +23,7 @@ const Spinner: FC<SpinnerProps> = ({ message }) => {
       <div className={styles.ball}></div>
       <div className={styles.ball}></div>
       <div className={styles.text}>
-        {message ||
+        {message ??
           intl.formatMessage({
             defaultMessage: 'Loading...',
             description: 'Spinner: loading text',
@@ -33,5 +33,3 @@ const Spinner: FC<SpinnerProps> = ({ message }) => {
     </div>
   );
 };
-
-export default Spinner;
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..df5bfaf
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,4 @@
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';
+export * from './templates';
diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx
index a338b8b..5de12d4 100644
--- a/src/components/molecules/buttons/back-to-top.stories.tsx
+++ b/src/components/molecules/buttons/back-to-top.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import BackToTopComponent from './back-to-top';
+import { BackToTop as BackToTopComponent } from './back-to-top';
 
 /**
  * BackToTop - Storybook Meta
diff --git a/src/components/molecules/buttons/back-to-top.test.tsx b/src/components/molecules/buttons/back-to-top.test.tsx
index c03ccb2..b39a377 100644
--- a/src/components/molecules/buttons/back-to-top.test.tsx
+++ b/src/components/molecules/buttons/back-to-top.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import BackToTop from './back-to-top';
+import { BackToTop } from './back-to-top';
 
 describe('BackToTop', () => {
   it('renders a BackToTop link', () => {
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index f422444..d28d6c1 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -1,9 +1,6 @@
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import ButtonLink, {
-  type ButtonLinkProps,
-} from '../../atoms/buttons/button-link';
-import Arrow from '../../atoms/icons/arrow';
+import { Arrow, ButtonLink, type ButtonLinkProps } from '../../atoms';
 import styles from './back-to-top.module.scss';
 
 export type BackToTopProps = Pick<ButtonLinkProps, 'target'> & {
@@ -18,7 +15,7 @@ export type BackToTopProps = Pick<ButtonLinkProps, 'target'> & {
  *
  * Render a back to top link.
  */
-const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => {
+export const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => {
   const intl = useIntl();
   const linkName = intl.formatMessage({
     defaultMessage: 'Back to top',
@@ -39,5 +36,3 @@ const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => {
     </div>
   );
 };
-
-export default BackToTop;
diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx
index d1b5ed4..9beda2b 100644
--- a/src/components/molecules/buttons/heading-button.stories.tsx
+++ b/src/components/molecules/buttons/heading-button.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import HeadingButtonComponent from './heading-button';
+import { HeadingButton as HeadingButtonComponent } from './heading-button';
 
 /**
  * HeadingButton - Storybook Meta
diff --git a/src/components/molecules/buttons/heading-button.test.tsx b/src/components/molecules/buttons/heading-button.test.tsx
index 5dcc4cc..d64283a 100644
--- a/src/components/molecules/buttons/heading-button.test.tsx
+++ b/src/components/molecules/buttons/heading-button.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import HeadingButton from './heading-button';
+import { HeadingButton } from './heading-button';
 
 describe('HeadingButton', () => {
   it('renders a button to collapse.', () => {
diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx
index cefd179..93ccdbe 100644
--- a/src/components/molecules/buttons/heading-button.tsx
+++ b/src/components/molecules/buttons/heading-button.tsx
@@ -1,7 +1,6 @@
 import { FC, SetStateAction } from 'react';
 import { useIntl } from 'react-intl';
-import Heading, { type HeadingProps } from '../../atoms/headings/heading';
-import PlusMinus from '../../atoms/icons/plus-minus';
+import { Heading, type HeadingProps, PlusMinus } from '../../atoms';
 import styles from './heading-button.module.scss';
 
 export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
@@ -28,7 +27,7 @@ export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
  *
  * Render a button as accordion title to toggle body.
  */
-const HeadingButton: FC<HeadingButtonProps> = ({
+export const HeadingButton: FC<HeadingButtonProps> = ({
   className = '',
   expanded,
   level,
@@ -51,9 +50,9 @@ const HeadingButton: FC<HeadingButtonProps> = ({
 
   return (
     <button
-      type="button"
       className={`${styles.wrapper} ${className}`}
       onClick={() => setExpanded(!expanded)}
+      type="button"
     >
       <Heading level={level} withMargin={false} className={styles.heading}>
         <span className="screen-reader-text">{titlePrefix} </span>
@@ -63,5 +62,3 @@ const HeadingButton: FC<HeadingButtonProps> = ({
     </button>
   );
 };
-
-export default HeadingButton;
diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx
index 4968b27..176888c 100644
--- a/src/components/molecules/buttons/help-button.stories.tsx
+++ b/src/components/molecules/buttons/help-button.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import HelpButtonComponent from './help-button';
+import { HelpButton as HelpButtonComponent } from './help-button';
 
 /**
  * HelpButton - Storybook Meta
diff --git a/src/components/molecules/buttons/help-button.test.tsx b/src/components/molecules/buttons/help-button.test.tsx
index 67472f1..486ed4b 100644
--- a/src/components/molecules/buttons/help-button.test.tsx
+++ b/src/components/molecules/buttons/help-button.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import HelpButton from './help-button';
+import { HelpButton } from './help-button';
 
 describe('Help', () => {
   it('renders a help button', () => {
diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index 6178317..1234835 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import Button, { type ButtonProps } from '../../atoms/buttons/button';
+import { Button, type ButtonProps } from '../../atoms';
 import styles from './help-button.module.scss';
 
 export type HelpButtonProps = Pick<
@@ -8,12 +8,7 @@ export type HelpButtonProps = Pick<
   'aria-pressed' | 'className' | 'onClick'
 >;
 
-/**
- * HelpButton component
- *
- * Render a button with an interrogation mark icon.
- */
-const HelpButton: ForwardRefRenderFunction<
+const HelpButtonWithRef: ForwardRefRenderFunction<
   HTMLButtonElement,
   HelpButtonProps
 > = ({ className = '', ...props }, ref) => {
@@ -37,4 +32,9 @@ const HelpButton: ForwardRefRenderFunction<
   );
 };
 
-export default forwardRef(HelpButton);
+/**
+ * HelpButton component
+ *
+ * Render a button with an interrogation mark icon.
+ */
+export const HelpButton = forwardRef(HelpButtonWithRef);
diff --git a/src/components/molecules/buttons/index.ts b/src/components/molecules/buttons/index.ts
new file mode 100644
index 0000000..e0a10c1
--- /dev/null
+++ b/src/components/molecules/buttons/index.ts
@@ -0,0 +1,3 @@
+export * from './back-to-top';
+export * from './heading-button';
+export * from './help-button';
diff --git a/src/components/molecules/forms/ackee-toggle.stories.tsx b/src/components/molecules/forms/ackee-toggle.stories.tsx
index 3f3f11e..779f49d 100644
--- a/src/components/molecules/forms/ackee-toggle.stories.tsx
+++ b/src/components/molecules/forms/ackee-toggle.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import AckeeToggleComponent from './ackee-toggle';
+import { AckeeToggle } from './ackee-toggle';
 import { storageKey } from './ackee-toggle.fixture';
 
 /**
@@ -7,7 +7,7 @@ import { storageKey } from './ackee-toggle.fixture';
  */
 export default {
   title: 'Molecules/Forms/Toggle',
-  component: AckeeToggleComponent,
+  component: AckeeToggle,
   argTypes: {
     bodyClassName: {
       control: {
@@ -109,10 +109,10 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof AckeeToggleComponent>;
+} as ComponentMeta<typeof AckeeToggle>;
 
-const Template: ComponentStory<typeof AckeeToggleComponent> = (args) => (
-  <AckeeToggleComponent {...args} />
+const Template: ComponentStory<typeof AckeeToggle> = (args) => (
+  <AckeeToggle {...args} />
 );
 
 /**
diff --git a/src/components/molecules/forms/ackee-toggle.test.tsx b/src/components/molecules/forms/ackee-toggle.test.tsx
index a4d36b3..97ebbe5 100644
--- a/src/components/molecules/forms/ackee-toggle.test.tsx
+++ b/src/components/molecules/forms/ackee-toggle.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import AckeeToggle from './ackee-toggle';
+import { AckeeToggle } from './ackee-toggle';
 import { storageKey } from './ackee-toggle.fixture';
 
 describe('AckeeToggle', () => {
diff --git a/src/components/molecules/forms/ackee-toggle.tsx b/src/components/molecules/forms/ackee-toggle.tsx
index ba77c10..32949b2 100644
--- a/src/components/molecules/forms/ackee-toggle.tsx
+++ b/src/components/molecules/forms/ackee-toggle.tsx
@@ -1,16 +1,18 @@
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import useLocalStorage from '../../../utils/hooks/use-local-storage';
-import useUpdateAckeeOptions, {
+import {
   type AckeeOptions,
-} from '../../../utils/hooks/use-update-ackee-options';
-import RadioGroup, {
+  useLocalStorage,
+  useUpdateAckeeOptions,
+} from '../../../utils/hooks';
+import {
+  RadioGroup,
   type RadioGroupCallback,
   type RadioGroupCallbackProps,
   type RadioGroupOption,
   type RadioGroupProps,
 } from './radio-group';
-import Tooltip, { type TooltipProps } from '../modals/tooltip';
+import { Tooltip, type TooltipProps } from '../modals/tooltip';
 
 export type AckeeToggleProps = Pick<
   RadioGroupProps,
@@ -43,7 +45,7 @@ export type AckeeToggleProps = Pick<
  *
  * Render a Toggle component to set reduce motion.
  */
-const AckeeToggle: FC<AckeeToggleProps> = ({
+export const AckeeToggle: FC<AckeeToggleProps> = ({
   defaultValue,
   storageKey,
   tooltipClassName,
@@ -126,8 +128,9 @@ const AckeeToggle: FC<AckeeToggleProps> = ({
 
   return (
     <RadioGroup
-      initialChoice={value}
+      {...props}
       kind="toggle"
+      initialChoice={value}
       legend={ackeeLabel}
       onChange={handleChange}
       options={options}
@@ -139,9 +142,6 @@ const AckeeToggle: FC<AckeeToggleProps> = ({
           className={tooltipClassName}
         />
       }
-      {...props}
     />
   );
 };
-
-export default AckeeToggle;
diff --git a/src/components/molecules/forms/fieldset.stories.tsx b/src/components/molecules/forms/fieldset.stories.tsx
index 85aeb7f..d53a21a 100644
--- a/src/components/molecules/forms/fieldset.stories.tsx
+++ b/src/components/molecules/forms/fieldset.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import FieldsetComponent from './fieldset';
+import { Fieldset as FieldsetComponent } from './fieldset';
 import { body, legend, Tooltip } from './fieldset.fixture';
 
 /**
diff --git a/src/components/molecules/forms/fieldset.test.tsx b/src/components/molecules/forms/fieldset.test.tsx
index aec7a51..f397bcd 100644
--- a/src/components/molecules/forms/fieldset.test.tsx
+++ b/src/components/molecules/forms/fieldset.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Fieldset from './fieldset';
+import { Fieldset } from './fieldset';
 import { body, legend, Tooltip } from './fieldset.fixture';
 
 describe('Fieldset', () => {
diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx
index 4cbf71d..7564d14 100644
--- a/src/components/molecules/forms/fieldset.tsx
+++ b/src/components/molecules/forms/fieldset.tsx
@@ -6,9 +6,9 @@ import {
   useRef,
   useState,
 } from 'react';
-import useOnClickOutside from '../../../utils/hooks/use-on-click-outside';
-import HelpButton from '../buttons/help-button';
-import Tooltip from '../modals/tooltip';
+import { useOnClickOutside } from '../../../utils/hooks';
+import { HelpButton } from '../buttons';
+import { Tooltip } from '../modals';
 import styles from './fieldset.module.scss';
 
 export type FieldsetProps = {
@@ -59,7 +59,7 @@ export type FieldsetProps = {
  *
  * Render a fieldset with a legend.
  */
-const Fieldset: FC<FieldsetProps> = ({
+export const Fieldset: FC<FieldsetProps> = ({
   bodyClassName = '',
   buttonClassName = '',
   children,
@@ -92,17 +92,12 @@ const Fieldset: FC<FieldsetProps> = ({
   };
 
   const tooltipRef = useOnClickOutside<HTMLDivElement>(closeTooltip);
+  const fieldsetClass = `${styles.wrapper} ${styles[wrapperModifier]} ${className}`;
+  const legendClass = `${styles.legend} ${styles[legendModifier]} ${legendClassName}`;
 
   return (
-    <fieldset
-      className={`${styles.wrapper} ${styles[wrapperModifier]} ${className}`}
-      {...props}
-    >
-      <legend
-        className={`${styles.legend} ${styles[legendModifier]} ${legendClassName}`}
-      >
-        {legend}
-      </legend>
+    <fieldset {...props} className={fieldsetClass}>
+      <legend className={legendClass}>{legend}</legend>
       {TooltipComponent && (
         <>
           <HelpButton
@@ -121,5 +116,3 @@ const Fieldset: FC<FieldsetProps> = ({
     </fieldset>
   );
 };
-
-export default Fieldset;
diff --git a/src/components/molecules/forms/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label.stories.tsx
index 9391fd2..7dad3cb 100644
--- a/src/components/molecules/forms/flipping-label.stories.tsx
+++ b/src/components/molecules/forms/flipping-label.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import MagnifyingGlass from '../../atoms/icons/magnifying-glass';
-import FlippingLabel from './flipping-label';
+import { MagnifyingGlass } from '../../atoms';
+import { FlippingLabel } from './flipping-label';
 
 export default {
   title: 'Organisms/Forms/FlippingLabel',
diff --git a/src/components/molecules/forms/flipping-label.test.tsx b/src/components/molecules/forms/flipping-label.test.tsx
index 61864fd..0f5dd30 100644
--- a/src/components/molecules/forms/flipping-label.test.tsx
+++ b/src/components/molecules/forms/flipping-label.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import FlippingLabel from './flipping-label';
+import { FlippingLabel } from './flipping-label';
 
 describe('FlippingLabel', () => {
   it('renders a label', () => {
diff --git a/src/components/molecules/forms/flipping-label.tsx b/src/components/molecules/forms/flipping-label.tsx
index ca83c6d..c85642b 100644
--- a/src/components/molecules/forms/flipping-label.tsx
+++ b/src/components/molecules/forms/flipping-label.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import Label, { LabelProps } from '../../atoms/forms/label';
-import Close from '../../atoms/icons/close';
+import { Close, Label, type LabelProps } from '../../atoms';
 import styles from './flipping-label.module.scss';
 
 export type FlippingLabelProps = Pick<
@@ -17,7 +16,7 @@ export type FlippingLabelProps = Pick<
   isActive: boolean;
 };
 
-const FlippingLabel: FC<FlippingLabelProps> = ({
+export const FlippingLabel: FC<FlippingLabelProps> = ({
   children,
   className = '',
   isActive,
@@ -26,7 +25,7 @@ const FlippingLabel: FC<FlippingLabelProps> = ({
   const wrapperModifier = isActive ? 'wrapper--active' : 'wrapper--inactive';
 
   return (
-    <Label className={`${styles.label} ${className}`} {...props}>
+    <Label {...props} className={`${styles.label} ${className}`}>
       <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}>
         <span className={styles.front}>{children}</span>
         <span className={styles.back}>
@@ -36,5 +35,3 @@ const FlippingLabel: FC<FlippingLabelProps> = ({
     </Label>
   );
 };
-
-export default FlippingLabel;
diff --git a/src/components/molecules/forms/index.ts b/src/components/molecules/forms/index.ts
new file mode 100644
index 0000000..4d0497d
--- /dev/null
+++ b/src/components/molecules/forms/index.ts
@@ -0,0 +1,10 @@
+export * from './ackee-toggle';
+export * from './fieldset';
+export * from './flipping-label';
+export * from './labelled-boolean-field';
+export * from './labelled-field';
+export * from './labelled-select';
+export * from './motion-toggle';
+export * from './prism-theme-toggle';
+export * from './radio-group';
+export * from './theme-toggle';
diff --git a/src/components/molecules/forms/labelled-boolean-field.stories.tsx b/src/components/molecules/forms/labelled-boolean-field.stories.tsx
index 6098b51..b1f8194 100644
--- a/src/components/molecules/forms/labelled-boolean-field.stories.tsx
+++ b/src/components/molecules/forms/labelled-boolean-field.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import LabelledBooleanField from './labelled-boolean-field';
+import { LabelledBooleanField } from './labelled-boolean-field';
 import { label } from './labelled-boolean-field.fixture';
 
 /**
diff --git a/src/components/molecules/forms/labelled-boolean-field.test.tsx b/src/components/molecules/forms/labelled-boolean-field.test.tsx
index 4e7728c..6916f95 100644
--- a/src/components/molecules/forms/labelled-boolean-field.test.tsx
+++ b/src/components/molecules/forms/labelled-boolean-field.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import LabelledBooleanField from './labelled-boolean-field';
+import { LabelledBooleanField } from './labelled-boolean-field';
 import { label } from './labelled-boolean-field.fixture';
 
 describe('LabelledBooleanField', () => {
diff --git a/src/components/molecules/forms/labelled-boolean-field.tsx b/src/components/molecules/forms/labelled-boolean-field.tsx
index 661e549..d110d45 100644
--- a/src/components/molecules/forms/labelled-boolean-field.tsx
+++ b/src/components/molecules/forms/labelled-boolean-field.tsx
@@ -1,8 +1,10 @@
 import { FC } from 'react';
-import BooleanField, {
+import {
+  BooleanField,
   type BooleanFieldProps,
-} from '../../atoms/forms/boolean-field';
-import Label, { type LabelProps } from '../../atoms/forms/label';
+  Label,
+  type LabelProps,
+} from '../../atoms';
 import styles from './labelled-boolean-field.module.scss';
 
 export type LabelledBooleanFieldProps = Omit<
@@ -40,7 +42,7 @@ export type LabelledBooleanFieldProps = Omit<
  *
  * Render a checkbox or radio button with a label.
  */
-const LabelledBooleanField: FC<LabelledBooleanFieldProps> = ({
+export const LabelledBooleanField: FC<LabelledBooleanFieldProps> = ({
   className = '',
   fieldClassName,
   hidden,
@@ -53,40 +55,31 @@ const LabelledBooleanField: FC<LabelledBooleanFieldProps> = ({
 }) => {
   const labelHiddenModifier = hidden ? 'label--hidden' : 'label--visible';
   const labelPositionModifier = `label--${labelPosition}`;
+  const labelClass = `${styles[labelPositionModifier]} ${styles[labelHiddenModifier]} ${labelClassName}`;
 
   return labelPosition === 'left' ? (
     <span className={`${styles.wrapper} ${className}`}>
-      <Label
-        className={`${styles[labelPositionModifier]} ${styles[labelHiddenModifier]} ${labelClassName}`}
-        htmlFor={id}
-        size={labelSize}
-      >
+      <Label className={labelClass} htmlFor={id} size={labelSize}>
         {label}
       </Label>
       <BooleanField
+        {...props}
         className={fieldClassName}
         hidden={hidden}
         id={id}
-        {...props}
       />
     </span>
   ) : (
     <span className={`${styles.wrapper} ${className}`}>
       <BooleanField
+        {...props}
         className={fieldClassName}
         hidden={hidden}
         id={id}
-        {...props}
       />
-      <Label
-        className={`${styles[labelPositionModifier]} ${styles[labelHiddenModifier]} ${labelClassName}`}
-        htmlFor={id}
-        size={labelSize}
-      >
+      <Label className={labelClass} htmlFor={id} size={labelSize}>
         {label}
       </Label>
     </span>
   );
 };
-
-export default LabelledBooleanField;
diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx
index 795e785..840421b 100644
--- a/src/components/molecules/forms/labelled-field.stories.tsx
+++ b/src/components/molecules/forms/labelled-field.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import LabelledField from './labelled-field';
+import { LabelledField } from './labelled-field';
 
 /**
  * LabelledField - Storybook Meta
diff --git a/src/components/molecules/forms/labelled-field.test.tsx b/src/components/molecules/forms/labelled-field.test.tsx
index 97681dc..e16c129 100644
--- a/src/components/molecules/forms/labelled-field.test.tsx
+++ b/src/components/molecules/forms/labelled-field.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import LabelledField from './labelled-field';
+import { LabelledField } from './labelled-field';
 
 describe('LabelledField', () => {
   it('renders a labelled field', () => {
diff --git a/src/components/molecules/forms/labelled-field.tsx b/src/components/molecules/forms/labelled-field.tsx
index 63c91fe..fca1c54 100644
--- a/src/components/molecules/forms/labelled-field.tsx
+++ b/src/components/molecules/forms/labelled-field.tsx
@@ -1,6 +1,5 @@
 import { forwardRef, ForwardRefRenderFunction } from 'react';
-import Field, { type FieldProps } from '../../atoms/forms/field';
-import Label from '../../atoms/forms/label';
+import { Field, type FieldProps, Label } from '../../atoms';
 import styles from './labelled-field.module.scss';
 
 export type LabelledFieldProps = FieldProps & {
@@ -18,12 +17,7 @@ export type LabelledFieldProps = FieldProps & {
   labelPosition?: 'left' | 'top';
 };
 
-/**
- * LabelledField component
- *
- * Render a field tied to a label.
- */
-const LabelledField: ForwardRefRenderFunction<
+const LabelledFieldWithRef: ForwardRefRenderFunction<
   HTMLInputElement,
   LabelledFieldProps
 > = (
@@ -47,4 +41,9 @@ const LabelledField: ForwardRefRenderFunction<
   );
 };
 
-export default forwardRef(LabelledField);
+/**
+ * LabelledField component
+ *
+ * Render a field tied to a label.
+ */
+export const LabelledField = forwardRef(LabelledFieldWithRef);
diff --git a/src/components/molecules/forms/labelled-select.stories.tsx b/src/components/molecules/forms/labelled-select.stories.tsx
index d02732c..d6029a5 100644
--- a/src/components/molecules/forms/labelled-select.stories.tsx
+++ b/src/components/molecules/forms/labelled-select.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import LabelledSelect from './labelled-select';
+import { LabelledSelect } from './labelled-select';
 
 const selectOptions = [
   { id: 'option1', name: 'Option 1', value: 'option1' },
diff --git a/src/components/molecules/forms/labelled-select.test.tsx b/src/components/molecules/forms/labelled-select.test.tsx
index 3823117..1ef4a25 100644
--- a/src/components/molecules/forms/labelled-select.test.tsx
+++ b/src/components/molecules/forms/labelled-select.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import LabelledSelect from './labelled-select';
+import { LabelledSelect } from './labelled-select';
 
 const selectOptions = [
   { id: 'option1', name: 'Option 1', value: 'option1' },
diff --git a/src/components/molecules/forms/labelled-select.tsx b/src/components/molecules/forms/labelled-select.tsx
index a12956c..300ae8a 100644
--- a/src/components/molecules/forms/labelled-select.tsx
+++ b/src/components/molecules/forms/labelled-select.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import Label, { type LabelProps } from '../../atoms/forms/label';
-import Select, { type SelectProps } from '../../atoms/forms/select';
+import { Label, type LabelProps, Select, type SelectProps } from '../../atoms';
 import styles from './labelled-select.module.scss';
 
 export type LabelledSelectProps = Omit<
@@ -34,7 +33,7 @@ export type LabelledSelectProps = Omit<
  *
  * Render a select with a label.
  */
-const LabelledSelect: FC<LabelledSelectProps> = ({
+export const LabelledSelect: FC<LabelledSelectProps> = ({
   id,
   label,
   labelClassName = '',
@@ -49,21 +48,19 @@ const LabelledSelect: FC<LabelledSelectProps> = ({
   return (
     <>
       <Label
+        className={`${styles[positionModifier]} ${labelClassName}`}
         htmlFor={id}
         required={required}
         size={labelSize}
-        className={`${styles[positionModifier]} ${labelClassName}`}
       >
         {label}
       </Label>
       <Select
-        id={id}
-        required={required}
         {...props}
         className={selectClassName}
+        id={id}
+        required={required}
       />
     </>
   );
 };
-
-export default LabelledSelect;
diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx
index 541ca8e..bb51e26 100644
--- a/src/components/molecules/forms/motion-toggle.stories.tsx
+++ b/src/components/molecules/forms/motion-toggle.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import MotionToggleComponent from './motion-toggle';
+import { MotionToggle } from './motion-toggle';
 import { storageKey } from './motion-toggle.fixture';
 
 /**
@@ -7,7 +7,7 @@ import { storageKey } from './motion-toggle.fixture';
  */
 export default {
   title: 'Molecules/Forms/Toggle',
-  component: MotionToggleComponent,
+  component: MotionToggle,
   argTypes: {
     bodyClassName: {
       control: {
@@ -70,10 +70,10 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof MotionToggleComponent>;
+} as ComponentMeta<typeof MotionToggle>;
 
-const Template: ComponentStory<typeof MotionToggleComponent> = (args) => (
-  <MotionToggleComponent {...args} />
+const Template: ComponentStory<typeof MotionToggle> = (args) => (
+  <MotionToggle {...args} />
 );
 
 /**
diff --git a/src/components/molecules/forms/motion-toggle.test.tsx b/src/components/molecules/forms/motion-toggle.test.tsx
index f6cf3ac..93df3a0 100644
--- a/src/components/molecules/forms/motion-toggle.test.tsx
+++ b/src/components/molecules/forms/motion-toggle.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import MotionToggle from './motion-toggle';
+import { MotionToggle } from './motion-toggle';
 import { storageKey } from './motion-toggle.fixture';
 
 describe('MotionToggle', () => {
diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index 7e150ca..c1a55f0 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import useAttributes from '../../../utils/hooks/use-attributes';
-import useLocalStorage from '../../../utils/hooks/use-local-storage';
-import RadioGroup, {
+import { useAttributes, useLocalStorage } from '../../../utils/hooks';
+import {
+  RadioGroup,
   type RadioGroupCallback,
   type RadioGroupCallbackProps,
   type RadioGroupOption,
@@ -30,7 +30,7 @@ export type MotionToggleProps = Pick<
  *
  * Render a Toggle component to set reduce motion.
  */
-const MotionToggle: FC<MotionToggleProps> = ({
+export const MotionToggle: FC<MotionToggleProps> = ({
   defaultValue,
   storageKey,
   ...props
@@ -107,14 +107,12 @@ const MotionToggle: FC<MotionToggleProps> = ({
 
   return (
     <RadioGroup
+      {...props}
       initialChoice={defaultValue}
       kind="toggle"
       legend={reduceMotionLabel}
       onChange={handleChange}
       options={options}
-      {...props}
     />
   );
 };
-
-export default MotionToggle;
diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
index 86f9773..bf0f2df 100644
--- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PrismThemeToggle from './prism-theme-toggle';
+import { PrismThemeToggle } from './prism-theme-toggle';
 
 /**
  * PrismThemeToggle - Storybook Meta
diff --git a/src/components/molecules/forms/prism-theme-toggle.test.tsx b/src/components/molecules/forms/prism-theme-toggle.test.tsx
index a488720..bd63762 100644
--- a/src/components/molecules/forms/prism-theme-toggle.test.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import PrismThemeToggle from './prism-theme-toggle';
+import { PrismThemeToggle } from './prism-theme-toggle';
 
 describe('PrismThemeToggle', () => {
   it('renders a toggle component', () => {
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
index b058230..5427fec 100644
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -4,9 +4,9 @@ import {
   type PrismTheme,
   usePrismTheme,
 } from '../../../utils/providers/prism-theme';
-import Moon from '../../atoms/icons/moon';
-import Sun from '../../atoms/icons/sun';
-import RadioGroup, {
+import { Moon, Sun } from '../../atoms';
+import {
+  RadioGroup,
   type RadioGroupCallback,
   type RadioGroupCallbackProps,
   type RadioGroupOption,
@@ -23,7 +23,7 @@ export type PrismThemeToggleProps = Pick<
  *
  * Render a Toggle component to set code blocks theme.
  */
-const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
+export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
   const intl = useIntl();
   const { theme, setTheme, resolvedTheme } = usePrismTheme();
 
@@ -107,14 +107,12 @@ const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
 
   return (
     <RadioGroup
+      {...props}
       initialChoice={isDarkTheme(theme) ? 'dark' : 'light'}
       kind="toggle"
       legend={themeLabel}
       onChange={handleChange}
       options={options}
-      {...props}
     />
   );
 };
-
-export default PrismThemeToggle;
diff --git a/src/components/molecules/forms/radio-group.stories.tsx b/src/components/molecules/forms/radio-group.stories.tsx
index de5da7c..b727e28 100644
--- a/src/components/molecules/forms/radio-group.stories.tsx
+++ b/src/components/molecules/forms/radio-group.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import RadioGroup from './radio-group';
+import { RadioGroup } from './radio-group';
 import { getOptions, initialChoice, legend } from './radio-group.fixture';
 
 /**
diff --git a/src/components/molecules/forms/radio-group.test.tsx b/src/components/molecules/forms/radio-group.test.tsx
index 9fb4249..c4a01e4 100644
--- a/src/components/molecules/forms/radio-group.test.tsx
+++ b/src/components/molecules/forms/radio-group.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import RadioGroup from './radio-group';
+import { RadioGroup } from './radio-group';
 import { getOptions, initialChoice, legend } from './radio-group.fixture';
 
 describe('RadioGroup', () => {
diff --git a/src/components/molecules/forms/radio-group.tsx b/src/components/molecules/forms/radio-group.tsx
index 7f47673..a747395 100644
--- a/src/components/molecules/forms/radio-group.tsx
+++ b/src/components/molecules/forms/radio-group.tsx
@@ -1,7 +1,8 @@
 import { ChangeEvent, FC, MouseEvent, SetStateAction } from 'react';
-import useStateChange from '../../../utils/hooks/use-state-change';
-import Fieldset, { type FieldsetProps } from '../forms/fieldset';
-import LabelledBooleanField, {
+import { useStateChange } from '../../../utils/hooks';
+import { Fieldset, type FieldsetProps } from './fieldset';
+import {
+  LabelledBooleanField,
   type LabelledBooleanFieldProps,
 } from './labelled-boolean-field';
 import styles from './radio-group.module.scss';
@@ -74,7 +75,7 @@ export type RadioGroupProps = Pick<
  *
  * Render a group of labelled radio buttons.
  */
-const RadioGroup: FC<RadioGroupProps> = ({
+export const RadioGroup: FC<RadioGroupProps> = ({
   className,
   groupClassName = '',
   initialChoice,
@@ -93,6 +94,7 @@ const RadioGroup: FC<RadioGroupProps> = ({
   const isToggle = kind === 'toggle';
   const alignmentModifier = `wrapper--${legendPosition}`;
   const toggleModifier = isToggle ? 'wrapper--toggle' : 'wrapper--regular';
+  const fieldsetClass = `${styles.wrapper} ${styles[alignmentModifier]} ${styles[toggleModifier]} ${className}`;
 
   /**
    * Update the selected choice on click or change event.
@@ -119,6 +121,7 @@ const RadioGroup: FC<RadioGroupProps> = ({
   const getOptions = (): JSX.Element[] => {
     return options.map((option) => (
       <LabelledBooleanField
+        {...option}
         key={option.id}
         checked={selectedChoice === option.value}
         className={`${styles.option} ${optionClassName}`}
@@ -130,18 +133,17 @@ const RadioGroup: FC<RadioGroupProps> = ({
         onChange={updateChoice}
         onClick={updateChoice}
         type="radio"
-        {...option}
       />
     ));
   };
 
   return (
     <Fieldset
-      className={`${styles.wrapper} ${styles[alignmentModifier]} ${styles[toggleModifier]} ${className}`}
+      {...props}
+      className={fieldsetClass}
       legendClassName={`${styles.legend} ${legendClassName}`}
       legendPosition={legendPosition}
       role="radiogroup"
-      {...props}
     >
       {isToggle ? (
         <span className={`${styles.toggle} ${groupClassName}`}>
@@ -153,5 +155,3 @@ const RadioGroup: FC<RadioGroupProps> = ({
     </Fieldset>
   );
 };
-
-export default RadioGroup;
diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx
index ff1034d..40f4d8c 100644
--- a/src/components/molecules/forms/theme-toggle.stories.tsx
+++ b/src/components/molecules/forms/theme-toggle.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ThemeToggle from './theme-toggle';
+import { ThemeToggle } from './theme-toggle';
 
 /**
  * ThemeToggle - Storybook Meta
diff --git a/src/components/molecules/forms/theme-toggle.test.tsx b/src/components/molecules/forms/theme-toggle.test.tsx
index d379423..aae627a 100644
--- a/src/components/molecules/forms/theme-toggle.test.tsx
+++ b/src/components/molecules/forms/theme-toggle.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import ThemeToggle from './theme-toggle';
+import { ThemeToggle } from './theme-toggle';
 
 describe('ThemeToggle', () => {
   it('renders a toggle component', () => {
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index e0a6683..25e2a39 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -1,9 +1,9 @@
 import { useTheme } from 'next-themes';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import Moon from '../../atoms/icons/moon';
-import Sun from '../../atoms/icons/sun';
-import RadioGroup, {
+import { Moon, Sun } from '../../atoms';
+import {
+  RadioGroup,
   type RadioGroupCallback,
   type RadioGroupCallbackProps,
   type RadioGroupOption,
@@ -20,7 +20,7 @@ export type ThemeToggleProps = Pick<
  *
  * Render a Toggle component to set theme.
  */
-const ThemeToggle: FC<ThemeToggleProps> = (props) => {
+export const ThemeToggle: FC<ThemeToggleProps> = (props) => {
   const intl = useIntl();
   const { resolvedTheme, setTheme } = useTheme();
   const isDarkTheme = resolvedTheme === 'dark';
@@ -95,14 +95,12 @@ const ThemeToggle: FC<ThemeToggleProps> = (props) => {
 
   return (
     <RadioGroup
+      {...props}
       initialChoice={isDarkTheme ? 'dark' : 'light'}
       kind="toggle"
       legend={themeLabel}
       onChange={handleChange}
       options={options}
-      {...props}
     />
   );
 };
-
-export default ThemeToggle;
diff --git a/src/components/molecules/images/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo.stories.tsx
index 9d09293..ae4739a 100644
--- a/src/components/molecules/images/flipping-logo.stories.tsx
+++ b/src/components/molecules/images/flipping-logo.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import FlippingLogoComponent from './flipping-logo';
+import { FlippingLogo as FlippingLogoComponent } from './flipping-logo';
 
 /**
  * FlippingLogo - Storybook Meta
diff --git a/src/components/molecules/images/flipping-logo.test.tsx b/src/components/molecules/images/flipping-logo.test.tsx
index c3ee492..3a29891 100644
--- a/src/components/molecules/images/flipping-logo.test.tsx
+++ b/src/components/molecules/images/flipping-logo.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import FlippingLogo from './flipping-logo';
+import { FlippingLogo } from './flipping-logo';
 
 describe('FlippingLogo', () => {
   it('renders a photo', () => {
diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx
index a739b30..64e69ca 100644
--- a/src/components/molecules/images/flipping-logo.tsx
+++ b/src/components/molecules/images/flipping-logo.tsx
@@ -1,6 +1,6 @@
 import Image, { type ImageProps } from 'next/image';
 import { ForwardedRef, forwardRef, ForwardRefRenderFunction } from 'react';
-import Logo, { type LogoProps } from '../../atoms/images/logo';
+import { Logo, type LogoProps } from '../../atoms';
 import styles from './flipping-logo.module.scss';
 
 export type FlippingLogoProps = {
@@ -22,12 +22,7 @@ export type FlippingLogoProps = {
   photo: ImageProps['src'];
 };
 
-/**
- * FlippingLogo component
- *
- * Render a logo and a photo with a flipping effect.
- */
-const FlippingLogo: ForwardRefRenderFunction<
+const FlippingLogoWithRef: ForwardRefRenderFunction<
   HTMLDivElement,
   FlippingLogoProps
 > = (
@@ -38,12 +33,12 @@ const FlippingLogo: ForwardRefRenderFunction<
     <div className={`${styles.logo} ${className}`} ref={ref}>
       <div className={styles.logo__front}>
         <Image
-          src={photo}
+          {...props}
           alt={altText}
-          style={{ objectFit: 'cover' }}
           height="100"
+          src={photo}
+          style={{ objectFit: 'cover' }}
           width="100"
-          {...props}
         />
       </div>
       <div className={styles.logo__back}>
@@ -53,4 +48,9 @@ const FlippingLogo: ForwardRefRenderFunction<
   );
 };
 
-export default forwardRef(FlippingLogo);
+/**
+ * FlippingLogo component
+ *
+ * Render a logo and a photo with a flipping effect.
+ */
+export const FlippingLogo = forwardRef(FlippingLogoWithRef);
diff --git a/src/components/molecules/images/index.ts b/src/components/molecules/images/index.ts
new file mode 100644
index 0000000..33ec886
--- /dev/null
+++ b/src/components/molecules/images/index.ts
@@ -0,0 +1,2 @@
+export * from './flipping-logo';
+export * from './responsive-image';
diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
index 4917cde..cc6b088 100644
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ b/src/components/molecules/images/responsive-image.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ResponsiveImage from './responsive-image';
+import { ResponsiveImage } from './responsive-image';
 
 /**
  * ResponsiveImage - Storybook Meta
diff --git a/src/components/molecules/images/responsive-image.test.tsx b/src/components/molecules/images/responsive-image.test.tsx
index 68e810b..a738686 100644
--- a/src/components/molecules/images/responsive-image.test.tsx
+++ b/src/components/molecules/images/responsive-image.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import ResponsiveImage from './responsive-image';
+import { ResponsiveImage } from './responsive-image';
 
 describe('ResponsiveImage', () => {
   it('renders a responsive image', () => {
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index 1160027..85c0c46 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -1,6 +1,6 @@
 import Image, { type ImageProps } from 'next/image';
 import { FC, ReactNode } from 'react';
-import Link, { type LinkProps } from '../../atoms/links/link';
+import { Link, type LinkProps } from '../../atoms';
 import styles from './responsive-image.module.scss';
 
 export type ResponsiveImageProps = Omit<
@@ -42,7 +42,7 @@ export type ResponsiveImageProps = Omit<
  *
  * Render a responsive image wrapped in a figure element.
  */
-const ResponsiveImage: FC<ResponsiveImageProps> = ({
+export const ResponsiveImage: FC<ResponsiveImageProps> = ({
   alt,
   caption,
   className = '',
@@ -55,20 +55,18 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
   const linkModifier = target
     ? styles['wrapper--has-link']
     : styles['wrapper--no-link'];
+  const figureClass = `${styles.wrapper} ${bordersModifier} ${linkModifier} ${className}`;
 
   return (
-    <figure
-      aria-label={caption ? undefined : title}
-      className={`${styles.wrapper} ${bordersModifier} ${linkModifier} ${className}`}
-    >
+    <figure aria-label={caption ? undefined : title} className={figureClass}>
       {target ? (
         <Link href={target} className={styles.link}>
           <Image
+            {...props}
             alt={alt}
             className={styles.img}
             sizes="100vw"
             title={title}
-            {...props}
           />
           {caption && (
             <figcaption className={styles.caption}>{caption}</figcaption>
@@ -77,11 +75,11 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
       ) : (
         <>
           <Image
+            {...props}
             alt={alt}
             className={styles.img}
             sizes="100vw"
             title={title}
-            {...props}
           />
           {caption && (
             <figcaption className={styles.caption}>{caption}</figcaption>
@@ -91,5 +89,3 @@ const ResponsiveImage: FC<ResponsiveImageProps> = ({
     </figure>
   );
 };
-
-export default ResponsiveImage;
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
new file mode 100644
index 0000000..1a101e4
--- /dev/null
+++ b/src/components/molecules/index.ts
@@ -0,0 +1,6 @@
+export * from './buttons';
+export * from './forms';
+export * from './images';
+export * from './layout';
+export * from './modals';
+export * from './nav';
diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
index 94bb166..04844e2 100644
--- a/src/components/molecules/layout/branding.stories.tsx
+++ b/src/components/molecules/layout/branding.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Branding from './branding';
+import { Branding } from './branding';
 
 /**
  * Branding - Storybook Meta
diff --git a/src/components/molecules/layout/branding.test.tsx b/src/components/molecules/layout/branding.test.tsx
index b3dfaa9..3aa125d 100644
--- a/src/components/molecules/layout/branding.test.tsx
+++ b/src/components/molecules/layout/branding.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Branding from './branding';
+import { Branding } from './branding';
 
 describe('Branding', () => {
   it('renders a photo', () => {
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index 10574ab..b105796 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link';
 import { FC, useRef } from 'react';
 import { useIntl } from 'react-intl';
-import useStyles from '../../../utils/hooks/use-styles';
-import Heading from '../../atoms/headings/heading';
-import FlippingLogo, { type FlippingLogoProps } from '../images/flipping-logo';
+import { useStyles } from '../../../utils/hooks';
+import { Heading } from '../../atoms';
+import { FlippingLogo, type FlippingLogoProps } from '../images';
 import styles from './branding.module.scss';
 
 export type BrandingProps = Pick<FlippingLogoProps, 'photo'> & {
@@ -30,7 +30,7 @@ export type BrandingProps = Pick<FlippingLogoProps, 'photo'> & {
  *
  * Render the branding logo, title and optional baseline.
  */
-const Branding: FC<BrandingProps> = ({
+export const Branding: FC<BrandingProps> = ({
   baseline,
   isHome = false,
   photo,
@@ -79,18 +79,18 @@ const Branding: FC<BrandingProps> = ({
   return (
     <div className={styles.wrapper}>
       <FlippingLogo
-        className={styles.logo}
+        {...props}
         altText={altText}
+        className={styles.logo}
         logoTitle={logoTitle}
         photo={photo}
         ref={logoRef}
-        {...props}
       />
       <Heading
+        className={styles.title}
         isFake={!isHome}
         level={1}
         withMargin={false}
-        className={styles.title}
         ref={titleRef}
       >
         {withLink ? (
@@ -103,10 +103,10 @@ const Branding: FC<BrandingProps> = ({
       </Heading>
       {baseline && (
         <Heading
+          className={styles.baseline}
           isFake={true}
           level={4}
           withMargin={false}
-          className={styles.baseline}
           ref={baselineRef}
         >
           {baseline}
@@ -115,5 +115,3 @@ const Branding: FC<BrandingProps> = ({
     </div>
   );
 };
-
-export default Branding;
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index 87051a9..a9545d1 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Card from './card';
+import { Card } from './card';
 import { cover, id, meta, tagline, title, url } from './card.fixture';
 
 /**
diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx
index 825ad41..0fcd59e 100644
--- a/src/components/molecules/layout/card.test.tsx
+++ b/src/components/molecules/layout/card.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Card from './card';
+import { Card } from './card';
 import { cover, id, meta, tagline, title, url } from './card.fixture';
 
 describe('Card', () => {
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index 50431d8..c342d0e 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -1,10 +1,9 @@
 import { FC } from 'react';
-import { type Image } from '../../../types/app';
-import ButtonLink from '../../atoms/buttons/button-link';
-import Heading, { type HeadingLevel } from '../../atoms/headings/heading';
-import ResponsiveImage from '../images/responsive-image';
+import { type Image } from '../../../types';
+import { ButtonLink, Heading, type HeadingLevel } from '../../atoms';
+import { ResponsiveImage } from '../images';
+import { Meta, type MetaData } from './meta';
 import styles from './card.module.scss';
-import Meta, { type MetaData } from './meta';
 
 export type CardProps = {
   /**
@@ -46,7 +45,7 @@ export type CardProps = {
  *
  * Render a link with minimal information about its content.
  */
-const Card: FC<CardProps> = ({
+export const Card: FC<CardProps> = ({
   className = '',
   cover,
   id,
@@ -59,8 +58,8 @@ const Card: FC<CardProps> = ({
   return (
     <ButtonLink
       aria-labelledby={`${id}-heading`}
-      target={url}
       className={`${styles.wrapper} ${className}`}
+      target={url}
     >
       <article className={styles.article}>
         <header className={styles.header}>
@@ -91,5 +90,3 @@ const Card: FC<CardProps> = ({
     </ButtonLink>
   );
 };
-
-export default Card;
diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx
index c3fbf22..d20cdbe 100644
--- a/src/components/molecules/layout/code.stories.tsx
+++ b/src/components/molecules/layout/code.stories.tsx
@@ -1,12 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CodeComponent from './code';
+import { Code } from './code';
 
 /**
  * Code - Storybook Meta
  */
 export default {
   title: 'Molecules/Layout/Code',
-  component: CodeComponent,
+  component: Code,
   args: {
     filterOutput: false,
     outputPattern: '#output#',
@@ -82,11 +82,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof CodeComponent>;
+} as ComponentMeta<typeof Code>;
 
-const Template: ComponentStory<typeof CodeComponent> = (args) => (
-  <CodeComponent {...args} />
-);
+const Template: ComponentStory<typeof Code> = (args) => <Code {...args} />;
 
 const javascriptCodeSample = `
 const foo = () => {
diff --git a/src/components/molecules/layout/code.test.tsx b/src/components/molecules/layout/code.test.tsx
index b825fec..8687693 100644
--- a/src/components/molecules/layout/code.test.tsx
+++ b/src/components/molecules/layout/code.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Code from './code';
+import { Code } from './code';
 
 const code = `
 function foo() {
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index 4eb9be3..a1aadd8 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -1,8 +1,9 @@
 import { FC, useRef } from 'react';
-import usePrism, {
+import {
   type OptionalPrismPlugin,
   type PrismLanguage,
-} from '../../../utils/hooks/use-prism';
+  usePrism,
+} from '../../../utils/hooks';
 import styles from './code.module.scss';
 
 export type CodeProps = {
@@ -37,7 +38,7 @@ export type CodeProps = {
  *
  * Render a code block with syntax highlighting.
  */
-const Code: FC<CodeProps> = ({
+export const Code: FC<CodeProps> = ({
   children,
   filterOutput = false,
   language,
@@ -55,16 +56,14 @@ const Code: FC<CodeProps> = ({
   return (
     <div className={styles.wrapper} ref={wrapperRef}>
       <pre
-        className={className}
-        tabIndex={0}
+        {...props}
         {...attributes}
         {...outputAttribute}
-        {...props}
+        className={className}
+        tabIndex={0}
       >
         <code className={`language-${language}`}>{children}</code>
       </pre>
     </div>
   );
 };
-
-export default Code;
diff --git a/src/components/molecules/layout/columns.stories.tsx b/src/components/molecules/layout/columns.stories.tsx
index 7105bb9..4745dbf 100644
--- a/src/components/molecules/layout/columns.stories.tsx
+++ b/src/components/molecules/layout/columns.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Column from '../../atoms/layout/column';
-import Columns from './columns';
+import { Column } from '../../atoms';
+import { Columns } from './columns';
 
 export default {
   title: 'Molecules/Layout/Columns',
diff --git a/src/components/molecules/layout/columns.test.tsx b/src/components/molecules/layout/columns.test.tsx
index 5a23d0d..c907d8b 100644
--- a/src/components/molecules/layout/columns.test.tsx
+++ b/src/components/molecules/layout/columns.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
-import Column from '../../atoms/layout/column';
-import Columns from './columns';
+import { Column } from '../../atoms';
+import { Columns } from './columns';
 
 const column1 =
   'Non praesentium voluptas quisquam ex est. Distinctio accusamus facilis libero in aut. Et veritatis quo impedit fugit amet sit accusantium. Ut est rerum asperiores sint libero eveniet. Molestias placeat recusandae suscipit eligendi sunt hic.';
diff --git a/src/components/molecules/layout/columns.tsx b/src/components/molecules/layout/columns.tsx
index ec62b18..b5bd9b5 100644
--- a/src/components/molecules/layout/columns.tsx
+++ b/src/components/molecules/layout/columns.tsx
@@ -1,5 +1,5 @@
 import { FC, ReactComponentElement } from 'react';
-import Column from '../../atoms/layout/column';
+import { Column } from '../../atoms';
 import styles from './columns.module.scss';
 
 export type ColumnsProps = {
@@ -26,7 +26,7 @@ export type ColumnsProps = {
  *
  * Render some Column components as columns.
  */
-const Columns: FC<ColumnsProps> = ({
+export const Columns: FC<ColumnsProps> = ({
   children,
   className = '',
   count,
@@ -36,14 +36,7 @@ const Columns: FC<ColumnsProps> = ({
   const responsiveClass = responsive
     ? `wrapper--responsive`
     : 'wrapper--no-responsive';
+  const wrapperClass = `${styles.wrapper} ${styles[countClass]} ${styles[responsiveClass]} ${className}`;
 
-  return (
-    <div
-      className={`${styles.wrapper} ${styles[countClass]} ${styles[responsiveClass]} ${className}`}
-    >
-      {children}
-    </div>
-  );
+  return <div className={wrapperClass}>{children}</div>;
 };
-
-export default Columns;
diff --git a/src/components/molecules/layout/index.ts b/src/components/molecules/layout/index.ts
new file mode 100644
index 0000000..9fa1216
--- /dev/null
+++ b/src/components/molecules/layout/index.ts
@@ -0,0 +1,8 @@
+export * from './branding';
+export * from './card';
+export * from './code';
+export * from './columns';
+export * from './meta';
+export * from './page-footer';
+export * from './page-header';
+export * from './widget';
diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx
index 3a204c0..50ed252 100644
--- a/src/components/molecules/layout/meta.stories.tsx
+++ b/src/components/molecules/layout/meta.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import descriptionListItemStories from '../../atoms/lists/description-list-item.stories';
+import descriptionListItemStories from '../../atoms/lists/description-list-group.stories';
 import descriptionListStories from '../../atoms/lists/description-list.stories';
-import MetaComponent, { MetaData } from './meta';
+import { Meta as MetaComponent, MetaData } from './meta';
 
 /**
  * Meta - Storybook Meta
diff --git a/src/components/molecules/layout/meta.test.tsx b/src/components/molecules/layout/meta.test.tsx
index e9deb23..1087fbb 100644
--- a/src/components/molecules/layout/meta.test.tsx
+++ b/src/components/molecules/layout/meta.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
-import { getFormattedDate } from '../../../utils/helpers/dates';
-import Meta from './meta';
+import { getFormattedDate } from '../../../utils/helpers';
+import { Meta } from './meta';
 
 const data = {
   publication: { date: '2022-04-09' },
diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index 48c0748..53128a7 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -1,14 +1,12 @@
 import { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
+import { getFormattedDate, getFormattedTime } from '../../../utils/helpers';
 import {
-  getFormattedDate,
-  getFormattedTime,
-} from '../../../utils/helpers/dates';
-import Link from '../../atoms/links/link';
-import DescriptionList, {
+  DescriptionList,
   type DescriptionListProps,
   type DescriptionListItem,
-} from '../../atoms/lists/description-list';
+  Link,
+} from '../../atoms';
 
 export type CustomMeta = {
   label: string;
@@ -133,7 +131,7 @@ export type MetaProps = Omit<
  *
  * Renders the given metadata.
  */
-const Meta: FC<MetaProps> = ({
+export const Meta: FC<MetaProps> = ({
   data,
   itemsLayout = 'inline-values',
   withSeparator = true,
@@ -384,11 +382,9 @@ const Meta: FC<MetaProps> = ({
 
   return (
     <DescriptionList
+      {...props}
       items={getItems(data)}
       withSeparator={withSeparator}
-      {...props}
     />
   );
 };
-
-export default Meta;
diff --git a/src/components/molecules/layout/page-footer.stories.tsx b/src/components/molecules/layout/page-footer.stories.tsx
index 31b7a49..8e991a4 100644
--- a/src/components/molecules/layout/page-footer.stories.tsx
+++ b/src/components/molecules/layout/page-footer.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { MetaData } from './meta';
-import PageFooterComponent from './page-footer';
+import { PageFooter as PageFooterComponent } from './page-footer';
 
 /**
  * Page Footer - Storybook Meta
diff --git a/src/components/molecules/layout/page-footer.test.tsx b/src/components/molecules/layout/page-footer.test.tsx
index baf13b2..8497be9 100644
--- a/src/components/molecules/layout/page-footer.test.tsx
+++ b/src/components/molecules/layout/page-footer.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import PageFooter from './page-footer';
+import { PageFooter } from './page-footer';
 
 describe('PageFooter', () => {
   it('renders a footer element', () => {
diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx
index 97e449f..786fca0 100644
--- a/src/components/molecules/layout/page-footer.tsx
+++ b/src/components/molecules/layout/page-footer.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Meta, { MetaData } from './meta';
+import { Meta, MetaData } from './meta';
 
 export type PageFooterProps = {
   /**
@@ -17,12 +17,10 @@ export type PageFooterProps = {
  *
  * Render a footer element to display page meta.
  */
-const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => {
+export const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => {
   return (
     <footer {...props}>
       {meta && <Meta data={meta} withSeparator={false} />}
     </footer>
   );
 };
-
-export default PageFooter;
diff --git a/src/components/molecules/layout/page-header.stories.tsx b/src/components/molecules/layout/page-header.stories.tsx
index d58f8b5..ea943bf 100644
--- a/src/components/molecules/layout/page-header.stories.tsx
+++ b/src/components/molecules/layout/page-header.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PageHeader from './page-header';
+import { PageHeader } from './page-header';
 
 /**
  * Page Header - Storybook Meta
diff --git a/src/components/molecules/layout/page-header.test.tsx b/src/components/molecules/layout/page-header.test.tsx
index 9c737c7..b66f77a 100644
--- a/src/components/molecules/layout/page-header.test.tsx
+++ b/src/components/molecules/layout/page-header.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import PageHeader from './page-header';
+import { PageHeader } from './page-header';
 
 const title = 'Non nemo amet';
 const intro =
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index 78d875e..9c11feb 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
-import Heading from '../../atoms/headings/heading';
-import Meta, { type MetaData } from './meta';
+import { Heading } from '../../atoms';
+import { Meta, type MetaData } from './meta';
 import styles from './page-header.module.scss';
 
 export type PageHeaderProps = {
@@ -27,7 +27,7 @@ export type PageHeaderProps = {
  *
  * Render a header element with page title, meta and intro.
  */
-const PageHeader: FC<PageHeaderProps> = ({
+export const PageHeader: FC<PageHeaderProps> = ({
   className = '',
   intro,
   meta,
@@ -63,5 +63,3 @@ const PageHeader: FC<PageHeaderProps> = ({
     </header>
   );
 };
-
-export default PageHeader;
diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx
index dd5a30b..8fb868d 100644
--- a/src/components/molecules/layout/widget.stories.tsx
+++ b/src/components/molecules/layout/widget.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import headingButtonStories from '../buttons/heading-button.stories';
-import Widget from './widget';
+import { Widget } from './widget';
 
 /**
  * Widget - Storybook Meta
diff --git a/src/components/molecules/layout/widget.test.tsx b/src/components/molecules/layout/widget.test.tsx
index 47282a0..11b37a5 100644
--- a/src/components/molecules/layout/widget.test.tsx
+++ b/src/components/molecules/layout/widget.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Widget from './widget';
+import { Widget } from './widget';
 
 const children = 'Widget body';
 const title = 'Widget title';
diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx
index f50fe80..0bb04c7 100644
--- a/src/components/molecules/layout/widget.tsx
+++ b/src/components/molecules/layout/widget.tsx
@@ -1,7 +1,5 @@
 import { FC, ReactNode, useState } from 'react';
-import HeadingButton, {
-  type HeadingButtonProps,
-} from '../buttons/heading-button';
+import { HeadingButton, type HeadingButtonProps } from '../buttons';
 import styles from './widget.module.scss';
 
 export type WidgetProps = Pick<
@@ -31,7 +29,7 @@ export type WidgetProps = Pick<
  *
  * Render an expandable widget.
  */
-const Widget: FC<WidgetProps> = ({
+export const Widget: FC<WidgetProps> = ({
   children,
   className = '',
   expanded = true,
@@ -46,11 +44,10 @@ const Widget: FC<WidgetProps> = ({
     ? 'widget--has-borders'
     : 'widget--no-borders';
   const scrollClass = withScroll ? 'widget--has-scroll' : 'widget--no-scroll';
+  const widgetClass = `${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${styles[scrollClass]} ${className}`;
 
   return (
-    <div
-      className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${styles[scrollClass]} ${className}`}
-    >
+    <div className={widgetClass}>
       <HeadingButton
         level={level}
         title={title}
@@ -62,5 +59,3 @@ const Widget: FC<WidgetProps> = ({
     </div>
   );
 };
-
-export default Widget;
diff --git a/src/components/molecules/modals/index.ts b/src/components/molecules/modals/index.ts
new file mode 100644
index 0000000..595be13
--- /dev/null
+++ b/src/components/molecules/modals/index.ts
@@ -0,0 +1,2 @@
+export * from './modal';
+export * from './tooltip';
diff --git a/src/components/molecules/modals/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx
index f6dd364..36e6bfc 100644
--- a/src/components/molecules/modals/modal.stories.tsx
+++ b/src/components/molecules/modals/modal.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Modal from './modal';
+import { Modal } from './modal';
 
 /**
  * Widget - Storybook Meta
diff --git a/src/components/molecules/modals/modal.test.tsx b/src/components/molecules/modals/modal.test.tsx
index 9297662..5d55b3d 100644
--- a/src/components/molecules/modals/modal.test.tsx
+++ b/src/components/molecules/modals/modal.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Modal from './modal';
+import { Modal } from './modal';
 
 const title = 'A custom title';
 const children =
diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx
index 76dab55..344d5b9 100644
--- a/src/components/molecules/modals/modal.tsx
+++ b/src/components/molecules/modals/modal.tsx
@@ -1,8 +1,11 @@
 import dynamic from 'next/dynamic';
 import { FC, ReactNode } from 'react';
-import Heading, { type HeadingProps } from '../../atoms/headings/heading';
-import { type CogProps } from '../../atoms/icons/cog';
-import { type MagnifyingGlassProps } from '../../atoms/icons/magnifying-glass';
+import {
+  type CogProps,
+  Heading,
+  type HeadingProps,
+  type MagnifyingGlassProps,
+} from '../../atoms';
 import styles from './modal.module.scss';
 
 export type Icons = 'cogs' | 'search';
@@ -30,11 +33,17 @@ export type ModalProps = {
   title?: string;
 };
 
-const CogIcon = dynamic<CogProps>(() => import('../../atoms/icons/cog'), {
-  ssr: false,
-});
+const CogIcon = dynamic<CogProps>(
+  () => import('../../atoms/icons/cog').then((mod) => mod.Cog),
+  {
+    ssr: false,
+  }
+);
 const SearchIcon = dynamic<MagnifyingGlassProps>(
-  () => import('../../atoms/icons/magnifying-glass'),
+  () =>
+    import('../../atoms/icons/magnifying-glass').then(
+      (mod) => mod.MagnifyingGlass
+    ),
   { ssr: false }
 );
 
@@ -43,7 +52,7 @@ const SearchIcon = dynamic<MagnifyingGlassProps>(
  *
  * Render a modal component with an optional title and icon.
  */
-const Modal: FC<ModalProps> = ({
+export const Modal: FC<ModalProps> = ({
   children,
   className = '',
   headingClassName = '',
@@ -77,5 +86,3 @@ const Modal: FC<ModalProps> = ({
     </div>
   );
 };
-
-export default Modal;
diff --git a/src/components/molecules/modals/tooltip.stories.tsx b/src/components/molecules/modals/tooltip.stories.tsx
index a3dfa9f..abc3526 100644
--- a/src/components/molecules/modals/tooltip.stories.tsx
+++ b/src/components/molecules/modals/tooltip.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Tooltip from './tooltip';
+import { Tooltip } from './tooltip';
 import { content, icon, title } from './tooltip.fixture';
 
 /**
diff --git a/src/components/molecules/modals/tooltip.test.tsx b/src/components/molecules/modals/tooltip.test.tsx
index 6bca281..eb23334 100644
--- a/src/components/molecules/modals/tooltip.test.tsx
+++ b/src/components/molecules/modals/tooltip.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Tooltip from './tooltip';
+import { Tooltip } from './tooltip';
 import { content, icon, title } from './tooltip.fixture';
 
 describe('Tooltip', () => {
diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx
index 9beab86..3c8a5df 100644
--- a/src/components/molecules/modals/tooltip.tsx
+++ b/src/components/molecules/modals/tooltip.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, ForwardRefRenderFunction, ReactNode } from 'react';
-import List, { type ListItem } from '../../atoms/lists/list';
+import { List, type ListItem } from '../../atoms';
 import styles from './tooltip.module.scss';
 
 export type TooltipProps = {
@@ -25,12 +25,7 @@ export type TooltipProps = {
   title: string;
 };
 
-/**
- * Tooltip component
- *
- * Render a tooltip modal.
- */
-const Tooltip: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (
+const TooltipWithRef: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (
   { cloneClassName = '', className = '', content, icon, title },
   ref
 ) => {
@@ -64,4 +59,9 @@ const Tooltip: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (
   );
 };
 
-export default forwardRef(Tooltip);
+/**
+ * Tooltip component
+ *
+ * Render a tooltip modal.
+ */
+export const Tooltip = forwardRef(TooltipWithRef);
diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx
index cf67e60..b6dd619 100644
--- a/src/components/molecules/nav/breadcrumb.stories.tsx
+++ b/src/components/molecules/nav/breadcrumb.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Breadcrumb from './breadcrumb';
+import { Breadcrumb } from './breadcrumb';
 
 /**
  * Breadcrumb - Storybook Meta
diff --git a/src/components/molecules/nav/breadcrumb.test.tsx b/src/components/molecules/nav/breadcrumb.test.tsx
index f3a23b5..1838a1d 100644
--- a/src/components/molecules/nav/breadcrumb.test.tsx
+++ b/src/components/molecules/nav/breadcrumb.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Breadcrumb, { type BreadcrumbItem } from './breadcrumb';
+import { Breadcrumb, type BreadcrumbItem } from './breadcrumb';
 
 const items: BreadcrumbItem[] = [
   { id: 'home', url: '#', name: 'Home' },
diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx
index bc50f55..247bc2b 100644
--- a/src/components/molecules/nav/breadcrumb.tsx
+++ b/src/components/molecules/nav/breadcrumb.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import { BreadcrumbList, ListItem, WithContext } from 'schema-dts';
 import { settings } from '../../../utils/config';
-import Link from '../../atoms/links/link';
+import { Link } from '../../atoms';
 import styles from './breadcrumb.module.scss';
 
 export type BreadcrumbItem = {
@@ -41,7 +41,7 @@ export type BreadcrumbProps = {
  *
  * Render a breadcrumb navigation.
  */
-const Breadcrumb: FC<BreadcrumbProps> = ({
+export const Breadcrumb: FC<BreadcrumbProps> = ({
   itemClassName = '',
   items,
   ...props
@@ -106,9 +106,9 @@ const Breadcrumb: FC<BreadcrumbProps> = ({
   return (
     <>
       <Script
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
         id="schema-breadcrumb"
         type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
       <nav aria-label={ariaLabel} {...props}>
         <span className="screen-reader-text">
@@ -123,5 +123,3 @@ const Breadcrumb: FC<BreadcrumbProps> = ({
     </>
   );
 };
-
-export default Breadcrumb;
diff --git a/src/components/molecules/nav/index.ts b/src/components/molecules/nav/index.ts
new file mode 100644
index 0000000..68efe4e
--- /dev/null
+++ b/src/components/molecules/nav/index.ts
@@ -0,0 +1,3 @@
+export * from './breadcrumb';
+export * from './nav';
+export * from './pagination';
diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx
index abf6882..d343528 100644
--- a/src/components/molecules/nav/nav.stories.tsx
+++ b/src/components/molecules/nav/nav.stories.tsx
@@ -1,14 +1,13 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Envelop from '../../atoms/icons/envelop';
-import Home from '../../atoms/icons/home';
-import NavComponent, { type NavItem } from './nav';
+import { Envelop, Home } from '../../atoms';
+import { Nav, type NavItem } from './nav';
 
 /**
  * Nav - Storybook Meta
  */
 export default {
   title: 'Molecules/Navigation/Nav',
-  component: NavComponent,
+  component: Nav,
   argTypes: {
     'aria-label': {
       control: {
@@ -72,11 +71,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof NavComponent>;
+} as ComponentMeta<typeof Nav>;
 
-const Template: ComponentStory<typeof NavComponent> = (args) => (
-  <NavComponent {...args} />
-);
+const Template: ComponentStory<typeof Nav> = (args) => <Nav {...args} />;
 
 const MainNavItems: NavItem[] = [
   { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> },
diff --git a/src/components/molecules/nav/nav.test.tsx b/src/components/molecules/nav/nav.test.tsx
index b0920c8..37b2f41 100644
--- a/src/components/molecules/nav/nav.test.tsx
+++ b/src/components/molecules/nav/nav.test.tsx
@@ -1,7 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
-import Envelop from '../../atoms/icons/envelop';
-import Home from '../../atoms/icons/home';
-import Nav, { type NavItem } from './nav';
+import { Envelop, Home } from '../../atoms';
+import { Nav, type NavItem } from './nav';
 
 const navItems: NavItem[] = [
   { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> },
diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx
index 71d459a..8214d94 100644
--- a/src/components/molecules/nav/nav.tsx
+++ b/src/components/molecules/nav/nav.tsx
@@ -1,6 +1,5 @@
 import { FC, ReactNode } from 'react';
-import Link from '../../atoms/links/link';
-import NavLink from '../../atoms/links/nav-link';
+import { Link, NavLink } from '../../atoms';
 import styles from './nav.module.scss';
 
 export type NavItem = {
@@ -50,7 +49,7 @@ export type NavProps = {
  *
  * Render the nav links.
  */
-const Nav: FC<NavProps> = ({
+export const Nav: FC<NavProps> = ({
   className = '',
   items,
   kind,
@@ -76,10 +75,8 @@ const Nav: FC<NavProps> = ({
   };
 
   return (
-    <nav className={`${styles[kindClass]} ${className}`} {...props}>
+    <nav {...props} className={`${styles[kindClass]} ${className}`}>
       <ul className={`${styles.nav__list} ${listClassName}`}>{getItems()}</ul>
     </nav>
   );
 };
-
-export default Nav;
diff --git a/src/components/molecules/nav/pagination.stories.tsx b/src/components/molecules/nav/pagination.stories.tsx
index 2e86db4..678c574 100644
--- a/src/components/molecules/nav/pagination.stories.tsx
+++ b/src/components/molecules/nav/pagination.stories.tsx
@@ -1,12 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PaginationComponent from './pagination';
+import { Pagination } from './pagination';
 
 /**
  * Pagination - Storybook Meta
  */
 export default {
   title: 'Molecules/Navigation/Pagination',
-  component: PaginationComponent,
+  component: Pagination,
   args: {
     baseUrl: '/page/',
     siblings: 1,
@@ -98,10 +98,10 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof PaginationComponent>;
+} as ComponentMeta<typeof Pagination>;
 
-const Template: ComponentStory<typeof PaginationComponent> = (args) => (
-  <PaginationComponent {...args} />
+const Template: ComponentStory<typeof Pagination> = (args) => (
+  <Pagination {...args} />
 );
 
 /**
diff --git a/src/components/molecules/nav/pagination.test.tsx b/src/components/molecules/nav/pagination.test.tsx
index bf0e6c1..86ba719 100644
--- a/src/components/molecules/nav/pagination.test.tsx
+++ b/src/components/molecules/nav/pagination.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Pagination from './pagination';
+import { Pagination } from './pagination';
 
 const total = 50;
 const perPage = 10;
diff --git a/src/components/molecules/nav/pagination.tsx b/src/components/molecules/nav/pagination.tsx
index e832e1d..6fa69f0 100644
--- a/src/components/molecules/nav/pagination.tsx
+++ b/src/components/molecules/nav/pagination.tsx
@@ -1,6 +1,6 @@
 import { FC, Fragment, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
-import ButtonLink from '../../atoms/buttons/button-link';
+import { ButtonLink } from '../../atoms';
 import styles from './pagination.module.scss';
 
 export type PaginationProps = {
@@ -39,7 +39,7 @@ export type PaginationProps = {
  *
  * Render a page-based navigation.
  */
-const Pagination: FC<PaginationProps> = ({
+export const Pagination: FC<PaginationProps> = ({
   baseUrl = '/page/',
   className = '',
   current,
@@ -204,7 +204,7 @@ const Pagination: FC<PaginationProps> = ({
   };
 
   return (
-    <nav className={`${styles.wrapper} ${className}`} {...props}>
+    <nav {...props} className={`${styles.wrapper} ${className}`}>
       <ul className={`${styles.list} ${styles['list--pages']}`}>
         {getPages(current, totalPages)}
       </ul>
@@ -216,5 +216,3 @@ const Pagination: FC<PaginationProps> = ({
     </nav>
   );
 };
-
-export default Pagination;
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;
diff --git a/src/components/templates/index.ts b/src/components/templates/index.ts
new file mode 100644
index 0000000..ae34898
--- /dev/null
+++ b/src/components/templates/index.ts
@@ -0,0 +1,3 @@
+export * from './layout';
+export * from './page';
+export * from './sectioned';
diff --git a/src/components/templates/layout/index.ts b/src/components/templates/layout/index.ts
new file mode 100644
index 0000000..5d15fe1
--- /dev/null
+++ b/src/components/templates/layout/index.ts
@@ -0,0 +1 @@
+export * from './layout';
diff --git a/src/components/templates/layout/layout.stories.tsx b/src/components/templates/layout/layout.stories.tsx
index 4666b07..67ad008 100644
--- a/src/components/templates/layout/layout.stories.tsx
+++ b/src/components/templates/layout/layout.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import LayoutComponent from './layout';
+import { Layout as LayoutComponent } from './layout';
 
 /**
  * Layout - Storybook Meta
diff --git a/src/components/templates/layout/layout.test.tsx b/src/components/templates/layout/layout.test.tsx
index 6b3818e..53d16e3 100644
--- a/src/components/templates/layout/layout.test.tsx
+++ b/src/components/templates/layout/layout.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Layout from './layout';
+import { Layout } from './layout';
 
 const body =
   'Sit dolorem eveniet. Sit sit odio nemo vitae corrupti modi sint est rerum. Pariatur quidem maiores distinctio. Quia et illum aspernatur est cum.';
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index cf35b5c..beb6562 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -2,21 +2,29 @@ import Script from 'next/script';
 import { FC, ReactElement, ReactNode, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Person, SearchAction, WebSite, WithContext } from 'schema-dts';
-import { type NextPageWithLayoutOptions } from '../../../types/app';
-import useRouteChange from '../../../utils/hooks/use-route-change';
-import useScrollPosition from '../../../utils/hooks/use-scroll-position';
-import useSettings from '../../../utils/hooks/use-settings';
-import ButtonLink from '../../atoms/buttons/button-link';
-import Career from '../../atoms/icons/career';
-import CCBySA from '../../atoms/icons/cc-by-sa';
-import ComputerScreen from '../../atoms/icons/computer-screen';
-import Envelop from '../../atoms/icons/envelop';
-import Home from '../../atoms/icons/home';
-import PostsStack from '../../atoms/icons/posts-stack';
-import Main from '../../atoms/layout/main';
-import NoScript from '../../atoms/layout/no-script';
-import Footer, { type FooterProps } from '../../organisms/layout/footer';
-import Header, { type HeaderProps } from '../../organisms/layout/header';
+import { type NextPageWithLayoutOptions } from '../../../types';
+import {
+  useRouteChange,
+  useScrollPosition,
+  useSettings,
+} from '../../../utils/hooks';
+import {
+  ButtonLink,
+  Career,
+  CCBySA,
+  ComputerScreen,
+  Envelop,
+  Home,
+  Main,
+  NoScript,
+  PostsStack,
+} from '../../atoms';
+import {
+  Footer,
+  type FooterProps,
+  Header,
+  type HeaderProps,
+} from '../../organisms';
 import photo from '/public/armand-philippot.jpg';
 import styles from './layout.module.scss';
 
@@ -44,7 +52,7 @@ export type LayoutProps = Pick<HeaderProps, 'isHome'> & {
  *
  * Render the base layout used by all pages.
  */
-const Layout: FC<LayoutProps> = ({
+export const Layout: FC<LayoutProps> = ({
   children,
   withExtraPadding = false,
   isHome,
@@ -203,14 +211,14 @@ const Layout: FC<LayoutProps> = ({
   return (
     <>
       <Script
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
         id="schema-layout"
         type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
       <Script
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(brandingSchema) }}
         id="schema-branding"
         type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(brandingSchema) }}
       />
       <noscript>
         <div className={styles['noscript-spacing']}></div>
@@ -239,11 +247,11 @@ const Layout: FC<LayoutProps> = ({
         </article>
       </Main>
       <Footer
+        backToTopClassName={backToTopClassName}
+        className={styles.footer}
         copyright={copyrightData}
         navItems={footerNav}
         topId="top"
-        backToTopClassName={backToTopClassName}
-        className={styles.footer}
       />
       <noscript>
         <NoScript message={noScript} position="top" />
@@ -265,5 +273,3 @@ export const getLayout = (
 ) => {
   return <Layout {...props}>{page}</Layout>;
 };
-
-export default Layout;
diff --git a/src/components/templates/page/index.ts b/src/components/templates/page/index.ts
new file mode 100644
index 0000000..cdd5a64
--- /dev/null
+++ b/src/components/templates/page/index.ts
@@ -0,0 +1 @@
+export * from './page-layout';
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 5fc5063..146204e 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -1,14 +1,10 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ButtonLink from '../../atoms/buttons/button-link';
-import Heading from '../../atoms/headings/heading';
-import Link from '../../atoms/links/link';
+import { ButtonLink, Heading, Link } from '../../atoms';
+import { LinksListWidget, PostsList, Sharing } from '../../organisms';
 import { comments } from '../../organisms/layout/comments-list.fixture';
-import PostsList from '../../organisms/layout/posts-list';
 import { posts } from '../../organisms/layout/posts-list.fixture';
-import LinksListWidget from '../../organisms/widgets/links-list-widget';
-import Sharing from '../../organisms/widgets/sharing';
 import { LayoutBase } from '../layout/layout.stories';
-import PageLayoutComponent from './page-layout';
+import { PageLayout as PageLayoutComponent } from './page-layout';
 
 /**
  * PageLayout - Storybook Meta
diff --git a/src/components/templates/page/page-layout.test.tsx b/src/components/templates/page/page-layout.test.tsx
index 316ff58..9293c12 100644
--- a/src/components/templates/page/page-layout.test.tsx
+++ b/src/components/templates/page/page-layout.test.tsx
@@ -1,7 +1,7 @@
 import { BreadcrumbList } from 'schema-dts';
 import { render, screen } from '../../../../tests/utils';
 import { comments } from '../../organisms/layout/comments-list.fixture';
-import PageLayout from './page-layout';
+import { PageLayout } from './page-layout';
 
 const title = 'Incidunt ad earum';
 const breadcrumb = [
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index 6792724..3c6ff17 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -2,29 +2,26 @@ import Script from 'next/script';
 import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { BreadcrumbList } from 'schema-dts';
-import { sendComment } from '../../../services/graphql/comments';
-import { SendCommentInput } from '../../../types/graphql/mutations';
-import useIsMounted from '../../../utils/hooks/use-is-mounted';
-import Heading from '../../atoms/headings/heading';
-import Notice, { type NoticeKind } from '../../atoms/layout/notice';
-import Sidebar from '../../atoms/layout/sidebar';
-import { MetaData } from '../../molecules/layout/meta';
-import PageFooter, {
+import { sendComment } from '../../../services/graphql';
+import { SendCommentInput } from '../../../types';
+import { useIsMounted } from '../../../utils/hooks';
+import { Heading, Notice, type NoticeKind, Sidebar } from '../../atoms';
+import {
+  Breadcrumb,
+  type BreadcrumbItem,
+  MetaData,
+  PageFooter,
   type PageFooterProps,
-} from '../../molecules/layout/page-footer';
-import PageHeader, {
+  PageHeader,
   type PageHeaderProps,
-} from '../../molecules/layout/page-header';
-import Breadcrumb, {
-  type BreadcrumbItem,
-} from '../../molecules/nav/breadcrumb';
-import CommentForm, {
+} from '../../molecules';
+import {
+  CommentForm,
   type CommentFormProps,
-} from '../../organisms/forms/comment-form';
-import CommentsList, {
+  CommentsList,
   type CommentsListProps,
-} from '../../organisms/layout/comments-list';
-import TableOfContents from '../../organisms/widgets/table-of-contents';
+  TableOfContents,
+} from '../../organisms';
 import styles from './page-layout.module.scss';
 
 export type PageLayoutProps = {
@@ -91,7 +88,7 @@ export type PageLayoutProps = {
  *
  * Render the pages layout.
  */
-const PageLayout: FC<PageLayoutProps> = ({
+export const PageLayout: FC<PageLayoutProps> = ({
   children,
   allowComments = false,
   bodyAttributes,
@@ -186,29 +183,29 @@ const PageLayout: FC<PageLayoutProps> = ({
   return (
     <>
       <Script
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
         id="schema-breadcrumb"
         type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
       />
       <Breadcrumb
-        items={breadcrumb}
         className={styles.breadcrumb}
         itemClassName={styles.breadcrumb__items}
+        items={breadcrumb}
       />
       <PageHeader
-        title={title}
+        className={styles.header}
         intro={intro}
         meta={headerMeta}
-        className={styles.header}
+        title={title}
       />
       {withToC && (
         <Sidebar
-          className={`${styles.sidebar} ${styles['sidebar--first']}`}
           aria-label={intl.formatMessage({
             defaultMessage: 'Table of contents sidebar',
             id: 'Q+1GbT',
             description: 'PageLayout: accessible name for ToC sidebar',
           })}
+          className={`${styles.sidebar} ${styles['sidebar--first']}`}
         >
           {isMounted && bodyRef.current && (
             <TableOfContents wrapper={bodyRef.current} />
@@ -217,10 +214,10 @@ const PageLayout: FC<PageLayoutProps> = ({
       )}
       {typeof children === 'string' ? (
         <div
-          ref={bodyRef}
+          {...bodyAttributes}
           className={`${styles.body} ${bodyClassName}`}
           dangerouslySetInnerHTML={{ __html: children }}
-          {...bodyAttributes}
+          ref={bodyRef}
         />
       ) : (
         <div ref={bodyRef} className={`${styles.body} ${bodyClassName}`}>
@@ -231,12 +228,12 @@ const PageLayout: FC<PageLayoutProps> = ({
         <PageFooter meta={footerMeta} className={styles.footer} />
       )}
       <Sidebar
-        className={`${styles.sidebar} ${styles['sidebar--last']}`}
         aria-label={intl.formatMessage({
           defaultMessage: 'Sidebar',
           id: 'c556Qo',
           description: 'PageLayout: accessible name for the sidebar',
         })}
+        className={`${styles.sidebar} ${styles['sidebar--last']}`}
       >
         {widgets}
       </Sidebar>
@@ -253,9 +250,9 @@ const PageLayout: FC<PageLayoutProps> = ({
                 Notice={
                   isReplyRef.current === true && (
                     <Notice
+                      className={styles.notice}
                       kind={status}
                       message={statusMessage}
-                      className={styles.notice}
                     />
                   )
                 }
@@ -280,9 +277,9 @@ const PageLayout: FC<PageLayoutProps> = ({
               Notice={
                 isReplyRef.current === false && (
                   <Notice
+                    className={styles.notice}
                     kind={status}
                     message={statusMessage}
-                    className={styles.notice}
                   />
                 )
               }
@@ -293,5 +290,3 @@ const PageLayout: FC<PageLayoutProps> = ({
     </>
   );
 };
-
-export default PageLayout;
diff --git a/src/components/templates/sectioned/index.ts b/src/components/templates/sectioned/index.ts
new file mode 100644
index 0000000..a8c6045
--- /dev/null
+++ b/src/components/templates/sectioned/index.ts
@@ -0,0 +1 @@
+export * from './sectioned-layout';
diff --git a/src/components/templates/sectioned/sectioned-layout.stories.tsx b/src/components/templates/sectioned/sectioned-layout.stories.tsx
index 689f9a7..7c97400 100644
--- a/src/components/templates/sectioned/sectioned-layout.stories.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { LayoutBase } from '../layout/layout.stories';
-import SectionedLayoutComponent from './sectioned-layout';
+import { SectionedLayout as SectionedLayoutComponent } from './sectioned-layout';
 
 /**
  * SectionedLayout - Storybook Meta
diff --git a/src/components/templates/sectioned/sectioned-layout.test.tsx b/src/components/templates/sectioned/sectioned-layout.test.tsx
index a7f19cc..204f0d4 100644
--- a/src/components/templates/sectioned/sectioned-layout.test.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
 import { BreadcrumbList } from 'schema-dts';
-import SectionedLayout from './sectioned-layout';
+import { SectionedLayout } from './sectioned-layout';
 
 const breadcrumbSchema: BreadcrumbList['itemListElement'][] = [];
 const sections = [
diff --git a/src/components/templates/sectioned/sectioned-layout.tsx b/src/components/templates/sectioned/sectioned-layout.tsx
index 7fcad63..a307688 100644
--- a/src/components/templates/sectioned/sectioned-layout.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.tsx
@@ -1,12 +1,9 @@
 import Script from 'next/script';
 import { FC } from 'react';
 import { BreadcrumbList } from 'schema-dts';
-import Section, {
-  type SectionProps,
-  type SectionVariant,
-} from '../../atoms/layout/section';
+import { Section, type SectionProps, type SectionVariant } from '../../atoms';
 
-export type Section = Pick<SectionProps, 'content' | 'title'>;
+export type PageSection = Pick<SectionProps, 'content' | 'title'>;
 
 export type SectionedLayoutProps = {
   /**
@@ -16,7 +13,7 @@ export type SectionedLayoutProps = {
   /**
    * An array of objects describing each section.
    */
-  sections: Section[];
+  sections: PageSection[];
 };
 
 /**
@@ -24,7 +21,7 @@ export type SectionedLayoutProps = {
  *
  * Render a sectioned layout.
  */
-const SectionedLayout: FC<SectionedLayoutProps> = ({
+export const SectionedLayout: FC<SectionedLayoutProps> = ({
   breadcrumbSchema,
   sections,
 }) => {
@@ -35,9 +32,9 @@ const SectionedLayout: FC<SectionedLayoutProps> = ({
 
       return (
         <Section
+          content={section.content}
           key={`section-${index}`}
           title={section.title}
-          content={section.content}
           variant={variant}
           withBorder={!isLastSection}
         />
@@ -48,13 +45,11 @@ const SectionedLayout: FC<SectionedLayoutProps> = ({
   return (
     <>
       <Script
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
         id="schema-breadcrumb"
         type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
       />
       {getSections(sections)}
     </>
   );
 };
-
-export default SectionedLayout;
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index a6d84f5..5dff404 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -2,28 +2,27 @@ import { GetStaticProps } from 'next';
 import Head from 'next/head';
 import { ReactNode } from 'react';
 import { useIntl } from 'react-intl';
-import Link from '../components/atoms/links/link';
-import SearchForm from '../components/organisms/forms/search-form';
-import LinksListWidget from '../components/organisms/widgets/links-list-widget';
-import { getLayout } from '../components/templates/layout/layout';
-import PageLayout from '../components/templates/page/page-layout';
+import {
+  getLayout,
+  Link,
+  LinksListWidget,
+  PageLayout,
+  SearchForm,
+} from '../components';
 import {
   getThematicsPreview,
+  getTopicsPreview,
   getTotalThematics,
-} from '../services/graphql/thematics';
-import { getTopicsPreview, getTotalTopics } from '../services/graphql/topics';
-import { type NextPageWithLayout } from '../types/app';
+  getTotalTopics,
+} from '../services/graphql';
 import {
+  type NextPageWithLayout,
   type RawThematicPreview,
   type RawTopicPreview,
-} from '../types/raw-data';
-import { loadTranslation, type Messages } from '../utils/helpers/i18n';
-import {
-  getLinksListItems,
-  getPageLinkFromRawData,
-} from '../utils/helpers/pages';
-import useBreadcrumb from '../utils/hooks/use-breadcrumb';
-import useSettings from '../utils/hooks/use-settings';
+} from '../types';
+import { getLinksListItems, getPageLinkFromRawData } from '../utils/helpers';
+import { loadTranslation, type Messages } from '../utils/helpers/server';
+import { useBreadcrumb, useSettings } from '../utils/hooks';
 
 type Error404PageProps = {
   thematicsList: RawThematicPreview[];
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index f6eb88e..0fb17f4 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,10 +2,9 @@ import { ThemeProvider } from 'next-themes';
 import { useRouter } from 'next/router';
 import { IntlProvider } from 'react-intl';
 import '../styles/globals.scss';
-import { type AppPropsWithLayout } from '../types/app';
+import { type AppPropsWithLayout } from '../types';
 import { settings } from '../utils/config';
-import { AckeeProvider } from '../utils/providers/ackee';
-import { PrismThemeProvider } from '../utils/providers/prism-theme';
+import { AckeeProvider, PrismThemeProvider } from '../utils/providers';
 
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   const { locale, defaultLocale } = useRouter();
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index dae89fb..f564f35 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -5,41 +5,43 @@ import Script from 'next/script';
 import { ParsedUrlQuery } from 'querystring';
 import { HTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
-import ButtonLink from '../../components/atoms/buttons/button-link';
-import Link from '../../components/atoms/links/link';
-import Spinner from '../../components/atoms/loaders/spinner';
-import ResponsiveImage from '../../components/molecules/images/responsive-image';
-import Sharing from '../../components/organisms/widgets/sharing';
-import { getLayout } from '../../components/templates/layout/layout';
-import PageLayout, {
+import {
+  ButtonLink,
+  getLayout,
+  Link,
+  PageLayout,
   type PageLayoutProps,
-} from '../../components/templates/page/page-layout';
+  ResponsiveImage,
+  Sharing,
+  Spinner,
+} from '../../components';
 import {
   getAllArticlesSlugs,
+  getAllComments,
   getArticleBySlug,
-} from '../../services/graphql/articles';
-import { getAllComments } from '../../services/graphql/comments';
+} from '../../services/graphql';
 import styles from '../../styles/pages/article.module.scss';
 import {
   type Article,
   type NextPageWithLayout,
   type SingleComment,
-} from '../../types/app';
-import { loadTranslation, type Messages } from '../../utils/helpers/i18n';
+} from '../../types';
 import {
   getBlogSchema,
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
-} from '../../utils/helpers/schema-org';
-import useArticle from '../../utils/hooks/use-article';
-import useBreadcrumb from '../../utils/hooks/use-breadcrumb';
-import useComments from '../../utils/hooks/use-comments';
-import usePrism, {
+} from '../../utils/helpers';
+import { loadTranslation, type Messages } from '../../utils/helpers/server';
+import {
   type OptionalPrismPlugin,
-} from '../../utils/hooks/use-prism';
-import useReadingTime from '../../utils/hooks/use-reading-time';
-import useSettings from '../../utils/hooks/use-settings';
+  useArticle,
+  useBreadcrumb,
+  useComments,
+  usePrism,
+  useReadingTime,
+  useSettings,
+} from '../../utils/hooks';
 
 type ArticlePageProps = {
   comments: SingleComment[];
diff --git a/src/pages/atom.xml.tsx b/src/pages/atom.xml.tsx
index 580830a..4515fdd 100644
--- a/src/pages/atom.xml.tsx
+++ b/src/pages/atom.xml.tsx
@@ -1,5 +1,5 @@
 import { GetServerSideProps } from 'next';
-import { generateFeed } from '../utils/helpers/rss';
+import { generateFeed } from '../utils/helpers';
 
 const Feed = () => null;
 
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 1f88588..13a4c57 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -3,42 +3,39 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { useIntl } from 'react-intl';
-import Notice from '../../components/atoms/layout/notice';
-import PostsList from '../../components/organisms/layout/posts-list';
-import LinksListWidget from '../../components/organisms/widgets/links-list-widget';
-import { getLayout } from '../../components/templates/layout/layout';
-import PageLayout from '../../components/templates/page/page-layout';
-import { getArticles, getTotalArticles } from '../../services/graphql/articles';
 import {
-  getThematicsPreview,
-  getTotalThematics,
-} from '../../services/graphql/thematics';
+  getLayout,
+  LinksListWidget,
+  Notice,
+  PageLayout,
+  PostsList,
+} from '../../components';
 import {
+  getArticles,
+  getThematicsPreview,
   getTopicsPreview,
+  getTotalArticles,
+  getTotalThematics,
   getTotalTopics,
-} from '../../services/graphql/topics';
-import { type NextPageWithLayout } from '../../types/app';
-import { EdgesResponse } from '../../types/graphql/queries';
+} from '../../services/graphql';
 import {
+  type EdgesResponse,
+  type NextPageWithLayout,
   type RawArticle,
   type RawThematicPreview,
   type RawTopicPreview,
-} from '../../types/raw-data';
+} from '../../types';
 import { settings } from '../../utils/config';
-import { loadTranslation, type Messages } from '../../utils/helpers/i18n';
 import {
+  getBlogSchema,
   getLinksListItems,
   getPageLinkFromRawData,
   getPostsList,
-} from '../../utils/helpers/pages';
-import {
-  getBlogSchema,
   getSchemaJson,
   getWebPageSchema,
-} from '../../utils/helpers/schema-org';
-import useBreadcrumb from '../../utils/hooks/use-breadcrumb';
-import usePagination from '../../utils/hooks/use-pagination';
-import useSettings from '../../utils/hooks/use-settings';
+} from '../../utils/helpers';
+import { loadTranslation, type Messages } from '../../utils/helpers/server';
+import { useBreadcrumb, usePagination, useSettings } from '../../utils/hooks';
 
 type BlogPageProps = {
   articles: EdgesResponse<RawArticle>;
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index bfd9953..4eaade5 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -4,45 +4,43 @@ import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { ParsedUrlQuery } from 'querystring';
 import { useIntl } from 'react-intl';
-import PostsList from '../../../components/organisms/layout/posts-list';
-import LinksListWidget from '../../../components/organisms/widgets/links-list-widget';
-import { getLayout } from '../../../components/templates/layout/layout';
-import PageLayout from '../../../components/templates/page/page-layout';
+import {
+  getLayout,
+  LinksListWidget,
+  PageLayout,
+  PostsList,
+} from '../../../components';
 import {
   getArticles,
   getArticlesEndCursor,
-  getTotalArticles,
-} from '../../../services/graphql/articles';
-import {
   getThematicsPreview,
-  getTotalThematics,
-} from '../../../services/graphql/thematics';
-import {
   getTopicsPreview,
+  getTotalArticles,
+  getTotalThematics,
   getTotalTopics,
-} from '../../../services/graphql/topics';
-import { type NextPageWithLayout } from '../../../types/app';
-import { EdgesResponse } from '../../../types/graphql/queries';
+} from '../../../services/graphql';
 import {
+  type EdgesResponse,
+  type NextPageWithLayout,
   type RawArticle,
   type RawThematicPreview,
   type RawTopicPreview,
-} from '../../../types/raw-data';
+} from '../../../types';
 import { settings } from '../../../utils/config';
-import { loadTranslation, type Messages } from '../../../utils/helpers/i18n';
 import {
+  getBlogSchema,
   getLinksListItems,
   getPageLinkFromRawData,
   getPostsList,
-} from '../../../utils/helpers/pages';
-import {
-  getBlogSchema,
   getSchemaJson,
   getWebPageSchema,
-} from '../../../utils/helpers/schema-org';
-import useBreadcrumb from '../../../utils/hooks/use-breadcrumb';
-import useRedirection from '../../../utils/hooks/use-redirection';
-import useSettings from '../../../utils/hooks/use-settings';
+} from '../../../utils/helpers';
+import { loadTranslation, type Messages } from '../../../utils/helpers/server';
+import {
+  useBreadcrumb,
+  useRedirection,
+  useSettings,
+} from '../../../utils/hooks';
 
 type BlogPageProps = {
   articles: EdgesResponse<RawArticle>;
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index b35b8e0..e3c8a2c 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -4,25 +4,26 @@ import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import Notice, { type NoticeKind } from '../components/atoms/layout/notice';
-import ContactForm, {
+import {
+  ContactForm,
   type ContactFormProps,
-} from '../components/organisms/forms/contact-form';
-import SocialMedia from '../components/organisms/widgets/social-media';
-import { getLayout } from '../components/templates/layout/layout';
-import PageLayout from '../components/templates/page/page-layout';
+  getLayout,
+  Notice,
+  type NoticeKind,
+  PageLayout,
+  SocialMedia,
+} from '../components';
 import { meta } from '../content/pages/contact.mdx';
-import { sendMail } from '../services/graphql/contact';
+import { sendMail } from '../services/graphql';
 import styles from '../styles/pages/contact.module.scss';
-import { type NextPageWithLayout } from '../types/app';
-import { loadTranslation } from '../utils/helpers/i18n';
+import { type NextPageWithLayout } from '../types';
 import {
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
-} from '../utils/helpers/schema-org';
-import useBreadcrumb from '../utils/hooks/use-breadcrumb';
-import useSettings from '../utils/hooks/use-settings';
+} from '../utils/helpers';
+import { loadTranslation } from '../utils/helpers/server';
+import { useBreadcrumb, useSettings } from '../utils/hooks';
 
 const ContactPage: NextPageWithLayout = () => {
   const { dates, intro, seo, title } = meta;
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 9e01e2f..9e1e7db 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -5,26 +5,26 @@ import { useRouter } from 'next/router';
 import Script from 'next/script';
 import React, { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
-import Heading from '../components/atoms/headings/heading';
-import Link from '../components/atoms/links/link';
-import List from '../components/atoms/lists/list';
-import ImageWidget from '../components/organisms/widgets/image-widget';
-import SocialMedia from '../components/organisms/widgets/social-media';
-import { getLayout } from '../components/templates/layout/layout';
-import PageLayout, {
+import {
+  getLayout,
+  Heading,
+  ImageWidget,
+  Link,
+  List,
+  PageLayout,
   type PageLayoutProps,
-} from '../components/templates/page/page-layout';
+  SocialMedia,
+} from '../components';
 import CVContent, { data, meta } from '../content/pages/cv.mdx';
 import styles from '../styles/pages/cv.module.scss';
-import { type NextPageWithLayout } from '../types/app';
-import { loadTranslation } from '../utils/helpers/i18n';
+import { type NextPageWithLayout } from '../types';
 import {
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
-} from '../utils/helpers/schema-org';
-import useBreadcrumb from '../utils/hooks/use-breadcrumb';
-import useSettings from '../utils/hooks/use-settings';
+} from '../utils/helpers';
+import { loadTranslation } from '../utils/helpers/server';
+import { useBreadcrumb, useSettings } from '../utils/hooks';
 
 const ExternalLink = ({
   children = '',
diff --git a/src/pages/feed.json.tsx b/src/pages/feed.json.tsx
index f240464..7c77e19 100644
--- a/src/pages/feed.json.tsx
+++ b/src/pages/feed.json.tsx
@@ -1,5 +1,5 @@
 import { GetServerSideProps } from 'next';
-import { generateFeed } from '../utils/helpers/rss';
+import { generateFeed } from '../utils/helpers';
 
 const Feed = () => null;
 
diff --git a/src/pages/feed.xml.tsx b/src/pages/feed.xml.tsx
index 79c7f41..60dcb21 100644
--- a/src/pages/feed.xml.tsx
+++ b/src/pages/feed.xml.tsx
@@ -1,5 +1,5 @@
 import { GetServerSideProps } from 'next';
-import { generateFeed } from '../utils/helpers/rss';
+import { generateFeed } from '../utils/helpers';
 
 const Feed = () => null;
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 291d011..8c357f1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,30 +2,31 @@ import { MDXComponents } from 'mdx/types';
 import { GetStaticProps } from 'next';
 import Head from 'next/head';
 import Script from 'next/script';
-import { ReactElement } from 'react';
+import { ReactNode, isValidElement } from 'react';
 import { useIntl } from 'react-intl';
 import FeedIcon from '../assets/images/icon-feed.svg';
-import ButtonLink from '../components/atoms/buttons/button-link';
-import Envelop from '../components/atoms/icons/envelop';
-import Column from '../components/atoms/layout/column';
-import Section, { type SectionProps } from '../components/atoms/layout/section';
-import List, { type ListItem } from '../components/atoms/lists/list';
-import ResponsiveImage from '../components/molecules/images/responsive-image';
-import Columns, {
-  type ColumnsProps,
-} from '../components/molecules/layout/columns';
-import CardsList, {
+import {
+  ButtonLink,
+  CardsList,
   type CardsListItem,
-} from '../components/organisms/layout/cards-list';
-import { getLayout } from '../components/templates/layout/layout';
+  Column,
+  Columns,
+  type ColumnsProps,
+  Envelop,
+  getLayout,
+  List,
+  type ListItem,
+  ResponsiveImage,
+  Section,
+  type SectionProps,
+} from '../components';
 import HomePageContent from '../content/pages/homepage.mdx';
-import { getArticlesCard } from '../services/graphql/articles';
+import { getArticlesCard } from '../services/graphql';
 import styles from '../styles/pages/home.module.scss';
-import { type ArticleCard, type NextPageWithLayout } from '../types/app';
-import { loadTranslation, type Messages } from '../utils/helpers/i18n';
-import { getSchemaJson, getWebPageSchema } from '../utils/helpers/schema-org';
-import useBreadcrumb from '../utils/hooks/use-breadcrumb';
-import useSettings from '../utils/hooks/use-settings';
+import { type ArticleCard, type NextPageWithLayout } from '../types';
+import { getSchemaJson, getWebPageSchema } from '../utils/helpers';
+import { loadTranslation, type Messages } from '../utils/helpers/server';
+import { useBreadcrumb, useSettings } from '../utils/hooks';
 
 /**
  * Retrieve a list of coding links.
@@ -259,25 +260,24 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
    * Create the page sections.
    *
    * @param {object} obj - An object containing the section body.
-   * @param {ReactElement[]} obj.children - The section body.
+   * @param {ReactNode[]} obj.children - The section body.
    * @returns {JSX.Element} A section element.
    */
   const getSection = ({
     children,
     variant,
   }: {
-    children: ReactElement[];
+    children: ReactNode[];
     variant: SectionProps['variant'];
   }): JSX.Element => {
     const [headingEl, ...content] = children;
-    const title = headingEl.props.children;
 
     return (
       <Section
-        title={title}
+        className={styles.section}
         content={content}
+        title={isValidElement(headingEl) ? headingEl.props.children : ''}
         variant={variant}
-        className={styles.section}
       />
     );
   };
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index 49363dc..faf76b1 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -3,22 +3,22 @@ import { GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import Link from '../components/atoms/links/link';
-import ResponsiveImage from '../components/molecules/images/responsive-image';
-import { getLayout } from '../components/templates/layout/layout';
-import PageLayout, {
+import {
+  getLayout,
+  Link,
+  PageLayout,
   type PageLayoutProps,
-} from '../components/templates/page/page-layout';
+  ResponsiveImage,
+} from '../components';
 import LegalNoticeContent, { meta } from '../content/pages/legal-notice.mdx';
-import { type NextPageWithLayout } from '../types/app';
-import { loadTranslation } from '../utils/helpers/i18n';
+import { type NextPageWithLayout } from '../types';
 import {
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
-} from '../utils/helpers/schema-org';
-import useBreadcrumb from '../utils/hooks/use-breadcrumb';
-import useSettings from '../utils/hooks/use-settings';
+} from '../utils/helpers';
+import { loadTranslation } from '../utils/helpers/server';
+import { useBreadcrumb, useSettings } from '../utils/hooks';
 
 /**
  * Legal Notice page.
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index eb007bb..ba03d9b 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -6,44 +6,46 @@ import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { ComponentType } from 'react';
 import { useIntl } from 'react-intl';
-import Link from '../../components/atoms/links/link';
-import SocialLink, {
-  type SocialWebsite,
-} from '../../components/atoms/links/social-link';
-import Spinner from '../../components/atoms/loaders/spinner';
-import ResponsiveImage, {
-  ResponsiveImageProps,
-} from '../../components/molecules/images/responsive-image';
-import Code from '../../components/molecules/layout/code';
-import Gallery from '../../components/organisms/images/gallery';
-import Overview, {
+import {
+  Code,
+  Gallery,
+  getLayout,
+  Link,
+  Overview,
   type OverviewMeta,
-} from '../../components/organisms/layout/overview';
-import Sharing from '../../components/organisms/widgets/sharing';
-import { getLayout } from '../../components/templates/layout/layout';
-import PageLayout, {
+  PageLayout,
   type PageLayoutProps,
-} from '../../components/templates/page/page-layout';
+  ResponsiveImage,
+  type ResponsiveImageProps,
+  Sharing,
+  SocialLink,
+  type SocialWebsite,
+  Spinner,
+} from '../../components';
 import styles from '../../styles/pages/project.module.scss';
 import {
   type NextPageWithLayout,
   type ProjectPreview,
   type Repos,
-} from '../../types/app';
-import { loadTranslation, type Messages } from '../../utils/helpers/i18n';
-import {
-  getProjectData,
-  getProjectFilenames,
-} from '../../utils/helpers/projects';
+} from '../../types';
 import {
+  capitalize,
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
-} from '../../utils/helpers/schema-org';
-import { capitalize } from '../../utils/helpers/strings';
-import useBreadcrumb from '../../utils/hooks/use-breadcrumb';
-import useGithubApi, { type RepoData } from '../../utils/hooks/use-github-api';
-import useSettings from '../../utils/hooks/use-settings';
+} from '../../utils/helpers';
+import {
+  getProjectData,
+  getProjectFilenames,
+  loadTranslation,
+  type Messages,
+} from '../../utils/helpers/server';
+import {
+  type RepoData,
+  useBreadcrumb,
+  useGithubApi,
+  useSettings,
+} from '../../utils/hooks';
 
 const BorderedImage = (props: ResponsiveImageProps) => {
   return <ResponsiveImage withBorders={true} {...props} />;
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index 22a5346..a145401 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -3,24 +3,27 @@ import { GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import Link from '../../components/atoms/links/link';
-import CardsList, {
+import {
+  CardsList,
   type CardsListItem,
-} from '../../components/organisms/layout/cards-list';
-import { getLayout } from '../../components/templates/layout/layout';
-import PageLayout from '../../components/templates/page/page-layout';
+  getLayout,
+  Link,
+  PageLayout,
+} from '../../components';
 import PageContent, { meta } from '../../content/pages/projects.mdx';
 import styles from '../../styles/pages/projects.module.scss';
-import { type NextPageWithLayout, type ProjectCard } from '../../types/app';
-import { loadTranslation, type Messages } from '../../utils/helpers/i18n';
-import { getProjectsCard } from '../../utils/helpers/projects';
+import { type NextPageWithLayout, type ProjectCard } from '../../types';
 import {
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
-} from '../../utils/helpers/schema-org';
-import useBreadcrumb from '../../utils/hooks/use-breadcrumb';
-import useSettings from '../../utils/hooks/use-settings';
+} from '../../utils/helpers/';
+import {
+  getProjectsCard,
+  loadTranslation,
+  type Messages,
+} from '../../utils/helpers/server';
+import { useBreadcrumb, useSettings } from '../../utils/hooks';
 
 type ProjectsPageProps = {
   projects: ProjectCard[];
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index fbea3cc..26cfd91 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -3,42 +3,43 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { useIntl } from 'react-intl';
-import Notice from '../../components/atoms/layout/notice';
-import Spinner from '../../components/atoms/loaders/spinner';
-import PostsList from '../../components/organisms/layout/posts-list';
-import LinksListWidget from '../../components/organisms/widgets/links-list-widget';
-import { getLayout } from '../../components/templates/layout/layout';
-import PageLayout from '../../components/templates/page/page-layout';
-import { getArticles, getTotalArticles } from '../../services/graphql/articles';
 import {
-  getThematicsPreview,
-  getTotalThematics,
-} from '../../services/graphql/thematics';
+  getLayout,
+  LinksListWidget,
+  Notice,
+  PageLayout,
+  PostsList,
+  Spinner,
+} from '../../components';
 import {
+  getArticles,
+  getThematicsPreview,
   getTopicsPreview,
+  getTotalArticles,
+  getTotalThematics,
   getTotalTopics,
-} from '../../services/graphql/topics';
-import { type NextPageWithLayout } from '../../types/app';
+} from '../../services/graphql';
 import {
+  type NextPageWithLayout,
   type RawArticle,
   type RawThematicPreview,
   type RawTopicPreview,
-} from '../../types/raw-data';
-import { loadTranslation, type Messages } from '../../utils/helpers/i18n';
+} from '../../types';
 import {
+  getBlogSchema,
   getLinksListItems,
   getPageLinkFromRawData,
   getPostsList,
-} from '../../utils/helpers/pages';
-import {
-  getBlogSchema,
   getSchemaJson,
   getWebPageSchema,
-} from '../../utils/helpers/schema-org';
-import useBreadcrumb from '../../utils/hooks/use-breadcrumb';
-import useDataFromAPI from '../../utils/hooks/use-data-from-api';
-import usePagination from '../../utils/hooks/use-pagination';
-import useSettings from '../../utils/hooks/use-settings';
+} from '../../utils/helpers';
+import { loadTranslation, type Messages } from '../../utils/helpers/server';
+import {
+  useBreadcrumb,
+  useDataFromAPI,
+  usePagination,
+  useSettings,
+} from '../../utils/hooks';
 
 type SearchPageProps = {
   thematicsList: RawThematicPreview[];
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index ffde92d..6308978 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -4,39 +4,37 @@ import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { ParsedUrlQuery } from 'querystring';
 import { useIntl } from 'react-intl';
-import Heading from '../../components/atoms/headings/heading';
-import ResponsiveImage from '../../components/molecules/images/responsive-image';
-import PostsList from '../../components/organisms/layout/posts-list';
-import LinksListWidget from '../../components/organisms/widgets/links-list-widget';
-import { getLayout } from '../../components/templates/layout/layout';
-import PageLayout, {
+import {
+  getLayout,
+  Heading,
+  LinksListWidget,
+  PageLayout,
   type PageLayoutProps,
-} from '../../components/templates/page/page-layout';
+  PostsList,
+  ResponsiveImage,
+} from '../../components';
 import {
   getAllTopicsSlugs,
   getTopicBySlug,
   getTopicsPreview,
   getTotalTopics,
-} from '../../services/graphql/topics';
+} from '../../services/graphql';
 import styles from '../../styles/pages/topic.module.scss';
 import {
   type NextPageWithLayout,
   type PageLink,
   type Topic,
-} from '../../types/app';
-import { loadTranslation, type Messages } from '../../utils/helpers/i18n';
+} from '../../types';
 import {
   getLinksListItems,
   getPageLinkFromRawData,
   getPostsWithUrl,
-} from '../../utils/helpers/pages';
-import {
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
-} from '../../utils/helpers/schema-org';
-import useBreadcrumb from '../../utils/hooks/use-breadcrumb';
-import useSettings from '../../utils/hooks/use-settings';
+} from '../../utils/helpers';
+import { loadTranslation, type Messages } from '../../utils/helpers/server';
+import { useBreadcrumb, useSettings } from '../../utils/hooks';
 
 export type TopicPageProps = {
   currentTopic: Topic;
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index b7d97a3..7712fff 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -4,37 +4,35 @@ import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { ParsedUrlQuery } from 'querystring';
 import { useIntl } from 'react-intl';
-import Heading from '../../components/atoms/headings/heading';
-import PostsList from '../../components/organisms/layout/posts-list';
-import LinksListWidget from '../../components/organisms/widgets/links-list-widget';
-import { getLayout } from '../../components/templates/layout/layout';
-import PageLayout, {
+import {
+  getLayout,
+  Heading,
+  LinksListWidget,
+  PageLayout,
   type PageLayoutProps,
-} from '../../components/templates/page/page-layout';
+  PostsList,
+} from '../../components';
 import {
   getAllThematicsSlugs,
   getThematicBySlug,
   getThematicsPreview,
   getTotalThematics,
-} from '../../services/graphql/thematics';
+} from '../../services/graphql';
 import {
   type NextPageWithLayout,
   type PageLink,
   type Thematic,
-} from '../../types/app';
-import { loadTranslation, type Messages } from '../../utils/helpers/i18n';
+} from '../../types';
 import {
   getLinksListItems,
   getPageLinkFromRawData,
   getPostsWithUrl,
-} from '../../utils/helpers/pages';
-import {
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
-} from '../../utils/helpers/schema-org';
-import useBreadcrumb from '../../utils/hooks/use-breadcrumb';
-import useSettings from '../../utils/hooks/use-settings';
+} from '../../utils/helpers';
+import { loadTranslation, type Messages } from '../../utils/helpers/server';
+import { useBreadcrumb, useSettings } from '../../utils/hooks';
 
 export type ThematicPageProps = {
   currentThematic: Thematic;
diff --git a/src/services/graphql/api.ts b/src/services/graphql/api.ts
index e7f6e57..5f32a78 100644
--- a/src/services/graphql/api.ts
+++ b/src/services/graphql/api.ts
@@ -2,12 +2,10 @@ import {
   Mutations,
   MutationsInputMap,
   MutationsResponseMap,
-} from '../../types/graphql/mutations';
-import {
   Queries,
   QueriesInputMap,
   QueriesResponseMap,
-} from '../../types/graphql/queries';
+} from '../../types';
 import { settings } from '../../utils/config';
 
 /**
diff --git a/src/services/graphql/articles.ts b/src/services/graphql/articles.ts
index 5f98fe9..789ef2b 100644
--- a/src/services/graphql/articles.ts
+++ b/src/services/graphql/articles.ts
@@ -1,17 +1,20 @@
-import { type Article, type ArticleCard, type Slug } from '../../types/app';
-import {
-  GraphQLEdgesInput,
-  GraphQLPageInfo,
-} from '../../types/graphql/generics';
-import { EdgesResponse, EndCursorResponse } from '../../types/graphql/queries';
 import {
+  type Article,
+  type ArticleCard,
+  type EdgesResponse,
+  type EndCursorResponse,
+  type GraphQLEdgesInput,
+  type GraphQLPageInfo,
   type RawArticle,
   type RawArticlePreview,
+  type Slug,
   type TotalItems,
-} from '../../types/raw-data';
-import { getAuthorFromRawData } from '../../utils/helpers/author';
-import { getImageFromRawData } from '../../utils/helpers/images';
-import { getPageLinkFromRawData } from '../../utils/helpers/pages';
+} from '../../types';
+import {
+  getAuthorFromRawData,
+  getImageFromRawData,
+  getPageLinkFromRawData,
+} from '../../utils/helpers';
 import { fetchAPI } from './api';
 import {
   articleBySlugQuery,
diff --git a/src/services/graphql/comments.ts b/src/services/graphql/comments.ts
index 426a649..4eaeac7 100644
--- a/src/services/graphql/comments.ts
+++ b/src/services/graphql/comments.ts
@@ -1,9 +1,13 @@
-import { SingleComment } from '../../types/app';
-import { GraphQLEdgesInput } from '../../types/graphql/generics';
-import { SendCommentInput, SentComment } from '../../types/graphql/mutations';
-import { ContentId } from '../../types/graphql/queries';
-import { RawComment, RawCommentsPage } from '../../types/raw-data';
-import { getAuthorFromRawData } from '../../utils/helpers/author';
+import {
+  type ContentId,
+  type GraphQLEdgesInput,
+  type RawComment,
+  type RawCommentsPage,
+  type SendCommentInput,
+  type SentComment,
+  type SingleComment,
+} from '../../types';
+import { getAuthorFromRawData } from '../../utils/helpers';
 import { fetchAPI } from './api';
 import { sendCommentMutation } from './comments.mutation';
 import { commentsQuery } from './comments.query';
diff --git a/src/services/graphql/contact.ts b/src/services/graphql/contact.ts
index 37c640d..3098374 100644
--- a/src/services/graphql/contact.ts
+++ b/src/services/graphql/contact.ts
@@ -1,4 +1,4 @@
-import { SendMailInput } from '../../types/graphql/mutations';
+import { SendMailInput } from '../../types';
 import { fetchAPI } from './api';
 import { sendMailMutation } from './contact.mutation';
 
diff --git a/src/services/graphql/index.ts b/src/services/graphql/index.ts
new file mode 100644
index 0000000..c1eac16
--- /dev/null
+++ b/src/services/graphql/index.ts
@@ -0,0 +1,12 @@
+export * from './api';
+export * from './articles';
+export * from './articles.query';
+export * from './comments';
+export * from './comments.mutation';
+export * from './comments.query';
+export * from './contact';
+export * from './contact.mutation';
+export * from './thematics';
+export * from './thematics.query';
+export * from './topics';
+export * from './topics.query';
diff --git a/src/services/graphql/thematics.ts b/src/services/graphql/thematics.ts
index 9210828..7a57824 100644
--- a/src/services/graphql/thematics.ts
+++ b/src/services/graphql/thematics.ts
@@ -1,17 +1,19 @@
-import { PageLink, Slug, Thematic } from '../../types/app';
-import { GraphQLEdgesInput } from '../../types/graphql/generics';
-import { EdgesResponse } from '../../types/graphql/queries';
 import {
-  RawArticle,
-  RawThematic,
-  RawThematicPreview,
-  TotalItems,
-} from '../../types/raw-data';
-import { getImageFromRawData } from '../../utils/helpers/images';
+  type EdgesResponse,
+  type GraphQLEdgesInput,
+  type PageLink,
+  type RawArticle,
+  type RawThematic,
+  type RawThematicPreview,
+  type Slug,
+  type Thematic,
+  type TotalItems,
+} from '../../types';
 import {
+  getImageFromRawData,
   getPageLinkFromRawData,
   sortPageLinksByName,
-} from '../../utils/helpers/pages';
+} from '../../utils/helpers';
 import { fetchAPI } from './api';
 import { getArticleFromRawData } from './articles';
 import {
diff --git a/src/services/graphql/topics.ts b/src/services/graphql/topics.ts
index 4c2f609..921b10d 100644
--- a/src/services/graphql/topics.ts
+++ b/src/services/graphql/topics.ts
@@ -1,17 +1,19 @@
-import { PageLink, Slug, Topic } from '../../types/app';
-import { GraphQLEdgesInput } from '../../types/graphql/generics';
-import { EdgesResponse } from '../../types/graphql/queries';
 import {
-  RawArticle,
-  RawTopic,
-  RawTopicPreview,
-  TotalItems,
-} from '../../types/raw-data';
-import { getImageFromRawData } from '../../utils/helpers/images';
+  type EdgesResponse,
+  type GraphQLEdgesInput,
+  type PageLink,
+  type RawArticle,
+  type RawTopic,
+  type RawTopicPreview,
+  type Slug,
+  type Topic,
+  type TotalItems,
+} from '../../types';
 import {
+  getImageFromRawData,
   getPageLinkFromRawData,
   sortPageLinksByName,
-} from '../../utils/helpers/pages';
+} from '../../utils/helpers';
 import { fetchAPI } from './api';
 import { getArticleFromRawData } from './articles';
 import {
diff --git a/src/types/graphql/index.ts b/src/types/graphql/index.ts
new file mode 100644
index 0000000..79eb05e
--- /dev/null
+++ b/src/types/graphql/index.ts
@@ -0,0 +1,3 @@
+export * from './generics';
+export * from './mutations';
+export * from './queries';
diff --git a/src/types/graphql/mutations.ts b/src/types/graphql/mutations.ts
index 581a46e..6ff066c 100644
--- a/src/types/graphql/mutations.ts
+++ b/src/types/graphql/mutations.ts
@@ -1,5 +1,4 @@
-import { sendCommentMutation } from '../../services/graphql/comments.mutation';
-import { sendMailMutation } from '../../services/graphql/contact.mutation';
+import { sendCommentMutation, sendMailMutation } from '../../services/graphql';
 
 //===========================================================================
 // Existing mutations list
diff --git a/src/types/graphql/queries.ts b/src/types/graphql/queries.ts
index fceae30..83e9c67 100644
--- a/src/types/graphql/queries.ts
+++ b/src/types/graphql/queries.ts
@@ -4,21 +4,17 @@ import {
   articlesEndCursorQuery,
   articlesQuery,
   articlesSlugQuery,
-  totalArticlesQuery,
-} from '../../services/graphql/articles.query';
-import { commentsQuery } from '../../services/graphql/comments.query';
-import {
+  commentsQuery,
   thematicBySlugQuery,
   thematicsListQuery,
   thematicsSlugQuery,
-  totalThematicsQuery,
-} from '../../services/graphql/thematics.query';
-import {
   topicBySlugQuery,
   topicsListQuery,
   topicsSlugQuery,
+  totalArticlesQuery,
+  totalThematicsQuery,
   totalTopicsQuery,
-} from '../../services/graphql/topics.query';
+} from '../../services/graphql';
 import { Slug } from '../app';
 import { RawComment } from '../raw-data';
 import {
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..c9820db
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,5 @@
+export * from './app';
+export * from './graphql';
+export * from './mdx';
+export * from './raw-data';
+export * from './swr';
diff --git a/src/utils/helpers/author.ts b/src/utils/helpers/author.ts
index 2892524..a5e9bc6 100644
--- a/src/utils/helpers/author.ts
+++ b/src/utils/helpers/author.ts
@@ -1,5 +1,4 @@
-import { type Author, type ContentKind } from '../../types/app';
-import { type RawAuthor } from '../../types/raw-data';
+import { type Author, type ContentKind, type RawAuthor } from '../../types';
 
 /**
  * Convert author raw data to regular data.
diff --git a/src/utils/helpers/images.ts b/src/utils/helpers/images.ts
index bff50c3..6e0c2c5 100644
--- a/src/utils/helpers/images.ts
+++ b/src/utils/helpers/images.ts
@@ -1,5 +1,4 @@
-import { Image } from '../../types/app';
-import { RawCover } from '../../types/raw-data';
+import { type Image, type RawCover } from '../../types';
 
 /**
  * Retrieve an Image object from raw data.
diff --git a/src/utils/helpers/index.ts b/src/utils/helpers/index.ts
new file mode 100644
index 0000000..1a35583
--- /dev/null
+++ b/src/utils/helpers/index.ts
@@ -0,0 +1,7 @@
+export * from './author';
+export * from './dates';
+export * from './images';
+export * from './pages';
+export * from './rss';
+export * from './schema-org';
+export * from './strings';
diff --git a/src/utils/helpers/pages.ts b/src/utils/helpers/pages.ts
index d6d44d2..6b27b6d 100644
--- a/src/utils/helpers/pages.ts
+++ b/src/utils/helpers/pages.ts
@@ -1,13 +1,13 @@
-import { type Post } from '../../components/organisms/layout/posts-list';
-import { type LinksListItems } from '../../components/organisms/widgets/links-list-widget';
-import { getArticleFromRawData } from '../../services/graphql/articles';
-import { type Article, type PageLink } from '../../types/app';
-import { EdgesResponse } from '../../types/graphql/queries';
+import { type LinksListItems, type Post } from '../../components';
+import { getArticleFromRawData } from '../../services/graphql';
 import {
+  type Article,
+  type EdgesResponse,
+  type PageLink,
   type RawArticle,
   type RawThematicPreview,
   type RawTopicPreview,
-} from '../../types/raw-data';
+} from '../../types';
 import { getImageFromRawData } from './images';
 
 /**
diff --git a/src/utils/helpers/rss.ts b/src/utils/helpers/rss.ts
index 41a036c..28f3c7b 100644
--- a/src/utils/helpers/rss.ts
+++ b/src/utils/helpers/rss.ts
@@ -3,8 +3,8 @@ import {
   getArticleFromRawData,
   getArticles,
   getTotalArticles,
-} from '../../services/graphql/articles';
-import { Article } from '../../types/app';
+} from '../../services/graphql';
+import { type Article } from '../../types';
 import { settings } from '../../utils/config';
 
 /**
diff --git a/src/utils/helpers/schema-org.ts b/src/utils/helpers/schema-org.ts
index 5d400c8..82f99c2 100644
--- a/src/utils/helpers/schema-org.ts
+++ b/src/utils/helpers/schema-org.ts
@@ -7,7 +7,7 @@ import {
   Graph,
   WebPage,
 } from 'schema-dts';
-import { Dates } from '../../types/app';
+import { type Dates } from '../../types';
 import { settings } from '../../utils/config';
 
 export type GetBlogSchemaProps = {
diff --git a/src/utils/helpers/i18n.ts b/src/utils/helpers/server/i18n.ts
index 35d495e..dbbc4e5 100644
--- a/src/utils/helpers/i18n.ts
+++ b/src/utils/helpers/server/i18n.ts
@@ -1,7 +1,6 @@
-import { createIntl, createIntlCache, IntlShape } from '@formatjs/intl';
 import { readFile } from 'fs/promises';
 import path from 'path';
-import { settings } from '../config';
+import { settings } from '../../config';
 
 export type Messages = { [key: string]: string };
 
@@ -16,7 +15,7 @@ export const defaultLocale = settings.locales.defaultLocale;
 export async function loadTranslation(
   currentLocale: string | undefined
 ): Promise<Messages> {
-  const locale: string = currentLocale || defaultLocale;
+  const locale: string = currentLocale ?? defaultLocale;
 
   const languagePath = path.join(process.cwd(), `lang/${locale}.json`);
 
@@ -30,20 +29,3 @@ export async function loadTranslation(
     throw error;
   }
 }
-
-/**
- * Create an Intl object to be used outside components.
- *
- * @returns {<Promise<IntlShape<string>>} The Intl object.
- */
-export async function getIntlInstance(): Promise<IntlShape<string>> {
-  try {
-    const cache = createIntlCache();
-    const messages = await loadTranslation(defaultLocale);
-
-    return createIntl({ locale: defaultLocale, messages }, cache);
-  } catch (error) {
-    console.error('Error: Could not create an Intl instance.');
-    throw error;
-  }
-}
diff --git a/src/utils/helpers/server/index.ts b/src/utils/helpers/server/index.ts
new file mode 100644
index 0000000..56ebad5
--- /dev/null
+++ b/src/utils/helpers/server/index.ts
@@ -0,0 +1,2 @@
+export * from './i18n';
+export * from './projects';
diff --git a/src/utils/helpers/projects.ts b/src/utils/helpers/server/projects.ts
index 0e4de7d..ed73da8 100644
--- a/src/utils/helpers/projects.ts
+++ b/src/utils/helpers/server/projects.ts
@@ -1,7 +1,10 @@
-import { readdirSync } from 'node:fs';
-import path from 'node:path';
-import { ProjectCard, ProjectPreview } from '../../types/app';
-import { MDXProjectMeta } from '../../types/mdx';
+import { readdirSync } from 'fs';
+import path from 'path';
+import {
+  type MDXProjectMeta,
+  type ProjectCard,
+  type ProjectPreview,
+} from '../../../types';
 
 /**
  * Retrieve all the projects filename.
@@ -29,11 +32,11 @@ export const getProjectData = async (
       meta,
     }: {
       meta: MDXProjectMeta;
-    } = await import(`../../content/projects/${filename}.mdx`);
+    } = await import(`../../../content/projects/${filename}.mdx`);
 
     const { dates, intro, title, ...projectMeta } = meta;
     const { publication, update } = dates;
-    const cover = await import(`../../../public/projects/${filename}.jpg`);
+    const cover = await import(`../../../../public/projects/${filename}.jpg`);
 
     return {
       id: filename,
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
new file mode 100644
index 0000000..f4357f2
--- /dev/null
+++ b/src/utils/hooks/index.ts
@@ -0,0 +1,24 @@
+export * from './use-add-classname';
+export * from './use-article';
+export * from './use-attributes';
+export * from './use-breadcrumb';
+export * from './use-comments';
+export * from './use-data-from-api';
+export * from './use-github-api';
+export * from './use-headings-tree';
+export * from './use-input-autofocus';
+export * from './use-is-mounted';
+export * from './use-local-storage';
+export * from './use-mutation-observer';
+export * from './use-on-click-outside';
+export * from './use-pagination';
+export * from './use-prism';
+export * from './use-query-selector-all';
+export * from './use-reading-time';
+export * from './use-redirection';
+export * from './use-route-change';
+export * from './use-scroll-position';
+export * from './use-settings';
+export * from './use-state-change';
+export * from './use-styles';
+export * from './use-update-ackee-options';
diff --git a/src/utils/hooks/use-add-classname.tsx b/src/utils/hooks/use-add-classname.tsx
index 0584084..8b0f6d6 100644
--- a/src/utils/hooks/use-add-classname.tsx
+++ b/src/utils/hooks/use-add-classname.tsx
@@ -11,7 +11,7 @@ export type UseAddClassNameProps = {
  *
  * @param {UseAddClassNameProps} props - An object with classnames and one or more elements.
  */
-const useAddClassName = ({
+export const useAddClassName = ({
   className,
   element,
   elements,
@@ -30,5 +30,3 @@ const useAddClassName = ({
     if (elements && elements.length > 0) elements.forEach(setClassName);
   }, [element, elements, setClassName]);
 };
-
-export default useAddClassName;
diff --git a/src/utils/hooks/use-article.tsx b/src/utils/hooks/use-article.tsx
index f6512b2..86d8e38 100644
--- a/src/utils/hooks/use-article.tsx
+++ b/src/utils/hooks/use-article.tsx
@@ -1,23 +1,29 @@
 import useSWR from 'swr';
-import { fetchAPI } from '../../services/graphql/api';
-import { getArticleFromRawData } from '../../services/graphql/articles';
-import { articleBySlugQuery } from '../../services/graphql/articles.query';
-import { Article } from '../../types/app';
-import { RawArticle } from '../../types/raw-data';
+import {
+  articleBySlugQuery,
+  fetchAPI,
+  getArticleFromRawData,
+} from '../../services/graphql';
+import { type Article, type RawArticle } from '../../types';
 
 export type UseArticleConfig = {
+  /**
+   * A fallback article
+   */
   fallback?: Article;
+  /**
+   * The article slug
+   */
   slug?: string;
 };
 
 /**
  * Retrieve an article by slug.
  *
- * @param {string} slug - The article slug.
- * @param {Article} fallback - A fallback article.
+ * @param {UseArticleConfig} config - The config.
  * @returns {Article|undefined} The matching article if it exists.
  */
-const useArticle = ({
+export const useArticle = ({
   slug,
   fallback,
 }: UseArticleConfig): Article | undefined => {
@@ -28,5 +34,3 @@ const useArticle = ({
 
   return data ? getArticleFromRawData(data.post) : fallback;
 };
-
-export default useArticle;
diff --git a/src/utils/hooks/use-attributes.tsx b/src/utils/hooks/use-attributes.tsx
index 35161ed..20e9947 100644
--- a/src/utils/hooks/use-attributes.tsx
+++ b/src/utils/hooks/use-attributes.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { fromKebabCaseToCamelCase } from '../helpers/strings';
+import { fromKebabCaseToCamelCase } from '../helpers';
 
 export type useAttributesProps = {
   /**
@@ -25,7 +25,7 @@ export type useAttributesProps = {
  *
  * @param props - An object with element, attribute name and value.
  */
-const useAttributes = ({
+export const useAttributes = ({
   element,
   elements,
   attribute,
@@ -48,5 +48,3 @@ const useAttributes = ({
     if (elements && elements.length > 0) elements.forEach(setAttribute);
   }, [element, elements, setAttribute]);
 };
-
-export default useAttributes;
diff --git a/src/utils/hooks/use-breadcrumb.tsx b/src/utils/hooks/use-breadcrumb.tsx
index dcdf87f..f4506d7 100644
--- a/src/utils/hooks/use-breadcrumb.tsx
+++ b/src/utils/hooks/use-breadcrumb.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from 'react-intl';
 import { BreadcrumbList } from 'schema-dts';
-import { BreadcrumbItem } from '../../components/molecules/nav/breadcrumb';
-import { slugify } from '../helpers/strings';
-import useSettings from './use-settings';
+import { BreadcrumbItem } from '../../components';
+import { slugify } from '../helpers';
+import { useSettings } from './use-settings';
 
 export type useBreadcrumbProps = {
   /**
@@ -32,7 +32,7 @@ export type useBreadcrumbReturn = {
  * @param {useBreadcrumbProps} props - An object (the current page title & url).
  * @returns {useBreadcrumbReturn} The breadcrumb items and its JSON schema.
  */
-const useBreadcrumb = ({
+export const useBreadcrumb = ({
   title,
   url,
 }: useBreadcrumbProps): useBreadcrumbReturn => {
@@ -103,5 +103,3 @@ const useBreadcrumb = ({
 
   return { items, schema };
 };
-
-export default useBreadcrumb;
diff --git a/src/utils/hooks/use-comments.tsx b/src/utils/hooks/use-comments.tsx
index 8281a86..6ac3d42 100644
--- a/src/utils/hooks/use-comments.tsx
+++ b/src/utils/hooks/use-comments.tsx
@@ -1,6 +1,6 @@
 import useSWR from 'swr';
-import { getAllComments } from '../../services/graphql/comments';
-import { SingleComment } from '../../types/app';
+import { getAllComments } from '../../services/graphql';
+import { SingleComment } from '../../types';
 
 export type UseCommentsConfig = {
   contentId?: string | number;
@@ -13,13 +13,11 @@ export type UseCommentsConfig = {
  * @param {string | number} contentId - A page/article id.
  * @returns {SingleComment[]|undefined}
  */
-const useComments = ({
+export const useComments = ({
   contentId,
   fallback,
 }: UseCommentsConfig): SingleComment[] | undefined => {
   const { data } = useSWR(contentId ? { contentId } : null, getAllComments);
 
-  return data || fallback;
+  return data ?? fallback;
 };
-
-export default useComments;
diff --git a/src/utils/hooks/use-data-from-api.tsx b/src/utils/hooks/use-data-from-api.tsx
index 7082941..5abcf09 100644
--- a/src/utils/hooks/use-data-from-api.tsx
+++ b/src/utils/hooks/use-data-from-api.tsx
@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
  * @param fetcher - A function to fetch data from API.
  * @returns {T | undefined} The requested data.
  */
-const useDataFromAPI = <T extends unknown>(
+export const useDataFromAPI = <T,>(
   fetcher: () => Promise<T>
 ): T | undefined => {
   const [data, setData] = useState<T>();
@@ -19,5 +19,3 @@ const useDataFromAPI = <T extends unknown>(
 
   return data;
 };
-
-export default useDataFromAPI;
diff --git a/src/utils/hooks/use-github-api.tsx b/src/utils/hooks/use-github-api.tsx
index 56df01f..aa9e3f7 100644
--- a/src/utils/hooks/use-github-api.tsx
+++ b/src/utils/hooks/use-github-api.tsx
@@ -1,5 +1,5 @@
 import useSWR, { Fetcher } from 'swr';
-import { SWRResult } from '../../types/swr';
+import { SWRResult } from '../../types';
 
 export type RepoData = {
   created_at: string;
@@ -16,7 +16,7 @@ const fetcher: Fetcher<RepoData, string> = (...args) =>
  * @param repo - The Github repo (`owner/repo-name`).
  * @returns The repository data.
  */
-const useGithubApi = (repo: string): SWRResult<RepoData> => {
+export const useGithubApi = (repo: string): SWRResult<RepoData> => {
   const apiUrl = repo ? `https://api.github.com/repos/${repo}` : null;
   const { data, error } = useSWR<RepoData>(apiUrl, fetcher);
 
@@ -26,5 +26,3 @@ const useGithubApi = (repo: string): SWRResult<RepoData> => {
     isError: error,
   };
 };
-
-export default useGithubApi;
diff --git a/src/utils/hooks/use-headings-tree.tsx b/src/utils/hooks/use-headings-tree.tsx
index 0dc077e..049ab29 100644
--- a/src/utils/hooks/use-headings-tree.tsx
+++ b/src/utils/hooks/use-headings-tree.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { slugify } from '../helpers/strings';
+import { slugify } from '../helpers';
 import { useMutationObserver } from './use-mutation-observer';
 
 export type Heading = {
@@ -27,7 +27,7 @@ export type Heading = {
  * @param {HTMLElement} wrapper - An HTML element that contains the headings.
  * @returns {Heading[]} The headings tree.
  */
-const useHeadingsTree = (wrapper: HTMLElement): Heading[] => {
+export const useHeadingsTree = (wrapper: HTMLElement): Heading[] => {
   const depths = useMemo(() => ['h2', 'h3', 'h4', 'h5', 'h6'], []);
   const [allHeadings, setAllHeadings] =
     useState<NodeListOf<HTMLHeadingElement>>();
@@ -160,5 +160,3 @@ const useHeadingsTree = (wrapper: HTMLElement): Heading[] => {
 
   return headingsTree;
 };
-
-export default useHeadingsTree;
diff --git a/src/utils/hooks/use-input-autofocus.tsx b/src/utils/hooks/use-input-autofocus.tsx
index c7700e9..d0fcd06 100644
--- a/src/utils/hooks/use-input-autofocus.tsx
+++ b/src/utils/hooks/use-input-autofocus.tsx
@@ -18,7 +18,7 @@ export type UseInputAutofocusProps = {
 /**
  * Set focus on an input with an optional delay.
  */
-const useInputAutofocus = ({
+export const useInputAutofocus = ({
   condition,
   delay = 0,
   ref,
@@ -35,5 +35,3 @@ const useInputAutofocus = ({
     };
   }, [condition, delay, ref]);
 };
-
-export default useInputAutofocus;
diff --git a/src/utils/hooks/use-is-mounted.tsx b/src/utils/hooks/use-is-mounted.tsx
index ca79afb..4d85d45 100644
--- a/src/utils/hooks/use-is-mounted.tsx
+++ b/src/utils/hooks/use-is-mounted.tsx
@@ -6,7 +6,7 @@ import { RefObject, useEffect, useState } from 'react';
  * @param {RefObject<HTMLElement>} ref - A React reference to an HTML element.
  * @returns {boolean} True if the HTML element is mounted.
  */
-const useIsMounted = (ref: RefObject<HTMLElement>) => {
+export const useIsMounted = (ref: RefObject<HTMLElement>): boolean => {
   const [isMounted, setIsMounted] = useState<boolean>(false);
 
   useEffect(() => {
@@ -15,5 +15,3 @@ const useIsMounted = (ref: RefObject<HTMLElement>) => {
 
   return isMounted;
 };
-
-export default useIsMounted;
diff --git a/src/utils/hooks/use-local-storage.tsx b/src/utils/hooks/use-local-storage.tsx
index 1809e07..0f9fbb6 100644
--- a/src/utils/hooks/use-local-storage.tsx
+++ b/src/utils/hooks/use-local-storage.tsx
@@ -13,14 +13,14 @@ export type UseLocalStorageReturn<T> = {
  * @param {T} [fallbackValue] - A fallback value if local storage is empty.
  * @returns {UseLocalStorageReturn<T>} An object with value and setValue.
  */
-const useLocalStorage = <T extends unknown>(
+export const useLocalStorage = <T,>(
   key: string,
   fallbackValue: T
 ): UseLocalStorageReturn<T> => {
   const getInitialValue = () => {
     if (typeof window === 'undefined') return fallbackValue;
     const storedValue = LocalStorage.get<T>(key);
-    return storedValue || fallbackValue;
+    return storedValue ?? fallbackValue;
   };
 
   const [value, setValue] = useState<T>(getInitialValue);
@@ -31,5 +31,3 @@ const useLocalStorage = <T extends unknown>(
 
   return { value, setValue };
 };
-
-export default useLocalStorage;
diff --git a/src/utils/hooks/use-on-click-outside.tsx b/src/utils/hooks/use-on-click-outside.tsx
index 04827b8..b810ddc 100644
--- a/src/utils/hooks/use-on-click-outside.tsx
+++ b/src/utils/hooks/use-on-click-outside.tsx
@@ -9,7 +9,7 @@ export type UseOnClickOutsideCallback = (target: Node) => void;
  * @param {boolean} useCapture - Define event propagation method. Default: true.
  * @returns {RefObject} A React reference object.
  */
-const useOnClickOutside = <T extends HTMLElement>(
+export const useOnClickOutside = <T extends HTMLElement>(
   callback: UseOnClickOutsideCallback,
   useCapture: boolean = true
 ): RefObject<T> => {
@@ -48,5 +48,3 @@ const useOnClickOutside = <T extends HTMLElement>(
 
   return ref;
 };
-
-export default useOnClickOutside;
diff --git a/src/utils/hooks/use-pagination.tsx b/src/utils/hooks/use-pagination.tsx
index f47a674..706e656 100644
--- a/src/utils/hooks/use-pagination.tsx
+++ b/src/utils/hooks/use-pagination.tsx
@@ -1,6 +1,9 @@
 import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
-import { GraphQLEdgesInput } from '../../types/graphql/generics';
-import { EdgesResponse, Search } from '../../types/graphql/queries';
+import {
+  type EdgesResponse,
+  type GraphQLEdgesInput,
+  type Search,
+} from '../../types';
 
 export type UsePaginationProps<T> = {
   /**
@@ -66,7 +69,7 @@ export type UsePaginationReturn<T> = {
  * @param {UsePaginationProps} props - The pagination configuration.
  * @returns {UsePaginationReturn} An object with pagination data and helpers.
  */
-const usePagination = <T extends object>({
+export const usePagination = <T extends object>({
   fallbackData,
   fetcher,
   perPage,
@@ -114,5 +117,3 @@ const usePagination = <T extends object>({
     setSize,
   };
 };
-
-export default usePagination;
diff --git a/src/utils/hooks/use-prism.tsx b/src/utils/hooks/use-prism.tsx
index 05790a3..429808f 100644
--- a/src/utils/hooks/use-prism.tsx
+++ b/src/utils/hooks/use-prism.tsx
@@ -111,7 +111,10 @@ const loadPrismPlugins = async (plugins: PrismPlugin[]) => {
  * @param {UsePrismProps} props - An object of options.
  * @returns {UsePrismReturn} An object of data.
  */
-const usePrism = ({ language, plugins }: UsePrismProps): UsePrismReturn => {
+export const usePrism = ({
+  language,
+  plugins,
+}: UsePrismProps): UsePrismReturn => {
   /**
    * The order matter. Toolbar must be loaded before some other plugins.
    */
@@ -178,5 +181,3 @@ const usePrism = ({ language, plugins }: UsePrismProps): UsePrismReturn => {
     className,
   };
 };
-
-export default usePrism;
diff --git a/src/utils/hooks/use-query-selector-all.tsx b/src/utils/hooks/use-query-selector-all.tsx
index 6ac8a08..a3650ea 100644
--- a/src/utils/hooks/use-query-selector-all.tsx
+++ b/src/utils/hooks/use-query-selector-all.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
  * @param {string} query - A query.
  * @returns {NodeListOf<HTMLElementTagNameMap[T]|undefined>} - The node list.
  */
-const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
+export const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
   query: string
 ): NodeListOf<HTMLElementTagNameMap[T]> | undefined => {
   const [elements, setElements] =
@@ -20,5 +20,3 @@ const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
 
   return elements;
 };
-
-export default useQuerySelectorAll;
diff --git a/src/utils/hooks/use-reading-time.tsx b/src/utils/hooks/use-reading-time.tsx
index fb54135..3a812f6 100644
--- a/src/utils/hooks/use-reading-time.tsx
+++ b/src/utils/hooks/use-reading-time.tsx
@@ -6,7 +6,7 @@ import { useIntl } from 'react-intl';
  * @param {number} wordsCount - The number of words.
  * @returns {string} The estimated reading time.
  */
-const useReadingTime = (
+export const useReadingTime = (
   wordsCount: number,
   onlyMinutes: boolean = false
 ): string => {
@@ -54,5 +54,3 @@ const useReadingTime = (
     );
   }
 };
-
-export default useReadingTime;
diff --git a/src/utils/hooks/use-redirection.tsx b/src/utils/hooks/use-redirection.tsx
index 9eb26c2..5a677e2 100644
--- a/src/utils/hooks/use-redirection.tsx
+++ b/src/utils/hooks/use-redirection.tsx
@@ -22,12 +22,10 @@ export type UseRedirectionProps = {
  *
  * @param {UseRedirectionProps} props - The redirection parameters.
  */
-const useRedirection = ({ query, redirectTo }: UseRedirectionProps) => {
+export const useRedirection = ({ query, redirectTo }: UseRedirectionProps) => {
   const router = useRouter();
 
   useEffect(() => {
     if (router.query[query.param] === query.value) router.push(redirectTo);
   }, [query, redirectTo, router]);
 };
-
-export default useRedirection;
diff --git a/src/utils/hooks/use-route-change.tsx b/src/utils/hooks/use-route-change.tsx
index 82e01a1..2eff6e9 100644
--- a/src/utils/hooks/use-route-change.tsx
+++ b/src/utils/hooks/use-route-change.tsx
@@ -1,12 +1,10 @@
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
-const useRouteChange = (callback: () => void) => {
+export const useRouteChange = (callback: () => void) => {
   const { events } = useRouter();
 
   useEffect(() => {
     events.on('routeChangeStart', callback);
   }, [events, callback]);
 };
-
-export default useRouteChange;
diff --git a/src/utils/hooks/use-scroll-position.tsx b/src/utils/hooks/use-scroll-position.tsx
index 47cfdd0..c6ae9fd 100644
--- a/src/utils/hooks/use-scroll-position.tsx
+++ b/src/utils/hooks/use-scroll-position.tsx
@@ -5,11 +5,9 @@ import { useEffect } from 'react';
  *
  * @param scrollHandler - A callback function.
  */
-const useScrollPosition = (scrollHandler: () => void) => {
+export const useScrollPosition = (scrollHandler: () => void) => {
   useEffect(() => {
     window.addEventListener('scroll', scrollHandler);
     return () => window.removeEventListener('scroll', scrollHandler);
   }, [scrollHandler]);
 };
-
-export default useScrollPosition;
diff --git a/src/utils/hooks/use-settings.tsx b/src/utils/hooks/use-settings.tsx
index edb5b5e..968930d 100644
--- a/src/utils/hooks/use-settings.tsx
+++ b/src/utils/hooks/use-settings.tsx
@@ -67,11 +67,11 @@ export type UseSettingsReturn = {
  *
  * @returns {UseSettingsReturn} - An object describing settings.
  */
-const useSettings = (): UseSettingsReturn => {
+export const useSettings = (): UseSettingsReturn => {
   const { baseline, copyright, email, locales, name, postsPerPage, url } =
     settings;
   const router = useRouter();
-  const locale = router.locale || locales.defaultLocale;
+  const locale = router.locale ?? locales.defaultLocale;
 
   return {
     blog: {
@@ -93,5 +93,3 @@ const useSettings = (): UseSettingsReturn => {
     },
   };
 };
-
-export default useSettings;
diff --git a/src/utils/hooks/use-state-change.tsx b/src/utils/hooks/use-state-change.tsx
index 063fb8e..59ae0df 100644
--- a/src/utils/hooks/use-state-change.tsx
+++ b/src/utils/hooks/use-state-change.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
  * @param initial - The initial value.
  * @returns The state and a setter.
  */
-const useStateChange = <T,>(initial: T) => {
+export const useStateChange = <T,>(initial: T) => {
   const [state, setState] = useState<T>(initial);
 
   useEffect(() => {
@@ -15,5 +15,3 @@ const useStateChange = <T,>(initial: T) => {
 
   return [state, setState] as const;
 };
-
-export default useStateChange;
diff --git a/src/utils/hooks/use-styles.tsx b/src/utils/hooks/use-styles.tsx
index d47e9fb..a70087b 100644
--- a/src/utils/hooks/use-styles.tsx
+++ b/src/utils/hooks/use-styles.tsx
@@ -20,10 +20,8 @@ export type UseStylesProps = {
  *
  * @param {UseStylesProps} props - An object with property, styles and target.
  */
-const useStyles = ({ property, styles, target }: UseStylesProps) => {
+export const useStyles = ({ property, styles, target }: UseStylesProps) => {
   useEffect(() => {
     if (target.current) target.current.style.setProperty(property, styles);
   }, [property, styles, target]);
 };
-
-export default useStyles;
diff --git a/src/utils/hooks/use-update-ackee-options.tsx b/src/utils/hooks/use-update-ackee-options.tsx
index 1901588..f6e5c86 100644
--- a/src/utils/hooks/use-update-ackee-options.tsx
+++ b/src/utils/hooks/use-update-ackee-options.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useAckeeTracker } from '../providers/ackee';
+import { useAckeeTracker } from '../providers';
 
 export type AckeeOptions = 'full' | 'partial';
 
@@ -8,12 +8,10 @@ export type AckeeOptions = 'full' | 'partial';
  *
  * @param {AckeeOptions} value - Either `full` or `partial`.
  */
-const useUpdateAckeeOptions = (value: AckeeOptions) => {
+export const useUpdateAckeeOptions = (value: AckeeOptions) => {
   const { setDetailed } = useAckeeTracker();
 
   useEffect(() => {
     setDetailed(value === 'full');
   }, [value, setDetailed]);
 };
-
-export default useUpdateAckeeOptions;
diff --git a/src/utils/providers/index.ts b/src/utils/providers/index.ts
new file mode 100644
index 0000000..43641a1
--- /dev/null
+++ b/src/utils/providers/index.ts
@@ -0,0 +1,2 @@
+export * from './ackee';
+export * from './prism-theme';
diff --git a/src/utils/providers/prism-theme.tsx b/src/utils/providers/prism-theme.tsx
index 6ecbb1d..c063bd5 100644
--- a/src/utils/providers/prism-theme.tsx
+++ b/src/utils/providers/prism-theme.tsx
@@ -7,9 +7,7 @@ import {
   useEffect,
   useState,
 } from 'react';
-import useAttributes from '../hooks/use-attributes';
-import useLocalStorage from '../hooks/use-local-storage';
-import useQuerySelectorAll from '../hooks/use-query-selector-all';
+import { useAttributes, useLocalStorage, useQuerySelectorAll } from '../hooks';
 
 export type PrismTheme = 'dark' | 'light' | 'system';
 export type ResolvedPrismTheme = Exclude<PrismTheme, 'system'>;
author	Armand Philippot <git@armandphilippot.com>	2023-09-20 16:38:54 +0200
committer	Armand Philippot <git@armandphilippot.com>	2023-09-20 16:38:54 +0200
commit	f861e6a269ba9f62700776d3cd13b644a9e836d4 (patch)
tree	a5a107e7a6e4ff8b4261fe04349357bc00b783ee /src
parent	03331c44276ec56e9f235e4d5ee75030455a753f (diff)