fix typing issues

ui/app/mirrors/create/config.tsx

@@ -145,7 +145,9 @@ export default function MirrorConfig(props: MirrorConfigProps) {
                     variant='simple'
                     type={setting.type}
                     defaultValue={setting.default}
-                    onChange={(e) => handleChange(e.target.value, setting)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleChange(e.target.value, setting)
+                    }
                   />
                   {setting.tips && (
                     <InfoPopover

ui/app/mirrors/create/page.tsx

@@ -64,7 +64,9 @@ export default function CreateMirrors() {
             <TextField
               variant='simple'
               value={mirrorName}
-              onChange={(e) => setMirrorName(e.target.value)}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setMirrorName(e.target.value)
+              }
             />
           }
         />

ui/app/mirrors/create/tablemapping.tsx

@@ -52,7 +52,7 @@ const TableMapping = ({ rows, setRows }: TableMappingProps) => {
                 <TextField
                   variant='simple'
                   value={row.source}
-                  onChange={(e) =>
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     handleTableChange(index, 'source', e.target.value)
                   }
                 />
@@ -61,7 +61,7 @@ const TableMapping = ({ rows, setRows }: TableMappingProps) => {
                 <TextField
                   variant='simple'
                   value={row.destination}
-                  onChange={(e) =>
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     handleTableChange(index, 'destination', e.target.value)
                   }
                 />

ui/app/peers/create/configuration/page.tsx

@@ -70,7 +70,9 @@ export default function CreateConfig() {
             <TextField
               variant='simple'
               value={name}
-              onChange={(e) => setName(e.target.value)}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setName(e.target.value)
+              }
             />
           }
         />

ui/components/ConfigForm.tsx

@@ -77,7 +77,9 @@ export default function ConfigForm(props: ConfigProps) {
                   }
                   type={setting.type}
                   defaultValue={setting.default}
-                  onChange={(e) => handleChange(e, setting)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleChange(e, setting)
+                  }
                 />
                 {setting.tips && (
                   <InfoPopover tips={setting.tips} link={setting.helpfulLink} />

ui/lib/Action/Action.tsx

@@ -14,6 +14,7 @@ export function Action({
   icon,
   children,
   disabled,
+  ref: _ref,
   ...actionProps
 }: ActionProps) {
   const Icon = renderObjectWith(icon);

ui/lib/Avatar/Avatar.tsx

@@ -41,7 +41,7 @@ const isAvatarIcon = (
  */
 export function Avatar({ size, ...baseProps }: AvatarProps) {
   if (isAvatarImage(baseProps)) {
-    const { variant: _variant, ...imageProps } = baseProps;
+    const { variant: _variant, ref: _ref, ...imageProps } = baseProps;
     return <AvatarImageBase $size={size} {...imageProps} />;
   }
   if (isAvatarIcon(baseProps)) {

ui/lib/CodeSnippet/CodeSnippet.tsx

@@ -4,7 +4,7 @@ import { BaseTextArea } from './CodeSnippet.styles';
 
 type CodeSnipperProps = ComponentProps<'textarea'>;
 
-export function CodeSnippet({ ...textAreaProps }: CodeSnipperProps) {
+export function CodeSnippet({ ref: _ref, ...textAreaProps }: CodeSnipperProps) {
   return (
     <BaseTextArea autoCorrect='false' spellCheck={false} {...textAreaProps} />
   );

ui/lib/Media/Media.tsx

@@ -11,6 +11,6 @@ type MediaProps = ComponentProps<'img'> & {
  *
  * [Figma spec](https://www.figma.com/file/DBMDh1LNNvp9H99N9lZgJ7/PeerDB?type=design&node-id=1-1872&mode=dev)
  */
-export function Media({ ratio, ...imageProps }: MediaProps) {
+export function Media({ ratio, ref: _ref, ...imageProps }: MediaProps) {
   return <BaseImage $ratio={ratio} {...imageProps} />;
 }

ui/lib/ProgressCircle/ProgressCircle.styles.ts

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

ui/lib/Thumbnail/Thumbnail.tsx

@@ -12,6 +12,6 @@ type ThumbnailProps = {
  *
  * [Figma spec](https://www.figma.com/file/DBMDh1LNNvp9H99N9lZgJ7/PeerDB?type=design&node-id=1-1532&mode=dev)
  */
-export function Thumbnail({ size, ...imageProps }: ThumbnailProps) {
+export function Thumbnail({ size, ref: _ref, ...imageProps }: ThumbnailProps) {
   return <BaseThumbnail $size={size} {...imageProps} />;
 }

ui/lib/Toast/Toast.styles.ts

@@ -1,5 +1,5 @@
 import * as RadixToast from '@radix-ui/react-toast';
-import { keyframes, styled } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 export const ToastAction = styled(RadixToast.Action)`
   all: unset;

ui/package.json

@@ -34,6 +34,7 @@
     "classnames": "^2.3.2",
     "long": "^5.2.3",
     "material-symbols": "0.11.0",
+    "moment": "^2.29.4",
     "next": "13.4.16",
     "prop-types": "^15.8.1",
     "protobufjs": "^7.2.5",
@@ -52,6 +53,7 @@
     "@storybook/nextjs": "^7.3.0",
     "@storybook/react": "^7.3.0",
     "@storybook/testing-library": "^0.2.0",
+    "@types/styled-components": "^5.1.28",
     "autoprefixer": "^10.4.15",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.48.0",