refactor(build): replace paths aliases with relative paths

Using paths aliases starting with "@" can be confusing and can lead to
conflict with existings modules. I prefer to use relative paths to
avoid extra configuration in tools because of these aliases.

75 files changed, 84 insertions, 86 deletions

diff --git a/src/components/atoms/buttons/button-link.test.tsx b/src/components/atoms/buttons/button-link.test.tsx
index 5563964..a5aa7b1 100644
--- a/src/components/atoms/buttons/button-link.test.tsx
+++ b/src/components/atoms/buttons/button-link.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import ButtonLink from './button-link';
 
 describe('ButtonLink', () => {
diff --git a/src/components/atoms/buttons/button.test.tsx b/src/components/atoms/buttons/button.test.tsx
index 073b940..90fca02 100644
--- a/src/components/atoms/buttons/button.test.tsx
+++ b/src/components/atoms/buttons/button.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Button from './button';
 
 describe('Button', () => {
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index b702544..a46f55c 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .btn {
   display: inline-flex;
diff --git a/src/components/atoms/forms/boolean-field.module.scss b/src/components/atoms/forms/boolean-field.module.scss
index 3f0676e..f299ddd 100644
--- a/src/components/atoms/forms/boolean-field.module.scss
+++ b/src/components/atoms/forms/boolean-field.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .hidden {
   @include mix.visually-hidden;
diff --git a/src/components/atoms/forms/boolean-field.test.tsx b/src/components/atoms/forms/boolean-field.test.tsx
index fe314fb..b6fa625 100644
--- a/src/components/atoms/forms/boolean-field.test.tsx
+++ b/src/components/atoms/forms/boolean-field.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import BooleanField from './boolean-field';
 
 describe('BooleanField', () => {
diff --git a/src/components/atoms/forms/field.test.tsx b/src/components/atoms/forms/field.test.tsx
index 0cc8a60..26ad764 100644
--- a/src/components/atoms/forms/field.test.tsx
+++ b/src/components/atoms/forms/field.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Field from './field';
 
 describe('Field', () => {
diff --git a/src/components/atoms/forms/form.test.tsx b/src/components/atoms/forms/form.test.tsx
index 2171fde..3a055ed 100644
--- a/src/components/atoms/forms/form.test.tsx
+++ b/src/components/atoms/forms/form.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Form from './form';
 
 describe('Form', () => {
diff --git a/src/components/atoms/forms/forms.module.scss b/src/components/atoms/forms/forms.module.scss
index 19c7aee..ece26e5 100644
--- a/src/components/atoms/forms/forms.module.scss
+++ b/src/components/atoms/forms/forms.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .item {
   margin: var(--spacing-xs) 0;
diff --git a/src/components/atoms/forms/label.test.tsx b/src/components/atoms/forms/label.test.tsx
index 9968946..761d3b4 100644
--- a/src/components/atoms/forms/label.test.tsx
+++ b/src/components/atoms/forms/label.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Label from './label';
 
 describe('Label', () => {
diff --git a/src/components/atoms/forms/select.test.tsx b/src/components/atoms/forms/select.test.tsx
index 542449c..ca9f6d3 100644
--- a/src/components/atoms/forms/select.test.tsx
+++ b/src/components/atoms/forms/select.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Select from './select';
 
 const selectOptions = [
diff --git a/src/components/atoms/headings/heading.module.scss b/src/components/atoms/headings/heading.module.scss
index a420bc1..1c898e6 100644
--- a/src/components/atoms/headings/heading.module.scss
+++ b/src/components/atoms/headings/heading.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .heading {
   color: var(--color-primary-dark);
diff --git a/src/components/atoms/headings/heading.test.tsx b/src/components/atoms/headings/heading.test.tsx
index 50cd843..e1eef77 100644
--- a/src/components/atoms/headings/heading.test.tsx
+++ b/src/components/atoms/headings/heading.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Heading from './heading';
 
 describe('Heading', () => {
diff --git a/src/components/atoms/icons/arrow.module.scss b/src/components/atoms/icons/arrow.module.scss
index 76e6aea..6ee3364 100644
--- a/src/components/atoms/icons/arrow.module.scss
+++ b/src/components/atoms/icons/arrow.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   fill: var(--color-primary);
diff --git a/src/components/atoms/icons/arrow.test.tsx b/src/components/atoms/icons/arrow.test.tsx
index 60a1679..9985717 100644
--- a/src/components/atoms/icons/arrow.test.tsx
+++ b/src/components/atoms/icons/arrow.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Arrow from './arrow';
 
 describe('Arrow', () => {
diff --git a/src/components/atoms/icons/career.module.scss b/src/components/atoms/icons/career.module.scss
index c5d65eb..0731526 100644
--- a/src/components/atoms/icons/career.module.scss
+++ b/src/components/atoms/icons/career.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/career.test.tsx b/src/components/atoms/icons/career.test.tsx
index 3eb9bc8..0c47262 100644
--- a/src/components/atoms/icons/career.test.tsx
+++ b/src/components/atoms/icons/career.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Career from './career';
 
 describe('Career', () => {
diff --git a/src/components/atoms/icons/cc-by-sa.module.scss b/src/components/atoms/icons/cc-by-sa.module.scss
index e1b2100..14935b6 100644
--- a/src/components/atoms/icons/cc-by-sa.module.scss
+++ b/src/components/atoms/icons/cc-by-sa.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx
index cb05492..2bcb437 100644
--- a/src/components/atoms/icons/cc-by-sa.test.tsx
+++ b/src/components/atoms/icons/cc-by-sa.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import CCBySA from './cc-by-sa';
 
 describe('CCBySA', () => {
diff --git a/src/components/atoms/icons/close.module.scss b/src/components/atoms/icons/close.module.scss
index 4a5d18d..a90391a 100644
--- a/src/components/atoms/icons/close.module.scss
+++ b/src/components/atoms/icons/close.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/close.test.tsx b/src/components/atoms/icons/close.test.tsx
index 658af9a..dc82a2d 100644
--- a/src/components/atoms/icons/close.test.tsx
+++ b/src/components/atoms/icons/close.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Close from './close';
 
 describe('Close', () => {
diff --git a/src/components/atoms/icons/cog.module.scss b/src/components/atoms/icons/cog.module.scss
index 5201598..feda6ce 100644
--- a/src/components/atoms/icons/cog.module.scss
+++ b/src/components/atoms/icons/cog.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   width: var(--icon-size, #{fun.convert-px(40)});
diff --git a/src/components/atoms/icons/cog.test.tsx b/src/components/atoms/icons/cog.test.tsx
index 1ce7f28..9d201b1 100644
--- a/src/components/atoms/icons/cog.test.tsx
+++ b/src/components/atoms/icons/cog.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Cog from './cog';
 
 describe('Cog', () => {
diff --git a/src/components/atoms/icons/computer-screen.module.scss b/src/components/atoms/icons/computer-screen.module.scss
index 6c8f701..fcc4002 100644
--- a/src/components/atoms/icons/computer-screen.module.scss
+++ b/src/components/atoms/icons/computer-screen.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/computer-screen.test.tsx b/src/components/atoms/icons/computer-screen.test.tsx
index 0fb73c4..baa2c78 100644
--- a/src/components/atoms/icons/computer-screen.test.tsx
+++ b/src/components/atoms/icons/computer-screen.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import ComputerScreen from './computer-screen';
 
 describe('ComputerScreen', () => {
diff --git a/src/components/atoms/icons/envelop.module.scss b/src/components/atoms/icons/envelop.module.scss
index 202900b..584fe97 100644
--- a/src/components/atoms/icons/envelop.module.scss
+++ b/src/components/atoms/icons/envelop.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/envelop.test.tsx b/src/components/atoms/icons/envelop.test.tsx
index b25a977..c040134 100644
--- a/src/components/atoms/icons/envelop.test.tsx
+++ b/src/components/atoms/icons/envelop.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Envelop from './envelop';
 
 describe('Envelop', () => {
diff --git a/src/components/atoms/icons/feed.module.scss b/src/components/atoms/icons/feed.module.scss
index 56a5253..bf15c23 100644
--- a/src/components/atoms/icons/feed.module.scss
+++ b/src/components/atoms/icons/feed.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/feed.test.tsx b/src/components/atoms/icons/feed.test.tsx
index fa24106..630089d 100644
--- a/src/components/atoms/icons/feed.test.tsx
+++ b/src/components/atoms/icons/feed.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Feed from './feed';
 
 describe('Feed', () => {
diff --git a/src/components/atoms/icons/hamburger.module.scss b/src/components/atoms/icons/hamburger.module.scss
index 4fba4df..c92b3ab 100644
--- a/src/components/atoms/icons/hamburger.module.scss
+++ b/src/components/atoms/icons/hamburger.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   display: flex;
diff --git a/src/components/atoms/icons/hamburger.test.tsx b/src/components/atoms/icons/hamburger.test.tsx
index 5ce6733..4f6a457 100644
--- a/src/components/atoms/icons/hamburger.test.tsx
+++ b/src/components/atoms/icons/hamburger.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Hamburger from './hamburger';
 
 describe('Hamburger', () => {
diff --git a/src/components/atoms/icons/home.module.scss b/src/components/atoms/icons/home.module.scss
index 48dcc6c..8ed05a0 100644
--- a/src/components/atoms/icons/home.module.scss
+++ b/src/components/atoms/icons/home.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/home.test.tsx b/src/components/atoms/icons/home.test.tsx
index 3688501..0473d0b 100644
--- a/src/components/atoms/icons/home.test.tsx
+++ b/src/components/atoms/icons/home.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Home from './home';
 
 describe('Home', () => {
diff --git a/src/components/atoms/icons/magnifying-glass.module.scss b/src/components/atoms/icons/magnifying-glass.module.scss
index d14bec5..33a82d6 100644
--- a/src/components/atoms/icons/magnifying-glass.module.scss
+++ b/src/components/atoms/icons/magnifying-glass.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   width: var(--icon-size, #{fun.convert-px(40)});
diff --git a/src/components/atoms/icons/magnifying-glass.test.tsx b/src/components/atoms/icons/magnifying-glass.test.tsx
index 2c031f3..c6ddb18 100644
--- a/src/components/atoms/icons/magnifying-glass.test.tsx
+++ b/src/components/atoms/icons/magnifying-glass.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import MagnifyingGlass from './magnifying-glass';
 
 describe('MagnifyingGlass', () => {
diff --git a/src/components/atoms/icons/moon.module.scss b/src/components/atoms/icons/moon.module.scss
index e0b53d6..f2564a9 100644
--- a/src/components/atoms/icons/moon.module.scss
+++ b/src/components/atoms/icons/moon.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   fill: var(--color-primary-lighter);
diff --git a/src/components/atoms/icons/moon.test.tsx b/src/components/atoms/icons/moon.test.tsx
index 18581e9..09415a9 100644
--- a/src/components/atoms/icons/moon.test.tsx
+++ b/src/components/atoms/icons/moon.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Moon from './moon';
 
 describe('Moon', () => {
diff --git a/src/components/atoms/icons/plus-minus.module.scss b/src/components/atoms/icons/plus-minus.module.scss
index c54db33..b46b5ba 100644
--- a/src/components/atoms/icons/plus-minus.module.scss
+++ b/src/components/atoms/icons/plus-minus.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: flex;
diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx
index 895a565..5105403 100644
--- a/src/components/atoms/icons/plus-minus.test.tsx
+++ b/src/components/atoms/icons/plus-minus.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import PlusMinus from './plus-minus';
 
 describe('PlusMinus', () => {
diff --git a/src/components/atoms/icons/posts-stack.module.scss b/src/components/atoms/icons/posts-stack.module.scss
index a22d265..aa1f4f0 100644
--- a/src/components/atoms/icons/posts-stack.module.scss
+++ b/src/components/atoms/icons/posts-stack.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .icon {
   display: block;
diff --git a/src/components/atoms/icons/posts-stack.test.tsx b/src/components/atoms/icons/posts-stack.test.tsx
index 89064c7..65e0d3b 100644
--- a/src/components/atoms/icons/posts-stack.test.tsx
+++ b/src/components/atoms/icons/posts-stack.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import PostsStack from './posts-stack';
 
 describe('PostsStack', () => {
diff --git a/src/components/atoms/icons/sun.module.scss b/src/components/atoms/icons/sun.module.scss
index 5682aa3..8d9683f 100644
--- a/src/components/atoms/icons/sun.module.scss
+++ b/src/components/atoms/icons/sun.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .sun {
   fill: var(--color-primary-lighter);
diff --git a/src/components/atoms/icons/sun.test.tsx b/src/components/atoms/icons/sun.test.tsx
index fe01f4f..af52a5f 100644
--- a/src/components/atoms/icons/sun.test.tsx
+++ b/src/components/atoms/icons/sun.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import Sun from './sun';
 
 describe('Sun', () => {
diff --git a/src/components/atoms/images/logo.module.scss b/src/components/atoms/images/logo.module.scss
index f802a4b..bd4ee90 100644
--- a/src/components/atoms/images/logo.module.scss
+++ b/src/components/atoms/images/logo.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   width: var(--logo-size, fun.convert-px(100));
diff --git a/src/components/atoms/images/logo.test.tsx b/src/components/atoms/images/logo.test.tsx
index aabfd17..e56a737 100644
--- a/src/components/atoms/images/logo.test.tsx
+++ b/src/components/atoms/images/logo.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Logo from './logo';
 
 describe('Logo', () => {
diff --git a/src/components/atoms/layout/column.test.tsx b/src/components/atoms/layout/column.test.tsx
index 95508b3..c722082 100644
--- a/src/components/atoms/layout/column.test.tsx
+++ b/src/components/atoms/layout/column.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Column from './column';
 
 const body =
diff --git a/src/components/atoms/layout/copyright.module.scss b/src/components/atoms/layout/copyright.module.scss
index a0e5347..5d5435c 100644
--- a/src/components/atoms/layout/copyright.module.scss
+++ b/src/components/atoms/layout/copyright.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
   --icon-size: #{fun.convert-px(70)};
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index 612b114..25d54b0 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,5 +1,5 @@
-import CCBySA from '@components/atoms/icons/cc-by-sa';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import CCBySA from '../icons/cc-by-sa';
 import CopyrightComponent from './copyright';
 
 /**
diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx
index 09392b6..c3eef67 100644
--- a/src/components/atoms/layout/copyright.test.tsx
+++ b/src/components/atoms/layout/copyright.test.tsx
@@ -1,5 +1,5 @@
-import CCBySA from '@components/atoms/icons/cc-by-sa';
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
+import CCBySA from '../icons/cc-by-sa';
 import Copyright from './copyright';
 
 const dates = {
diff --git a/src/components/atoms/layout/main.test.tsx b/src/components/atoms/layout/main.test.tsx
index 392fbd5..d9b9e57 100644
--- a/src/components/atoms/layout/main.test.tsx
+++ b/src/components/atoms/layout/main.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Main from './main';
 
 const id = 'main';
diff --git a/src/components/atoms/layout/no-script.module.scss b/src/components/atoms/layout/no-script.module.scss
index d8712af..b64edb9 100644
--- a/src/components/atoms/layout/no-script.module.scss
+++ b/src/components/atoms/layout/no-script.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .noscript {
   color: var(--color-primary-darker);
diff --git a/src/components/atoms/layout/no-script.test.tsx b/src/components/atoms/layout/no-script.test.tsx
index 1b9e96f..4c62879 100644
--- a/src/components/atoms/layout/no-script.test.tsx
+++ b/src/components/atoms/layout/no-script.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import NoScript from './no-script';
 
 const message = 'A noscript message.';
diff --git a/src/components/atoms/layout/notice.module.scss b/src/components/atoms/layout/notice.module.scss
index 7fd972c..b532464 100644
--- a/src/components/atoms/layout/notice.module.scss
+++ b/src/components/atoms/layout/notice.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   padding: var(--spacing-2xs) var(--spacing-xs);
diff --git a/src/components/atoms/layout/notice.test.tsx b/src/components/atoms/layout/notice.test.tsx
index 8408d17..56b5f85 100644
--- a/src/components/atoms/layout/notice.test.tsx
+++ b/src/components/atoms/layout/notice.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Notice from './notice';
 
 const message = 'Tenetur consequuntur tempore.';
diff --git a/src/components/atoms/layout/section.module.scss b/src/components/atoms/layout/section.module.scss
index 012493a..8a33848 100644
--- a/src/components/atoms/layout/section.module.scss
+++ b/src/components/atoms/layout/section.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/placeholders";
 
 .wrapper {
   @extend %grid;
diff --git a/src/components/atoms/layout/section.test.tsx b/src/components/atoms/layout/section.test.tsx
index 2143b70..e31dc32 100644
--- a/src/components/atoms/layout/section.test.tsx
+++ b/src/components/atoms/layout/section.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Section from './section';
 
 const title = 'Section title';
diff --git a/src/components/atoms/layout/sidebar.module.scss b/src/components/atoms/layout/sidebar.module.scss
index 5d36f18..31adb6f 100644
--- a/src/components/atoms/layout/sidebar.module.scss
+++ b/src/components/atoms/layout/sidebar.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   > *:not(:first-child) {
diff --git a/src/components/atoms/layout/sidebar.test.tsx b/src/components/atoms/layout/sidebar.test.tsx
index 6fdb24a..c23c551 100644
--- a/src/components/atoms/layout/sidebar.test.tsx
+++ b/src/components/atoms/layout/sidebar.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Sidebar from './sidebar';
 
 const children = 'A widget';
diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss
index bb5775f..4980a1c 100644
--- a/src/components/atoms/links/link.module.scss
+++ b/src/components/atoms/links/link.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/variables" as var;
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/variables" as var;
 
 /* stylelint-disable no-descending-specificity */
 .link {
diff --git a/src/components/atoms/links/link.test.tsx b/src/components/atoms/links/link.test.tsx
index 16d52d2..ef74821 100644
--- a/src/components/atoms/links/link.test.tsx
+++ b/src/components/atoms/links/link.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Link from './link';
 
 describe('Link', () => {
diff --git a/src/components/atoms/links/nav-link.module.scss b/src/components/atoms/links/nav-link.module.scss
index 241c9c3..acabcab 100644
--- a/src/components/atoms/links/nav-link.module.scss
+++ b/src/components/atoms/links/nav-link.module.scss
@@ -1,6 +1,6 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/placeholders";
 
 .link {
   --draw-border-thickness: #{fun.convert-px(4)};
diff --git a/src/components/atoms/links/nav-link.test.tsx b/src/components/atoms/links/nav-link.test.tsx
index b9a595a..a5f5b5f 100644
--- a/src/components/atoms/links/nav-link.test.tsx
+++ b/src/components/atoms/links/nav-link.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import NavLink from './nav-link';
 
 describe('NavLink', () => {
diff --git a/src/components/atoms/links/sharing-link.module.scss b/src/components/atoms/links/sharing-link.module.scss
index 26ca737..089fd13 100644
--- a/src/components/atoms/links/sharing-link.module.scss
+++ b/src/components/atoms/links/sharing-link.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .link {
   display: inline-flex;
diff --git a/src/components/atoms/links/sharing-link.test.tsx b/src/components/atoms/links/sharing-link.test.tsx
index 7989d04..0a8b87c 100644
--- a/src/components/atoms/links/sharing-link.test.tsx
+++ b/src/components/atoms/links/sharing-link.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import SharingLink from './sharing-link';
 
 describe('SharingLink', () => {
diff --git a/src/components/atoms/links/social-link.module.scss b/src/components/atoms/links/social-link.module.scss
index 02fc61c..57dcf42 100644
--- a/src/components/atoms/links/social-link.module.scss
+++ b/src/components/atoms/links/social-link.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .link {
   display: flex;
diff --git a/src/components/atoms/links/social-link.test.tsx b/src/components/atoms/links/social-link.test.tsx
index b3f9a4c..b55dbcc 100644
--- a/src/components/atoms/links/social-link.test.tsx
+++ b/src/components/atoms/links/social-link.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import SocialLink from './social-link';
 
 /**
diff --git a/src/components/atoms/links/social-link.tsx b/src/components/atoms/links/social-link.tsx
index 464bc60..d0719a3 100644
--- a/src/components/atoms/links/social-link.tsx
+++ b/src/components/atoms/links/social-link.tsx
@@ -1,8 +1,8 @@
-import GithubIcon from '@assets/images/social-media/github.svg';
-import GitlabIcon from '@assets/images/social-media/gitlab.svg';
-import LinkedInIcon from '@assets/images/social-media/linkedin.svg';
-import TwitterIcon from '@assets/images/social-media/twitter.svg';
 import { FC } from 'react';
+import GithubIcon from '../../../assets/images/social-media/github.svg';
+import GitlabIcon from '../../../assets/images/social-media/gitlab.svg';
+import LinkedInIcon from '../../../assets/images/social-media/linkedin.svg';
+import TwitterIcon from '../../../assets/images/social-media/twitter.svg';
 import styles from './social-link.module.scss';
 
 export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter';
diff --git a/src/components/atoms/lists/description-list-item.test.tsx b/src/components/atoms/lists/description-list-item.test.tsx
index a505158..07632a6 100644
--- a/src/components/atoms/lists/description-list-item.test.tsx
+++ b/src/components/atoms/lists/description-list-item.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import DescriptionListItem from './description-list-item';
 
 const itemLabel = 'Repellendus corporis facilis';
diff --git a/src/components/atoms/lists/description-list.module.scss b/src/components/atoms/lists/description-list.module.scss
index 9e913d4..d31c88a 100644
--- a/src/components/atoms/lists/description-list.module.scss
+++ b/src/components/atoms/lists/description-list.module.scss
@@ -1,5 +1,3 @@
-@use "@styles/abstracts/mixins" as mix;
-
 .list {
   display: flex;
   column-gap: var(--spacing-md);
diff --git a/src/components/atoms/lists/description-list.test.tsx b/src/components/atoms/lists/description-list.test.tsx
index 22421b0..11b4965 100644
--- a/src/components/atoms/lists/description-list.test.tsx
+++ b/src/components/atoms/lists/description-list.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@tests/utils';
+import { render } from '../../../../tests/utils';
 import DescriptionList, { DescriptionListItem } from './description-list';
 
 const items: DescriptionListItem[] = [
diff --git a/src/components/atoms/lists/list.module.scss b/src/components/atoms/lists/list.module.scss
index 95f9b40..cbb391e 100644
--- a/src/components/atoms/lists/list.module.scss
+++ b/src/components/atoms/lists/list.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/placeholders";
+@use "../../../styles/abstracts/placeholders";
 
 .list {
   margin: 0;
diff --git a/src/components/atoms/lists/list.test.tsx b/src/components/atoms/lists/list.test.tsx
index 7cf9585..fbe56a4 100644
--- a/src/components/atoms/lists/list.test.tsx
+++ b/src/components/atoms/lists/list.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import List, { type ListItem } from './list';
 
 const items: ListItem[] = [
diff --git a/src/components/atoms/loaders/progress-bar.module.scss b/src/components/atoms/loaders/progress-bar.module.scss
index 878010a..ed64ceb 100644
--- a/src/components/atoms/loaders/progress-bar.module.scss
+++ b/src/components/atoms/loaders/progress-bar.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .progress {
   margin: var(--spacing-sm) auto var(--spacing-md);
diff --git a/src/components/atoms/loaders/progress-bar.test.tsx b/src/components/atoms/loaders/progress-bar.test.tsx
index bb28f41..0310aec 100644
--- a/src/components/atoms/loaders/progress-bar.test.tsx
+++ b/src/components/atoms/loaders/progress-bar.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import ProgressBar from './progress-bar';
 import { current, id, label, max, min } from './progress-bar.fixture';
 
diff --git a/src/components/atoms/loaders/spinner.module.scss b/src/components/atoms/loaders/spinner.module.scss
index 8d818a2..3e05cb3 100644
--- a/src/components/atoms/loaders/spinner.module.scss
+++ b/src/components/atoms/loaders/spinner.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/functions" as fun;
 
 .wrapper {
   display: flex;
diff --git a/src/components/atoms/loaders/spinner.test.tsx b/src/components/atoms/loaders/spinner.test.tsx
index bfb0894..0bcc189 100644
--- a/src/components/atoms/loaders/spinner.test.tsx
+++ b/src/components/atoms/loaders/spinner.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@tests/utils';
+import { render, screen } from '../../../../tests/utils';
 import Spinner from './spinner';
 
 describe('Spinner', () => {