diff --git a/.gitignore b/.gitignore
index bd90973..d95946a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,5 +35,5 @@ yarn-error.log*
 !.yarn/versions
 .pnp.*
 
-yarn.lock
+/yarn.lock
 package-lock.json
diff --git a/package.json b/package.json
index 846b556..ed76c37 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
         "draft-js": "0.11.7",
         "draftjs-to-html": "0.9.1",
         "firebase": "10.7.1",
+        "formik": "^2.4.5",
         "framer-motion": "10.18.0",
         "history": "5.3.0",
         "i18next": "23.7.16",
@@ -57,6 +58,7 @@
         "stylis-plugin-rtl": "2.1.1",
         "type-fest": "4.9.0",
         "web-vitals": "3.5.1",
+        "yup": "^1.3.3",
         "zod": "3.22.4"
     },
     "peerDependencies": {
diff --git a/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx b/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx
index 91ee81b..9da412c 100644
--- a/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx
+++ b/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx
@@ -7,22 +7,34 @@ const clientes = [
 		id: 1,
 		nombreComercial: 'Andres Alvarez',
 		razonSocial: 'Andres Alvarez',
-		identificacion: '1721529707',
+		identificacion: '1721529788',
 		direccion: 'Calle oe',
 		telefono: '0988545102',
 		correo: 'andres@test.com'
+	},
+  {
+		id: 2,
+		nombreComercial: 'Paul Ruales',
+		razonSocial: 'Paul Ruales',
+		identificacion: '1721524123',
+		direccion: 'Calle lomisima',
+		telefono: '0988544772',
+		correo: 'poul@test.com'
 	}
 ];
 function DataClient() {
 	const [clients, setClients] = useState<Client[]>(clientes);
+  const [selectClient, setSelectClient] = useState<Client | null>(null);
 
-	const handleSelectClient = (value) => {
-		setClients([...clients, value]);
+	const handleSelectClient = (value:Client) => {
+		setSelectClient(value)
+    if(!clients.includes(value)) setClients([...clients, value])
 	};
 	return (
 		<DataClientRender
 			client={clients}
 			handleSelectClient={handleSelectClient}
+      selectClient={selectClient}
 		/>
 	);
 }
diff --git a/src/app/main/invoice/generateInvoice/components/dataClient/DataClientRender.tsx b/src/app/main/invoice/generateInvoice/components/dataClient/DataClientRender.tsx
index ad18734..a420933 100644
--- a/src/app/main/invoice/generateInvoice/components/dataClient/DataClientRender.tsx
+++ b/src/app/main/invoice/generateInvoice/components/dataClient/DataClientRender.tsx
@@ -1,148 +1,111 @@
-import { useState } from 'react';
-import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
-import { Autocomplete, Box, Divider, Grid, TextField, Typography, Button } from '@mui/material';
-import AddClient from './components/addClient/AddClient';
-import { Client } from './DataClientInterfaz';
+import { useState } from "react";
+import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
+import {
+  Autocomplete,
+  Box,
+  Divider,
+  Grid,
+  TextField,
+  Typography,
+  Button,
+} from "@mui/material";
+import AddClient from "./components/addClient/AddClient";
+import { Client } from "./DataClientInterfaz";
 
 interface Props {
-	client: Client[];
-	handleSelectClient: (value: Client) => void;
+  client: Client[];
+  handleSelectClient: (value: Client) => void;
+  selectClient: Client;
 }
-function DataClientRender({ client, handleSelectClient }: Props) {
-	const [openDialog, setOpenDialog] = useState<boolean>(false);
-	return (
-		<Box className="mt-10  p-20 shadow-2 rounded-8">
-			<AddClient
-				open={openDialog}
-				setOpen={setOpenDialog}
-			/>
-			<Grid
-				container
-				spacing={2}
-			>
-				<Grid
-					item
-					xs={12}
-					md={10}
-				>
-					<Typography
-						component="h3"
-						className="mb-7 text-16"
-					>
-						Datos cliente
-					</Typography>
-				</Grid>
-				<Grid
-					item
-					xs={12}
-					md={2}
-					className="flex justify-end"
-				>
-					<Button
-						color="primary"
-						variant="outlined"
-						className="rounded-6"
-						size="small"
-						onClick={() => setOpenDialog(true)}
-						startIcon={
-							<FuseSvgIcon
-								className="text-48"
-								size={24}
-								color="action"
-							>
-								heroicons-outline:plus
-							</FuseSvgIcon>
-						}
-					>
-						Agregar{' '}
-					</Button>
-				</Grid>
-				<Grid
-					item
-					xs={12}
-				>
-					<Divider className="border-1 mb-10" />
-				</Grid>
-				<Grid
-					item
-					xs={12}
-					md={12}
-				>
-					<Autocomplete
-						className="mt-8 mb-16"
-						options={client}
-						getOptionLabel={(option) => option.razonSocial}
-						noOptionsText="No se encontro un resultado"
-						size="small"
-						/* value={value }
+function DataClientRender({ client, handleSelectClient, selectClient }: Props) {
+  const [openDialog, setOpenDialog] = useState<boolean>(false);
+  return (
+    <Box className="mt-10  p-20 shadow-2 rounded-8">
+      <AddClient open={openDialog} setOpen={setOpenDialog} handleSelectClient={handleSelectClient}/>
+      <Grid container spacing={2}>
+        <Grid item xs={12} md={10}>
+          <Typography component="h3" className="mb-7 text-16">
+            Datos cliente
+          </Typography>
+        </Grid>
+        <Grid item xs={12} md={2} className="flex justify-end">
+          <Button
+            color="primary"
+            variant="outlined"
+            className="rounded-6"
+            size="small"
+            onClick={() => setOpenDialog(true)}
+            startIcon={
+              <FuseSvgIcon className="text-48" size={24} color="action">
+                heroicons-outline:plus
+              </FuseSvgIcon>
+            }
+          >
+            Agregar{" "}
+          </Button>
+        </Grid>
+        <Grid item xs={12}>
+          <Divider className="border-1 mb-10" />
+        </Grid>
+        <Grid item xs={12} md={12}>
+          <Autocomplete
+            className="mt-8 mb-16"
+            options={client}
+            getOptionLabel={(option) => option.razonSocial}
+            noOptionsText="No se encontro un resultado"
+            size="small"
+            value={selectClient}
             onChange={(event, newValue) => {
-              onChange(newValue);
-            }} */
-						renderInput={(params) => (
-							<TextField
-								{...params}
-								placeholder="Busque el cliente"
-								label="Cliente"
-								variant="outlined"
-								InputLabelProps={{
-									shrink: true
-								}}
-							/>
-						)}
-					/>
-				</Grid>
-				<Grid
-					item
-					md={12}
-				>
-					<Divider />
-				</Grid>
-				<Grid
-					item
-					md={4}
-					xs={12}
-				>
-					<b>Razón Social:</b> Jonathan Andres Alvarez Flores
-				</Grid>
-				<Grid
-					item
-					md={4}
-					xs={12}
-				>
-					<b>Nombre Comercial:</b> Jonathan Andres Alvarez Flores
-				</Grid>
-				<Grid
-					item
-					md={4}
-					xs={12}
-				>
-					<b>Ruc:</b> 17215785512001
-				</Grid>
+              handleSelectClient(newValue);
+            }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                placeholder="Busque el cliente"
+                label="Cliente"
+                variant="outlined"
+                InputLabelProps={{
+                  shrink: true,
+                }}
+              />
+            )}
+          />
+        </Grid>
+        <Grid item md={12}>
+          <Divider />
+        </Grid>
+        {selectClient ? (
+          <>
+            <Grid item md={4} xs={12}>
+              <b>Razón Social:</b> {selectClient.razonSocial}
+            </Grid>
+            <Grid item md={4} xs={12}>
+              <b>Nombre Comercial:</b> {selectClient.nombreComercial}
+            </Grid>
+            <Grid item md={4} xs={12}>
+              <b>Ruc:</b> {selectClient.identificacion}
+            </Grid>
 
-				<Grid
-					item
-					md={4}
-					xs={12}
-				>
-					<b>Dirección:</b> Calle Oe11g y s32
-				</Grid>
-				<Grid
-					item
-					md={4}
-					xs={12}
-				>
-					<b>Teléfono:</b> 0988545211
-				</Grid>
-				<Grid
-					item
-					md={4}
-					xs={12}
-				>
-					<b>Correo:</b> admin@qsoftec.com
-				</Grid>
-			</Grid>
-		</Box>
-	);
+            <Grid item md={4} xs={12}>
+              <b>Dirección:</b> {selectClient.direccion}
+            </Grid>
+            <Grid item md={4} xs={12}>
+              <b>Teléfono:</b> {selectClient.telefono}
+            </Grid>
+            <Grid item md={4} xs={12}>
+              <b>Correo:</b> {selectClient.correo}
+            </Grid>
+          </>
+        ) : (
+          <Box className="flex justify-center w-full mt-20">
+			<Typography variant="subtitle2" gutterBottom>
+				Seleccione o agrege el cliente
+			</Typography>
+		  </Box>
+        )}
+      </Grid>
+    </Box>
+  );
 }
 
 export default DataClientRender;
diff --git a/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClient.tsx b/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClient.tsx
index 087b3e3..baf6430 100644
--- a/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClient.tsx
+++ b/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClient.tsx
@@ -1,16 +1,58 @@
-import AddClientRender from './AddClientRender';
+import { useFormik } from "formik";
+import { Client } from "../../DataClientInterfaz";
+import AddClientRender from "./AddClientRender";
+import * as Yup from "yup";
 
 interface Props {
-	open: boolean;
-	setOpen: (open: boolean) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  handleSelectClient: (value: Client) => void;
 }
-function AddClient({ open, setOpen }: Props) {
-	return (
-		<AddClientRender
-			open={open}
-			setOpen={setOpen}
-		/>
-	);
+function AddClient({ open, setOpen, handleSelectClient }: Props) {
+  const formik = useFormik<Client>({
+    initialValues: {
+      id: Math.floor(Math.random() * 100),
+      nombreComercial: "",
+      razonSocial: "",
+      identificacion: "",
+      direccion: "",
+      telefono: "",
+      correo: "",
+    },
+    validationSchema: Yup.object({
+      nombreComercial: Yup.string().required("El campo es Obligatorio"),
+      razonSocial: Yup.string().required("El campo es Obligatorio"),
+      identificacion: Yup.string().required("El campo es Obligatorio"),
+      direccion: Yup.string().required("El campo es Obligatorio"),
+      telefono: Yup.string().required("El campo es Obligatorio"),
+      correo: Yup.string().required("El campo es Obligatorio")
+        .email("Correo no valido"),
+    }),
+    onSubmit: (value) => {
+	  handleSaveClient(value)
+    },
+  });
+
+  const handleOnChange = ({ target }) => {
+    const { name, value } = target;
+    formik.setFieldValue(name, value);
+  };
+
+  //TODO: Guardar cliente en la base de datos y seleccionar
+  const handleSaveClient = (value) => {
+	handleSelectClient(value)
+	formik.resetForm();
+	setOpen(false);
+  }
+
+  return (
+    <AddClientRender
+      open={open}
+      setOpen={setOpen}
+      formik={formik}
+      handleOnChange={handleOnChange}
+    />
+  );
 }
 
 export default AddClient;
diff --git a/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClientRender.tsx b/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClientRender.tsx
index 1946b2a..f695874 100644
--- a/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClientRender.tsx
+++ b/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClientRender.tsx
@@ -1,118 +1,181 @@
-import { DialogActions, DialogContent, DialogTitle, Button, Grid, TextField, Dialog } from '@mui/material';
+import {
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Button,
+  Grid,
+  TextField,
+  Dialog,
+} from "@mui/material";
+import { FormikProps } from "formik";
+import { Client } from "../../DataClientInterfaz";
 
 interface Props {
-	open: boolean;
-	setOpen: (open: boolean) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  formik: FormikProps<Client>;
+  handleOnChange: (event) => void;
 }
-function AddClientRender({ open, setOpen }: Props) {
-	return (
-		<Dialog
-			open={open}
-			scroll="body"
-			fullWidth
-			maxWidth="md"
-		>
-			<DialogTitle id="alert-dialog-title">Agregar Cliente</DialogTitle>
-			<DialogContent dividers>
-				<Grid
-					container
-					spacing={2}
-				>
-					<Grid
-						item
-						md={6}
-						xs={12}
-					>
-						<TextField
-							size="small"
-							label="Nombre Comercial"
-							variant="outlined"
-							fullWidth
-						/>
-					</Grid>
-					<Grid
-						item
-						md={6}
-						xs={12}
-					>
-						<TextField
-							size="small"
-							label="Razón Social"
-							variant="outlined"
-							fullWidth
-						/>
-					</Grid>
-					<Grid
-						item
-						md={6}
-						xs={12}
-					>
-						<TextField
-							size="small"
-							label="Identificación"
-							variant="outlined"
-							fullWidth
-						/>
-					</Grid>
-					<Grid
-						item
-						md={6}
-						xs={12}
-					>
-						<TextField
-							size="small"
-							label="Dirección"
-							variant="outlined"
-							fullWidth
-						/>
-					</Grid>
-					<Grid
-						item
-						md={6}
-						xs={12}
-					>
-						<TextField
-							size="small"
-							label="Teléfono"
-							variant="outlined"
-							fullWidth
-						/>
-					</Grid>
-					<Grid
-						item
-						md={6}
-						xs={12}
-					>
-						<TextField
-							size="small"
-							label="Correo electrónico"
-							variant="outlined"
-							fullWidth
-						/>
-					</Grid>
-				</Grid>
-			</DialogContent>
-			<DialogActions className="pr-24">
-				<Button
-					onClick={() => setOpen(false)}
-					color="primary"
-					variant="contained"
-					size="small"
-				>
-					Cancelar
-				</Button>
-				<Button
-					onClick={() => setOpen(false)}
-					color="primary"
-					autoFocus
-					variant="contained"
-					size="small"
-				>
-					Aceptar
-				</Button>
-			</DialogActions>
-		</Dialog>
-	);
+function AddClientRender({ open, setOpen, formik, handleOnChange }: Props) {
+  return (
+    <Dialog open={open} scroll="body" fullWidth maxWidth="md">
+      <DialogTitle id="alert-dialog-title">Agregar Cliente</DialogTitle>
+      <DialogContent dividers>
+        <Grid container spacing={2}>
+          <Grid item md={6} xs={12}>
+            <TextField
+              size="small"
+              label="Nombre Comercial"
+              variant="outlined"
+              fullWidth
+              name="nombreComercial"
+              value={formik.values.nombreComercial || ""}
+              onChange={handleOnChange}
+              onBlur={formik.handleBlur}
+              error={
+                formik.errors.nombreComercial && formik.touched.nombreComercial
+                  ? true
+                  : false
+              }
+              helperText={
+                formik.errors.nombreComercial && formik.touched.nombreComercial
+                  ? formik.errors.nombreComercial
+                  : false
+              }
+            />
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <TextField
+              size="small"
+              label="Razón Social"
+              variant="outlined"
+              fullWidth
+              name="razonSocial"
+              value={formik.values.razonSocial || ""}
+              onChange={handleOnChange}
+              onBlur={formik.handleBlur}
+              error={
+                formik.errors.razonSocial && formik.touched.razonSocial
+                  ? true
+                  : false
+              }
+              helperText={
+                formik.errors.razonSocial && formik.touched.razonSocial
+                  ? formik.errors.razonSocial
+                  : false
+              }
+            />
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <TextField
+              size="small"
+              label="Identificación"
+              variant="outlined"
+              fullWidth
+              name="identificacion"
+              value={formik.values.identificacion || ""}
+              onChange={handleOnChange}
+              onBlur={formik.handleBlur}
+              error={
+                formik.errors.identificacion && formik.touched.identificacion
+                  ? true
+                  : false
+              }
+              helperText={
+                formik.errors.identificacion && formik.touched.identificacion
+                  ? formik.errors.identificacion
+                  : false
+              }
+            />
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <TextField
+              size="small"
+              label="Dirección"
+              variant="outlined"
+              fullWidth
+              name="direccion"
+              value={formik.values.direccion || ""}
+              onChange={handleOnChange}
+              onBlur={formik.handleBlur}
+              error={
+                formik.errors.direccion && formik.touched.direccion
+                  ? true
+                  : false
+              }
+              helperText={
+                formik.errors.direccion && formik.touched.direccion
+                  ? formik.errors.direccion
+                  : false
+              }
+            />
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <TextField
+              size="small"
+              label="Teléfono"
+              variant="outlined"
+              fullWidth
+              name="telefono"
+              value={formik.values.telefono || ""}
+              onChange={handleOnChange}
+              onBlur={formik.handleBlur}
+              error={
+                formik.errors.telefono && formik.touched.telefono ? true : false
+              }
+              helperText={
+                formik.errors.telefono && formik.touched.telefono
+                  ? formik.errors.telefono
+                  : false
+              }
+            />
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <TextField
+              size="small"
+              label="Correo electrónico"
+              variant="outlined"
+              fullWidth
+              name="correo"
+              value={formik.values.correo || ""}
+              onChange={handleOnChange}
+              onBlur={formik.handleBlur}
+              error={
+                formik.errors.correo && formik.touched.correo ? true : false
+              }
+              helperText={
+                formik.errors.correo && formik.touched.correo
+                  ? formik.errors.correo
+                  : false
+              }
+            />
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions className="pr-24">
+        <Button
+          onClick={() => {
+            formik.resetForm();
+            setOpen(false);
+          }}
+          color="primary"
+          variant="contained"
+          size="small"
+        >
+          Cancelar
+        </Button>
+        <Button
+          onClick={formik.submitForm}
+          color="primary"
+          autoFocus
+          variant="contained"
+          size="small"
+        >
+          Aceptar
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
 }
 
 export default AddClientRender;
diff --git a/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceInterface.ts b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceInterface.ts
index f0eeadf..33b5f2a 100644
--- a/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceInterface.ts
+++ b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceInterface.ts
@@ -1,6 +1,6 @@
 export interface Headers {
 	id: number;
-	name: string;
+	name: string | Element;
 	style?: string | number;
 }
 
diff --git a/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceRender.tsx b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceRender.tsx
index a69ffcf..d90212a 100644
--- a/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceRender.tsx
+++ b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceRender.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Typography, Divider, Button } from '@mui/material';
+import { Box, Grid, Typography, Divider, Button, TextField } from '@mui/material';
 import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
 import TableInvoice from './components/tableInvoice/TableInvoice';
 import { ItemInvoice } from './DataInvoiceInterface';
@@ -57,6 +57,53 @@ function DataInvoiceRender({ handleAddItem, items }: Props) {
 				>
 					<Divider className="border-1" />
 				</Grid>
+				<Grid
+					item
+					xs={12}
+					md={2}
+				>
+					<TextField
+					label='Serial'
+					size='small'
+					variant='outlined'
+					fullWidth
+					InputLabelProps={{
+						shrink: true,
+					  }}
+					/>
+				</Grid>
+				<Grid
+					item
+					xs={12}
+					md={2}
+				>
+					<TextField
+					label='Fecha factura'
+					size='small'
+					variant='outlined'
+					type='date'
+					fullWidth
+					InputLabelProps={{
+						shrink: true,
+					  }}
+					/>
+				</Grid>
+				<Grid
+					item
+					xs={12}
+					md={2}
+				>
+					<TextField
+					label='Fecha creada'
+					size='small'
+					variant='outlined'
+					type='date'
+					fullWidth
+					InputLabelProps={{
+						shrink: true,
+					  }}
+					/>
+				</Grid>
 			</Grid>
 			<Grid
 				container
@@ -98,6 +145,66 @@ function DataInvoiceRender({ handleAddItem, items }: Props) {
 						$10
 					</Typography>
 				</Grid>
+				<Grid
+					item
+					xs={7}
+					md={9}
+				/>
+				<Grid
+					item
+					xs={2}
+					md={2}
+				>
+					<Typography
+						variant="subtitle2"
+						gutterBottom
+					>
+						Iva 12%:
+					</Typography>
+				</Grid>
+				<Grid
+					item
+					xs={3}
+					md={1}
+					className="item"
+				>
+					<Typography
+						variant="subtitle2"
+						gutterBottom
+					>
+						$5
+					</Typography>
+				</Grid>
+				<Grid
+					item
+					xs={7}
+					md={9}
+				/>
+				<Grid
+					item
+					xs={2}
+					md={2}
+				>
+					<Typography
+						variant="subtitle2"
+						gutterBottom
+					>
+						Total:
+					</Typography>
+				</Grid>
+				<Grid
+					item
+					xs={3}
+					md={1}
+					className="item"
+				>
+					<Typography
+						variant="subtitle2"
+						gutterBottom
+					>
+						$15
+					</Typography>
+				</Grid>
 			</Grid>
 		</Box>
 	);
diff --git a/src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoice.tsx b/src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoice.tsx
index c880aed..f7e0390 100644
--- a/src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoice.tsx
+++ b/src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoice.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@mui/material';
 import { Headers } from '../../DataInvoiceInterface';
 import TableInvoiceRender from './TableInvoiceRender';
 
@@ -9,7 +10,7 @@ function TableInvoice() {
 		{ id: 4, name: 'Valor unitario', style: 130 },
 		{ id: 5, name: 'Iva', style: 10 },
 		{ id: 6, name: 'Total', style: 130 },
-		{ id: 7, name: 'Acción', style: 10 }
+		{ id: 7, name: 'Acción', style: 10 },
 	];
 	return <TableInvoiceRender headers={headers} />;
 }
diff --git a/yarn.lock b/yarn.lock
index b530f32..d0b1759 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2825,7 +2825,7 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
   integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
   integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
@@ -4243,6 +4243,11 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 define-data-property@^1.0.1, define-data-property@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
@@ -5238,6 +5243,20 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+formik@^2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.5.tgz#f899b5b7a6f103a8fabb679823e8fafc7e0ee1b4"
+  integrity sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^2.0.0"
+
 fraction.js@^4.3.6:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
@@ -6382,6 +6401,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -7296,6 +7320,11 @@ prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-expr@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.6.tgz#f77bc00d5928a6c748414ad12882e83f24aec1e8"
+  integrity sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==
+
 protobufjs@^7.2.4:
   version "7.2.6"
   resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.2.6.tgz#4a0ccd79eb292717aacf07530a07e0ed20278215"
@@ -7383,6 +7412,11 @@ react-draft-wysiwyg@1.15.0:
     linkify-it "^2.2.0"
     prop-types "^15.7.2"
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-fast-compare@^3.0.1:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
@@ -8458,6 +8492,11 @@ throat@^4.1.0:
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
   integrity sha512-wCVxLDcFxw7ujDxaeJC6nfl2XfHJNYs8yUYJnvMgtPEFlttP9tHSfRUv2vBe6C4hkVFPWoP1P6ZccbYjmSEkKA==
 
+tiny-case@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03"
+  integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
+
 tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
@@ -8500,6 +8539,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
 tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
@@ -8600,7 +8644,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.6.2:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -8629,6 +8673,11 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+type-fest@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
 typed-array-buffer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz#18de3e7ed7974b0a729d3feecb94338d1472cd60"
@@ -9126,6 +9175,16 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+yup@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-1.3.3.tgz#d2f6020ad1679754c5f8178a29243d5447dead04"
+  integrity sha512-v8QwZSsHH2K3/G9WSkp6mZKO+hugKT1EmnMqLNUcfu51HU9MDyhlETT/JgtzprnrnQHPWsjc6MUDMBp/l9fNnw==
+  dependencies:
+    property-expr "^2.0.5"
+    tiny-case "^1.0.3"
+    toposort "^2.0.2"
+    type-fest "^2.19.0"
+
 zod@3.22.4:
   version "3.22.4"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"