Update to latest shlink-frontend-kit and shlink-web-component

src/servers/helpers/DuplicatedServersModal.tsx

@@ -1,4 +1,4 @@
-import { CardModal } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { CardModal } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Fragment } from 'react';
 import type { ServerData } from '../data';
@@ -26,7 +26,7 @@ export const DuplicatedServersModal: FC<DuplicatedServersModalProps> = (
       cancelText={hasMultipleServers ? 'Ignore duplicates' : 'Discard'}
     >
       <p>{hasMultipleServers ? 'The next servers already exist:' : 'There is already a server with:'}</p>
-      <ul className="tw:list-disc tw:mt-4">
+      <ul className="list-disc mt-4">
         {duplicatedServers.map(({ url, apiKey }, index) => (!hasMultipleServers ? (
           <Fragment key={index}>
             <li>URL: <b>{url}</b></li>

src/servers/helpers/ImportServersBtn.tsx

@@ -1,7 +1,6 @@
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import { Button, Tooltip, useTooltip } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Button, Tooltip, useToggle , useTooltip } from '@shlinkio/shlink-frontend-kit';
 import type { ChangeEvent, PropsWithChildren } from 'react';
 import { useCallback, useRef, useState } from 'react';
 import type { FCWithDeps } from '../../container/utils';
@@ -40,7 +39,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { anchor, tooltip } = useTooltip({ placement: tooltipPlacement });
   const [duplicatedServers, setDuplicatedServers] = useState<ServerData[]>([]);
-  const { flag: isModalOpen, setToTrue: showModal, setToFalse: hideModal } = useToggle(false, true);
+  const { flag: isModalOpen, setToTrue: showModal, setToFalse: hideModal } = useToggle();
   const newServersCreatedRef = useRef(false);
 
   const onFile = useCallback(
@@ -94,7 +93,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
       <input
         type="file"
         accept=".csv"
-        className="tw:hidden"
+        className="hidden"
         aria-hidden
         tabIndex={-1}
         ref={fileInputRef}

src/servers/helpers/ServerError.tsx

@@ -1,4 +1,4 @@
-import { Card, Message } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Card, Message } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Link } from 'react-router';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
@@ -23,8 +23,8 @@ const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, s
 
   return (
     <NoMenuLayout>
-      <div className="tw:flex tw:flex-col tw:items-center tw:gap-y-4 tw:md:gap-y-8">
-        <Message className="tw:w-full tw:lg:w-[80%]" variant="error">
+      <div className="flex flex-col items-center gap-y-4 md:gap-y-8">
+        <Message className="w-full lg:w-[80%]" variant="error">
           {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
           {isServerWithId(selectedServer) && (
             <>
@@ -34,16 +34,16 @@ const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, s
           )}
         </Message>
 
-        <p className="tw:text-xl">
+        <p className="text-xl">
           These are the Shlink servers currently configured. Choose one of
           them or <Link to="/server/create">add a new one</Link>.
         </p>
-        <Card className="tw:w-full tw:max-w-100 tw:overflow-hidden">
+        <Card className="w-full max-w-100 overflow-hidden">
           <ServersListGroup borderless servers={Object.values(servers)} />
         </Card>
 
         {isServerWithId(selectedServer) && (
-          <p className="tw:text-xl">
+          <p className="text-xl">
             Alternatively, if you think you may have misconfigured this server, you
             can <DeleteServerButton server={selectedServer}>remove
               it</DeleteServerButton> or&nbsp;

src/servers/helpers/ServerForm.tsx

@@ -1,12 +1,11 @@
-import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import {
-  Checkbox,
+import {   Checkbox,
   Details,
   Label,
   LabelledInput,
   LabelledRevealablePasswordInput,
   SimpleCard,
-} from '@shlinkio/shlink-frontend-kit/tailwind';
+  useToggle ,
+} from '@shlinkio/shlink-frontend-kit';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { useState } from 'react';
 import { usePreventDefault } from '../../utils/utils';
@@ -24,13 +23,12 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
   const [apiKey, setApiKey] = useState(initialValues?.apiKey ?? '');
   const { flag: forwardCredentials, toggle: toggleForwardCredentials } = useToggle(
     initialValues?.forwardCredentials ?? false,
-    true,
   );
   const handleSubmit = usePreventDefault(() => onSubmit({ name, url, apiKey, forwardCredentials }));
 
   return (
     <form name="serverForm" onSubmit={handleSubmit}>
-      <SimpleCard className="tw:mb-4" bodyClassName="tw:flex tw:flex-col tw:gap-y-3" title={title}>
+      <SimpleCard className="mb-4" bodyClassName="flex flex-col gap-y-3" title={title}>
         <LabelledInput label="Name" value={name} onChange={(e) => setName(e.target.value)} required />
         <LabelledInput label="URL" type="url" value={url} onChange={(e) => setUrl(e.target.value)} required />
         <LabelledRevealablePasswordInput
@@ -40,25 +38,25 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
           required
         />
         <Details summary="Advanced options">
-          <div className="tw:flex tw:flex-col tw:gap-0.5">
-            <Label className="tw:flex tw:items-center tw:gap-x-1.5 tw:cursor-pointer">
+          <div className="flex flex-col gap-0.5">
+            <Label className="flex items-center gap-x-1.5 cursor-pointer">
               <Checkbox onChange={toggleForwardCredentials} checked={forwardCredentials} />
               Forward credentials to this server on every request.
             </Label>
-            <small className="tw:pl-5.5 tw:text-gray-600 tw:dark:text-gray-400 tw:mt-0.5">
+            <small className="pl-5.5 text-gray-600 dark:text-gray-400 mt-0.5">
               {'"'}Credentials{'"'} here means cookies, TLS client certificates, or authentication headers containing a username
               and password.
             </small>
-            <small className="tw:pl-5.5 tw:text-gray-600 tw:dark:text-gray-400">
+            <small className="pl-5.5 text-gray-600 dark:text-gray-400">
               <b>Important!</b> If you are not sure what this means, leave it unchecked. Enabling this option will
               make all requests fail for Shlink older than v4.5.0, as it requires the server to set a more strict
-              value for <code className="tw:whitespace-nowrap">Access-Control-Allow-Origin</code> than <code>*</code>.
+              value for <code className="whitespace-nowrap">Access-Control-Allow-Origin</code> than <code>*</code>.
             </small>
           </div>
         </Details>
       </SimpleCard>
 
-      <div className="tw:flex tw:items-center tw:justify-end tw:gap-x-2">{children}</div>
+      <div className="flex items-center justify-end gap-x-2">{children}</div>
     </form>
   );
 };

src/servers/helpers/withSelectedServer.tsx

@@ -1,4 +1,4 @@
-import { Message } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Message } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { useParams } from 'react-router';