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

26 files changed, 99 insertions, 120 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);
   });
 });