fix import, move cast

client/src/Components/design-elements/StepProgress.tsx

@@ -1,7 +1,6 @@
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
-import { alpha } from "@mui/material/styles";
+import { useTheme, alpha } from "@mui/material/styles";
 import { LAYOUT } from "@/Utils/Theme/constants";
 
 interface StepProgressProps {

client/src/Pages/CreateMonitor/index.tsx

@@ -3,7 +3,6 @@ import { useEffect } from "react";
 import { logger } from "@/Utils/logger";
 import { useParams, useLocation, useNavigate } from "react-router";
 import { useForm, Controller } from "react-hook-form";
-import type { FieldPath } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTheme } from "@mui/material";
 import Stack from "@mui/material/Stack";
@@ -278,9 +277,7 @@ const CreateMonitorPage = () => {
 	const totalSteps = monitorStepCount(watchedType);
 
 	const handleNext = async () => {
-		const isValid = await trigger(
-			stepFieldsFor(watchedType, currentStep) as FieldPath<MonitorFormData>[]
-		);
+		const isValid = await trigger(stepFieldsFor(watchedType, currentStep));
 		if (isValid) {
 			setCurrentStep((step) => step + 1);
 		}

client/src/Validation/monitor.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import type { FieldPath } from "react-hook-form";
 import { GeoContinents } from "@/Types/GeoCheck";
 import { DnsRecordTypes, PageSpeedStrategies, type MonitorType } from "@/Types/Monitor";
 
@@ -194,15 +195,20 @@ const optionForType = (type: MonitorType) =>
 
 // The step each field of a type is validated on, from the per-field
 // `monitorStepRegistry` metadata (unannotated fields default to step 0).
-const fieldStepsFor = (type: MonitorType): [name: string, step: number][] =>
+const fieldStepsFor = (
+	type: MonitorType
+): [name: FieldPath<MonitorFormData>, step: number][] =>
 	Object.entries(optionForType(type)?.shape ?? {}).map(([name, field]) => [
-		name,
+		name as FieldPath<MonitorFormData>,
 		monitorStepRegistry.get(field)?.step ?? 0,
 	]);
 
 // The selected type's fields that belong to a given wizard step. Derived from
 // the schema so it can't drift from the field definitions.
-export const stepFieldsFor = (type: MonitorType, step: number): string[] =>
+export const stepFieldsFor = (
+	type: MonitorType,
+	step: number
+): FieldPath<MonitorFormData>[] =>
 	fieldStepsFor(type)
 		.filter(([, fieldStep]) => fieldStep === step)
 		.map(([name]) => name);