fix(vite): update code for updated dependencies (#1043)

* how do I shoot web??

* black rabbit feedback + update deps

web/src/forms/settings/IrcForms.tsx

@@ -7,6 +7,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "react-hot-toast";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import type { FieldProps } from "formik";
+import type { FieldArrayRenderProps } from "formik";
 import { Field, FieldArray, FormikErrors, FormikValues } from "formik";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
@@ -26,7 +27,7 @@ interface ChannelsFieldArrayProps {
 const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
   <div className="p-6">
     <FieldArray name="channels">
-      {({ remove, push }) => (
+      {({ remove, push }: FieldArrayRenderProps) => (
         <div className="flex flex-col space-y-2 border-2 border-dashed dark:border-gray-700 p-4">
           {channels && channels.length > 0 ? (
             channels.map((_channel: IrcChannel, index: number) => (

web/src/index.css

@@ -9,7 +9,7 @@
 
 body {
   margin: 0;
-  font-family: "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: "InterVariable", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;

web/src/index.tsx

@@ -6,7 +6,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import "@fontsource/inter/variable.css";
+import "@fontsource-variable/inter";
 import "./index.css";
 import "react-tooltip/dist/react-tooltip.css";
 

web/src/screens/filters/Action.tsx

@@ -6,6 +6,7 @@
 import { Fragment, useEffect, useRef, useState } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Field, FieldArray, FieldProps, FormikValues, useFormikContext } from "formik";
+import type { FieldArrayRenderProps } from "formik";
 import { Dialog, Switch as SwitchBasic, Transition } from "@headlessui/react";
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { Link } from "react-router-dom";
@@ -76,7 +77,7 @@ export function FilterActions({ filter, values }: FilterActionsProps) {
   return (
     <div className="mt-10">
       <FieldArray name="actions">
-        {({ remove, push }) => (
+        {({ remove, push }: FieldArrayRenderProps) => (
           <Fragment>
             <div className="-ml-4 -mt-4 mb-6 flex justify-between items-center flex-wrap sm:flex-nowrap">
               <div className="ml-4 mt-4">