From 09aa455c11f24ae113c7de8bc3cfb081221c4dac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Mon, 25 Sep 2023 16:24:22 +0200
Subject: [PATCH] replaces classnames with clsx

---
 app/.eslintrc.js                              |  5 -----
 app/components/breadcrumb/component.tsx       |  5 ++---
 app/components/carousel/component.tsx         |  5 ++---
 .../confirmation-prompt/component.tsx         | 11 +++++------
 app/components/disclaimer/component.tsx       |  7 +++----
 .../features/intersect-item/component.tsx     |  7 +++----
 .../features/raw-item/component.tsx           | 17 +++++++++--------
 .../features/selected-item/component.tsx      | 11 +++++------
 app/components/forms/error/component.tsx      |  4 ++--
 app/components/forms/field/component.tsx      |  5 +++--
 app/components/forms/input/component.tsx      |  7 +++----
 app/components/forms/radio/component.tsx      |  4 ++--
 .../forms/select/menu/component.tsx           |  5 ++---
 .../forms/select/multi/component.tsx          | 13 ++++++-------
 .../forms/select/single/component.tsx         | 13 ++++++-------
 .../forms/select/toggle/component.tsx         | 11 +++++------
 app/components/forms/slider/component.tsx     |  6 +++---
 .../forms/slider/thumb/component.tsx          |  6 +++---
 .../forms/slider/value/component.tsx          |  6 +++---
 app/components/forms/textarea/component.tsx   |  4 ++--
 .../gap-analysis/item/component.tsx           |  7 +++----
 app/components/icon/component.tsx             |  4 ++--
 app/components/info-button/component.tsx      |  7 +++----
 app/components/loading-more/component.tsx     |  6 +++---
 app/components/loading/component.tsx          |  4 ++--
 app/components/map/component.tsx              |  5 ++---
 .../map/controls/fit-bounds/component.tsx     |  5 ++---
 app/components/map/legend/component.tsx       |  7 +++----
 .../map/legend/sortable/list/component.tsx    |  6 +++---
 .../legend/sortable/list/item/component.tsx   |  6 +++---
 .../map/legend/types/basic/component.tsx      |  4 ++--
 .../map/legend/types/choropleth/component.tsx |  4 ++--
 .../map/legend/types/matrix/component.tsx     |  4 ++--
 app/components/modal/component.tsx            |  7 +++----
 app/components/progress-bar/component.tsx     |  4 ++--
 .../scenarios/blm-chart/component.tsx         |  8 ++++----
 app/components/scenarios/item/component.tsx   | 15 +++++++--------
 app/components/table/component.tsx            | 11 +++++------
 app/components/table2/component.tsx           |  9 ++++-----
 app/components/tabs/component.tsx             |  6 +++---
 app/components/tag/component.tsx              |  6 +++---
 app/components/toast/component.tsx            | 11 +++++------
 app/components/tooltip/arrow/component.tsx    |  6 +++---
 app/components/tooltip/component.tsx          |  6 +++---
 app/hooks/map/constants.tsx                   |  8 ++++----
 app/hooks/map/index.ts                        |  2 +-
 .../table/item/duplicate-button/component.tsx | 17 +++++++++--------
 app/layout/header/title/component.tsx         | 13 ++++++-------
 app/layout/help/beacon/component.tsx          |  7 +++----
 app/layout/help/coming-soon/component.tsx     |  7 +++----
 app/layout/loading/component.tsx              |  8 ++++----
 app/layout/pill/component.tsx                 |  6 +++---
 .../edit-dropdown/card/component.tsx          |  5 ++---
 .../contributors/edit-dropdown/component.tsx  |  5 ++---
 .../company-uploader/component.tsx            |  5 ++---
 .../blm-calibration/chart/component.tsx       |  5 ++---
 .../results/card/component.tsx                | 19 +++++++++----------
 .../blm-calibration/results/component.tsx     |  5 ++---
 .../features/add/add-modal/list/component.tsx |  7 +++----
 .../features/add/intersect/list/component.tsx |  9 ++++-----
 .../grid-setup/gap-analysis/list/index.tsx    |  4 +---
 app/layout/projects/all/list/component.tsx    |  5 ++---
 .../projects/all/list/item/component.tsx      | 17 ++++++++---------
 .../upload-files/upload-item/component.tsx    |  5 ++---
 .../upload-btn/upload-modal/component.tsx     |  5 ++---
 .../planning-area-grid-uploader/component.tsx |  5 ++---
 .../form/planning-area-uploader/component.tsx |  5 ++---
 .../projects/show/scenarios/component.tsx     |  9 ++++-----
 .../show/scenarios/types/component.tsx        |  5 ++---
 app/layout/scenarios/edit/tabs/component.tsx  |  7 +++----
 app/layout/sections/component.tsx             |  8 ++++----
 app/layout/sections/item/component.tsx        |  9 ++++-----
 .../sign-up/password-strenght/component.tsx   |  6 +++---
 app/layout/statics/button-link/component.tsx  |  9 ++++-----
 app/layout/statics/hero/component.tsx         |  5 ++---
 app/layout/toast/component.tsx                |  2 +-
 app/layout/wrapper/component.tsx              |  4 ++--
 app/package.json                              |  1 -
 app/pages/_app.tsx                            |  5 ++---
 app/yarn.lock                                 |  8 --------
 80 files changed, 252 insertions(+), 310 deletions(-)

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index 3a1b217a46..6bf5d98687 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -62,11 +62,6 @@ module.exports = {
             pattern: '@react**',
             group: 'builtin',
           },
-          {
-            pattern: 'classnames',
-            group: 'builtin',
-            position: 'after',
-          },
           {
             pattern: 'lodash-es/**',
             group: 'builtin',
diff --git a/app/components/breadcrumb/component.tsx b/app/components/breadcrumb/component.tsx
index 45240311ac..0ef3aa8bc0 100644
--- a/app/components/breadcrumb/component.tsx
+++ b/app/components/breadcrumb/component.tsx
@@ -1,8 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 
-import cx from 'classnames';
-
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import ARROW_LEFT_SVG from 'svgs/ui/arrow-left.svg?sprite';
 import FOLDER_SVG from 'svgs/ui/folder.svg?sprite';
@@ -21,7 +20,7 @@ export const Breadcrum: React.FC<BreadcrumProps> = ({
   <div className="inline-flex">
     <button
       type="button"
-      className={cx({
+      className={cn({
         'flex h-6 items-center overflow-hidden text-sm text-primary-500 hover:text-primary-300 focus:outline-none':
           true,
         [className]: !!className,
diff --git a/app/components/carousel/component.tsx b/app/components/carousel/component.tsx
index eff391cc5d..a376427c4f 100644
--- a/app/components/carousel/component.tsx
+++ b/app/components/carousel/component.tsx
@@ -1,10 +1,9 @@
 import React, { ReactElement, useEffect, useRef, useState } from 'react';
 
-import cx from 'classnames';
-
 import Flicking, { ERROR_CODE, FlickingError } from '@egjs/react-flicking';
 
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import ARROW_LEFT_SVG from 'svgs/ui/arrow-left.svg?sprite';
 import ARROW_RIGHT_SVG from 'svgs/ui/arrow-right.svg?sprite';
@@ -104,7 +103,7 @@ export const Carousel: React.FC<CarouselProps> = ({ slides }: CarouselProps) =>
               onClick={() => {
                 slider.current.moveTo(i);
               }}
-              className={cx({
+              className={cn({
                 'relative w-20': true,
                 'h-1 bg-blue-600': slide === i,
                 'h-0.5 bg-gray-400': slide !== i,
diff --git a/app/components/confirmation-prompt/component.tsx b/app/components/confirmation-prompt/component.tsx
index 56d8a2d2a2..b0e6883553 100644
--- a/app/components/confirmation-prompt/component.tsx
+++ b/app/components/confirmation-prompt/component.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
-import classnames from 'classnames';
-
 import Button from 'components/button';
 import Icon from 'components/icon';
 import Modal from 'components/modal';
+import { cn } from 'utils/cn';
 
 import { ConfirmationPromptProps } from './types';
 
@@ -31,7 +30,7 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
           {title}
         </div>
         <p
-          className={classnames({
+          className={cn({
             'my-4 text-sm sm:pr-32': true,
             'text-black underline': !!danger,
             'text-gray-100': !danger,
@@ -41,7 +40,7 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
         </p>
       </header>
       <div
-        className={classnames({
+        className={cn({
           'flex items-end justify-between': true,
           'mt-10 sm:mt-12': !icon && !description,
           'mt-8': !icon && !!description,
@@ -50,7 +49,7 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
         })}
       >
         <div
-          className={classnames({
+          className={cn({
             flex: true,
             'flex-row-reverse': !!danger,
           })}
@@ -81,7 +80,7 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
         {icon && (
           <Icon
             icon={icon}
-            className={classnames({
+            className={cn({
               'flex-shrink-1 flex-grow-1 hidden sm:block': true,
               'ml-auto w-36': !iconClassName,
               [iconClassName]: !!iconClassName,
diff --git a/app/components/disclaimer/component.tsx b/app/components/disclaimer/component.tsx
index 93de6bc540..8a527205d5 100644
--- a/app/components/disclaimer/component.tsx
+++ b/app/components/disclaimer/component.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import WARNING_SVG from 'svgs/notifications/warning.svg?sprite';
 
@@ -19,13 +18,13 @@ export interface DisclaimerProps {
 
 export const Disclaimer: React.FC<DisclaimerProps> = ({ children, type }: DisclaimerProps) => (
   <div
-    className={cx({
+    className={cn({
       'flex w-full items-center space-x-4 rounded-xl bg-gray-600 px-4 py-3 text-sm': true,
     })}
   >
     <Icon
       icon={WARNING_SVG}
-      className={cx({
+      className={cn({
         'z-10 h-6 w-6': true,
         [TYPE[type]]: true,
       })}
diff --git a/app/components/features/intersect-item/component.tsx b/app/components/features/intersect-item/component.tsx
index 1c4b607a7f..03e1e9d549 100644
--- a/app/components/features/intersect-item/component.tsx
+++ b/app/components/features/intersect-item/component.tsx
@@ -2,11 +2,10 @@ import React, { ReactNode, MutableRefObject, useCallback, useMemo } from 'react'
 
 import { useInView } from 'react-intersection-observer';
 
-import cx from 'classnames';
-
 import Checkbox from 'components/forms/checkbox';
 import Select from 'components/forms/select';
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import SPLIT_SVG from 'svgs/ui/split.svg?sprite';
 
@@ -113,14 +112,14 @@ export const Item: React.FC<ItemProps> = ({
   return (
     <div
       ref={ref}
-      className={cx({
+      className={cn({
         'bg-white text-gray-600': true,
         [className]: !!className,
         invisible: !inView,
       })}
     >
       <header
-        className={cx({
+        className={cn({
           'px-4 pb-4 pt-2': true,
         })}
       >
diff --git a/app/components/features/raw-item/component.tsx b/app/components/features/raw-item/component.tsx
index a8d5a7ddd3..e25a6914ca 100644
--- a/app/components/features/raw-item/component.tsx
+++ b/app/components/features/raw-item/component.tsx
@@ -1,11 +1,10 @@
-import React, { MutableRefObject } from 'react';
+import React, { ComponentProps, MutableRefObject } from 'react';
 
 import { useInView } from 'react-intersection-observer';
 
-import cx from 'classnames';
-
 import Button from 'components/button';
 import InfoButton from 'components/info-button';
+import { cn } from 'utils/cn';
 
 export interface ItemProps {
   id: string | number;
@@ -38,7 +37,7 @@ export const Item: React.FC<ItemProps> = ({
   return (
     <div
       ref={ref}
-      className={cx({
+      className={cn({
         'bg-white px-0 py-6 text-black': true,
         [className]: !!className,
         invisible: !inView,
@@ -60,10 +59,12 @@ export const Item: React.FC<ItemProps> = ({
         </div>
         <div>
           <Button
-            theme={cx({
-              secondary: selected,
-              'secondary-alt': !selected,
-            })}
+            theme={
+              cn({
+                secondary: selected,
+                'secondary-alt': !selected,
+              }) as ComponentProps<typeof Button>['theme']
+            }
             size="xs"
             onClick={onToggleSelected}
           >
diff --git a/app/components/features/selected-item/component.tsx b/app/components/features/selected-item/component.tsx
index 469cd518b2..04bc710f0e 100644
--- a/app/components/features/selected-item/component.tsx
+++ b/app/components/features/selected-item/component.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback, useMemo, useState, ReactNode } from 'react';
 
-import cx from 'classnames';
-
 import { useFeatureFlags } from 'hooks/feature-flags';
 
 import Button from 'components/button';
@@ -10,6 +8,7 @@ import Select from 'components/forms/select';
 import Icon from 'components/icon';
 import InfoButton from 'components/info-button';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import STRAT_1_IMG from 'images/info-buttons/img_strat_1.png';
 import STRAT_2_IMG from 'images/info-buttons/img_strat_2.png';
@@ -128,13 +127,13 @@ export const Item: React.FC<ItemProps> = ({
   // RENDER
   return (
     <div
-      className={cx({
+      className={cn({
         'bg-gray-800 text-white': true,
         [className]: !!className,
       })}
     >
       <header
-        className={cx({
+        className={cn({
           'border-l-4 px-4 py-2': true,
           'border-yellow-500': true,
         })}
@@ -153,7 +152,7 @@ export const Item: React.FC<ItemProps> = ({
                   aria-label="manage-see-on-map"
                   type="button"
                   onClick={() => setSplitOpen(!splitOpen)}
-                  className={cx({
+                  className={cn({
                     'flex h-5 w-5 items-center justify-center ': true,
                     'text-white': !splitSelected,
                     'text-yellow-500': !!splitSelected,
@@ -177,7 +176,7 @@ export const Item: React.FC<ItemProps> = ({
                 aria-label="manage-see-on-map"
                 type="button"
                 onClick={onSeeOnMap}
-                className={cx({
+                className={cn({
                   'flex h-5 w-5 items-center justify-center text-white': true,
                   'text-gray-400': !isShown,
                 })}
diff --git a/app/components/forms/error/component.tsx b/app/components/forms/error/component.tsx
index 3405dae4b6..2902fe98f3 100644
--- a/app/components/forms/error/component.tsx
+++ b/app/components/forms/error/component.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface ErrorProps {
   children: ReactNode;
@@ -13,7 +13,7 @@ export const Error: React.FC<ErrorProps> = ({ children, visible, className }: Er
 
   return (
     <div
-      className={cx({
+      className={cn({
         'mb-5 rounded border border-red-600 bg-red-200 px-3 py-1 text-sm text-red-600': true,
         [className]: !!className,
       })}
diff --git a/app/components/forms/field/component.tsx b/app/components/forms/field/component.tsx
index 703f8f69d4..4b726720a9 100644
--- a/app/components/forms/field/component.tsx
+++ b/app/components/forms/field/component.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import cx from 'classnames';
+
+import { cn } from 'utils/cn';
 
 export interface FieldProps {
   id: string;
@@ -41,7 +42,7 @@ export const Field: React.FC<FieldProps> = ({
 
   return (
     <div
-      className={cx({
+      className={cn({
         [className]: !!className,
       })}
     >
diff --git a/app/components/forms/input/component.tsx b/app/components/forms/input/component.tsx
index 1d70f16d65..c5270d9133 100644
--- a/app/components/forms/input/component.tsx
+++ b/app/components/forms/input/component.tsx
@@ -1,10 +1,9 @@
 import React, { InputHTMLAttributes } from 'react';
 
-import cx from 'classnames';
-
 import { useFocus } from '@react-aria/interactions';
 
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 const THEME = {
   dark: {
@@ -77,7 +76,7 @@ export const Input: React.FC<InputProps> = ({
       {icon && (
         <Icon
           icon={icon}
-          className={cx({
+          className={cn({
             'absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform': true,
             [THEME[theme].icon]: true,
           })}
@@ -88,7 +87,7 @@ export const Input: React.FC<InputProps> = ({
         {...props}
         ref={onReady}
         disabled={disabled}
-        className={cx({
+        className={cn({
           'form-input': true,
           [THEME[theme].base]: true,
           [THEME[theme].status[st]]: true,
diff --git a/app/components/forms/radio/component.tsx b/app/components/forms/radio/component.tsx
index 0e132528a2..0d70412e8f 100644
--- a/app/components/forms/radio/component.tsx
+++ b/app/components/forms/radio/component.tsx
@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 const THEME = {
   dark: {
@@ -42,7 +42,7 @@ export const Radio: React.FC<RadioProps> = ({
       {...props}
       type="radio"
       disabled={disabled}
-      className={cx({
+      className={cn({
         'form-radio': true,
         [THEME[theme].base]: true,
         [THEME[theme].status[st]]: true,
diff --git a/app/components/forms/select/menu/component.tsx b/app/components/forms/select/menu/component.tsx
index f3e6f23c45..26046f7d99 100644
--- a/app/components/forms/select/menu/component.tsx
+++ b/app/components/forms/select/menu/component.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import THEME from 'components/forms/select/constants/theme';
 import { SelectMenuProps } from 'components/forms/select/types';
+import { cn } from 'utils/cn';
 
 export const SelectMenu: React.FC<SelectMenuProps> = ({
   theme,
@@ -13,7 +12,7 @@ export const SelectMenu: React.FC<SelectMenuProps> = ({
 }: SelectMenuProps) => {
   return (
     <div
-      className={cx({
+      className={cn({
         'overflow-hidden focus:outline-none': true,
         'pointer-events-none invisible': attributes?.popper?.['data-popper-reference-hidden'],
         [THEME[theme].open]: opened,
diff --git a/app/components/forms/select/multi/component.tsx b/app/components/forms/select/multi/component.tsx
index 6453751171..3c177acfcb 100644
--- a/app/components/forms/select/multi/component.tsx
+++ b/app/components/forms/select/multi/component.tsx
@@ -3,8 +3,6 @@ import React, { useEffect, useRef, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 
-import cx from 'classnames';
-
 // Downshift;
 import { useSelect, useMultipleSelection } from 'downshift';
 
@@ -19,6 +17,7 @@ import THEME from 'components/forms/select/constants/theme';
 import Menu from 'components/forms/select/menu';
 import Toggle from 'components/forms/select/toggle';
 import { SelectProps, SelectOptionProps } from 'components/forms/select/types';
+import { cn } from 'utils/cn';
 
 export const MultiSelect: React.FC<SelectProps> = ({
   theme = 'dark',
@@ -210,7 +209,7 @@ export const MultiSelect: React.FC<SelectProps> = ({
 
   return (
     <div
-      className={cx({
+      className={cn({
         'c-multi-select': true,
         'w-full overflow-hidden leading-tight': true,
         'pointer-events-none opacity-50': disabled,
@@ -239,7 +238,7 @@ export const MultiSelect: React.FC<SelectProps> = ({
       {/* Menu */}
       {createPortal(
         <div
-          className={cx({
+          className={cn({
             'c-multi-select-dropdown': true,
             'z-50': true,
             // The content of `<Menu />` must always be in the DOM so that Downshift can get the ref
@@ -276,7 +275,7 @@ export const MultiSelect: React.FC<SelectProps> = ({
 
             <ul
               {...getMenuProps({ onFocus, onBlur })}
-              className={cx({
+              className={cn({
                 'overflow-y-auto overflow-x-hidden py-1 focus:outline-none': true,
               })}
               style={{
@@ -285,7 +284,7 @@ export const MultiSelect: React.FC<SelectProps> = ({
             >
               {getOptions.map((option, index) => (
                 <li
-                  className={cx({
+                  className={cn({
                     'relative mt-0.5 cursor-pointer px-4 py-1': true,
                     [THEME[theme].item.base]: highlightedIndex !== index,
                     [THEME[theme].item.disabled]: option.disabled,
@@ -297,7 +296,7 @@ export const MultiSelect: React.FC<SelectProps> = ({
                   {...getItemProps({ item: option, index, disabled: option.disabled })}
                 >
                   <span
-                    className={cx({
+                    className={cn({
                       'ml-6': !!option.checkbox,
                     })}
                   >
diff --git a/app/components/forms/select/single/component.tsx b/app/components/forms/select/single/component.tsx
index 40bde9fe59..ea937cd6d6 100644
--- a/app/components/forms/select/single/component.tsx
+++ b/app/components/forms/select/single/component.tsx
@@ -3,8 +3,6 @@ import React, { useEffect, useRef, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 
-import cx from 'classnames';
-
 // Downshift;
 import { useSelect } from 'downshift';
 
@@ -19,6 +17,7 @@ import THEME from 'components/forms/select/constants/theme';
 import Menu from 'components/forms/select/menu';
 import Toggle from 'components/forms/select/toggle';
 import { SelectProps, SelectOptionProps } from 'components/forms/select/types';
+import { cn } from 'utils/cn';
 
 export const SingleSelect: React.FC<SelectProps> = ({
   theme = 'dark',
@@ -165,7 +164,7 @@ export const SingleSelect: React.FC<SelectProps> = ({
 
   return (
     <div
-      className={cx({
+      className={cn({
         'c-select': true,
         'w-full overflow-hidden leading-tight': true,
         'pointer-events-none opacity-50': disabled,
@@ -194,7 +193,7 @@ export const SingleSelect: React.FC<SelectProps> = ({
 
       {createPortal(
         <div
-          className={cx({
+          className={cn({
             'c-select-dropdown': true,
             'z-50': true,
             // The content of `<Menu />` must always be in the DOM so that Downshift can get the ref
@@ -231,7 +230,7 @@ export const SingleSelect: React.FC<SelectProps> = ({
 
             <ul
               {...getMenuProps({ onFocus, onBlur })}
-              className={cx({
+              className={cn({
                 'overflow-y-auto overflow-x-hidden py-1 focus:outline-none': true,
               })}
               style={{
@@ -240,7 +239,7 @@ export const SingleSelect: React.FC<SelectProps> = ({
             >
               {getVisibleOptions.map((option, index) => (
                 <li
-                  className={cx({
+                  className={cn({
                     'mt-0.5 cursor-pointer px-4 py-1': true,
                     [THEME[theme].item.base]: highlightedIndex !== index,
                     [THEME[theme].item.disabled]: option.disabled,
@@ -252,7 +251,7 @@ export const SingleSelect: React.FC<SelectProps> = ({
                   {...getItemProps({ item: option, index, disabled: option.disabled })}
                 >
                   <span
-                    className={cx({
+                    className={cn({
                       'ml-6': !!option.checkbox,
                     })}
                   >
diff --git a/app/components/forms/select/toggle/component.tsx b/app/components/forms/select/toggle/component.tsx
index 3947b29a93..252f3d9d09 100644
--- a/app/components/forms/select/toggle/component.tsx
+++ b/app/components/forms/select/toggle/component.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 
-import cx from 'classnames';
-
 import THEME from 'components/forms/select/constants/theme';
 import { SelectToggleProps } from 'components/forms/select/types';
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite';
 
@@ -47,7 +46,7 @@ export const SelectToggle: React.FC<SelectToggleProps> = ({
       aria-label="select"
       type="button"
       disabled={disabled}
-      className={cx({
+      className={cn({
         'relative flex w-full items-center tracking-wide focus:outline-none': true,
         [THEME.sizes[size]]: true,
       })}
@@ -61,7 +60,7 @@ export const SelectToggle: React.FC<SelectToggleProps> = ({
     >
       {prefix && (
         <span
-          className={cx({
+          className={cn({
             'mr-2 font-heading text-xs': true,
             [THEME[theme].prefix.base]: true,
           })}
@@ -71,7 +70,7 @@ export const SelectToggle: React.FC<SelectToggleProps> = ({
       )}
 
       <span
-        className={cx({
+        className={cn({
           'overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-none': true,
           [THEME[theme].prefix.base]: selectedItems.length,
           [THEME.sizes.label[size]]: true,
@@ -81,7 +80,7 @@ export const SelectToggle: React.FC<SelectToggleProps> = ({
       </span>
 
       <Icon
-        className={cx({
+        className={cn({
           'absolute right-4 h-3 w-3': true,
           [THEME[theme].icon.closed]: !opened,
           [THEME[theme].icon.open]: opened,
diff --git a/app/components/forms/slider/component.tsx b/app/components/forms/slider/component.tsx
index c9d64a47a2..ffea346061 100644
--- a/app/components/forms/slider/component.tsx
+++ b/app/components/forms/slider/component.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import { useNumberFormatter } from '@react-aria/i18n';
 import { setInteractionModality } from '@react-aria/interactions';
 import { useSlider } from '@react-aria/slider';
 import { useSliderState } from '@react-stately/slider';
 
+import { cn } from 'utils/cn';
+
 import Thumb from './thumb';
 import Value from './value';
 
@@ -168,7 +168,7 @@ export const Slider: React.FC<SliderProps> = ({
   return (
     <div
       {...groupProps}
-      className={cx({
+      className={cn({
         [THEME[theme].base]: true,
         'opacity-30': status === 'disabled',
       })}
diff --git a/app/components/forms/slider/thumb/component.tsx b/app/components/forms/slider/thumb/component.tsx
index be9f1ce4cc..9fcaa52387 100644
--- a/app/components/forms/slider/thumb/component.tsx
+++ b/app/components/forms/slider/thumb/component.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import { useFocusRing } from '@react-aria/focus';
 import { useSliderThumb } from '@react-aria/slider';
 import { mergeProps } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { SliderState } from '@react-stately/slider';
 
+import { cn } from 'utils/cn';
+
 const THEME = {
   dark: {
     thumb: 'absolute top-0 w-4 h-4 transform -translate-x-1/2 rounded-full bg-gray-800 border-2',
@@ -98,7 +98,7 @@ export const Thumb: React.FC<ThumbProps> = ({
   return (
     <div
       {...thumbProps}
-      className={cx({
+      className={cn({
         [THEME[theme].thumb]: true,
         [THEME[theme].status[status]]: true,
       })}
diff --git a/app/components/forms/slider/value/component.tsx b/app/components/forms/slider/value/component.tsx
index 56bfe01deb..142a26147b 100644
--- a/app/components/forms/slider/value/component.tsx
+++ b/app/components/forms/slider/value/component.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useRef, useEffect } from 'react';
 
-import cx from 'classnames';
-
 import { useButton } from '@react-aria/button';
 import { useFocus, useKeyboard } from '@react-aria/interactions';
 import { SliderState } from '@react-stately/slider';
 
+import { cn } from 'utils/cn';
+
 const THEME = {
   dark: {
     base: 'absolute top-0 transform -translate-x-1/2 text-black',
@@ -162,7 +162,7 @@ export const Value: React.FC<ValueProps> = ({
       ) : (
         <div
           ref={outputButtonRef}
-          className={cx({
+          className={cn({
             'cursor-default': !allowEdit,
             'cursor-text': allowEdit,
           })}
diff --git a/app/components/forms/textarea/component.tsx b/app/components/forms/textarea/component.tsx
index eae904b8a3..b8c928f9df 100644
--- a/app/components/forms/textarea/component.tsx
+++ b/app/components/forms/textarea/component.tsx
@@ -1,6 +1,6 @@
 import React, { TextareaHTMLAttributes } from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 const THEME = {
   dark: {
@@ -41,7 +41,7 @@ export const Textarea: React.FC<TextareaProps> = ({
     <textarea
       {...props}
       disabled={disabled}
-      className={cx({
+      className={cn({
         'form-textarea w-full': true,
         [THEME[theme].base]: true,
         [THEME[theme].status[st]]: true,
diff --git a/app/components/gap-analysis/item/component.tsx b/app/components/gap-analysis/item/component.tsx
index 8661f8d0ae..54bdc448ba 100644
--- a/app/components/gap-analysis/item/component.tsx
+++ b/app/components/gap-analysis/item/component.tsx
@@ -1,11 +1,10 @@
 import React, { MouseEventHandler, useEffect, useMemo, useRef, useState } from 'react';
 
-import classnames from 'classnames';
-
 import { useNumberFormatter } from '@react-aria/i18n';
 
 import Icon from 'components/icon';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
 import SHOW_SVG from 'svgs/ui/show.svg?sprite';
@@ -74,7 +73,7 @@ export const Item: React.FC<ItemProps> = ({
 
   return (
     <div
-      className={classnames({
+      className={cn({
         'relative overflow-hidden border-l-4 px-4 pb-4 pt-1 text-white transition-opacity duration-300':
           true,
         'opacity-20': muted,
@@ -138,7 +137,7 @@ export const Item: React.FC<ItemProps> = ({
             }}
           >
             <div
-              className={classnames({
+              className={cn({
                 'absolute left-1/2 top-full mt-2.5 -translate-y-1/2 transform whitespace-nowrap text-xs text-red-600':
                   true,
                 ...metStyles,
diff --git a/app/components/icon/component.tsx b/app/components/icon/component.tsx
index 085647f9ef..3884f60a61 100644
--- a/app/components/icon/component.tsx
+++ b/app/components/icon/component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface IconProps {
   icon: {
@@ -14,7 +14,7 @@ export interface IconProps {
 export const Icon: React.FC<IconProps> = ({ icon, className = 'w-5 h-5', style }: IconProps) => {
   return (
     <svg
-      className={cx({
+      className={cn({
         'fill-current transition-colors': true,
         [className]: className,
       })}
diff --git a/app/components/info-button/component.tsx b/app/components/info-button/component.tsx
index 2cb5e5f9dd..bbaf8b40b1 100644
--- a/app/components/info-button/component.tsx
+++ b/app/components/info-button/component.tsx
@@ -1,9 +1,8 @@
 import React, { ReactElement } from 'react';
 
-import cx from 'classnames';
-
 import Icon from 'components/icon';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import INFO_SVG from 'svgs/ui/info.svg?sprite';
 
@@ -68,7 +67,7 @@ export const InfoButton: React.FC<InfoButtonProps> = ({
   >
     <button
       aria-label="info-button"
-      className={cx({
+      className={cn({
         'flex flex-shrink-0 items-center justify-center rounded-full bg-opacity-50 transition hover:bg-opacity-75 focus:bg-opacity-90 focus:outline-none':
           true,
         [THEME[theme].button]: true,
@@ -79,7 +78,7 @@ export const InfoButton: React.FC<InfoButtonProps> = ({
     >
       <Icon
         icon={INFO_SVG}
-        className={cx({
+        className={cn({
           [THEME[theme].icon]: true,
           [SIZE.icon[size]]: true,
         })}
diff --git a/app/components/loading-more/component.tsx b/app/components/loading-more/component.tsx
index 735060f671..7115d8408d 100644
--- a/app/components/loading-more/component.tsx
+++ b/app/components/loading-more/component.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import { motion, AnimatePresence } from 'framer-motion';
 
+import { cn } from 'utils/cn';
+
 import { LoadingMoreProps } from './types';
 
 export const LoadingMore: React.FC<LoadingMoreProps> = ({ visible = false }: LoadingMoreProps) => {
@@ -11,7 +11,7 @@ export const LoadingMore: React.FC<LoadingMoreProps> = ({ visible = false }: Loa
     <AnimatePresence>
       <motion.div
         key="loading"
-        className={cx({
+        className={cn({
           'opacity-100': visible,
           'opacity-0': !visible,
           'pointer-events-none absolute bottom-0 left-0 z-20 w-full bg-gray-100 text-center font-heading text-xs uppercase transition':
diff --git a/app/components/loading/component.tsx b/app/components/loading/component.tsx
index 97d3499cb5..7cca1d2402 100644
--- a/app/components/loading/component.tsx
+++ b/app/components/loading/component.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import cx from 'classnames';
 import { motion, AnimatePresence } from 'framer-motion';
 
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import LOADING_SVG from 'svgs/ui/processing.svg?sprite';
 
@@ -28,7 +28,7 @@ export const Loading: React.FC<LoadingProps> = ({
           key="loading"
           {...variants}
           transition={transition}
-          className={cx({
+          className={cn({
             [className]: !!className,
           })}
         >
diff --git a/app/components/map/component.tsx b/app/components/map/component.tsx
index b1bc621119..3a04c087b5 100644
--- a/app/components/map/component.tsx
+++ b/app/components/map/component.tsx
@@ -2,14 +2,13 @@ import React, { useEffect, useState, useRef, useCallback } from 'react';
 
 import ReactMapGL, { FlyToInterpolator, TRANSITION_EVENTS, ViewportProps } from 'react-map-gl';
 
-import cx from 'classnames';
-
 import { fitBounds } from '@math.gl/web-mercator';
 import { easeCubic } from 'd3-ease';
 import isEmpty from 'lodash/isEmpty';
 import { useDebouncedCallback } from 'use-debounce';
 
 import { MapProps } from 'types/map';
+import { cn } from 'utils/cn';
 
 const DEFAULT_VIEWPORT = {
   zoom: 2,
@@ -195,7 +194,7 @@ export const Map = ({
   return (
     <div
       ref={mapContainerRef}
-      className={cx({
+      className={cn({
         'relative z-0 h-full w-full': true,
         [className]: !!className,
       })}
diff --git a/app/components/map/controls/fit-bounds/component.tsx b/app/components/map/controls/fit-bounds/component.tsx
index 520f64d9ff..8a52d1100b 100644
--- a/app/components/map/controls/fit-bounds/component.tsx
+++ b/app/components/map/controls/fit-bounds/component.tsx
@@ -2,9 +2,8 @@ import React, { useCallback } from 'react';
 
 import { ViewportProps } from 'react-map-gl';
 
-import cx from 'classnames';
-
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import FIT_BOUNDS_SVG from 'svgs/map/fit-bounds.svg?sprite';
 
@@ -30,7 +29,7 @@ export const FitBoundsControl = ({
   return (
     <button
       aria-label="fit-bounds"
-      className={cx({
+      className={cn({
         'mb-0.5 rounded-[40px] bg-black px-0.5 py-1 text-white focus:outline-none': true,
         'hover:bg-gray-800 active:bg-gray-700': !!bounds,
         'cursor-default opacity-50': !bounds,
diff --git a/app/components/map/legend/component.tsx b/app/components/map/legend/component.tsx
index 54374fbc2f..fc936ea319 100644
--- a/app/components/map/legend/component.tsx
+++ b/app/components/map/legend/component.tsx
@@ -1,8 +1,7 @@
 import React, { useMemo, useCallback, Children, isValidElement } from 'react';
 
-import cx from 'classnames';
-
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import LEGEND_SVG from 'svgs/map/legend.svg?sprite';
 import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite';
@@ -42,7 +41,7 @@ export const Legend: React.FC<LegendProps> = ({
 
   return (
     <div
-      className={cx({
+      className={cn({
         'flex w-full flex-grow flex-col overflow-hidden rounded-3xl bg-black': true,
         hidden: !isChildren,
         [className]: !!className,
@@ -58,7 +57,7 @@ export const Legend: React.FC<LegendProps> = ({
 
         <Icon
           icon={ARROW_DOWN_SVG}
-          className={cx({
+          className={cn({
             'absolute right-5 top-1/2 h-3 w-3 -translate-y-1/2 transform text-primary-500 transition-transform':
               true,
             'rotate-180': !open,
diff --git a/app/components/map/legend/sortable/list/component.tsx b/app/components/map/legend/sortable/list/component.tsx
index 95b9bc30f8..88604a627d 100644
--- a/app/components/map/legend/sortable/list/component.tsx
+++ b/app/components/map/legend/sortable/list/component.tsx
@@ -8,8 +8,6 @@ import React, {
   useState,
 } from 'react';
 
-import cx from 'classnames';
-
 import {
   DndContext,
   DragOverlay,
@@ -27,6 +25,8 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 
+import { cn } from 'utils/cn';
+
 import SortableItem from './item';
 import type { SortableItemProps } from './item/component';
 
@@ -116,7 +116,7 @@ export const SortableList: React.FC<SortableListProps> = ({
     >
       <SortableContext items={itemsIds} strategy={verticalListSortingStrategy}>
         <div
-          className={cx({
+          className={cn({
             'w-full': true,
           })}
         >
diff --git a/app/components/map/legend/sortable/list/item/component.tsx b/app/components/map/legend/sortable/list/item/component.tsx
index c42c05439a..118e7cbf83 100644
--- a/app/components/map/legend/sortable/list/item/component.tsx
+++ b/app/components/map/legend/sortable/list/item/component.tsx
@@ -1,10 +1,10 @@
 import React, { ReactElement, cloneElement } from 'react';
 
-import cx from 'classnames';
-
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
+import { cn } from 'utils/cn';
+
 export interface SortableItemProps {
   id: string;
   sortable: {
@@ -44,7 +44,7 @@ export const SortableItem: React.FC<SortableItemProps> = ({
         ...listeners,
         ...attributes,
       })}
-      className={cx({
+      className={cn({
         'opacity-0': isDragging,
       })}
     >
diff --git a/app/components/map/legend/types/basic/component.tsx b/app/components/map/legend/types/basic/component.tsx
index ef6e8dbc8e..077880816d 100644
--- a/app/components/map/legend/types/basic/component.tsx
+++ b/app/components/map/legend/types/basic/component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface LegendTypeBasicProps {
   className?: string;
@@ -16,7 +16,7 @@ export const LegendTypeBasic: React.FC<LegendTypeBasicProps> = ({
 }: LegendTypeBasicProps) => {
   return (
     <div
-      className={cx({
+      className={cn({
         [className]: !!className,
       })}
     >
diff --git a/app/components/map/legend/types/choropleth/component.tsx b/app/components/map/legend/types/choropleth/component.tsx
index dc367ef3d1..62aae3c54a 100644
--- a/app/components/map/legend/types/choropleth/component.tsx
+++ b/app/components/map/legend/types/choropleth/component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface LegendTypeChoroplethProps {
   className?: string;
@@ -16,7 +16,7 @@ export const LegendTypeChoropleth: React.FC<LegendTypeChoroplethProps> = ({
 }: LegendTypeChoroplethProps) => {
   return (
     <div
-      className={cx({
+      className={cn({
         [className]: !!className,
       })}
     >
diff --git a/app/components/map/legend/types/matrix/component.tsx b/app/components/map/legend/types/matrix/component.tsx
index da95f18b02..698ebe7caa 100644
--- a/app/components/map/legend/types/matrix/component.tsx
+++ b/app/components/map/legend/types/matrix/component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface LegendTypeMatrixProps {
   className?: string;
@@ -108,7 +108,7 @@ export const LegendTypeMatrix: React.FC<LegendTypeMatrixProps> = ({
       </div>
 
       <div
-        className={cx({
+        className={cn({
           [className]: !!className,
         })}
       >
diff --git a/app/components/modal/component.tsx b/app/components/modal/component.tsx
index 27ca0f5fe9..7688938e14 100644
--- a/app/components/modal/component.tsx
+++ b/app/components/modal/component.tsx
@@ -1,7 +1,5 @@
 import React, { Children, cloneElement, isValidElement, useEffect, ReactElement } from 'react';
 
-import cx from 'classnames';
-
 import { useDialog } from '@react-aria/dialog';
 import { FocusScope } from '@react-aria/focus';
 import { useOverlay, usePreventScroll, useModal, OverlayContainer } from '@react-aria/overlays';
@@ -10,6 +8,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { useMultipleModal } from 'hooks/modal';
 
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
 
@@ -98,7 +97,7 @@ export const Modal: React.FC<ModalProps> = ({
                 delay: 0.125,
               },
             }}
-            className={cx({ [OVERLAY_CLASSES]: true })}
+            className={cn({ [OVERLAY_CLASSES]: true })}
           >
             <FocusScope restoreFocus autoFocus>
               <div {...overlayProps} {...dialogProps} {...modalProps} ref={containerRef}>
@@ -124,7 +123,7 @@ export const Modal: React.FC<ModalProps> = ({
                       delay: 0,
                     },
                   }}
-                  className={cx({ [CONTENT_CLASSES[size]]: true, [className]: !!className })}
+                  className={cn({ [CONTENT_CLASSES[size]]: true, [className]: !!className })}
                   style={{
                     maxHeight: '90%',
                   }}
diff --git a/app/components/progress-bar/component.tsx b/app/components/progress-bar/component.tsx
index b7b4528a58..d363c25ebb 100644
--- a/app/components/progress-bar/component.tsx
+++ b/app/components/progress-bar/component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface ProgressBarProps {
   progress: number;
@@ -13,7 +13,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
 }: ProgressBarProps) => {
   return (
     <div
-      className={cx({
+      className={cn({
         'relative w-full': true,
         className: !!className,
       })}
diff --git a/app/components/scenarios/blm-chart/component.tsx b/app/components/scenarios/blm-chart/component.tsx
index 7daf371db4..bf201b8b89 100644
--- a/app/components/scenarios/blm-chart/component.tsx
+++ b/app/components/scenarios/blm-chart/component.tsx
@@ -1,9 +1,9 @@
 import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 
-import classnames from 'classnames';
-
 import { scaleLinear, line, curveMonotoneX, area } from 'd3';
 
+import { cn } from 'utils/cn';
+
 import {
   VISUALIZATION_PADDING,
   X_AXIS_HEIGHT,
@@ -280,7 +280,7 @@ export const BlmChart: React.FC<BlmChartProps> = ({ data }: BlmChartProps) => {
 
                   <foreignObject x={0} y={0} width={THUMBNAIL_SIZE} height={THUMBNAIL_SIZE}>
                     <div
-                      className={classnames({
+                      className={cn({
                         'h-full w-full rounded-2xl bg-white bg-contain': true,
                         'border-2 border-gray-900': !isBlm,
                         'border-2 border-primary-500': isBlm,
@@ -303,7 +303,7 @@ export const BlmChart: React.FC<BlmChartProps> = ({ data }: BlmChartProps) => {
                 className="h-3 w-3 -translate-x-1.5 -translate-y-1.5 transform"
               >
                 <div
-                  className={classnames({
+                  className={cn({
                     'h-3 w-3 rounded-full border-black': true,
                     'bg-white': !isBlm || !!hoveredPointCoords,
                     'bg-primary-500': isBlm && !hoveredPointCoords,
diff --git a/app/components/scenarios/item/component.tsx b/app/components/scenarios/item/component.tsx
index d91163e448..bd78e53237 100644
--- a/app/components/scenarios/item/component.tsx
+++ b/app/components/scenarios/item/component.tsx
@@ -1,11 +1,10 @@
 import React, { ReactNode, useCallback, useMemo, useState } from 'react';
 
-import cx from 'classnames';
-
 import Button from 'components/button';
 import Icon from 'components/icon';
 import ProgressBar from 'components/progress-bar';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import ARROW_RIGHT_SVG from 'svgs/ui/arrow-right.svg?sprite';
 import LOCK_SVG from 'svgs/ui/lock.svg?sprite';
@@ -177,18 +176,18 @@ export const Item: React.FC<ItemProps> = ({
 
   return (
     <div
-      className={cx({
+      className={cn({
         'flex flex-col space-y-0.5 bg-transparent': true,
         [className]: className,
       })}
     >
       <div
-        className={cx({
+        className={cn({
           'flex h-16 space-x-0.5 bg-transparent': true,
         })}
       >
         <div
-          className={cx({
+          className={cn({
             'flex flex-grow flex-col rounded-l-3xl bg-gray-800 pl-8': true,
             'rounded-bl-none': settings,
           })}
@@ -228,7 +227,7 @@ export const Item: React.FC<ItemProps> = ({
 
                       <div className="line-clamp-1">
                         <span
-                          className={cx({
+                          className={cn({
                             'm-0 inline-block text-xs': true,
                             [SCENARIO_STATES[status].styles]:
                               status !== SCENARIO_STATES[status].text,
@@ -237,7 +236,7 @@ export const Item: React.FC<ItemProps> = ({
                           {`${SCENARIO_STATES[status].text} `}
                         </span>
                         <span
-                          className={cx({
+                          className={cn({
                             'ml-1 inline-block text-xs': true,
                             [SCENARIO_STATES[status].styles]:
                               status !== SCENARIO_STATES[status].text,
@@ -278,7 +277,7 @@ export const Item: React.FC<ItemProps> = ({
         <button
           type="button"
           onClick={onEdit}
-          className={cx({
+          className={cn({
             'flex-column flex h-full items-center rounded-r-3xl bg-gray-800 px-8': true,
             'text-primary-500 transition-colors hover:bg-primary-500 hover:text-black focus:bg-primary-300 focus:text-black focus:outline-none':
               true,
diff --git a/app/components/table/component.tsx b/app/components/table/component.tsx
index a58bcbb41e..b0e94889bb 100644
--- a/app/components/table/component.tsx
+++ b/app/components/table/component.tsx
@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
-import cx from 'classnames';
-
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite';
 import ARROW_UP_SVG from 'svgs/ui/arrow-up.svg?sprite';
@@ -54,7 +53,7 @@ export const Table: React.FC<TableProps> = ({
 
   return (
     <table
-      className={cx({
+      className={cn({
         'w-full': true,
         [className]: !!className,
       })}
@@ -70,7 +69,7 @@ export const Table: React.FC<TableProps> = ({
             return (
               <th
                 key={`header-${header.id}`}
-                className={cx({
+                className={cn({
                   'cursor-pointer px-4 text-left font-heading text-sm font-medium': true,
                   'pl-10 pr-0': firstHeader,
                   'pl-0 pr-10': lastHeader,
@@ -100,7 +99,7 @@ export const Table: React.FC<TableProps> = ({
           return (
             <tr
               key={row.id}
-              className={cx({
+              className={cn({
                 'bg-gray-200 bg-opacity-50': !rowIsSelected && (rowIndex + 1) % 2 === 0,
                 'bg-white': !rowIsSelected && (rowIndex + 1) % 2 === 1,
                 'bg-primary-300 bg-opacity-30': rowIsSelected,
@@ -120,7 +119,7 @@ export const Table: React.FC<TableProps> = ({
                 return (
                   <td
                     key={`td-${headerId}-${value}`}
-                    className={cx({
+                    className={cn({
                       'px-4 py-2': true,
                       'pl-10 pr-0': firstColumn,
                       'pl-0 pr-8': lastColumn,
diff --git a/app/components/table2/component.tsx b/app/components/table2/component.tsx
index 87a6862d1c..0cb365e586 100644
--- a/app/components/table2/component.tsx
+++ b/app/components/table2/component.tsx
@@ -2,10 +2,9 @@ import React, { useEffect } from 'react';
 
 import { useTable, useFlexLayout, usePagination, useSortBy } from 'react-table';
 
-import cx from 'classnames';
-
 import Icon from 'components/icon';
 import Loading from 'components/loading';
+import { cn } from 'utils/cn';
 
 import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite';
 
@@ -126,7 +125,7 @@ export const Table2: React.FC<Table2Props> = ({
                       role="presentation"
                       key={headerKey}
                       {...restHeaderProps}
-                      className={cx({
+                      className={cn({
                         'flex items-center space-x-2 py-5 pr-5 font-heading text-xs font-medium uppercase':
                           true,
                         'cursor-pointer': canSort,
@@ -147,7 +146,7 @@ export const Table2: React.FC<Table2Props> = ({
                       {sortSelected && sortSelected.id === column.id && (
                         <Icon
                           icon={ARROW_DOWN_SVG}
-                          className={cx({
+                          className={cn({
                             'h-3 w-3': true,
                             'rotate-180 transform': !sortSelected.desc,
                           })}
@@ -175,7 +174,7 @@ export const Table2: React.FC<Table2Props> = ({
                     <div
                       key={cellKey}
                       {...restCellProps}
-                      className={cx({
+                      className={cn({
                         'py-5 pr-5': true,
                         [cell?.column?.className]: !!cell?.column?.className,
                       })}
diff --git a/app/components/tabs/component.tsx b/app/components/tabs/component.tsx
index 402243eb1a..ba1d605e0d 100644
--- a/app/components/tabs/component.tsx
+++ b/app/components/tabs/component.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import { motion } from 'framer-motion';
 
+import { cn } from 'utils/cn';
+
 export interface TabsProps {
   items: {
     id: number | string;
@@ -26,7 +26,7 @@ export const Tabs: React.FC<TabsProps> = ({ items = [], selected, onSelected }:
             aria-label="select-tab"
             type="button"
             disabled={tab.status === 'disabled'}
-            className={cx({
+            className={cn({
               'relative py-4 text-sm text-white focus:outline-none': true,
               'text-opacity-50': tab.status !== 'disabled',
               'hover:text-opacity-75': tab.id !== selected && tab.status !== 'disabled',
diff --git a/app/components/tag/component.tsx b/app/components/tag/component.tsx
index 238a99b977..eb7f58e466 100644
--- a/app/components/tag/component.tsx
+++ b/app/components/tag/component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface TagProps {
   children: React.ReactNode;
@@ -9,14 +9,14 @@ export interface TagProps {
 
 export const Tag: React.FC<TagProps> = ({ children, className }: TagProps) => (
   <div
-    className={cx({
+    className={cn({
       'relative inline-flex rounded': true,
       [`${className}`]: !!className,
       'bg-gray-300 text-black': !className,
     })}
   >
     <div
-      className={cx({
+      className={cn({
         'flex-col px-2 py-1 text-sm leading-none': true,
       })}
     >
diff --git a/app/components/toast/component.tsx b/app/components/toast/component.tsx
index 4e72d000bb..55bb4298aa 100644
--- a/app/components/toast/component.tsx
+++ b/app/components/toast/component.tsx
@@ -1,11 +1,10 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 
-import cx from 'classnames';
-
 import { motion, useAnimation } from 'framer-motion';
 import type { ResolvedValues } from 'framer-motion';
 
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import ERROR_SVG from 'svgs/notifications/error.svg?sprite';
 import INFO_SVG from 'svgs/notifications/info.svg?sprite';
@@ -82,7 +81,7 @@ export const Toast: React.FC<ToastProps> = ({
       }}
     >
       <div
-        className={cx({
+        className={cn({
           'pointer-events-auto mb-2 w-full': true,
         })}
       >
@@ -100,19 +99,19 @@ export const Toast: React.FC<ToastProps> = ({
         >
           <div className="flex flex-grow">
             <div
-              className={cx({
+              className={cn({
                 'relative flex h-10 w-10 flex-shrink-0 items-center justify-center overflow-hidden rounded-xl shadow-md':
                   true,
               })}
             >
               <div
-                className={cx({
+                className={cn({
                   'absolute left-0 top-0 z-0 h-full w-full bg-gradient-to-b': true,
                   [THEME[level]?.hoverBg]: true,
                 })}
               />
               <motion.div
-                className={cx({
+                className={cn({
                   'absolute left-0 top-0 z-10 h-full w-full bg-gradient-to-b': true,
                   [THEME[level]?.bg]: true,
                 })}
diff --git a/app/components/tooltip/arrow/component.tsx b/app/components/tooltip/arrow/component.tsx
index 8b989b445a..8da96a134d 100644
--- a/app/components/tooltip/arrow/component.tsx
+++ b/app/components/tooltip/arrow/component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface ArrowProps {
   className?: string;
@@ -13,7 +13,7 @@ export const Arrow: React.FC<ArrowProps> = (props: ArrowProps) => {
   return (
     <div
       {...props}
-      className={cx({
+      className={cn({
         '-bottom-1': placement && placement.includes('top'),
         '-top-1': placement && placement.includes('bottom'),
         '-right-1': placement && placement.includes('left'),
@@ -21,7 +21,7 @@ export const Arrow: React.FC<ArrowProps> = (props: ArrowProps) => {
       })}
     >
       <div
-        className={cx({
+        className={cn({
           'h-2 w-2 rotate-45 transform bg-white': true,
           [className]: !!className,
         })}
diff --git a/app/components/tooltip/component.tsx b/app/components/tooltip/component.tsx
index 949d8bdb52..3853e68e64 100644
--- a/app/components/tooltip/component.tsx
+++ b/app/components/tooltip/component.tsx
@@ -1,11 +1,11 @@
 import React, { useRef } from 'react';
 
-import cx from 'classnames';
-
 import Tippy from '@tippyjs/react/headless';
 import { useSpring, motion } from 'framer-motion';
 import { SpringOptions } from 'popmotion';
 
+import { cn } from 'utils/cn';
+
 import Arrow from './arrow';
 import { TooltipProps } from './types';
 
@@ -74,7 +74,7 @@ export const Tooltip = ({
           >
             <div className="relative shadow-2xl">
               <div
-                className={cx({
+                className={cn({
                   'flex-column relative flex flex-grow overflow-hidden': true,
                   [contentClassName]: !!contentClassName,
                 })}
diff --git a/app/hooks/map/constants.tsx b/app/hooks/map/constants.tsx
index f19de55c71..0259d19a08 100644
--- a/app/hooks/map/constants.tsx
+++ b/app/hooks/map/constants.tsx
@@ -146,7 +146,7 @@ export const LEGEND_LAYERS = {
     icon: (
       <Icon
         icon={HEXAGON_SVG}
-        className="fill-none mt-0.5 h-3.5 w-3.5 stroke-current stroke-2"
+        className="mt-0.5 h-3.5 w-3.5 fill-none stroke-current stroke-2"
         style={{ color: COLORS.primary }}
       />
     ),
@@ -281,7 +281,7 @@ export const LEGEND_LAYERS = {
       icon: (
         <Icon
           icon={HEXAGON_SVG}
-          className="fill-none mt-0.5 h-3.5 w-3.5 stroke-current stroke-2"
+          className="mt-0.5 h-3.5 w-3.5 fill-none stroke-current stroke-2"
           style={{ color: COLORS.available }}
         />
       ),
@@ -301,7 +301,7 @@ export const LEGEND_LAYERS = {
       icon: (
         <Icon
           icon={HEXAGON_SVG}
-          className="fill-none mt-0.5 h-3.5 w-3.5 stroke-current stroke-2"
+          className="mt-0.5 h-3.5 w-3.5 fill-none stroke-current stroke-2"
           style={{ color: COLORS.include }}
         />
       ),
@@ -321,7 +321,7 @@ export const LEGEND_LAYERS = {
       icon: (
         <Icon
           icon={HEXAGON_SVG}
-          className="fill-none mt-0.5 h-3.5 w-3.5 stroke-current stroke-2"
+          className="mt-0.5 h-3.5 w-3.5 fill-none stroke-current stroke-2"
           style={{ color: COLORS.exclude }}
         />
       ),
diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts
index 1fbe551d07..18cf67fcfb 100644
--- a/app/hooks/map/index.ts
+++ b/app/hooks/map/index.ts
@@ -1028,7 +1028,7 @@ export function usePUCompareLayer({ active, sid, sid2, cache = 0, options }: Use
   //     ...COLOR_RAMPS.map((c, i) => {
   //       const step = `${Math.floor((i / (COLOR_NUMBER + 1)) % (COLOR_NUMBER + 1))}
   // ${i % (COLOR_NUMBER + 1)}`;
-  //       const color = cx({
+  //       const color = cn({
   //         '#000000': step === '00',
   //         '#FFFFFF': step === '1010',
   //         [c]: step !== '00' && step !== '1010',
diff --git a/app/layout/community/published-projects/list/table/item/duplicate-button/component.tsx b/app/layout/community/published-projects/list/table/item/duplicate-button/component.tsx
index 5c13f7a84b..be930620bc 100644
--- a/app/layout/community/published-projects/list/table/item/duplicate-button/component.tsx
+++ b/app/layout/community/published-projects/list/table/item/duplicate-button/component.tsx
@@ -1,6 +1,4 @@
-import React, { useCallback, useState } from 'react';
-
-import classnames from 'classnames';
+import React, { ComponentProps, useCallback, useState } from 'react';
 
 import { usePlausible } from 'next-plausible';
 
@@ -12,6 +10,7 @@ import Button from 'components/button';
 import Icon from 'components/icon';
 import Loading from 'components/loading';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import DOWNLOAD_SVG from 'svgs/ui/download.svg?sprite';
 
@@ -108,10 +107,12 @@ export const DuplicateButton: React.FC<DuplicateButtonProps> = ({
           className="group px-6"
           size="s"
           disabled={duplicating || !user}
-          theme={classnames({
-            'transparent-white': theme === 'light',
-            'transparent-black': theme !== 'light',
-          })}
+          theme={
+            cn({
+              'transparent-white': theme === 'light',
+              'transparent-black': theme !== 'light',
+            }) as ComponentProps<typeof Button>['theme']
+          }
           onClick={onDuplicate}
         >
           <Loading
@@ -121,7 +122,7 @@ export const DuplicateButton: React.FC<DuplicateButtonProps> = ({
           />
           Duplicate
           <Icon
-            className={classnames({
+            className={cn({
               'ml-2 h-3.5 w-3.5': true,
               'text-white group-hover:text-black': theme === 'light',
               'text-black group-hover:text-white': theme === 'dark',
diff --git a/app/layout/header/title/component.tsx b/app/layout/header/title/component.tsx
index 86de7151b5..28e4c05f35 100644
--- a/app/layout/header/title/component.tsx
+++ b/app/layout/header/title/component.tsx
@@ -2,8 +2,6 @@ import React, { useCallback } from 'react';
 
 import { Form as FormRFF, Field as FieldRFF } from 'react-final-form';
 
-import cx from 'classnames';
-
 import { useRouter } from 'next/router';
 
 import { AnimatePresence, motion } from 'framer-motion';
@@ -14,6 +12,7 @@ import { useToasts } from 'hooks/toast';
 
 import { composeValidators } from 'components/forms/validations';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 export interface TitleProps {}
 
@@ -147,7 +146,7 @@ export const Title: React.FC<TitleProps> = () => {
       {!projectIsLoading && !scenarioIsLoading && (
         <motion.div
           key="project-scenario-loading"
-          className={cx({
+          className={cn({
             'flex divide-x': true,
           })}
           initial={{ y: -10 }}
@@ -173,7 +172,7 @@ export const Title: React.FC<TitleProps> = () => {
                   id="form-title-project"
                   onSubmit={fprops.handleSubmit}
                   autoComplete="off"
-                  className={cx({
+                  className={cn({
                     'relative h-6 max-w-max px-2': true,
                   })}
                 >
@@ -197,13 +196,13 @@ export const Title: React.FC<TitleProps> = () => {
                         }
                       >
                         <div
-                          className={cx({
+                          className={cn({
                             'relative h-6': true,
                           })}
                         >
                           <input
                             {...input}
-                            className={cx({
+                            className={cn({
                               'absolute left-0 top-0 h-full w-full cursor-pointer overflow-ellipsis border-none bg-transparent px-1.5 font-heading font-normal focus:bg-primary-300 focus:text-gray-600 focus:outline-none':
                                 true,
                             })}
@@ -218,7 +217,7 @@ export const Title: React.FC<TitleProps> = () => {
                           />
 
                           <h1
-                            className={cx({
+                            className={cn({
                               'invisible h-full overflow-ellipsis px-1.5 font-heading font-normal':
                                 true,
                             })}
diff --git a/app/layout/help/beacon/component.tsx b/app/layout/help/beacon/component.tsx
index 977f0ed4df..945098f778 100644
--- a/app/layout/help/beacon/component.tsx
+++ b/app/layout/help/beacon/component.tsx
@@ -12,8 +12,6 @@ import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { useResizeDetector } from 'react-resize-detector';
 
-import cx from 'classnames';
-
 import { useRouter } from 'next/router';
 
 import type { Placement } from '@popperjs/core';
@@ -24,6 +22,7 @@ import { useHelp } from 'hooks/help';
 import Tooltip from 'components/tooltip';
 import HelpSpotlight from 'layout/help/spotlight';
 import HelpTooltip from 'layout/help/tooltip';
+import { cn } from 'utils/cn';
 
 const flipModifier = {
   name: 'flip',
@@ -156,7 +155,7 @@ export const HelpBeacon: React.FC<HelpBeaconProps> = ({
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 ref={(el) => setBeaconRef(el)}
-                className={cx({
+                className={cn({
                   'z-30': !beaconClassName,
                   [beaconClassName]: !!beaconClassName,
                   'pointer-events-auto visible': active,
@@ -171,7 +170,7 @@ export const HelpBeacon: React.FC<HelpBeaconProps> = ({
                 <button
                   aria-label="manage-visibility"
                   type="button"
-                  className={cx({
+                  className={cn({
                     'beacon relative flex h-6 w-6 translate-y-3/4 transform items-center justify-center rounded-full border-2 border-gray-800 bg-primary-500 transition focus:outline-none':
                       true,
                   })}
diff --git a/app/layout/help/coming-soon/component.tsx b/app/layout/help/coming-soon/component.tsx
index 8472d7a460..b57c7d2b61 100644
--- a/app/layout/help/coming-soon/component.tsx
+++ b/app/layout/help/coming-soon/component.tsx
@@ -1,8 +1,7 @@
 import React, { ReactChild } from 'react';
 
-import cx from 'classnames';
-
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 const THEME = {
   dark: {
@@ -28,14 +27,14 @@ export const ComingSoon: React.FC<ComingSoonProps> = ({
   return (
     <Tooltip
       arrow
-      arrowClassName={cx({
+      arrowClassName={cn({
         [THEME[theme].arrow]: true,
       })}
       placement={placement}
       maxWidth={350}
       content={
         <div
-          className={cx({
+          className={cn({
             [THEME[theme].base]: true,
           })}
         >
diff --git a/app/layout/loading/component.tsx b/app/layout/loading/component.tsx
index aeb9a747ec..ef906817ba 100644
--- a/app/layout/loading/component.tsx
+++ b/app/layout/loading/component.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import { useNProgress } from '@tanem/react-nprogress';
 import { AnimatePresence, motion } from 'framer-motion';
 
+import { cn } from 'utils/cn';
+
 export interface LoadingProps {
   loading?: boolean;
 }
@@ -21,12 +21,12 @@ export const Loading: React.FC<LoadingProps> = ({ loading }: LoadingProps) => {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          className={cx({
+          className={cn({
             'z-60 fixed h-full w-full': true,
           })}
         >
           <div
-            className={cx({
+            className={cn({
               'absolute left-0 top-0 h-1 w-full bg-gradient-to-r from-purple-600 to-blue-600 transition-transform':
                 true,
             })}
diff --git a/app/layout/pill/component.tsx b/app/layout/pill/component.tsx
index 24fbeac9ec..9be1650555 100644
--- a/app/layout/pill/component.tsx
+++ b/app/layout/pill/component.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface PillProps {
   selected?: boolean;
@@ -10,14 +10,14 @@ export interface PillProps {
 export const Pill: React.FC<PillProps> = ({ children, selected }: PillProps) => {
   return (
     <div
-      className={cx({
+      className={cn({
         'rounded-[40px] bg-gray-800': true,
         'ring-1 ring-inset ring-gray-600 ring-offset-8 ring-offset-gray-800': selected,
         'flex flex-grow flex-col overflow-hidden': true,
       })}
     >
       <div
-        className={cx({
+        className={cn({
           'flex flex-grow flex-col overflow-hidden px-10': true,
           'py-10': selected,
           'py-3': !selected,
diff --git a/app/layout/project/sidebar/project/header/contributors/edit-dropdown/card/component.tsx b/app/layout/project/sidebar/project/header/contributors/edit-dropdown/card/component.tsx
index 590b984c27..587d1d7b00 100644
--- a/app/layout/project/sidebar/project/header/contributors/edit-dropdown/card/component.tsx
+++ b/app/layout/project/sidebar/project/header/contributors/edit-dropdown/card/component.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback, useState } from 'react';
 
-import cx from 'classnames';
-
 import { useRouter } from 'next/router';
 
 import { useMe } from 'hooks/me';
@@ -13,6 +11,7 @@ import Avatar from 'components/avatar';
 import Button from 'components/button';
 import ConfirmationPrompt from 'components/confirmation-prompt';
 import Select from 'components/forms/select';
+import { cn } from 'utils/cn';
 import { ROLES, ROLE_OPTIONS } from 'utils/constants-roles';
 
 import DELETE_USER_WARNING_SVG from 'svgs/notifications/delete-user-warning.svg?sprite';
@@ -157,7 +156,7 @@ export const UserCard: React.FC<UserCardProps> = ({
       </div>
 
       <Button
-        className={cx({
+        className={cn({
           'group h-6 flex-shrink-0 bg-gray-700 py-2 text-sm': true,
           invisible: !isOwner || (isOwner && id === meData.id),
         })}
diff --git a/app/layout/project/sidebar/project/header/contributors/edit-dropdown/component.tsx b/app/layout/project/sidebar/project/header/contributors/edit-dropdown/component.tsx
index 9a1d9e1f3f..4028aab991 100644
--- a/app/layout/project/sidebar/project/header/contributors/edit-dropdown/component.tsx
+++ b/app/layout/project/sidebar/project/header/contributors/edit-dropdown/component.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
-import cx from 'classnames';
-
 import { useRouter } from 'next/router';
 
 import { useDebouncedCallback } from 'use-debounce';
@@ -17,6 +15,7 @@ import { useToasts } from 'hooks/toast';
 
 import Button from 'components/button';
 import Search from 'components/search';
+import { cn } from 'utils/cn';
 
 import UserCard from './card';
 
@@ -127,7 +126,7 @@ export const EditContributorsDropdown: React.FC = () => {
                 <div className="text-sm">{SEARCH_RESULT.displayName || SEARCH_RESULT.email}</div>
 
                 <Button
-                  className={cx({
+                  className={cn({
                     'group h-6 flex-shrink-0 py-2  text-sm': true,
                   })}
                   theme="primary"
diff --git a/app/layout/project/sidebar/project/header/project-button/publish-modal/company-uploader/component.tsx b/app/layout/project/sidebar/project/header/project-button/publish-modal/company-uploader/component.tsx
index bfb6820db7..5c7db1f702 100644
--- a/app/layout/project/sidebar/project/header/project-button/publish-modal/company-uploader/component.tsx
+++ b/app/layout/project/sidebar/project/header/project-button/publish-modal/company-uploader/component.tsx
@@ -3,8 +3,6 @@ import React, { useCallback, useState } from 'react';
 import { useDropzone, DropzoneProps } from 'react-dropzone';
 import { Form, Field as FieldRFF } from 'react-final-form';
 
-import cx from 'classnames';
-
 import { motion } from 'framer-motion';
 
 import { useToasts } from 'hooks/toast';
@@ -19,6 +17,7 @@ import InfoButton from 'components/info-button';
 import Loading from 'components/loading';
 import Uploader from 'components/uploader';
 import { COMPANY_LOGO_UPLOADER_MAX_SIZE } from 'constants/file-uploader-size-limits';
+import { cn } from 'utils/cn';
 import { bytesToKilobytes } from 'utils/units';
 
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
@@ -203,7 +202,7 @@ export const CompanyUploader: React.FC<CompanyUploaderProps> = ({
                               <div
                                 {...props}
                                 {...getRootProps()}
-                                className={cx({
+                                className={cn({
                                   'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                     true,
                                   'bg-gray-600': isDragActive,
diff --git a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/chart/component.tsx b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/chart/component.tsx
index 445df8fec9..ed8d42b2a3 100644
--- a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/chart/component.tsx
+++ b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/chart/component.tsx
@@ -1,10 +1,9 @@
 import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 
-import classnames from 'classnames';
-
 import { scaleLinear, line, area, format } from 'd3';
 
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 import { blmFormat } from 'utils/units';
 
 import { VISUALIZATION_PADDING, X_AXIS_HEIGHT, Y_AXIS_WIDTH, Y_BASELINE_OFFSET } from './constants';
@@ -230,7 +229,7 @@ export const BlmChart: React.FC<BlmChartProps> = ({ data, selected, onChange }:
                 >
                   <div
                     aria-hidden="true"
-                    className={classnames({
+                    className={cn({
                       'h-3 w-3 cursor-pointer rounded-full border-2 border-blue-600 bg-black hover:border-2 hover:bg-primary-500':
                         true,
                       'bg-blue-600': blmValue === selected,
diff --git a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/card/component.tsx b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/card/component.tsx
index 646468a583..53e86981fd 100644
--- a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/card/component.tsx
+++ b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/card/component.tsx
@@ -1,8 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 
-import cx from 'classnames';
-
 import Loading from 'components/loading';
+import { cn } from 'utils/cn';
 import { blmFormat } from 'utils/units';
 
 export interface ScenariosBlmResultsCardProps {
@@ -68,19 +67,19 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
     <div
       role="presentation"
       key={id}
-      className={cx({
+      className={cn({
         'relative cursor-pointer overflow-hidden rounded-md': true,
       })}
       onClick={handleClick}
     >
       <div
-        className={cx({
+        className={cn({
           'pointer-events-none absolute left-0 top-0 z-10 h-full w-full rounded-md ring-2 ring-inset ring-offset-primary-500':
             selected,
         })}
       />
       <dl
-        className={cx({
+        className={cn({
           'space-y-0.5 p-2': true,
           'bg-gray-700': !selected,
           'bg-primary-500': selected,
@@ -88,7 +87,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
       >
         <div className="flex justify-between">
           <dt
-            className={cx({
+            className={cn({
               'text-xs uppercase': true,
               'text-gray-800': selected,
             })}
@@ -96,7 +95,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
             BLM
           </dt>
           <dd
-            className={cx({
+            className={cn({
               'text-xs': true,
               'text-primary-500': !selected,
               'text-gray-800': selected,
@@ -107,7 +106,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
         </div>
         <div className="flex justify-between">
           <dt
-            className={cx({
+            className={cn({
               'text-xs uppercase': true,
               'text-gray-800': selected,
             })}
@@ -115,7 +114,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
             Cost
           </dt>
           <dd
-            className={cx({
+            className={cn({
               'text-xs': true,
               'text-primary-500': !selected,
               'text-gray-800': selected,
@@ -145,7 +144,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
           >
             <img className="w-full" src={pngData} alt={`BLM: ${blmValue}`} />
             <img
-              className={cx({
+              className={cn({
                 'pointer-events-none absolute left-0 top-0 z-10': true,
                 invisible: !enter,
               })}
diff --git a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/component.tsx b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/component.tsx
index 4deeff52a3..4ebdd8393e 100644
--- a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/component.tsx
+++ b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/component.tsx
@@ -2,8 +2,6 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { Form as FormRFF, Field as FieldRFF } from 'react-final-form';
 
-import cx from 'classnames';
-
 import { useRouter } from 'next/router';
 
 import { useCanEditScenario } from 'hooks/permissions';
@@ -17,6 +15,7 @@ import Label from 'components/forms/label';
 import { composeValidators } from 'components/forms/validations';
 import InfoButton from 'components/info-button';
 import Loading from 'components/loading';
+import { cn } from 'utils/cn';
 import { ScenarioSidebarSubTabs, ScenarioSidebarTabs } from 'utils/tabs';
 import { blmFormat } from 'utils/units';
 import { mergeScenarioStatusMetaData } from 'utils/utils-scenarios';
@@ -143,7 +142,7 @@ export const ScenariosBlmResults: React.FC<ScenariosBlmResultsProps> = ({
             {({ form, values, handleSubmit }) => {
               return (
                 <form
-                  className={cx({
+                  className={cn({
                     'relative flex flex-grow flex-col overflow-hidden pt-10 text-white': true,
                     'border-t border-gray-600': editable,
                   })}
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/list/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/list/component.tsx
index cff55d6293..f4af457588 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/list/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/list/component.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback } from 'react';
 
-import cx from 'classnames';
-
 import { useRouter } from 'next/router';
 
 import { useAllPaginatedFeatures } from 'hooks/features';
@@ -10,6 +8,7 @@ import useBottomScrollListener from 'hooks/scroll';
 import Item from 'components/features/raw-item';
 import Loading from 'components/loading';
 import NoResults from 'layout/project/sidebar/project/inventory-panel/components/no-results';
+import { cn } from 'utils/cn';
 
 export interface ScenariosFeaturesAddListProps {
   search?: string;
@@ -59,7 +58,7 @@ export const ScenariosFeaturesAddList: React.FC<ScenariosFeaturesAddListProps> =
 
       <div
         ref={scrollRef}
-        className={cx({
+        className={cn({
           'divide-y divide-dashed divide-black divide-opacity-20 overflow-y-auto overflow-x-hidden bg-white px-8':
             true,
         })}
@@ -101,7 +100,7 @@ export const ScenariosFeaturesAddList: React.FC<ScenariosFeaturesAddListProps> =
       <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-white via-white" />
 
       <div
-        className={cx({
+        className={cn({
           'opacity-100': allFeaturesIsFetchingNextPage,
           'pointer-events-none absolute bottom-0 left-0 z-20 w-full text-center font-heading text-xs uppercase opacity-0 transition':
             true,
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/add/intersect/list/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/add/intersect/list/component.tsx
index fee1b53bdd..7908fed6cd 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/add/intersect/list/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/add/intersect/list/component.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback } from 'react';
 
-import cx from 'classnames';
-
 import { useRouter } from 'next/router';
 
 import { useAllPaginatedFeatures } from 'hooks/features';
@@ -10,6 +8,7 @@ import useBottomScrollListener from 'hooks/scroll';
 import Item from 'components/features/intersect-item';
 import Loading from 'components/loading';
 import NoResults from 'layout/project/sidebar/project/inventory-panel/components/no-results';
+import { cn } from 'utils/cn';
 
 export interface ScenariosFeaturesIntersectListProps {
   search?: string;
@@ -72,7 +71,7 @@ export const ScenariosFeaturesIntersectList: React.FC<ScenariosFeaturesIntersect
 
       <div
         ref={scrollRef}
-        className={cx({
+        className={cn({
           'divide-y divide-dashed divide-black divide-opacity-20 overflow-y-auto overflow-x-hidden bg-white px-8':
             true,
         })}
@@ -99,7 +98,7 @@ export const ScenariosFeaturesIntersectList: React.FC<ScenariosFeaturesIntersect
               return (
                 <div
                   key={`${item.id}`}
-                  className={cx({
+                  className={cn({
                     'border-t border-dashed': i !== 0,
                   })}
                 >
@@ -127,7 +126,7 @@ export const ScenariosFeaturesIntersectList: React.FC<ScenariosFeaturesIntersect
       <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-white via-white" />
 
       <div
-        className={cx({
+        className={cn({
           'opacity-100': allFeaturesIsFetchingNextPage,
           'pointer-events-none absolute bottom-0 left-0 z-20 w-full text-center font-heading text-xs uppercase opacity-0 transition':
             true,
diff --git a/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/list/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/list/index.tsx
index 03d6887510..ed525c71f3 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/list/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/list/index.tsx
@@ -2,8 +2,6 @@ import React, { useEffect, useCallback } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
-import cx from 'classnames';
-
 import { useRouter } from 'next/router';
 
 import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
@@ -123,7 +121,7 @@ export const ScenariosPreGapAnalysisList = ({ search }: { search?: string }) =>
       <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-800 via-gray-800" />
 
       <div
-        className={cx({
+        className={cn({
           'opacity-100': allFeaturesIsFetchingNextPage,
           'pointer-events-none absolute bottom-0 left-0 z-20 w-full text-center font-heading text-xs uppercase opacity-0 transition':
             true,
diff --git a/app/layout/projects/all/list/component.tsx b/app/layout/projects/all/list/component.tsx
index bf730b1019..7c9db0a22f 100644
--- a/app/layout/projects/all/list/component.tsx
+++ b/app/layout/projects/all/list/component.tsx
@@ -2,8 +2,6 @@ import React, { useCallback, useState } from 'react';
 
 import { useSelector } from 'react-redux';
 
-import cx from 'classnames';
-
 import Link from 'next/link';
 
 import { useProjectsUsers } from 'hooks/project-users';
@@ -18,6 +16,7 @@ import HelpBeacon from 'layout/help/beacon';
 import Item from 'layout/projects/all/list/item';
 import DownloadModal from 'layout/projects/common/download-modal';
 import Wrapper from 'layout/wrapper';
+import { cn } from 'utils/cn';
 
 import DELETE_WARNING_SVG from 'svgs/notifications/delete-warning.svg?sprite';
 
@@ -187,7 +186,7 @@ export const ProjectsList: React.FC<ProjectsListProps> = () => {
           >
             <div
               id="projects-list"
-              className={cx({
+              className={cn({
                 'grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3': true,
               })}
             >
diff --git a/app/layout/projects/all/list/item/component.tsx b/app/layout/projects/all/list/item/component.tsx
index 86d84f5185..ec6efdc172 100644
--- a/app/layout/projects/all/list/item/component.tsx
+++ b/app/layout/projects/all/list/item/component.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback, useState } from 'react';
 
-import cx from 'classnames';
-
 import { AnimatePresence, motion } from 'framer-motion';
 import isEmpty from 'lodash/isEmpty';
 
@@ -12,6 +10,7 @@ import Avatar from 'components/avatar';
 import Button from 'components/button';
 import Icon from 'components/icon';
 import type { Project } from 'types/api/project';
+import { cn } from 'utils/cn';
 import { ROLES } from 'utils/constants-roles';
 
 import ARROW_RIGHT_2_SVG from 'svgs/ui/arrow-right-2.svg?sprite';
@@ -104,7 +103,7 @@ export const Item: React.FC<ItemProps> = ({
       <div
         role="presentation"
         style={style}
-        className={cx({
+        className={cn({
           'relative flex cursor-pointer flex-col rounded-[40px] bg-gray-900 px-7 py-8 text-left text-white':
             true,
           [className]: !!className,
@@ -122,7 +121,7 @@ export const Item: React.FC<ItemProps> = ({
           >
             <div className="flex space-x-2">
               <div
-                className={cx({
+                className={cn({
                   'rounded-3xl px-2.5 py-1 text-sm opacity-0 transition-opacity': true,
                   'opacity-100': !!ROLES[projectRole],
                   'bg-yellow-600 bg-opacity-20': isOwner,
@@ -130,7 +129,7 @@ export const Item: React.FC<ItemProps> = ({
                 })}
               >
                 <p
-                  className={cx({
+                  className={cn({
                     'text-yellow-600': isOwner,
                     'text-white': !isOwner,
                   })}
@@ -141,13 +140,13 @@ export const Item: React.FC<ItemProps> = ({
 
               {isPublic && (
                 <div
-                  className={cx({
+                  className={cn({
                     'rounded-3xl px-2.5 py-1 text-sm opacity-0 transition-opacity': true,
                     'bg-primary-500 bg-opacity-20 opacity-100': !!ROLES[projectRole],
                   })}
                 >
                   <p
-                    className={cx({
+                    className={cn({
                       'text-primary-500': ROLES[projectRole],
                     })}
                   >
@@ -159,7 +158,7 @@ export const Item: React.FC<ItemProps> = ({
             </div>
 
             <div
-              className={cx({
+              className={cn({
                 'inline-flex opacity-0 transition-opacity': true,
                 'opacity-100': !isEmpty(userColors),
               })}
@@ -175,7 +174,7 @@ export const Item: React.FC<ItemProps> = ({
                       return (
                         <li
                           key={userId}
-                          className={cx({
+                          className={cn({
                             '-ml-3': i !== 0,
                           })}
                         >
diff --git a/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/upload-item/component.tsx b/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/upload-item/component.tsx
index 86b312f2ae..af9c25dd1f 100644
--- a/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/upload-item/component.tsx
+++ b/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/upload-item/component.tsx
@@ -3,8 +3,6 @@ import React, { useCallback, useState } from 'react';
 import { useDropzone, DropzoneProps } from 'react-dropzone';
 import { useSelector } from 'react-redux';
 
-import cx from 'classnames';
-
 import { motion } from 'framer-motion';
 
 import { useUploadLegacyProjectFile, useCancelUploadLegacyProjectFile } from 'hooks/projects';
@@ -13,6 +11,7 @@ import { useToasts } from 'hooks/toast';
 import Label from 'components/forms/label';
 import Icon from 'components/icon';
 import InfoButton from 'components/info-button';
+import { cn } from 'utils/cn';
 import { bytesToMegabytes } from 'utils/units';
 
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
@@ -154,7 +153,7 @@ export const UploadItem: React.FC<UploadItemProps> = ({ f, input, ...fprops }: U
           <div
             {...fprops}
             {...getRootProps()}
-            className={cx({
+            className={cn({
               'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                 true,
               'bg-gray-600': isDragActive,
diff --git a/app/layout/projects/all/toolbar/upload-btn/upload-modal/component.tsx b/app/layout/projects/all/toolbar/upload-btn/upload-modal/component.tsx
index af17a997d9..6acee17a89 100644
--- a/app/layout/projects/all/toolbar/upload-btn/upload-modal/component.tsx
+++ b/app/layout/projects/all/toolbar/upload-btn/upload-modal/component.tsx
@@ -3,8 +3,6 @@ import React, { useCallback, useRef, useState } from 'react';
 import { useDropzone, DropzoneProps } from 'react-dropzone';
 import { Form, Field as FieldRFF } from 'react-final-form';
 
-import cx from 'classnames';
-
 import { motion } from 'framer-motion';
 
 import { useImportProject } from 'hooks/projects';
@@ -19,6 +17,7 @@ import Icon from 'components/icon';
 import InfoButton from 'components/info-button';
 import Loading from 'components/loading';
 import { PROJECT_UPLOADER_MAX_SIZE } from 'constants/file-uploader-size-limits';
+import { cn } from 'utils/cn';
 import { bytesToMegabytes } from 'utils/units';
 
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
@@ -188,7 +187,7 @@ export const UploadModal: React.FC<UploadModalProps> = ({ onDismiss }: UploadMod
                           <div
                             {...props}
                             {...getRootProps()}
-                            className={cx({
+                            className={cn({
                               'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                 true,
                               'bg-gray-600': isDragActive,
diff --git a/app/layout/projects/new/form/planning-area-grid-uploader/component.tsx b/app/layout/projects/new/form/planning-area-grid-uploader/component.tsx
index df0a05e213..3748bf309d 100644
--- a/app/layout/projects/new/form/planning-area-grid-uploader/component.tsx
+++ b/app/layout/projects/new/form/planning-area-grid-uploader/component.tsx
@@ -4,8 +4,6 @@ import { useDropzone, DropzoneProps } from 'react-dropzone';
 import { Form, Field } from 'react-final-form';
 import { useDispatch, useSelector } from 'react-redux';
 
-import cx from 'classnames';
-
 import {
   setBbox,
   setUploadingGridId,
@@ -25,6 +23,7 @@ import InfoButton from 'components/info-button';
 import Loading from 'components/loading';
 import Uploader from 'components/uploader';
 import { PLANNING_AREA_GRID_UPLOADER_MAX_SIZE } from 'constants/file-uploader-size-limits';
+import { cn } from 'utils/cn';
 import { bytesToMegabytes } from 'utils/units';
 
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
@@ -229,7 +228,7 @@ export const PlanningAreaGridUploader: React.FC<PlanningAreaGridUploaderProps> =
                             <div
                               {...props}
                               {...getRootProps()}
-                              className={cx({
+                              className={cn({
                                 'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                   true,
                                 'bg-gray-600': isDragActive,
diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx
index 05205c7ec0..869f6f6f2b 100644
--- a/app/layout/projects/new/form/planning-area-uploader/component.tsx
+++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx
@@ -4,8 +4,6 @@ import { useDropzone, DropzoneProps } from 'react-dropzone';
 import { Form, Field } from 'react-final-form';
 import { useDispatch, useSelector } from 'react-redux';
 
-import cx from 'classnames';
-
 import {
   setBbox,
   setUploadingPlanningArea,
@@ -26,6 +24,7 @@ import InfoButton from 'components/info-button';
 import Loading from 'components/loading';
 import Uploader from 'components/uploader';
 import { PLANNING_AREA_UPLOADER_MAX_SIZE } from 'constants/file-uploader-size-limits';
+import { cn } from 'utils/cn';
 import { bytesToMegabytes } from 'utils/units';
 
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
@@ -232,7 +231,7 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
                             <div
                               {...props}
                               {...getRootProps()}
-                              className={cx({
+                              className={cn({
                                 'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                   true,
                                 'bg-gray-600': isDragActive,
diff --git a/app/layout/projects/show/scenarios/component.tsx b/app/layout/projects/show/scenarios/component.tsx
index c294d18efb..e57e981343 100644
--- a/app/layout/projects/show/scenarios/component.tsx
+++ b/app/layout/projects/show/scenarios/component.tsx
@@ -3,8 +3,6 @@ import React, { Fragment, useCallback, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 
-import cx from 'classnames';
-
 import { useRouter } from 'next/router';
 
 import { AnimatePresence, motion } from 'framer-motion';
@@ -33,6 +31,7 @@ import NoResults from 'layout/project/sidebar/project/inventory-panel/components
 import ScenarioSettings from 'layout/projects/show/scenarios/settings';
 import ScenarioToolbar from 'layout/projects/show/scenarios/toolbar';
 import ScenarioTypes from 'layout/projects/show/scenarios/types';
+import { cn } from 'utils/cn';
 
 import bgScenariosDashboard from 'images/bg-scenarios-dashboard.png';
 
@@ -255,7 +254,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
                       })}
                     >
                       <div
-                        className={cx({
+                        className={cn({
                           'mt-3': i !== 0,
                         })}
                       >
@@ -278,7 +277,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
             <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-black via-black" />
 
             <div
-              className={cx({
+              className={cn({
                 'opacity-100': scenariosIsFetchingNextPage,
                 'pointer-events-none absolute bottom-0 left-0 z-20 w-full text-center font-heading text-xs uppercase opacity-0 transition':
                   true,
@@ -337,7 +336,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
           {(hasScenarios || search || hasFilters) && (
             <button
               type="button"
-              className={cx({
+              className={cn({
                 'group flex h-16 w-full flex-shrink-0 items-center justify-center space-x-3 rounded-3xl bg-gray-800 px-8 text-sm text-primary-500 transition hover:bg-gray-900':
                   true,
                 'pointer-events-none opacity-50': !editable,
diff --git a/app/layout/projects/show/scenarios/types/component.tsx b/app/layout/projects/show/scenarios/types/component.tsx
index 0071189993..a461c2d6f9 100644
--- a/app/layout/projects/show/scenarios/types/component.tsx
+++ b/app/layout/projects/show/scenarios/types/component.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import { SCENARIO_TYPES } from './constants';
 
@@ -24,7 +23,7 @@ export const ProjectScenariosType: React.FC<ProjectScenariosTypeProps> = () => {
           return (
             <li
               key={`${s.id}`}
-              className={cx({
+              className={cn({
                 'group cursor-pointer rounded-3xl border-2 border-transparent transition-all hover:border-gray-200 hover:shadow-2xl':
                   true,
                 'pointer-events-none opacity-25': s.disabled,
diff --git a/app/layout/scenarios/edit/tabs/component.tsx b/app/layout/scenarios/edit/tabs/component.tsx
index 1807f50089..1ef34a8d91 100644
--- a/app/layout/scenarios/edit/tabs/component.tsx
+++ b/app/layout/scenarios/edit/tabs/component.tsx
@@ -2,8 +2,6 @@ import React, { useCallback, useMemo } from 'react';
 
 import { useSelector, useDispatch } from 'react-redux';
 
-import cx from 'classnames';
-
 import { useRouter } from 'next/router';
 
 import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
@@ -17,6 +15,7 @@ import { useScenario } from 'hooks/scenarios';
 import Tabs from 'components/tabs';
 import { TabsProps } from 'components/tabs/component';
 import HelpBeacon from 'layout/help/beacon';
+import { cn } from 'utils/cn';
 import { SCENARIO_EDITING_META_DATA_DEFAULT_VALUES } from 'utils/utils-scenarios';
 
 import { TABS, STATUS } from './constants';
@@ -104,13 +103,13 @@ export const ScenariosSidebarTabs: React.FC<ScenariosSidebarTabsProps> = () => {
         animate={{ opacity: 1, y: 0 }}
       >
         <div
-          className={cx({
+          className={cn({
             'rounded-[40px] bg-gray-800': true,
             'flex flex-grow flex-col': true,
           })}
         >
           <div
-            className={cx({
+            className={cn({
               'flex flex-grow flex-col px-10': true,
             })}
           >
diff --git a/app/layout/sections/component.tsx b/app/layout/sections/component.tsx
index 876f6f25ee..442494cded 100644
--- a/app/layout/sections/component.tsx
+++ b/app/layout/sections/component.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import cx from 'classnames';
-
 import { motion } from 'framer-motion';
 
+import { cn } from 'utils/cn';
+
 import Item from './item';
 
 export interface ScenariosSidebarAnalysisSectionsProps {
@@ -24,7 +24,7 @@ export const ScenariosSidebarAnalysisSections: React.FC<ScenariosSidebarAnalysis
   return (
     <motion.div
       key="analysis"
-      className={cx({
+      className={cn({
         'relative ': true,
         'flex min-h-0 flex-col items-start justify-start overflow-hidden': scrollable,
       })}
@@ -36,7 +36,7 @@ export const ScenariosSidebarAnalysisSections: React.FC<ScenariosSidebarAnalysis
         <div className="absolute left-0 top-0 z-10 h-6 w-full bg-gradient-to-b from-gray-800 via-gray-800" />
       )}
       <div
-        className={cx({
+        className={cn({
           'divide-y divide-gray-700 divide-opacity-50': true,
           'overflow-y-auto overflow-x-hidden': scrollable,
         })}
diff --git a/app/layout/sections/item/component.tsx b/app/layout/sections/item/component.tsx
index 6d63bde84f..dd41bb1f56 100644
--- a/app/layout/sections/item/component.tsx
+++ b/app/layout/sections/item/component.tsx
@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 
-import cx from 'classnames';
-
 import { motion } from 'framer-motion';
 
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import ARROW_RIGHT_2_SVG from 'svgs/ui/arrow-right-2.svg?sprite';
 
@@ -36,7 +35,7 @@ export const ScenariosSidebarAnalysisSection: React.FC<ScenariosSidebarAnalysisS
       onClick={() => onChangeSection(id)}
     >
       <h4
-        className={cx({
+        className={cn({
           'font-heading text-xs uppercase': true,
           'opacity-30': disabled,
         })}
@@ -44,7 +43,7 @@ export const ScenariosSidebarAnalysisSection: React.FC<ScenariosSidebarAnalysisS
         {name}
       </h4>
       <p
-        className={cx({
+        className={cn({
           'mt-1 text-sm text-gray-400': true,
           'opacity-30': disabled,
         })}
@@ -84,7 +83,7 @@ export const ScenariosSidebarAnalysisSection: React.FC<ScenariosSidebarAnalysisS
       >
         <Icon
           icon={ARROW_RIGHT_2_SVG}
-          className={cx({
+          className={cn({
             'h-5 w-5 text-primary-500': true,
             'opacity-75': !disabled,
             'opacity-30': disabled,
diff --git a/app/layout/sign-up/password-strenght/component.tsx b/app/layout/sign-up/password-strenght/component.tsx
index e05fa9f675..2c8d5371e1 100644
--- a/app/layout/sign-up/password-strenght/component.tsx
+++ b/app/layout/sign-up/password-strenght/component.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 
-import cx from 'classnames';
-
 import stringEntropy from 'fast-password-entropy';
 
+import { cn } from 'utils/cn';
+
 export interface PaasswordStrengthProps {
   password: string;
 }
@@ -31,7 +31,7 @@ export const PaasswordStrength: React.FC<PaasswordStrengthProps> = ({
     <div className="mt-1 h-4 space-y-0.5">
       <div className="h-1 w-full rounded-md bg-gray-200 text-sm">
         <div
-          className={cx({
+          className={cn({
             'h-full rounded-md': true,
             'bg-green-600': STRENGTH === 'strong',
             'bg-yellow-800': STRENGTH === 'medium',
diff --git a/app/layout/statics/button-link/component.tsx b/app/layout/statics/button-link/component.tsx
index 69c804a92b..be2b7e0682 100644
--- a/app/layout/statics/button-link/component.tsx
+++ b/app/layout/statics/button-link/component.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
-import classnames from 'classnames';
-
 import Link from 'next/link';
 
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import ARROW_RIGHT_2_SVG from 'svgs/ui/arrow-right-2.svg?sprite';
 
@@ -24,7 +23,7 @@ export const StaticButtonLink: React.FC<StaticButtonLinkProps> = ({
   const children = (
     <>
       <p
-        className={classnames({
+        className={cn({
           'mr-4 text-lg underline': true,
           'text-gray-700': theme === 'dark',
           'text-white': theme === 'light',
@@ -33,7 +32,7 @@ export const StaticButtonLink: React.FC<StaticButtonLinkProps> = ({
         {caption}
       </p>
       <div
-        className={classnames({
+        className={cn({
           'flex h-7 w-7 items-center justify-center rounded-full border bg-transparent': true,
           'border-gray-700': theme === 'dark',
           'border-white': theme === 'light',
@@ -41,7 +40,7 @@ export const StaticButtonLink: React.FC<StaticButtonLinkProps> = ({
       >
         <Icon
           icon={ARROW_RIGHT_2_SVG}
-          className={classnames({
+          className={cn({
             'h-3 w-3': true,
             'text-gray-700': theme === 'dark',
             'text-white': theme === 'light',
diff --git a/app/layout/statics/hero/component.tsx b/app/layout/statics/hero/component.tsx
index aa72e99d67..2d8c3129af 100644
--- a/app/layout/statics/hero/component.tsx
+++ b/app/layout/statics/hero/component.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 
-import classnames from 'classnames';
-
 import Backlink from 'layout/statics/backlink';
 import Wrapper from 'layout/wrapper';
+import { cn } from 'utils/cn';
 
 export interface StaticHeroProps {
   section?: string;
@@ -22,7 +21,7 @@ export const StaticHero: React.FC<StaticHeroProps> = ({
 }: StaticHeroProps) => {
   return (
     <div
-      className={classnames({
+      className={cn({
         'bg-primary-50 text-black': theme === 'light',
         'bg-black': theme === 'dark',
       })}
diff --git a/app/layout/toast/component.tsx b/app/layout/toast/component.tsx
index 1fdae8ea60..97dbcbb367 100644
--- a/app/layout/toast/component.tsx
+++ b/app/layout/toast/component.tsx
@@ -5,7 +5,7 @@ import { ToastContainerProps } from 'hooks/toast/types';
 
 export const ToastContainer = ({ placement, ...props }: ToastContainerProps) => (
   <div
-    className="pointer-events-none fixed z-60 max-h-full w-full max-w-full p-5"
+    className="z-60 pointer-events-none fixed max-h-full w-full max-w-full p-5"
     style={{
       ...PLACEMENTS[placement],
       maxWidth: 400,
diff --git a/app/layout/wrapper/component.tsx b/app/layout/wrapper/component.tsx
index ff913b21e4..3308517947 100644
--- a/app/layout/wrapper/component.tsx
+++ b/app/layout/wrapper/component.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 
-import cx from 'classnames';
+import { cn } from 'utils/cn';
 
 export interface WrapperProps {
   children: ReactNode;
@@ -9,7 +9,7 @@ export interface WrapperProps {
 export const Wrapper: React.FC<WrapperProps> = ({ children }: WrapperProps) => {
   return (
     <div
-      className={cx({
+      className={cn({
         'mx-auto flex h-full w-full flex-grow flex-col px-10 md:container': true,
       })}
     >
diff --git a/app/package.json b/app/package.json
index c24fbc550c..b7b2e735e7 100644
--- a/app/package.json
+++ b/app/package.json
@@ -48,7 +48,6 @@
     "@vizzuality/layer-manager-react": "2.0.3",
     "axios": "1.3.4",
     "chroma-js": "^2.4.2",
-    "classnames": "^2.2.6",
     "clsx": "1.2.1",
     "cookie": "^0.4.1",
     "d3": "^6.5.0",
diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
index c3f4599680..b515d0df91 100644
--- a/app/pages/_app.tsx
+++ b/app/pages/_app.tsx
@@ -4,8 +4,6 @@ import { CookiesProvider } from 'react-cookie';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider as ReduxProvider } from 'react-redux';
 
-import cx from 'classnames';
-
 import type { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
 
@@ -21,6 +19,7 @@ import { ToastProvider } from 'hooks/toast';
 import Loading from 'layout/loading';
 import { MediaContextProvider } from 'layout/media';
 import store from 'store';
+import { cn } from 'utils/cn';
 
 import 'styles/globals.css';
 
@@ -92,7 +91,7 @@ const MarxanApp = ({ Component, pageProps }: AppProps) => {
                           <Loading {...routeLoading} />
 
                           <div
-                            className={cx({
+                            className={cn({
                               'bg-black': !lightThemeRegex.test(pathname),
                               'bg-white': lightThemeRegex.test(pathname),
                             })}
diff --git a/app/yarn.lock b/app/yarn.lock
index 7441032dcf..ae429a74e4 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -4101,7 +4101,6 @@ __metadata:
     autoprefixer: ^10.0.2
     axios: 1.3.4
     chroma-js: ^2.4.2
-    classnames: ^2.2.6
     clsx: 1.2.1
     cookie: ^0.4.1
     d3: ^6.5.0
@@ -4777,13 +4776,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.6":
-  version: 2.2.6
-  resolution: "classnames@npm:2.2.6"
-  checksum: 09a4fda780158aa8399079898eabeeca0c48c28641d9e4de140db7412e5e346843039ded1af0152f755afc2cc246ff8c3d6f227bf0dcb004e070b7fa14ec54cc
-  languageName: node
-  linkType: hard
-
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"