Remove classnames package

apps/pwa/package.json

@@ -20,7 +20,6 @@
     "@sentry/react": "^8.45.0",
     "animejs": "^3.2.1",
     "body-scroll-lock": "^3.1.5",
-    "classnames": "^2.3.1",
     "clsx": "2.1.1",
     "focus-trap-react": "^8.4.2",
     "hammerjs": "^2.0.8",
@@ -50,7 +49,6 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/animejs": "^3.1.3",
     "@types/body-scroll-lock": "^2.6.1",
-    "@types/classnames": "^2.2.11",
     "@types/hammerjs": "^2.0.39",
     "@types/invariant": "^2.2.34",
     "@types/react": "^18.2.15",

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

@@ -1,11 +1,11 @@
-import classNames from "classnames";
 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";
 
 interface ElementPickerProps {
   onElement: (element: Element) => void;
@@ -107,7 +107,7 @@ function ElementPicker({ onElement }: ElementPickerProps) {
                 className="flex w-full justify-start px-4 py-2 font-normal [text-transform:_none]"
               >
                 <div
-                  className={classNames(
+                  className={cn(
                     "flex h-12 w-12 items-center justify-center rounded-full",
                     "element",
                     element.group,

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

@@ -1,8 +1,8 @@
 import * as React from "react";
-import classNames from "classnames";
 import Button from "@/components/shared/button/Button";
 import { useLocale } from "@/hooks/useLocale";
 import { useElements } from "@/hooks/useElements";
+import { cn } from "@/utils/styles";
 
 interface CalculatorElementProps {
   atomic: number;
@@ -31,7 +31,7 @@ function CalculatorElement({
       className="flex w-full justify-start bg-white px-4 py-2 font-normal shadow-sm [text-transform:_none] dark:bg-accent-900"
     >
       <div
-        className={classNames(
+        className={cn(
           "flex h-12 w-12 items-center justify-center rounded-full",
           "element",
           element.group,