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.

7 files changed, 32 insertions, 31 deletions

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;