fix: switch to new aria components

app/routes/dns/dialogs/dns.tsx

@@ -1,10 +1,8 @@
 import { useMemo, useState } from 'react';
 import { useSubmit } from 'react-router';
-
 import Code from '~/components/Code';
 import Dialog from '~/components/Dialog';
-import TextField from '~/components/TextField';
-import { cn } from '~/utils/cn';
+import Input from '~/components/Input';
 
 interface Props {
 	records: { name: string; type: 'A'; value: string }[];
@@ -56,28 +54,29 @@ export default function AddDNS({ records }: Props) {
 				<Dialog.Text>
 					Enter the domain and IP address for the new DNS record.
 				</Dialog.Text>
-				<TextField
-					isRequired
-					label="Domain"
-					placeholder="test.example.com"
-					name="domain"
-					state={[name, setName]}
-					className={cn('mt-2', isDuplicate && 'outline outline-red-500')}
-				/>
-				<TextField
-					isRequired
-					label="IP Address"
-					placeholder="101.101.101.101"
-					name="ip"
-					state={[ip, setIp]}
-					className={cn(isDuplicate && 'outline outline-red-500')}
-				/>
-				{isDuplicate ? (
-					<p className="text-sm opacity-50">
-						A record with the domain name <Code>{name}</Code> and IP address{' '}
-						<Code>{ip}</Code> already exists.
-					</p>
-				) : undefined}
+				<div className="flex flex-col gap-2 mt-4">
+					<Input
+						isRequired
+						label="Domain"
+						placeholder="test.example.com"
+						onChange={setName}
+						isInvalid={isDuplicate}
+					/>
+					<Input
+						isRequired
+						label="IP Address"
+						placeholder="101.101.101.101"
+						name="ip"
+						onChange={setIp}
+						isInvalid={isDuplicate}
+					/>
+					{isDuplicate ? (
+						<p className="text-sm opacity-50">
+							A record with the domain name <Code>{name}</Code> and IP address{' '}
+							<Code>{ip}</Code> already exists.
+						</p>
+					) : undefined}
+				</div>
 			</Dialog.Panel>
 		</Dialog>
 	);

app/routes/dns/dialogs/nameserver.tsx

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { useSubmit } from 'react-router';
 
 import Dialog from '~/components/Dialog';
+import Input from '~/components/Input';
 import Switch from '~/components/Switch';
-import TextField from '~/components/TextField';
 import Tooltip from '~/components/Tooltip';
 import { cn } from '~/utils/cn';
 
@@ -68,16 +68,12 @@ export default function AddNameserver({ nameservers }: Props) {
 				}}
 			>
 				<Dialog.Title>Add nameserver</Dialog.Title>
-				<Dialog.Text className="font-semibold">Nameserver</Dialog.Text>
-				<Dialog.Text className="text-sm">
-					Use this IPv4 or IPv6 address to resolve names.
-				</Dialog.Text>
-				<TextField
-					label="DNS Server"
+				<Input
+					label="Nameserver"
+					description="Use this IPv4 or IPv6 address to resolve names."
 					placeholder="1.2.3.4"
 					name="ns"
-					state={[ns, setNs]}
-					className="mt-2 mb-8"
+					onChange={setNs}
 				/>
 				<div className="flex items-center justify-between">
 					<div className="block">
@@ -118,12 +114,11 @@ export default function AddNameserver({ nameservers }: Props) {
 				{split ? (
 					<>
 						<Dialog.Text className="font-semibold mt-8">Domain</Dialog.Text>
-						<TextField
+						<Input
 							label="Domain"
 							placeholder="example.com"
 							name="domain"
-							state={[domain, setDomain]}
-							className="my-2"
+							onChange={setDomain}
 						/>
 						<Dialog.Text className="text-sm">
 							Only single-label or fully-qualified queries matching this suffix