refactor(components): make form components compliant with Eslint rules

54 files changed, 250 insertions, 224 deletions

diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx
index cb017da..60dd352 100644
--- a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx
+++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useState } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useCallback, useState } from 'react';
 import { BooleanField } from './boolean-field';
 
 /**
@@ -138,15 +138,12 @@ const Template: ComponentStory<typeof BooleanField> = ({
   ...args
 }) => {
   const [isChecked, setIsChecked] = useState(checked);
+  const handleChange = useCallback(() => {
+    setIsChecked((prev) => !prev);
+  }, []);
 
   return (
-    <BooleanField
-      isChecked={isChecked}
-      onChange={() => {
-        setIsChecked(!isChecked);
-      }}
-      {...args}
-    />
+    <BooleanField isChecked={isChecked} onChange={handleChange} {...args} />
   );
 };
 
diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx
index 1c7fe36..82c42d9 100644
--- a/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx
+++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { BooleanField } from './boolean-field';
 
 const handleChange = () => {
@@ -19,7 +19,7 @@ describe('boolean field', () => {
         value="checkbox"
       />
     );
-    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('checkbox')).toBeInTheDocument();
   });
 
   it('renders a radio button', () => {
@@ -32,6 +32,6 @@ describe('boolean field', () => {
         value="checkbox"
       />
     );
-    expect(screen.getByRole('radio')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('radio')).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
index 7985c0b..5476cf5 100644
--- a/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
+++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
@@ -1,4 +1,4 @@
-import { FC, InputHTMLAttributes } from 'react';
+import type { FC, InputHTMLAttributes } from 'react';
 import styles from './boolean-field.module.scss';
 
 export type BooleanFieldProps = Omit<
diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx
index 59f9a4b..75fff77 100644
--- a/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx
+++ b/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Checkbox } from './checkbox';
 
 const doNothing = () => {
@@ -16,7 +16,7 @@ describe('Checkbox', () => {
         value="checkbox"
       />
     );
-    expect(screen.getByRole('checkbox')).not.toBeChecked();
+    expect(rtlScreen.getByRole('checkbox')).not.toBeChecked();
   });
 
   it('renders a checked checkbox', () => {
@@ -29,6 +29,6 @@ describe('Checkbox', () => {
         value="checkbox"
       />
     );
-    expect(screen.getByRole('checkbox')).toBeChecked();
+    expect(rtlScreen.getByRole('checkbox')).toBeChecked();
   });
 });
diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.tsx
index 2ac3809..9c175b7 100644
--- a/src/components/atoms/forms/fields/checkbox/checkbox.tsx
+++ b/src/components/atoms/forms/fields/checkbox/checkbox.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { BooleanField, BooleanFieldProps } from '../boolean-field';
+import type { FC } from 'react';
+import { BooleanField, type BooleanFieldProps } from '../boolean-field';
 
 export type CheckboxProps = Omit<BooleanFieldProps, 'type'>;
 
@@ -9,5 +9,6 @@ export type CheckboxProps = Omit<BooleanFieldProps, 'type'>;
  * Render a checkbox input type.
  */
 export const Checkbox: FC<CheckboxProps> = (props) => (
+  // eslint-disable-next-line react/jsx-no-literals -- Type allowed
   <BooleanField {...props} type="checkbox" />
 );
diff --git a/src/components/atoms/forms/fields/fields.module.scss b/src/components/atoms/forms/fields/fields.module.scss
index f09117d..363c7ee 100644
--- a/src/components/atoms/forms/fields/fields.module.scss
+++ b/src/components/atoms/forms/fields/fields.module.scss
@@ -2,7 +2,6 @@
 @use "../../../../styles/abstracts/mixins" as mix;
 
 .field {
-  width: 100%;
   padding: var(--spacing-2xs) var(--spacing-xs);
   background: var(--color-bg-tertiary);
   border: fun.convert-px(2) solid var(--color-border);
diff --git a/src/components/atoms/forms/fields/input/input.stories.tsx b/src/components/atoms/forms/fields/input/input.stories.tsx
index 35657f8..4744bc5 100644
--- a/src/components/atoms/forms/fields/input/input.stories.tsx
+++ b/src/components/atoms/forms/fields/input/input.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ChangeEvent, useCallback, useState } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type ChangeEvent, useCallback, useState } from 'react';
 import { Input } from './input';
 
 /**
@@ -187,50 +187,50 @@ const Template: ComponentStory<typeof Input> = ({
 };
 
 /**
- * Input Story - DateTime
+ * Input Story - DateTimeField
  */
-export const DateTime = Template.bind({});
-DateTime.args = {
+export const DateTimeField = Template.bind({});
+DateTimeField.args = {
   id: 'field-storybook',
   name: 'field-storybook',
   type: 'datetime-local',
 };
 
 /**
- * Input Story - Email
+ * Input Story - EmailField
  */
-export const Email = Template.bind({});
-Email.args = {
+export const EmailField = Template.bind({});
+EmailField.args = {
   id: 'field-storybook',
   name: 'field-storybook',
   type: 'email',
 };
 
 /**
- * Input Story - Numeric
+ * Input Story - NumericField
  */
-export const Numeric = Template.bind({});
-Numeric.args = {
+export const NumericField = Template.bind({});
+NumericField.args = {
   id: 'field-storybook',
   name: 'field-storybook',
   type: 'number',
 };
 
 /**
- * Input Story - Text
+ * Input Story - TextField
  */
-export const Text = Template.bind({});
-Text.args = {
+export const TextField = Template.bind({});
+TextField.args = {
   id: 'field-storybook',
   name: 'field-storybook',
   type: 'text',
 };
 
 /**
- * Input Story - Time
+ * Input Story - TimeField
  */
-export const Time = Template.bind({});
-Time.args = {
+export const TimeField = Template.bind({});
+TimeField.args = {
   id: 'field-storybook',
   name: 'field-storybook',
   type: 'time',
diff --git a/src/components/atoms/forms/fields/input/input.test.tsx b/src/components/atoms/forms/fields/input/input.test.tsx
index a5c4898..e97237d 100644
--- a/src/components/atoms/forms/fields/input/input.test.tsx
+++ b/src/components/atoms/forms/fields/input/input.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Input } from './input';
 
 const doNothing = () => {
@@ -17,7 +17,7 @@ describe('Input', () => {
         value=""
       />
     );
-    expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text');
+    expect(rtlScreen.getByRole('textbox')).toHaveAttribute('type', 'text');
   });
 
   it('renders a search input', () => {
@@ -30,6 +30,6 @@ describe('Input', () => {
         value=""
       />
     );
-    expect(screen.getByRole('searchbox')).toHaveAttribute('type', 'search');
+    expect(rtlScreen.getByRole('searchbox')).toHaveAttribute('type', 'search');
   });
 });
diff --git a/src/components/atoms/forms/fields/input/input.tsx b/src/components/atoms/forms/fields/input/input.tsx
index 0f0736c..c47534f 100644
--- a/src/components/atoms/forms/fields/input/input.tsx
+++ b/src/components/atoms/forms/fields/input/input.tsx
@@ -8,7 +8,7 @@ import styles from '../fields.module.scss';
 
 export type InputProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
-  'disabled' | 'hidden' | 'readonly' | 'required' | 'type'
+  'disabled' | 'readonly' | 'required' | 'type'
 > &
   Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name'>> & {
     /**
@@ -18,12 +18,6 @@ export type InputProps = Omit<
      */
     isDisabled?: boolean;
     /**
-     * Should the field be hidden?
-     *
-     * @default false
-     */
-    isHidden?: boolean;
-    /**
      * Should the field be readonly?
      *
      * @default false
@@ -45,7 +39,6 @@ const InputWithRef = (
   {
     className = '',
     isDisabled = false,
-    isHidden = false,
     isReadOnly = false,
     isRequired = false,
     ...props
diff --git a/src/components/atoms/forms/fields/radio/radio.test.tsx b/src/components/atoms/forms/fields/radio/radio.test.tsx
index ba8d68f..55eda9d 100644
--- a/src/components/atoms/forms/fields/radio/radio.test.tsx
+++ b/src/components/atoms/forms/fields/radio/radio.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Radio } from './radio';
 
 const doNothing = () => {
@@ -11,7 +11,7 @@ describe('Radio', () => {
     render(
       <Radio id="radio" name="radio" onChange={doNothing} value="radio" />
     );
-    expect(screen.getByRole('radio')).not.toBeChecked();
+    expect(rtlScreen.getByRole('radio')).not.toBeChecked();
   });
 
   it('renders a checked radio', () => {
@@ -24,6 +24,6 @@ describe('Radio', () => {
         value="radio"
       />
     );
-    expect(screen.getByRole('radio')).toBeChecked();
+    expect(rtlScreen.getByRole('radio')).toBeChecked();
   });
 });
diff --git a/src/components/atoms/forms/fields/radio/radio.tsx b/src/components/atoms/forms/fields/radio/radio.tsx
index 6430b4a..5a518c7 100644
--- a/src/components/atoms/forms/fields/radio/radio.tsx
+++ b/src/components/atoms/forms/fields/radio/radio.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { BooleanField, BooleanFieldProps } from '../boolean-field';
+import type { FC } from 'react';
+import { BooleanField, type BooleanFieldProps } from '../boolean-field';
 
 export type RadioProps = Omit<BooleanFieldProps, 'type'>;
 
@@ -9,5 +9,6 @@ export type RadioProps = Omit<BooleanFieldProps, 'type'>;
  * Render a radio input type.
  */
 export const Radio: FC<RadioProps> = (props) => (
+  // eslint-disable-next-line react/jsx-no-literals -- Type allowed
   <BooleanField {...props} type="radio" />
 );
diff --git a/src/components/atoms/forms/fields/select/select.stories.tsx b/src/components/atoms/forms/fields/select/select.stories.tsx
index c9e02d2..fddf354 100644
--- a/src/components/atoms/forms/fields/select/select.stories.tsx
+++ b/src/components/atoms/forms/fields/select/select.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ChangeEvent, useCallback, useState } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type ChangeEvent, useCallback, useState } from 'react';
 import { Select as SelectComponent } from './select';
 
 const selectOptions = [
diff --git a/src/components/atoms/forms/fields/select/select.test.tsx b/src/components/atoms/forms/fields/select/select.test.tsx
index ae76c45..821a9aa 100644
--- a/src/components/atoms/forms/fields/select/select.test.tsx
+++ b/src/components/atoms/forms/fields/select/select.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Select } from './select';
 
 const doNothing = () => {
@@ -25,7 +25,7 @@ describe('Select', () => {
       />
     );
 
-    expect(screen.getByRole('combobox')).toHaveValue(selected.value);
+    expect(rtlScreen.getByRole('combobox')).toHaveValue(selected.value);
   });
 
   it('renders the select options', () => {
@@ -39,6 +39,6 @@ describe('Select', () => {
       />
     );
 
-    expect(screen.getAllByRole('option')).toHaveLength(selectOptions.length);
+    expect(rtlScreen.getAllByRole('option')).toHaveLength(selectOptions.length);
   });
 });
diff --git a/src/components/atoms/forms/fields/select/select.tsx b/src/components/atoms/forms/fields/select/select.tsx
index 887dacc..7399727 100644
--- a/src/components/atoms/forms/fields/select/select.tsx
+++ b/src/components/atoms/forms/fields/select/select.tsx
@@ -1,4 +1,4 @@
-import { FC, SelectHTMLAttributes } from 'react';
+import type { FC, SelectHTMLAttributes } from 'react';
 import styles from '../fields.module.scss';
 
 export type SelectOptions = {
@@ -18,7 +18,7 @@ export type SelectOptions = {
 
 export type SelectProps = Omit<
   SelectHTMLAttributes<HTMLSelectElement>,
-  'disabled' | 'hidden' | 'required'
+  'disabled' | 'required'
 > & {
   /**
    * Should the select field be disabled?
@@ -27,12 +27,6 @@ export type SelectProps = Omit<
    */
   isDisabled?: boolean;
   /**
-   * Should the select field be hidden?
-   *
-   * @default false
-   */
-  isHidden?: boolean;
-  /**
    * Is the select field required?
    *
    * @default false
@@ -52,7 +46,6 @@ export type SelectProps = Omit<
 export const Select: FC<SelectProps> = ({
   className = '',
   isDisabled = false,
-  isHidden = false,
   isRequired = false,
   options,
   ...props
diff --git a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
index 2e77cb7..21214bd 100644
--- a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
+++ b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ChangeEvent, useCallback, useState } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type ChangeEvent, useCallback, useState } from 'react';
 import { TextArea as TextAreaComponent } from './text-area';
 
 /**
diff --git a/src/components/atoms/forms/fields/text-area/text-area.test.tsx b/src/components/atoms/forms/fields/text-area/text-area.test.tsx
index 0079440..923f494 100644
--- a/src/components/atoms/forms/fields/text-area/text-area.test.tsx
+++ b/src/components/atoms/forms/fields/text-area/text-area.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { TextArea } from './text-area';
 
 const doNothing = () => {
@@ -16,6 +16,6 @@ describe('TextArea', () => {
         value=""
       />
     );
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('textbox')).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/forms/fields/text-area/text-area.tsx b/src/components/atoms/forms/fields/text-area/text-area.tsx
index bd99d7d..adb12eb 100644
--- a/src/components/atoms/forms/fields/text-area/text-area.tsx
+++ b/src/components/atoms/forms/fields/text-area/text-area.tsx
@@ -19,12 +19,6 @@ export type TextAreaProps = AllowedTextAreaProps & {
    */
   isDisabled?: boolean;
   /**
-   * Should the field be hidden?
-   *
-   * @default false
-   */
-  isHidden?: boolean;
-  /**
    * Should the field be readonly?
    *
    * @default false
@@ -42,7 +36,6 @@ const TextAreaWithRef = (
   {
     className = '',
     isDisabled = false,
-    isHidden = false,
     isReadOnly = false,
     isRequired = false,
     ...props
diff --git a/src/components/atoms/forms/fieldset/fieldset.stories.tsx b/src/components/atoms/forms/fieldset/fieldset.stories.tsx
index faf355f..a7d665d 100644
--- a/src/components/atoms/forms/fieldset/fieldset.stories.tsx
+++ b/src/components/atoms/forms/fieldset/fieldset.stories.tsx
@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Fieldset as FieldsetComponent } from './fieldset';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Input } from '../fields';
 import { Legend } from '../legend';
+import { Fieldset as FieldsetComponent } from './fieldset';
 
 /**
  * Fieldset - Storybook Meta
@@ -31,28 +31,26 @@ export default {
   },
 } as ComponentMeta<typeof FieldsetComponent>;
 
-const Template: ComponentStory<typeof FieldsetComponent> = (args) => {
-  return (
-    <FieldsetComponent {...args}>
-      <div>
-        <Input
-          aria-label="A field example"
-          id="field1"
-          name="field1"
-          type="text"
-        />
-      </div>
-      <div>
-        <Input
-          aria-label="Another field example"
-          id="field2"
-          name="field2"
-          type="text"
-        />
-      </div>
-    </FieldsetComponent>
-  );
-};
+const Template: ComponentStory<typeof FieldsetComponent> = (args) => (
+  <FieldsetComponent {...args}>
+    <div>
+      <Input
+        aria-label="A field example"
+        id="field1"
+        name="field1"
+        type="text"
+      />
+    </div>
+    <div>
+      <Input
+        aria-label="Another field example"
+        id="field2"
+        name="field2"
+        type="text"
+      />
+    </div>
+  </FieldsetComponent>
+);
 
 /**
  * Fieldset Story
diff --git a/src/components/atoms/forms/fieldset/fieldset.test.tsx b/src/components/atoms/forms/fieldset/fieldset.test.tsx
index 2554d59..86acc8b 100644
--- a/src/components/atoms/forms/fieldset/fieldset.test.tsx
+++ b/src/components/atoms/forms/fieldset/fieldset.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Input } from '../fields';
 import { Fieldset } from './fieldset';
 
@@ -15,8 +15,8 @@ describe('fieldset', () => {
         />
       </Fieldset>
     );
-    expect(screen.getByRole('group')).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).not.toBeDisabled();
+    expect(rtlScreen.getByRole('group')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('textbox')).not.toBeDisabled();
   });
 
   it('renders a disabled fieldset', () => {
@@ -30,7 +30,7 @@ describe('fieldset', () => {
         />
       </Fieldset>
     );
-    expect(screen.getByRole('group')).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toBeDisabled();
+    expect(rtlScreen.getByRole('group')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('textbox')).toBeDisabled();
   });
 });
diff --git a/src/components/atoms/forms/fieldset/fieldset.tsx b/src/components/atoms/forms/fieldset/fieldset.tsx
index eb42961..85e7b3f 100644
--- a/src/components/atoms/forms/fieldset/fieldset.tsx
+++ b/src/components/atoms/forms/fieldset/fieldset.tsx
@@ -1,11 +1,11 @@
 import {
   forwardRef,
   type FieldsetHTMLAttributes,
-  ForwardRefRenderFunction,
-  ReactElement,
+  type ForwardRefRenderFunction,
+  type ReactElement,
 } from 'react';
+import type { LegendProps } from '../legend';
 import styles from './fieldset.module.scss';
-import { LegendProps } from '../legend';
 
 export type FieldsetProps = Omit<
   FieldsetHTMLAttributes<HTMLFieldSetElement>,
diff --git a/src/components/atoms/forms/form/form.test.tsx b/src/components/atoms/forms/form/form.test.tsx
index 217b7f6..90cac5f 100644
--- a/src/components/atoms/forms/form/form.test.tsx
+++ b/src/components/atoms/forms/form/form.test.tsx
@@ -1,14 +1,18 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Form } from './form';
 
+const doNothing = () => {
+  // Do nothing
+};
+
 describe('Form', () => {
   it('renders a form', () => {
     render(
-      <Form aria-label="A form name" onSubmit={() => null}>
+      <Form aria-label="A form name" onSubmit={doNothing}>
         Fields
       </Form>
     );
-    expect(screen.getByRole('form')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('form')).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/forms/label/label.stories.tsx b/src/components/atoms/forms/label/label.stories.tsx
index 8460c45..195be97 100644
--- a/src/components/atoms/forms/label/label.stories.tsx
+++ b/src/components/atoms/forms/label/label.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Label as LabelComponent } from './label';
 
 /**
diff --git a/src/components/atoms/forms/label/label.test.tsx b/src/components/atoms/forms/label/label.test.tsx
index 710c80c..0c25379 100644
--- a/src/components/atoms/forms/label/label.test.tsx
+++ b/src/components/atoms/forms/label/label.test.tsx
@@ -1,10 +1,10 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Label } from './label';
 
 describe('Label', () => {
   it('renders a field label', () => {
     render(<Label>A label</Label>);
-    expect(screen.getByText('A label')).toBeInTheDocument();
+    expect(rtlScreen.getByText('A label')).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/forms/label/label.tsx b/src/components/atoms/forms/label/label.tsx
index 5087325..6692205 100644
--- a/src/components/atoms/forms/label/label.tsx
+++ b/src/components/atoms/forms/label/label.tsx
@@ -1,4 +1,4 @@
-import { FC, LabelHTMLAttributes, ReactNode } from 'react';
+import type { FC, LabelHTMLAttributes, ReactNode } from 'react';
 import styles from './label.module.scss';
 
 export type LabelSize = 'md' | 'sm';
diff --git a/src/components/atoms/forms/legend/legend.stories.tsx b/src/components/atoms/forms/legend/legend.stories.tsx
index cda7f09..b23d889 100644
--- a/src/components/atoms/forms/legend/legend.stories.tsx
+++ b/src/components/atoms/forms/legend/legend.stories.tsx
@@ -1,6 +1,6 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Legend as LegendComponent } from './legend';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Fieldset } from '../fieldset';
+import { Legend as LegendComponent } from './legend';
 
 /**
  * Legend - Storybook Meta
diff --git a/src/components/atoms/forms/legend/legend.test.tsx b/src/components/atoms/forms/legend/legend.test.tsx
index fc759f7..088e8ad 100644
--- a/src/components/atoms/forms/legend/legend.test.tsx
+++ b/src/components/atoms/forms/legend/legend.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Fieldset } from '../fieldset';
 import { Legend } from './legend';
 
@@ -13,6 +13,6 @@ describe('legend', () => {
       </Fieldset>
     );
 
-    expect(screen.getByRole('group')).toHaveTextContent(body);
+    expect(rtlScreen.getByRole('group')).toHaveTextContent(body);
   });
 });
diff --git a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
index 1f29830..1d1af70 100644
--- a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
+++ b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ChangeEvent, useState } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type ChangeEvent, useState, useCallback } from 'react';
 import { Input, Label } from '../../../atoms';
 import { LabelledField } from './labelled-field';
 
@@ -77,9 +77,9 @@ export default {
 const Template: ComponentStory<typeof LabelledField> = ({ ...args }) => {
   const id = 'sunt';
   const [value, setValue] = useState<string>('');
-  const updateValue = (e: ChangeEvent<HTMLInputElement>) => {
+  const updateValue = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
-  };
+  }, []);
 
   return (
     <LabelledField
diff --git a/src/components/molecules/forms/labelled-field/labelled-field.test.tsx b/src/components/molecules/forms/labelled-field/labelled-field.test.tsx
index 8bc7c39..0a91ccd 100644
--- a/src/components/molecules/forms/labelled-field/labelled-field.test.tsx
+++ b/src/components/molecules/forms/labelled-field/labelled-field.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Input, Label } from '../../../atoms';
 import { LabelledField } from './labelled-field';
 
@@ -27,7 +27,7 @@ describe('LabelledField', () => {
         label={<Label htmlFor={id}>{label}</Label>}
       />
     );
-    expect(screen.getByLabelText(label)).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toHaveValue(value);
+    expect(rtlScreen.getByLabelText(label)).toBeInTheDocument();
+    expect(rtlScreen.getByRole('textbox')).toHaveValue(value);
   });
 });
diff --git a/src/components/molecules/forms/labelled-field/labelled-field.tsx b/src/components/molecules/forms/labelled-field/labelled-field.tsx
index af492b3..ea0bd67 100644
--- a/src/components/molecules/forms/labelled-field/labelled-field.tsx
+++ b/src/components/molecules/forms/labelled-field/labelled-field.tsx
@@ -1,5 +1,10 @@
-import { FC, HTMLAttributes, ReactElement } from 'react';
 import {
+  forwardRef,
+  type HTMLAttributes,
+  type ReactElement,
+  type ForwardRefRenderFunction,
+} from 'react';
+import type {
   CheckboxProps,
   InputProps,
   LabelProps,
@@ -37,27 +42,35 @@ export type LabelledFieldProps = Omit<
   label: ReactElement<LabelProps>;
 };
 
-/**
- * LabelledField component
- *
- * Render a field tied to a label.
- */
-export const LabelledField: FC<LabelledFieldProps> = ({
-  className = '',
-  field,
-  isInline = false,
-  isReversedOrder = false,
-  label,
-  ...props
-}) => {
+const LabelledFieldWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  LabelledFieldProps
+> = (
+  {
+    className = '',
+    field,
+    isInline = false,
+    isReversedOrder = false,
+    label,
+    ...props
+  },
+  ref
+) => {
   const layoutClass = isInline ? 'wrapper--inline' : 'wrapper--stack';
   const orderClass = isReversedOrder ? 'wrapper--reverse' : '';
   const wrapperClass = `${styles.wrapper} ${styles[layoutClass]} ${styles[orderClass]} ${className}`;
 
   return (
-    <div {...props} className={wrapperClass}>
+    <div {...props} className={wrapperClass} ref={ref}>
       {label}
       {field}
     </div>
   );
 };
+
+/**
+ * LabelledField component
+ *
+ * Render a field tied to a label.
+ */
+export const LabelledField = forwardRef(LabelledFieldWithRef);
diff --git a/src/components/molecules/forms/radio-group/radio-group.fixture.tsx b/src/components/molecules/forms/radio-group/radio-group.fixture.ts
index f1cbc05..618cde7 100644
--- a/src/components/molecules/forms/radio-group/radio-group.fixture.tsx
+++ b/src/components/molecules/forms/radio-group/radio-group.fixture.ts
@@ -1,6 +1,6 @@
-import { RadioGroupItem } from './radio-group';
+import type { RadioGroupItem } from './radio-group';
 
-export const getOptions = (name: string = 'group1') => {
+export const getOptions = (name = 'group1') => {
   const value1 = 'option1';
   const value2 = 'option2';
   const value3 = 'option3';
diff --git a/src/components/molecules/forms/radio-group/radio-group.stories.tsx b/src/components/molecules/forms/radio-group/radio-group.stories.tsx
index 8e77c6e..4b92c34 100644
--- a/src/components/molecules/forms/radio-group/radio-group.stories.tsx
+++ b/src/components/molecules/forms/radio-group/radio-group.stories.tsx
@@ -1,8 +1,8 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type ChangeEventHandler, useCallback, useState } from 'react';
 import { Legend } from '../../../atoms';
 import { RadioGroup as RadioGroupComponent } from './radio-group';
 import { getOptions, initialChoice } from './radio-group.fixture';
-import { ChangeEventHandler, useCallback, useState } from 'react';
 
 /**
  * RadioGroup - Storybook Meta
diff --git a/src/components/molecules/forms/radio-group/radio-group.test.tsx b/src/components/molecules/forms/radio-group/radio-group.test.tsx
index ba68925..61f4af6 100644
--- a/src/components/molecules/forms/radio-group/radio-group.test.tsx
+++ b/src/components/molecules/forms/radio-group/radio-group.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Legend } from '../../../atoms';
 import { RadioGroup } from './radio-group';
 import { getOptions, initialChoice } from './radio-group.fixture';
@@ -23,7 +23,7 @@ describe('RadioGroup', () => {
     );
 
     expect(
-      screen.getByRole('radiogroup', { name: legend })
+      rtlScreen.getByRole('radiogroup', { name: legend })
     ).toBeInTheDocument();
   });
 
@@ -39,7 +39,7 @@ describe('RadioGroup', () => {
       />
     );
 
-    expect(screen.getAllByRole('radio')).toHaveLength(options.length);
+    expect(rtlScreen.getAllByRole('radio')).toHaveLength(options.length);
   });
 
   it('can render an inlined radio group', () => {
@@ -55,6 +55,6 @@ describe('RadioGroup', () => {
       />
     );
 
-    expect(screen.getByRole('radiogroup')).toHaveClass('group--inline');
+    expect(rtlScreen.getByRole('radiogroup')).toHaveClass('group--inline');
   });
 });
diff --git a/src/components/molecules/forms/radio-group/radio-group.tsx b/src/components/molecules/forms/radio-group/radio-group.tsx
index 0ca4dac..29b719c 100644
--- a/src/components/molecules/forms/radio-group/radio-group.tsx
+++ b/src/components/molecules/forms/radio-group/radio-group.tsx
@@ -1,11 +1,11 @@
-import { ForwardRefRenderFunction, forwardRef } from 'react';
+import { type ForwardRefRenderFunction, forwardRef } from 'react';
 import {
   Fieldset,
-  FieldsetProps,
+  type FieldsetProps,
   Label,
-  LabelProps,
+  type LabelProps,
   Radio,
-  RadioProps,
+  type RadioProps,
 } from '../../../atoms';
 import { LabelledField } from '../labelled-field';
 import styles from './radio-group.module.scss';
@@ -78,6 +78,7 @@ const RadioGroupWithRef: ForwardRefRenderFunction<
       className={groupClass}
       isInline={isInline}
       ref={ref}
+      // eslint-disable-next-line react/jsx-no-literals -- Role allowed
       role="radiogroup"
     >
       {options.map((option) => (
diff --git a/src/components/molecules/forms/switch/switch.stories.tsx b/src/components/molecules/forms/switch/switch.stories.tsx
index eb169ad..a88e6ab 100644
--- a/src/components/molecules/forms/switch/switch.stories.tsx
+++ b/src/components/molecules/forms/switch/switch.stories.tsx
@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Switch as SwitchComponent, SwitchOption } from './switch';
-import { ChangeEventHandler, useCallback, useState } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type ChangeEventHandler, useCallback, useState } from 'react';
 import { Legend } from '../../../atoms';
+import { Switch as SwitchComponent, type SwitchOption } from './switch';
 
 /**
  * Switch - Storybook Meta
diff --git a/src/components/molecules/forms/switch/switch.test.tsx b/src/components/molecules/forms/switch/switch.test.tsx
index 3d091cb..e2e27be 100644
--- a/src/components/molecules/forms/switch/switch.test.tsx
+++ b/src/components/molecules/forms/switch/switch.test.tsx
@@ -1,7 +1,7 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Legend } from '../../../atoms';
-import { Switch, SwitchOption } from './switch';
+import { Switch, type SwitchOption } from './switch';
 
 const doNothing = () => {
   /* Do nothing. */
@@ -27,9 +27,9 @@ describe('Switch', () => {
     );
 
     expect(
-      screen.getByRole('radiogroup', { name: legend })
+      rtlScreen.getByRole('radiogroup', { name: legend })
     ).toBeInTheDocument();
-    expect(screen.getAllByRole('radio')).toHaveLength(items.length);
+    expect(rtlScreen.getAllByRole('radio')).toHaveLength(items.length);
   });
 
   it('can render a disabled switch', () => {
@@ -43,8 +43,8 @@ describe('Switch', () => {
       />
     );
 
-    const radios = screen.getAllByRole<HTMLInputElement>('radio');
+    const radios = rtlScreen.getAllByRole<HTMLInputElement>('radio');
     expect(radios.every((radio) => radio.disabled)).toBe(true);
-    expect(screen.getByRole('radiogroup')).toBeDisabled();
+    expect(rtlScreen.getByRole('radiogroup')).toBeDisabled();
   });
 });
diff --git a/src/components/molecules/forms/switch/switch.tsx b/src/components/molecules/forms/switch/switch.tsx
index d340a0c..df2ba0c 100644
--- a/src/components/molecules/forms/switch/switch.tsx
+++ b/src/components/molecules/forms/switch/switch.tsx
@@ -1,14 +1,21 @@
-import type { FC, ChangeEventHandler, ReactNode, ReactElement } from 'react';
+import {
+  type FC,
+  type ChangeEventHandler,
+  type ReactNode,
+  type ReactElement,
+  forwardRef,
+  type ForwardRefRenderFunction,
+} from 'react';
 import {
   Fieldset,
   type FieldsetProps,
-  LabelProps,
-  RadioProps,
+  type LabelProps,
+  type RadioProps,
   Label,
   Radio,
 } from '../../../atoms';
+import type { TooltipProps } from '../../tooltip';
 import styles from './switch.module.scss';
-import { TooltipProps } from '../../tooltip';
 
 type SwitchItemProps = Omit<LabelProps, 'children' | 'htmlFor' | 'isRequired'> &
   Pick<RadioProps, 'isDisabled' | 'name'> & {
@@ -94,24 +101,31 @@ export type SwitchProps = Omit<FieldsetProps, 'children'> & {
   value: SwitchOption['value'];
 };
 
-/**
- * Switch component.
- */
-export const Switch: FC<SwitchProps> = ({
-  className = '',
-  isDisabled = false,
-  items,
-  name,
-  onSwitch,
-  tooltip,
-  value,
-  ...props
-}) => {
+const SwitchWithRef: ForwardRefRenderFunction<
+  HTMLFieldSetElement,
+  SwitchProps
+> = (
+  {
+    className = '',
+    isDisabled = false,
+    items,
+    name,
+    onSwitch,
+    tooltip,
+    value,
+    ...props
+  },
+  ref
+) => {
+  const fieldsetClass = `${styles.fieldset} ${className}`;
+
   return (
     <Fieldset
       {...props}
-      className={`${styles.fieldset} ${className}`}
+      className={fieldsetClass}
       isDisabled={isDisabled}
+      ref={ref}
+      // eslint-disable-next-line react/jsx-no-literals -- Role allowed
       role="radiogroup"
     >
       {tooltip}
@@ -130,3 +144,8 @@ export const Switch: FC<SwitchProps> = ({
     </Fieldset>
   );
 };
+
+/**
+ * Switch component.
+ */
+export const Switch = forwardRef(SwitchWithRef);
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts
index 04602f2..04602f2 100644
--- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.tsx
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx
index b5f8ef8..4122ed2 100644
--- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { AckeeToggle } from './ackee-toggle';
 import { storageKey } from './ackee-toggle.fixture';
 
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx
index f7400f3..f7f5edf 100644
--- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { AckeeToggle } from './ackee-toggle';
 import { storageKey } from './ackee-toggle.fixture';
 
@@ -8,7 +8,7 @@ describe('AckeeToggle', () => {
   it('renders a toggle component', () => {
     render(<AckeeToggle storageKey={storageKey} defaultValue="full" />);
     expect(
-      screen.getByRole('radiogroup', {
+      rtlScreen.getByRole('radiogroup', {
         name: /Tracking:/i,
       })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/forms/comment-form/comment-form.stories.tsx b/src/components/organisms/forms/comment-form/comment-form.stories.tsx
index a6069e6..a521bf7 100644
--- a/src/components/organisms/forms/comment-form/comment-form.stories.tsx
+++ b/src/components/organisms/forms/comment-form/comment-form.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CommentForm } from './comment-form';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { CommentForm as CommentFormComponent } from './comment-form';
 
 const saveComment = async () => {
   /** Do nothing. */
@@ -10,7 +10,7 @@ const saveComment = async () => {
  */
 export default {
   title: 'Organisms/Forms',
-  component: CommentForm,
+  component: CommentFormComponent,
   args: {
     saveComment,
     titleAlignment: 'left',
@@ -111,13 +111,13 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof CommentForm>;
+} as ComponentMeta<typeof CommentFormComponent>;
 
-const Template: ComponentStory<typeof CommentForm> = (args) => (
-  <CommentForm {...args} />
+const Template: ComponentStory<typeof CommentFormComponent> = (args) => (
+  <CommentFormComponent {...args} />
 );
 
 /**
- * Forms Stories - Comment
+ * Forms Stories - Comment form
  */
-export const Comment = Template.bind({});
+export const CommentForm = Template.bind({});
diff --git a/src/components/organisms/forms/comment-form/comment-form.test.tsx b/src/components/organisms/forms/comment-form/comment-form.test.tsx
index ca02edc..88a7de9 100644
--- a/src/components/organisms/forms/comment-form/comment-form.test.tsx
+++ b/src/components/organisms/forms/comment-form/comment-form.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { CommentForm } from './comment-form';
 
 const saveComment = async () => {
@@ -10,7 +10,7 @@ const title = 'Cum voluptas voluptatibus';
 describe('CommentForm', () => {
   it('renders a form', () => {
     render(<CommentForm saveComment={saveComment} />);
-    expect(screen.getByRole('form')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('form')).toBeInTheDocument();
   });
 
   it('renders an optional title', () => {
@@ -18,7 +18,7 @@ describe('CommentForm', () => {
       <CommentForm saveComment={saveComment} title={title} titleLevel={2} />
     );
     expect(
-      screen.getByRole('heading', { level: 2, name: title })
+      rtlScreen.getByRole('heading', { level: 2, name: title })
     ).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/forms/contact-form/contact-form.stories.tsx b/src/components/organisms/forms/contact-form/contact-form.stories.tsx
index 4df3db0..962bfda 100644
--- a/src/components/organisms/forms/contact-form/contact-form.stories.tsx
+++ b/src/components/organisms/forms/contact-form/contact-form.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ContactForm } from './contact-form';
 
 /**
@@ -59,7 +59,8 @@ const Template: ComponentStory<typeof ContactForm> = (args) => (
  */
 export const Contact = Template.bind({});
 Contact.args = {
-  sendMail: async (_data, reset: () => void) => {
-    reset();
-  },
+  sendMail: async (_data, reset: () => void) =>
+    new Promise(() => {
+      reset();
+    }),
 };
diff --git a/src/components/organisms/forms/contact-form/contact-form.test.tsx b/src/components/organisms/forms/contact-form/contact-form.test.tsx
index d788e09..0e2685e 100644
--- a/src/components/organisms/forms/contact-form/contact-form.test.tsx
+++ b/src/components/organisms/forms/contact-form/contact-form.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { ContactForm } from './contact-form';
 
 const props = {
@@ -12,38 +12,42 @@ describe('ContactForm', () => {
   it('renders a contact form', () => {
     render(<ContactForm {...props} />);
     expect(
-      screen.getByRole('form', { name: 'Contact form' })
+      rtlScreen.getByRole('form', { name: 'Contact form' })
     ).toBeInTheDocument();
   });
 
   it('renders a name field', () => {
     render(<ContactForm {...props} />);
-    expect(screen.getByRole('textbox', { name: /^Name:/ })).toBeInTheDocument();
+    expect(
+      rtlScreen.getByRole('textbox', { name: /^Name:/ })
+    ).toBeInTheDocument();
   });
 
   it('renders an email field', () => {
     render(<ContactForm {...props} />);
     expect(
-      screen.getByRole('textbox', { name: /^Email:/ })
+      rtlScreen.getByRole('textbox', { name: /^Email:/ })
     ).toBeInTheDocument();
   });
 
   it('renders an object field', () => {
     render(<ContactForm {...props} />);
     expect(
-      screen.getByRole('textbox', { name: /^Object:/ })
+      rtlScreen.getByRole('textbox', { name: /^Object:/ })
     ).toBeInTheDocument();
   });
 
   it('renders a message field', () => {
     render(<ContactForm {...props} />);
     expect(
-      screen.getByRole('textbox', { name: /^Message:/ })
+      rtlScreen.getByRole('textbox', { name: /^Message:/ })
     ).toBeInTheDocument();
   });
 
   it('renders a submit button', () => {
     render(<ContactForm {...props} />);
-    expect(screen.getByRole('button', { name: /^Send/ })).toBeInTheDocument();
+    expect(
+      rtlScreen.getByRole('button', { name: /^Send/ })
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts
index f13658a..f13658a 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx
index 7e541db..811830b 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { MotionToggle } from './motion-toggle';
 import { storageKey } from './motion-toggle.fixture';
 
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx
index abae299..6952f46 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { MotionToggle } from './motion-toggle';
 import { storageKey } from './motion-toggle.fixture';
 
@@ -8,7 +8,7 @@ describe('MotionToggle', () => {
   it('renders a toggle component', () => {
     render(<MotionToggle storageKey={storageKey} defaultValue="on" />);
     expect(
-      screen.getByRole('radiogroup', {
+      rtlScreen.getByRole('radiogroup', {
         name: /Animations:/i,
       })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
index a8ca7ce..c141bf0 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
@@ -1,8 +1,12 @@
-import { ChangeEvent, FC } from 'react';
+import { useCallback, type FC } from 'react';
 import { useIntl } from 'react-intl';
 import { useAttributes, useLocalStorage } from '../../../../utils/hooks';
 import { Legend } from '../../../atoms';
-import { Switch, SwitchOption, SwitchProps } from '../../../molecules';
+import {
+  Switch,
+  type SwitchOption,
+  type SwitchProps,
+} from '../../../molecules';
 
 export type MotionToggleValue = 'on' | 'off';
 
@@ -37,7 +41,7 @@ export const MotionToggle: FC<MotionToggleProps> = ({
   );
   useAttributes({
     element:
-      typeof window !== 'undefined' ? document.documentElement : undefined,
+      typeof window === 'undefined' ? undefined : document.documentElement,
     attribute: 'reduced-motion',
     value: `${isReduced}`,
   });
@@ -71,9 +75,9 @@ export const MotionToggle: FC<MotionToggleProps> = ({
     },
   ];
 
-  const updateSetting = (e: ChangeEvent<HTMLInputElement>) => {
+  const updateSetting = useCallback(() => {
     setIsReduced((prev) => !prev);
-  };
+  }, [setIsReduced]);
 
   return (
     <Switch
diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx
index 3c8eaba..3aeb78b 100644
--- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx
+++ b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { PrismThemeToggle } from './prism-theme-toggle';
 
 /**
diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx
index 7c72797..ad8658d 100644
--- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx
+++ b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx
@@ -1,12 +1,12 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { PrismThemeToggle } from './prism-theme-toggle';
 
 describe('PrismThemeToggle', () => {
   it('renders a toggle component', () => {
     render(<PrismThemeToggle />);
     expect(
-      screen.getByRole('radiogroup', {
+      rtlScreen.getByRole('radiogroup', {
         name: /Code blocks:/i,
       })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/forms/search-form/search-form.module.scss b/src/components/organisms/forms/search-form/search-form.module.scss
index e485380..1315fde 100644
--- a/src/components/organisms/forms/search-form/search-form.module.scss
+++ b/src/components/organisms/forms/search-form/search-form.module.scss
@@ -49,6 +49,9 @@
 }
 
 .field {
+  min-width: 0;
+  width: 100%;
+
   &:focus-within ~ .btn {
     background: var(--color-bg);
     border-color: var(--color-primary);
diff --git a/src/components/organisms/forms/search-form/search-form.stories.tsx b/src/components/organisms/forms/search-form/search-form.stories.tsx
index c5fbeb9..971a8ee 100644
--- a/src/components/organisms/forms/search-form/search-form.stories.tsx
+++ b/src/components/organisms/forms/search-form/search-form.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { SearchForm } from './search-form';
 
 /**
diff --git a/src/components/organisms/forms/search-form/search-form.test.tsx b/src/components/organisms/forms/search-form/search-form.test.tsx
index 1af0a47..908a8eb 100644
--- a/src/components/organisms/forms/search-form/search-form.test.tsx
+++ b/src/components/organisms/forms/search-form/search-form.test.tsx
@@ -1,17 +1,19 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { SearchForm } from './search-form';
 
 describe('SearchForm', () => {
   it('renders a search input', () => {
     render(<SearchForm searchPage="#" />);
     expect(
-      screen.getByRole('searchbox', { name: 'Search for:' })
+      rtlScreen.getByRole('searchbox', { name: 'Search for:' })
     ).toBeInTheDocument();
   });
 
   it('renders a submit button', () => {
     render(<SearchForm searchPage="#" />);
-    expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument();
+    expect(
+      rtlScreen.getByRole('button', { name: 'Search' })
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx
index ac228b4..bfec65e 100644
--- a/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx
+++ b/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeToggle } from './theme-toggle';
 
 /**
diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx
index 9f8e4e1..d735936 100644
--- a/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx
+++ b/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx
@@ -1,12 +1,12 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { ThemeToggle } from './theme-toggle';
 
 describe('ThemeToggle', () => {
   it('renders a toggle component', () => {
     render(<ThemeToggle />);
     expect(
-      screen.getByRole('radiogroup', {
+      rtlScreen.getByRole('radiogroup', {
         name: /Theme:/i,
       })
     ).toBeInTheDocument();