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

Next expect a default export for pages so only those components should
use default exports. Everything else should use named exports to
reduce the number of import statements.
---
 .../molecules/buttons/back-to-top.stories.tsx      |  2 +-
 .../molecules/buttons/back-to-top.test.tsx         |  2 +-
 src/components/molecules/buttons/back-to-top.tsx   |  9 ++-----
 .../molecules/buttons/heading-button.stories.tsx   |  2 +-
 .../molecules/buttons/heading-button.test.tsx      |  2 +-
 .../molecules/buttons/heading-button.tsx           |  9 +++----
 .../molecules/buttons/help-button.stories.tsx      |  2 +-
 .../molecules/buttons/help-button.test.tsx         |  2 +-
 src/components/molecules/buttons/help-button.tsx   | 16 ++++++------
 src/components/molecules/buttons/index.ts          |  3 +++
 .../molecules/forms/ackee-toggle.stories.tsx       | 10 ++++----
 .../molecules/forms/ackee-toggle.test.tsx          |  2 +-
 src/components/molecules/forms/ackee-toggle.tsx    | 20 +++++++--------
 .../molecules/forms/fieldset.stories.tsx           |  2 +-
 src/components/molecules/forms/fieldset.test.tsx   |  2 +-
 src/components/molecules/forms/fieldset.tsx        | 23 ++++++-----------
 .../molecules/forms/flipping-label.stories.tsx     |  4 +--
 .../molecules/forms/flipping-label.test.tsx        |  2 +-
 src/components/molecules/forms/flipping-label.tsx  |  9 +++----
 src/components/molecules/forms/index.ts            | 10 ++++++++
 .../forms/labelled-boolean-field.stories.tsx       |  2 +-
 .../forms/labelled-boolean-field.test.tsx          |  2 +-
 .../molecules/forms/labelled-boolean-field.tsx     | 29 ++++++++--------------
 .../molecules/forms/labelled-field.stories.tsx     |  2 +-
 .../molecules/forms/labelled-field.test.tsx        |  2 +-
 src/components/molecules/forms/labelled-field.tsx  | 17 ++++++-------
 .../molecules/forms/labelled-select.stories.tsx    |  2 +-
 .../molecules/forms/labelled-select.test.tsx       |  2 +-
 src/components/molecules/forms/labelled-select.tsx | 13 ++++------
 .../molecules/forms/motion-toggle.stories.tsx      | 10 ++++----
 .../molecules/forms/motion-toggle.test.tsx         |  2 +-
 src/components/molecules/forms/motion-toggle.tsx   | 12 ++++-----
 .../molecules/forms/prism-theme-toggle.stories.tsx |  2 +-
 .../molecules/forms/prism-theme-toggle.test.tsx    |  2 +-
 .../molecules/forms/prism-theme-toggle.tsx         | 12 ++++-----
 .../molecules/forms/radio-group.stories.tsx        |  2 +-
 .../molecules/forms/radio-group.test.tsx           |  2 +-
 src/components/molecules/forms/radio-group.tsx     | 18 +++++++-------
 .../molecules/forms/theme-toggle.stories.tsx       |  2 +-
 .../molecules/forms/theme-toggle.test.tsx          |  2 +-
 src/components/molecules/forms/theme-toggle.tsx    | 12 ++++-----
 .../molecules/images/flipping-logo.stories.tsx     |  2 +-
 .../molecules/images/flipping-logo.test.tsx        |  2 +-
 src/components/molecules/images/flipping-logo.tsx  | 22 ++++++++--------
 src/components/molecules/images/index.ts           |  2 ++
 .../molecules/images/responsive-image.stories.tsx  |  2 +-
 .../molecules/images/responsive-image.test.tsx     |  2 +-
 .../molecules/images/responsive-image.tsx          | 16 +++++-------
 src/components/molecules/index.ts                  |  6 +++++
 .../molecules/layout/branding.stories.tsx          |  2 +-
 src/components/molecules/layout/branding.test.tsx  |  2 +-
 src/components/molecules/layout/branding.tsx       | 18 ++++++--------
 src/components/molecules/layout/card.stories.tsx   |  2 +-
 src/components/molecules/layout/card.test.tsx      |  2 +-
 src/components/molecules/layout/card.tsx           | 15 +++++------
 src/components/molecules/layout/code.stories.tsx   | 10 +++-----
 src/components/molecules/layout/code.test.tsx      |  2 +-
 src/components/molecules/layout/code.tsx           | 15 ++++++-----
 .../molecules/layout/columns.stories.tsx           |  4 +--
 src/components/molecules/layout/columns.test.tsx   |  4 +--
 src/components/molecules/layout/columns.tsx        | 15 +++--------
 src/components/molecules/layout/index.ts           |  8 ++++++
 src/components/molecules/layout/meta.stories.tsx   |  4 +--
 src/components/molecules/layout/meta.test.tsx      |  4 +--
 src/components/molecules/layout/meta.tsx           | 16 +++++-------
 .../molecules/layout/page-footer.stories.tsx       |  2 +-
 .../molecules/layout/page-footer.test.tsx          |  2 +-
 src/components/molecules/layout/page-footer.tsx    |  6 ++---
 .../molecules/layout/page-header.stories.tsx       |  2 +-
 .../molecules/layout/page-header.test.tsx          |  2 +-
 src/components/molecules/layout/page-header.tsx    |  8 +++---
 src/components/molecules/layout/widget.stories.tsx |  2 +-
 src/components/molecules/layout/widget.test.tsx    |  2 +-
 src/components/molecules/layout/widget.tsx         | 13 +++-------
 src/components/molecules/modals/index.ts           |  2 ++
 src/components/molecules/modals/modal.stories.tsx  |  2 +-
 src/components/molecules/modals/modal.test.tsx     |  2 +-
 src/components/molecules/modals/modal.tsx          | 27 ++++++++++++--------
 .../molecules/modals/tooltip.stories.tsx           |  2 +-
 src/components/molecules/modals/tooltip.test.tsx   |  2 +-
 src/components/molecules/modals/tooltip.tsx        | 16 ++++++------
 .../molecules/nav/breadcrumb.stories.tsx           |  2 +-
 src/components/molecules/nav/breadcrumb.test.tsx   |  2 +-
 src/components/molecules/nav/breadcrumb.tsx        |  8 +++---
 src/components/molecules/nav/index.ts              |  3 +++
 src/components/molecules/nav/nav.stories.tsx       | 13 ++++------
 src/components/molecules/nav/nav.test.tsx          |  5 ++--
 src/components/molecules/nav/nav.tsx               |  9 +++----
 .../molecules/nav/pagination.stories.tsx           | 10 ++++----
 src/components/molecules/nav/pagination.test.tsx   |  2 +-
 src/components/molecules/nav/pagination.tsx        |  8 +++---
 91 files changed, 288 insertions(+), 325 deletions(-)
 create mode 100644 src/components/molecules/buttons/index.ts
 create mode 100644 src/components/molecules/forms/index.ts
 create mode 100644 src/components/molecules/images/index.ts
 create mode 100644 src/components/molecules/index.ts
 create mode 100644 src/components/molecules/layout/index.ts
 create mode 100644 src/components/molecules/modals/index.ts
 create mode 100644 src/components/molecules/nav/index.ts

(limited to 'src/components/molecules')

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;
-- 
cgit v1.2.3