Remove @types/styled-components

ui/app/mirrors/create/page.tsx

@@ -24,9 +24,7 @@ import QRepQuery from './query';
 export default function CreateMirrors() {
   const router = useRouter();
   const [mirrorName, setMirrorName] = useState<string>('');
-  const [mirrorType, setMirrorType] = useState<
-    'CDC' | 'Query Replication' | 'XMIN'
-  >('CDC');
+  const [mirrorType, setMirrorType] = useState<string>('CDC');
   const [formMessage, setFormMessage] = useState<{ ok: boolean; msg: string }>({
     ok: true,
     msg: '',
@@ -80,7 +78,7 @@ export default function CreateMirrors() {
         >
           Mirror type
         </Label>
-        <RadioButtonGroup>
+        <RadioButtonGroup onValueChange={(value) => setMirrorType(value)}>
           <div
             style={{
               display: 'flex',
@@ -108,12 +106,7 @@ export default function CreateMirrors() {
                       <div style={{ fontWeight: 'bold' }}>CDC</div>
                     </Label>
                   }
-                  action={
-                    <RadioButton
-                      checked={mirrorType === 'CDC'}
-                      onClick={() => setMirrorType('CDC')}
-                    />
-                  }
+                  action={<RadioButton value='CDC' />}
                 />
                 <Label>
                   <div style={{ fontSize: 14 }}>
@@ -156,12 +149,7 @@ export default function CreateMirrors() {
                       </div>
                     </Label>
                   }
-                  action={
-                    <RadioButton
-                      checked={mirrorType === 'Query Replication'}
-                      onClick={() => setMirrorType('Query Replication')}
-                    />
-                  }
+                  action={<RadioButton value='Query Replication' />}
                 />
                 <Label>
                   <div style={{ fontSize: 14 }}>
@@ -198,12 +186,7 @@ export default function CreateMirrors() {
                     <div style={{ fontWeight: 'bold' }}>XMIN</div>
                   </Label>
                 }
-                action={
-                  <RadioButton
-                    checked={mirrorType === 'XMIN'}
-                    onClick={() => setMirrorType('XMIN')}
-                  />
-                }
+                action={<RadioButton value='XMIN' />}
               />
               <Label>
                 <div style={{ fontSize: 14 }}>

ui/app/mirrors/create/tablemapping.tsx

@@ -5,7 +5,13 @@ import { RowWithSelect, RowWithTextField } from '@/lib/Layout';
 import { Select, SelectItem } from '@/lib/Select';
 import { Switch } from '@/lib/Switch';
 import { TextField } from '@/lib/TextField';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import { BarLoader } from 'react-spinners/';
 import { TableMapRow } from '../../dto/MirrorsDTO';
 import ColumnsDisplay from './columns';
@@ -65,17 +71,20 @@ const TableMapping = ({
     return newRows;
   };
 
-  const getTablesOfSchema = (schemaName: string) => {
-    fetchTables(sourcePeerName, schemaName, setLoading).then((res) =>
-      setAllTables(res)
-    );
-  };
+  const getTablesOfSchema = useCallback(
+    (schemaName: string) => {
+      fetchTables(sourcePeerName, schemaName, setLoading).then((res) =>
+        setAllTables(res)
+      );
+    },
+    [sourcePeerName]
+  );
 
   useEffect(() => {
     fetchSchemas(sourcePeerName, setLoading).then((res) => setAllSchemas(res));
     setSchema('public');
     getTablesOfSchema('public');
-  }, [sourcePeerName]);
+  }, [sourcePeerName, setSchema, getTablesOfSchema]);
 
   return (
     <div style={{ marginTop: '1rem' }}>

ui/app/mirrors/edit/[mirrorId]/cdc.tsx

@@ -162,9 +162,11 @@ const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => (
   </Table>
 );
 
-const Trigger = styled(({ isActive, ...props }) => (
-  <Tabs.Trigger {...props} />
-))<{ isActive?: boolean }>`
+const Trigger = styled(
+  ({ isActive, ...props }: { isActive?: boolean } & Tabs.TabsTriggerProps) => (
+    <Tabs.Trigger {...props} />
+  )
+)<{ isActive?: boolean }>`
   background-color: ${({ theme, isActive }) =>
     isActive ? theme.colors.accent.surface.selected : 'white'};
 

ui/lib/ProgressCircle/ProgressCircle.styles.ts

@@ -1,8 +1,4 @@
-import styled, {
-  FlattenSimpleInterpolation,
-  css,
-  keyframes,
-} from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { Icon, IconProps } from '../Icon';
 
 const spin = keyframes`
@@ -38,7 +34,7 @@ export type ProgressCircleVariant = Extract<
 const variants = {
   determinate_progress_circle: spinLinear,
   intermediate_progress_circle: spin45degIncrements,
-} satisfies Record<ProgressCircleVariant, FlattenSimpleInterpolation>;
+};
 
 type BaseIconProps = {
   $variant: ProgressCircleVariant;