Replace classnames package with clsx

src/app/App.tsx

@@ -1,5 +1,5 @@
 import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
@@ -66,7 +66,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
       <MainHeader />
 
       <div className="app">
-        <div className={classNames('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
+        <div className={clsx('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
           <Routes>
             <Route index element={<Home />} />
             <Route path="/settings/*" element={<Settings />} />

src/common/MainHeader.tsx

@@ -1,7 +1,7 @@
 import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
@@ -25,7 +25,7 @@ const MainHeader: FCWithDeps<{}, MainHeaderDeps> = () => {
   useEffect(collapse, [location, collapse]);
 
   const settingsPath = '/settings';
-  const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isNotCollapsed });
+  const toggleClass = clsx('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isNotCollapsed });
 
   return (
     <Navbar color="primary" dark fixed="top" className="main-header" expand="md">

src/common/ShlinkVersionsContainer.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import type { SelectedServer } from '../servers/data';
@@ -15,7 +15,7 @@ export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContai
   const { pathname } = useLocation();
   const withPadding = useMemo(() => SHLINK_CONTAINER_PATH_PATTERN.test(pathname), [pathname]);
 
-  const classes = classNames('text-center', {
+  const classes = clsx('text-center', {
     'shlink-versions-container--with-sidebar': withPadding,
   });
 

src/servers/DeleteServerButton.tsx

@@ -1,7 +1,7 @@
 import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
@@ -26,7 +26,7 @@ const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButton
 
   return (
     <>
-      <button type="button" className={classNames(className, 'p-0 bg-transparent border-0')} onClick={showModal}>
+      <button type="button" className={clsx(className, 'p-0 bg-transparent border-0')} onClick={showModal}>
         {!children && <FontAwesomeIcon fixedWidth icon={deleteIcon} />}
         <span className={textClassName}>{children ?? 'Remove this server'}</span>
       </button>

src/servers/ServersListGroup.tsx

@@ -1,6 +1,6 @@
 import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
 import { ListGroup, ListGroupItem } from 'reactstrap';
@@ -26,7 +26,7 @@ export const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children,
       <ListGroup
         data-testid="list"
         tag="div"
-        className={classNames('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
+        className={clsx('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
       >
         {servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
       </ListGroup>

src/settings/RealTimeUpdatesSettings.tsx

@@ -1,6 +1,6 @@
 import { LabeledFormGroup, SimpleCard, ToggleSwitch, useDomId } from '@shlinkio/shlink-frontend-kit';
 import type { Settings } from '@shlinkio/shlink-web-component';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { FormGroup, Input } from 'reactstrap';
 import { FormText } from '../utils/forms/FormText';
 
@@ -31,7 +31,7 @@ export const RealTimeUpdatesSettings = (
       <LabeledFormGroup
         noMargin
         label="Real-time updates frequency (in minutes):"
-        labelClassName={classNames('form-label', { 'text-muted': !realTimeUpdates.enabled })}
+        labelClassName={clsx('form-label', { 'text-muted': !realTimeUpdates.enabled })}
         id={inputId}
       >
         <Input