Update remaining packages & fix build

Author: jribbink

components/AccountBalances.tsx

@@ -5,7 +5,8 @@ import {fundAccount} from "src/accounts"
 import {formattedBalance} from "src/balance"
 import {FLOW_TYPE, TokenTypes} from "src/constants"
 import useConfig from "hooks/useConfig"
-import {Label, Themed} from "theme-ui"
+import {Label} from "theme-ui"
+import {Themed} from "@theme-ui/mdx"
 import {SXStyles} from "types"
 import AccountSectionHeading from "./AccountSectionHeading"
 import Button from "./Button"

components/AccountForm.tsx

@@ -79,7 +79,13 @@ export default function AccountForm({
         }
       }}
     >
-      {({values, setFieldValue}) => (
+      {({
+        values,
+        setFieldValue,
+      }: {
+        values: {label: string | undefined; scopes: Set<string>}
+        setFieldValue: (field: string, value: any) => void
+      }) => (
         <>
           <div sx={dialogStyles.body}>
             <Form data-test="fund-account-form" sx={styles.form}>

components/AccountListItemScopes.tsx

@@ -1,7 +1,8 @@
 /** @jsxImportSource theme-ui */
 import Switch from "components/Switch"
 import useAuthnContext from "hooks/useAuthnContext"
-import {Label, Themed} from "theme-ui"
+import {Label} from "theme-ui"
+import {Themed} from "@theme-ui/mdx"
 import {SXStyles} from "types"
 import AccountSectionHeading from "./AccountSectionHeading"
 

components/AccountsList.tsx

@@ -5,7 +5,8 @@ import PlusButton from "components/PlusButton"
 import useAuthnContext from "hooks/useAuthnContext"
 import {Account, NewAccount} from "src/accounts"
 import accountGenerator from "src/accountGenerator"
-import {Box, Themed} from "theme-ui"
+import {Box} from "theme-ui"
+import {Themed} from "@theme-ui/mdx"
 import {SXStyles} from "types"
 import FormErrors from "./FormErrors"
 import useConfig from "hooks/useConfig"

components/AccountsListItem.tsx

@@ -7,7 +7,8 @@ import {Account, NewAccount} from "src/accounts"
 import {useEffect, useState} from "react"
 import {chooseAccount} from "src/accountAuth"
 import {formattedBalance} from "src/balance"
-import {Flex, Themed} from "theme-ui"
+import {Flex} from "theme-ui"
+import {Themed} from "@theme-ui/mdx"
 import {SXStyles} from "types"
 import {getBaseUrl} from "src/utils"
 

components/ConnectedAppHeader.tsx

@@ -5,7 +5,8 @@ import useAuthnContext from "hooks/useAuthnContext"
 import {Account, NewAccount} from "src/accounts"
 import {useState} from "react"
 import {UNTITLED_APP_NAME} from "src/constants"
-import {Button, Link, Themed} from "theme-ui"
+import {Button, Link} from "theme-ui"
+import {Themed} from "@theme-ui/mdx"
 import {SXStyles} from "types"
 import ConnectedAppIcon from "./ConnectedAppIcon"
 

components/Dialog.tsx

@@ -111,8 +111,6 @@ export default function Dialog({
   const {isExpanded, setCodePreview} = useAuthzContext()
 
   return (
-    // @ts-expect-error The headless-ui dialog raises a "Expression produces a union type that is too complex to represent" error when used with theme-ui sx props
-    // See https://github.com/tailwindlabs/headlessui/issues/233, https://github.com/tailwindlabs/headlessui/issues/330
     <HUIDialog
       open={true}
       onClose={onClose}

components/Inputs.tsx

@@ -46,7 +46,7 @@ export const CustomInputComponent = ({
         {...props}
         sx={showError ? {...sx, ...errorInputStyles} : sx}
       />
-      {showError && <FieldError>{errors[field.name]}</FieldError>}
+      {showError && <FieldError>{String(errors[field.name])}</FieldError>}
     </>
   )
 }