From 61010cbcabdd9b2b48fb2117744409f07e04845d Mon Sep 17 00:00:00 2001
From: geekysilento <adityakarna.ak@gmail.com>
Date: Sat, 16 Mar 2024 22:50:00 +0545
Subject: [PATCH 1/7] feat: clean genericInputs

---
 components/inputs/Checkbox.tsx        |   38 +
 components/inputs/Visualizer.tsx      |  236 ++
 components/inputs/date-time.tsx       |   32 +
 components/inputs/date.tsx            |   31 +
 components/inputs/email.tsx           |   30 +
 components/inputs/fileUpload.tsx      |   21 +
 components/inputs/multiSelectItem.tsx |   48 +
 components/inputs/numberfield.tsx     |   29 +
 components/inputs/radioItems.tsx      |   50 +
 components/inputs/selectIItem.tsx     |   55 +
 components/inputs/telephone.tsx       |   32 +
 components/inputs/text.tsx            |   31 +
 components/inputs/textAreaField.tsx   |   46 +
 components/inputs/time.tsx            |   24 +
 components/ui/badge.tsx               |   36 +
 components/ui/calendar.tsx            |   72 +
 components/ui/checkbox.tsx            |   30 +
 components/ui/command.tsx             |  155 ++
 components/ui/dialog.tsx              |  122 +
 components/ui/dropdown-menu.tsx       |  205 ++
 components/ui/form.tsx                |  177 ++
 components/ui/input.tsx               |  103 +
 components/ui/label.tsx               |   26 +
 components/ui/multiselect.tsx         |  486 ++++
 components/ui/popover.tsx             |   33 +
 components/ui/radio-group.tsx         |   44 +
 components/ui/select.tsx              |  163 ++
 components/ui/textarea.tsx            |   23 +
 package-lock.json                     | 3025 +++++++++++++++++++++----
 package.json                          |   22 +-
 30 files changed, 5031 insertions(+), 394 deletions(-)
 create mode 100644 components/inputs/Checkbox.tsx
 create mode 100644 components/inputs/Visualizer.tsx
 create mode 100644 components/inputs/date-time.tsx
 create mode 100644 components/inputs/date.tsx
 create mode 100644 components/inputs/email.tsx
 create mode 100644 components/inputs/fileUpload.tsx
 create mode 100644 components/inputs/multiSelectItem.tsx
 create mode 100644 components/inputs/numberfield.tsx
 create mode 100644 components/inputs/radioItems.tsx
 create mode 100644 components/inputs/selectIItem.tsx
 create mode 100644 components/inputs/telephone.tsx
 create mode 100644 components/inputs/text.tsx
 create mode 100644 components/inputs/textAreaField.tsx
 create mode 100644 components/inputs/time.tsx
 create mode 100644 components/ui/badge.tsx
 create mode 100644 components/ui/calendar.tsx
 create mode 100644 components/ui/checkbox.tsx
 create mode 100644 components/ui/command.tsx
 create mode 100644 components/ui/dialog.tsx
 create mode 100644 components/ui/dropdown-menu.tsx
 create mode 100644 components/ui/form.tsx
 create mode 100644 components/ui/input.tsx
 create mode 100644 components/ui/label.tsx
 create mode 100644 components/ui/multiselect.tsx
 create mode 100644 components/ui/popover.tsx
 create mode 100644 components/ui/radio-group.tsx
 create mode 100644 components/ui/select.tsx
 create mode 100644 components/ui/textarea.tsx

diff --git a/components/inputs/Checkbox.tsx b/components/inputs/Checkbox.tsx
new file mode 100644
index 00000000..b4feeeb1
--- /dev/null
+++ b/components/inputs/Checkbox.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { Checkbox } from '~/components/ui/checkbox';
+
+import { Label } from '../ui/label';
+import { type GenericProps } from './radioItems';
+
+interface CheckboxProps extends GenericProps {
+  defaultChecked?: boolean;
+  onChange?: (value: boolean) => void;
+  value?: boolean;
+}
+const CheckboxGeneric = ({ ...props }: CheckboxProps) => {
+  return (
+    <div className={props.className}>
+      <Label htmlFor={props.name}>
+        {props.label ? props.label : 'Checkbox'}
+      </Label>
+      {props.required && <span style={{ color: '#EC734B' }}>*</span>}
+      <div className="flex flex-row items-start space-x-3 space-y-0">
+        <Checkbox
+          disabled={props.disabled}
+          required={props.required}
+          defaultChecked={props.defaultChecked}
+          onCheckedChange={props.onChange}
+        />
+        <Label className="text-sm font-medium" htmlFor={props.name}>
+          {props.name}
+        </Label>
+      </div>
+      <p className="marker:text-muted-foreground text-red-500 block text-[0.8rem] ">
+        {props.errorMsg}
+      </p>
+    </div>
+  );
+};
+
+export default CheckboxGeneric;
diff --git a/components/inputs/Visualizer.tsx b/components/inputs/Visualizer.tsx
new file mode 100644
index 00000000..fc5321aa
--- /dev/null
+++ b/components/inputs/Visualizer.tsx
@@ -0,0 +1,236 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+import { Button } from '../ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '../ui/form';
+import CheckboxGeneric from './Checkbox';
+import DateField from './date';
+import DateTimeField from './date-time';
+import EmailField from './email';
+import FileUpload from './fileUpload';
+import MultiSelectDropdown from './multiSelectItem';
+import NumberField from './numberfield';
+import RadioGeneric from './radioItems';
+import SelectDropdown from './selectIItem';
+import PhoneField from './telephone';
+import TextField from './text';
+import TextAreaGeneric from './textAreaField';
+import TimeField from './time';
+
+export default function Visualizer() {
+  const schema = z.object({
+    email: z.string().email('Invalid email address'),
+    name: z.string().min(3, 'Name must be at least 3 characters long'),
+    phone: z.coerce.number(),
+    number: z.coerce.number(),
+    textarea: z.string(),
+    file: z.any(),
+    checkbox: z.boolean(),
+    dateTime: z.string(),
+    date: z.string(),
+    time: z.string(),
+    select: z.string(),
+    radio: z.string(),
+    multiselect: z.string().array(),
+  });
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+  });
+
+  const items = ['item1', 'item2', 'item3', 'item4', 'item5'];
+
+  const onSubmit = (values: z.infer<typeof schema>) => {
+    try {
+      console.log('Form data:', values);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="ml-80 w-80 space-y-6"
+      >
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <EmailField {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <TextField {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="textarea"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <TextAreaGeneric {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="number"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <NumberField {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="phone"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <PhoneField {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="date"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <DateField {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="file"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <FileUpload {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="checkbox"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <CheckboxGeneric
+                  description="" // Combine description within label
+                  required={true}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="dateTime"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <DateTimeField description="Enter a time" {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="time"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <TimeField description="Enter a time" {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="select"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <SelectDropdown items={items} {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="radio"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <RadioGeneric items={items} {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="multiselect"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <MultiSelectDropdown
+                  items={items}
+                  {...field}
+                  required
+                  placeholder="Enter or Select values"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" className="bg-primary-500 hover:bg-primary-700">
+          Submit
+        </Button>
+      </form>
+    </Form>
+  );
+}
diff --git a/components/inputs/date-time.tsx b/components/inputs/date-time.tsx
new file mode 100644
index 00000000..518197a1
--- /dev/null
+++ b/components/inputs/date-time.tsx
@@ -0,0 +1,32 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { FaRegCalendarAlt } from 'react-icons/fa';
+
+import { Input, type InputProps } from '../ui/input';
+
+const DateTimeField = forwardRef<HTMLInputElement, InputProps>(
+  (
+    { label = 'Date & Time', placeholder = 'Enter Date & Time', ...props },
+    ref
+  ) => {
+    return (
+      <Input
+        ref={ref}
+        className=""
+        type="datetime-local"
+        max="9999-12-31T23:59"
+        placeholder={placeholder}
+        label={label}
+        LeftChild={FaRegCalendarAlt}
+        onChange={(event) => {
+          props.onChange?.({
+            target: { value: event.target.value + ':00Z' },
+          } as React.ChangeEvent<HTMLInputElement>);
+        }}
+      />
+    );
+  }
+);
+DateTimeField.displayName = 'DateTimeField';
+
+export default DateTimeField;
diff --git a/components/inputs/date.tsx b/components/inputs/date.tsx
new file mode 100644
index 00000000..e509f011
--- /dev/null
+++ b/components/inputs/date.tsx
@@ -0,0 +1,31 @@
+'use client';
+import { MdOutlineDateRange } from 'react-icons/md';
+import { forwardRef } from 'react';
+
+import { Input, type InputProps } from '../ui/input';
+
+const DateField = forwardRef<HTMLInputElement, InputProps>(function DateField(
+  {
+    label = 'Date',
+    placeholder = 'Enter your Date',
+    LeftChild = MdOutlineDateRange,
+    ...props
+  }: InputProps,
+  ref
+) {
+  return (
+    <Input
+      ref={ref}
+      label={label}
+      placeholder={placeholder}
+      type="date"
+      max="9999-12-31"
+      LeftChild={LeftChild}
+      {...props}
+    />
+  );
+});
+
+DateField.displayName = 'DateField';
+
+export default DateField;
diff --git a/components/inputs/email.tsx b/components/inputs/email.tsx
new file mode 100644
index 00000000..360abbb7
--- /dev/null
+++ b/components/inputs/email.tsx
@@ -0,0 +1,30 @@
+'use client';
+import { MdOutlineEmail } from 'react-icons/md';
+import { forwardRef } from 'react';
+
+import { Input, type InputProps } from '../ui/input';
+
+const EmailField = forwardRef<HTMLInputElement, InputProps>(function EmailField(
+  {
+    label = 'Email',
+    placeholder = 'Enter your Email',
+    LeftChild = MdOutlineEmail,
+    ...props
+  }: InputProps,
+  ref
+) {
+  return (
+    <Input
+      ref={ref}
+      label={label}
+      placeholder={placeholder}
+      type="email"
+      LeftChild={LeftChild}
+      {...props}
+    />
+  );
+});
+
+EmailField.displayName = 'EmailField';
+
+export default EmailField;
diff --git a/components/inputs/fileUpload.tsx b/components/inputs/fileUpload.tsx
new file mode 100644
index 00000000..f1f22d54
--- /dev/null
+++ b/components/inputs/fileUpload.tsx
@@ -0,0 +1,21 @@
+'use client';
+import React, { forwardRef } from 'react';
+
+import { Input, type InputProps } from '~/components/ui/input';
+
+const FileUpload = forwardRef<HTMLInputElement, InputProps>(
+  ({ label = 'Upload File', ...props }, ref) => {
+    return (
+      <Input
+        type="file"
+        id="file"
+        label={label}
+        inputClassName="p-1"
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+FileUpload.displayName = 'FileUpload';
+export default FileUpload;
diff --git a/components/inputs/multiSelectItem.tsx b/components/inputs/multiSelectItem.tsx
new file mode 100644
index 00000000..9a5516e5
--- /dev/null
+++ b/components/inputs/multiSelectItem.tsx
@@ -0,0 +1,48 @@
+import { forwardRef, type ForwardRefExoticComponent } from 'react';
+
+import { Label } from '../ui/label';
+import MultipleSelector, {
+  type MultipleSelectorProps,
+  type MultipleSelectorRef,
+} from '../ui/multiselect';
+import { type GenericProps } from './radioItems';
+
+interface ListProps extends GenericProps, MultipleSelectorProps {
+  items: string[];
+}
+
+const MultiSelectDropdown: ForwardRefExoticComponent<ListProps> = forwardRef<
+  MultipleSelectorRef,
+  ListProps
+>((props, ref) => {
+  return (
+    <div className={props.className}>
+      <Label htmlFor={props.name}>{props.label ? props.label : 'Select'}</Label>
+      {props.required && <span style={{ color: '#EC734B' }}>*</span>}
+      {props.description && (
+        <p className="text-muted-foreground block text-[0.8rem]">
+          {props.description}
+        </p>
+      )}
+      <MultipleSelector
+        ref={ref}
+        defaultOptions={props.items}
+        placeholder={props.placeholder}
+        onChange={props.onChange}
+        disabled={props.disabled}
+        value={props.value}
+        emptyIndicator={
+          <p className="text-gray-600 dark:text-gray-400 text-center text-lg leading-10">
+            no results found.
+          </p>
+        }
+      />
+      <p className="text-muted-foreground text-red-500 block text-[0.8rem]">
+        {props.errorMsg}
+      </p>
+    </div>
+  );
+});
+
+MultiSelectDropdown.displayName = 'MultiSelectDropdown';
+export default MultiSelectDropdown;
diff --git a/components/inputs/numberfield.tsx b/components/inputs/numberfield.tsx
new file mode 100644
index 00000000..562763bc
--- /dev/null
+++ b/components/inputs/numberfield.tsx
@@ -0,0 +1,29 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { AiOutlineNumber } from 'react-icons/ai';
+
+import { Input, type InputProps } from '../ui/input';
+
+const NumberField = forwardRef<HTMLInputElement, InputProps>(
+  ({ label = 'Number', placeholder = 'Enter a Number', ...props }, ref) => {
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = event.target.value.replace(/\D/g, '');
+      event.target.value = inputValue;
+    };
+
+    return (
+      <Input
+        ref={ref}
+        type="number"
+        placeholder={placeholder}
+        label={label}
+        LeftChild={AiOutlineNumber}
+        onChange={handleInputChange}
+        {...props}
+      />
+    );
+  }
+);
+NumberField.displayName = 'NumberField';
+
+export default NumberField;
diff --git a/components/inputs/radioItems.tsx b/components/inputs/radioItems.tsx
new file mode 100644
index 00000000..310617c7
--- /dev/null
+++ b/components/inputs/radioItems.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { Label } from '../ui/label';
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
+
+export interface GenericProps {
+  name?: string;
+  label?: string;
+  description?: string;
+  required?: boolean;
+  errorMsg?: string;
+  disabled?: boolean;
+  inputClassName?: string;
+  className?: string;
+}
+interface ListProps extends GenericProps {
+  items: string[];
+  onChange?: (value: string) => void;
+  value?: string;
+}
+
+const RadioGeneric = ({ items, ...props }: ListProps) => {
+  return (
+    <div className={props.className}>
+      <Label>{props.label ? props.label : 'Radio Group'}</Label>
+      {props.required && <span style={{ color: '#EC734B' }}>*</span>}
+      <RadioGroup
+        defaultValue={props.value}
+        disabled={props.disabled}
+        required={props.required}
+        className={props.inputClassName}
+        onValueChange={props.onChange}
+      >
+        {items.map((item) => (
+          <div key={item} className="flex items-center space-x-2">
+            <RadioGroupItem value={item} required={props.required} />
+            <Label>{item}</Label>
+          </div>
+        ))}
+      </RadioGroup>
+      <p className="marker:text-muted-foreground text-red-500 block text-[0.8rem] ">
+        {props.errorMsg}
+      </p>
+    </div>
+  );
+};
+
+RadioGeneric.displayName = 'RadioGeneric';
+
+export default RadioGeneric;
diff --git a/components/inputs/selectIItem.tsx b/components/inputs/selectIItem.tsx
new file mode 100644
index 00000000..c03989e9
--- /dev/null
+++ b/components/inputs/selectIItem.tsx
@@ -0,0 +1,55 @@
+'use client';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '~/components/ui/select';
+
+import { Label } from '../ui/label';
+import { type GenericProps } from './radioItems';
+
+interface ListProps extends GenericProps {
+  items: string[];
+  onChange?: (value: string) => void;
+  value?: string;
+}
+
+const SelectDropdown = ({ items, ...props }: ListProps) => {
+  return (
+    <div className={props.className}>
+      <Label htmlFor={props.name}>{props.label ? props.label : 'Select'}</Label>
+      {props.required && <span style={{ color: '#EC734B' }}>*</span>}
+      {props.description && (
+        <p className="text-muted-foreground block text-[0.8rem]">
+          {props.description}
+        </p>
+      )}
+      <Select
+        disabled={props.disabled}
+        required={props.required}
+        onValueChange={props.onChange}
+        defaultValue={props.value}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder="Select an item" />
+        </SelectTrigger>
+        <SelectContent>
+          {items.map((item) => (
+            <SelectItem key={item} value={item}>
+              {item}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <p className="text-muted-foreground text-red-500 block text-[0.8rem]">
+        {props.errorMsg}
+      </p>
+    </div>
+  );
+};
+
+SelectDropdown.displayName = 'SelectDropdown';
+
+export default SelectDropdown;
diff --git a/components/inputs/telephone.tsx b/components/inputs/telephone.tsx
new file mode 100644
index 00000000..acb5931b
--- /dev/null
+++ b/components/inputs/telephone.tsx
@@ -0,0 +1,32 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { AiOutlinePhone } from 'react-icons/ai';
+
+import { Input, type InputProps } from '../ui/input';
+
+const PhoneField = forwardRef<HTMLInputElement, InputProps>(
+  ({ label = 'Phone', placeholder = 'Enter your Number', ...props }, ref) => {
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = event.target.value.replace(/\D/g, '');
+      const truncatedValue = inputValue.slice(0, 10);
+      event.target.value = truncatedValue;
+      props.onChange?.(event);
+    };
+
+    return (
+      <Input
+        ref={ref}
+        type="tel"
+        placeholder={placeholder}
+        label={label}
+        LeftChild={AiOutlinePhone}
+        maxLength={10}
+        {...props}
+        onChange={handleInputChange}
+      />
+    );
+  }
+);
+PhoneField.displayName = 'PhoneField';
+
+export default PhoneField;
diff --git a/components/inputs/text.tsx b/components/inputs/text.tsx
new file mode 100644
index 00000000..53edf035
--- /dev/null
+++ b/components/inputs/text.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { PiTextT } from 'react-icons/pi';
+import { forwardRef } from 'react';
+
+import { Input, type InputProps } from '../ui/input';
+
+const TextField = forwardRef<HTMLInputElement, InputProps>(function TextField(
+  {
+    label = 'Text',
+    placeholder = 'Enter your text',
+    LeftChild = PiTextT,
+    ...props
+  },
+  ref
+) {
+  return (
+    <Input
+      ref={ref}
+      type="text"
+      placeholder={placeholder}
+      label={label}
+      LeftChild={LeftChild}
+      {...props}
+    />
+  );
+});
+
+TextField.displayName = 'TextField';
+
+export default TextField; // Export the component
diff --git a/components/inputs/textAreaField.tsx b/components/inputs/textAreaField.tsx
new file mode 100644
index 00000000..e2e1fae5
--- /dev/null
+++ b/components/inputs/textAreaField.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import React from 'react';
+
+import { Label } from '../ui/label';
+import { type GenericProps } from './radioItems';
+import { Textarea } from '../ui/textarea';
+
+interface TextFieldProps extends GenericProps {
+  placeholder?: string;
+}
+const TextAreaGeneric = React.forwardRef<HTMLTextAreaElement, TextFieldProps>(
+  (
+    {
+      placeholder = 'Enter text',
+      label = 'TextArea',
+      ...props
+    }: TextFieldProps,
+    ref
+  ) => {
+    return (
+      <div className={props.className}>
+        <Label htmlFor={props.name}>{label}</Label>
+        {props.required && <span style={{ color: '#EC734B' }}>*</span>}
+        {props.description && (
+          <p className="text-muted-foreground block text-[0.8rem]">
+            {props.description}
+          </p>
+        )}
+        <Textarea
+          ref={ref}
+          name={props.name}
+          required={props.required}
+          placeholder={placeholder}
+          {...props}
+        />
+        <p className="text-muted-foreground text-red-500 block text-[0.8rem]">
+          {props.errorMsg}
+        </p>
+      </div>
+    );
+  }
+);
+
+TextAreaGeneric.displayName = 'TextAreaGeneric';
+export default TextAreaGeneric;
diff --git a/components/inputs/time.tsx b/components/inputs/time.tsx
new file mode 100644
index 00000000..9043a27b
--- /dev/null
+++ b/components/inputs/time.tsx
@@ -0,0 +1,24 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { AiOutlineClockCircle } from 'react-icons/ai';
+
+import { Input, type InputProps } from '../ui/input';
+
+const TimeField = forwardRef<HTMLInputElement, InputProps>(
+  ({ label = 'Time', placeholder = 'Enter time', ...props }, ref) => {
+    return (
+      <Input
+        ref={ref}
+        className="pr-2"
+        type="time"
+        placeholder={placeholder}
+        label={label}
+        LeftChild={AiOutlineClockCircle}
+        {...props}
+      />
+    );
+  }
+);
+TimeField.displayName = 'TimeField';
+
+export default TimeField;
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 00000000..77667698
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '~/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
new file mode 100644
index 00000000..65cc18fa
--- /dev/null
+++ b/components/ui/calendar.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '~/lib/utils';
+import { buttonVariants } from '~/components/ui/button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-neutral-50 p-0 opacity-50 hover:opacity-100'
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: cn(
+          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+          props.mode === 'range'
+            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+            : '[&:has([aria-selected])]:rounded-md'
+        ),
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-8 w-8 p-0 font-normal aria-selected:opacity-100'
+        ),
+        day_range_start: 'day-range-start',
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-neutral-50 text-primary-foreground hover:bg-slate-200 hover:text-primary-foreground focus:bg-slate-100 focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
+        IconRight: () => <ChevronRightIcon className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
new file mode 100644
index 00000000..5a189e19
--- /dev/null
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+
+import { cn } from '~/lib/utils';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'focus-visible:ring-ring data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border border-primary-500 shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-50',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('text-current flex items-center justify-center')}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
new file mode 100644
index 00000000..42e4a435
--- /dev/null
+++ b/components/ui/command.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '~/lib/utils';
+import { Dialog, DialogContent } from '~/components/ui/dialog';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-neutral-50',
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+type CommandDialogProps = DialogProps;
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-neutral-50 py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('bg-border -mx-1 h-px', className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 00000000..4fa8348b
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import { cn } from '~/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  bg-black/80 fixed inset-0 z-50',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-neutral-50 p-6 shadow-lg duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..cf34371d
--- /dev/null
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,205 @@
+'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from '@radix-ui/react-icons';
+
+import { cn } from '~/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-neutral-50 p-1 shadow-lg',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border bg-neutral-50 p-1 shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="fill-current h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
new file mode 100644
index 00000000..331f6890
--- /dev/null
+++ b/components/ui/form.tsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form';
+
+import { cn } from '~/lib/utils';
+import { Label } from '~/components/ui/label';
+
+const Form = FormProvider;
+
+interface FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> {
+  name: TName;
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+interface FormItemContextValue {
+  id: string;
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-[0.8rem]', className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-destructive text-[0.8rem] font-medium', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 00000000..7113ce71
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,103 @@
+// Import necessary libraries
+import * as React from 'react';
+import { type IconBaseProps } from 'react-icons';
+
+import { cn } from '~/lib/utils';
+
+import { Label } from './label';
+
+// Define InputProps interface
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  alwaysFocused?: boolean;
+  label?: string;
+  ref?: React.ForwardedRef<HTMLInputElement>;
+  description?: string;
+  required?: boolean;
+  errorMsg?: string;
+  disabled?: boolean;
+  inputClassName?: string;
+  className?: string;
+
+  LeftChild?: React.ComponentType<IconBaseProps>; // Updated to a function that returns ReactNode
+  RightChild?: React.ComponentType<IconBaseProps>;
+  onRightChildClick?: () => void;
+}
+
+// Define Input component
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      description,
+      type,
+      LeftChild,
+      RightChild,
+      required = false,
+      label,
+      errorMsg,
+      inputClassName,
+      name,
+      ...props
+    }: InputProps,
+    ref
+  ) => {
+    const inputContainerClasses = cn('relative', 'flex items-center');
+
+    const inputClasses = cn(
+      'flex h-9 w-full rounded-md border border-input bg-neutral-50',
+      'text-sm transition-colors',
+      'placeholder:text-muted-foreground',
+      'file:border-0 file:bg-neutral-50 file:text-sm file:font-medium ',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'invalid:border-primary-500 invalid:outline-red-100 invalid:outline-offset-2',
+      inputClassName,
+      LeftChild ? 'pl-7 ' : 'pl-3 ' // Adjusted margin-top
+    );
+
+    return (
+      <div className={className}>
+        <Label htmlFor={name}>{label}</Label>
+        {required && <span style={{ color: '#EC734B' }}>*</span>}
+        {description && (
+          <p className="text-muted-foreground block text-[0.8rem]">
+            {description}
+          </p>
+        )}
+        <div className={inputContainerClasses}>
+          {LeftChild && (
+            <div className="text-muted-foreground absolute left-2 top-[0.70rem] h-4 w-4 ">
+              <LeftChild />
+            </div>
+          )}
+          <input
+            type={type}
+            className={inputClasses}
+            ref={ref}
+            name={name}
+            required={required}
+            maxLength={props.maxLength}
+            {...props}
+          />
+          {RightChild && (
+            <RightChild
+              className="absolute right-2 mx-2 hover:cursor-pointer"
+              // onClick={onRightChildClick}
+              size={20}
+            />
+          )}
+        </div>
+        <p className="text-muted-foreground text-red-500 block text-[0.8rem]">
+          {errorMsg}
+        </p>
+      </div>
+    );
+  }
+);
+
+// Set display name for Input component
+Input.displayName = 'Input';
+
+// Export Input component
+export { Input };
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 00000000..91476816
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '~/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/components/ui/multiselect.tsx b/components/ui/multiselect.tsx
new file mode 100644
index 00000000..04aacf02
--- /dev/null
+++ b/components/ui/multiselect.tsx
@@ -0,0 +1,486 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { Command as CommandPrimitive, useCommandState } from 'cmdk';
+import { forwardRef, useEffect } from 'react';
+
+import { cn } from '~/lib/utils';
+
+import { Badge } from './badge';
+import { Command, CommandGroup, CommandItem, CommandList } from './command';
+
+export interface Option {
+  value: string;
+  label: string;
+  disable?: boolean;
+  /** fixed option that can't be removed. */
+  fixed?: boolean;
+  /** Group the options by providing key. */
+  [key: string]: string | boolean | undefined;
+}
+type GroupOption = Record<string, string[]>;
+
+export interface MultipleSelectorProps {
+  value?: string[];
+  defaultOptions?: string[];
+  /** manually controlled options */
+  options?: string[];
+  placeholder?: string;
+  /** Loading component. */
+  loadingIndicator?: React.ReactNode;
+  /** Empty component. */
+  emptyIndicator?: React.ReactNode;
+  /** Debounce time for async search. Only work with `onSearch`. */
+  delay?: number;
+  /**
+   * Only work with `onSearch` prop. Trigger search when `onFocus`.
+   * For example, when user click on the input, it will trigger the search to get initial options.
+   **/
+  triggerSearchOnFocus?: boolean;
+  /** async search */
+  onSearch?: (value: string) => Promise<string[]>;
+  onChange?: (options: string[]) => void;
+  /** Limit the maximum number of selected options. */
+  maxSelected?: number;
+  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
+  onMaxSelected?: (maxLimit: number) => void;
+  /** Hide the placeholder when there are options selected. */
+  hidePlaceholderWhenSelected?: boolean;
+  disabled?: boolean;
+  /** Group the options base on provided key. */
+  groupBy?: string;
+  className?: string;
+  badgeClassName?: string;
+  /**
+   * First item selected is a default behavior by cmdk. That is why the default is true.
+   * This is a workaround solution by add a dummy item.
+   *
+   * @reference: https://github.com/pacocoursey/cmdk/issues/171
+   */
+  selectFirstItem?: boolean;
+  /** Allow user to create option when there is no option matched. */
+  creatable?: boolean;
+  /** Props of `Command` */
+  commandProps?: React.ComponentPropsWithoutRef<typeof Command>;
+  /** Props of `CommandInput` */
+  inputProps?: Omit<
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,
+    'value' | 'placeholder' | 'disabled'
+  >;
+}
+
+export interface MultipleSelectorRef {
+  selectedValue: string[];
+  input: HTMLInputElement;
+}
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+function transToGroupOption(options: string[], groupBy?: string) {
+  if (options.length === 0) {
+    return {};
+  }
+  if (!groupBy) {
+    return {
+      '': options,
+    };
+  }
+
+  const groupOption: GroupOption = {};
+  options.forEach((option) => {
+    const key = option || '';
+    if (!groupOption[key]) {
+      groupOption[key] = [];
+    }
+    groupOption[key].push(option);
+  });
+  return groupOption;
+}
+
+function removePickedOption(groupOption: GroupOption, picked: string[]) {
+  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;
+
+  for (const [key, value] of Object.entries(cloneOption)) {
+    cloneOption[key] = value.filter((val) => !picked.find((p) => p === val));
+  }
+  return cloneOption;
+}
+
+/**
+ * The `CommandEmpty` of shadcn/ui will cause the cmdk empty not rendering correctly.
+ * So we create one and copy the `Empty` implementation from `cmdk`.
+ *
+ * @reference: https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607
+ **/
+const CommandEmpty = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, forwardedRef) => {
+  const render = useCommandState((state) => state.filtered.count === 0);
+
+  if (!render) return null;
+
+  return (
+    <div
+      ref={forwardedRef}
+      className={cn('py-6 text-center text-sm', className)}
+      cmdk-empty=""
+      role="presentation"
+      {...props}
+    />
+  );
+});
+
+CommandEmpty.displayName = 'CommandEmpty';
+
+const MultipleSelector = React.forwardRef<
+  MultipleSelectorRef,
+  MultipleSelectorProps
+>(
+  (
+    {
+      value,
+      onChange,
+      placeholder,
+      defaultOptions: arrayDefaultOptions = [],
+      options: arrayOptions,
+      delay,
+      onSearch,
+      loadingIndicator,
+      emptyIndicator,
+      maxSelected = Number.MAX_SAFE_INTEGER,
+      onMaxSelected,
+      hidePlaceholderWhenSelected,
+      disabled,
+      groupBy,
+      className,
+      badgeClassName,
+      selectFirstItem = true,
+      creatable = false,
+      triggerSearchOnFocus = false,
+      commandProps,
+      inputProps,
+    }: MultipleSelectorProps,
+    ref: React.Ref<MultipleSelectorRef>
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const [open, setOpen] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+
+    const [selected, setSelected] = React.useState<string[]>(value ?? []);
+    const [options, setOptions] = React.useState<GroupOption>(
+      transToGroupOption(arrayDefaultOptions, groupBy)
+    );
+    const [inputValue, setInputValue] = React.useState('');
+    const debouncedSearchTerm = useDebounce(inputValue, delay ?? 500);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        selectedValue: [...selected],
+        input: inputRef.current!,
+      }),
+      [selected]
+    );
+
+    const handleUnselect = React.useCallback(
+      (option: string) => {
+        const newOptions = selected.filter((s) => s !== option);
+        setSelected(newOptions);
+        onChange?.(newOptions);
+      },
+      [selected]
+    );
+
+    const handleKeyDown = React.useCallback(
+      (e: React.KeyboardEvent<HTMLDivElement>) => {
+        const input = inputRef.current;
+        if (input) {
+          if (e.key === 'Delete' || e.key === 'Backspace') {
+            if (input.value === '' && selected.length > 0) {
+              handleUnselect(selected[selected.length - 1]);
+            }
+          }
+          // This is not a default behaviour of the <input /> field
+          if (e.key === 'Escape') {
+            input.blur();
+          }
+        }
+      },
+      [selected]
+    );
+
+    useEffect(() => {
+      if (value) {
+        setSelected(value);
+      }
+    }, [value]);
+
+    useEffect(() => {
+      /** If `onSearch` is provided, do not trigger options updated. */
+      if (!arrayOptions || onSearch) {
+        return;
+      }
+      const newOption = transToGroupOption(arrayOptions || [], groupBy);
+      if (JSON.stringify(newOption) !== JSON.stringify(options)) {
+        setOptions(newOption);
+      }
+    }, [arrayDefaultOptions, arrayOptions, groupBy, onSearch, options]);
+
+    useEffect(() => {
+      const doSearch = async () => {
+        setIsLoading(true);
+        const res = await onSearch?.(debouncedSearchTerm);
+        setOptions(transToGroupOption(res ?? [], groupBy));
+        setIsLoading(false);
+      };
+
+      const exec = async () => {
+        if (!onSearch || !open) return;
+
+        if (triggerSearchOnFocus) {
+          await doSearch();
+        }
+
+        if (debouncedSearchTerm) {
+          await doSearch();
+        }
+      };
+
+      void exec();
+    }, [debouncedSearchTerm, open]);
+
+    const CreatableItem = () => {
+      if (!creatable) return undefined;
+
+      const Item = (
+        <CommandItem
+          value={inputValue}
+          className="cursor-pointer"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onSelect={(value: string) => {
+            if (selected.length >= maxSelected) {
+              onMaxSelected?.(selected.length);
+              return;
+            }
+            setInputValue('');
+            const newOptions = [...selected, value];
+            setSelected(newOptions);
+            onChange?.(newOptions);
+          }}
+        >{`Create "${inputValue}"`}</CommandItem>
+      );
+
+      // For normal creatable
+      if (!onSearch && inputValue.length > 0) {
+        return Item;
+      }
+
+      // For async search creatable. avoid showing creatable item before loading at first.
+      if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {
+        return Item;
+      }
+
+      return undefined;
+    };
+
+    const EmptyItem = React.useCallback(() => {
+      if (!emptyIndicator) return undefined;
+
+      // For async search that showing emptyIndicator
+      if (onSearch && !creatable && Object.keys(options).length === 0) {
+        return (
+          <CommandItem value="-" disabled>
+            {emptyIndicator}
+          </CommandItem>
+        );
+      }
+
+      return <CommandEmpty>{emptyIndicator}</CommandEmpty>;
+    }, [creatable, emptyIndicator, onSearch, options]);
+
+    const selectables = React.useMemo<GroupOption>(
+      () => removePickedOption(options, selected),
+      [options, selected]
+    );
+
+    /** Avoid Creatable Selector freezing or lagging when paste a long string. */
+    const commandFilter = React.useCallback(() => {
+      if (commandProps?.filter) {
+        return commandProps.filter;
+      }
+
+      if (creatable) {
+        return (value: string, search: string) => {
+          return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
+        };
+      }
+      // Using default filter in `cmdk`. We don't have to provide it.
+      return undefined;
+    }, [creatable, commandProps?.filter]);
+
+    return (
+      <Command
+        {...commandProps}
+        onKeyDown={(e) => {
+          handleKeyDown(e);
+          commandProps?.onKeyDown?.(e);
+        }}
+        className={cn(
+          'overflow-visible bg-neutral-50',
+          commandProps?.className
+        )}
+        shouldFilter={
+          commandProps?.shouldFilter !== undefined
+            ? commandProps.shouldFilter
+            : !onSearch
+        } // When onSearch is provided, we don't want to filter the options. You can still override it.
+        filter={commandFilter()}
+      >
+        <div
+          className={cn(
+            'border-input focus-within:ring-ring invalid:outline-red-100 group rounded-md border px-3 py-2 text-sm ring-offset-background transition-colors invalid:border-primary-500 invalid:outline-offset-2 focus-within:ring-1 focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+        >
+          <div className="flex flex-wrap gap-1">
+            {selected.map((option) => {
+              return (
+                <Badge
+                  key={option}
+                  className={cn(
+                    'data-[disabled]:text-muted data-[disabled]:bg-neutral-400 data-[disabled]:hover:bg-neutral-400',
+                    'data-[fixed]:text-muted bg-primary-300 data-[fixed]:bg-neutral-400 data-[fixed]:hover:bg-neutral-400',
+                    badgeClassName
+                  )}
+                >
+                  {option}
+                  <button
+                    className={cn(
+                      'focus:ring-ring ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-offset-2'
+                    )}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        handleUnselect(option);
+                      }
+                    }}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                    onClick={() => handleUnselect(option)}
+                  >
+                    <X className="h-3 w-3 text-neutral-50 hover:text-neutral-900" />
+                  </button>
+                </Badge>
+              );
+            })}
+            {/* Avoid having the "Search" Icon */}
+            <CommandPrimitive.Input
+              {...inputProps}
+              ref={inputRef}
+              value={inputValue}
+              disabled={disabled}
+              onValueChange={(value) => {
+                setInputValue(value);
+                inputProps?.onValueChange?.(value);
+              }}
+              onBlur={(event) => {
+                setOpen(false);
+                inputProps?.onBlur?.(event);
+              }}
+              onFocus={(event) => {
+                setOpen(true);
+                triggerSearchOnFocus && onSearch?.(debouncedSearchTerm);
+                inputProps?.onFocus?.(event);
+              }}
+              placeholder={
+                hidePlaceholderWhenSelected && selected.length !== 0
+                  ? ''
+                  : placeholder
+              }
+              className={cn(
+                'placeholder:text-muted-foreground ml-2 flex-1 bg-neutral-50 outline-none disabled:cursor-not-allowed disabled:opacity-50',
+                inputProps?.className
+              )}
+            />
+          </div>
+        </div>
+        <div className="relative">
+          {open && (
+            <CommandList className="text-popover-foreground animate-in absolute top-0 z-10 w-full rounded-md border bg-neutral-50 shadow-md outline-none">
+              {isLoading ? (
+                <>{loadingIndicator}</>
+              ) : (
+                <>
+                  {EmptyItem()}
+                  {CreatableItem()}
+                  {!selectFirstItem && (
+                    <CommandItem value="-" className="hidden" />
+                  )}
+                  {Object.entries(selectables).map(([key, dropdowns]) => (
+                    <CommandGroup
+                      key={key}
+                      heading={key}
+                      className="h-full overflow-auto"
+                    >
+                      <>
+                        {dropdowns.map((option) => {
+                          return (
+                            <CommandItem
+                              key={option}
+                              value={option}
+                              onMouseDown={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                              }}
+                              onSelect={() => {
+                                if (selected.length >= maxSelected) {
+                                  onMaxSelected?.(selected.length);
+                                  return;
+                                }
+                                setInputValue('');
+                                const newOptions = [...selected, option];
+                                setSelected(newOptions);
+                                onChange?.(newOptions);
+                              }}
+                              className={cn(
+                                'cursor-pointer hover:bg-neutral-200'
+                              )}
+                            >
+                              {option}
+                            </CommandItem>
+                          );
+                        })}
+                      </>
+                    </CommandGroup>
+                  ))}
+                </>
+              )}
+            </CommandList>
+          )}
+        </div>
+      </Command>
+    );
+  }
+);
+
+MultipleSelector.displayName = 'MultipleSelector';
+export default MultipleSelector;
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
new file mode 100644
index 00000000..6f28b04d
--- /dev/null
+++ b/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '~/lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border bg-neutral-50 p-4 shadow-md outline-none',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
new file mode 100644
index 00000000..c2572ff7
--- /dev/null
+++ b/components/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon } from '@radix-ui/react-icons';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+import { cn } from '~/lib/utils';
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('grid gap-2', className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border border-primary-500 shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <CheckIcon className="fill-primary h-3.5 w-3.5" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 00000000..44ad4165
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,163 @@
+'use client';
+
+import * as React from 'react';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@radix-ui/react-icons';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+import { cn } from '~/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'border-input placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-neutral-50 px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDownIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-neutral-50 shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-neutral-200 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 00000000..81b892e2
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { cn } from '~/lib/utils';
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'border-input placeholder:text-muted-foreground focus-visible:ring-ring invalid:outline-red-100 flex min-h-[60px] w-full rounded-md border bg-neutral-50 px-3 py-2 text-sm shadow-sm invalid:border-primary-500 invalid:outline-offset-2 focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/package-lock.json b/package-lock.json
index a0b81363..6e4f8ef5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,24 +9,40 @@
       "version": "0.1.0",
       "dependencies": {
         "@formatjs/intl-localematcher": "^0.5.4",
+        "@hookform/resolvers": "^3.3.4",
+        "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-popover": "^1.0.7",
+        "@radix-ui/react-radio-group": "^1.1.3",
         "@radix-ui/react-scroll-area": "^1.0.5",
+        "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-toast": "^1.1.5",
         "@types/negotiator": "^0.6.3",
         "@vercel/postgres": "^0.7.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
-        "drizzle-orm": "^0.30.6",
+        "cmdk": "^0.2.1",
+        "date-fns": "^3.3.1",
+        "drizzle-orm": "^0.30.2",
         "embla-carousel-autoplay": "^8.0.0",
         "embla-carousel-react": "^8.0.0",
-        "framer-motion": "^11.0.5",
+        "lucide-react": "^0.323.0",
         "negotiator": "^0.6.3",
         "next": "14.1.0",
         "next-auth": "^4.24.5",
         "react": "^18",
+        "react-aria": "^3.25.0",
+        "react-day-picker": "^8.10.0",
         "react-dom": "^18",
+        "react-hook-form": "^7.50.1",
         "react-icons": "^5.0.1",
+        "react-stately": "^3.23.0",
         "tailwind-merge": "^2.2.1",
+        "tailwindcss-animate": "^1.0.7",
         "usehooks-ts": "^3.0.1",
         "zod": "^3.22.4"
       },
@@ -64,7 +80,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -237,6 +252,76 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.1"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+    },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz",
+      "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.6.tgz",
+      "integrity": "sha512-etVau26po9+eewJKYoiBKP6743I1br0/Ie00Pb/S/PtmYfmjTcOn2YCh2yNkSZI12h6Rg+BOgQYborXk46BvkA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.18.2",
+        "@formatjs/icu-skeleton-parser": "1.8.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.0.tgz",
+      "integrity": "sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.18.2",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@formatjs/intl-localematcher": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
@@ -245,6 +330,14 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz",
+      "integrity": "sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -278,55 +371,43 @@
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
+    "node_modules/@internationalized/date": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz",
+      "integrity": "sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==",
       "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
+        "@swc/helpers": "^0.5.0"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+    "node_modules/@internationalized/message": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.2.tgz",
+      "integrity": "sha512-MHAWsZWz8jf6jFPZqpTudcCM361YMtPIRu9CXkYmKjJ/0R3pQRScV5C0zS+Qi50O5UAm8ecKhkXx6mWDDcF6/g==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "intl-messageformat": "^10.1.0"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
+    "node_modules/@internationalized/number": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.1.tgz",
+      "integrity": "sha512-N0fPU/nz15SwR9IbfJ5xaS9Ss/O5h1sVXMZf43vc9mxEG48ovglvvzBjF53aHlq20uoR6c+88CrIXipU/LSzwg==",
       "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.1.tgz",
+      "integrity": "sha512-vWQOvRIauvFMzOO+h7QrdsJmtN1AXAFVcaLWP9AseRN2o7iHceZ6bIXhBD4teZl8i91A3gxKnWBlGgjCwU6MFQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -340,7 +421,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
       "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -349,7 +429,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -357,14 +436,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
       "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -389,59 +466,13 @@
       "integrity": "sha512-x4FavbNEeXx/baD/zC/SdrvkjSby8nBn8KcCREqk6UuwvwoAPZmaV8TFCAuo/cpovBRTIY67mHhe86MQQm/68Q==",
       "dev": true,
       "dependencies": {
-        "glob": "10.3.10"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/glob": {
-      "version": "10.3.10",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-      "dev": true,
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.5",
-        "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-        "path-scurry": "^1.10.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "glob": "7.1.7"
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.0.tgz",
-      "integrity": "sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==",
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.4.tgz",
+      "integrity": "sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==",
       "cpu": [
         "arm64"
       ],
@@ -454,9 +485,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.0.tgz",
-      "integrity": "sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==",
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
+      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
       "cpu": [
         "x64"
       ],
@@ -469,9 +500,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.0.tgz",
-      "integrity": "sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==",
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
+      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
       "cpu": [
         "arm64"
       ],
@@ -484,9 +515,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.0.tgz",
-      "integrity": "sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==",
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
+      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
       "cpu": [
         "arm64"
       ],
@@ -499,13 +530,28 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.0.tgz",
-      "integrity": "sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==",
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz",
+      "integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==",
       "cpu": [
         "x64"
       ],
       "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
+      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
       "os": [
         "linux"
       ],
@@ -514,9 +560,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.0.tgz",
-      "integrity": "sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==",
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz",
+      "integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==",
       "cpu": [
         "x64"
       ],
@@ -529,9 +575,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.0.tgz",
-      "integrity": "sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==",
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
+      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
       "cpu": [
         "arm64"
       ],
@@ -544,9 +590,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.0.tgz",
-      "integrity": "sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==",
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
+      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
       "cpu": [
         "ia32"
       ],
@@ -559,9 +605,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.0.tgz",
-      "integrity": "sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==",
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
+      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
       "cpu": [
         "x64"
       ],
@@ -577,7 +623,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -590,7 +635,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -599,7 +643,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -654,6 +697,85 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+      "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz",
+      "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
@@ -724,6 +846,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -768,8 +926,37 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.0.1",
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz",
+      "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-menu": "2.0.6",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
       "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
       "dependencies": {
@@ -810,6 +997,14 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
@@ -828,6 +1023,138 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
+      "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
+      "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.7.tgz",
+      "integrity": "sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+      "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
@@ -898,6 +1225,69 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz",
+      "integrity": "sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-scroll-area": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz",
@@ -929,6 +1319,49 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
+      "integrity": "sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -947,74 +1380,1621 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
-      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
+      "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+      "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+      "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@react-aria/breadcrumbs": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.11.tgz",
+      "integrity": "sha512-bQz4g2tKvcWxeqPGj9O0RQf++Ka8f2o/pJMJB+QQ27DVQWhxpQpND//oFku2aFYkxHB/fyD9qVoiqpQR25bidw==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/link": "^3.6.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/breadcrumbs": "^3.7.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/button": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/button/-/button-3.9.3.tgz",
+      "integrity": "sha512-ZXo2VGTxfbaTEnfeIlm5ym4vYpGAy8sGrad8Scv+EyDAJWLMKokqctfaN6YSWbqUApC3FN63IvMqASflbmnYig==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/toggle": "^3.7.2",
+        "@react-types/button": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/calendar": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/calendar/-/calendar-3.5.6.tgz",
+      "integrity": "sha512-PA0Ur5WcODMn7t2gCUvq61YktkB+WlSZjzDr5kcY3sdl53ZjiyqCa2hYgrb6R0J859LVJXAp+5Qaproz8g1oLA==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/calendar": "^3.4.4",
+        "@react-types/button": "^3.9.2",
+        "@react-types/calendar": "^3.4.4",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/checkbox": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/checkbox/-/checkbox-3.14.1.tgz",
+      "integrity": "sha512-b4rtrg5SpRSa9jBOqzJMmprJ+jDi3KyVvUh+DsvISe5Ti7gVAhMBgnca1D0xBp22w2jhk/o4gyu1bYxGLum0GA==",
+      "dependencies": {
+        "@react-aria/form": "^3.0.3",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/toggle": "^3.10.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/checkbox": "^3.6.3",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/toggle": "^3.7.2",
+        "@react-types/checkbox": "^3.7.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/combobox": {
+      "version": "3.8.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/combobox/-/combobox-3.8.4.tgz",
+      "integrity": "sha512-HyTWIo2B/0xq0Of+sDEZCfJyf4BvCvDYIWG4UhjqL1kHIHIGQyyr+SldbVUjXVYnk8pP1eGB3ttiREujjjALPQ==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/listbox": "^3.11.5",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/menu": "^3.13.1",
+        "@react-aria/overlays": "^3.21.1",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/textfield": "^3.14.3",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/combobox": "^3.8.2",
+        "@react-stately/form": "^3.0.1",
+        "@react-types/button": "^3.9.2",
+        "@react-types/combobox": "^3.10.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/datepicker": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/datepicker/-/datepicker-3.9.3.tgz",
+      "integrity": "sha512-1AjCAizd88ACKjVNhFazX4HZZFwWi2rsSlGCTm66Nx6wm5N/Cpbm466dpYEFyQUsKSOG4CC65G1zfYoMPe48MQ==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@internationalized/number": "^3.5.1",
+        "@internationalized/string": "^3.2.1",
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/form": "^3.0.3",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/spinbutton": "^3.6.3",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/datepicker": "^3.9.2",
+        "@react-stately/form": "^3.0.1",
+        "@react-types/button": "^3.9.2",
+        "@react-types/calendar": "^3.4.4",
+        "@react-types/datepicker": "^3.7.2",
+        "@react-types/dialog": "^3.5.8",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/dialog": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@react-aria/dialog/-/dialog-3.5.12.tgz",
+      "integrity": "sha512-7UJR/h/Y364u6Ltpw0bT51B48FybTuIBacGpEJN5IxZlpxvQt0KQcBDiOWfAa/GQogw4B5hH6agaOO0nJcP49Q==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/overlays": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/dialog": "^3.5.8",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/dnd": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/dnd/-/dnd-3.5.3.tgz",
+      "integrity": "sha512-0gi6sRnr97fSQnGy+CMt+99/+vVqr+qv2T9Ts8X9TAzxHNokz5QfSL88QSlTU36EnAVLxPY18iZQWCExSjKpEQ==",
+      "dependencies": {
+        "@internationalized/string": "^3.2.1",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/overlays": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/dnd": "^3.2.8",
+        "@react-types/button": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/focus": {
+      "version": "3.16.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.16.2.tgz",
+      "integrity": "sha512-Rqo9ummmgotESfypzFjI3uh58yMpL+E+lJBbQuXkBM0u0cU2YYzu0uOrFrq3zcHk997udZvq1pGK/R+2xk9B7g==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/form": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/form/-/form-3.0.3.tgz",
+      "integrity": "sha512-5Q2BHE4TTPDzGY2npCzpRRYshwWUb3SMUA/Cbz7QfEtBk+NYuVaq3KjvqLqgUUdyKtqLZ9Far0kIAexloOC4jw==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/form": "^3.0.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid": {
+      "version": "3.8.8",
+      "resolved": "https://registry.npmjs.org/@react-aria/grid/-/grid-3.8.8.tgz",
+      "integrity": "sha512-7Bzbya4tO0oIgqexwRb8D6ZdC0GASYq9f/pnkrqocgvG9e1SCld4zOioKbYQDvAK/NnbCgXmmdqFAcLM/iazaA==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/grid": "^3.8.5",
+        "@react-stately/selection": "^3.14.3",
+        "@react-stately/virtualizer": "^3.6.8",
+        "@react-types/checkbox": "^3.7.1",
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/gridlist": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/gridlist/-/gridlist-3.7.5.tgz",
+      "integrity": "sha512-RmHEJ++vngHYEWbUCtLLmGh7H3vNd2Y9S0q/9SgHFPbqPZycT5mxDZ2arqpOXeHRVRvPBaW9ZlMxI2bPOePrYw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/grid": "^3.8.8",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/list": "^3.10.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/i18n": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.10.2.tgz",
+      "integrity": "sha512-Z1ormoIvMOI4mEdcFLYsoJy9w/EzBdBmgfLP+S/Ah+1xwQOXpgwZxiKOhYHpWa0lf6hkKJL34N9MHJvCJ5Crvw==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@internationalized/message": "^3.1.2",
+        "@internationalized/number": "^3.5.1",
+        "@internationalized/string": "^3.2.1",
+        "@react-aria/ssr": "^3.9.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.21.1.tgz",
+      "integrity": "sha512-AlHf5SOzsShkHfV8GLLk3v9lEmYqYHURKcXWue0JdYbmquMRkUsf/+Tjl1+zHVAQ8lKqRnPYbTmc4AcZbqxltw==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/label": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/label/-/label-3.7.6.tgz",
+      "integrity": "sha512-ap9iFS+6RUOqeW/F2JoNpERqMn1PvVIo3tTMrJ1TY1tIwyJOxdCBRgx9yjnPBnr+Ywguep+fkPNNi/m74+tXVQ==",
+      "dependencies": {
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/link": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/link/-/link-3.6.5.tgz",
+      "integrity": "sha512-kg8CxKqkciQFzODvLAfxEs8gbqNXFZCW/ISOE2LHYKbh9pA144LVo71qO3SPeYVVzIjmZeW4vEMdZwqkNozecw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/link": "^3.5.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/listbox": {
+      "version": "3.11.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/listbox/-/listbox-3.11.5.tgz",
+      "integrity": "sha512-y3a3zQYjT+JKgugCMMKS7K9sRoCoP1Z6Fiiyfd77OHXWzh9RlnvWGsseljynmbxLzSuPwFtCYkU1Jz4QwsPUIg==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/list": "^3.10.3",
+        "@react-types/listbox": "^3.4.7",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/live-announcer": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/live-announcer/-/live-announcer-3.3.2.tgz",
+      "integrity": "sha512-aOyPcsfyY9tLCBhuUaYCruwcd1IrYLc47Ou+J7wMzjeN9v4lsaEfiN12WFl8pDqOwfy6/7It2wmlm5hOuZY8wQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@react-aria/menu": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/menu/-/menu-3.13.1.tgz",
+      "integrity": "sha512-jF80YIcvD16Fgwm5pj7ViUE3Dj7z5iewQixLaFVdvpgfyE58SD/ZVU9/JkK5g/03DYM0sjpUKZGkdFxxw8eKnw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/overlays": "^3.21.1",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/menu": "^3.6.1",
+        "@react-stately/tree": "^3.7.6",
+        "@react-types/button": "^3.9.2",
+        "@react-types/menu": "^3.9.7",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/meter": {
+      "version": "3.4.11",
+      "resolved": "https://registry.npmjs.org/@react-aria/meter/-/meter-3.4.11.tgz",
+      "integrity": "sha512-P1G3Jdh0f/uieUDqvc3Ee4wzqBJa7H077BVSC3KPRqEp6YY7JimZGWjOwbFlO2PXhryXm/dI8EzUmh+4ZXjq/g==",
+      "dependencies": {
+        "@react-aria/progress": "^3.4.11",
+        "@react-types/meter": "^3.3.7",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/numberfield": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/numberfield/-/numberfield-3.11.1.tgz",
+      "integrity": "sha512-JQ1Z+Ho5H+jeav7jt9A4vBsIQR/Dd2CFbObrULjGkqSrnWjARFZBv3gZwmfGCtplEPeAv9buYKHAqebPtJNUww==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/spinbutton": "^3.6.3",
+        "@react-aria/textfield": "^3.14.3",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/numberfield": "^3.9.1",
+        "@react-types/button": "^3.9.2",
+        "@react-types/numberfield": "^3.8.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/overlays": {
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.21.1.tgz",
+      "integrity": "sha512-djEBDF+TbIIOHWWNpdm19+z8xtY8U+T+wKVQg/UZ6oWnclSqSWeGl70vu73Cg4HVBJ4hKf1SRx4Z/RN6VvH4Yw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/ssr": "^3.9.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-aria/visually-hidden": "^3.8.10",
+        "@react-stately/overlays": "^3.6.5",
+        "@react-types/button": "^3.9.2",
+        "@react-types/overlays": "^3.8.5",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/progress": {
+      "version": "3.4.11",
+      "resolved": "https://registry.npmjs.org/@react-aria/progress/-/progress-3.4.11.tgz",
+      "integrity": "sha512-RePHbS15/KYFiApYLdwazwvWKsB9q0Kn5DGCSb0hqCC+k2Eui8iVVOsegswiP+xqkk/TiUCIkBEw22W3Az4kTg==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/progress": "^3.5.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/radio": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/radio/-/radio-3.10.2.tgz",
+      "integrity": "sha512-CTUTR+qt3BLjmyQvKHZuVm+1kyvT72ZptOty++sowKXgJApTLdjq8so1IpaLAr8JIfzqD5I4tovsYwIQOX8log==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/form": "^3.0.3",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/radio": "^3.10.2",
+        "@react-types/radio": "^3.7.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/searchfield": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/searchfield/-/searchfield-3.7.3.tgz",
+      "integrity": "sha512-mnYI969R7tU3yMRIGmY1+peq7tmEW0W3MB/J2ImK36Obz/91tTtspHHEeFtPlQDLIyvVPB0Ucam4LIxCKPJm/Q==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/textfield": "^3.14.3",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/searchfield": "^3.5.1",
+        "@react-types/button": "^3.9.2",
+        "@react-types/searchfield": "^3.5.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/select": {
+      "version": "3.14.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/select/-/select-3.14.3.tgz",
+      "integrity": "sha512-9KCxI41FI+jTxEfUzRsMdJsZvjkCuuhL4UHig8MZXtXs0nsi7Ir3ezUDQ9m5MSG+ooBYM/CA9DyLDvo5Ioef+g==",
+      "dependencies": {
+        "@react-aria/form": "^3.0.3",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/listbox": "^3.11.5",
+        "@react-aria/menu": "^3.13.1",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-aria/visually-hidden": "^3.8.10",
+        "@react-stately/select": "^3.6.2",
+        "@react-types/button": "^3.9.2",
+        "@react-types/select": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/selection": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/selection/-/selection-3.17.5.tgz",
+      "integrity": "sha512-gO5jBUkc7WdkiFMlWt3x9pTSuj3Yeegsxfo44qU5NPlKrnGtPRZDWrlACNgkDHu645RNNPhlyoX0C+G8mUg1xA==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/selection": "^3.14.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/separator": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/@react-aria/separator/-/separator-3.3.11.tgz",
+      "integrity": "sha512-UTla+3P2pELpP73WSfbwZgP1y1wODFBQbEOHnUxxO8ocyaUyQLJdvc07bBLLpPoyutlggRG0v9ACo0Rui7AjOg==",
+      "dependencies": {
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/slider": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/slider/-/slider-3.7.6.tgz",
+      "integrity": "sha512-ZeZhyHzhk9gxGuThPKgX2K3RKsxPxsFig1iYoJvqP8485NtHYQIPht2YcpEKA9siLxGF0DR9VCfouVhSoW0AEA==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/slider": "^3.5.2",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/slider": "^3.7.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/spinbutton": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/spinbutton/-/spinbutton-3.6.3.tgz",
+      "integrity": "sha512-IlfhRu/pc9zOt2C5zSEB7NmmzddvWisGx2iGzw8BwIKMD+cN3uy+Qwp+sG6Z/JzFEBN0F6Mxm3l5lhbiqjpICQ==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/button": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.2.tgz",
+      "integrity": "sha512-0gKkgDYdnq1w+ey8KzG9l+H5Z821qh9vVjztk55rUg71vTk/Eaebeir+WtzcLLwTjw3m/asIjx8Y59y1lJZhBw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/switch": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/switch/-/switch-3.6.2.tgz",
+      "integrity": "sha512-X5m/omyhXK+V/vhJFsHuRs2zmt9Asa/RuzlldbXnWohLdeuHMPgQnV8C9hg3f+sRi3sh9UUZ64H61pCtRoZNwg==",
+      "dependencies": {
+        "@react-aria/toggle": "^3.10.2",
+        "@react-stately/toggle": "^3.7.2",
+        "@react-types/switch": "^3.5.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/table": {
+      "version": "3.13.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/table/-/table-3.13.5.tgz",
+      "integrity": "sha512-P2nHEDk2CCoEbMFKNCyBC9qvmv7F/IXARDt/7z/J4mKFgU2iNSK+/zw6yrb38q33Zlk8hDaqSYNxHlMrh+/1MQ==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/grid": "^3.8.8",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/live-announcer": "^3.3.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-aria/visually-hidden": "^3.8.10",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/flags": "^3.0.1",
+        "@react-stately/table": "^3.11.6",
+        "@react-stately/virtualizer": "^3.6.8",
+        "@react-types/checkbox": "^3.7.1",
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/table": "^3.9.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/tabs": {
+      "version": "3.8.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/tabs/-/tabs-3.8.5.tgz",
+      "integrity": "sha512-Jvt33/W+66n5oCxVwHAYarJ3Fit61vULiPcG7uTez0Mf11cq/C72wOrj+ZuNz6PTLTi2veBNQ7MauY72SnOjRg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/tabs": "^3.6.4",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/tabs": "^3.3.5",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/tag": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/tag/-/tag-3.3.3.tgz",
+      "integrity": "sha512-tlJD9qj1XcsPIZD7DVJ6tWv8t7Z87/8qkbRDx7ugNqeHso9z0WqH9ZkSt17OFUWE2IQIk3V8D3iBSOtmhXcZGQ==",
+      "dependencies": {
+        "@react-aria/gridlist": "^3.7.5",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/list": "^3.10.3",
+        "@react-types/button": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/textfield": {
+      "version": "3.14.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/textfield/-/textfield-3.14.3.tgz",
+      "integrity": "sha512-wPSjj/mTABspYQdahg+l5YMtEQ3m5iPCTtb5g6nR1U1rzJkvS4i5Pug6PUXeLeMz2H3ToflPWGlNOqBioAFaOQ==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/form": "^3.0.3",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/textfield": "^3.9.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/toggle/-/toggle-3.10.2.tgz",
+      "integrity": "sha512-DgitscHWgI6IFgnvp2HcMpLGX/cAn+XX9kF5RJQbRQ9NqUgruU5cEEGSOLMrEJ6zXDa2xmOiQ+kINcyNhA+JLg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/toggle": "^3.7.2",
+        "@react-types/checkbox": "^3.7.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/tooltip": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/tooltip/-/tooltip-3.7.2.tgz",
+      "integrity": "sha512-6jXOSGPao3gPgUQWLbH2r/jxGMqIaIKrJgfwu9TQrh+UkwwiTYW20EpEDCYY2nRFlcoi7EYAiPDSEbHCwXS7Lg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-stately/tooltip": "^3.4.7",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/tooltip": "^3.4.7",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.23.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.23.2.tgz",
+      "integrity": "sha512-yznR9jJ0GG+YJvTMZxijQwVp+ahP66DY0apZf7X+dllyN+ByEDW+yaL1ewYPIpugxVzH5P8jhnBXsIyHKN411g==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.2",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/visually-hidden": {
+      "version": "3.8.10",
+      "resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.8.10.tgz",
+      "integrity": "sha512-np8c4wxdbE7ZrMv/bnjwEfpX0/nkWy9sELEb0sK8n4+HJ+WycoXXrVxBUb9tXgL/GCx5ReeDQChjQWwajm/z3A==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/calendar": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/calendar/-/calendar-3.4.4.tgz",
+      "integrity": "sha512-f9ZOd096gGGD+3LmU1gkmfqytGyQtrgi+Qjn+70GbM2Jy65pwOR4I9YrobbmeAFov5Tff13mQEa0yqWvbcDLZQ==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/calendar": "^3.4.4",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/checkbox": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/checkbox/-/checkbox-3.6.3.tgz",
+      "integrity": "sha512-hWp0GXVbMI4sS2NbBjWgOnHNrRqSV4jeftP8zc5JsIYRmrWBUZitxluB34QuVPzrBO29bGsF0GTArSiQZt6BWw==",
+      "dependencies": {
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/checkbox": "^3.7.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/collections": {
+      "version": "3.10.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.10.5.tgz",
+      "integrity": "sha512-k8Q29Nnvb7iAia1QvTanZsrWP2aqVNBy/1SlE6kLL6vDqtKZC+Esd1SDLHRmIcYIp5aTdfwIGd0NuiRQA7a81Q==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/combobox": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/combobox/-/combobox-3.8.2.tgz",
+      "integrity": "sha512-f+IHuFW848VoMbvTfSakn2WIh2urDxO355LrKxnisXPCkpQHpq3lvT2mJtKJwkPxjAy7xPjpV8ejgga2R6p53Q==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/list": "^3.10.3",
+        "@react-stately/overlays": "^3.6.5",
+        "@react-stately/select": "^3.6.2",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/combobox": "^3.10.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/data": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/data/-/data-3.11.2.tgz",
+      "integrity": "sha512-yhK2upk2WbJeiLBRWHrh/4G2CvmmozCzoivLaRAPYu53m1J3MyzVGCLJgnZMbMZvAbNcYWZK6IzO6VqZ2y1fOw==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/datepicker": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/datepicker/-/datepicker-3.9.2.tgz",
+      "integrity": "sha512-Z6FrK6Af7R5BizqHhJFCj3Hn32mg5iLSDdEgFQAuO043guOXUKFUAnbxfbQUjL6PGE6QwWMfQD7PPGebHn9Ifw==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@internationalized/string": "^3.2.1",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/overlays": "^3.6.5",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/datepicker": "^3.7.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/dnd": {
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@react-stately/dnd/-/dnd-3.2.8.tgz",
+      "integrity": "sha512-oSo+2Bzum3Q1/d+3FuaDmpVHqqBB004tycuQDDFtad3N1BKm+fNfmslRK1ioLkPLK4sm1130V+BZBY3JXLe80A==",
+      "dependencies": {
+        "@react-stately/selection": "^3.14.3",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/flags": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.0.1.tgz",
+      "integrity": "sha512-h5PcDMj54aipQNO18ig/IMI1kzPwcvSwVq5M6Ib6XE1WIkOH0dIuW2eADdAOhcGi3KXJtXVdD29zh0Eox1TKgQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.4.14"
+      }
+    },
+    "node_modules/@react-stately/flags/node_modules/@swc/helpers": {
+      "version": "0.4.36",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.36.tgz",
+      "integrity": "sha512-5lxnyLEYFskErRPenYItLRSge5DjrJngYKdVjRSrWfza9G6KkgHEXi0vUZiyUeMU5JfXH1YnvXZzSp8ul88o2Q==",
+      "dependencies": {
+        "legacy-swc-helpers": "npm:@swc/helpers@=0.4.14",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@react-stately/form": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/form/-/form-3.0.1.tgz",
+      "integrity": "sha512-T1Ul2Ou0uE/S4ECLcGKa0OfXjffdjEHfUFZAk7OZl0Mqq/F7dl5WpoLWJ4d4IyvZzGO6anFNenP+vODWbrF3NA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/grid": {
+      "version": "3.8.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/grid/-/grid-3.8.5.tgz",
+      "integrity": "sha512-KCzi0x0p1ZKK+OptonvJqMbn6Vlgo6GfOIlgcDd0dNYDP8TJ+3QFJAFre5mCr7Fubx7LcAOio4Rij0l/R8fkXQ==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/selection": "^3.14.3",
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/list": {
+      "version": "3.10.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/list/-/list-3.10.3.tgz",
+      "integrity": "sha512-Ul8el0tQy2Ucl3qMQ0fiqdJ874W1ZNjURVSgSxN+pGwVLNBVRjd6Fl7YwZFCXER2YOlzkwg+Zqozf/ZlS0EdXA==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/selection": "^3.14.3",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/menu": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/menu/-/menu-3.6.1.tgz",
+      "integrity": "sha512-3v0vkTm/kInuuG8jG7jbxXDBnMQcoDZKWvYsBQq7+POt0LmijbLdbdZPBoz9TkZ3eo/OoP194LLHOaFTQyHhlw==",
+      "dependencies": {
+        "@react-stately/overlays": "^3.6.5",
+        "@react-types/menu": "^3.9.7",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/numberfield": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/numberfield/-/numberfield-3.9.1.tgz",
+      "integrity": "sha512-btBIcBEfSVCUm6NwJrMrMygoIu/fQGazzD0RhF7PNsfvkFiWn+TSOyQqSXcsUJVOnBfoS/dVWj6r57KA7zl3FA==",
+      "dependencies": {
+        "@internationalized/number": "^3.5.1",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/numberfield": "^3.8.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/overlays": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.5.tgz",
+      "integrity": "sha512-U4rCFj6TPJPXLUvYXAcvh+yP/CO2W+7f0IuqP7ZZGE+Osk9qFkT+zRK5/6ayhBDFpmueNfjIEAzT9gYPQwNHFw==",
+      "dependencies": {
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/overlays": "^3.8.5",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/radio": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/radio/-/radio-3.10.2.tgz",
+      "integrity": "sha512-JW5ZWiNMKcZvMTsuPeWJQLHXD5rlqy7Qk6fwUx/ZgeibvMBW/NnW19mm2+IMinzmbtERXvR6nsiA837qI+4dew==",
+      "dependencies": {
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/radio": "^3.7.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/searchfield": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/searchfield/-/searchfield-3.5.1.tgz",
+      "integrity": "sha512-9A8Wghx1avRHhMpNH1Nj+jFfiF1bhsff2GEC5PZgWYzhCykw3G5bywn3JAuUS4kh7Vpqhbu4KpHAhmWPSv4B/Q==",
+      "dependencies": {
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/searchfield": "^3.5.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/select": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/select/-/select-3.6.2.tgz",
+      "integrity": "sha512-duOxdHKol93h6Ew6fap6Amz+zngoERKZLSKVm/8I8uaBgkoBhEeTFv7mlpHTgINxymMw3mMrvy6GL/gfKFwkqg==",
+      "dependencies": {
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/list": "^3.10.3",
+        "@react-stately/overlays": "^3.6.5",
+        "@react-types/select": "^3.9.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/selection": {
+      "version": "3.14.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/selection/-/selection-3.14.3.tgz",
+      "integrity": "sha512-d/t0rIWieqQ7wjLoMoWnuHEUSMoVXxkPBFuSlJF3F16289FiQ+b8aeKFDzFTYN7fFD8rkZTnpuE4Tcxg3TmA+w==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/slider": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/slider/-/slider-3.5.2.tgz",
+      "integrity": "sha512-ntH3NLRG+AwVC7q4Dx9DcmMkMh9vmHjHNXAgaoqNjhvwfSIae7sQ69CkVe6XeJjIBy6LlH81Kgapz+ABe5a1ZA==",
+      "dependencies": {
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/slider": "^3.7.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/table": {
+      "version": "3.11.6",
+      "resolved": "https://registry.npmjs.org/@react-stately/table/-/table-3.11.6.tgz",
+      "integrity": "sha512-34YsfOILXusj3p6QNcKEaDWVORhM6WEhwPSLCZlkwAJvkxuRQFdih5rQKoIDc0uV5aZsB6bYBqiFhnjY0VERhw==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/flags": "^3.0.1",
+        "@react-stately/grid": "^3.8.5",
+        "@react-stately/selection": "^3.14.3",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/table": "^3.9.3",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tabs": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/tabs/-/tabs-3.6.4.tgz",
+      "integrity": "sha512-WZJgMBqzLgN88RN8AxhY4aH1+I+4w1qQA0Lh3LRSDegaytd+NHixCWaP3IPjePgCB5N1UsPe96Xglw75zjHmDg==",
+      "dependencies": {
+        "@react-stately/list": "^3.10.3",
+        "@react-types/shared": "^3.22.1",
+        "@react-types/tabs": "^3.3.5",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/toggle": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.7.2.tgz",
+      "integrity": "sha512-SHCF2btcoK57c4lyhucRbyPBAFpp0Pdp0vcPdn3hUgqbu6e5gE0CwG/mgFmZRAQoc7PRc7XifL0uNw8diJJI0Q==",
+      "dependencies": {
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/checkbox": "^3.7.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tooltip": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@react-stately/tooltip/-/tooltip-3.4.7.tgz",
+      "integrity": "sha512-ACtRgBQ8rphBtsUaaxvEAM0HHN9PvMuyvL0vUHd7jvBDCVZJ6it1BKu9SBKjekBkoBOw9nemtkplh9R2CA6V8Q==",
+      "dependencies": {
+        "@react-stately/overlays": "^3.6.5",
+        "@react-types/tooltip": "^3.4.7",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tree": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/@react-stately/tree/-/tree-3.7.6.tgz",
+      "integrity": "sha512-y8KvEoZX6+YvqjNCVGS3zA/BKw4D3XrUtUKIDme3gu5Mn6z97u+hUXKdXVCniZR7yvV3fHAIXwE5V2K8Oit4aw==",
+      "dependencies": {
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/selection": "^3.14.3",
+        "@react-stately/utils": "^3.9.1",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.9.1.tgz",
+      "integrity": "sha512-yzw75GE0iUWiyps02BOAPTrybcsMIxEJlzXqtvllAb01O9uX5n0i3X+u2eCpj2UoDF4zS08Ps0jPgWxg8xEYtA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/virtualizer": {
+      "version": "3.6.8",
+      "resolved": "https://registry.npmjs.org/@react-stately/virtualizer/-/virtualizer-3.6.8.tgz",
+      "integrity": "sha512-Pf06ihTwExRJltGhi72tmLIo0pcjkL55nu7ifMafAAdxZK4ONxRLSuUjjpvYf/0Rs92xRZy2t/XmHREnfirdkQ==",
+      "dependencies": {
+        "@react-aria/utils": "^3.23.2",
+        "@react-types/shared": "^3.22.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/breadcrumbs": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/@react-types/breadcrumbs/-/breadcrumbs-3.7.3.tgz",
+      "integrity": "sha512-eFto/+6J+JR58vThNcALZRA1OlqlG3GzQ/bq3q8IrrkOZcrfbEJJCWit/+53Ia98siJKuF4OJHnotxIVIz5I3w==",
+      "dependencies": {
+        "@react-types/link": "^3.5.3",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/button": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.9.2.tgz",
+      "integrity": "sha512-EnPTkGHZRtiwAoJy5q9lDjoG30bEzA/qnvKG29VVXKYAGeqY2IlFs1ypmU+z1X/CpJgPcG3I5cakM7yTVm3pSg==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/calendar": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@react-types/calendar/-/calendar-3.4.4.tgz",
+      "integrity": "sha512-hV1Thmb/AES5OmfPvvmyjSkmsEULjiDfA7Yyy70L/YKuSNKb7Su+Bf2VnZuDW3ec+GxO4JJNlpJ0AkbphWBvcg==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/checkbox": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.7.1.tgz",
+      "integrity": "sha512-kuGqjQFex0As/3gfWyk+e9njCcad/ZdnYLLiNvhlk15730xfa0MmnOdpqo9jfuFSXBjOcpxoofvEhvrRMtEdUA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/combobox": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-types/combobox/-/combobox-3.10.1.tgz",
+      "integrity": "sha512-XMno1rgVRNta49vf5nV7VJpVSVAV20tt79t618gG1qRKH5Kt2Cy8lz2fQ5vHG6UTv/6jUOvU8g5Pc93sLaTmoA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/datepicker": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@react-types/datepicker/-/datepicker-3.7.2.tgz",
+      "integrity": "sha512-zThqFAdhQL1dqyVDsDSSTdfCjoD6634eyg/B0ZJfQxcLUR/5pch3v/gxBhbyCVDGMNHRWUWIJvY9DVOepuoSug==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.2",
+        "@react-types/calendar": "^3.4.4",
+        "@react-types/overlays": "^3.8.5",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/dialog": {
+      "version": "3.5.8",
+      "resolved": "https://registry.npmjs.org/@react-types/dialog/-/dialog-3.5.8.tgz",
+      "integrity": "sha512-RX8JsMvty8ADHRqVEkppoynXLtN4IzUh8d5z88UEBbcvWKlHfd6bOBQjQcBH3AUue5wjfpPIt6brw2VzgBY/3Q==",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.5",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/grid": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.2.4.tgz",
+      "integrity": "sha512-sDVoyQcH7MoGdx5nBi5ZOU/mVFBt9YTxhvr0PZ97dMdEHZtJC1w9SuezwWS34f50yb8YAXQRTICbZYcK4bAlDA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/link": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-types/link/-/link-3.5.3.tgz",
+      "integrity": "sha512-yVafjW3IejyVnK3oMBNjFABCGG6J27EUG8rvkaGaI1uB6srGUEhpJ97XLv11aj1QkXHBy3VGXqxEV3S7wn4HTw==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/listbox": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@react-types/listbox/-/listbox-3.4.7.tgz",
+      "integrity": "sha512-68y5H9CVSPFiwO6MOFxTbry9JQMK/Lb1M9i3M8TDyq1AbJxBPpgAvJ9RaqIMCucsnqCzpY/zA3D/X417zByL1w==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/menu": {
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/@react-types/menu/-/menu-3.9.7.tgz",
+      "integrity": "sha512-K6KhloJVoGsqwkdeez72fkNI9dfrmLI/sNrB4XuOKo2crDQ/eyZYWyJmzz8giz/tHME9w774k487rVoefoFh5w==",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.5",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/meter": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@react-types/meter/-/meter-3.3.7.tgz",
+      "integrity": "sha512-p+YJ0+Lpn5MLmlbFZbDH1P0ILv1+AuMcUbxLcXMIVMGn7o0FO7eVZnFuq76D+qTDm9all+TRLJix7bctOrP+5Q==",
+      "dependencies": {
+        "@react-types/progress": "^3.5.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/numberfield": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@react-types/numberfield/-/numberfield-3.8.1.tgz",
+      "integrity": "sha512-GaCjLQgXUGCt40SLjKk3/COMWFlN2vV/3Xs3VSLAEdFZpk99b+Ik1oR21+7ZP5/iMHuQDc1MJRWdFfIjxCvVDQ==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/overlays": {
+      "version": "3.8.5",
+      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.5.tgz",
+      "integrity": "sha512-4D7EEBQigD/m8hE68Ys8eloyyZFHHduqykSIgINJ0edmo0jygRbWlTwuhWFR9USgSP4dK54duN0Mvq0m4HEVEw==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/progress": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@react-types/progress/-/progress-3.5.2.tgz",
+      "integrity": "sha512-aQql22kusEudsHwDEzq6y/Mh29AM+ftRDKdS5E5g4MkCY5J4FMbOYco1T5So83NIvvG9+eKcxPoJUMjQQACAyA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/radio": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@react-types/radio/-/radio-3.7.1.tgz",
+      "integrity": "sha512-Zut3rN1odIUBLZdijeyou+UqsLeRE76d9A+npykYGu29ndqmo3w4sLn8QeQcdj1IR71ZnG0pW2Y2BazhK5XrrQ==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/searchfield": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-types/searchfield/-/searchfield-3.5.3.tgz",
+      "integrity": "sha512-gBfsT1WpY8UIb74yyYmnjiHpVasph2mdmGj9i8cGF2HUYwx5p+Fr85mtCGDph0uirvRoM5ExMp4snD+ueNAVCg==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1",
+        "@react-types/textfield": "^3.9.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/select": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-types/select/-/select-3.9.2.tgz",
+      "integrity": "sha512-fGFrunednY3Pq/BBwVOf87Fsuyo/SlevL0wFIE9OOl2V5NXVaTY7/7RYA8hIOHPzmvsMbndy419BEudiNGhv4A==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.22.1.tgz",
+      "integrity": "sha512-PCpa+Vo6BKnRMuOEzy5zAZ3/H5tnQg1e80khMhK2xys0j6ZqzkgQC+fHMNZ7VDFNLqqNMj/o0eVeSBDh2POjkw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/slider": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@react-types/slider/-/slider-3.7.1.tgz",
+      "integrity": "sha512-FKO3YZYdrBs00XbBW5acP+0L1cCdevl/uRJiXbnLpGysO5PrSFIRS7Wlv4M7ztf6gT7b1Ao4FNC9crbxBr6BzA==",
+      "dependencies": {
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/switch": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@react-types/switch/-/switch-3.5.1.tgz",
+      "integrity": "sha512-2LFEKMGeufqyYmeN/5dtkDkCPG6x9O4eu6aaBaJmPGon7C/l3yiFEgRue6oCUYc1HixR7Qlp0sPxk0tQeWzrSg==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10"
+        "@react-types/shared": "^3.22.1"
       },
       "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
-      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+    "node_modules/@react-types/table": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@react-types/table/-/table-3.9.3.tgz",
+      "integrity": "sha512-Hs/pMbxJdga2zBol4H5pV1FVIiRjCuSTXst6idJjkctanTexR4xkyrtBwl+rdLNoGwQ2pGii49vgklc5bFK7zA==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
+        "@react-types/grid": "^3.2.4",
+        "@react-types/shared": "^3.22.1"
       },
       "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
-      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+    "node_modules/@react-types/tabs": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@react-types/tabs/-/tabs-3.3.5.tgz",
+      "integrity": "sha512-6NTSZBOWekCtApdZrhu5tHhE/8q52oVohQN+J5T7shAXd6ZAtu8PABVR/nH4BWucc8FL0OUajRqunqzQMU13gA==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
+        "@react-types/shared": "^3.22.1"
       },
       "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
-      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+    "node_modules/@react-types/textfield": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@react-types/textfield/-/textfield-3.9.1.tgz",
+      "integrity": "sha512-JBHY9M2CkL6xFaGSfWmUJVu3tEK09FaeB1dU3IEh6P41xxbFnPakYHSSAdnwMXBtXPoSHIVsUBickW/pjgfe5g==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10"
+        "@react-types/shared": "^3.22.1"
       },
       "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/tooltip": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/@react-types/tooltip/-/tooltip-3.4.7.tgz",
+      "integrity": "sha512-rV4HZRQxLRNhe24yATOxnFQtGRUmsR7mqxMupXCmd1vrw8h+rdKlQv1zW2q8nALAKNmnRXZJHxYQ1SFzb98fgg==",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.5",
+        "@react-types/shared": "^3.22.1"
       },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
     "node_modules/@rushstack/eslint-patch": {
@@ -1614,14 +3594,12 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -1633,8 +3611,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -1653,6 +3630,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -1877,14 +3865,12 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -1893,7 +3879,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1903,7 +3888,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -2020,15 +4004,14 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001600",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
-      "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==",
+      "version": "1.0.30001597",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz",
+      "integrity": "sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==",
       "funding": [
         {
           "type": "opencollective",
@@ -2064,7 +4047,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -2091,7 +4073,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2147,6 +4128,251 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-0.2.1.tgz",
+      "integrity": "sha512-U6//9lQ6JvT47+6OF6Gi8BvkxYQ8SCRRSKIJkthIMsFsLZRG0cKvTtuTaefyIKMQb8rvvXy0wGdpTNq/jPtm+g==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
+      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
+      "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz",
+      "integrity": "sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.0",
+        "@radix-ui/react-focus-guards": "1.0.0",
+        "@radix-ui/react-focus-scope": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-portal": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-slot": "1.0.0",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz",
+      "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-escape-keydown": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
+      "integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz",
+      "integrity": "sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
+      "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz",
+      "integrity": "sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz",
+      "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz",
+      "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
+      "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
+      "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz",
+      "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/react-remove-scroll": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz",
+      "integrity": "sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2169,7 +4395,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -2177,8 +4402,7 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/cookie": {
       "version": "0.5.0",
@@ -2221,7 +4445,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -2254,6 +4477,15 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2322,11 +4554,15 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/difflib": {
       "version": "0.2.4",
@@ -2355,8 +4591,7 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -3408,7 +5643,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -3424,7 +5658,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -3448,7 +5681,6 @@
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz",
       "integrity": "sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -3469,7 +5701,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -3578,14 +5809,12 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3640,6 +5869,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
@@ -3692,7 +5929,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -3856,7 +6092,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
       "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -3923,7 +6158,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -3932,8 +6166,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/internal-slot": {
       "version": "1.0.6",
@@ -3949,6 +6182,17 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intl-messageformat": {
+      "version": "10.5.11",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.11.tgz",
+      "integrity": "sha512-eYq5fkFBVxc7GIFDzpFQkDOZgNayNTQn4Oufe8jw6YY6OHVw70/4pA3FyCsQ0Gb2DnvEJEMmN2tOaXUGByM+kg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.18.2",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.7.6",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -4002,7 +6246,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -4042,7 +6285,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -4069,7 +6311,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4114,7 +6355,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -4147,7 +6387,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -4357,7 +6596,6 @@
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
       "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -4476,6 +6714,15 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/legacy-swc-helpers": {
+      "name": "@swc/helpers",
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
+      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -4493,7 +6740,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -4501,8 +6747,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -4567,6 +6812,14 @@
         "es5-ext": "~0.10.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.323.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.323.0.tgz",
+      "integrity": "sha512-rTXZFILl2Y4d1SG9p1Mdcf17AcPvPvpc/egFIzUrp7IUy60MUQo3Oi1mu8LGYXUVwuRZYsSMt3csHRW5mAovJg==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/memoizee": {
       "version": "0.4.15",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz",
@@ -4587,7 +6840,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -4596,7 +6848,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -4609,7 +6860,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -4645,7 +6895,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -4808,7 +7057,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4831,7 +7079,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4840,7 +7087,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -4966,7 +7212,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -5071,7 +7316,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5088,33 +7332,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
-    },
-    "node_modules/path-scurry": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
-      "integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
-      "dev": true,
-      "engines": {
-        "node": "14 || >=16.14"
-      }
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -5222,7 +7440,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -5234,7 +7451,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5243,7 +7459,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -5252,7 +7467,6 @@
       "version": "8.4.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
       "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5280,7 +7494,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -5297,7 +7510,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -5316,7 +7528,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5351,7 +7562,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
       "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       }
@@ -5360,7 +7570,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
       "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.11"
       },
@@ -5379,7 +7588,6 @@
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
       "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -5391,8 +7599,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/postgres-array": {
       "version": "2.0.0",
@@ -5583,7 +7790,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5610,6 +7816,67 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-aria": {
+      "version": "3.32.1",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.32.1.tgz",
+      "integrity": "sha512-7KCJg4K5vlRqiXdGjgCT05Du8RhGBYC+2ok4GOh/Znmg8aMwOk7t0YwxaT5i1z30+fmDcJS/pk/ipUPUg28CXg==",
+      "dependencies": {
+        "@internationalized/string": "^3.2.1",
+        "@react-aria/breadcrumbs": "^3.5.11",
+        "@react-aria/button": "^3.9.3",
+        "@react-aria/calendar": "^3.5.6",
+        "@react-aria/checkbox": "^3.14.1",
+        "@react-aria/combobox": "^3.8.4",
+        "@react-aria/datepicker": "^3.9.3",
+        "@react-aria/dialog": "^3.5.12",
+        "@react-aria/dnd": "^3.5.3",
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/gridlist": "^3.7.5",
+        "@react-aria/i18n": "^3.10.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@react-aria/label": "^3.7.6",
+        "@react-aria/link": "^3.6.5",
+        "@react-aria/listbox": "^3.11.5",
+        "@react-aria/menu": "^3.13.1",
+        "@react-aria/meter": "^3.4.11",
+        "@react-aria/numberfield": "^3.11.1",
+        "@react-aria/overlays": "^3.21.1",
+        "@react-aria/progress": "^3.4.11",
+        "@react-aria/radio": "^3.10.2",
+        "@react-aria/searchfield": "^3.7.3",
+        "@react-aria/select": "^3.14.3",
+        "@react-aria/selection": "^3.17.5",
+        "@react-aria/separator": "^3.3.11",
+        "@react-aria/slider": "^3.7.6",
+        "@react-aria/ssr": "^3.9.2",
+        "@react-aria/switch": "^3.6.2",
+        "@react-aria/table": "^3.13.5",
+        "@react-aria/tabs": "^3.8.5",
+        "@react-aria/tag": "^3.3.3",
+        "@react-aria/textfield": "^3.14.3",
+        "@react-aria/tooltip": "^3.7.2",
+        "@react-aria/utils": "^3.23.2",
+        "@react-aria/visually-hidden": "^3.8.10",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/react-day-picker": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.0.tgz",
+      "integrity": "sha512-mz+qeyrOM7++1NCb1ARXmkjMkzWVh2GL9YiPbRjKe0zHccvekk4HE+0MPOZOrosn8r8zTHIIeOUXTmXRqmkRmg==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.28.0 || ^3.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -5622,6 +7889,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.51.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.1.tgz",
+      "integrity": "sha512-ifnBjl+kW0ksINHd+8C/Gp6a4eZOdWyvRv0UBaByShwU8JbVx5hTcTWEcd5VdybvmPTATkVVXk9npXArHmo56w==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
@@ -5681,6 +7963,39 @@
         }
       }
     },
+    "node_modules/react-stately": {
+      "version": "3.30.1",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.30.1.tgz",
+      "integrity": "sha512-IEhKHMT7wijtczA5vtw/kdq9CZuOIF+ReoSimydTFiABRQxWO9ESAl/fToXOUM9qmCdhdqjGJgMAhqTnmheh8g==",
+      "dependencies": {
+        "@react-stately/calendar": "^3.4.4",
+        "@react-stately/checkbox": "^3.6.3",
+        "@react-stately/collections": "^3.10.5",
+        "@react-stately/combobox": "^3.8.2",
+        "@react-stately/data": "^3.11.2",
+        "@react-stately/datepicker": "^3.9.2",
+        "@react-stately/dnd": "^3.2.8",
+        "@react-stately/form": "^3.0.1",
+        "@react-stately/list": "^3.10.3",
+        "@react-stately/menu": "^3.6.1",
+        "@react-stately/numberfield": "^3.9.1",
+        "@react-stately/overlays": "^3.6.5",
+        "@react-stately/radio": "^3.10.2",
+        "@react-stately/searchfield": "^3.5.1",
+        "@react-stately/select": "^3.6.2",
+        "@react-stately/selection": "^3.14.3",
+        "@react-stately/slider": "^3.5.2",
+        "@react-stately/table": "^3.11.6",
+        "@react-stately/tabs": "^3.6.4",
+        "@react-stately/toggle": "^3.7.2",
+        "@react-stately/tooltip": "^3.4.7",
+        "@react-stately/tree": "^3.7.6",
+        "@react-types/shared": "^3.22.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -5707,7 +8022,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -5716,7 +8030,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -5770,7 +8083,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -5805,7 +8117,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -5830,7 +8141,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6241,7 +8551,6 @@
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
       "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -6263,7 +8572,6 @@
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
       "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -6307,7 +8615,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -6347,7 +8654,6 @@
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
       "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -6380,6 +8686,14 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -6399,7 +8713,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -6408,7 +8721,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -6430,7 +8742,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -6453,8 +8764,7 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -6681,6 +8991,47 @@
         }
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/usehooks-ts": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.0.1.tgz",
@@ -6710,8 +9061,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/uuid": {
       "version": "8.3.2",
@@ -6915,8 +9265,7 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/ws": {
       "version": "8.14.2",
@@ -6955,7 +9304,6 @@
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
       "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
-      "dev": true,
       "engines": {
         "node": ">= 14"
       }
@@ -6979,111 +9327,6 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.4.tgz",
-      "integrity": "sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
-      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
-      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
-      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
-      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
-      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
-      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index 5f97ccee..107b9c42 100644
--- a/package.json
+++ b/package.json
@@ -19,25 +19,41 @@
   },
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.5.4",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
     "@types/negotiator": "^0.6.3",
     "@vercel/postgres": "^0.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "drizzle-orm": "^0.30.6",
+    "cmdk": "^0.2.1",
+    "date-fns": "^3.3.1",
+    "drizzle-orm": "^0.30.2",
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.0.0",
-    "framer-motion": "^11.0.5",
+    "lucide-react": "^0.323.0",
     "negotiator": "^0.6.3",
     "next": "14.1.0",
     "next-auth": "^4.24.5",
     "react": "^18",
+    "react-aria": "^3.25.0",
+    "react-day-picker": "^8.10.0",
     "react-dom": "^18",
+    "react-hook-form": "^7.50.1",
     "react-icons": "^5.0.1",
+    "react-stately": "^3.23.0",
     "tailwind-merge": "^2.2.1",
     "usehooks-ts": "^3.0.1",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"
   },
   "devDependencies": {

From ee9c51670bfa2f4345ef54148b89b8ded426f24b Mon Sep 17 00:00:00 2001
From: geekysilento <adityakarna.ak@gmail.com>
Date: Thu, 21 Mar 2024 15:08:29 +0545
Subject: [PATCH 2/7] feat: updated generic styling acc to figma

---
 app/[locale]/page.tsx                 |  2 ++
 components/inputs/Checkbox.tsx        | 10 +++++-----
 components/inputs/Visualizer.tsx      | 28 ++++++++++++++++++++-------
 components/inputs/date-time.tsx       |  1 +
 components/inputs/date.tsx            |  1 +
 components/inputs/multiSelectItem.tsx | 12 ++++++------
 components/inputs/radioItems.tsx      | 10 ++++++----
 components/inputs/selectIItem.tsx     | 12 ++++++------
 components/inputs/textAreaField.tsx   | 12 ++++++------
 components/ui/calendar.tsx            |  7 +++----
 components/ui/checkbox.tsx            |  4 ++--
 components/ui/command.tsx             | 12 ++++++------
 components/ui/dialog.tsx              |  4 ++--
 components/ui/form.tsx                |  2 +-
 components/ui/input.tsx               | 22 ++++++++++-----------
 components/ui/multiselect.tsx         | 13 ++++++++-----
 components/ui/radio-group.tsx         |  4 ++--
 components/ui/select.tsx              |  6 +++---
 components/ui/textarea.tsx            |  2 +-
 19 files changed, 92 insertions(+), 72 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 385df386..3be8016a 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,5 +1,6 @@
 import DirectorsCorner from '~/app/directors-corner';
 import Notifications from '~/app/notifications';
+import Visualizer from '~/components/inputs/Visualizer';
 import Slideshow from '~/components/slideshow';
 
 export default function Home({
@@ -33,6 +34,7 @@ export default function Home({
         ]}
       />
       <Notifications category={notificationCategory} locale={locale} />
+      <Visualizer />
       <DirectorsCorner locale={locale} />
     </>
   );
diff --git a/components/inputs/Checkbox.tsx b/components/inputs/Checkbox.tsx
index b4feeeb1..dd98bc55 100644
--- a/components/inputs/Checkbox.tsx
+++ b/components/inputs/Checkbox.tsx
@@ -13,22 +13,22 @@ interface CheckboxProps extends GenericProps {
 const CheckboxGeneric = ({ ...props }: CheckboxProps) => {
   return (
     <div className={props.className}>
-      <Label htmlFor={props.name}>
+      <Label className="text-neutral-500" htmlFor={props.name}>
         {props.label ? props.label : 'Checkbox'}
       </Label>
-      {props.required && <span style={{ color: '#EC734B' }}>*</span>}
-      <div className="flex flex-row items-start space-x-3 space-y-0">
+      {props.required && <span className="text-primary-700">*</span>}
+      <div className="flex flex-row items-center space-x-2 space-y-0">
         <Checkbox
           disabled={props.disabled}
           required={props.required}
           defaultChecked={props.defaultChecked}
           onCheckedChange={props.onChange}
         />
-        <Label className="text-sm font-medium" htmlFor={props.name}>
+        <Label className="text-md font-medium" htmlFor={props.name}>
           {props.name}
         </Label>
       </div>
-      <p className="marker:text-muted-foreground text-red-500 block text-[0.8rem] ">
+      <p className="block text-[0.8rem] text-primary-500 marker:text-neutral-500 ">
         {props.errorMsg}
       </p>
     </div>
diff --git a/components/inputs/Visualizer.tsx b/components/inputs/Visualizer.tsx
index fc5321aa..6232e918 100644
--- a/components/inputs/Visualizer.tsx
+++ b/components/inputs/Visualizer.tsx
@@ -80,7 +80,14 @@ export default function Visualizer() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <TextField {...field} required />
+                <TextField
+                  {...field}
+                  required
+                  placeholder="beat"
+                  description="something in the way"
+                  errorMsg="peepeepoopoo"
+                  disabled
+                />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -92,7 +99,7 @@ export default function Visualizer() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <TextAreaGeneric {...field} required />
+                <TextAreaGeneric {...field} required disabled />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -128,7 +135,7 @@ export default function Visualizer() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <DateField {...field} required />
+                <DateField {...field} required disabled />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -140,7 +147,7 @@ export default function Visualizer() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <FileUpload {...field} required />
+                <FileUpload {...field} required disabled />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -156,6 +163,7 @@ export default function Visualizer() {
                   description="" // Combine description within label
                   required={true}
                   {...field}
+                  disabled
                 />
               </FormControl>
               <FormMessage />
@@ -168,7 +176,12 @@ export default function Visualizer() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <DateTimeField description="Enter a time" {...field} required />
+                <DateTimeField
+                  description="Enter a time asdasd"
+                  {...field}
+                  required
+                  disabled
+                />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -192,7 +205,7 @@ export default function Visualizer() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <SelectDropdown items={items} {...field} required />
+                <SelectDropdown items={items} {...field} required disabled />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -204,7 +217,7 @@ export default function Visualizer() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <RadioGeneric items={items} {...field} />
+                <RadioGeneric items={items} {...field} disabled />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -221,6 +234,7 @@ export default function Visualizer() {
                   {...field}
                   required
                   placeholder="Enter or Select values"
+                  disabled
                 />
               </FormControl>
               <FormMessage />
diff --git a/components/inputs/date-time.tsx b/components/inputs/date-time.tsx
index 518197a1..7e5ee126 100644
--- a/components/inputs/date-time.tsx
+++ b/components/inputs/date-time.tsx
@@ -17,6 +17,7 @@ const DateTimeField = forwardRef<HTMLInputElement, InputProps>(
         max="9999-12-31T23:59"
         placeholder={placeholder}
         label={label}
+        disabled={props.disabled}
         LeftChild={FaRegCalendarAlt}
         onChange={(event) => {
           props.onChange?.({
diff --git a/components/inputs/date.tsx b/components/inputs/date.tsx
index e509f011..4f43ad9a 100644
--- a/components/inputs/date.tsx
+++ b/components/inputs/date.tsx
@@ -18,6 +18,7 @@ const DateField = forwardRef<HTMLInputElement, InputProps>(function DateField(
       ref={ref}
       label={label}
       placeholder={placeholder}
+      className="placeholder:text-neutral-500"
       type="date"
       max="9999-12-31"
       LeftChild={LeftChild}
diff --git a/components/inputs/multiSelectItem.tsx b/components/inputs/multiSelectItem.tsx
index 9a5516e5..abe0c07d 100644
--- a/components/inputs/multiSelectItem.tsx
+++ b/components/inputs/multiSelectItem.tsx
@@ -17,10 +17,12 @@ const MultiSelectDropdown: ForwardRefExoticComponent<ListProps> = forwardRef<
 >((props, ref) => {
   return (
     <div className={props.className}>
-      <Label htmlFor={props.name}>{props.label ? props.label : 'Select'}</Label>
-      {props.required && <span style={{ color: '#EC734B' }}>*</span>}
+      <Label className="text-neutral-500" htmlFor={props.name}>
+        {props.label ? props.label : 'Select'}
+      </Label>
+      {props.required && <span className="text-primary-700">*</span>}
       {props.description && (
-        <p className="text-muted-foreground block text-[0.8rem]">
+        <p className="block text-[0.8rem] text-neutral-500">
           {props.description}
         </p>
       )}
@@ -37,9 +39,7 @@ const MultiSelectDropdown: ForwardRefExoticComponent<ListProps> = forwardRef<
           </p>
         }
       />
-      <p className="text-muted-foreground text-red-500 block text-[0.8rem]">
-        {props.errorMsg}
-      </p>
+      <p className="block text-[0.8rem] text-primary-500">{props.errorMsg}</p>
     </div>
   );
 });
diff --git a/components/inputs/radioItems.tsx b/components/inputs/radioItems.tsx
index 310617c7..49ef646a 100644
--- a/components/inputs/radioItems.tsx
+++ b/components/inputs/radioItems.tsx
@@ -22,8 +22,10 @@ interface ListProps extends GenericProps {
 const RadioGeneric = ({ items, ...props }: ListProps) => {
   return (
     <div className={props.className}>
-      <Label>{props.label ? props.label : 'Radio Group'}</Label>
-      {props.required && <span style={{ color: '#EC734B' }}>*</span>}
+      <Label className="text-neutral-500">
+        {props.label ? props.label : 'Radio Group'}
+      </Label>
+      {props.required && <span className="text-primary-700">*</span>}
       <RadioGroup
         defaultValue={props.value}
         disabled={props.disabled}
@@ -34,11 +36,11 @@ const RadioGeneric = ({ items, ...props }: ListProps) => {
         {items.map((item) => (
           <div key={item} className="flex items-center space-x-2">
             <RadioGroupItem value={item} required={props.required} />
-            <Label>{item}</Label>
+            <Label className="text-md">{item}</Label>
           </div>
         ))}
       </RadioGroup>
-      <p className="marker:text-muted-foreground text-red-500 block text-[0.8rem] ">
+      <p className="block text-[0.8rem] text-primary-500 marker:text-neutral-500 ">
         {props.errorMsg}
       </p>
     </div>
diff --git a/components/inputs/selectIItem.tsx b/components/inputs/selectIItem.tsx
index c03989e9..7b51e006 100644
--- a/components/inputs/selectIItem.tsx
+++ b/components/inputs/selectIItem.tsx
@@ -19,10 +19,12 @@ interface ListProps extends GenericProps {
 const SelectDropdown = ({ items, ...props }: ListProps) => {
   return (
     <div className={props.className}>
-      <Label htmlFor={props.name}>{props.label ? props.label : 'Select'}</Label>
-      {props.required && <span style={{ color: '#EC734B' }}>*</span>}
+      <Label className="text-neutral-500" htmlFor={props.name}>
+        {props.label ? props.label : 'Select'}
+      </Label>
+      {props.required && <span className="text-primary-700">*</span>}
       {props.description && (
-        <p className="text-muted-foreground block text-[0.8rem]">
+        <p className="block text-[0.8rem] text-neutral-500">
           {props.description}
         </p>
       )}
@@ -43,9 +45,7 @@ const SelectDropdown = ({ items, ...props }: ListProps) => {
           ))}
         </SelectContent>
       </Select>
-      <p className="text-muted-foreground text-red-500 block text-[0.8rem]">
-        {props.errorMsg}
-      </p>
+      <p className="block text-[0.8rem] text-primary-500">{props.errorMsg}</p>
     </div>
   );
 };
diff --git a/components/inputs/textAreaField.tsx b/components/inputs/textAreaField.tsx
index e2e1fae5..1e4404e8 100644
--- a/components/inputs/textAreaField.tsx
+++ b/components/inputs/textAreaField.tsx
@@ -20,10 +20,12 @@ const TextAreaGeneric = React.forwardRef<HTMLTextAreaElement, TextFieldProps>(
   ) => {
     return (
       <div className={props.className}>
-        <Label htmlFor={props.name}>{label}</Label>
-        {props.required && <span style={{ color: '#EC734B' }}>*</span>}
+        <Label className="text-neutral-500" htmlFor={props.name}>
+          {label}
+        </Label>
+        {props.required && <span className="text-primary-700">*</span>}
         {props.description && (
-          <p className="text-muted-foreground block text-[0.8rem]">
+          <p className="block text-[0.8rem] text-neutral-500">
             {props.description}
           </p>
         )}
@@ -34,9 +36,7 @@ const TextAreaGeneric = React.forwardRef<HTMLTextAreaElement, TextFieldProps>(
           placeholder={placeholder}
           {...props}
         />
-        <p className="text-muted-foreground text-red-500 block text-[0.8rem]">
-          {props.errorMsg}
-        </p>
+        <p className="block text-[0.8rem] text-primary-500">{props.errorMsg}</p>
       </div>
     );
   }
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
index 65cc18fa..690d9693 100644
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -33,8 +33,7 @@ function Calendar({
         nav_button_next: 'absolute right-1',
         table: 'w-full border-collapse space-y-1',
         head_row: 'flex',
-        head_cell:
-          'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        head_cell: 'text-neutral-500 rounded-md w-8 font-normal text-[0.8rem]',
         row: 'flex w-full mt-2',
         cell: cn(
           'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
@@ -52,8 +51,8 @@ function Calendar({
           'bg-neutral-50 text-primary-foreground hover:bg-slate-200 hover:text-primary-foreground focus:bg-slate-100 focus:text-primary-foreground',
         day_today: 'bg-accent text-accent-foreground',
         day_outside:
-          'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
-        day_disabled: 'text-muted-foreground opacity-50',
+          'day-outside text-neutral-500 opacity-50  aria-selected:bg-accent/50 aria-selected:text-neutral-500 aria-selected:opacity-30',
+        day_disabled: 'text-neutral-500 opacity-50',
         day_range_middle:
           'aria-selected:bg-accent aria-selected:text-accent-foreground',
         day_hidden: 'invisible',
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index 5a189e19..75b0fe28 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'focus-visible:ring-ring data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border border-primary-500 shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-50',
+      'focus-visible:ring-ring peer h-5 w-5 shrink-0 rounded-md border border-primary-700 shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:border-0 disabled:bg-neutral-200/30 disabled:ring-0  data-[state=checked]:bg-primary-700 data-[state=checked]:text-neutral-50',
       className
     )}
     {...props}
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn('text-current flex items-center justify-center')}
     >
-      <CheckIcon className="h-4 w-4" />
+      <CheckIcon className="h-5 w-5" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
index 42e4a435..9d4ce7b5 100644
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -29,7 +29,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -46,7 +46,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-neutral-50 py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        'text-md flex h-10 w-full rounded-md bg-neutral-50 py-3 outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:border-0 disabled:bg-neutral-200/30 disabled:ring-0',
         className
       )}
       {...props}
@@ -75,7 +75,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-center text-sm"
+    className="text-md py-6 text-center"
     {...props}
   />
 ));
@@ -89,7 +89,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      'text-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500',
       className
     )}
     {...props}
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'aria-selected:bg-accent aria-selected:text-accent-foreground text-md relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -133,7 +133,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
+        'ml-auto text-xs tracking-widest text-neutral-500',
         className
       )}
       {...props}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 4fa8348b..5ff17932 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="focus:ring-ring data-[state=open]:bg-accent absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:text-neutral-500">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-sm text-neutral-500', className)}
     {...props}
   />
 ));
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
index 331f6890..f11cf5c2 100644
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -134,7 +134,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn('text-muted-foreground text-[0.8rem]', className)}
+      className={cn('text-[0.8rem] text-neutral-500', className)}
       {...props}
     />
   );
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 7113ce71..6b40367d 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -46,11 +46,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     const inputClasses = cn(
       'flex h-9 w-full rounded-md border border-input bg-neutral-50',
-      'text-sm transition-colors',
-      'placeholder:text-muted-foreground',
+      'text-md transition-colors',
+      'placeholder:text-neutral-500',
       'file:border-0 file:bg-neutral-50 file:text-sm file:font-medium ',
       'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ',
-      'disabled:cursor-not-allowed disabled:opacity-50',
+      'disabled:cursor-not-allowed disabled:ring-0 disabled:border-0 disabled:bg-neutral-200/30',
       'invalid:border-primary-500 invalid:outline-red-100 invalid:outline-offset-2',
       inputClassName,
       LeftChild ? 'pl-7 ' : 'pl-3 ' // Adjusted margin-top
@@ -58,16 +58,16 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <div className={className}>
-        <Label htmlFor={name}>{label}</Label>
-        {required && <span style={{ color: '#EC734B' }}>*</span>}
+        <Label className="text-neutral-500" htmlFor={name}>
+          {label}
+        </Label>
+        {required && <span className="text-primary-700">*</span>}
         {description && (
-          <p className="text-muted-foreground block text-[0.8rem]">
-            {description}
-          </p>
+          <p className="block text-[0.8rem] text-neutral-500">{description}</p>
         )}
         <div className={inputContainerClasses}>
           {LeftChild && (
-            <div className="text-muted-foreground absolute left-2 top-[0.70rem] h-4 w-4 ">
+            <div className="absolute left-2 top-[0.70rem] h-5 w-5 text-neutral-500 ">
               <LeftChild />
             </div>
           )}
@@ -88,9 +88,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             />
           )}
         </div>
-        <p className="text-muted-foreground text-red-500 block text-[0.8rem]">
-          {errorMsg}
-        </p>
+        <p className="block text-[0.8rem] text-primary-500">{errorMsg}</p>
       </div>
     );
   }
diff --git a/components/ui/multiselect.tsx b/components/ui/multiselect.tsx
index 04aacf02..0647baa4 100644
--- a/components/ui/multiselect.tsx
+++ b/components/ui/multiselect.tsx
@@ -137,7 +137,7 @@ const CommandEmpty = forwardRef<
   return (
     <div
       ref={forwardedRef}
-      className={cn('py-6 text-center text-sm', className)}
+      className={cn('text-md py-6 text-center', className)}
       cmdk-empty=""
       role="presentation"
       {...props}
@@ -356,7 +356,10 @@ const MultipleSelector = React.forwardRef<
       >
         <div
           className={cn(
-            'border-input focus-within:ring-ring invalid:outline-red-100 group rounded-md border px-3 py-2 text-sm ring-offset-background transition-colors invalid:border-primary-500 invalid:outline-offset-2 focus-within:ring-1 focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+            'border-input focus-within:ring-ring invalid:outline-red-100 text-md group rounded-md border px-3 py-2 ring-offset-background',
+            'transition-colors invalid:border-primary-500 invalid:outline-offset-2 focus-within:ring-1',
+            'focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed',
+            'disabled:border-0 disabled:bg-neutral-200/30 disabled:outline-none disabled:ring-0', //disabled: doesnt seem to work here
             className
           )}
         >
@@ -366,7 +369,7 @@ const MultipleSelector = React.forwardRef<
                 <Badge
                   key={option}
                   className={cn(
-                    'data-[disabled]:text-muted data-[disabled]:bg-neutral-400 data-[disabled]:hover:bg-neutral-400',
+                    'data-[disabled]:cursor-not-allowed data-[disabled]:border-0 data-[disabled]:bg-neutral-200/30 data-[disabled]:ring-0',
                     'data-[fixed]:text-muted bg-primary-300 data-[fixed]:bg-neutral-400 data-[fixed]:hover:bg-neutral-400',
                     badgeClassName
                   )}
@@ -417,7 +420,7 @@ const MultipleSelector = React.forwardRef<
                   : placeholder
               }
               className={cn(
-                'placeholder:text-muted-foreground ml-2 flex-1 bg-neutral-50 outline-none disabled:cursor-not-allowed disabled:opacity-50',
+                'ml-2 flex-1 bg-neutral-50 outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50',
                 inputProps?.className
               )}
             />
@@ -462,7 +465,7 @@ const MultipleSelector = React.forwardRef<
                                 onChange?.(newOptions);
                               }}
                               className={cn(
-                                'cursor-pointer hover:bg-neutral-200'
+                                'cursor-pointer hover:bg-neutral-200/30'
                               )}
                             >
                               {option}
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
index c2572ff7..27c47176 100644
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -28,13 +28,13 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        'text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border border-primary-500 shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'text-primary focus-visible:ring-ring aspect-square h-5 w-5 rounded-full border border-primary-700 shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:border-0 disabled:bg-neutral-200/30 disabled:ring-0',
         className
       )}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="fill-primary h-3.5 w-3.5" />
+        <CheckIcon className="fill-primary h-4.5 w-4.5" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 44ad4165..ba54694c 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -23,7 +23,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'border-input placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-neutral-50 px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'border-input focus:ring-ring text-md flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-neutral-50 px-3 py-2 shadow-sm ring-offset-background placeholder:text-neutral-500 focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:border-0 disabled:bg-neutral-200/30 disabled:ring-0 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -109,7 +109,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    className={cn('text-md px-2 py-1.5 font-semibold', className)}
     {...props}
   />
 ));
@@ -122,7 +122,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-neutral-200 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:text-accent-foreground text-md relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 outline-none focus:bg-neutral-200/30 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index 81b892e2..a80b0ac1 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'border-input placeholder:text-muted-foreground focus-visible:ring-ring invalid:outline-red-100 flex min-h-[60px] w-full rounded-md border bg-neutral-50 px-3 py-2 text-sm shadow-sm invalid:border-primary-500 invalid:outline-offset-2 focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+          'border-input focus-visible:ring-ring invalid:outline-red-100 text-md flex min-h-[60px] w-full rounded-md border bg-neutral-50 px-3 py-2 shadow-sm placeholder:text-neutral-500 invalid:border-primary-500 invalid:outline-offset-2 focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:border-0 disabled:bg-neutral-200/30 disabled:ring-0',
           className
         )}
         ref={ref}

From eac75b97f321f7adde053c4e0eebbc5b64a02ed7 Mon Sep 17 00:00:00 2001
From: heydoyouknowme0 <akrb2204@gmail.com>
Date: Sun, 24 Mar 2024 12:26:37 +0530
Subject: [PATCH 3/7] feat:added forms crud

---
 actions/form.actions.tsx                      | 662 +++++++++++++++++
 app/[locale]/forms/(formDashboard)/page.tsx   | 105 +++
 app/[locale]/forms/[id]/page.tsx              |  13 +
 app/[locale]/forms/layout.tsx                 |  12 +
 components/forms/FormDetails.tsx              |  21 +
 components/forms/FormInvalidResponse.tsx      |  18 +
 components/forms/FormSubmitForm.tsx           | 150 ++++
 components/forms/FormSubmitPage.tsx           |  58 ++
 components/forms/Tempcreate.tsx               |  74 ++
 .../forms/fields/DateFieldFormElement.tsx     |  56 ++
 .../forms/fields/DateTimeFieldFormElement.tsx |  56 ++
 .../forms/fields/EmailFieldFormElement.tsx    |  54 ++
 .../forms/fields/MultiSelectFormElement.tsx   |  57 ++
 .../forms/fields/NumberFieldFormElement.tsx   |  53 ++
 .../forms/fields/PhoneFieldFormElement.tsx    |  53 ++
 .../forms/fields/RadioGenericFormElement.tsx  |  54 ++
 .../fields/SelectDropdownFormElement.tsx      |  54 ++
 .../forms/fields/TextAreaFormElement.tsx      |  53 ++
 .../forms/fields/TextFieldFormElement.tsx     |  53 ++
 .../forms/fields/TimeFieldFormElement.tsx     |  56 ++
 components/forms/interfaces/FormElements.tsx  | 108 +++
 components/forms/schemas/form.ts              |  38 +
 components/inputs/date-time.tsx               |   1 +
 components/inputs/multiSelectItem.tsx         |  62 +-
 components/inputs/numberfield.tsx             |   7 +-
 components/inputs/radioItems.tsx              |   2 +-
 components/inputs/time.tsx                    |   1 +
 components/ui/card.tsx                        |  86 +++
 components/ui/separator.tsx                   |  31 +
 components/ui/skeleton.tsx                    |  18 +
 components/ui/toast.tsx                       | 130 ++++
 components/ui/toaster.tsx                     |  35 +
 components/ui/use-toast.ts                    | 191 +++++
 i18n/en.ts                                    |  20 +
 i18n/hi.ts                                    |  21 +
 i18n/translations.ts                          |   9 +
 lib/validateResolver.ts                       |  80 +++
 package-lock.json                             | 665 +++++++++---------
 package.json                                  |  15 +-
 schemas/form.ts                               |  38 +
 server/schema/forms.schema.ts                 | 127 +++-
 server/schema/index.ts                        |   1 +
 server/schema/persons.schema.ts               |  10 +-
 43 files changed, 3038 insertions(+), 370 deletions(-)
 create mode 100644 actions/form.actions.tsx
 create mode 100644 app/[locale]/forms/(formDashboard)/page.tsx
 create mode 100644 app/[locale]/forms/[id]/page.tsx
 create mode 100644 app/[locale]/forms/layout.tsx
 create mode 100644 components/forms/FormDetails.tsx
 create mode 100644 components/forms/FormInvalidResponse.tsx
 create mode 100644 components/forms/FormSubmitForm.tsx
 create mode 100644 components/forms/FormSubmitPage.tsx
 create mode 100644 components/forms/Tempcreate.tsx
 create mode 100644 components/forms/fields/DateFieldFormElement.tsx
 create mode 100644 components/forms/fields/DateTimeFieldFormElement.tsx
 create mode 100644 components/forms/fields/EmailFieldFormElement.tsx
 create mode 100644 components/forms/fields/MultiSelectFormElement.tsx
 create mode 100644 components/forms/fields/NumberFieldFormElement.tsx
 create mode 100644 components/forms/fields/PhoneFieldFormElement.tsx
 create mode 100644 components/forms/fields/RadioGenericFormElement.tsx
 create mode 100644 components/forms/fields/SelectDropdownFormElement.tsx
 create mode 100644 components/forms/fields/TextAreaFormElement.tsx
 create mode 100644 components/forms/fields/TextFieldFormElement.tsx
 create mode 100644 components/forms/fields/TimeFieldFormElement.tsx
 create mode 100644 components/forms/interfaces/FormElements.tsx
 create mode 100644 components/forms/schemas/form.ts
 create mode 100644 components/ui/card.tsx
 create mode 100644 components/ui/separator.tsx
 create mode 100644 components/ui/skeleton.tsx
 create mode 100644 components/ui/toast.tsx
 create mode 100644 components/ui/toaster.tsx
 create mode 100644 components/ui/use-toast.ts
 create mode 100644 lib/validateResolver.ts
 create mode 100644 schemas/form.ts

diff --git a/actions/form.actions.tsx b/actions/form.actions.tsx
new file mode 100644
index 00000000..e00659f8
--- /dev/null
+++ b/actions/form.actions.tsx
@@ -0,0 +1,662 @@
+'use server';
+
+import Ajv, { type ValidateFunction } from 'ajv';
+import AjvFormats from 'ajv-formats';
+import { revalidatePath } from 'next/cache';
+
+import {
+  type ElementsType,
+  FormElements,
+} from '~/components/forms/interfaces/FormElements';
+import { and, eq, or } from 'drizzle-orm';
+import { db } from '~/server/db';
+import {
+  forms,
+  formsModifiableByPersons,
+  formQuestions,
+  formSubmissions,
+  formAnswers,
+} from '~/server/schema';
+import {
+  finalFormSchema,
+  formSchema,
+  type formSchemaType,
+} from '~/schemas/form';
+import type { validationProperty } from '~/components/forms/interfaces/FormElements';
+import FormSubmitPage, {
+  type FormSubmitFormProps,
+} from '~/components/forms/FormSubmitPage';
+import FormInvalidResponse, {
+  type FormInvalidResponseProps,
+} from '~/components/forms/FormInvalidResponse';
+
+const ajv = new Ajv({
+  allErrors: true,
+  strict: false,
+  $data: true,
+});
+AjvFormats(ajv);
+
+const schemasCache: Record<string, ValidateFunction<unknown>> = {};
+
+//TODO
+async function currentUser() {
+  return { id: 1, email: 'example@nitkkr.ac.in' };
+}
+class UserNotFoundErr extends Error {}
+
+export async function createForm(values: formSchemaType) {
+  const validation = formSchema.safeParse(values);
+  if (!validation.success) {
+    console.error('Invalid form data:', validation.error);
+    throw new Error(`Invalid form data: ${validation.error.message}`);
+  }
+
+  const user = await currentUser();
+  if (!user) throw new UserNotFoundErr();
+
+  try {
+    return await db.transaction(async (tx) => {
+      const [form] = await db
+        .insert(forms)
+        .values({
+          title: values.title,
+          description: values.description ?? '',
+          isEditingAllowed: values.isEditable,
+        })
+        .returning({ insertedId: forms.id });
+      await db
+        .insert(formsModifiableByPersons)
+        .values({ formId: form.insertedId, personId: user.id });
+      revalidatePath('/forms');
+      return form.insertedId;
+    });
+  } catch (error) {
+    console.error('Error creating form:', error);
+    throw new Error('Failed to create form');
+  }
+}
+
+export async function getForms() {
+  const user = await currentUser();
+  if (!user) throw new UserNotFoundErr();
+
+  try {
+    return db
+      .select({
+        id: forms.id,
+        title: forms.title,
+        description: forms.description,
+        isPublished: forms.isPublished,
+        isActive: forms.isActive,
+      })
+      .from(forms)
+      .innerJoin(
+        formsModifiableByPersons,
+        eq(forms.id, formsModifiableByPersons.formId)
+      )
+      .where(eq(formsModifiableByPersons.personId, user.id));
+  } catch (error) {
+    console.error('Error retrieving forms:', error);
+    throw new Error('Failed to retrieve forms');
+  }
+}
+
+export async function getFormById(id: number) {
+  const user = await currentUser();
+  if (!user) throw new UserNotFoundErr();
+
+  try {
+    return db
+      .selectDistinct()
+      .from(forms)
+      .where(eq(forms.id, id))
+      .innerJoin(
+        formsModifiableByPersons,
+        eq(formsModifiableByPersons.personId, forms.id)
+      );
+  } catch (error) {
+    console.error('Error retrieving form:', error);
+    throw new Error('Failed to retrieve form');
+  }
+}
+
+interface new_form_questions {
+  Id: string;
+  id?: number;
+  question: string;
+  description?: string | undefined;
+  isRequired: boolean;
+  inputType: ElementsType;
+  choices?: string[] | undefined;
+  mimeTypes?: string[] | undefined;
+  range?: string[] | undefined;
+  pageNumber: number;
+  marks: number;
+  formatMinimum?: string;
+  formatMaximum?: string;
+}
+
+export async function UpdateFormQuestions(
+  formId: number,
+  questions: new_form_questions[]
+) {
+  try {
+    const user = await currentUser();
+    if (!user) throw new UserNotFoundErr();
+    const properties: Record<string, validationProperty> = {};
+    const requiredQuestions: string[] = [];
+    const upsertOperations = questions.map(async (question, index) => {
+      const { id, pageNumber } = question;
+      const pageNumberWithIndex = pageNumber + index * 0.001;
+      const [questionFinal] = id
+        ? await db
+            .insert(formQuestions)
+            .values({
+              id,
+              question: question.question,
+              description: question.description,
+              isRequired: question.isRequired,
+              inputType: question.inputType,
+              choices: question.choices,
+              mimeTypes: question.mimeTypes,
+              range: question.range,
+              marks: question.marks,
+              formId,
+              pageNumber: pageNumberWithIndex,
+            })
+            .onConflictDoUpdate({
+              target: formQuestions.id,
+              set: {
+                question: question.question,
+                description: question.description,
+                isRequired: question.isRequired,
+                inputType: question.inputType,
+                choices: question.choices,
+                mimeTypes: question.mimeTypes,
+                range: question.range,
+                marks: question.marks,
+                formId,
+                pageNumber: pageNumberWithIndex,
+              },
+            })
+            .returning()
+        : await db
+            .insert(formQuestions)
+            .values({
+              question: question.question,
+              description: question.description,
+              isRequired: question.isRequired,
+              inputType: question.inputType,
+              choices: question.choices,
+              mimeTypes: question.mimeTypes,
+              range: question.range,
+              marks: question.marks,
+              formId,
+              pageNumber: pageNumberWithIndex,
+            })
+            .returning();
+
+      if (
+        FormElements[questionFinal.inputType as ElementsType].shouldValidate
+      ) {
+        properties[questionFinal.id.toString()] =
+          FormElements[questionFinal.inputType as ElementsType].schemaObjects!(
+            question
+          );
+        questionFinal.isRequired &&
+          requiredQuestions.push(questionFinal.id.toString());
+      }
+    });
+
+    await Promise.all(upsertOperations);
+    return db
+      .update(forms)
+      .set({
+        questionValidations: properties,
+        requiredQuestions,
+      })
+      .where(eq(forms.id, formId));
+  } catch (error) {
+    console.error('Error updating form questions:', error);
+    throw new Error('Failed to update form questions');
+  }
+}
+
+export async function updateFormQuestionsForSubmission(
+  formId: number,
+  questions: new_form_questions[]
+) {
+  try {
+    const user = await currentUser();
+    if (!user) throw new UserNotFoundErr();
+
+    const properties: Record<string, validationProperty> = {};
+    const requiredQuestions: string[] = [];
+
+    const upsertOperations = questions.map(async (question, index) => {
+      const { id, pageNumber } = question;
+      const pageNumberWithIndex = pageNumber + index * 0.001;
+      const [questionFinal] = id
+        ? await db
+            .insert(formQuestions)
+            .values({
+              id,
+              question: question.question,
+              description: question.description,
+              isRequired: question.isRequired,
+              inputType: question.inputType,
+              choices: question.choices,
+              mimeTypes: question.mimeTypes,
+              range: question.range,
+              marks: question.marks,
+              formId,
+              pageNumber: pageNumberWithIndex,
+            })
+            .onConflictDoUpdate({
+              target: formQuestions.id,
+              set: {
+                question: question.question,
+                description: question.description,
+                isRequired: question.isRequired,
+                inputType: question.inputType,
+                choices: question.choices,
+                mimeTypes: question.mimeTypes,
+                range: question.range,
+                marks: question.marks,
+                formId,
+                pageNumber: pageNumberWithIndex,
+              },
+            })
+            .returning()
+        : await db
+            .insert(formQuestions)
+            .values({
+              question: question.question,
+              description: question.description,
+              isRequired: question.isRequired,
+              inputType: question.inputType,
+              choices: question.choices,
+              mimeTypes: question.mimeTypes,
+              range: question.range,
+              marks: question.marks,
+              formId,
+              pageNumber: pageNumberWithIndex,
+            })
+            .returning();
+
+      if (
+        FormElements[questionFinal.inputType as ElementsType].shouldValidate
+      ) {
+        properties[questionFinal.id.toString()] =
+          FormElements[questionFinal.inputType as ElementsType].schemaObjects!(
+            question
+          );
+        questionFinal.isRequired &&
+          requiredQuestions.push(questionFinal.id.toString());
+      }
+    });
+
+    await Promise.all(upsertOperations);
+    return { properties, requiredQuestions };
+  } catch (error) {
+    console.error('Error updating form questions for submission:', error);
+    throw new Error('Failed to update form questions for submission');
+  }
+}
+
+interface formSum {
+  title: string;
+  onSubmitMessage: string;
+  isEditingAllowed: boolean;
+  isSingleResponse: boolean;
+  isAnonymous: boolean;
+  isViewAnalyticsAllowed: boolean;
+  description?: string;
+  expiryDate?: Date;
+  isQuiz: boolean;
+}
+
+export async function publishForm(
+  form: formSum,
+  id: number,
+  questions: new_form_questions[]
+) {
+  try {
+    const validatedFields = finalFormSchema.safeParse(form);
+    if (!validatedFields.success) {
+      throw new Error('Invalid form data');
+    }
+
+    const { properties, requiredQuestions } =
+      await updateFormQuestionsForSubmission(id, questions);
+    revalidatePath('/forms');
+    await db
+      .update(forms)
+      .set({
+        title: form.title,
+        description: form.description,
+        onSubmitMessage: form.onSubmitMessage,
+        isSingleResponse: form.isSingleResponse,
+        isAnonymous: form.isAnonymous,
+        isViewAnalyticsAllowed: form.isViewAnalyticsAllowed,
+        expiryDate: form.expiryDate,
+        isQuiz: form.isQuiz,
+        isPublished: true,
+        questionValidations: properties,
+        requiredQuestions: requiredQuestions,
+      })
+      .where(eq(forms.id, id));
+  } catch (error) {
+    console.error('Error publishing form:', error);
+    throw new Error('Failed to publish form');
+  }
+}
+
+export async function getFormByIdWithQuestions(id: number) {
+  try {
+    const user = await currentUser();
+    if (!user) throw new UserNotFoundErr();
+    return await db.query.forms.findFirst({
+      with: {
+        questions: true,
+      },
+      where: (forms, { or, exists, eq }) =>
+        user.id
+          ? or(
+              eq(forms.isAnonymous, true),
+              exists(
+                db
+                  .select()
+                  .from(formsModifiableByPersons)
+                  .where(
+                    and(
+                      eq(formsModifiableByPersons.personId, user.id),
+                      eq(formsModifiableByPersons.formId, forms.id)
+                    )
+                  )
+              )
+            )
+          : eq(forms.isAnonymous, true),
+    });
+  } catch (error) {
+    console.error('Error fetching form by ID with questions:', error);
+    throw new Error('Failed to fetch form by ID with questions');
+  }
+}
+
+export async function getFormForSubmission(id: number): Promise<{
+  Element: React.ElementType;
+  props: FormInvalidResponseProps | FormSubmitFormProps;
+}> {
+  try {
+    const user = await currentUser();
+    const form = await db.query.forms.findFirst({
+      with: {
+        questions: true,
+      },
+      where: (forms, { or, exists, eq }) =>
+        and(
+          user.id
+            ? or(
+                eq(forms.isAnonymous, true),
+                exists(
+                  db
+                    .select()
+                    .from(formsModifiableByPersons)
+                    .where(
+                      and(
+                        eq(formsModifiableByPersons.personId, user.id),
+                        eq(formsModifiableByPersons.formId, forms.id)
+                      )
+                    )
+                )
+              )
+            : eq(forms.isAnonymous, true),
+          eq(forms.id, id)
+        ),
+    });
+    console.log(form);
+    if (!form || !form.isPublished)
+      return {
+        Element: FormInvalidResponse,
+        props: {
+          type: 'FormNotFound',
+        },
+      };
+
+    if (!(user || form.isAnonymous)) throw new UserNotFoundErr();
+
+    if (!form.isActive)
+      return {
+        Element: FormInvalidResponse,
+        props: {
+          type: 'FormExpired',
+        },
+      };
+
+    if (form.expiryDate && form.expiryDate < new Date()) {
+      await db.update(forms).set({ isActive: false });
+
+      return {
+        Element: FormInvalidResponse,
+        props: {
+          type: 'FormExpired',
+        },
+      };
+    }
+
+    const submission =
+      !form.isAnonymous && form.isSingleResponse
+        ? await db.query.formSubmissions.findFirst({
+            with: {
+              answers: true,
+            },
+            where: (formSubmission, { eq }) =>
+              and(
+                eq(formSubmission.formId, id),
+                eq(formSubmission.email, user.email)
+              ),
+          })
+        : undefined;
+
+    if (submission && !form.isEditingAllowed) {
+      //if (!form.modifiableBy.some((mod) => mod.id === user.id)) return <FormNotFound />;  // Impossible condition
+
+      return {
+        Element: FormInvalidResponse,
+        props: {
+          type: 'FormEditNotAllowed',
+        },
+      };
+    }
+    const questionElements: {
+      id: string;
+      question: string;
+      description?: string;
+      required: boolean;
+      inputType: ElementsType;
+      items?: string[];
+      mimeTypes?: string[];
+      range?: string[];
+      marks: number;
+    }[][] = [];
+
+    if (form.isShuffled) {
+      form.questions = form.questions.sort(() => Math.random() - 0.5);
+    } else {
+      form.questions = form.questions.sort(
+        (a, b) => a.pageNumber - b.pageNumber
+      );
+    }
+
+    form.questions.forEach((question) => {
+      question.pageNumber = ~~question.pageNumber;
+      if (!questionElements[question.pageNumber]) {
+        questionElements[question.pageNumber] = [];
+      }
+      questionElements[question.pageNumber].push({
+        question: question.question,
+        id: question.id.toString(),
+        description: question.description ?? undefined,
+        required: question.isRequired,
+        items: question.choices ?? [],
+        range: question.range ?? [],
+        mimeTypes: question.mimeTypes ?? [],
+        marks: question.marks,
+        inputType: question.inputType as ElementsType,
+      });
+    });
+    const answers = submission?.answers.reduce(
+      (acc: Record<string, string | number | string[]>, answer) => {
+        acc[answer.questionId] = answer.value as string | number | string[];
+        return acc;
+      },
+      {}
+    );
+
+    const pages = questionElements.length;
+    return {
+      Element: FormSubmitPage,
+      props: {
+        form: {
+          id: form.id,
+          title: form.title,
+          description: form.description ?? undefined,
+          onSubmitMessage: form.onSubmitMessage,
+          pages: pages,
+        },
+        questions: questionElements,
+        requiredQuestions: form.requiredQuestions,
+        questionValidations: form.questionValidations!,
+        answers: answers,
+      },
+    };
+  } catch (error) {
+    console.error('Error getting form for submission:', error);
+    throw new Error('Failed to get form for submission');
+  }
+}
+
+export async function submitForm(
+  id: number,
+  formData: Record<string, string | string[] | number>
+) {
+  try {
+    const user = await currentUser();
+
+    const [form] = await db
+      .select({
+        id: forms.id,
+        title: forms.title,
+        description: forms.description,
+        isPublished: forms.isPublished,
+        isActive: forms.isActive,
+        questionValidations: forms.questionValidations,
+        requiredQuestions: forms.requiredQuestions,
+        isAnonymous: forms.isAnonymous,
+        expiryDate: forms.expiryDate,
+        isSingleResponse: forms.isSingleResponse,
+        isEditingAllowed: forms.isEditingAllowed,
+        onSubmitMessage: forms.onSubmitMessage,
+      })
+      .from(forms)
+      .innerJoin(
+        formsModifiableByPersons,
+        eq(forms.id, formsModifiableByPersons.formId)
+      )
+      .limit(1)
+      .where(
+        and(
+          eq(forms.id, id),
+          or(
+            eq(forms.isAnonymous, true),
+            eq(formsModifiableByPersons.personId, user.id || -1)
+          )
+        )
+      );
+    console.log(form);
+    if (!form || !form.isPublished)
+      return { title: 'Error', description: 'Form not found' };
+
+    if (!schemasCache[form.id]) {
+      schemasCache[form.id] = ajv.compile({
+        type: 'object',
+        properties: form.questionValidations,
+        additionalProperties: false,
+        required: form.requiredQuestions,
+      });
+    }
+
+    const validate = schemasCache[form.id];
+
+    if (!validate(formData))
+      return { title: 'Error', description: 'Invalid form data' };
+
+    if (!user && !form.isAnonymous) throw new UserNotFoundErr();
+
+    if (!form.isActive)
+      return { title: 'Error', description: 'Form is expired' };
+
+    if (form.expiryDate && form.expiryDate < new Date()) {
+      await db.update(forms).set({ isActive: true }).where(eq(forms.id, id));
+      return { title: 'Error', description: 'Form is expired' };
+    }
+
+    if (form.isSingleResponse && !form.isAnonymous) {
+      const response = await db.query.formSubmissions.findFirst({
+        where: (formSubmission, { eq }) =>
+          and(
+            eq(formSubmission.formId, id),
+            eq(formSubmission.email, user.email)
+          ),
+      });
+
+      if (response) {
+        if (!form.isEditingAllowed)
+          return { title: 'Error', description: 'Form is single response' };
+        else {
+          console.log('deleting response', response.id);
+          await db
+            .delete(formSubmissions)
+            .where(eq(formSubmissions.id, response.id));
+          // return { title: 'Success', description: form.onSubmitMessage };
+        }
+      }
+    }
+
+    const [submission] = await db
+      .insert(formSubmissions)
+      .values({
+        formId: id,
+        email: form.isAnonymous ? '' : user.email,
+      })
+      .returning({ id: formSubmissions.id });
+
+    await db.insert(formAnswers).values(
+      Object.entries(formData).reduce(
+        (
+          acc: {
+            submissionId: number;
+            questionId: number;
+            value: string | number | string[];
+          }[],
+          [questionId, value]
+        ) => {
+          acc.push({
+            submissionId: submission.id,
+            questionId: Number(questionId),
+            value,
+          });
+          return acc;
+        },
+        []
+      )
+    );
+
+    return { title: 'Success', description: form.onSubmitMessage };
+  } catch (error) {
+    console.error('Error submitting form:', error);
+    throw new Error('Failed to submit form');
+  }
+}
diff --git a/app/[locale]/forms/(formDashboard)/page.tsx b/app/[locale]/forms/(formDashboard)/page.tsx
new file mode 100644
index 00000000..a4601131
--- /dev/null
+++ b/app/[locale]/forms/(formDashboard)/page.tsx
@@ -0,0 +1,105 @@
+import Link from 'next/link';
+import { FaEdit } from 'react-icons/fa';
+import { BiRightArrowAlt } from 'react-icons/bi';
+import { Suspense } from 'react';
+
+import { getForms } from '~/actions/form.actions';
+//import CreateFormBtn from '~/components/forms/CreateFormBtn';
+import { Badge } from '~/components/ui/badge';
+import { Button } from '~/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '~/components/ui/card';
+import { Skeleton } from '~/components/ui/skeleton';
+import Tempcreate from '~/components/forms/Tempcreate';
+
+export default function Home() {
+  return (
+    <section className="container min-h-screen pt-40">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {/* <CreateFormBtn />  //no builder*/}
+        <Tempcreate />
+        <Suspense
+          fallback={[1, 2, 3, 4].map((i) => (
+            <FormCardSkeleton key={i} />
+          ))}
+        >
+          <FormCards />
+        </Suspense>
+      </div>
+    </section>
+  );
+}
+function FormCardSkeleton() {
+  return <Skeleton className="border-primary-/20 h-[210px] w-full border-2" />;
+}
+
+async function FormCards() {
+  const forms = await getForms();
+  return forms.map((form) => <FormCard key={form.id} form={form} />);
+}
+
+function FormCard({
+  form,
+}: {
+  form: {
+    id: number;
+    title: string;
+    description?: string | null;
+    isPublished: boolean;
+    isActive: boolean;
+  };
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between gap-3">
+          <span className="truncate font-bold">{form.title}</span>
+          {form.isPublished ? (
+            <Badge>Published</Badge>
+          ) : (
+            <Badge variant={'destructive'}>Draft</Badge>
+          )}
+        </CardTitle>
+        <CardDescription className="text-muted-foreground flex items-center justify-between text-sm">
+          {form.isActive ? (
+            form.isPublished ? (
+              <span>Form is up and Running</span>
+            ) : (
+              <span>Form not yet formed</span>
+            )
+          ) : (
+            <span>Form expired</span>
+          )}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="text-muted-foreground h-[20px] truncate text-sm">
+        {form.description ?? 'No description'}
+      </CardContent>
+      <CardFooter>
+        {form.isPublished ? (
+          <Button asChild className="text-md mt-2 w-full gap-4">
+            <Link href={`/forms/${form.id}`}>
+              View submissions <BiRightArrowAlt />
+            </Link>
+          </Button>
+        ) : (
+          <Button
+            asChild
+            variant={'secondary'}
+            className="text-md mt-2 w-full gap-4"
+          >
+            <Link href={`/forms/builder/${form.id}`}>
+              Edit form <FaEdit />
+            </Link>
+          </Button>
+        )}
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/app/[locale]/forms/[id]/page.tsx b/app/[locale]/forms/[id]/page.tsx
new file mode 100644
index 00000000..f88a369b
--- /dev/null
+++ b/app/[locale]/forms/[id]/page.tsx
@@ -0,0 +1,13 @@
+import { redirect } from 'next/navigation';
+
+import { getFormForSubmission } from '~/actions/form.actions';
+
+export default async function page({
+  params: { locale, id },
+}: {
+  params: { locale: string; id: string };
+}) {
+  if (!id) return redirect('/');
+  const { Element, props } = await getFormForSubmission(Number(id));
+  return <Element {...props} locale={locale} />;
+}
diff --git a/app/[locale]/forms/layout.tsx b/app/[locale]/forms/layout.tsx
new file mode 100644
index 00000000..33d5796c
--- /dev/null
+++ b/app/[locale]/forms/layout.tsx
@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+
+import { Toaster } from '~/components/ui/toaster';
+
+export default function layout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <Toaster />
+    </>
+  );
+}
diff --git a/components/forms/FormDetails.tsx b/components/forms/FormDetails.tsx
new file mode 100644
index 00000000..ee0ce994
--- /dev/null
+++ b/components/forms/FormDetails.tsx
@@ -0,0 +1,21 @@
+import { getTranslations } from '~/i18n/translations';
+
+export default async function FormDetails({
+  title,
+  description,
+  locale,
+}: {
+  title: string;
+  description?: string;
+  locale: string;
+}) {
+  const text = (await getTranslations(locale)).FormDetails;
+  return (
+    <>
+      <h5>{text.title}</h5>
+      <h1 className="text-sky-900 text-3xl font-semibold">{title}</h1>
+      <h6>{text.description}</h6>
+      <p className="text-gray-600">{description}</p>
+    </>
+  );
+}
diff --git a/components/forms/FormInvalidResponse.tsx b/components/forms/FormInvalidResponse.tsx
new file mode 100644
index 00000000..813cada6
--- /dev/null
+++ b/components/forms/FormInvalidResponse.tsx
@@ -0,0 +1,18 @@
+import { getTranslations } from '~/i18n/translations';
+
+export interface FormInvalidResponseProps {
+  type: string;
+}
+export default async function FormInvalidResponse({
+  locale,
+  type,
+}: FormInvalidResponseProps & { locale: string }) {
+  const response = (await getTranslations(locale)).Form;
+  const text = response[type as keyof typeof response];
+  return (
+    <section>
+      <h1>{text.title}</h1>
+      <p>{text.content}</p>
+    </section>
+  );
+}
diff --git a/components/forms/FormSubmitForm.tsx b/components/forms/FormSubmitForm.tsx
new file mode 100644
index 00000000..67a0d939
--- /dev/null
+++ b/components/forms/FormSubmitForm.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
+
+import { submitForm } from '~/actions/form.actions';
+import { validateResolver } from '~/lib/validateResolver';
+
+import {
+  FormElements,
+  type validationProperty,
+} from './interfaces/FormElements';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '../ui/form';
+import { Button } from '../ui/button';
+import { Separator } from '../ui/separator';
+import { toast } from '../ui/use-toast';
+import type { FormSubmitFormProps } from './FormSubmitPage';
+
+export default function FormSubmitForm({
+  locale,
+  form,
+  questions,
+  requiredQuestions,
+  questionValidations,
+  answers,
+}: { locale: string } & FormSubmitFormProps) {
+  const Router = useRouter();
+
+  const [previousStep, setPreviousStep] = useState(0);
+  const [currentStep, setCurrentStep] = useState(0);
+  const delta = currentStep - previousStep;
+
+  const jsonSchema: {
+    type: string;
+    properties: Record<string, validationProperty>;
+    required: string[];
+    additionalProperties: boolean;
+  } = {
+    type: 'object',
+    properties: questionValidations,
+    required: requiredQuestions,
+    additionalProperties: false,
+  };
+  const resolver = (data: FormData, context: string | undefined) =>
+    validateResolver(data, context, jsonSchema);
+  const forms = useForm({
+    context: form.id.toString(),
+    resolver: resolver,
+    defaultValues: answers,
+  });
+
+  const next = async () => {
+    const fields = questions[currentStep].map((question) => question.id);
+
+    // types cannot be inferred during compile time
+    const output = await forms.trigger(fields as never, {
+      shouldFocus: true,
+    });
+
+    if (!output) return;
+    if (currentStep < form.pages - 1) {
+      setPreviousStep(currentStep);
+      setCurrentStep((step) => step + 1);
+    }
+  };
+
+  const prev = () => {
+    if (currentStep > 0) {
+      setPreviousStep(currentStep);
+      setCurrentStep((step) => step - 1);
+    }
+  };
+  const onSubmit = async () => {
+    const output = await forms.trigger();
+    if (!output) return;
+
+    const result = await submitForm(
+      form.id,
+      forms.getValues() as unknown as Record<string, string | number | string[]>
+    );
+    toast(result);
+    Router.push(`/${locale}/forms`);
+  };
+
+  return (
+    <Form {...forms}>
+      <form className="space-y-8 py-4" onSubmit={forms.handleSubmit(onSubmit)}>
+        {questions[currentStep].map((question) => {
+          const Element = FormElements[question.inputType].formComponent;
+          return (
+            <motion.div
+              key={question.id}
+              initial={{ x: delta > 0 ? 100 : -100, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              exit={{ x: delta > 0 ? -100 : 100, opacity: 0 }}
+              transition={{ duration: 0.5 }}
+            >
+              <FormField
+                control={forms.control}
+                name={question.id as never} // types cannot be inferred during compile time
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Element
+                        {...field}
+                        label={question.question}
+                        required={false}
+                        description={question.description ?? ''}
+                        items={question.items ?? []}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </motion.div>
+          );
+        })}
+        <div className="absolute bottom-0 w-full max-w-lg pb-4 pr-4 ">
+          <Separator />
+          <div className="flex justify-between pt-4">
+            <Button onClick={prev} type="button" disabled={currentStep === 0}>
+              Previous
+            </Button>
+            {currentStep === form.pages - 1 && (
+              <Button disabled={forms.formState.isSubmitting} type="submit">
+                Submit
+              </Button>
+            )}
+            <Button
+              type="button"
+              onClick={next}
+              disabled={currentStep === form.pages - 1}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Form>
+  );
+}
diff --git a/components/forms/FormSubmitPage.tsx b/components/forms/FormSubmitPage.tsx
new file mode 100644
index 00000000..0cb3aff0
--- /dev/null
+++ b/components/forms/FormSubmitPage.tsx
@@ -0,0 +1,58 @@
+import { Separator } from '../ui/separator';
+import FormDetails from './FormDetails';
+import FormSubmitForm from './FormSubmitForm';
+import type {
+  ElementsType,
+  validationProperty,
+} from './interfaces/FormElements';
+
+export interface FormSubmitFormProps {
+  form: {
+    id: number;
+    title: string;
+    description: string | undefined;
+    onSubmitMessage: string;
+    pages: number;
+  };
+  questions: {
+    id: string;
+    question: string;
+    description?: string | undefined;
+    required: boolean;
+    inputType: ElementsType;
+    items?: string[] | undefined;
+    mimeTypes?: string[] | undefined;
+    range?: string[] | undefined;
+    marks: number;
+  }[][];
+  requiredQuestions: string[];
+  questionValidations: Record<string, validationProperty>;
+  answers?: Record<string, string | number | string[]>;
+}
+export default function FormSubmitPage({
+  locale,
+  form,
+  questions,
+  requiredQuestions,
+  questionValidations,
+  answers,
+}: { locale: string } & FormSubmitFormProps) {
+  return (
+    <main className="m-auto min-h-screen w-screen max-w-lg p-2">
+      <FormDetails
+        title={form.title}
+        description={form.description}
+        locale={locale}
+      />
+      <Separator />
+      <FormSubmitForm
+        locale={locale}
+        form={form}
+        questions={questions}
+        requiredQuestions={requiredQuestions}
+        questionValidations={questionValidations}
+        answers={answers}
+      />
+    </main>
+  );
+}
diff --git a/components/forms/Tempcreate.tsx b/components/forms/Tempcreate.tsx
new file mode 100644
index 00000000..8c119bc3
--- /dev/null
+++ b/components/forms/Tempcreate.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { createForm, publishForm } from '~/actions/form.actions';
+import { Button } from '~/components/ui/button';
+
+import type { ElementsType } from './interfaces/FormElements';
+
+const Tempcreate = () => {
+  const makeForm = async () => {
+    const formData = {
+      title: 'New form',
+      description: 'this is a from',
+      onSubmitMessage: 'Your response has been recorded.',
+      isEditingAllowed: true,
+      isSingleResponse: true,
+      isViewAnalyticsAllowed: false,
+      isShuffled: false,
+      isCopySent: false,
+      isAnonymous: false,
+      isQuiz: false,
+    };
+    const questions = [
+      {
+        Id: '6115',
+        question: 'Multi Select Field',
+        inputType: 'MultiSelectField' as ElementsType,
+        isRequired: false,
+        pageNumber: 0,
+        marks: 0,
+        description: '',
+        choices: ['first choice', 'second choice', 'third great choice'],
+      },
+      {
+        Id: '7224',
+        question: 'Number Field',
+        inputType: 'NumberField' as ElementsType,
+        isRequired: false,
+        pageNumber: 0,
+        marks: 0,
+      },
+      {
+        Id: '2724',
+        question: 'Date Field',
+        inputType: 'DateField' as ElementsType,
+        isRequired: false,
+        pageNumber: 0,
+        marks: 0,
+        description: '',
+        formatMaximum: '2024-02-03',
+        formatMinimum: '2002-12-01',
+      },
+      {
+        Id: '1140',
+        question: 'Date-Time Field',
+        inputType: 'DateTimeField' as ElementsType,
+        isRequired: false,
+        pageNumber: 1,
+        marks: 0,
+        description: '',
+        formatMaximum: '2025-02-02T03:03:00Z',
+        formatMinimum: '2024-01-01T02:02:00Z',
+      },
+    ];
+    const formId = await createForm({
+      title: 'New form',
+      description: 'this is a from',
+      isEditable: true,
+    });
+    console.log('sdfdsf');
+    await publishForm({ ...formData }, formId, questions);
+  };
+  return <Button onClick={makeForm}>Create form</Button>;
+};
+export default Tempcreate;
diff --git a/components/forms/fields/DateFieldFormElement.tsx b/components/forms/fields/DateFieldFormElement.tsx
new file mode 100644
index 00000000..48806af1
--- /dev/null
+++ b/components/forms/fields/DateFieldFormElement.tsx
@@ -0,0 +1,56 @@
+import { MdDateRange } from 'react-icons/md';
+
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '~/components/forms/interfaces/FormElements';
+import DatePicker from '~/components/inputs/date';
+
+//import DateBasedForm from './DateBasedForm';
+
+const inputType: ElementsType = 'DateField';
+
+export const DateFieldFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <DatePicker
+      className="w-full"
+      readOnly
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: DatePicker,
+  //propertiesComponent: DateBasedForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Date Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: MdDateRange,
+    label: 'Date Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'string',
+    format: 'date',
+    formatMinimum: element.formatMinimum,
+    formatMaximum: element.formatMaximum,
+  };
+}
diff --git a/components/forms/fields/DateTimeFieldFormElement.tsx b/components/forms/fields/DateTimeFieldFormElement.tsx
new file mode 100644
index 00000000..5889f733
--- /dev/null
+++ b/components/forms/fields/DateTimeFieldFormElement.tsx
@@ -0,0 +1,56 @@
+import { MdDateRange } from 'react-icons/md';
+
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '~/components/forms/interfaces/FormElements';
+import DateTimeField from '~/components/inputs/date-time';
+
+//import DateTimeBasedForm from './DateTimeBasedForm';
+
+const inputType: ElementsType = 'DateTimeField';
+
+export const DateTimeFieldFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <DateTimeField
+      className="w-full"
+      readOnly
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: DateTimeField,
+  //propertiesComponent: DateTimeBasedForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Date-Time Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: MdDateRange,
+    label: 'Date-Time Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'string',
+    format: 'date-time',
+    formatMinimum: element.formatMinimum,
+    formatMaximum: element.formatMaximum,
+  };
+}
diff --git a/components/forms/fields/EmailFieldFormElement.tsx b/components/forms/fields/EmailFieldFormElement.tsx
new file mode 100644
index 00000000..6441ed39
--- /dev/null
+++ b/components/forms/fields/EmailFieldFormElement.tsx
@@ -0,0 +1,54 @@
+import { MdOutlineEmail } from 'react-icons/md';
+
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '~/components/forms/interfaces/FormElements';
+import EmailField from '~/components/inputs/email';
+
+//import InputBasedForm from './InputBasedForm';
+
+const inputType: ElementsType = 'EmailField';
+
+export const EmailFieldFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <EmailField
+      className="w-full"
+      readOnly
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: EmailField,
+  //propertiesComponent: InputBasedForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Email Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: MdOutlineEmail,
+    label: 'Email Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'string',
+    format: 'email',
+  };
+}
diff --git a/components/forms/fields/MultiSelectFormElement.tsx b/components/forms/fields/MultiSelectFormElement.tsx
new file mode 100644
index 00000000..cd519d1c
--- /dev/null
+++ b/components/forms/fields/MultiSelectFormElement.tsx
@@ -0,0 +1,57 @@
+import { RxDropdownMenu } from 'react-icons/rx';
+
+import MultiSelect from '~/components/inputs/multiSelectItem';
+
+//import DropdownForm from './DropdownFrom';
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '../interfaces/FormElements';
+
+const inputType: ElementsType = 'MultiSelectField';
+
+export const MultiSelectFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <MultiSelect
+      className="w-full"
+      disabled
+      items={elementInstance.choices ?? []}
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: MultiSelect,
+  //propertiesComponent: DropdownForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Multi Select Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: RxDropdownMenu,
+    label: 'Multi Select Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'array',
+    items: {
+      type: 'string',
+    },
+  };
+}
diff --git a/components/forms/fields/NumberFieldFormElement.tsx b/components/forms/fields/NumberFieldFormElement.tsx
new file mode 100644
index 00000000..df52e5a3
--- /dev/null
+++ b/components/forms/fields/NumberFieldFormElement.tsx
@@ -0,0 +1,53 @@
+import { MdNumbers } from 'react-icons/md';
+
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '~/components/forms/interfaces/FormElements';
+import NumberField from '~/components/inputs/numberfield';
+
+//import TextValidationForm from './InputBasedForm';
+
+const inputType: ElementsType = 'NumberField';
+
+export const NumberFieldFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <NumberField
+      className="w-full"
+      readOnly
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: NumberField,
+  //propertiesComponent: TextValidationForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Number Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: MdNumbers,
+    label: 'Number Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'number',
+  };
+}
diff --git a/components/forms/fields/PhoneFieldFormElement.tsx b/components/forms/fields/PhoneFieldFormElement.tsx
new file mode 100644
index 00000000..f3770c9d
--- /dev/null
+++ b/components/forms/fields/PhoneFieldFormElement.tsx
@@ -0,0 +1,53 @@
+import { MdPhone } from 'react-icons/md';
+
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '~/components/forms/interfaces/FormElements';
+import PhoneField from '~/components/inputs/telephone';
+
+//import TextValidationForm from './InputBasedForm';
+
+const inputType: ElementsType = 'PhoneField';
+
+export const PhoneFieldFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <PhoneField
+      className="w-full"
+      readOnly
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: PhoneField,
+  //propertiesComponent: TextValidationForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Phone Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: MdPhone,
+    label: 'Phone Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'string',
+  };
+}
diff --git a/components/forms/fields/RadioGenericFormElement.tsx b/components/forms/fields/RadioGenericFormElement.tsx
new file mode 100644
index 00000000..9cd5532c
--- /dev/null
+++ b/components/forms/fields/RadioGenericFormElement.tsx
@@ -0,0 +1,54 @@
+import { MdRadioButtonChecked } from 'react-icons/md';
+
+import RadioGeneric from '~/components/inputs/radioItems';
+
+//import DropdownForm from './DropdownFrom';
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '../interfaces/FormElements';
+
+const inputType: ElementsType = 'RadioField';
+
+export const RadioGenericFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <RadioGeneric
+      className="w-full"
+      disabled
+      items={elementInstance.choices ?? []}
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: RadioGeneric,
+  //propertiesComponent: DropdownForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Radio Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: MdRadioButtonChecked,
+    label: 'Radio Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'string',
+  };
+}
diff --git a/components/forms/fields/SelectDropdownFormElement.tsx b/components/forms/fields/SelectDropdownFormElement.tsx
new file mode 100644
index 00000000..c682fcd4
--- /dev/null
+++ b/components/forms/fields/SelectDropdownFormElement.tsx
@@ -0,0 +1,54 @@
+import { RxDropdownMenu } from 'react-icons/rx';
+
+import SelectDropdown from '~/components/inputs/selectIItem';
+
+//import DropdownForm from './DropdownFrom';
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '../interfaces/FormElements';
+
+const inputType: ElementsType = 'SelectDropdown';
+
+export const SelectDropdownFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <SelectDropdown
+      className="w-full"
+      disabled
+      items={elementInstance.choices ?? []}
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: SelectDropdown,
+  //propertiesComponent: DropdownForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Select Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: RxDropdownMenu,
+    label: 'Select Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'string',
+  };
+}
diff --git a/components/forms/fields/TextAreaFormElement.tsx b/components/forms/fields/TextAreaFormElement.tsx
new file mode 100644
index 00000000..fa182171
--- /dev/null
+++ b/components/forms/fields/TextAreaFormElement.tsx
@@ -0,0 +1,53 @@
+import { MdAreaChart } from 'react-icons/md';
+
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '~/components/forms/interfaces/FormElements';
+import TextAreaField from '~/components/inputs/textAreaField';
+
+//import TextValidationForm from './InputBasedForm';
+
+const inputType: ElementsType = 'TextAreaField';
+
+export const TextAreaFieldFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <TextAreaField
+      className="w-full"
+      disabled
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: TextAreaField,
+  //propertiesComponent: TextValidationForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Text Area Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: MdAreaChart,
+    label: 'TextArea Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'string',
+  };
+}
diff --git a/components/forms/fields/TextFieldFormElement.tsx b/components/forms/fields/TextFieldFormElement.tsx
new file mode 100644
index 00000000..3f73cd9c
--- /dev/null
+++ b/components/forms/fields/TextFieldFormElement.tsx
@@ -0,0 +1,53 @@
+import { MdTextFields } from 'react-icons/md';
+
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '~/components/forms/interfaces/FormElements';
+import TextField from '~/components/inputs/text';
+
+//import TextValidationForm from './InputBasedForm';
+
+const inputType: ElementsType = 'TextField';
+
+export const TextFieldFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <TextField
+      className="w-full"
+      readOnly
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: TextField,
+  //propertiesComponent: TextValidationForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Text Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: MdTextFields,
+    label: 'Text Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'string',
+  };
+}
diff --git a/components/forms/fields/TimeFieldFormElement.tsx b/components/forms/fields/TimeFieldFormElement.tsx
new file mode 100644
index 00000000..cda4aa82
--- /dev/null
+++ b/components/forms/fields/TimeFieldFormElement.tsx
@@ -0,0 +1,56 @@
+import { MdMoreTime } from 'react-icons/md';
+
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '~/components/forms/interfaces/FormElements';
+import TimeField from '~/components/inputs/time';
+
+//import TimeBasedForm from './TimeBasedForm';
+
+const inputType: ElementsType = 'TimeField';
+
+export const TimeFieldFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <TimeField
+      className="w-full"
+      readOnly
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  formComponent: TimeField,
+  //propertiesComponent: TimeBasedForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'Time Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: MdMoreTime,
+    label: 'Time Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'string',
+    format: 'time',
+    formatMinimum: element.formatMinimum,
+    formatMaximum: element.formatMaximum,
+  };
+}
diff --git a/components/forms/interfaces/FormElements.tsx b/components/forms/interfaces/FormElements.tsx
new file mode 100644
index 00000000..7a28ba92
--- /dev/null
+++ b/components/forms/interfaces/FormElements.tsx
@@ -0,0 +1,108 @@
+import type {
+  ElementType,
+  ForwardRefExoticComponent,
+  RefAttributes,
+} from 'react';
+
+import { type InputProps } from '~/components/ui/input';
+import { type ListProps } from '~/components/inputs/radioItems';
+import type { MultiListProps } from '~/components/inputs/multiSelectItem';
+
+import { TextFieldFormElement } from '../fields/TextFieldFormElement';
+import { TimeFieldFormElement } from '../fields/TimeFieldFormElement';
+import { EmailFieldFormElement } from '../fields/EmailFieldFormElement';
+import { DateFieldFormElement } from '../fields/DateFieldFormElement';
+import { PhoneFieldFormElement } from '../fields/PhoneFieldFormElement';
+import { SelectDropdownFormElement } from '../fields/SelectDropdownFormElement';
+import { RadioGenericFormElement } from '../fields/RadioGenericFormElement';
+import { DateTimeFieldFormElement } from '../fields/DateTimeFieldFormElement';
+import { NumberFieldFormElement } from '../fields/NumberFieldFormElement';
+import { TextAreaFieldFormElement } from '../fields/TextAreaFormElement';
+import { MultiSelectFormElement } from '../fields/MultiSelectFormElement';
+
+export type ElementsType =
+  | 'TextField'
+  | 'EmailField'
+  | 'SelectDropdown'
+  | 'TimeField'
+  | 'PhoneField'
+  | 'DateField'
+  | 'RadioField'
+  | 'DateTimeField'
+  | 'NumberField'
+  | 'TextAreaField'
+  | 'MultiSelectField';
+
+export interface validationProperty {
+  type: string;
+  format?: string;
+  formatMinimum?: string;
+  formatMaximum?: string;
+}
+
+type Generics = InputProps;
+
+export type FormElement = {
+  inputType: ElementsType;
+  dragBtnElement: {
+    icon: ElementType;
+    label: string;
+  };
+  uiFieldComponent: React.FC<{ elementInstance: FormElementInstance }>;
+  formComponent:
+    | ForwardRefExoticComponent<MultiListProps>
+    | ForwardRefExoticComponent<
+        Omit<Generics, 'ref'> & RefAttributes<HTMLInputElement>
+      >
+    | React.FC<ListProps>;
+  //propertiesComponent: React.FC<{ elementInstance: FormElementInstance }>;
+  construct: (
+    Id: string,
+    pageNumber: number,
+    id?: number
+  ) => FormElementInstance;
+  shouldValidate: boolean;
+} & (
+  | {
+      shouldValidate: true;
+      schemaObjects: (element: FormElementInstance) => validationProperty;
+    }
+  | {
+      shouldValidate?: false;
+      schemaObjects?: never;
+    }
+);
+
+export interface FormElementInstance {
+  Id: string;
+  id?: number;
+  question: string;
+  description?: string;
+  isRequired: boolean;
+  inputType: ElementsType;
+  choices?: string[];
+  mimeTypes?: string[];
+  range?: string[];
+  pageNumber: number;
+  marks: number;
+  formatMaximum?: string;
+  formatMinimum?: string;
+}
+
+type FormElementsType = {
+  [Key in ElementsType]: FormElement;
+};
+
+export const FormElements: FormElementsType = {
+  TextField: TextFieldFormElement,
+  EmailField: EmailFieldFormElement,
+  SelectDropdown: SelectDropdownFormElement,
+  TimeField: TimeFieldFormElement,
+  PhoneField: PhoneFieldFormElement,
+  DateField: DateFieldFormElement,
+  RadioField: RadioGenericFormElement,
+  DateTimeField: DateTimeFieldFormElement,
+  NumberField: NumberFieldFormElement,
+  TextAreaField: TextAreaFieldFormElement,
+  MultiSelectField: MultiSelectFormElement,
+};
diff --git a/components/forms/schemas/form.ts b/components/forms/schemas/form.ts
new file mode 100644
index 00000000..cf49f738
--- /dev/null
+++ b/components/forms/schemas/form.ts
@@ -0,0 +1,38 @@
+import { z } from 'zod';
+
+export const formSchema = z.object({
+  title: z.string().min(4),
+  description: z.string().optional(),
+  isEditable: z.boolean().default(false),
+});
+
+export type formSchemaType = z.infer<typeof formSchema>;
+
+export const finalFormSchema = z
+  .object({
+    title: z.string().min(4),
+    description: z.string().optional(),
+    onSubmitMessage: z.string().default('Your response has been recorded.'),
+    isEditingAllowed: z.boolean(),
+    isSingleResponse: z.boolean().default(false),
+    isViewAnalyticsAllowed: z.boolean().default(false),
+    isShuffled: z.boolean().default(false),
+    isCopySent: z.boolean().default(false),
+    expiryDate: z
+      .date()
+      .min(new Date(), { message: "form cannot expire before it's creation." })
+      .optional(),
+    isAnonymous: z.boolean().default(false),
+  })
+  .refine((data) => !data.isEditingAllowed || data.isSingleResponse, {
+    message: 'Cannot edit a multiple response form.',
+    path: ['isEditingAllowed'],
+  })
+  .refine(
+    (data) =>
+      !data.isAnonymous || (!data.isEditingAllowed && !data.isSingleResponse),
+    {
+      message: 'Cannot be anonymous and stop multiple or make an edit.',
+      path: ['isAnonymous'],
+    }
+  );
diff --git a/components/inputs/date-time.tsx b/components/inputs/date-time.tsx
index 7e5ee126..f3d9b599 100644
--- a/components/inputs/date-time.tsx
+++ b/components/inputs/date-time.tsx
@@ -19,6 +19,7 @@ const DateTimeField = forwardRef<HTMLInputElement, InputProps>(
         label={label}
         disabled={props.disabled}
         LeftChild={FaRegCalendarAlt}
+        defaultValue={(props.value as string)?.slice(0, -4)}
         onChange={(event) => {
           props.onChange?.({
             target: { value: event.target.value + ':00Z' },
diff --git a/components/inputs/multiSelectItem.tsx b/components/inputs/multiSelectItem.tsx
index abe0c07d..27410159 100644
--- a/components/inputs/multiSelectItem.tsx
+++ b/components/inputs/multiSelectItem.tsx
@@ -7,42 +7,40 @@ import MultipleSelector, {
 } from '../ui/multiselect';
 import { type GenericProps } from './radioItems';
 
-interface ListProps extends GenericProps, MultipleSelectorProps {
+export interface MultiListProps extends GenericProps, MultipleSelectorProps {
   items: string[];
 }
 
-const MultiSelectDropdown: ForwardRefExoticComponent<ListProps> = forwardRef<
-  MultipleSelectorRef,
-  ListProps
->((props, ref) => {
-  return (
-    <div className={props.className}>
-      <Label className="text-neutral-500" htmlFor={props.name}>
-        {props.label ? props.label : 'Select'}
-      </Label>
-      {props.required && <span className="text-primary-700">*</span>}
-      {props.description && (
-        <p className="block text-[0.8rem] text-neutral-500">
-          {props.description}
-        </p>
-      )}
-      <MultipleSelector
-        ref={ref}
-        defaultOptions={props.items}
-        placeholder={props.placeholder}
-        onChange={props.onChange}
-        disabled={props.disabled}
-        value={props.value}
-        emptyIndicator={
-          <p className="text-gray-600 dark:text-gray-400 text-center text-lg leading-10">
-            no results found.
+const MultiSelectDropdown: ForwardRefExoticComponent<MultiListProps> =
+  forwardRef<MultipleSelectorRef, MultiListProps>((props, ref) => {
+    return (
+      <div className={props.className}>
+        <Label className="text-neutral-500" htmlFor={props.name}>
+          {props.label ? props.label : 'Select'}
+        </Label>
+        {props.required && <span className="text-primary-700">*</span>}
+        {props.description && (
+          <p className="block text-[0.8rem] text-neutral-500">
+            {props.description}
           </p>
-        }
-      />
-      <p className="block text-[0.8rem] text-primary-500">{props.errorMsg}</p>
-    </div>
-  );
-});
+        )}
+        <MultipleSelector
+          ref={ref}
+          defaultOptions={props.items}
+          placeholder={props.placeholder}
+          onChange={props.onChange}
+          disabled={props.disabled}
+          value={props.value}
+          emptyIndicator={
+            <p className="text-gray-600 dark:text-gray-400 text-center text-lg leading-10">
+              no results found.
+            </p>
+          }
+        />
+        <p className="block text-[0.8rem] text-primary-500">{props.errorMsg}</p>
+      </div>
+    );
+  });
 
 MultiSelectDropdown.displayName = 'MultiSelectDropdown';
 export default MultiSelectDropdown;
diff --git a/components/inputs/numberfield.tsx b/components/inputs/numberfield.tsx
index 562763bc..d6cbe94a 100644
--- a/components/inputs/numberfield.tsx
+++ b/components/inputs/numberfield.tsx
@@ -7,8 +7,11 @@ import { Input, type InputProps } from '../ui/input';
 const NumberField = forwardRef<HTMLInputElement, InputProps>(
   ({ label = 'Number', placeholder = 'Enter a Number', ...props }, ref) => {
     const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const inputValue = event.target.value.replace(/\D/g, '');
+      const inputValue = event.target.value.replace(/[^\d.-]/g, '');
       event.target.value = inputValue;
+      props.onChange?.(
+        Number(inputValue) as unknown as React.ChangeEvent<HTMLInputElement>
+      );
     };
 
     return (
@@ -18,8 +21,8 @@ const NumberField = forwardRef<HTMLInputElement, InputProps>(
         placeholder={placeholder}
         label={label}
         LeftChild={AiOutlineNumber}
+        defaultValue={props.value?.toString()}
         onChange={handleInputChange}
-        {...props}
       />
     );
   }
diff --git a/components/inputs/radioItems.tsx b/components/inputs/radioItems.tsx
index 49ef646a..a6c57df3 100644
--- a/components/inputs/radioItems.tsx
+++ b/components/inputs/radioItems.tsx
@@ -13,7 +13,7 @@ export interface GenericProps {
   inputClassName?: string;
   className?: string;
 }
-interface ListProps extends GenericProps {
+export interface ListProps extends GenericProps {
   items: string[];
   onChange?: (value: string) => void;
   value?: string;
diff --git a/components/inputs/time.tsx b/components/inputs/time.tsx
index 9043a27b..d70e3deb 100644
--- a/components/inputs/time.tsx
+++ b/components/inputs/time.tsx
@@ -13,6 +13,7 @@ const TimeField = forwardRef<HTMLInputElement, InputProps>(
         type="time"
         placeholder={placeholder}
         label={label}
+        step={1}
         LeftChild={AiOutlineClockCircle}
         {...props}
       />
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 00000000..fe94f229
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import { cn } from '~/lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'border-gray-200 bg-white text-gray-950 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50 rounded-lg border shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-gray-500 dark:text-gray-400 text-sm', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 00000000..091bde74
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '~/lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-gray-200 dark:bg-gray-800 shrink-0',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 00000000..1ec581b7
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,18 @@
+import { cn } from '~/lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'bg-gray-100 dark:bg-gray-800 animate-pulse rounded-md',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
new file mode 100644
index 00000000..f8f0adcd
--- /dev/null
+++ b/components/ui/toast.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+
+import { cn } from '~/lib/utils';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-gray-200 p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-gray-800',
+  {
+    variants: {
+      variant: {
+        default:
+          'border bg-white text-gray-950 dark:bg-gray-950 dark:text-gray-50',
+        destructive:
+          'destructive group border-red-500 bg-red-500 text-gray-50 dark:border-red-900 dark:bg-red-900 dark:text-gray-50',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'border-gray-200 ring-offset-white hover:bg-gray-100 focus:ring-gray-950 group-[.destructive]:border-gray-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-gray-50 group-[.destructive]:focus:ring-red-500 dark:border-gray-800 dark:ring-offset-gray-950 dark:hover:bg-gray-800 dark:focus:ring-gray-300 dark:group-[.destructive]:border-gray-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-gray-50 dark:group-[.destructive]:focus:ring-red-900 inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'text-gray-950/50 hover:text-gray-950 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-gray-50/50 dark:hover:text-gray-50 absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100',
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold', className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
new file mode 100644
index 00000000..a2460a39
--- /dev/null
+++ b/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from '~/components/ui/toast';
+import { useToast } from '~/components/ui/use-toast';
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
diff --git a/components/ui/use-toast.ts b/components/ui/use-toast.ts
new file mode 100644
index 00000000..b6774199
--- /dev/null
+++ b/components/ui/use-toast.ts
@@ -0,0 +1,191 @@
+'use client';
+
+// Inspired by react-hot-toast library
+import * as React from 'react';
+
+import type { ToastActionElement, ToastProps } from '~/components/ui/toast';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST'];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType['DISMISS_TOAST'];
+      toastId?: ToasterToast['id'];
+    }
+  | {
+      type: ActionType['REMOVE_TOAST'];
+      toastId?: ToasterToast['id'];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      };
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: ((state: State) => void)[] = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, 'id'>;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  };
+}
+
+export { useToast, toast };
diff --git a/i18n/en.ts b/i18n/en.ts
index 2fe4d94d..37fa28e3 100644
--- a/i18n/en.ts
+++ b/i18n/en.ts
@@ -28,6 +28,26 @@ const text: Translations = {
     copyright:
       '© 2024 National Institute of Technology Kurukshetra. All Rights Reserved.',
   },
+  Form: {
+    FormNotFound: {
+      title: 'Form Not Found',
+      content:
+        'Sorry, we could not find the form you were looking for or you are not authorised to access it.',
+    },
+    FormExpired: {
+      title: 'Form Expired',
+      content: 'The form you are looking for has expired.',
+    },
+    FormEditNotAllowed: {
+      title: 'Form Edit Not Allowed',
+      content:
+        'Sorry, you are not allowed to edit this form after submitting it.',
+    },
+  },
+  FormDetails: {
+    title: 'Form Title',
+    description: 'Form Description',
+  },
   Header: {
     institute: 'Institute',
     academics: 'Academics',
diff --git a/i18n/hi.ts b/i18n/hi.ts
index d4b9f5dc..4b7a74f0 100644
--- a/i18n/hi.ts
+++ b/i18n/hi.ts
@@ -24,6 +24,27 @@ const text: Translations = {
     copyright:
       '© २०२४ राष्ट्रीय प्रौद्योगिकी संस्थान कुरूक्षेत्र। सर्वाधिकार आरक्षित।',
   },
+  Form: {
+    FormNotFound: {
+      title: 'फ़ॉर्म नहीं मिला',
+      content:
+        'माफ़ कीजिए, हम वह फ़ॉर्म नहीं ढूंढ पा रहे हैं जिसे आप ढूंढ रहे थे या आपके पास इसे एक्सेस करने की अनुमति नहीं है।',
+    },
+    FormExpired: {
+      title: 'फ़ॉर्म की समाप्ति',
+      content:
+        'आप जिस फ़ॉर्म को ढूंढ रहे हैं, उसको जमा करने की समय सीमा समाप्त हो चुकी है।',
+    },
+    FormEditNotAllowed: {
+      title: 'फ़ॉर्म संपादन अनअनुमति',
+      content:
+        'माफ़ कीजिए, आपको इस फ़ॉर्म को जमा करने के बाद संपादन करने की अनुमति नहीं है।',
+    },
+  },
+  FormDetails: {
+    title: 'फ़ॉर्म शीर्षक',
+    description: 'फ़ॉर्म विवरण',
+  },
   Header: {
     institute: 'संस्थान',
     academics: 'शैक्षिक',
diff --git a/i18n/translations.ts b/i18n/translations.ts
index d2b40728..d8c4bba8 100644
--- a/i18n/translations.ts
+++ b/i18n/translations.ts
@@ -19,6 +19,15 @@ export interface Translations {
     lorem: string;
     copyright: string;
   };
+  Form: {
+    FormNotFound: { title: string; content: string };
+    FormExpired: { title: string; content: string };
+    FormEditNotAllowed: { title: string; content: string };
+  };
+  FormDetails: {
+    title: string;
+    description: string;
+  };
   Header: {
     institute: string;
     academics: string;
diff --git a/lib/validateResolver.ts b/lib/validateResolver.ts
new file mode 100644
index 00000000..98417f6b
--- /dev/null
+++ b/lib/validateResolver.ts
@@ -0,0 +1,80 @@
+import Ajv, { type ValidateFunction } from 'ajv';
+import AjvFormats from 'ajv-formats';
+import AjvErrors from 'ajv-errors';
+
+//configure AJV
+const ajv = new Ajv({
+  allErrors: true,
+  strict: false,
+  $data: true,
+});
+AjvFormats(ajv);
+AjvErrors(ajv);
+
+const schemasCache: Record<string, ValidateFunction<unknown>> = {};
+
+const validateResolver = async (
+  data: FormData,
+  context: string | undefined,
+  schema: object
+) => {
+  if (!context) {
+    return {
+      values: {},
+      errors: {},
+      message: 'Context not provided.',
+    };
+  }
+  // Cache schemas for performance optimization
+  if (!schemasCache[context]) {
+    schemasCache[context] = ajv.compile(schema);
+  }
+
+  const validate = schemasCache[context];
+
+  try {
+    // Run validation
+    const isValid = validate(data);
+
+    if (isValid) {
+      // No errors, return data and empty error object
+      return {
+        values: data,
+        errors: {},
+      };
+    } else {
+      // Format errors for React Hook Form
+      if (!validate.errors) {
+        return {
+          values: {},
+          errors: {},
+          message: 'An error occurred during validation.',
+        };
+      }
+      const errorsFormatted = validate.errors.reduce(
+        (prev, current) => ({
+          ...prev,
+          [current.instancePath.replace('/', '')]: {
+            type: current.keyword,
+            message: current.message,
+          },
+        }),
+        {}
+      );
+
+      return {
+        values: {},
+        errors: errorsFormatted,
+      };
+    }
+  } catch (error) {
+    console.error('Validation error:', error);
+    return {
+      values: {},
+      errors: {},
+      message: 'An error occurred during validation. Please check your input.',
+    };
+  }
+};
+
+export { validateResolver };
diff --git a/package-lock.json b/package-lock.json
index 6e4f8ef5..3f68fc66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,22 +19,26 @@
         "@radix-ui/react-radio-group": "^1.1.3",
         "@radix-ui/react-scroll-area": "^1.0.5",
         "@radix-ui/react-select": "^2.0.0",
+        "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.5",
         "@types/negotiator": "^0.6.3",
         "@vercel/postgres": "^0.7.2",
+        "ajv": "^8.12.0",
+        "ajv-errors": "^3.0.0",
+        "ajv-formats": "^2.1.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
-        "cmdk": "^0.2.1",
-        "date-fns": "^3.3.1",
-        "drizzle-orm": "^0.30.2",
+        "cmdk": "^1.0.0",
+        "date-fns": "^3.6.0",
+        "drizzle-orm": "^0.30.6",
         "embla-carousel-autoplay": "^8.0.0",
         "embla-carousel-react": "^8.0.0",
-        "lucide-react": "^0.323.0",
+        "framer-motion": "^11.0.20",
         "negotiator": "^0.6.3",
         "next": "14.1.0",
         "next-auth": "^4.24.5",
-        "react": "^18",
+        "react": "^18",        
         "react-aria": "^3.25.0",
         "react-day-picker": "^8.10.0",
         "react-dom": "^18",
@@ -80,6 +84,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -243,6 +248,28 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
     "node_modules/@eslint/js": {
       "version": "8.56.0",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
@@ -286,42 +313,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
-    "node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.18.2",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz",
-      "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==",
-      "dependencies": {
-        "@formatjs/intl-localematcher": "0.5.4",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/fast-memoize": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
-      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.7.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.6.tgz",
-      "integrity": "sha512-etVau26po9+eewJKYoiBKP6743I1br0/Ie00Pb/S/PtmYfmjTcOn2YCh2yNkSZI12h6Rg+BOgQYborXk46BvkA==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.18.2",
-        "@formatjs/icu-skeleton-parser": "1.8.0",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.0.tgz",
-      "integrity": "sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.18.2",
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@formatjs/intl-localematcher": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
@@ -371,43 +362,55 @@
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
-    "node_modules/@internationalized/date": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz",
-      "integrity": "sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "node_modules/@internationalized/message": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.2.tgz",
-      "integrity": "sha512-MHAWsZWz8jf6jFPZqpTudcCM361YMtPIRu9CXkYmKjJ/0R3pQRScV5C0zS+Qi50O5UAm8ecKhkXx6mWDDcF6/g==",
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
       "dependencies": {
-        "@swc/helpers": "^0.5.0",
-        "intl-messageformat": "^10.1.0"
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@internationalized/number": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.1.tgz",
-      "integrity": "sha512-N0fPU/nz15SwR9IbfJ5xaS9Ss/O5h1sVXMZf43vc9mxEG48ovglvvzBjF53aHlq20uoR6c+88CrIXipU/LSzwg==",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/@internationalized/string": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.1.tgz",
-      "integrity": "sha512-vWQOvRIauvFMzOO+h7QrdsJmtN1AXAFVcaLWP9AseRN2o7iHceZ6bIXhBD4teZl8i91A3gxKnWBlGgjCwU6MFQ==",
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "dependencies": {
-        "@swc/helpers": "^0.5.0"
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -421,6 +424,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
       "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -429,6 +433,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -436,12 +441,14 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
       "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -466,13 +473,59 @@
       "integrity": "sha512-x4FavbNEeXx/baD/zC/SdrvkjSby8nBn8KcCREqk6UuwvwoAPZmaV8TFCAuo/cpovBRTIY67mHhe86MQQm/68Q==",
       "dev": true,
       "dependencies": {
-        "glob": "7.1.7"
+        "glob": "10.3.10"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/glob": {
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.4.tgz",
-      "integrity": "sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.0.tgz",
+      "integrity": "sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==",
       "cpu": [
         "arm64"
       ],
@@ -485,9 +538,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
-      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.0.tgz",
+      "integrity": "sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==",
       "cpu": [
         "x64"
       ],
@@ -500,9 +553,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
-      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.0.tgz",
+      "integrity": "sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==",
       "cpu": [
         "arm64"
       ],
@@ -515,9 +568,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
-      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.0.tgz",
+      "integrity": "sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==",
       "cpu": [
         "arm64"
       ],
@@ -530,28 +583,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz",
-      "integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.0.tgz",
+      "integrity": "sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==",
       "cpu": [
         "x64"
       ],
       "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
-      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
       "os": [
         "linux"
       ],
@@ -560,9 +598,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz",
-      "integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.0.tgz",
+      "integrity": "sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==",
       "cpu": [
         "x64"
       ],
@@ -575,9 +613,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
-      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.0.tgz",
+      "integrity": "sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==",
       "cpu": [
         "arm64"
       ],
@@ -590,9 +628,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
-      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.0.tgz",
+      "integrity": "sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==",
       "cpu": [
         "ia32"
       ],
@@ -605,9 +643,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
-      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.0.tgz",
+      "integrity": "sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==",
       "cpu": [
         "x64"
       ],
@@ -623,6 +661,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -635,6 +674,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -643,6 +683,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -846,42 +887,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-dialog": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
-      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.4",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -1362,42 +1367,13 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
-      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-toast": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
-      "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==",
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+      "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-collection": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1",
-        "@radix-ui/react-visually-hidden": "1.0.3"
+        "@radix-ui/react-primitive": "1.0.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1414,30 +1390,13 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
-      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
-      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
+        "@radix-ui/react-compose-refs": "1.0.1"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1449,13 +1408,12 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
-      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
+        "@babel/runtime": "^7.13.10"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -3552,14 +3510,13 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -3567,6 +3524,30 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-errors": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-3.0.0.tgz",
+      "integrity": "sha512-V3wD15YHfHz6y0KdhYFjyy9vWtEVALT9UrxfN3zqlI6dMioHnJrqOYfyPKol3oqrnCM9uwkcdCwkJ0WUcbLMTQ==",
+      "peerDependencies": {
+        "ajv": "^8.0.1"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -3594,12 +3575,14 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -3611,7 +3594,8 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -3630,17 +3614,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/aria-hidden": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
-      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -3865,12 +3838,14 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3879,6 +3854,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3888,6 +3864,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -4004,14 +3981,15 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001597",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz",
-      "integrity": "sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==",
+      "version": "1.0.30001600",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
+      "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4047,6 +4025,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -4073,6 +4052,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -4129,11 +4109,12 @@
       }
     },
     "node_modules/cmdk": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-0.2.1.tgz",
-      "integrity": "sha512-U6//9lQ6JvT47+6OF6Gi8BvkxYQ8SCRRSKIJkthIMsFsLZRG0cKvTtuTaefyIKMQb8rvvXy0wGdpTNq/jPtm+g==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz",
+      "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
       "dependencies": {
-        "@radix-ui/react-dialog": "1.0.0"
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3"
       },
       "peerDependencies": {
         "react": "^18.0.0",
@@ -4395,6 +4376,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -4402,7 +4384,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "node_modules/cookie": {
       "version": "0.5.0",
@@ -4445,6 +4428,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -4554,15 +4538,11 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
-    "node_modules/detect-node-es": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
-      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
-    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
     },
     "node_modules/difflib": {
       "version": "0.2.4",
@@ -4591,7 +4571,8 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -5534,6 +5515,28 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
     "node_modules/esniff": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
@@ -5643,6 +5646,7 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -5658,6 +5662,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -5681,6 +5686,7 @@
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz",
       "integrity": "sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==",
+      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -5701,6 +5707,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -5809,12 +5816,14 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
     },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5869,14 +5878,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/get-nonce": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
-      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/get-symbol-description": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
@@ -5929,6 +5930,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -6092,6 +6094,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
       "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -6158,6 +6161,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -6166,7 +6170,8 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "node_modules/internal-slot": {
       "version": "1.0.6",
@@ -6246,6 +6251,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -6285,6 +6291,7 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -6311,6 +6318,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6355,6 +6363,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -6387,6 +6396,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -6596,6 +6606,7 @@
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
       "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -6649,10 +6660,9 @@
       }
     },
     "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -6740,6 +6750,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -6747,7 +6758,8 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -6812,14 +6824,6 @@
         "es5-ext": "~0.10.2"
       }
     },
-    "node_modules/lucide-react": {
-      "version": "0.323.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.323.0.tgz",
-      "integrity": "sha512-rTXZFILl2Y4d1SG9p1Mdcf17AcPvPvpc/egFIzUrp7IUy60MUQo3Oi1mu8LGYXUVwuRZYsSMt3csHRW5mAovJg==",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/memoizee": {
       "version": "0.4.15",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz",
@@ -6840,6 +6844,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -6848,6 +6853,7 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -6860,6 +6866,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -6895,6 +6902,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -7057,6 +7065,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7079,6 +7088,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7087,6 +7097,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -7212,6 +7223,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -7316,6 +7328,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7332,7 +7345,33 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/path-scurry": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
+      "integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
+      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+      "dev": true,
+      "engines": {
+        "node": "14 || >=16.14"
+      }
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -7440,6 +7479,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -7451,6 +7491,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7459,6 +7500,7 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -7467,6 +7509,7 @@
       "version": "8.4.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
       "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7494,6 +7537,7 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -7510,6 +7554,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -7528,6 +7573,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7562,6 +7608,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
       "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+      "dev": true,
       "engines": {
         "node": ">=14"
       }
@@ -7570,6 +7617,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
       "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.11"
       },
@@ -7588,6 +7636,7 @@
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
       "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -7599,7 +7648,8 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
     },
     "node_modules/postgres-array": {
       "version": "2.0.0",
@@ -7790,6 +7840,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7890,9 +7941,10 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.51.1",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.1.tgz",
-      "integrity": "sha512-ifnBjl+kW0ksINHd+8C/Gp6a4eZOdWyvRv0UBaByShwU8JbVx5hTcTWEcd5VdybvmPTATkVVXk9npXArHmo56w==",
+      "version": "7.51.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz",
+      "integrity": "sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==",
+      "peer": true,
       "engines": {
         "node": ">=12.22.0"
       },
@@ -8022,6 +8074,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -8030,6 +8083,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -8079,10 +8133,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -8117,6 +8180,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -8141,6 +8205,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -8551,6 +8616,7 @@
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
       "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -8572,6 +8638,7 @@
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
       "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -8615,6 +8682,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -8654,6 +8722,7 @@
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
       "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
+      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -8713,6 +8782,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -8721,6 +8791,7 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -8742,6 +8813,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -8764,7 +8836,8 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -8991,47 +9064,6 @@
         }
       }
     },
-    "node_modules/use-callback-ref": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
-      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-sidecar": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
-      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
-      "dependencies": {
-        "detect-node-es": "^1.1.0",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/usehooks-ts": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.0.1.tgz",
@@ -9061,7 +9093,8 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
     },
     "node_modules/uuid": {
       "version": "8.3.2",
@@ -9265,7 +9298,8 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
     },
     "node_modules/ws": {
       "version": "8.14.2",
@@ -9304,6 +9338,7 @@
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
       "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "dev": true,
       "engines": {
         "node": ">= 14"
       }
diff --git a/package.json b/package.json
index 107b9c42..e24c687d 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.5.4",
     "@hookform/resolvers": "^3.3.4",
-    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -28,18 +27,24 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@types/negotiator": "^0.6.3",
     "@vercel/postgres": "^0.7.2",
+    "ajv": "^8.12.0",
+    "ajv-errors": "^3.0.0",
+    "ajv-formats": "^2.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "cmdk": "^0.2.1",
-    "date-fns": "^3.3.1",
-    "drizzle-orm": "^0.30.2",
+    "cmdk": "^1.0.0",
+    "date-fns": "^3.6.0",
+    "drizzle-orm": "^0.30.6",
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.0.0",
+    "framer-motion": "^11.0.20",
     "lucide-react": "^0.323.0",
     "negotiator": "^0.6.3",
     "next": "14.1.0",
@@ -52,8 +57,8 @@
     "react-icons": "^5.0.1",
     "react-stately": "^3.23.0",
     "tailwind-merge": "^2.2.1",
-    "usehooks-ts": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^3.0.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
diff --git a/schemas/form.ts b/schemas/form.ts
new file mode 100644
index 00000000..cf49f738
--- /dev/null
+++ b/schemas/form.ts
@@ -0,0 +1,38 @@
+import { z } from 'zod';
+
+export const formSchema = z.object({
+  title: z.string().min(4),
+  description: z.string().optional(),
+  isEditable: z.boolean().default(false),
+});
+
+export type formSchemaType = z.infer<typeof formSchema>;
+
+export const finalFormSchema = z
+  .object({
+    title: z.string().min(4),
+    description: z.string().optional(),
+    onSubmitMessage: z.string().default('Your response has been recorded.'),
+    isEditingAllowed: z.boolean(),
+    isSingleResponse: z.boolean().default(false),
+    isViewAnalyticsAllowed: z.boolean().default(false),
+    isShuffled: z.boolean().default(false),
+    isCopySent: z.boolean().default(false),
+    expiryDate: z
+      .date()
+      .min(new Date(), { message: "form cannot expire before it's creation." })
+      .optional(),
+    isAnonymous: z.boolean().default(false),
+  })
+  .refine((data) => !data.isEditingAllowed || data.isSingleResponse, {
+    message: 'Cannot edit a multiple response form.',
+    path: ['isEditingAllowed'],
+  })
+  .refine(
+    (data) =>
+      !data.isAnonymous || (!data.isEditingAllowed && !data.isSingleResponse),
+    {
+      message: 'Cannot be anonymous and stop multiple or make an edit.',
+      path: ['isAnonymous'],
+    }
+  );
diff --git a/server/schema/forms.schema.ts b/server/schema/forms.schema.ts
index 6bcd61fb..72344d8e 100644
--- a/server/schema/forms.schema.ts
+++ b/server/schema/forms.schema.ts
@@ -1,29 +1,33 @@
-import { sql } from 'drizzle-orm';
+import { relations, sql } from 'drizzle-orm';
 import {
   boolean,
   date,
   integer,
   pgTable,
+  real,
   serial,
   smallint,
   varchar,
+  json,
+  jsonb,
 } from 'drizzle-orm/pg-core';
+import { persons } from '.';
+//temp
+export interface validationProperty {
+  type: string;
+  format?: string;
+  formatMinimum?: string;
+  formatMaximum?: string;
+}
 
 export const forms = pgTable('forms', {
   id: serial('id').primaryKey(),
   title: varchar('title').notNull(),
-  description: varchar('description').notNull(),
-  visibleTo: smallint('visible_to')
-    .array()
-    .default(sql`'{}'`)
-    .notNull(),
-  questions: integer('questions')
-    .array()
-    .default(sql`'{}'`)
-    .notNull(),
+  description: varchar('description'),
   onSubmitMessage: varchar('on_submit_message')
     .default('Your response has been recorded.')
     .notNull(),
+  isAnonymous: boolean('is_anonymous').default(false).notNull(),
   isEditingAllowed: boolean('is_editing_allowed').notNull(),
   isSingleResponse: boolean('is_single_response').default(true).notNull(),
   isViewAnalyticsAllowed: boolean('is_view_analytics_allowed')
@@ -32,15 +36,72 @@ export const forms = pgTable('forms', {
   isShuffled: boolean('is_shuffled').default(false).notNull(),
   isCopySent: boolean('is_copy_sent').default(false).notNull(),
   isQuiz: boolean('is_quiz').default(false).notNull(),
-  expiryDate: date('expiry_date'),
+  expiryDate: date('date', { mode: 'date' }),
   isActive: boolean('is_active').default(true).notNull(),
   persistentUrl: varchar('persistent_url'),
   oldPersistentUrls: varchar('old_persistent_urls')
     .array()
     .default(sql`'{}'`)
     .notNull(),
-  isPublished: boolean('is_published').notNull(),
+  isPublished: boolean('is_published').default(false).notNull(),
+  requiredQuestions: varchar('required_questions', { length: 3 })
+    .array()
+    .default(sql`'{}'`)
+    .notNull(),
+  questionValidations: json('question_validations').$type<
+    Record<string, validationProperty>
+  >(),
+});
+export const formRelations = relations(forms, ({ many }) => ({
+  questions: many(formQuestions),
+  submissions: many(formSubmissions),
+  visibleTo: many(formsVisibleToPersons),
+  modifiableBy: many(formsModifiableByPersons),
+}));
+
+export const formsVisibleToPersons = pgTable('forms_visible_to_persons', {
+  formId: integer('form_id')
+    .references(() => forms.id)
+    .notNull(),
+  personId: integer('person_id')
+    .references(() => persons.id)
+    .notNull(),
+});
+export const formsVisibleToPersonsRelation = relations(
+  formsVisibleToPersons,
+  ({ one }) => ({
+    forms: one(forms, {
+      fields: [formsVisibleToPersons.formId],
+      references: [forms.id],
+    }),
+    persons: one(persons, {
+      fields: [formsVisibleToPersons.personId],
+      references: [persons.id],
+    }),
+  })
+);
+
+export const formsModifiableByPersons = pgTable('forms_modifiable_by_persons', {
+  formId: integer('form_id')
+    .references(() => forms.id)
+    .notNull(),
+  personId: integer('person_id')
+    .references(() => persons.id)
+    .notNull(),
 });
+export const formsModifiableByPersonsRelation = relations(
+  formsModifiableByPersons,
+  ({ one }) => ({
+    forms: one(forms, {
+      fields: [formsModifiableByPersons.formId],
+      references: [forms.id],
+    }),
+    persons: one(persons, {
+      fields: [formsModifiableByPersons.personId],
+      references: [persons.id],
+    }),
+  })
+);
 
 export const formQuestions = pgTable('form_questions', {
   id: serial('id').primaryKey(),
@@ -48,7 +109,7 @@ export const formQuestions = pgTable('form_questions', {
     .references(() => forms.id)
     .notNull(),
   question: varchar('question').notNull(),
-  description: varchar('description').notNull(),
+  description: varchar('description'),
   isRequired: boolean('is_required').default(true).notNull(),
   inputType: varchar('input_type').notNull(),
   choices: varchar('choices')
@@ -63,9 +124,19 @@ export const formQuestions = pgTable('form_questions', {
     .array()
     .default(sql`'{}'`)
     .notNull(),
-  pageNumber: smallint('page_number').default(0).notNull(),
+  pageNumber: real('page_number').default(0).notNull(),
   marks: smallint('marks').default(0).notNull(),
 });
+export const formQuestionsRelations = relations(
+  formQuestions,
+  ({ one, many }) => ({
+    form: one(forms, {
+      fields: [formQuestions.formId],
+      references: [forms.id],
+    }),
+    answers: many(formAnswers),
+  })
+);
 
 export const formSubmissions = pgTable('form_submissions', {
   id: serial('id').primaryKey(),
@@ -73,4 +144,32 @@ export const formSubmissions = pgTable('form_submissions', {
     .references(() => forms.id)
     .notNull(),
   email: varchar('email').notNull(),
+  isSubmitted: boolean('is_submitted').default(false).notNull(),
+});
+export const formSubmissionsRelations = relations(
+  formSubmissions,
+  ({ one, many }) => ({
+    form: one(forms, {
+      fields: [formSubmissions.formId],
+      references: [forms.id],
+    }),
+    answers: many(formAnswers),
+  })
+);
+
+export const formAnswers = pgTable('form_answers', {
+  id: serial('id').primaryKey(),
+  questionId: integer('question_id').notNull(),
+  submissionId: integer('submission_id').notNull(),
+  value: jsonb('value').notNull(),
 });
+export const formAnswersRelations = relations(formAnswers, ({ one, many }) => ({
+  questions: one(formQuestions, {
+    fields: [formAnswers.questionId],
+    references: [formQuestions.id],
+  }),
+  submission: one(formSubmissions, {
+    fields: [formAnswers.submissionId],
+    references: [formSubmissions.id],
+  }),
+}));
diff --git a/server/schema/index.ts b/server/schema/index.ts
index 6f18f3fd..3a39d170 100644
--- a/server/schema/index.ts
+++ b/server/schema/index.ts
@@ -8,6 +8,7 @@ export * from './deans.schema';
 export * from './departments.schema';
 export * from './doctorates.schema';
 export * from './faculty.schema';
+export * from './forms.schema';
 export * from './hod.schema';
 export * from './majors.schema';
 export * from './notifications.schema';
diff --git a/server/schema/persons.schema.ts b/server/schema/persons.schema.ts
index 758d3e6e..37184210 100644
--- a/server/schema/persons.schema.ts
+++ b/server/schema/persons.schema.ts
@@ -1,4 +1,4 @@
-import { sql } from 'drizzle-orm';
+import { relations, sql } from 'drizzle-orm';
 import {
   boolean,
   date,
@@ -10,6 +10,10 @@ import {
   uniqueIndex,
   varchar,
 } from 'drizzle-orm/pg-core';
+import {
+  formsModifiableByPersons,
+  formsVisibleToPersons,
+} from './forms.schema';
 
 export const persons = pgTable(
   'persons',
@@ -35,3 +39,7 @@ export const persons = pgTable(
     };
   }
 );
+export const personsRelation = relations(persons, ({ many }) => ({
+  modifiableForms: many(formsModifiableByPersons),
+  fillableForms: many(formsVisibleToPersons),
+}));

From 70cbf8c35d72d12535bbf88b97f01009c6a2dc99 Mon Sep 17 00:00:00 2001
From: GetPsyched <priyanshu@getpsyched.dev>
Date: Sat, 30 Mar 2024 11:39:35 +0530
Subject: [PATCH 4/7] refactor: rename a column and organise imports

---
 actions/form.actions.tsx                     | 44 ++++++++++----------
 components/forms/FormSubmitForm.tsx          | 14 +++----
 components/forms/FormSubmitPage.tsx          |  6 +--
 components/forms/interfaces/FormElements.tsx | 18 ++++----
 components/forms/schemas/form.ts             |  2 +-
 schemas/form.ts                              |  2 +-
 server/schema/forms.schema.ts                | 14 ++++---
 7 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/actions/form.actions.tsx b/actions/form.actions.tsx
index e00659f8..1ad0dca8 100644
--- a/actions/form.actions.tsx
+++ b/actions/form.actions.tsx
@@ -2,33 +2,33 @@
 
 import Ajv, { type ValidateFunction } from 'ajv';
 import AjvFormats from 'ajv-formats';
+import { and, eq, or } from 'drizzle-orm';
 import { revalidatePath } from 'next/cache';
 
+import FormInvalidResponse, {
+  type FormInvalidResponseProps,
+} from '~/components/forms/FormInvalidResponse';
+import FormSubmitPage, {
+  type FormSubmitFormProps,
+} from '~/components/forms/FormSubmitPage';
 import {
-  type ElementsType,
   FormElements,
+  type ElementsType,
+  type validationProperty,
 } from '~/components/forms/interfaces/FormElements';
-import { and, eq, or } from 'drizzle-orm';
-import { db } from '~/server/db';
-import {
-  forms,
-  formsModifiableByPersons,
-  formQuestions,
-  formSubmissions,
-  formAnswers,
-} from '~/server/schema';
 import {
   finalFormSchema,
   formSchema,
   type formSchemaType,
 } from '~/schemas/form';
-import type { validationProperty } from '~/components/forms/interfaces/FormElements';
-import FormSubmitPage, {
-  type FormSubmitFormProps,
-} from '~/components/forms/FormSubmitPage';
-import FormInvalidResponse, {
-  type FormInvalidResponseProps,
-} from '~/components/forms/FormInvalidResponse';
+import { db } from '~/server/db';
+import {
+  formAnswers,
+  formQuestions,
+  formSubmissions,
+  forms,
+  formsModifiableByPersons,
+} from '~/server/schema';
 
 const ajv = new Ajv({
   allErrors: true,
@@ -313,7 +313,7 @@ interface formSum {
   isAnonymous: boolean;
   isViewAnalyticsAllowed: boolean;
   description?: string;
-  expiryDate?: Date;
+  endedAt?: Date;
   isQuiz: boolean;
 }
 
@@ -340,7 +340,7 @@ export async function publishForm(
         isSingleResponse: form.isSingleResponse,
         isAnonymous: form.isAnonymous,
         isViewAnalyticsAllowed: form.isViewAnalyticsAllowed,
-        expiryDate: form.expiryDate,
+        endedAt: form.endedAt,
         isQuiz: form.isQuiz,
         isPublished: true,
         questionValidations: properties,
@@ -435,7 +435,7 @@ export async function getFormForSubmission(id: number): Promise<{
         },
       };
 
-    if (form.expiryDate && form.expiryDate < new Date()) {
+    if (form.endedAt && form.endedAt < new Date()) {
       await db.update(forms).set({ isActive: false });
 
       return {
@@ -555,7 +555,7 @@ export async function submitForm(
         questionValidations: forms.questionValidations,
         requiredQuestions: forms.requiredQuestions,
         isAnonymous: forms.isAnonymous,
-        expiryDate: forms.expiryDate,
+        endedAt: forms.endedAt,
         isSingleResponse: forms.isSingleResponse,
         isEditingAllowed: forms.isEditingAllowed,
         onSubmitMessage: forms.onSubmitMessage,
@@ -598,7 +598,7 @@ export async function submitForm(
     if (!form.isActive)
       return { title: 'Error', description: 'Form is expired' };
 
-    if (form.expiryDate && form.expiryDate < new Date()) {
+    if (form.endedAt && form.endedAt < new Date()) {
       await db.update(forms).set({ isActive: true }).where(eq(forms.id, id));
       return { title: 'Error', description: 'Form is expired' };
     }
diff --git a/components/forms/FormSubmitForm.tsx b/components/forms/FormSubmitForm.tsx
index 67a0d939..0ba7cd29 100644
--- a/components/forms/FormSubmitForm.tsx
+++ b/components/forms/FormSubmitForm.tsx
@@ -1,17 +1,14 @@
 'use client';
 
-import { useState } from 'react';
 import { motion } from 'framer-motion';
-import { useForm } from 'react-hook-form';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { submitForm } from '~/actions/form.actions';
 import { validateResolver } from '~/lib/validateResolver';
 
-import {
-  FormElements,
-  type validationProperty,
-} from './interfaces/FormElements';
+import { Button } from '../ui/button';
 import {
   Form,
   FormControl,
@@ -19,10 +16,13 @@ import {
   FormItem,
   FormMessage,
 } from '../ui/form';
-import { Button } from '../ui/button';
 import { Separator } from '../ui/separator';
 import { toast } from '../ui/use-toast';
 import type { FormSubmitFormProps } from './FormSubmitPage';
+import {
+  FormElements,
+  type validationProperty,
+} from './interfaces/FormElements';
 
 export default function FormSubmitForm({
   locale,
diff --git a/components/forms/FormSubmitPage.tsx b/components/forms/FormSubmitPage.tsx
index 0cb3aff0..a6698f45 100644
--- a/components/forms/FormSubmitPage.tsx
+++ b/components/forms/FormSubmitPage.tsx
@@ -1,9 +1,9 @@
 import { Separator } from '../ui/separator';
 import FormDetails from './FormDetails';
 import FormSubmitForm from './FormSubmitForm';
-import type {
-  ElementsType,
-  validationProperty,
+import {
+  type ElementsType,
+  type validationProperty,
 } from './interfaces/FormElements';
 
 export interface FormSubmitFormProps {
diff --git a/components/forms/interfaces/FormElements.tsx b/components/forms/interfaces/FormElements.tsx
index 7a28ba92..c0cf7e1b 100644
--- a/components/forms/interfaces/FormElements.tsx
+++ b/components/forms/interfaces/FormElements.tsx
@@ -4,21 +4,21 @@ import type {
   RefAttributes,
 } from 'react';
 
-import { type InputProps } from '~/components/ui/input';
+import { type MultiListProps } from '~/components/inputs/multiSelectItem';
 import { type ListProps } from '~/components/inputs/radioItems';
-import type { MultiListProps } from '~/components/inputs/multiSelectItem';
+import { type InputProps } from '~/components/ui/input';
 
-import { TextFieldFormElement } from '../fields/TextFieldFormElement';
-import { TimeFieldFormElement } from '../fields/TimeFieldFormElement';
-import { EmailFieldFormElement } from '../fields/EmailFieldFormElement';
 import { DateFieldFormElement } from '../fields/DateFieldFormElement';
-import { PhoneFieldFormElement } from '../fields/PhoneFieldFormElement';
-import { SelectDropdownFormElement } from '../fields/SelectDropdownFormElement';
-import { RadioGenericFormElement } from '../fields/RadioGenericFormElement';
 import { DateTimeFieldFormElement } from '../fields/DateTimeFieldFormElement';
+import { EmailFieldFormElement } from '../fields/EmailFieldFormElement';
+import { MultiSelectFormElement } from '../fields/MultiSelectFormElement';
 import { NumberFieldFormElement } from '../fields/NumberFieldFormElement';
+import { PhoneFieldFormElement } from '../fields/PhoneFieldFormElement';
+import { RadioGenericFormElement } from '../fields/RadioGenericFormElement';
+import { SelectDropdownFormElement } from '../fields/SelectDropdownFormElement';
 import { TextAreaFieldFormElement } from '../fields/TextAreaFormElement';
-import { MultiSelectFormElement } from '../fields/MultiSelectFormElement';
+import { TextFieldFormElement } from '../fields/TextFieldFormElement';
+import { TimeFieldFormElement } from '../fields/TimeFieldFormElement';
 
 export type ElementsType =
   | 'TextField'
diff --git a/components/forms/schemas/form.ts b/components/forms/schemas/form.ts
index cf49f738..113b8519 100644
--- a/components/forms/schemas/form.ts
+++ b/components/forms/schemas/form.ts
@@ -18,7 +18,7 @@ export const finalFormSchema = z
     isViewAnalyticsAllowed: z.boolean().default(false),
     isShuffled: z.boolean().default(false),
     isCopySent: z.boolean().default(false),
-    expiryDate: z
+    endedAt: z
       .date()
       .min(new Date(), { message: "form cannot expire before it's creation." })
       .optional(),
diff --git a/schemas/form.ts b/schemas/form.ts
index cf49f738..113b8519 100644
--- a/schemas/form.ts
+++ b/schemas/form.ts
@@ -18,7 +18,7 @@ export const finalFormSchema = z
     isViewAnalyticsAllowed: z.boolean().default(false),
     isShuffled: z.boolean().default(false),
     isCopySent: z.boolean().default(false),
-    expiryDate: z
+    endedAt: z
       .date()
       .min(new Date(), { message: "form cannot expire before it's creation." })
       .optional(),
diff --git a/server/schema/forms.schema.ts b/server/schema/forms.schema.ts
index 72344d8e..6220768b 100644
--- a/server/schema/forms.schema.ts
+++ b/server/schema/forms.schema.ts
@@ -1,17 +1,19 @@
 import { relations, sql } from 'drizzle-orm';
 import {
   boolean,
-  date,
   integer,
+  json,
+  jsonb,
   pgTable,
   real,
   serial,
   smallint,
+  timestamp,
   varchar,
-  json,
-  jsonb,
 } from 'drizzle-orm/pg-core';
+
 import { persons } from '.';
+
 //temp
 export interface validationProperty {
   type: string;
@@ -36,8 +38,6 @@ export const forms = pgTable('forms', {
   isShuffled: boolean('is_shuffled').default(false).notNull(),
   isCopySent: boolean('is_copy_sent').default(false).notNull(),
   isQuiz: boolean('is_quiz').default(false).notNull(),
-  expiryDate: date('date', { mode: 'date' }),
-  isActive: boolean('is_active').default(true).notNull(),
   persistentUrl: varchar('persistent_url'),
   oldPersistentUrls: varchar('old_persistent_urls')
     .array()
@@ -51,6 +51,8 @@ export const forms = pgTable('forms', {
   questionValidations: json('question_validations').$type<
     Record<string, validationProperty>
   >(),
+  isActive: boolean('is_active').default(true).notNull(),
+  endedAt: timestamp('ended_at'),
 });
 export const formRelations = relations(forms, ({ many }) => ({
   questions: many(formQuestions),
@@ -163,7 +165,7 @@ export const formAnswers = pgTable('form_answers', {
   submissionId: integer('submission_id').notNull(),
   value: jsonb('value').notNull(),
 });
-export const formAnswersRelations = relations(formAnswers, ({ one, many }) => ({
+export const formAnswersRelations = relations(formAnswers, ({ one }) => ({
   questions: one(formQuestions, {
     fields: [formAnswers.questionId],
     references: [formQuestions.id],

From 987e7360597ade802ec3e82b7568f71c429f08f3 Mon Sep 17 00:00:00 2001
From: heydoyouknowme0 <akrb2204@gmail.com>
Date: Fri, 5 Apr 2024 03:16:02 +0530
Subject: [PATCH 5/7] cleanup:removed unused import

---
 components/ui/multiselect.tsx |   4 +-
 components/ui/toast.tsx       |   4 +-
 package-lock.json             | 454 +++++++++-------------------------
 package.json                  |   1 -
 4 files changed, 124 insertions(+), 339 deletions(-)

diff --git a/components/ui/multiselect.tsx b/components/ui/multiselect.tsx
index 0647baa4..f27d1f26 100644
--- a/components/ui/multiselect.tsx
+++ b/components/ui/multiselect.tsx
@@ -2,7 +2,7 @@
 'use client';
 
 import * as React from 'react';
-import { X } from 'lucide-react';
+import { Cross2Icon } from '@radix-ui/react-icons';
 import { Command as CommandPrimitive, useCommandState } from 'cmdk';
 import { forwardRef, useEffect } from 'react';
 
@@ -390,7 +390,7 @@ const MultipleSelector = React.forwardRef<
                     }}
                     onClick={() => handleUnselect(option)}
                   >
-                    <X className="h-3 w-3 text-neutral-50 hover:text-neutral-900" />
+                    <Cross2Icon className="h-3 w-3 text-neutral-50 hover:text-neutral-900" />
                   </button>
                 </Badge>
               );
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index f8f0adcd..013ea838 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
+import { Cross2Icon } from '@radix-ui/react-icons';
 
 import { cn } from '~/lib/utils';
 
@@ -84,7 +84,7 @@ const ToastClose = React.forwardRef<
     toast-close=""
     {...props}
   >
-    <X className="h-4 w-4" />
+    <Cross2Icon className="h-4 w-4" />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
diff --git a/package-lock.json b/package-lock.json
index 3f68fc66..7742b77c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,7 @@
         "negotiator": "^0.6.3",
         "next": "14.1.0",
         "next-auth": "^4.24.5",
-        "react": "^18",        
+        "react": "^18",
         "react-aria": "^3.25.0",
         "react-day-picker": "^8.10.0",
         "react-dom": "^18",
@@ -84,7 +84,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -313,6 +312,42 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz",
+      "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.6.tgz",
+      "integrity": "sha512-etVau26po9+eewJKYoiBKP6743I1br0/Ie00Pb/S/PtmYfmjTcOn2YCh2yNkSZI12h6Rg+BOgQYborXk46BvkA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.18.2",
+        "@formatjs/icu-skeleton-parser": "1.8.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.0.tgz",
+      "integrity": "sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.18.2",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@formatjs/intl-localematcher": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
@@ -362,6 +397,39 @@
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz",
+      "integrity": "sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/message": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.2.tgz",
+      "integrity": "sha512-MHAWsZWz8jf6jFPZqpTudcCM361YMtPIRu9CXkYmKjJ/0R3pQRScV5C0zS+Qi50O5UAm8ecKhkXx6mWDDcF6/g==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "intl-messageformat": "^10.1.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.1.tgz",
+      "integrity": "sha512-N0fPU/nz15SwR9IbfJ5xaS9Ss/O5h1sVXMZf43vc9mxEG48ovglvvzBjF53aHlq20uoR6c+88CrIXipU/LSzwg==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.1.tgz",
+      "integrity": "sha512-vWQOvRIauvFMzOO+h7QrdsJmtN1AXAFVcaLWP9AseRN2o7iHceZ6bIXhBD4teZl8i91A3gxKnWBlGgjCwU6MFQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -410,7 +478,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -424,7 +491,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
       "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -433,7 +499,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -441,14 +506,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
       "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -661,7 +724,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -674,7 +736,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -683,7 +744,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -1408,6 +1468,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
+      "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -3575,14 +3669,12 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -3594,8 +3686,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -3838,14 +3929,12 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3854,7 +3943,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3864,7 +3952,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -3981,7 +4068,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -4025,7 +4111,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -4052,7 +4137,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -4121,239 +4205,6 @@
         "react-dom": "^18.0.0"
       }
     },
-    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
-      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
-      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
-      "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz",
-      "integrity": "sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-dismissable-layer": "1.0.0",
-        "@radix-ui/react-focus-guards": "1.0.0",
-        "@radix-ui/react-focus-scope": "1.0.0",
-        "@radix-ui/react-id": "1.0.0",
-        "@radix-ui/react-portal": "1.0.0",
-        "@radix-ui/react-presence": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-slot": "1.0.0",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.4"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz",
-      "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-use-callback-ref": "1.0.0",
-        "@radix-ui/react-use-escape-keydown": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
-      "integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz",
-      "integrity": "sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
-      "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz",
-      "integrity": "sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
-      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz",
-      "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz",
-      "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
-      "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
-      "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz",
-      "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
-      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk/node_modules/react-remove-scroll": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz",
-      "integrity": "sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.3",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4376,7 +4227,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -4384,8 +4234,7 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/cookie": {
       "version": "0.5.0",
@@ -4428,7 +4277,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -4541,8 +4389,7 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/difflib": {
       "version": "0.2.4",
@@ -4571,8 +4418,7 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -5633,8 +5479,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -5646,7 +5491,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -5662,7 +5506,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -5686,7 +5529,6 @@
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz",
       "integrity": "sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -5707,7 +5549,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -5816,14 +5657,12 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5930,7 +5769,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -6094,7 +5932,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
       "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -6161,7 +5998,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -6170,8 +6006,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/internal-slot": {
       "version": "1.0.6",
@@ -6251,7 +6086,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -6291,7 +6125,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -6318,7 +6151,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6363,7 +6195,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -6396,7 +6227,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -6606,7 +6436,6 @@
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
       "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -6750,7 +6579,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -6758,8 +6586,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -6844,7 +6671,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -6853,7 +6679,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -6866,7 +6691,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -6902,7 +6726,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -7065,7 +6888,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7088,7 +6910,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7097,7 +6918,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -7223,7 +7043,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -7328,7 +7147,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7345,8 +7163,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.10.2",
@@ -7479,7 +7296,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -7491,7 +7307,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7500,7 +7315,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -7509,7 +7323,6 @@
       "version": "8.4.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
       "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7537,7 +7350,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -7554,7 +7366,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -7573,7 +7384,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7608,7 +7418,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
       "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       }
@@ -7617,7 +7426,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
       "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.11"
       },
@@ -7636,7 +7444,6 @@
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
       "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -7648,8 +7455,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/postgres-array": {
       "version": "2.0.0",
@@ -7831,7 +7637,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -7840,7 +7645,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7944,7 +7748,6 @@
       "version": "7.51.2",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz",
       "integrity": "sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==",
-      "peer": true,
       "engines": {
         "node": ">=12.22.0"
       },
@@ -8074,7 +7877,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -8083,7 +7885,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -8145,7 +7946,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -8180,7 +7980,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -8205,7 +8004,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -8616,7 +8414,6 @@
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
       "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -8638,7 +8435,6 @@
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
       "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -8682,7 +8478,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -8722,7 +8517,6 @@
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
       "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -8782,7 +8576,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -8791,7 +8584,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -8813,7 +8605,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -8836,8 +8627,7 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -9018,7 +8808,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -9093,8 +8882,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/uuid": {
       "version": "8.3.2",
@@ -9298,8 +9086,7 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/ws": {
       "version": "8.14.2",
@@ -9338,7 +9125,6 @@
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
       "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
-      "dev": true,
       "engines": {
         "node": ">= 14"
       }
diff --git a/package.json b/package.json
index e24c687d..1ed93e2e 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.0.0",
     "framer-motion": "^11.0.20",
-    "lucide-react": "^0.323.0",
     "negotiator": "^0.6.3",
     "next": "14.1.0",
     "next-auth": "^4.24.5",

From 5b1b59407821450320bc47e670d471a820882fa7 Mon Sep 17 00:00:00 2001
From: heydoyouknowme0 <akrb2204@gmail.com>
Date: Fri, 5 Apr 2024 16:11:57 +0530
Subject: [PATCH 6/7] refactor:cleanup with kebab-case

---
 actions/form.actions.tsx                      | 18 ++++-----
 app/[locale]/forms/(formDashboard)/page.tsx   |  2 +-
 ...FormElement.tsx => date-field-element.tsx} |  2 +-
 ...lement.tsx => date-time-field-element.tsx} |  2 +-
 ...ormElement.tsx => email-field-element.tsx} |  2 +-
 ...rmElement.tsx => multi-select-element.tsx} |  2 +-
 ...rmElement.tsx => number-field-element.tsx} |  2 +-
 ...ormElement.tsx => phone-field-element.tsx} |  2 +-
 ...ormElement.tsx => radio-field-element.tsx} |  2 +-
 ...rmElement.tsx => select-field-element.tsx} |  2 +-
 ...FormElement.tsx => text-field-element.tsx} |  2 +-
 ...eaFormElement.tsx => textarea-element.tsx} |  2 +-
 ...FormElement.tsx => time-field-element.tsx} |  2 +-
 .../{FormDetails.tsx => form-details.tsx}     |  0
 ...Response.tsx => form-invalid-response.tsx} |  0
 ...ormSubmitForm.tsx => form-submit-form.tsx} |  4 +-
 ...ormSubmitPage.tsx => form-submit-page.tsx} |  6 +--
 .../{FormElements.tsx => form-elements.tsx}   | 22 +++++------
 .../forms/{Tempcreate.tsx => temp-create.tsx} |  2 +-
 components/ui/command.tsx                     |  2 +-
 schemas/form.ts                               | 38 -------------------
 21 files changed, 39 insertions(+), 77 deletions(-)
 rename components/forms/fields/{DateFieldFormElement.tsx => date-field-element.tsx} (95%)
 rename components/forms/fields/{DateTimeFieldFormElement.tsx => date-time-field-element.tsx} (95%)
 rename components/forms/fields/{EmailFieldFormElement.tsx => email-field-element.tsx} (95%)
 rename components/forms/fields/{MultiSelectFormElement.tsx => multi-select-element.tsx} (97%)
 rename components/forms/fields/{NumberFieldFormElement.tsx => number-field-element.tsx} (95%)
 rename components/forms/fields/{PhoneFieldFormElement.tsx => phone-field-element.tsx} (95%)
 rename components/forms/fields/{RadioGenericFormElement.tsx => radio-field-element.tsx} (96%)
 rename components/forms/fields/{SelectDropdownFormElement.tsx => select-field-element.tsx} (96%)
 rename components/forms/fields/{TextFieldFormElement.tsx => text-field-element.tsx} (95%)
 rename components/forms/fields/{TextAreaFormElement.tsx => textarea-element.tsx} (95%)
 rename components/forms/fields/{TimeFieldFormElement.tsx => time-field-element.tsx} (95%)
 rename components/forms/{FormDetails.tsx => form-details.tsx} (100%)
 rename components/forms/{FormInvalidResponse.tsx => form-invalid-response.tsx} (100%)
 rename components/forms/{FormSubmitForm.tsx => form-submit-form.tsx} (97%)
 rename components/forms/{FormSubmitPage.tsx => form-submit-page.tsx} (91%)
 rename components/forms/interfaces/{FormElements.tsx => form-elements.tsx} (75%)
 rename components/forms/{Tempcreate.tsx => temp-create.tsx} (96%)
 delete mode 100644 schemas/form.ts

diff --git a/actions/form.actions.tsx b/actions/form.actions.tsx
index 1ad0dca8..fa7e8bd0 100644
--- a/actions/form.actions.tsx
+++ b/actions/form.actions.tsx
@@ -7,27 +7,27 @@ import { revalidatePath } from 'next/cache';
 
 import FormInvalidResponse, {
   type FormInvalidResponseProps,
-} from '~/components/forms/FormInvalidResponse';
+} from '~/components/forms/form-invalid-response';
 import FormSubmitPage, {
   type FormSubmitFormProps,
-} from '~/components/forms/FormSubmitPage';
+} from '~/components/forms/form-submit-page';
 import {
-  FormElements,
   type ElementsType,
+  FormElements,
   type validationProperty,
-} from '~/components/forms/interfaces/FormElements';
+} from '~/components/forms/interfaces/form-elements';
 import {
   finalFormSchema,
   formSchema,
   type formSchemaType,
-} from '~/schemas/form';
+} from '~/components/forms/schemas/form';
 import { db } from '~/server/db';
 import {
   formAnswers,
   formQuestions,
-  formSubmissions,
   forms,
   formsModifiableByPersons,
+  formSubmissions,
 } from '~/server/schema';
 
 const ajv = new Ajv({
@@ -56,7 +56,7 @@ export async function createForm(values: formSchemaType) {
   if (!user) throw new UserNotFoundErr();
 
   try {
-    return await db.transaction(async (tx) => {
+    return await db.transaction(async () => {
       const [form] = await db
         .insert(forms)
         .values({
@@ -108,7 +108,7 @@ export async function getFormById(id: number) {
 
   try {
     return db
-      .selectDistinct()
+      .select()
       .from(forms)
       .where(eq(forms.id, id))
       .innerJoin(
@@ -377,7 +377,7 @@ export async function getFormByIdWithQuestions(id: number) {
                   )
               )
             )
-          : eq(forms.isAnonymous, true),
+          : eq(forms.id, id),
     });
   } catch (error) {
     console.error('Error fetching form by ID with questions:', error);
diff --git a/app/[locale]/forms/(formDashboard)/page.tsx b/app/[locale]/forms/(formDashboard)/page.tsx
index a4601131..56ff1348 100644
--- a/app/[locale]/forms/(formDashboard)/page.tsx
+++ b/app/[locale]/forms/(formDashboard)/page.tsx
@@ -16,7 +16,7 @@ import {
   CardTitle,
 } from '~/components/ui/card';
 import { Skeleton } from '~/components/ui/skeleton';
-import Tempcreate from '~/components/forms/Tempcreate';
+import Tempcreate from '~/components/forms/temp-create';
 
 export default function Home() {
   return (
diff --git a/components/forms/fields/DateFieldFormElement.tsx b/components/forms/fields/date-field-element.tsx
similarity index 95%
rename from components/forms/fields/DateFieldFormElement.tsx
rename to components/forms/fields/date-field-element.tsx
index 48806af1..fb2d5dfa 100644
--- a/components/forms/fields/DateFieldFormElement.tsx
+++ b/components/forms/fields/date-field-element.tsx
@@ -4,7 +4,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '~/components/forms/interfaces/FormElements';
+} from '~/components/forms/interfaces/form-elements';
 import DatePicker from '~/components/inputs/date';
 
 //import DateBasedForm from './DateBasedForm';
diff --git a/components/forms/fields/DateTimeFieldFormElement.tsx b/components/forms/fields/date-time-field-element.tsx
similarity index 95%
rename from components/forms/fields/DateTimeFieldFormElement.tsx
rename to components/forms/fields/date-time-field-element.tsx
index 5889f733..086f5de1 100644
--- a/components/forms/fields/DateTimeFieldFormElement.tsx
+++ b/components/forms/fields/date-time-field-element.tsx
@@ -4,7 +4,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '~/components/forms/interfaces/FormElements';
+} from '~/components/forms/interfaces/form-elements';
 import DateTimeField from '~/components/inputs/date-time';
 
 //import DateTimeBasedForm from './DateTimeBasedForm';
diff --git a/components/forms/fields/EmailFieldFormElement.tsx b/components/forms/fields/email-field-element.tsx
similarity index 95%
rename from components/forms/fields/EmailFieldFormElement.tsx
rename to components/forms/fields/email-field-element.tsx
index 6441ed39..26d34146 100644
--- a/components/forms/fields/EmailFieldFormElement.tsx
+++ b/components/forms/fields/email-field-element.tsx
@@ -4,7 +4,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '~/components/forms/interfaces/FormElements';
+} from '~/components/forms/interfaces/form-elements';
 import EmailField from '~/components/inputs/email';
 
 //import InputBasedForm from './InputBasedForm';
diff --git a/components/forms/fields/MultiSelectFormElement.tsx b/components/forms/fields/multi-select-element.tsx
similarity index 97%
rename from components/forms/fields/MultiSelectFormElement.tsx
rename to components/forms/fields/multi-select-element.tsx
index cd519d1c..17a96257 100644
--- a/components/forms/fields/MultiSelectFormElement.tsx
+++ b/components/forms/fields/multi-select-element.tsx
@@ -7,7 +7,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '../interfaces/FormElements';
+} from '../interfaces/form-elements';
 
 const inputType: ElementsType = 'MultiSelectField';
 
diff --git a/components/forms/fields/NumberFieldFormElement.tsx b/components/forms/fields/number-field-element.tsx
similarity index 95%
rename from components/forms/fields/NumberFieldFormElement.tsx
rename to components/forms/fields/number-field-element.tsx
index df52e5a3..9400f2bb 100644
--- a/components/forms/fields/NumberFieldFormElement.tsx
+++ b/components/forms/fields/number-field-element.tsx
@@ -4,7 +4,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '~/components/forms/interfaces/FormElements';
+} from '~/components/forms/interfaces/form-elements';
 import NumberField from '~/components/inputs/numberfield';
 
 //import TextValidationForm from './InputBasedForm';
diff --git a/components/forms/fields/PhoneFieldFormElement.tsx b/components/forms/fields/phone-field-element.tsx
similarity index 95%
rename from components/forms/fields/PhoneFieldFormElement.tsx
rename to components/forms/fields/phone-field-element.tsx
index f3770c9d..15af6c3a 100644
--- a/components/forms/fields/PhoneFieldFormElement.tsx
+++ b/components/forms/fields/phone-field-element.tsx
@@ -4,7 +4,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '~/components/forms/interfaces/FormElements';
+} from '~/components/forms/interfaces/form-elements';
 import PhoneField from '~/components/inputs/telephone';
 
 //import TextValidationForm from './InputBasedForm';
diff --git a/components/forms/fields/RadioGenericFormElement.tsx b/components/forms/fields/radio-field-element.tsx
similarity index 96%
rename from components/forms/fields/RadioGenericFormElement.tsx
rename to components/forms/fields/radio-field-element.tsx
index 9cd5532c..db1f5e6b 100644
--- a/components/forms/fields/RadioGenericFormElement.tsx
+++ b/components/forms/fields/radio-field-element.tsx
@@ -7,7 +7,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '../interfaces/FormElements';
+} from '../interfaces/form-elements';
 
 const inputType: ElementsType = 'RadioField';
 
diff --git a/components/forms/fields/SelectDropdownFormElement.tsx b/components/forms/fields/select-field-element.tsx
similarity index 96%
rename from components/forms/fields/SelectDropdownFormElement.tsx
rename to components/forms/fields/select-field-element.tsx
index c682fcd4..177a4186 100644
--- a/components/forms/fields/SelectDropdownFormElement.tsx
+++ b/components/forms/fields/select-field-element.tsx
@@ -7,7 +7,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '../interfaces/FormElements';
+} from '../interfaces/form-elements';
 
 const inputType: ElementsType = 'SelectDropdown';
 
diff --git a/components/forms/fields/TextFieldFormElement.tsx b/components/forms/fields/text-field-element.tsx
similarity index 95%
rename from components/forms/fields/TextFieldFormElement.tsx
rename to components/forms/fields/text-field-element.tsx
index 3f73cd9c..a690c63c 100644
--- a/components/forms/fields/TextFieldFormElement.tsx
+++ b/components/forms/fields/text-field-element.tsx
@@ -4,7 +4,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '~/components/forms/interfaces/FormElements';
+} from '~/components/forms/interfaces/form-elements';
 import TextField from '~/components/inputs/text';
 
 //import TextValidationForm from './InputBasedForm';
diff --git a/components/forms/fields/TextAreaFormElement.tsx b/components/forms/fields/textarea-element.tsx
similarity index 95%
rename from components/forms/fields/TextAreaFormElement.tsx
rename to components/forms/fields/textarea-element.tsx
index fa182171..f85b123c 100644
--- a/components/forms/fields/TextAreaFormElement.tsx
+++ b/components/forms/fields/textarea-element.tsx
@@ -4,7 +4,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '~/components/forms/interfaces/FormElements';
+} from '~/components/forms/interfaces/form-elements';
 import TextAreaField from '~/components/inputs/textAreaField';
 
 //import TextValidationForm from './InputBasedForm';
diff --git a/components/forms/fields/TimeFieldFormElement.tsx b/components/forms/fields/time-field-element.tsx
similarity index 95%
rename from components/forms/fields/TimeFieldFormElement.tsx
rename to components/forms/fields/time-field-element.tsx
index cda4aa82..8b1bb700 100644
--- a/components/forms/fields/TimeFieldFormElement.tsx
+++ b/components/forms/fields/time-field-element.tsx
@@ -4,7 +4,7 @@ import type {
   ElementsType,
   FormElement,
   FormElementInstance,
-} from '~/components/forms/interfaces/FormElements';
+} from '~/components/forms/interfaces/form-elements';
 import TimeField from '~/components/inputs/time';
 
 //import TimeBasedForm from './TimeBasedForm';
diff --git a/components/forms/FormDetails.tsx b/components/forms/form-details.tsx
similarity index 100%
rename from components/forms/FormDetails.tsx
rename to components/forms/form-details.tsx
diff --git a/components/forms/FormInvalidResponse.tsx b/components/forms/form-invalid-response.tsx
similarity index 100%
rename from components/forms/FormInvalidResponse.tsx
rename to components/forms/form-invalid-response.tsx
diff --git a/components/forms/FormSubmitForm.tsx b/components/forms/form-submit-form.tsx
similarity index 97%
rename from components/forms/FormSubmitForm.tsx
rename to components/forms/form-submit-form.tsx
index 0ba7cd29..ea38c86f 100644
--- a/components/forms/FormSubmitForm.tsx
+++ b/components/forms/form-submit-form.tsx
@@ -18,11 +18,11 @@ import {
 } from '../ui/form';
 import { Separator } from '../ui/separator';
 import { toast } from '../ui/use-toast';
-import type { FormSubmitFormProps } from './FormSubmitPage';
+import type { FormSubmitFormProps } from './form-submit-page';
 import {
   FormElements,
   type validationProperty,
-} from './interfaces/FormElements';
+} from './interfaces/form-elements';
 
 export default function FormSubmitForm({
   locale,
diff --git a/components/forms/FormSubmitPage.tsx b/components/forms/form-submit-page.tsx
similarity index 91%
rename from components/forms/FormSubmitPage.tsx
rename to components/forms/form-submit-page.tsx
index a6698f45..53800034 100644
--- a/components/forms/FormSubmitPage.tsx
+++ b/components/forms/form-submit-page.tsx
@@ -1,10 +1,10 @@
 import { Separator } from '../ui/separator';
-import FormDetails from './FormDetails';
-import FormSubmitForm from './FormSubmitForm';
+import FormDetails from './form-details';
+import FormSubmitForm from './form-submit-form';
 import {
   type ElementsType,
   type validationProperty,
-} from './interfaces/FormElements';
+} from './interfaces/form-elements';
 
 export interface FormSubmitFormProps {
   form: {
diff --git a/components/forms/interfaces/FormElements.tsx b/components/forms/interfaces/form-elements.tsx
similarity index 75%
rename from components/forms/interfaces/FormElements.tsx
rename to components/forms/interfaces/form-elements.tsx
index c0cf7e1b..64d37ed3 100644
--- a/components/forms/interfaces/FormElements.tsx
+++ b/components/forms/interfaces/form-elements.tsx
@@ -8,17 +8,17 @@ import { type MultiListProps } from '~/components/inputs/multiSelectItem';
 import { type ListProps } from '~/components/inputs/radioItems';
 import { type InputProps } from '~/components/ui/input';
 
-import { DateFieldFormElement } from '../fields/DateFieldFormElement';
-import { DateTimeFieldFormElement } from '../fields/DateTimeFieldFormElement';
-import { EmailFieldFormElement } from '../fields/EmailFieldFormElement';
-import { MultiSelectFormElement } from '../fields/MultiSelectFormElement';
-import { NumberFieldFormElement } from '../fields/NumberFieldFormElement';
-import { PhoneFieldFormElement } from '../fields/PhoneFieldFormElement';
-import { RadioGenericFormElement } from '../fields/RadioGenericFormElement';
-import { SelectDropdownFormElement } from '../fields/SelectDropdownFormElement';
-import { TextAreaFieldFormElement } from '../fields/TextAreaFormElement';
-import { TextFieldFormElement } from '../fields/TextFieldFormElement';
-import { TimeFieldFormElement } from '../fields/TimeFieldFormElement';
+import { DateFieldFormElement } from '../fields/date-field-element';
+import { DateTimeFieldFormElement } from '../fields/date-time-field-element';
+import { EmailFieldFormElement } from '../fields/email-field-element';
+import { MultiSelectFormElement } from '../fields/multi-select-element';
+import { NumberFieldFormElement } from '../fields/number-field-element';
+import { PhoneFieldFormElement } from '../fields/phone-field-element';
+import { RadioGenericFormElement } from '../fields/radio-field-element';
+import { SelectDropdownFormElement } from '../fields/select-field-element';
+import { TextAreaFieldFormElement } from '../fields/textarea-element';
+import { TextFieldFormElement } from '../fields/text-field-element';
+import { TimeFieldFormElement } from '../fields/time-field-element';
 
 export type ElementsType =
   | 'TextField'
diff --git a/components/forms/Tempcreate.tsx b/components/forms/temp-create.tsx
similarity index 96%
rename from components/forms/Tempcreate.tsx
rename to components/forms/temp-create.tsx
index 8c119bc3..c5befc53 100644
--- a/components/forms/Tempcreate.tsx
+++ b/components/forms/temp-create.tsx
@@ -3,7 +3,7 @@
 import { createForm, publishForm } from '~/actions/form.actions';
 import { Button } from '~/components/ui/button';
 
-import type { ElementsType } from './interfaces/FormElements';
+import type { ElementsType } from './interfaces/form-elements';
 
 const Tempcreate = () => {
   const makeForm = async () => {
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
index 9d4ce7b5..07cfdb09 100644
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'aria-selected:bg-accent aria-selected:text-accent-foreground text-md relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      "aria-[selected='true']:bg-accent aria-[selected='true']:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}
diff --git a/schemas/form.ts b/schemas/form.ts
deleted file mode 100644
index 113b8519..00000000
--- a/schemas/form.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { z } from 'zod';
-
-export const formSchema = z.object({
-  title: z.string().min(4),
-  description: z.string().optional(),
-  isEditable: z.boolean().default(false),
-});
-
-export type formSchemaType = z.infer<typeof formSchema>;
-
-export const finalFormSchema = z
-  .object({
-    title: z.string().min(4),
-    description: z.string().optional(),
-    onSubmitMessage: z.string().default('Your response has been recorded.'),
-    isEditingAllowed: z.boolean(),
-    isSingleResponse: z.boolean().default(false),
-    isViewAnalyticsAllowed: z.boolean().default(false),
-    isShuffled: z.boolean().default(false),
-    isCopySent: z.boolean().default(false),
-    endedAt: z
-      .date()
-      .min(new Date(), { message: "form cannot expire before it's creation." })
-      .optional(),
-    isAnonymous: z.boolean().default(false),
-  })
-  .refine((data) => !data.isEditingAllowed || data.isSingleResponse, {
-    message: 'Cannot edit a multiple response form.',
-    path: ['isEditingAllowed'],
-  })
-  .refine(
-    (data) =>
-      !data.isAnonymous || (!data.isEditingAllowed && !data.isSingleResponse),
-    {
-      message: 'Cannot be anonymous and stop multiple or make an edit.',
-      path: ['isAnonymous'],
-    }
-  );

From c0cf2fb03c235949b2eccf4fcab4fe1ffeba32b3 Mon Sep 17 00:00:00 2001
From: heydoyouknowme0 <akrb2204@gmail.com>
Date: Sat, 6 Apr 2024 20:34:33 +0530
Subject: [PATCH 7/7] Squashed commit of the following: alongside added
 compatibility to the new input system commit
 354af1675b54772812aaded8dd49e5ab3cf128f6 Author: geekysilento
 <adityakarna.ak@gmail.com> Date:   Fri Apr 5 16:28:12 2024 +0545

    WIP: modified checkbox ui

commit 844ce7a446ab39d63b6bffe026062ed18072b7c7
Author: GetPsyched <priyanshu@getpsyched.dev>
Date:   Tue Apr 2 20:01:11 2024 +0530

    feat: add description

commit 897a87156a6408115aa1de6ede939997e4e99167
Author: GetPsyched <priyanshu@getpsyched.dev>
Date:   Tue Apr 2 19:01:13 2024 +0530

    feat: handle errors natively

commit 30c3da2f12f8eacd69ab1decaec481d8a7e04147
Author: GetPsyched <priyanshu@getpsyched.dev>
Date:   Tue Apr 2 01:45:01 2024 +0530

    feat: static error message

commit 5f6fb238742637f0248bfae79cf12b8bf7a2d1e6
Author: GetPsyched <priyanshu@getpsyched.dev>
Date:   Sun Mar 31 02:24:02 2024 +0530

    feat: use label in input

commit d13550e9379f9025264df964798b12a3845d40a4
Author: GetPsyched <priyanshu@getpsyched.dev>
Date:   Sun Mar 31 02:23:24 2024 +0530

    feat: add required prop to label

commit 8ac69396de3c76178f08ab54be3f603edff9f2f5
Author: GetPsyched <priyanshu@getpsyched.dev>
Date:   Sun Mar 31 01:20:56 2024 +0530

    style: update default label styles

commit 5768c1692ed5c7a26e2ccb9450fa4c92d72db05d
Author: GetPsyched <priyanshu@getpsyched.dev>
Date:   Sun Mar 31 01:11:15 2024 +0530

    feat: init label from shadcn

commit a5d122b4f4dc2ecf67f67844994653c6cb503715
Author: GetPsyched <priyanshu@getpsyched.dev>
Date:   Sat Mar 30 13:08:39 2024 +0530

    style: update default input styles

commit 9850063f1dc88a7a4c2cd593d73206b0d34adbc4
Author: GetPsyched <priyanshu@getpsyched.dev>
Date:   Sat Mar 30 12:39:10 2024 +0530

    feat: init input from shadcn
---
 .eslintrc.json                                |   1 +
 app/[locale]/page.tsx                         |   9 +-
 .../forms/fields/checkbox-field-element.tsx   |  70 +++++
 .../forms/fields/date-field-element.tsx       |  21 +-
 .../forms/fields/date-time-field-element.tsx  |  25 +-
 .../forms/fields/email-field-element.tsx      |  13 +-
 .../forms/fields/number-field-element.tsx     |  45 +++-
 .../forms/fields/phone-field-element.tsx      |  32 ++-
 .../forms/fields/text-field-element.tsx       |  12 +-
 .../forms/fields/time-field-element.tsx       |  16 +-
 components/forms/form-submit-form.tsx         |   3 +-
 components/forms/interfaces/form-elements.tsx |   7 +-
 components/forms/temp-create.tsx              |  11 +-
 components/inputs/Checkbox.tsx                |  38 ---
 components/inputs/Visualizer.tsx              | 250 ------------------
 components/inputs/date-time.tsx               |  34 ---
 components/inputs/date.tsx                    |  32 ---
 components/inputs/email.tsx                   |  30 ---
 components/inputs/index.ts                    |   1 +
 components/inputs/input.tsx                   | 183 +++++++++++++
 components/inputs/multiSelectItem.tsx         |   8 +-
 components/inputs/numberfield.tsx             |  32 ---
 components/inputs/radioItems.tsx              |  15 +-
 components/inputs/selectIItem.tsx             |   8 +-
 components/inputs/telephone.tsx               |  32 ---
 components/inputs/text.tsx                    |  31 ---
 components/inputs/textAreaField.tsx           |   8 +-
 components/inputs/time.tsx                    |  25 --
 components/ui/form.tsx                        |   5 +-
 components/ui/index.ts                        |   1 +
 components/ui/input.tsx                       |   8 +-
 components/ui/label.tsx                       |  30 ++-
 32 files changed, 468 insertions(+), 568 deletions(-)
 create mode 100644 components/forms/fields/checkbox-field-element.tsx
 delete mode 100644 components/inputs/Checkbox.tsx
 delete mode 100644 components/inputs/Visualizer.tsx
 delete mode 100644 components/inputs/date-time.tsx
 delete mode 100644 components/inputs/date.tsx
 delete mode 100644 components/inputs/email.tsx
 create mode 100644 components/inputs/index.ts
 create mode 100644 components/inputs/input.tsx
 delete mode 100644 components/inputs/numberfield.tsx
 delete mode 100644 components/inputs/telephone.tsx
 delete mode 100644 components/inputs/text.tsx
 delete mode 100644 components/inputs/time.tsx

diff --git a/.eslintrc.json b/.eslintrc.json
index 1efcd80d..89282741 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -19,6 +19,7 @@
         "fixStyle": "inline-type-imports"
       }
     ],
+    "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/no-misused-promises": [
       "error",
       { "checksVoidReturn": { "attributes": false } }
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 3be8016a..3fa5746b 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,6 +1,6 @@
 import DirectorsCorner from '~/app/directors-corner';
 import Notifications from '~/app/notifications';
-import Visualizer from '~/components/inputs/Visualizer';
+import { Input } from '~/components/inputs';
 import Slideshow from '~/components/slideshow';
 
 export default function Home({
@@ -34,8 +34,13 @@ export default function Home({
         ]}
       />
       <Notifications category={notificationCategory} locale={locale} />
-      <Visualizer />
       <DirectorsCorner locale={locale} />
+      <Input
+        id="checkbox"
+        label="are u sure u wanna check this?"
+        placeholder="enter stuff brotha"
+        type="checkbox"
+      />
     </>
   );
 }
diff --git a/components/forms/fields/checkbox-field-element.tsx b/components/forms/fields/checkbox-field-element.tsx
new file mode 100644
index 00000000..e5937421
--- /dev/null
+++ b/components/forms/fields/checkbox-field-element.tsx
@@ -0,0 +1,70 @@
+import { forwardRef } from 'react';
+import { MdCheckBox } from 'react-icons/md';
+
+import type {
+  ElementsType,
+  FormElement,
+  FormElementInstance,
+} from '~/components/forms/interfaces/form-elements';
+import { Input, type InputProps } from '~/components/inputs';
+
+//import InputBasedForm from './InputBasedForm';
+
+const inputType: ElementsType = 'CheckBoxField';
+
+export const CheckBoxFieldFormElement: FormElement = {
+  inputType,
+  uiFieldComponent: ({
+    elementInstance,
+  }: {
+    elementInstance: FormElementInstance;
+  }) => (
+    <Input
+      id={elementInstance.Id}
+      type="checkbox"
+      readOnly
+      label={elementInstance.question}
+      required={elementInstance.isRequired}
+      description={elementInstance.description}
+    />
+  ),
+  // eslint-disable-next-line react/display-name
+  formComponent: forwardRef<HTMLInputElement, InputProps>(
+    ({ onChange, value, ...restProps }, ref) => (
+      <Input
+        {...restProps}
+        ref={ref}
+        type="checkbox"
+        onChange={(event) => {
+          onChange?.({
+            target: { value: event.target.checked },
+          } as unknown as React.ChangeEvent<HTMLInputElement>);
+        }}
+        defaultChecked={value as unknown as boolean}
+      />
+    )
+  ),
+  //propertiesComponent: InputBasedForm,
+  construct: (Id: string, pageNumber: number, id?: number) => {
+    return {
+      Id,
+      id,
+      question: 'CheckBox Field',
+      inputType,
+      isRequired: false,
+      pageNumber,
+      marks: 0,
+    };
+  },
+  dragBtnElement: {
+    icon: MdCheckBox,
+    label: 'CheckBox Field',
+  },
+  schemaObjects: schemaObjects,
+  shouldValidate: true,
+};
+function schemaObjects(element: FormElementInstance) {
+  return {
+    type: 'boolean',
+  };
+}
diff --git a/components/forms/fields/date-field-element.tsx b/components/forms/fields/date-field-element.tsx
index fb2d5dfa..5495b634 100644
--- a/components/forms/fields/date-field-element.tsx
+++ b/components/forms/fields/date-field-element.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { MdDateRange } from 'react-icons/md';
 
 import type {
@@ -5,11 +6,14 @@ import type {
   FormElement,
   FormElementInstance,
 } from '~/components/forms/interfaces/form-elements';
-import DatePicker from '~/components/inputs/date';
-
+import { Input, type InputProps } from '~/components/inputs';
 //import DateBasedForm from './DateBasedForm';
 
 const inputType: ElementsType = 'DateField';
+// Input.defaultProps = {
+//   type: 'date',
+// };
+// Error: Cannot assign to a client module from a server module
 
 export const DateFieldFormElement: FormElement = {
   inputType,
@@ -18,15 +22,22 @@ export const DateFieldFormElement: FormElement = {
   }: {
     elementInstance: FormElementInstance;
   }) => (
-    <DatePicker
-      className="w-full"
+    <Input
+      id={elementInstance.Id}
+      max="9999-12-31"
+      type="date"
       readOnly
       label={elementInstance.question}
       required={elementInstance.isRequired}
       description={elementInstance.description}
     />
   ),
-  formComponent: DatePicker,
+  // eslint-disable-next-line react/display-name
+  formComponent: forwardRef<HTMLInputElement, InputProps>(
+    ({ ...restProps }, ref) => (
+      <Input {...restProps} ref={ref} max="9999-12-31" type="date" />
+    )
+  ),
   //propertiesComponent: DateBasedForm,
   construct: (Id: string, pageNumber: number, id?: number) => {
     return {
diff --git a/components/forms/fields/date-time-field-element.tsx b/components/forms/fields/date-time-field-element.tsx
index 086f5de1..6aeede92 100644
--- a/components/forms/fields/date-time-field-element.tsx
+++ b/components/forms/fields/date-time-field-element.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { MdDateRange } from 'react-icons/md';
 
 import type {
@@ -5,7 +6,7 @@ import type {
   FormElement,
   FormElementInstance,
 } from '~/components/forms/interfaces/form-elements';
-import DateTimeField from '~/components/inputs/date-time';
+import { Input, type InputProps } from '~/components/inputs';
 
 //import DateTimeBasedForm from './DateTimeBasedForm';
 
@@ -18,15 +19,31 @@ export const DateTimeFieldFormElement: FormElement = {
   }: {
     elementInstance: FormElementInstance;
   }) => (
-    <DateTimeField
-      className="w-full"
+    <Input
+      id={elementInstance.Id}
       readOnly
       label={elementInstance.question}
       required={elementInstance.isRequired}
       description={elementInstance.description}
     />
   ),
-  formComponent: DateTimeField,
+  // eslint-disable-next-line react/display-name
+  formComponent: forwardRef<HTMLInputElement, InputProps>(
+    ({ onChange, value, ...restProps }, ref) => (
+      <Input
+        {...restProps}
+        ref={ref}
+        type="datetime-local"
+        max="9999-12-31T23:59"
+        defaultValue={(value as string)?.slice(0, -4)}
+        onChange={(event) => {
+          onChange?.({
+            target: { value: event.target.value + ':00Z' },
+          } as React.ChangeEvent<HTMLInputElement>);
+        }}
+      />
+    )
+  ),
   //propertiesComponent: DateTimeBasedForm,
   construct: (Id: string, pageNumber: number, id?: number) => {
     return {
diff --git a/components/forms/fields/email-field-element.tsx b/components/forms/fields/email-field-element.tsx
index 26d34146..c2bb00e0 100644
--- a/components/forms/fields/email-field-element.tsx
+++ b/components/forms/fields/email-field-element.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { MdOutlineEmail } from 'react-icons/md';
 
 import type {
@@ -5,7 +6,7 @@ import type {
   FormElement,
   FormElementInstance,
 } from '~/components/forms/interfaces/form-elements';
-import EmailField from '~/components/inputs/email';
+import { Input, type InputProps } from '~/components/inputs';
 
 //import InputBasedForm from './InputBasedForm';
 
@@ -18,15 +19,19 @@ export const EmailFieldFormElement: FormElement = {
   }: {
     elementInstance: FormElementInstance;
   }) => (
-    <EmailField
-      className="w-full"
+    <Input
+      id={elementInstance.Id}
+      type="email"
       readOnly
       label={elementInstance.question}
       required={elementInstance.isRequired}
       description={elementInstance.description}
     />
   ),
-  formComponent: EmailField,
+  // eslint-disable-next-line react/display-name
+  formComponent: forwardRef<HTMLInputElement, InputProps>(
+    ({ ...restProps }, ref) => <Input {...restProps} ref={ref} type="email" />
+  ),
   //propertiesComponent: InputBasedForm,
   construct: (Id: string, pageNumber: number, id?: number) => {
     return {
diff --git a/components/forms/fields/number-field-element.tsx b/components/forms/fields/number-field-element.tsx
index 9400f2bb..ffcbd228 100644
--- a/components/forms/fields/number-field-element.tsx
+++ b/components/forms/fields/number-field-element.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { MdNumbers } from 'react-icons/md';
 
 import type {
@@ -5,7 +6,7 @@ import type {
   FormElement,
   FormElementInstance,
 } from '~/components/forms/interfaces/form-elements';
-import NumberField from '~/components/inputs/numberfield';
+import { Input, type InputProps } from '~/components/inputs';
 
 //import TextValidationForm from './InputBasedForm';
 
@@ -18,15 +19,40 @@ export const NumberFieldFormElement: FormElement = {
   }: {
     elementInstance: FormElementInstance;
   }) => (
-    <NumberField
-      className="w-full"
+    <Input
+      id={elementInstance.Id}
+      type="number"
       readOnly
       label={elementInstance.question}
       required={elementInstance.isRequired}
       description={elementInstance.description}
     />
   ),
-  formComponent: NumberField,
+  // eslint-disable-next-line react/display-name
+  formComponent: forwardRef<HTMLInputElement, InputProps>(
+    ({ onChange, value, ...restProps }, ref) => {
+      const handleInputChange = (
+        event: React.ChangeEvent<HTMLInputElement>
+      ) => {
+        const inputValue = Number.isNaN(parseFloat(event.target.value))
+          ? event.target.value
+          : parseFloat(event.target.value);
+        onChange?.(
+          inputValue as unknown as React.ChangeEvent<HTMLInputElement>
+        );
+      };
+
+      return (
+        <Input
+          {...restProps}
+          ref={ref}
+          type="number"
+          onChange={handleInputChange}
+          defaultValue={Number(value?.toString())}
+        />
+      );
+    }
+  ),
   //propertiesComponent: TextValidationForm,
   construct: (Id: string, pageNumber: number, id?: number) => {
     return {
@@ -43,11 +69,10 @@ export const NumberFieldFormElement: FormElement = {
     icon: MdNumbers,
     label: 'Number Field',
   },
-  schemaObjects: schemaObjects,
+  schemaObjects: (element: FormElementInstance) => {
+    return {
+      type: 'number',
+    };
+  },
   shouldValidate: true,
 };
-function schemaObjects(element: FormElementInstance) {
-  return {
-    type: 'number',
-  };
-}
diff --git a/components/forms/fields/phone-field-element.tsx b/components/forms/fields/phone-field-element.tsx
index 15af6c3a..19b89118 100644
--- a/components/forms/fields/phone-field-element.tsx
+++ b/components/forms/fields/phone-field-element.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { MdPhone } from 'react-icons/md';
 
 import type {
@@ -5,7 +6,7 @@ import type {
   FormElement,
   FormElementInstance,
 } from '~/components/forms/interfaces/form-elements';
-import PhoneField from '~/components/inputs/telephone';
+import { Input, type InputProps } from '~/components/inputs';
 
 //import TextValidationForm from './InputBasedForm';
 
@@ -18,15 +19,38 @@ export const PhoneFieldFormElement: FormElement = {
   }: {
     elementInstance: FormElementInstance;
   }) => (
-    <PhoneField
-      className="w-full"
+    <Input
+      id={elementInstance.Id}
+      type="tel"
       readOnly
       label={elementInstance.question}
       required={elementInstance.isRequired}
       description={elementInstance.description}
     />
   ),
-  formComponent: PhoneField,
+  // eslint-disable-next-line react/display-name
+  formComponent: forwardRef<HTMLInputElement, InputProps>(
+    ({ onChange, ...props }, ref) => {
+      const handleInputChange = (
+        event: React.ChangeEvent<HTMLInputElement>
+      ) => {
+        const inputValue = event.target.value.replace(/\D/g, '');
+        const truncatedValue = inputValue.slice(0, 10);
+        event.target.value = truncatedValue;
+        onChange?.(event);
+      };
+
+      return (
+        <Input
+          {...props}
+          ref={ref}
+          type="tel"
+          maxLength={10}
+          onChange={handleInputChange}
+        />
+      );
+    }
+  ),
   //propertiesComponent: TextValidationForm,
   construct: (Id: string, pageNumber: number, id?: number) => {
     return {
diff --git a/components/forms/fields/text-field-element.tsx b/components/forms/fields/text-field-element.tsx
index a690c63c..505b857d 100644
--- a/components/forms/fields/text-field-element.tsx
+++ b/components/forms/fields/text-field-element.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { MdTextFields } from 'react-icons/md';
 
 import type {
@@ -5,7 +6,7 @@ import type {
   FormElement,
   FormElementInstance,
 } from '~/components/forms/interfaces/form-elements';
-import TextField from '~/components/inputs/text';
+import { Input, type InputProps } from '~/components/inputs';
 
 //import TextValidationForm from './InputBasedForm';
 
@@ -18,15 +19,18 @@ export const TextFieldFormElement: FormElement = {
   }: {
     elementInstance: FormElementInstance;
   }) => (
-    <TextField
-      className="w-full"
+    <Input
+      id={elementInstance.Id}
       readOnly
       label={elementInstance.question}
       required={elementInstance.isRequired}
       description={elementInstance.description}
     />
   ),
-  formComponent: TextField,
+  // eslint-disable-next-line react/display-name
+  formComponent: forwardRef<HTMLInputElement, InputProps>(
+    ({ ...restProps }, ref) => <Input {...restProps} ref={ref} type="text" />
+  ),
   //propertiesComponent: TextValidationForm,
   construct: (Id: string, pageNumber: number, id?: number) => {
     return {
diff --git a/components/forms/fields/time-field-element.tsx b/components/forms/fields/time-field-element.tsx
index 8b1bb700..25ea62f8 100644
--- a/components/forms/fields/time-field-element.tsx
+++ b/components/forms/fields/time-field-element.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { MdMoreTime } from 'react-icons/md';
 
 import type {
@@ -5,7 +6,7 @@ import type {
   FormElement,
   FormElementInstance,
 } from '~/components/forms/interfaces/form-elements';
-import TimeField from '~/components/inputs/time';
+import { Input, type InputProps } from '~/components/inputs';
 
 //import TimeBasedForm from './TimeBasedForm';
 
@@ -18,15 +19,22 @@ export const TimeFieldFormElement: FormElement = {
   }: {
     elementInstance: FormElementInstance;
   }) => (
-    <TimeField
-      className="w-full"
+    <Input
+      id={elementInstance.Id}
+      type="time"
       readOnly
       label={elementInstance.question}
       required={elementInstance.isRequired}
       description={elementInstance.description}
     />
   ),
-  formComponent: TimeField,
+  // eslint-disable-next-line react/display-name
+  formComponent: forwardRef<HTMLInputElement, InputProps>(
+    ({ ...restProps }, ref) => {
+      return <Input {...restProps} ref={ref} step={1} type="time" />;
+    }
+  ),
+
   //propertiesComponent: TimeBasedForm,
   construct: (Id: string, pageNumber: number, id?: number) => {
     return {
diff --git a/components/forms/form-submit-form.tsx b/components/forms/form-submit-form.tsx
index ea38c86f..b4c6e076 100644
--- a/components/forms/form-submit-form.tsx
+++ b/components/forms/form-submit-form.tsx
@@ -111,8 +111,9 @@ export default function FormSubmitForm({
                     <FormControl>
                       <Element
                         {...field}
+                        id={question.id}
                         label={question.question}
-                        required={false}
+                        required={question.required}
                         description={question.description ?? ''}
                         items={question.items ?? []}
                       />
diff --git a/components/forms/interfaces/form-elements.tsx b/components/forms/interfaces/form-elements.tsx
index 64d37ed3..af1a7ccb 100644
--- a/components/forms/interfaces/form-elements.tsx
+++ b/components/forms/interfaces/form-elements.tsx
@@ -6,8 +6,9 @@ import type {
 
 import { type MultiListProps } from '~/components/inputs/multiSelectItem';
 import { type ListProps } from '~/components/inputs/radioItems';
-import { type InputProps } from '~/components/ui/input';
+import { type InputProps } from '~/components/inputs';
 
+import { CheckBoxFieldFormElement } from '../fields/checkbox-field-element';
 import { DateFieldFormElement } from '../fields/date-field-element';
 import { DateTimeFieldFormElement } from '../fields/date-time-field-element';
 import { EmailFieldFormElement } from '../fields/email-field-element';
@@ -31,7 +32,8 @@ export type ElementsType =
   | 'DateTimeField'
   | 'NumberField'
   | 'TextAreaField'
-  | 'MultiSelectField';
+  | 'MultiSelectField'
+  | 'CheckBoxField';
 
 export interface validationProperty {
   type: string;
@@ -105,4 +107,5 @@ export const FormElements: FormElementsType = {
   NumberField: NumberFieldFormElement,
   TextAreaField: TextAreaFieldFormElement,
   MultiSelectField: MultiSelectFormElement,
+  CheckBoxField: CheckBoxFieldFormElement,
 };
diff --git a/components/forms/temp-create.tsx b/components/forms/temp-create.tsx
index c5befc53..a19089d1 100644
--- a/components/forms/temp-create.tsx
+++ b/components/forms/temp-create.tsx
@@ -24,12 +24,21 @@ const Tempcreate = () => {
         Id: '6115',
         question: 'Multi Select Field',
         inputType: 'MultiSelectField' as ElementsType,
-        isRequired: false,
+        isRequired: true,
         pageNumber: 0,
         marks: 0,
         description: '',
         choices: ['first choice', 'second choice', 'third great choice'],
       },
+      {
+        Id: '6315',
+        question: 'Check Field',
+        inputType: 'CheckBoxField' as ElementsType,
+        isRequired: true,
+        pageNumber: 0,
+        marks: 0,
+        description: '',
+      },
       {
         Id: '7224',
         question: 'Number Field',
diff --git a/components/inputs/Checkbox.tsx b/components/inputs/Checkbox.tsx
deleted file mode 100644
index dd98bc55..00000000
--- a/components/inputs/Checkbox.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client';
-
-import { Checkbox } from '~/components/ui/checkbox';
-
-import { Label } from '../ui/label';
-import { type GenericProps } from './radioItems';
-
-interface CheckboxProps extends GenericProps {
-  defaultChecked?: boolean;
-  onChange?: (value: boolean) => void;
-  value?: boolean;
-}
-const CheckboxGeneric = ({ ...props }: CheckboxProps) => {
-  return (
-    <div className={props.className}>
-      <Label className="text-neutral-500" htmlFor={props.name}>
-        {props.label ? props.label : 'Checkbox'}
-      </Label>
-      {props.required && <span className="text-primary-700">*</span>}
-      <div className="flex flex-row items-center space-x-2 space-y-0">
-        <Checkbox
-          disabled={props.disabled}
-          required={props.required}
-          defaultChecked={props.defaultChecked}
-          onCheckedChange={props.onChange}
-        />
-        <Label className="text-md font-medium" htmlFor={props.name}>
-          {props.name}
-        </Label>
-      </div>
-      <p className="block text-[0.8rem] text-primary-500 marker:text-neutral-500 ">
-        {props.errorMsg}
-      </p>
-    </div>
-  );
-};
-
-export default CheckboxGeneric;
diff --git a/components/inputs/Visualizer.tsx b/components/inputs/Visualizer.tsx
deleted file mode 100644
index 6232e918..00000000
--- a/components/inputs/Visualizer.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import * as z from 'zod';
-
-import { Button } from '../ui/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '../ui/form';
-import CheckboxGeneric from './Checkbox';
-import DateField from './date';
-import DateTimeField from './date-time';
-import EmailField from './email';
-import FileUpload from './fileUpload';
-import MultiSelectDropdown from './multiSelectItem';
-import NumberField from './numberfield';
-import RadioGeneric from './radioItems';
-import SelectDropdown from './selectIItem';
-import PhoneField from './telephone';
-import TextField from './text';
-import TextAreaGeneric from './textAreaField';
-import TimeField from './time';
-
-export default function Visualizer() {
-  const schema = z.object({
-    email: z.string().email('Invalid email address'),
-    name: z.string().min(3, 'Name must be at least 3 characters long'),
-    phone: z.coerce.number(),
-    number: z.coerce.number(),
-    textarea: z.string(),
-    file: z.any(),
-    checkbox: z.boolean(),
-    dateTime: z.string(),
-    date: z.string(),
-    time: z.string(),
-    select: z.string(),
-    radio: z.string(),
-    multiselect: z.string().array(),
-  });
-  const form = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
-  });
-
-  const items = ['item1', 'item2', 'item3', 'item4', 'item5'];
-
-  const onSubmit = (values: z.infer<typeof schema>) => {
-    try {
-      console.log('Form data:', values);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="ml-80 w-80 space-y-6"
-      >
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <EmailField {...field} required />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <TextField
-                  {...field}
-                  required
-                  placeholder="beat"
-                  description="something in the way"
-                  errorMsg="peepeepoopoo"
-                  disabled
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="textarea"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <TextAreaGeneric {...field} required disabled />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="number"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <NumberField {...field} required />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="phone"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <PhoneField {...field} required />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="date"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <DateField {...field} required disabled />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="file"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <FileUpload {...field} required disabled />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="checkbox"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <CheckboxGeneric
-                  description="" // Combine description within label
-                  required={true}
-                  {...field}
-                  disabled
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="dateTime"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <DateTimeField
-                  description="Enter a time asdasd"
-                  {...field}
-                  required
-                  disabled
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="time"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <TimeField description="Enter a time" {...field} required />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="select"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <SelectDropdown items={items} {...field} required disabled />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="radio"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <RadioGeneric items={items} {...field} disabled />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="multiselect"
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <MultiSelectDropdown
-                  items={items}
-                  {...field}
-                  required
-                  placeholder="Enter or Select values"
-                  disabled
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit" className="bg-primary-500 hover:bg-primary-700">
-          Submit
-        </Button>
-      </form>
-    </Form>
-  );
-}
diff --git a/components/inputs/date-time.tsx b/components/inputs/date-time.tsx
deleted file mode 100644
index f3d9b599..00000000
--- a/components/inputs/date-time.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { FaRegCalendarAlt } from 'react-icons/fa';
-
-import { Input, type InputProps } from '../ui/input';
-
-const DateTimeField = forwardRef<HTMLInputElement, InputProps>(
-  (
-    { label = 'Date & Time', placeholder = 'Enter Date & Time', ...props },
-    ref
-  ) => {
-    return (
-      <Input
-        ref={ref}
-        className=""
-        type="datetime-local"
-        max="9999-12-31T23:59"
-        placeholder={placeholder}
-        label={label}
-        disabled={props.disabled}
-        LeftChild={FaRegCalendarAlt}
-        defaultValue={(props.value as string)?.slice(0, -4)}
-        onChange={(event) => {
-          props.onChange?.({
-            target: { value: event.target.value + ':00Z' },
-          } as React.ChangeEvent<HTMLInputElement>);
-        }}
-      />
-    );
-  }
-);
-DateTimeField.displayName = 'DateTimeField';
-
-export default DateTimeField;
diff --git a/components/inputs/date.tsx b/components/inputs/date.tsx
deleted file mode 100644
index 4f43ad9a..00000000
--- a/components/inputs/date.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-import { MdOutlineDateRange } from 'react-icons/md';
-import { forwardRef } from 'react';
-
-import { Input, type InputProps } from '../ui/input';
-
-const DateField = forwardRef<HTMLInputElement, InputProps>(function DateField(
-  {
-    label = 'Date',
-    placeholder = 'Enter your Date',
-    LeftChild = MdOutlineDateRange,
-    ...props
-  }: InputProps,
-  ref
-) {
-  return (
-    <Input
-      ref={ref}
-      label={label}
-      placeholder={placeholder}
-      className="placeholder:text-neutral-500"
-      type="date"
-      max="9999-12-31"
-      LeftChild={LeftChild}
-      {...props}
-    />
-  );
-});
-
-DateField.displayName = 'DateField';
-
-export default DateField;
diff --git a/components/inputs/email.tsx b/components/inputs/email.tsx
deleted file mode 100644
index 360abbb7..00000000
--- a/components/inputs/email.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client';
-import { MdOutlineEmail } from 'react-icons/md';
-import { forwardRef } from 'react';
-
-import { Input, type InputProps } from '../ui/input';
-
-const EmailField = forwardRef<HTMLInputElement, InputProps>(function EmailField(
-  {
-    label = 'Email',
-    placeholder = 'Enter your Email',
-    LeftChild = MdOutlineEmail,
-    ...props
-  }: InputProps,
-  ref
-) {
-  return (
-    <Input
-      ref={ref}
-      label={label}
-      placeholder={placeholder}
-      type="email"
-      LeftChild={LeftChild}
-      {...props}
-    />
-  );
-});
-
-EmailField.displayName = 'EmailField';
-
-export default EmailField;
diff --git a/components/inputs/index.ts b/components/inputs/index.ts
new file mode 100644
index 00000000..e3365cb9
--- /dev/null
+++ b/components/inputs/index.ts
@@ -0,0 +1 @@
+export * from './input';
diff --git a/components/inputs/input.tsx b/components/inputs/input.tsx
new file mode 100644
index 00000000..9ff00065
--- /dev/null
+++ b/components/inputs/input.tsx
@@ -0,0 +1,183 @@
+'use client';
+
+import { forwardRef, useEffect, useState } from 'react';
+import { FaExclamationCircle } from 'react-icons/fa';
+
+import { Label } from '~/components/ui';
+import { cn, getKeys } from '~/lib/utils';
+
+export type ValidityStateWithError = {
+  [K in keyof ValidityStateFlags]: (input: HTMLInputElement) => string;
+};
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  customValidator?: () => ValidityStateWithError;
+  description?: string;
+  id: string;
+  label?: string;
+  reserveSpaceForError?: boolean;
+  showError?: boolean;
+}
+
+const defaultErrors: ValidityStateWithError = {
+  // These attributes are in order of error priority
+  valueMissing: () => 'Please fill out this field.',
+  typeMismatch: (input) => `Please enter a valid ${input.type}.`,
+  patternMismatch: () => 'Please match the requested format.',
+  tooShort: (input) =>
+    `Please use at least ${input.minLength} character(s) (currently using ${input.value.length} character(s)).`,
+  tooLong: (input) =>
+    `Please shorten this text to ${input.maxLength} character(s) or less (currently using ${input.value.length} character(s)).`,
+  rangeUnderflow: (input) =>
+    `Please select a value that is no less than ${input.min}.`,
+  rangeOverflow: (input) =>
+    `Please select a value that is no more than ${input.max}.`,
+  stepMismatch: ({ valueAsNumber, step }) => {
+    const nearest_lower = valueAsNumber - (valueAsNumber % Number(step));
+    const nearest_upper = nearest_lower + Number(step);
+    return `Please select a valid value. The two nearest valid values are ${nearest_lower} and ${nearest_upper}.`;
+  },
+  badInput: () => 'Please enter a valid value.',
+};
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      customValidator = () => ({}) as ValidityStateWithError,
+      description,
+      label,
+      onBlur,
+      onChange,
+      reserveSpaceForError = false,
+      showError = true,
+      type,
+      ...props
+    },
+    ref
+  ) => {
+    const [errorMessage, setErrorMessage] = useState<string>();
+    const [focusedOnce, setFocusedOnce] = useState(false);
+
+    useEffect(() => {
+      const input = document.getElementById(props.id) as HTMLInputElement;
+      validate(input, customValidator);
+    }, []);
+
+    return (
+      <>
+        <fieldset
+          className={cn(
+            'space-y-2',
+            (type === 'checkbox' || type === 'radio' || type === 'range') &&
+              'inline-flex space-x-2 space-y-1'
+          )}
+        >
+          {label &&
+            type !== 'checkbox' &&
+            type !== 'radio' &&
+            type !== 'range' && (
+              <Label
+                disabled={Boolean(props.disabled)}
+                htmlFor={props.id}
+                required={Boolean(props.required)}
+              >
+                {label}
+              </Label>
+            )}
+          {description && (
+            <small className="!mt-0 block text-neutral-700">
+              {description}
+            </small>
+          )}
+          <input
+            aria-errormessage={
+              showError &&
+              props['aria-invalid'] &&
+              props['aria-invalid'] !== 'false'
+                ? `${props.id}-error`
+                : undefined
+            }
+            className={cn(
+              'peer flex w-full rounded-lg px-3 py-2 text-xs sm:text-sm',
+              'border border-secondary-700 bg-neutral-50 placeholder:text-neutral-400',
+              'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-700',
+              'disabled:cursor-not-allowed disabled:border-neutral-300 disabled:bg-neutral-100',
+              'file:border-0 file:bg-transparent file:text-sm file:font-medium',
+              focusedOnce &&
+                'invalid:border-primary-500 invalid:focus-visible:ring-primary-500',
+              (type === 'checkbox' || type === 'radio') &&
+                'h-4 w-4 shrink-0 appearance-none rounded-sm border border-primary-500 bg-shade-light checked:border-0 checked:bg-primary-500', //incomplete
+              className
+            )}
+            onBlur={(event) => {
+              if (!focusedOnce) setFocusedOnce(true);
+              onBlur && onBlur(event);
+            }}
+            onChange={(event) => {
+              if (!event.isDefaultPrevented()) {
+                validate(event.target, customValidator);
+              }
+              onChange && onChange(event);
+            }}
+            onInvalid={(event) => {
+              setErrorMessage(event.currentTarget.validationMessage);
+            }}
+            ref={ref}
+            type={type}
+            {...props}
+          />
+          {(type === 'checkbox' || type === 'radio' || type === 'range') &&
+            label && (
+              <Label
+                disabled={Boolean(props.disabled)}
+                htmlFor={props.id}
+                required={Boolean(props.required)}
+              >
+                {label}
+              </Label>
+            )}
+        </fieldset>
+        {showError && (
+          <p
+            className={cn(
+              'flex items-center gap-2 text-sm text-primary-500 sm:text-base',
+              reserveSpaceForError
+                ? cn('invisible', focusedOnce && 'peer-invalid:visible')
+                : cn('hidden', focusedOnce && 'peer-invalid:flex')
+            )}
+            id={`${props.id}-error`}
+          >
+            <FaExclamationCircle />
+            {errorMessage ?? 'Unrendered text to reserve line height'}
+          </p>
+        )}
+      </>
+    );
+  }
+);
+Input.displayName = 'Input';
+
+const validate = (
+  input: HTMLInputElement,
+  customValidator: () => ValidityStateWithError
+) => {
+  let error: string | undefined;
+  const validityState = input.validity;
+  const customValidity = customValidator();
+
+  if (!validityState.valid) {
+    getKeys(defaultErrors).forEach((state) => {
+      if (error ?? !validityState[state]) return;
+      const errorCallback = customValidity[state] ?? defaultErrors[state];
+      if (!errorCallback) return;
+      error = errorCallback(input);
+    });
+  }
+
+  input.setCustomValidity(error ?? '');
+  return input.checkValidity();
+};
+
+export { Input };
diff --git a/components/inputs/multiSelectItem.tsx b/components/inputs/multiSelectItem.tsx
index 27410159..9a5f0cd8 100644
--- a/components/inputs/multiSelectItem.tsx
+++ b/components/inputs/multiSelectItem.tsx
@@ -15,10 +15,14 @@ const MultiSelectDropdown: ForwardRefExoticComponent<MultiListProps> =
   forwardRef<MultipleSelectorRef, MultiListProps>((props, ref) => {
     return (
       <div className={props.className}>
-        <Label className="text-neutral-500" htmlFor={props.name}>
+        <Label
+          className="text-neutral-500"
+          htmlFor={props.name}
+          required={props.required ?? false}
+          disabled={props.disabled ?? false}
+        >
           {props.label ? props.label : 'Select'}
         </Label>
-        {props.required && <span className="text-primary-700">*</span>}
         {props.description && (
           <p className="block text-[0.8rem] text-neutral-500">
             {props.description}
diff --git a/components/inputs/numberfield.tsx b/components/inputs/numberfield.tsx
deleted file mode 100644
index d6cbe94a..00000000
--- a/components/inputs/numberfield.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { AiOutlineNumber } from 'react-icons/ai';
-
-import { Input, type InputProps } from '../ui/input';
-
-const NumberField = forwardRef<HTMLInputElement, InputProps>(
-  ({ label = 'Number', placeholder = 'Enter a Number', ...props }, ref) => {
-    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const inputValue = event.target.value.replace(/[^\d.-]/g, '');
-      event.target.value = inputValue;
-      props.onChange?.(
-        Number(inputValue) as unknown as React.ChangeEvent<HTMLInputElement>
-      );
-    };
-
-    return (
-      <Input
-        ref={ref}
-        type="number"
-        placeholder={placeholder}
-        label={label}
-        LeftChild={AiOutlineNumber}
-        defaultValue={props.value?.toString()}
-        onChange={handleInputChange}
-      />
-    );
-  }
-);
-NumberField.displayName = 'NumberField';
-
-export default NumberField;
diff --git a/components/inputs/radioItems.tsx b/components/inputs/radioItems.tsx
index a6c57df3..7f7b3141 100644
--- a/components/inputs/radioItems.tsx
+++ b/components/inputs/radioItems.tsx
@@ -22,10 +22,13 @@ export interface ListProps extends GenericProps {
 const RadioGeneric = ({ items, ...props }: ListProps) => {
   return (
     <div className={props.className}>
-      <Label className="text-neutral-500">
+      <Label
+        className="text-neutral-500"
+        required={props.required ?? false}
+        disabled={props.disabled ?? false}
+      >
         {props.label ? props.label : 'Radio Group'}
       </Label>
-      {props.required && <span className="text-primary-700">*</span>}
       <RadioGroup
         defaultValue={props.value}
         disabled={props.disabled}
@@ -36,7 +39,13 @@ const RadioGeneric = ({ items, ...props }: ListProps) => {
         {items.map((item) => (
           <div key={item} className="flex items-center space-x-2">
             <RadioGroupItem value={item} required={props.required} />
-            <Label className="text-md">{item}</Label>
+            <Label
+              className="text-md"
+              disabled={props.disabled ?? false}
+              required={false}
+            >
+              {item}
+            </Label>
           </div>
         ))}
       </RadioGroup>
diff --git a/components/inputs/selectIItem.tsx b/components/inputs/selectIItem.tsx
index 7b51e006..34e579ba 100644
--- a/components/inputs/selectIItem.tsx
+++ b/components/inputs/selectIItem.tsx
@@ -19,10 +19,14 @@ interface ListProps extends GenericProps {
 const SelectDropdown = ({ items, ...props }: ListProps) => {
   return (
     <div className={props.className}>
-      <Label className="text-neutral-500" htmlFor={props.name}>
+      <Label
+        className="text-neutral-500"
+        htmlFor={props.name}
+        disabled={props.disabled ?? false}
+        required={props.required ?? false}
+      >
         {props.label ? props.label : 'Select'}
       </Label>
-      {props.required && <span className="text-primary-700">*</span>}
       {props.description && (
         <p className="block text-[0.8rem] text-neutral-500">
           {props.description}
diff --git a/components/inputs/telephone.tsx b/components/inputs/telephone.tsx
deleted file mode 100644
index acb5931b..00000000
--- a/components/inputs/telephone.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { AiOutlinePhone } from 'react-icons/ai';
-
-import { Input, type InputProps } from '../ui/input';
-
-const PhoneField = forwardRef<HTMLInputElement, InputProps>(
-  ({ label = 'Phone', placeholder = 'Enter your Number', ...props }, ref) => {
-    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const inputValue = event.target.value.replace(/\D/g, '');
-      const truncatedValue = inputValue.slice(0, 10);
-      event.target.value = truncatedValue;
-      props.onChange?.(event);
-    };
-
-    return (
-      <Input
-        ref={ref}
-        type="tel"
-        placeholder={placeholder}
-        label={label}
-        LeftChild={AiOutlinePhone}
-        maxLength={10}
-        {...props}
-        onChange={handleInputChange}
-      />
-    );
-  }
-);
-PhoneField.displayName = 'PhoneField';
-
-export default PhoneField;
diff --git a/components/inputs/text.tsx b/components/inputs/text.tsx
deleted file mode 100644
index 53edf035..00000000
--- a/components/inputs/text.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client';
-
-import { PiTextT } from 'react-icons/pi';
-import { forwardRef } from 'react';
-
-import { Input, type InputProps } from '../ui/input';
-
-const TextField = forwardRef<HTMLInputElement, InputProps>(function TextField(
-  {
-    label = 'Text',
-    placeholder = 'Enter your text',
-    LeftChild = PiTextT,
-    ...props
-  },
-  ref
-) {
-  return (
-    <Input
-      ref={ref}
-      type="text"
-      placeholder={placeholder}
-      label={label}
-      LeftChild={LeftChild}
-      {...props}
-    />
-  );
-});
-
-TextField.displayName = 'TextField';
-
-export default TextField; // Export the component
diff --git a/components/inputs/textAreaField.tsx b/components/inputs/textAreaField.tsx
index 1e4404e8..8dab72da 100644
--- a/components/inputs/textAreaField.tsx
+++ b/components/inputs/textAreaField.tsx
@@ -20,10 +20,14 @@ const TextAreaGeneric = React.forwardRef<HTMLTextAreaElement, TextFieldProps>(
   ) => {
     return (
       <div className={props.className}>
-        <Label className="text-neutral-500" htmlFor={props.name}>
+        <Label
+          className="text-neutral-500"
+          htmlFor={props.name}
+          disabled={props.disabled ?? false}
+          required={props.required ?? false}
+        >
           {label}
         </Label>
-        {props.required && <span className="text-primary-700">*</span>}
         {props.description && (
           <p className="block text-[0.8rem] text-neutral-500">
             {props.description}
diff --git a/components/inputs/time.tsx b/components/inputs/time.tsx
deleted file mode 100644
index d70e3deb..00000000
--- a/components/inputs/time.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { AiOutlineClockCircle } from 'react-icons/ai';
-
-import { Input, type InputProps } from '../ui/input';
-
-const TimeField = forwardRef<HTMLInputElement, InputProps>(
-  ({ label = 'Time', placeholder = 'Enter time', ...props }, ref) => {
-    return (
-      <Input
-        ref={ref}
-        className="pr-2"
-        type="time"
-        placeholder={placeholder}
-        label={label}
-        step={1}
-        LeftChild={AiOutlineClockCircle}
-        {...props}
-      />
-    );
-  }
-);
-TimeField.displayName = 'TimeField';
-
-export default TimeField;
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
index f11cf5c2..49c5c47d 100644
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -86,7 +86,10 @@ FormItem.displayName = 'FormItem';
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    disabled: boolean;
+    required: boolean;
+  }
 >(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
diff --git a/components/ui/index.ts b/components/ui/index.ts
index 7ac536fd..bed6de6d 100644
--- a/components/ui/index.ts
+++ b/components/ui/index.ts
@@ -1,4 +1,5 @@
 export * from './button';
 export * from './carousel';
 export * from './hamburger-button';
+export * from './label';
 export * from './scroll-area';
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 6b40367d..2d7e1c21 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -58,10 +58,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <div className={className}>
-        <Label className="text-neutral-500" htmlFor={name}>
+        <Label
+          className="text-neutral-500"
+          htmlFor={name}
+          disabled={props.disabled ?? false}
+          required={required}
+        >
           {label}
         </Label>
-        {required && <span className="text-primary-700">*</span>}
         {description && (
           <p className="block text-[0.8rem] text-neutral-500">{description}</p>
         )}
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index 91476816..5f73f51b 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -1,25 +1,33 @@
 'use client';
 
-import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 import { cn } from '~/lib/utils';
 
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-);
-
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    disabled: boolean;
+    required: boolean;
+  }
+>(({ className, disabled, required, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
-    className={cn(labelVariants(), className)}
+    className={cn(
+      'font-medium leading-none text-neutral-700',
+      disabled && 'cursor-not-allowed text-neutral-300',
+      className
+    )}
     {...props}
-  />
+  >
+    {props.children}
+    {required && (
+      <span className={cn('text-primary-700', disabled && 'text-neutral-300')}>
+        &nbsp;*
+      </span>
+    )}
+  </LabelPrimitive.Root>
 ));
 Label.displayName = LabelPrimitive.Root.displayName;