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.

1 files changed, 5 insertions, 7 deletions

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;