refactor(components): rewrite Heading component

* remove `alignment` and `withMargin` props (consumer should handle
that)
* move styles to Sass placeholders to avoid repeats with headings
coming from WordPress
* refactor some other components that depend on Heading to avoid ESlint
errors

3 files changed, 11 insertions, 11 deletions

diff --git a/src/components/atoms/modal/modal.stories.tsx b/src/components/atoms/modal/modal.stories.tsx
index d0c2f0b..0490a8f 100644
--- a/src/components/atoms/modal/modal.stories.tsx
+++ b/src/components/atoms/modal/modal.stories.tsx
@@ -1,6 +1,6 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Heading } from '../heading';
 import { Modal } from './modal';
-import { Heading } from '../headings';
 
 /**
  * Switch - Storybook Meta
diff --git a/src/components/atoms/modal/modal.test.tsx b/src/components/atoms/modal/modal.test.tsx
index 6e7d29e..dfa4a88 100644
--- a/src/components/atoms/modal/modal.test.tsx
+++ b/src/components/atoms/modal/modal.test.tsx
@@ -1,6 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Heading } from '../headings';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { Heading } from '../heading';
 import { Modal } from './modal';
 
 const title = 'A custom title';
@@ -16,11 +16,11 @@ describe('Modal', () => {
         {children}
       </Modal>
     );
-    expect(screen.getByRole('heading', { level })).toHaveTextContent(title);
+    expect(rtlScreen.getByRole('heading', { level })).toHaveTextContent(title);
   });
 
   it('renders the modal body', () => {
     render(<Modal>{children}</Modal>);
-    expect(screen.getByText(children)).toBeInTheDocument();
+    expect(rtlScreen.getByText(children)).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/modal/modal.tsx b/src/components/atoms/modal/modal.tsx
index 78b4f6e..6f5506f 100644
--- a/src/components/atoms/modal/modal.tsx
+++ b/src/components/atoms/modal/modal.tsx
@@ -1,11 +1,11 @@
 import {
-  ForwardRefRenderFunction,
-  HTMLAttributes,
-  ReactElement,
-  ReactNode,
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
   forwardRef,
 } from 'react';
-import { HeadingProps } from '../headings';
+import type { HeadingProps } from '../heading';
 import styles from './modal.module.scss';
 
 export type ModalProps = HTMLAttributes<HTMLDivElement> & {