Replace @ alias with # package.json import

apps/pwa/src/components/App.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import App from "./App";
 import { Route, Routes } from "react-router-dom";
-import { render } from "@/test-utils";
+import { render } from "#src/test-utils";
 
 test("It can render without crashing", () => {
   render(

apps/pwa/src/components/App.tsx

@@ -11,9 +11,9 @@ import {
   TEST_SELECTION,
   TEST_VALENCES,
   TEST_VALENCES_SETTINGS,
-} from "@/routes";
-import { useLocale } from "@/hooks/useLocale";
-import { useTheme } from "@/hooks/useTheme";
+} from "#src/routes";
+import { useLocale } from "#src/hooks/useLocale";
+import { useTheme } from "#src/hooks/useTheme";
 import About from "./about/About";
 import MassCalculator from "./mass-calculator/MassCalculator";
 import PeriodicTablePage, {
@@ -25,12 +25,12 @@ import TestSelection from "./test-selection/TestSelection";
 import ValencesTestSettings from "./valences-test/settings/ValencesTestSettings";
 import ValencesTest from "./valences-test/ValencesTest";
 import SearchView from "./search-view";
-import { ElementProvider } from "@/contexts/ElementContext";
+import { ElementProvider } from "#src/contexts/ElementContext";
 import { createPack } from "react-component-pack";
 import ConfirmProvider from "./shared/confirm";
-import { ServiceWorkerProvider } from "@/contexts/ServiceWorkerContext";
-import Home from "@/screens/Home";
-import MainLayout from "@/layouts/MainLayout";
+import { ServiceWorkerProvider } from "#src/contexts/ServiceWorkerContext";
+import Home from "#src/screens/Home";
+import MainLayout from "#src/layouts/MainLayout";
 
 const ProviderPack = createPack(
   HelmetProvider as unknown as React.FunctionComponent<{

apps/pwa/src/components/about/About.test.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import About from "./About";
-import { render } from "@/test-utils";
+import { render } from "#src/test-utils";
 
 test.each([
   {

apps/pwa/src/components/about/About.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
-import { useLocale } from "@/hooks/useLocale";
-import { HUB } from "@/routes";
-import LocaleSelector from "@/components/locale-selector/LocaleSelector";
-import Card from "@/components/shared/card/Card";
-import IconButton from "@/components/shared/icon-button/IconButton";
-import Navbar from "@/components/shared/navbar/Navbar";
-import ThemeSelector from "@/components/theme-selector/ThemeSelector";
-import { FULL_VERSION } from "@/constants";
+import { useLocale } from "#src/hooks/useLocale";
+import { HUB } from "#src/routes";
+import LocaleSelector from "#src/components/locale-selector/LocaleSelector";
+import Card from "#src/components/shared/card/Card";
+import IconButton from "#src/components/shared/icon-button/IconButton";
+import Navbar from "#src/components/shared/navbar/Navbar";
+import ThemeSelector from "#src/components/theme-selector/ThemeSelector";
+import { FULL_VERSION } from "#src/constants";
 
 function About() {
   const navigate = useNavigate();

apps/pwa/src/components/atom/Atom.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/utils/styles";
+import { cn } from "#src/utils/styles";
 
 export type AtomColorVariant = "primary" | "white" | "black" | "inherit";
 

apps/pwa/src/components/element-picker/ElementPicker.test.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import ElementPicker from "./ElementPicker";
-import { render } from "@/test-utils";
+import { render } from "#src/test-utils";
 
 test("search for Neon", async () => {
   const onElement = vi.fn();

apps/pwa/src/components/element-picker/ElementPicker.tsx

@@ -1,11 +1,11 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import HyperScroller, { HyperScrollerCache } from "react-hyper-scroller";
-import { Element } from "@/Element";
-import { useElements } from "@/hooks/useElements";
-import { useLocale } from "@/hooks/useLocale";
-import Button from "@/components/shared/button/Button";
-import Icon from "@/components/shared/icon/Icon";
-import { cn } from "@/utils/styles";
+import { Element } from "#src/Element";
+import { useElements } from "#src/hooks/useElements";
+import { useLocale } from "#src/hooks/useLocale";
+import Button from "#src/components/shared/button/Button";
+import Icon from "#src/components/shared/icon/Icon";
+import { cn } from "#src/utils/styles";
 
 interface ElementPickerProps {
   onElement: (element: Element) => void;

apps/pwa/src/components/hub/Hub.tsx

@@ -1,19 +1,19 @@
-import { useServiceWorker } from "@/contexts/ServiceWorkerContext";
-import { useHubCategoryById } from "@/hooks/useHubCategories";
-import { useHubItemById } from "@/hooks/useHubItems";
-import { useLocale } from "@/hooks/useLocale";
-import { useRecent } from "@/hooks/useRecent";
-import { useTheme } from "@/hooks/useTheme";
-import { ABOUT } from "@/routes";
-import { useFlagStore } from "@/services/flags";
-import { logEvent } from "@/services/spycat";
+import { useServiceWorker } from "#src/contexts/ServiceWorkerContext";
+import { useHubCategoryById } from "#src/hooks/useHubCategories";
+import { useHubItemById } from "#src/hooks/useHubItems";
+import { useLocale } from "#src/hooks/useLocale";
+import { useRecent } from "#src/hooks/useRecent";
+import { useTheme } from "#src/hooks/useTheme";
+import { ABOUT } from "#src/routes";
+import { useFlagStore } from "#src/services/flags";
+import { logEvent } from "#src/services/spycat";
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
-import Atom from "@/components/atom";
-import Button from "@/components/shared/button/Button";
-import { useConfirm } from "@/components/shared/confirm";
-import IconButton from "@/components/shared/icon-button/IconButton";
-import Icon from "@/components/shared/icon/Icon";
+import Atom from "#src/components/atom";
+import Button from "#src/components/shared/button/Button";
+import { useConfirm } from "#src/components/shared/confirm";
+import IconButton from "#src/components/shared/icon-button/IconButton";
+import Icon from "#src/components/shared/icon/Icon";
 import HubItem from "./hub-item";
 import HubSection from "./hub-section";
 import { HubSectionData, useHub } from "./useHub";

apps/pwa/src/components/hub/hub-item/HubItem.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "@/utils/styles";
+import { cn } from "#src/utils/styles";
 
 export interface HubItemProps {
   colSpan?: 1 | 2;

apps/pwa/src/components/hub/useHub.ts

@@ -1,5 +1,5 @@
-import hub from "@/data/hub/hub.json";
-import { useLocale } from "@/hooks/useLocale";
+import hub from "#src/data/hub/hub.json";
+import { useLocale } from "#src/hooks/useLocale";
 import { useMemo } from "react";
 
 export interface HubSectionData {

apps/pwa/src/components/locale-selector/LocaleSelector.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { screen } from "@testing-library/react";
-import { render, waitMs } from "@/test-utils";
+import { render, waitMs } from "#src/test-utils";
 import { userEvent } from "@testing-library/user-event";
 import LocaleSelector from "./LocaleSelector";
 

apps/pwa/src/components/locale-selector/LocaleSelector.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { useLocale, SUPPORTED_LOCALES } from "@/hooks/useLocale";
-import IconButton from "@/components/shared/icon-button/IconButton";
+import { useLocale, SUPPORTED_LOCALES } from "#src/hooks/useLocale";
+import IconButton from "#src/components/shared/icon-button/IconButton";
 import SelectorModal, {
   SelectorModalOption,
-} from "@/components/shared/selector-modal/SelectorModal";
+} from "#src/components/shared/selector-modal/SelectorModal";
 
 function LocaleSelector() {
   const [selectorOpen, setSelectorOpen] = React.useState(false);

apps/pwa/src/components/mass-calculator/AddElementModal.tsx

@@ -1,5 +1,5 @@
-import Modal from "@/components/shared/modal/Modal";
-import ElementPicker from "@/components/element-picker/ElementPicker";
+import Modal from "#src/components/shared/modal/Modal";
+import ElementPicker from "#src/components/element-picker/ElementPicker";
 
 interface AddElementModalProps {
   isOpen: boolean;

apps/pwa/src/components/mass-calculator/CalculatorElement.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
-import Button from "@/components/shared/button/Button";
-import { useLocale } from "@/hooks/useLocale";
-import { useElements } from "@/hooks/useElements";
-import { cn } from "@/utils/styles";
+import Button from "#src/components/shared/button/Button";
+import { useLocale } from "#src/hooks/useLocale";
+import { useElements } from "#src/hooks/useElements";
+import { cn } from "#src/utils/styles";
 
 interface CalculatorElementProps {
   atomic: number;

apps/pwa/src/components/mass-calculator/EditElementModal.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
-import IconButton from "@/components/shared/icon-button/IconButton";
-import Modal from "@/components/shared/modal/Modal";
-import { useLocale } from "@/hooks/useLocale";
-import { useElements } from "@/hooks/useElements";
+import IconButton from "#src/components/shared/icon-button/IconButton";
+import Modal from "#src/components/shared/modal/Modal";
+import { useLocale } from "#src/hooks/useLocale";
+import { useElements } from "#src/hooks/useElements";
 import { MassCalculatorElement } from "./hooks/useMassCalculator";
 
 interface EditElementModalProps {

apps/pwa/src/components/mass-calculator/MassCalculator.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { screen } from "@testing-library/react";
-import { render } from "@/test-utils";
+import { render } from "#src/test-utils";
 import { userEvent } from "@testing-library/user-event";
 import MassCalculator from "./MassCalculator";
 import "hammerjs";

apps/pwa/src/components/mass-calculator/MassCalculator.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
-import { useLocale } from "@/hooks/useLocale";
-import { HUB } from "@/routes";
-import IconButton from "@/components/shared/icon-button/IconButton";
-import ListItemSwipeAction from "@/components/shared/list-item-swipe-action/ListItemSwipeAction";
-import Navbar from "@/components/shared/navbar/Navbar";
+import { useLocale } from "#src/hooks/useLocale";
+import { HUB } from "#src/routes";
+import IconButton from "#src/components/shared/icon-button/IconButton";
+import ListItemSwipeAction from "#src/components/shared/list-item-swipe-action/ListItemSwipeAction";
+import Navbar from "#src/components/shared/navbar/Navbar";
 import AddElementModal from "./AddElementModal";
 import EditElementModal from "./EditElementModal";
 import CalculatorElement from "./CalculatorElement";
 import { useMassCalculator } from "./hooks/useMassCalculator";
 import { useModal } from "./hooks/useModal";
-import { useAddRecent } from "@/hooks/useRecent";
+import { useAddRecent } from "#src/hooks/useRecent";
 import { useNavigate } from "react-router-dom";
 
 function MassCalculator() {

apps/pwa/src/components/mass-calculator/hooks/useMassCalculator.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useElements } from "@/hooks/useElements";
+import { useElements } from "#src/hooks/useElements";
 
 export interface MassCalculatorElement {
   atomic: number;

apps/pwa/src/components/periodic-table-page/PeriodicTablePage.test.tsx

@@ -3,7 +3,7 @@ import { screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import PeriodicTablePage from "./PeriodicTablePage";
 import "hammerjs";
-import { render } from "@/test-utils";
+import { render } from "#src/test-utils";
 
 test("should be able to navigate back to main menu", async () => {
   const { route } = render(<PeriodicTablePage />, {

apps/pwa/src/components/periodic-table-page/PeriodicTablePage.tsx

@@ -1,16 +1,16 @@
 import * as React from "react";
 import { Outlet, useNavigate, useParams } from "react-router-dom";
-import { Element } from "@/Element";
-import { useElements } from "@/hooks/useElements";
-import { useLocale } from "@/hooks/useLocale";
-import { HUB, PERIODIC_TABLE } from "@/routes";
-import PeriodicTable from "@/components/periodic-table/PeriodicTable";
-import PtElementInfo from "@/components/pt-element/PtElementInfo";
-import Navbar from "@/components/shared/navbar/Navbar";
-import SwipeableModal from "@/components/shared/swipeable-modal/SwipeableModal";
+import { Element } from "#src/Element";
+import { useElements } from "#src/hooks/useElements";
+import { useLocale } from "#src/hooks/useLocale";
+import { HUB, PERIODIC_TABLE } from "#src/routes";
+import PeriodicTable from "#src/components/periodic-table/PeriodicTable";
+import PtElementInfo from "#src/components/pt-element/PtElementInfo";
+import Navbar from "#src/components/shared/navbar/Navbar";
+import SwipeableModal from "#src/components/shared/swipeable-modal/SwipeableModal";
 import ElementInfo from "./element-info/ElementInfo";
-import { useAddRecent } from "@/hooks/useRecent";
-import { usePreventDocumentOverscroll } from "@/hooks/usePreventDocumentOverscroll";
+import { useAddRecent } from "#src/hooks/useRecent";
+import { usePreventDocumentOverscroll } from "#src/hooks/usePreventDocumentOverscroll";
 
 function PeriodicTablePage() {
   const navigate = useNavigate();

apps/pwa/src/components/periodic-table-page/element-info/ElementInfo.test.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import ElementInfo from "./ElementInfo";
 import { screen } from "@testing-library/react";
-import { render } from "@/test-utils";
-import THALLIUM_ELEMENT from "@/data/elements/81.json";
-import { Element } from "@/Element";
+import { render } from "#src/test-utils";
+import THALLIUM_ELEMENT from "#src/data/elements/81.json";
+import { Element } from "#src/Element";
 
 const element = THALLIUM_ELEMENT as unknown as Element;
 

apps/pwa/src/components/periodic-table-page/element-info/ElementInfo.tsx

@@ -1,7 +1,7 @@
-import { Element } from "@/Element";
-import { useElements } from "@/hooks/useElements";
-import { useLocale } from "@/hooks/useLocale";
-import { cn } from "@/utils/styles";
+import { Element } from "#src/Element";
+import { useElements } from "#src/hooks/useElements";
+import { useLocale } from "#src/hooks/useLocale";
+import { cn } from "#src/utils/styles";
 
 interface ElementInfoDataEntryProps {
   name: string;

apps/pwa/src/components/periodic-table-test/PeriodicTableTest.tsx

@@ -1,22 +1,22 @@
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
-import { Element } from "@/Element";
-import { ElementsSettings } from "@/hooks/useSettings";
-import { useElements } from "@/hooks/useElements";
-import { useLocale } from "@/hooks/useLocale";
-import { TEST_PERIODIC_TABLE_SETTINGS, TEST_SELECTION } from "@/routes";
-import { shuffle } from "@/utils/shuffle";
-import PeriodicTable from "@/components/periodic-table/PeriodicTable";
-import PtElementTest from "@/components/pt-element/PtElementTest";
-import Card from "@/components/shared/card/Card";
-import Navbar from "@/components/shared/navbar/Navbar";
-import SwipeableModal from "@/components/shared/swipeable-modal/SwipeableModal";
-import QuizResults from "@/components/quiz-results/QuizResults";
+import { Element } from "#src/Element";
+import { ElementsSettings } from "#src/hooks/useSettings";
+import { useElements } from "#src/hooks/useElements";
+import { useLocale } from "#src/hooks/useLocale";
+import { TEST_PERIODIC_TABLE_SETTINGS, TEST_SELECTION } from "#src/routes";
+import { shuffle } from "#src/utils/shuffle";
+import PeriodicTable from "#src/components/periodic-table/PeriodicTable";
+import PtElementTest from "#src/components/pt-element/PtElementTest";
+import Card from "#src/components/shared/card/Card";
+import Navbar from "#src/components/shared/navbar/Navbar";
+import SwipeableModal from "#src/components/shared/swipeable-modal/SwipeableModal";
+import QuizResults from "#src/components/quiz-results/QuizResults";
 import { usePeriodicTableTestSettings } from "./hooks/usePeriodicTableTestSettings";
-import { useAddRecent } from "@/hooks/useRecent";
-import { useConfirm } from "@/components/shared/confirm";
-import { usePreventDocumentOverscroll } from "@/hooks/usePreventDocumentOverscroll";
-import { cn } from "@/utils/styles";
+import { useAddRecent } from "#src/hooks/useRecent";
+import { useConfirm } from "#src/components/shared/confirm";
+import { usePreventDocumentOverscroll } from "#src/hooks/usePreventDocumentOverscroll";
+import { cn } from "#src/utils/styles";
 
 interface PeriodicTableTestQuestion {
   element: Element;

apps/pwa/src/components/periodic-table-test/hooks/usePeriodicTableTestSettings.ts

@@ -1,4 +1,4 @@
-import { useTestSettings } from "@/hooks/useTestSettings";
+import { useTestSettings } from "#src/hooks/useTestSettings";
 import { useCallback } from "react";
 
 export function usePeriodicTableTestSettings() {

apps/pwa/src/components/periodic-table-test/settings/PeriodicTableTestSettings.test.tsx

@@ -6,7 +6,7 @@ import {
 } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import PeriodicTableTestSettings from "./PeriodicTableTestSettings";
-import { render } from "@/test-utils";
+import { render } from "#src/test-utils";
 
 window.scrollTo = vi.fn() as unknown as typeof window.scrollTo;
 

apps/pwa/src/components/periodic-table-test/settings/PeriodicTableTestSettings.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
-import { useLocale } from "@/hooks/useLocale";
-import { TEST_SELECTION } from "@/routes";
-import IconButton from "@/components/shared/icon-button/IconButton";
-import Navbar from "@/components/shared/navbar/Navbar";
-import { usePeriodicTableTestSettings } from "@/components/periodic-table-test/hooks/usePeriodicTableTestSettings";
-import { useElements } from "@/hooks/useElements";
-import PtElementSetting from "@/components/pt-element/PtElementSetting";
-import PeriodicTable from "@/components/periodic-table/PeriodicTable";
+import { useLocale } from "#src/hooks/useLocale";
+import { TEST_SELECTION } from "#src/routes";
+import IconButton from "#src/components/shared/icon-button/IconButton";
+import Navbar from "#src/components/shared/navbar/Navbar";
+import { usePeriodicTableTestSettings } from "#src/components/periodic-table-test/hooks/usePeriodicTableTestSettings";
+import { useElements } from "#src/hooks/useElements";
+import PtElementSetting from "#src/components/pt-element/PtElementSetting";
+import PeriodicTable from "#src/components/periodic-table/PeriodicTable";
 
 function PeriodicTableTestSettings() {
   const navigate = useNavigate();

apps/pwa/src/components/periodic-table/PeriodicTable.test.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import PeriodicTable from "./PeriodicTable";
 import { screen, waitForElementToBeRemoved } from "@testing-library/react";
-import PtElementInfo from "@/components/pt-element/PtElementInfo";
-import { Element } from "@/Element";
-import { render } from "@/test-utils";
+import PtElementInfo from "#src/components/pt-element/PtElementInfo";
+import { Element } from "#src/Element";
+import { render } from "#src/test-utils";
 
 const elementsMap = import.meta.glob("../../data/elements/*.json", {
   eager: true,