From 14fa867cd52a627dc4c694460c471a5684c1f53a Mon Sep 17 00:00:00 2001
From: odapX <yahya.benzha1@gmail.com>
Date: Fri, 5 Apr 2024 22:52:45 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20migrate=20form=20to=20ui?=
 =?UTF-8?q?=20package?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BlablaFormEditor/FieldsInput.tsx          |  66 +-
 .../components/BlablaFormEditor/index.tsx     |  85 ---
 .../dashboard/components/BlablaFormViewer.tsx | 156 +----
 apps/dashboard/components/ChatBox.tsx         |  19 +-
 apps/dashboard/components/FileUploader.tsx    |   5 +-
 apps/dashboard/components/TraditionalForm.tsx | 563 -----------------
 .../components/TraditionalFormWrapper.tsx     |  37 ++
 apps/dashboard/pages/forms/index.tsx          |  13 +-
 packages/lib/accepted-mime-types.ts           |   7 +
 packages/lib/forms/templates.ts               | 159 ++++-
 packages/lib/types/dtos.ts                    |   7 +-
 packages/ui/package.json                      |   1 +
 .../ui/src}/FileUploaderDropZone.tsx          |   8 +-
 packages/ui/src/TraditionalForm.tsx           | 285 +++++++++
 .../ui/src}/VisuallyHiddenInput.tsx           |   0
 packages/ui/src/hooks/useFileUpload.ts        |  93 +++
 packages/ui/src/types/form.ts                 |  23 +
 packages/ui/src/utils/fieldTypesMap.tsx       | 224 +++++++
 pnpm-lock.yaml                                | 582 +++++++++++++-----
 19 files changed, 1288 insertions(+), 1045 deletions(-)
 delete mode 100644 apps/dashboard/components/TraditionalForm.tsx
 create mode 100644 apps/dashboard/components/TraditionalFormWrapper.tsx
 rename {apps/dashboard/components => packages/ui/src}/FileUploaderDropZone.tsx (93%)
 create mode 100644 packages/ui/src/TraditionalForm.tsx
 rename {apps/dashboard/components => packages/ui/src}/VisuallyHiddenInput.tsx (100%)
 create mode 100644 packages/ui/src/hooks/useFileUpload.ts
 create mode 100644 packages/ui/src/types/form.ts
 create mode 100644 packages/ui/src/utils/fieldTypesMap.tsx

diff --git a/apps/dashboard/components/BlablaFormEditor/FieldsInput.tsx b/apps/dashboard/components/BlablaFormEditor/FieldsInput.tsx
index f2d2f8379..5f01d179e 100644
--- a/apps/dashboard/components/BlablaFormEditor/FieldsInput.tsx
+++ b/apps/dashboard/components/BlablaFormEditor/FieldsInput.tsx
@@ -30,9 +30,9 @@ import {
 
 import { CreateFormSchema } from '@chaindesk/lib/types/dtos';
 import Input from '@chaindesk/ui/Input';
+import { FieldType } from '@chaindesk/ui/types/form';
 
 import { SortableList } from '../dnd/SortableList';
-import { FieldType } from '../TraditionalForm';
 
 import { forceSubmit } from './utils';
 
@@ -45,6 +45,7 @@ const fieldTypes = [
   'email',
   'phoneNumber',
   'text',
+  'number',
   'textArea',
   'select',
   'file',
@@ -313,69 +314,6 @@ function FieldsInput({ type = 'traditional' }: Props) {
           )}
         />
       )}
-      {type == formType.conversational &&
-        fieldsValues?.map((field, index) => (
-          <div key={index}>
-            <Stack
-              sx={{ width: '100%' }}
-              direction="row"
-              gap={1}
-              alignItems={'start'}
-            >
-              <Controller
-                name={`draftConfig.fields.${index}.type` as const}
-                render={({
-                  field: { onChange, onBlur, value, name, ref },
-                  fieldState: { invalid, isTouched, isDirty, error },
-                  formState,
-                }) => (
-                  <Select
-                    size="sm"
-                    value={value}
-                    onChange={(_, value) => {
-                      onChange(value);
-                      forceSubmit();
-                    }}
-                    sx={{ minWidth: '80px' }}
-                  >
-                    <Option value="text">text</Option>
-                    <Option value="multiple_choice">mutliple choice</Option>
-                  </Select>
-                )}
-              ></Controller>
-              <Input
-                control={methods.control}
-                sx={{ width: '100%' }}
-                size="sm"
-                key={field.id}
-                defaultValue={field.name}
-                placeholder="e.g. email"
-                {...methods.register(
-                  `draftConfig.fields.${index}.name` as const
-                )}
-                endDecorator={
-                  <IconButton
-                    onClick={() => {
-                      remove(index);
-                      forceSubmit();
-                    }}
-                  >
-                    <CloseIcon fontSize="sm" />
-                  </IconButton>
-                }
-              />
-            </Stack>
-
-            {fieldsValues?.[index]?.type === 'multiple_choice' && (
-              <Stack sx={{ ml: 'auto' }}>
-                <Choices<CreateFormSchema>
-                  actionLabel="Add Choice"
-                  name={`draftConfig.fields.${index}.choices` as any}
-                />
-              </Stack>
-            )}
-          </div>
-        ))}
 
       <Button
         size="sm"
diff --git a/apps/dashboard/components/BlablaFormEditor/index.tsx b/apps/dashboard/components/BlablaFormEditor/index.tsx
index e650f1283..5cba617c6 100644
--- a/apps/dashboard/components/BlablaFormEditor/index.tsx
+++ b/apps/dashboard/components/BlablaFormEditor/index.tsx
@@ -144,78 +144,6 @@ function Form({ formId }: Props) {
               transition: 'all 0.2s ease',
             }}
           >
-            {/* <Accordion
-              expanded={state.currentAccordionIndex === 0}
-              onChange={(event, expanded) => {
-                setState({
-                  currentAccordionIndex: expanded ? 0 : null,
-                });
-              }}
-            >
-              <AccordionSummary>
-                <Typography startDecorator={<LooksOneRoundedIcon />}>
-                  Overview
-                </Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <Stack spacing={1}>
-                  <FormControl>
-                    <FormLabel>Form Type</FormLabel>
-                    <Select
-                      defaultValue={getFormData.data?.type}
-                      {...methods.register('type')}
-                      onChange={(_, value) => {
-                        if (value) {
-                          methods.setValue('type', value as any);
-                          // Retrocompatibility
-                          const fields: CreateFormSchema['draftConfig']['fields'] =
-                            draftConfig?.fields.map((field) => {
-                              if (
-                                field.type === 'multiple_choice' &&
-                                value == 'traditional'
-                              ) {
-                                return {
-                                  ...field,
-                                  type: 'select',
-                                  options: field.choices,
-                                };
-                              } else if (
-                                field.type === 'select' &&
-                                value == 'conversational'
-                              ) {
-                                return {
-                                  ...field,
-                                  type: 'multiple_choice',
-                                  choices: field.options,
-                                };
-                              }
-                              return { ...field, type: 'text' };
-                            });
-
-                          if (fields?.length > 0) {
-                            methods.setValue('draftConfig.fields', fields);
-                          }
-
-                          forceSubmit();
-                        }
-                      }}
-                    >
-                      <Option value="conversational">Conversational</Option>
-                      <Option value="traditional">Traditional</Option>
-                    </Select>
-                  </FormControl>
-                  <FormControl>
-                    <FormLabel>Overview</FormLabel>
-                    <Textarea
-                      minRows={4}
-                      // maxRows={4}
-                      {...methods.register('draftConfig.overview')}
-                    />
-                  </FormControl>
-                </Stack>
-              </AccordionDetails>
-            </Accordion> */}
-
             <Accordion
               expanded={state.currentAccordionIndex === 0}
               onChange={(event, expanded) => {
@@ -248,18 +176,6 @@ function Form({ formId }: Props) {
                       )}
                     />
                   </FormControl>
-
-                  {type === 'conversational' && (
-                    <FormControl>
-                      <FormLabel>Call to action</FormLabel>
-                      <Input
-                        control={methods.control}
-                        {...methods.register(
-                          'draftConfig.startScreen.cta.label'
-                        )}
-                      />
-                    </FormControl>
-                  )}
                 </Stack>
               </AccordionDetails>
             </Accordion>
@@ -466,7 +382,6 @@ function Form({ formId }: Props) {
                 webhook: draftConfig?.webhook,
                 schema: (query.data?.draftConfig as any)?.schema,
               }}
-              isInEditor
             />
           </Stack>
         </Stack>
diff --git a/apps/dashboard/components/BlablaFormViewer.tsx b/apps/dashboard/components/BlablaFormViewer.tsx
index 8b5d836a9..80ba7890d 100644
--- a/apps/dashboard/components/BlablaFormViewer.tsx
+++ b/apps/dashboard/components/BlablaFormViewer.tsx
@@ -17,34 +17,34 @@ import {
 import { motion } from 'framer-motion';
 import React, { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
+import useSWR from 'swr';
 
 import useChat from '@app/hooks/useChat';
 import useConfetti from '@app/hooks/useConfetti';
 import useStateReducer from '@app/hooks/useStateReducer';
+import { getForm } from '@app/pages/api/forms/[formId]';
 
 import slugify from '@chaindesk/lib/slugify';
+import { fetcher } from '@chaindesk/lib/swr-fetcher';
 import {
   FormConfigSchema,
   FormFieldSchema,
   TextField,
 } from '@chaindesk/lib/types/dtos';
-import { ConversationChannel } from '@chaindesk/prisma';
+import { ConversationChannel, Prisma } from '@chaindesk/prisma';
 import PhoneNumberInput from '@chaindesk/ui/PhoneNumberInput';
 import PoweredBy from '@chaindesk/ui/PoweredBy';
+import TraditionalForm from '@chaindesk/ui/TraditionalForm';
+import VisuallyHiddenInput from '@chaindesk/ui/VisuallyHiddenInput';
 
 import { formType } from './BlablaFormEditor/FieldsInput';
-import { acceptedMimeTypesStr } from './ChatBox';
 import Motion from './Motion';
-import TraditionalForm from './TraditionalForm';
-import VisuallyHiddenInput from './VisuallyHiddenInput';
-
 type Props = {
   formId: string;
   conversationId?: string;
   messageId?: string;
   config?: FormConfigSchema;
   type: 'conversational' | 'traditional';
-  isInEditor?: boolean;
 };
 
 const FormButton = styled(Button)(({ theme }) => ({
@@ -73,7 +73,6 @@ function BlablaFormViewer({
   messageId,
   config,
   type,
-  isInEditor,
 }: Props) {
   const triggerConfetti = useConfetti();
 
@@ -167,7 +166,6 @@ function BlablaFormViewer({
                 conversationId={conversationId}
                 messageId={messageId}
                 config={config}
-                isInEditor={isInEditor}
               />
             </Stack>
           )}
@@ -248,70 +246,24 @@ function BlablaFormViewer({
                 state.isConversationStarted &&
                 type === formType.conversational && (
                   <Stack sx={{ width: '100%' }}>
-                    {currentField?.type !== 'multiple_choice' && (
-                      <Input
-                        autoFocus
-                        className="w-full p-0 text-4xl font-semibold text-left bg-transparent border-none shadow-none outline-none before:shadow-none"
-                        placeholder="Type your answer"
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter') {
-                            answerQuestion(state.currentAnswer);
-                          }
-                        }}
-                        onChange={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-
-                          setState({
-                            currentAnswer: e.target.value,
-                          });
-                        }}
-                      />
-                    )}
+                    <Input
+                      autoFocus
+                      className="w-full p-0 text-4xl font-semibold text-left bg-transparent border-none shadow-none outline-none before:shadow-none"
+                      placeholder="Type your answer"
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          answerQuestion(state.currentAnswer);
+                        }
+                      }}
+                      onChange={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
 
-                    {currentField?.type === 'multiple_choice' && (
-                      <Stack
-                        gap={2}
-                        sx={{ flexWrap: 'wrap', justifyContent: 'flex-start' }}
-                        direction="row"
-                        component={motion.div}
-                        variants={{
-                          hidden: { opacity: 0 },
-                          show: {
-                            opacity: 1,
-                            transition: {
-                              staggerChildren: 0.35,
-                            },
-                          },
-                        }}
-                        initial="hidden"
-                        animate="show"
-                      >
-                        {currentField?.choices?.map((choice, i) => (
-                          <Motion
-                            key={choice}
-                            variants={{
-                              hidden: { opacity: 0, y: 20 },
-                              show: { opacity: 1, y: 0 },
-                            }}
-                          >
-                            {({ ref }) => (
-                              <span ref={ref}>
-                                <FormButton
-                                  variant="solid"
-                                  onClick={() => {
-                                    answerQuestion(choice);
-                                  }}
-                                  size="lg"
-                                >
-                                  {choice}
-                                </FormButton>
-                              </span>
-                            )}
-                          </Motion>
-                        ))}
-                      </Stack>
-                    )}
+                        setState({
+                          currentAnswer: e.target.value,
+                        });
+                      }}
+                    />
                   </Stack>
                 )}
 
@@ -407,68 +359,6 @@ function BlablaFormViewer({
                       )}
                     </Motion>
                   )}
-
-                  {/* <motion.div
-                initial="hidden"
-                animate="visible"
-                variants={{
-                  visible: {
-                    opacity: 1,
-                    y: 0,
-                  },
-                  hidden: {
-                    opacity: 0,
-                    y: 100,
-                  },
-                }}
-              >
-                <FormButton variant="solid" onClick={initiateForm} size="lg">
-                  {config?.startScreen?.cta?.label}
-                </FormButton>
-              </motion.div> */}
-
-                  <Motion
-                    initial="hidden"
-                    animate="visible"
-                    transition={{
-                      delay: 0.2,
-                      // type: 'spring',
-                      // bounce: 1,
-                      // stiffness: 50,
-                      // damping: 300,
-                    }}
-                    variants={{
-                      visible: {
-                        opacity: 1,
-                        y: 0,
-                        // scale: 1,
-                        // transition: {
-                        //   when: 'beforeChildren',
-                        //   staggerChildren: 0.2,
-                        // },
-                      },
-                      hidden: {
-                        opacity: 0,
-                        y: 20,
-                        // scale: 0.5,
-                        // transition: {
-                        //   when: 'afterChildren',
-                        // },
-                      },
-                    }}
-                  >
-                    {({ ref }) => (
-                      <span ref={ref}>
-                        <FormButton
-                          variant="solid"
-                          onClick={initiateForm}
-                          size="lg"
-                        >
-                          {config?.startScreen?.cta?.label}
-                        </FormButton>
-                      </span>
-                    )}
-                  </Motion>
                 </Stack>
               )}
             </>
diff --git a/apps/dashboard/components/ChatBox.tsx b/apps/dashboard/components/ChatBox.tsx
index 649705798..ea4e2edca 100644
--- a/apps/dashboard/components/ChatBox.tsx
+++ b/apps/dashboard/components/ChatBox.tsx
@@ -51,17 +51,10 @@ import ChatMessageCard from '@chaindesk/ui/Chatbox/ChatMessageCard';
 import LeadForm from '@chaindesk/ui/LeadForm';
 import Markdown from '@chaindesk/ui/Markdown';
 import PoweredBy from '@chaindesk/ui/PoweredBy';
+import TraditionalForm from '@chaindesk/ui/TraditionalForm';
 
 import FileUploader from './FileUploader';
-import TraditionalForm from './TraditionalForm';
-import VisuallyHiddenInput from './VisuallyHiddenInput';
-
-export const acceptedMimeTypesStr = [
-  ...AcceptedImageMimeTypes,
-  ...AcceptedVideoMimeTypes,
-  ...AcceptedAudioMimeTypes,
-  ...AcceptedDocumentMimeTypes,
-].join(',');
+import TraditionalFormWrapper from './TraditionalFormWrapper';
 
 export type ChatBoxProps = {
   messages: ChatMessage[];
@@ -346,11 +339,11 @@ function ChatBox({
                 <React.Fragment key={index}>
                   {each.metadata?.shouldDisplayForm ? (
                     <Stack sx={{ zIndex: 0 }}>
-                      <TraditionalForm
+                      <TraditionalFormWrapper
                         formId={each.metadata.formId}
-                        conversationId={each.conversationId}
-                        messageId={each.id}
-                        submissionId={each?.submission?.id}
+                        conversationId={each.conversationId!}
+                        messageId={each.id!}
+                        isFormSubmitted={!!each?.submission?.id}
                       />
                     </Stack>
                   ) : (
diff --git a/apps/dashboard/components/FileUploader.tsx b/apps/dashboard/components/FileUploader.tsx
index 210414584..c7a302d6c 100644
--- a/apps/dashboard/components/FileUploader.tsx
+++ b/apps/dashboard/components/FileUploader.tsx
@@ -2,9 +2,10 @@ import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
 import IconButton from '@mui/joy/IconButton';
 import { useState } from 'react';
 
-import { acceptedMimeTypesStr } from './ChatBox';
+import { acceptedMimeTypesStr } from '@chaindesk/lib/accepted-mime-types';
+import VisuallyHiddenInput from '@chaindesk/ui/VisuallyHiddenInput';
+
 import Loader from './Loader';
-import VisuallyHiddenInput from './VisuallyHiddenInput';
 
 export default function FileUploader({
   changeCallback,
diff --git a/apps/dashboard/components/TraditionalForm.tsx b/apps/dashboard/components/TraditionalForm.tsx
deleted file mode 100644
index 3610e84d7..000000000
--- a/apps/dashboard/components/TraditionalForm.tsx
+++ /dev/null
@@ -1,563 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
-import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
-import ReplayIcon from '@mui/icons-material/Replay';
-import SendIcon from '@mui/icons-material/Send';
-import {
-  Button,
-  Card,
-  CardContent,
-  Chip,
-  ChipDelete,
-  Divider,
-  Input,
-  Option,
-  Select,
-  Snackbar,
-  Stack,
-  Textarea,
-  Typography,
-} from '@mui/joy';
-import axios from 'axios';
-import { AnimatePresence, motion } from 'framer-motion';
-import { memo, useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import useSWR from 'swr';
-import useSWRMutation from 'swr/mutation';
-import { z } from 'zod';
-
-import useFileUpload, { FileToUpload } from '@app/hooks/useFileUpload';
-import useStateReducer from '@app/hooks/useStateReducer';
-import {
-  getConversation,
-  updateConversation,
-} from '@app/pages/api/conversations/[conversationId]';
-import { getForm } from '@app/pages/api/forms/[formId]';
-
-import {
-  fetcher,
-  generateActionFetcher,
-  HTTP_METHOD,
-} from '@chaindesk/lib/swr-fetcher';
-import { FormConfigSchema, FormSubmitSchema } from '@chaindesk/lib/types/dtos';
-import { Prisma } from '@chaindesk/prisma';
-import PhoneNumberInput from '@chaindesk/ui/PhoneNumberInput';
-import PoweredBy from '@chaindesk/ui/PoweredBy';
-
-import FileUploader from './FileUploader';
-import FileUploaderDropZone from './FileUploaderDropZone';
-
-export enum FieldType {
-  Email = 'email',
-  PhoneNumber = 'phoneNumber',
-  Text = 'text',
-  TextArea = 'textArea',
-  Select = 'select',
-  File = 'file',
-}
-
-type dynamicSchema<T extends string[]> = {
-  [k in T[number]]: string;
-};
-
-type fieldUnion =
-  | 'email'
-  | 'phoneNumber'
-  | 'text'
-  | 'textArea'
-  | 'select'
-  | 'file'
-  | 'multiple_choice';
-
-const shapeTozod = (
-  arr: { name: string; required: boolean; type: fieldUnion }[]
-) => {
-  const obj: Record<string, any> = {};
-  arr?.map(({ name, required, type }) => {
-    let zodType;
-    switch (type) {
-      case FieldType.Email:
-        zodType = z.string().email();
-        break;
-      case FieldType.TextArea:
-        zodType = required ? z.string().min(25) : z.string().optional();
-        break;
-      case FieldType.Select:
-        zodType = required ? z.string().min(1) : z.string().optional();
-        break;
-      case FieldType.PhoneNumber:
-        // const phoneRegex = new RegExp(
-        //   /^(?:\+?(\d{1,3}))?[-. (]*(?:\d{1,4})[-. )]*(\d{1,3})[-. ]*(\d{2,4})[-. ]*(\d{2,4})$/
-        // );
-        // zodType = z.string().regex(phoneRegex, 'Invalid Number!');
-        zodType = required ? z.string().min(3) : z.string().optional();
-        break;
-      case FieldType.Text:
-        zodType = required ? z.string().min(1) : z.string().optional();
-        break;
-      case FieldType.File:
-        const fileSchema = z.any();
-
-        zodType = required
-          ? z.array(fileSchema).min(1)
-          : z.array(fileSchema).optional();
-        break;
-      default:
-        zodType = z.string();
-    }
-    obj[name] = required ? zodType : zodType.optional();
-  });
-  return obj;
-};
-
-const dynamicSchema = (
-  arr: { name: string; required: boolean; type: fieldUnion }[]
-) =>
-  z.object({
-    ...shapeTozod(arr),
-  });
-
-const fieldTypesMap = {
-  email: ({ methods, placeholder }: { methods: any; placeholder: string }) => (
-    <Stack>
-      <Input
-        {...methods?.register('email')}
-        sx={{ width: '100%' }}
-        placeholder={placeholder}
-      />
-      <Typography level="body-xs" color="danger" sx={{ textAlign: 'left' }}>
-        {methods?.formState?.errors?.email?.message}
-      </Typography>
-    </Stack>
-  ),
-  phoneNumber: ({
-    name,
-    methods,
-    placeholder,
-  }: {
-    name: string;
-    methods: any;
-    placeholder: string;
-  }) => (
-    <Stack>
-      <PhoneNumberInput
-        control={methods.control as any}
-        {...(methods.register(name) as any)}
-        // placeholder={t('chatbubble:lead.phoneNumber')}
-        placeholder={placeholder}
-        handleChange={(value) => {
-          methods.setValue(name, value as never, {
-            shouldValidate: true,
-            shouldDirty: true,
-          });
-        }}
-        // selectProps={{
-        //   slotProps: {
-        //     listbox: {
-        //       // Fix the styling issue with shadow root usage. Similar issue: https://stackoverflow.com/questions/69828392/mui-select-drop-down-options-not-styled-when-using-entry-point-to-insert-scoped
-        //       container: chatboxRoot,
-        //     },
-        //   },
-        // }}
-      />
-
-      {/* <Input
-        {...methods?.register(name)}
-        placeholder={placeholder}
-        sx={{ width: '100%' }}
-      />
-      <Typography level="body-xs" color="danger" sx={{ textAlign: 'left' }}>
-        {methods?.formState?.errors?.[name]?.message}
-      </Typography> */}
-    </Stack>
-  ),
-  text: ({
-    name,
-    methods,
-    placeholder,
-  }: {
-    name: string;
-    methods: any;
-    placeholder: string;
-  }) => (
-    <Stack>
-      <Input
-        sx={{ width: '100%' }}
-        {...methods?.register(name || 'text')}
-        placeholder={placeholder || ''}
-      />
-      <Typography level="body-xs" color="danger" sx={{ textAlign: 'left' }}>
-        {methods?.formState?.errors?.[name || 'text']?.message}
-      </Typography>
-    </Stack>
-  ),
-  textArea: ({
-    name,
-    methods,
-    placeholder,
-  }: {
-    name: string;
-    methods: any;
-    placeholder?: string;
-  }) => (
-    <Stack>
-      <Textarea
-        sx={{ width: '100%' }}
-        {...methods?.register(name)}
-        minRows={4}
-        placeholder={placeholder || ''}
-      />
-      <Typography level="body-xs" color="danger" sx={{ textAlign: 'left' }}>
-        {methods?.formState?.errors?.[name]?.message}
-      </Typography>
-    </Stack>
-  ),
-  select: ({
-    name,
-    options,
-    changeHandler,
-    placeholder,
-  }: {
-    name: string;
-    options: string[];
-    changeHandler(name: string, value: string): void;
-    placeholder: string;
-  }) => (
-    <Select
-      sx={{
-        width: '100%',
-      }}
-      placeholder={placeholder}
-      onChange={(_, value) => {
-        if (value) {
-          changeHandler(name, value as string);
-        }
-      }}
-    >
-      {options?.map((option, i) => (
-        <Option key={i} value={option}>
-          {option}
-        </Option>
-      ))}
-    </Select>
-  ),
-  file: ({
-    name,
-    s3Upload,
-    placeholder,
-    changeHandler,
-    formId,
-    conversationId,
-  }: {
-    name: string;
-    s3Upload(items: FileToUpload[]): Promise<string[]>;
-    placeholder?: string;
-    formId: string;
-    conversationId?: string;
-    changeHandler(name: string, value: File[]): void;
-  }) => {
-    return (
-      <FileUploaderDropZone
-        variant="outlined"
-        placeholder={placeholder || 'Browse Files'}
-        changeCallback={async (files) => {
-          changeHandler(name, files);
-        }}
-      />
-    );
-  },
-};
-
-function TraditionalForm({
-  formId,
-  conversationId,
-  messageId,
-  submissionId,
-  isInEditor,
-  ...otherProps
-}: {
-  formId: string;
-  conversationId?: string;
-  messageId?: string;
-  submissionId?: string;
-  config?: any;
-  isInEditor?: boolean;
-}) {
-  const getFormQuery = useSWR<Prisma.PromiseReturnType<typeof getForm>>(
-    formId
-      ? `${process.env.NEXT_PUBLIC_DASHBOARD_URL}/api/forms/${formId}`
-      : null,
-    fetcher
-    // tab === 'editor' ? { refreshInterval: 2000 } : undefined
-  );
-
-  // const getConversationQuery = useSWR<
-  //   Prisma.PromiseReturnType<typeof getConversation>
-  // >(conversationId ? `/api/conversations/${conversationId}` : null, fetcher);
-
-  const [state, setState] = useStateReducer({
-    loading: false,
-    files: [] as File[],
-    isFormSubmitted: false,
-    hasErrored: false,
-  });
-
-  useEffect(() => {
-    setState({
-      isFormSubmitted: !!submissionId,
-    });
-  }, [submissionId]);
-
-  const config = useMemo(() => {
-    return (
-      !!isInEditor
-        ? otherProps.config || getFormQuery?.data?.draftConfig
-        : getFormQuery?.data?.publishedConfig
-    ) as FormConfigSchema;
-  }, [
-    getFormQuery?.data?.draftConfig,
-    getFormQuery?.data?.publishedConfig,
-    otherProps.config,
-  ]);
-
-  const { upload: s3Upload } = useFileUpload();
-
-  const shape = config?.fields?.map((field) => ({
-    name: field.name,
-    required: field.required,
-    type: field.type,
-  }));
-  const keys = config?.fields?.map((field) => field.name);
-
-  const methods = useForm<dynamicSchema<typeof keys>>({
-    resolver: zodResolver(dynamicSchema(shape)),
-    mode: 'onChange',
-  });
-
-  const submitForm = async (e: any) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    try {
-      setState({ loading: true, hasErrored: false });
-      const values = methods.getValues();
-
-      for (const field of config.fields) {
-        if (field.type === FieldType.File) {
-          const files = ((values as any)?.[field.name] as File[]) || [];
-
-          if (files.length > 0) {
-            const urls = await s3Upload(
-              files.map((each) => ({
-                case: 'formUpload',
-                fileName: each.name,
-                mimeType: each.type,
-                file: each,
-                formId,
-                conversationId,
-              }))
-            );
-
-            values[field.name] = JSON.stringify(urls);
-          }
-        }
-      }
-
-      const response = await axios.post(
-        `${process.env.NEXT_PUBLIC_DASHBOARD_URL}/api/forms/${formId}`,
-        {
-          formId,
-          conversationId,
-          formValues: values,
-          messageId,
-        } as FormSubmitSchema
-      );
-
-      if (response.status === 200) {
-        setState({ isFormSubmitted: true });
-      }
-    } catch (e) {
-      setState({ hasErrored: true });
-      console.log('traditional form submit err:', e);
-    } finally {
-      setState({ loading: false });
-    }
-  };
-
-  return (
-    <Card
-      variant="outlined"
-      color="neutral"
-      sx={{
-        position: 'relative',
-        overflowY: 'auto',
-        width: '100%',
-        maxHeight: '100%',
-        flex: 1,
-      }}
-    >
-      {/* {state.isFormSubmitted && !conversationId && (
-        <Stack sx={{ position: 'absolute', top: -40, right: 0 }}>
-          <Button
-            variant="outlined"
-            color="success"
-            size="sm"
-            onClick={() => setState({ isFormSubmitted: false })}
-            endDecorator={<ReplayIcon />}
-          >
-            Retry
-          </Button>
-        </Stack>
-      )} */}
-      <CardContent
-        component="div"
-        sx={(t) => ({
-          textAlign: 'center',
-          alignItems: 'center',
-          position: 'relative',
-          width: '100%',
-          display: 'flex',
-        })}
-      >
-        <AnimatePresence>
-          {state.isFormSubmitted && (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.3, ease: 'easeInOut' }}
-              key="component"
-              className="h-full"
-            >
-              <Stack
-                spacing={2}
-                sx={{ p: 4 }}
-                height="100%"
-                justifyContent="center"
-                alignItems="center"
-              >
-                <CheckCircleRoundedIcon sx={{ fontSize: 42 }} color="primary" />
-                <Typography level="h4">
-                  {config?.endScreen?.successMessage ||
-                    'Form Submitted Succcessfully!'}
-                </Typography>
-                {config?.endScreen?.cta?.label && (
-                  <a
-                    href={config?.endScreen?.cta?.url || '#'}
-                    target={config?.endScreen?.cta?.target || '_blank'}
-                  >
-                    <Button variant="solid" size="lg" color="primary">
-                      {config?.endScreen?.cta?.label}
-                    </Button>
-                  </a>
-                )}
-              </Stack>
-            </motion.div>
-          )}
-        </AnimatePresence>
-        <AnimatePresence>
-          {!state.isFormSubmitted && (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              // exit={{ opacity: 0, y: -50 }}
-              transition={{ duration: 0.3, ease: 'easeInOut' }}
-              key="component"
-              style={{ width: '100%' }}
-            >
-              {(config?.startScreen?.title ||
-                config?.startScreen?.description) && (
-                <Stack sx={{ mb: 2 }}>
-                  {config?.startScreen?.title && (
-                    <Typography level="h3">
-                      {config?.startScreen?.title}
-                    </Typography>
-                  )}
-
-                  {config?.startScreen?.description && (
-                    <Typography level="body-md">
-                      {config?.startScreen?.description}
-                    </Typography>
-                  )}
-                </Stack>
-              )}
-
-              <Stack
-                width="100%"
-                spacing={2}
-                onChange={(e) => {
-                  // do not bubble up, not to trigger auto-save.
-                  e.stopPropagation();
-                }}
-              >
-                {config?.fields?.map((field) => (
-                  <Stack
-                    key={field.id}
-                    spacing={1}
-                    sx={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                    }}
-                  >
-                    <Stack direction="row">
-                      <Typography level="title-md">{field.name}</Typography>
-                      {field.required && (
-                        <div className="text-red-500 ml-0.5">*</div>
-                      )}
-                    </Stack>
-
-                    {fieldTypesMap[field.type as keyof typeof fieldTypesMap]?.({
-                      formId,
-                      conversationId,
-                      methods,
-                      name: field.name,
-                      placeholder: (field as any)?.placeholder,
-                      changeHandler: {
-                        _: (name: string, value: any) => {
-                          methods.setValue(name, value);
-                          methods.trigger();
-                        },
-                      }['_'],
-                      options: (field as any)?.options as string[],
-                      s3Upload,
-                    })}
-                  </Stack>
-                ))}
-              </Stack>
-              <Stack mt={2}>
-                <Button
-                  type="submit"
-                  disabled={
-                    config?.fields.length == 0 || !methods.formState.isValid
-                  }
-                  loading={state.loading}
-                  onClick={submitForm}
-                  size="md"
-                  color="primary"
-                  endDecorator={<SendIcon fontSize="sm" />}
-                  sx={{ with: '100%' }}
-                >
-                  Submit
-                </Button>
-                <Snackbar
-                  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-                  open={state.hasErrored}
-                  onClose={() => setState({ hasErrored: false })}
-                  color={'danger'}
-                >
-                  Submission Failed, try again later.
-                </Snackbar>
-              </Stack>
-            </motion.div>
-          )}
-
-          <Stack sx={{ mt: 2 }}>
-            <PoweredBy />
-          </Stack>
-        </AnimatePresence>
-      </CardContent>
-    </Card>
-  );
-}
-
-export default memo(TraditionalForm);
diff --git a/apps/dashboard/components/TraditionalFormWrapper.tsx b/apps/dashboard/components/TraditionalFormWrapper.tsx
new file mode 100644
index 000000000..d1e4d59d0
--- /dev/null
+++ b/apps/dashboard/components/TraditionalFormWrapper.tsx
@@ -0,0 +1,37 @@
+import useSWR from 'swr';
+
+import { getForm } from '@app/pages/api/forms/[formId]';
+
+import { fetcher } from '@chaindesk/lib/swr-fetcher';
+import { FormConfigSchema } from '@chaindesk/lib/types/dtos';
+import { Prisma } from '@chaindesk/prisma';
+import TraditionalForm from '@chaindesk/ui/TraditionalForm';
+
+export default function TraditionalFormWrapper({
+  formId,
+  messageId,
+  conversationId,
+  isFormSubmitted,
+}: {
+  formId: string;
+  messageId: string;
+  conversationId: string;
+  isFormSubmitted?: boolean;
+}) {
+  const getFormQuery = useSWR<Prisma.PromiseReturnType<typeof getForm>>(
+    formId
+      ? `${process.env.NEXT_PUBLIC_DASHBOARD_URL}/api/forms/${formId}`
+      : null,
+    fetcher
+  );
+
+  return (
+    <TraditionalForm
+      formId={formId}
+      conversationId={conversationId}
+      messageId={messageId}
+      config={getFormQuery?.data?.publishedConfig as FormConfigSchema}
+      isFormSubmitted={isFormSubmitted}
+    />
+  );
+}
diff --git a/apps/dashboard/pages/forms/index.tsx b/apps/dashboard/pages/forms/index.tsx
index 2d8eec7f2..3d58ca22d 100644
--- a/apps/dashboard/pages/forms/index.tsx
+++ b/apps/dashboard/pages/forms/index.tsx
@@ -44,6 +44,9 @@ import {
   FEEDBACK,
   FROM_SCRATCH,
   INBOUND_LEAD,
+  LEAD_FORM,
+  ONBOARDING_FORM,
+  PRODUCT_FEEDBACK_FORM,
 } from '@chaindesk/lib/forms/templates';
 import {
   fetcher,
@@ -218,7 +221,15 @@ export default function FormsPage() {
         }}
       >
         <Stack gap={2}>
-          {[FROM_SCRATCH, INBOUND_LEAD, CONTACT_SALES, FEEDBACK].map((each) => (
+          {[
+            FROM_SCRATCH,
+            LEAD_FORM,
+            ONBOARDING_FORM,
+            PRODUCT_FEEDBACK_FORM,
+            INBOUND_LEAD,
+            CONTACT_SALES,
+            FEEDBACK,
+          ].map((each) => (
             <Card
               size="sm"
               key={each.name}
diff --git a/packages/lib/accepted-mime-types.ts b/packages/lib/accepted-mime-types.ts
index 973e5f0a7..eb7bb2cf3 100644
--- a/packages/lib/accepted-mime-types.ts
+++ b/packages/lib/accepted-mime-types.ts
@@ -58,3 +58,10 @@ export const AcceptedDocumentMimeTypes = [
   'application/gzip',
   'application/zip',
 ] as const;
+
+export const acceptedMimeTypesStr = [
+  ...AcceptedImageMimeTypes,
+  ...AcceptedVideoMimeTypes,
+  ...AcceptedAudioMimeTypes,
+  ...AcceptedDocumentMimeTypes,
+].join(',');
diff --git a/packages/lib/forms/templates.ts b/packages/lib/forms/templates.ts
index 7b59a12bc..68611dfad 100644
--- a/packages/lib/forms/templates.ts
+++ b/packages/lib/forms/templates.ts
@@ -26,9 +26,145 @@ export const FROM_SCRATCH: FormTemplate = {
     startScreen: {
       title: 'Title',
       description: 'Description',
-      cta: {
-        label: 'Start',
+    },
+  },
+};
+
+export const LEAD_FORM: FormTemplate = {
+  name: 'Lead Form',
+  description: 'A form to capture lead information including email and phone.',
+  schema: {
+    overview: `This form is designed to capture essential lead information, including email and phone, to facilitate further communication.`,
+    fields: [
+      {
+        id: cuid(),
+        type: 'email',
+        name: 'email',
+        required: true,
+        placeholder: 'Enter your email',
       },
+      {
+        id: cuid(),
+        type: 'phoneNumber',
+        name: 'phone',
+        required: true,
+        placeholder: 'Enter your phone number',
+      },
+      {
+        id: cuid(),
+        type: 'textArea',
+        name: 'comment',
+        required: false,
+        placeholder: 'Enter any additional comments',
+      },
+    ],
+    startScreen: {
+      title: 'Get in Touch',
+      description: "We're here to help! Please fill out the form below.",
+    },
+  },
+};
+
+export const PRODUCT_FEEDBACK_FORM: FormTemplate = {
+  name: 'Product Feedback Form',
+  description: 'A form to gather feedback on our products.',
+  schema: {
+    overview: `This form is designed to collect feedback on our products. Your input is valuable to us and helps us improve our offerings.`,
+    fields: [
+      {
+        id: cuid(),
+        type: 'email',
+        name: 'email',
+        required: true,
+        placeholder: 'Enter your email',
+      },
+      {
+        id: cuid(),
+        type: 'select',
+        name: 'type',
+        required: true,
+        options: ['Feature Request', 'Bug Report', 'Other'],
+        placeholder: 'Select feedback type',
+      },
+      {
+        id: cuid(),
+        type: 'textArea',
+        name: 'comment',
+        required: true,
+        placeholder: 'Enter your feedback here',
+      },
+      {
+        id: cuid(),
+        type: 'file',
+        name: 'files',
+        required: false,
+        placeholder: 'Attach files (optional)',
+      },
+    ],
+    startScreen: {
+      title: 'Your Feedback Matters',
+      description:
+        "We're here to listen! Please share your thoughts on our products.",
+    },
+  },
+};
+
+export const ONBOARDING_FORM: FormTemplate = {
+  name: 'Onboarding Form',
+  description: 'A form to gather initial information about new users.',
+  schema: {
+    overview: `This form is designed to collect initial information about new users to help us tailor our services to their needs.`,
+    fields: [
+      {
+        id: cuid(),
+        type: 'email',
+        name: 'email',
+        required: true,
+        placeholder: 'Enter your email',
+      },
+      {
+        id: cuid(),
+        type: 'select',
+        name: 'industry',
+        required: true,
+        options: [
+          'Technology',
+          'E-commerce',
+          'Healthcare',
+          'Finance',
+          'Retail',
+          'Manufacturing',
+          'Other',
+        ],
+        placeholder: 'Select your industry',
+      },
+      {
+        id: cuid(),
+        type: 'select',
+        name: 'company size',
+        required: true,
+        options: ['1-10', '10-100', '100+'],
+        placeholder: 'Select your company size',
+      },
+      {
+        id: cuid(),
+        type: 'select',
+        name: 'Where did you hear about us ?',
+        required: true,
+        options: [
+          'Google',
+          'Social Media',
+          'Newsletter',
+          'Word of Mouth',
+          'Trade Show',
+          'Other',
+        ],
+        placeholder: 'Where did you hear about us?',
+      },
+    ],
+    startScreen: {
+      title: 'Welcome to Our Platform',
+      description: "We're excited to have you here! Let's get started.",
     },
   },
 };
@@ -59,9 +195,9 @@ export const INBOUND_LEAD: FormTemplate = {
       },
       {
         id: cuid(),
-        type: 'multiple_choice',
+        type: 'select',
         name: 'Intested in',
-        choices: [
+        options: [
           'Website Dev',
           'Content Marketing',
           'Social Media',
@@ -73,9 +209,6 @@ export const INBOUND_LEAD: FormTemplate = {
     startScreen: {
       title: 'Awesome Company',
       description: "Welcome on board! Let's get to know each other!",
-      cta: {
-        label: '🎉 Start',
-      },
     },
   },
 };
@@ -111,9 +244,9 @@ export const CONTACT_SALES: FormTemplate = {
       },
       {
         id: cuid(),
-        type: 'multiple_choice',
+        type: 'select',
         name: 'Interested in',
-        choices: [
+        options: [
           'Website Dev',
           'Content Marketing',
           'Social Media',
@@ -125,9 +258,6 @@ export const CONTACT_SALES: FormTemplate = {
     startScreen: {
       title: 'Contact sales',
       description: 'Learn about our Enterprise Plan',
-      cta: {
-        label: 'Talk to sales',
-      },
     },
   },
 };
@@ -163,7 +293,7 @@ export const FEEDBACK: FormTemplate = {
       },
       {
         id: cuid(),
-        type: 'text',
+        type: 'number',
         name: 'Overall satisfaction (1-5)',
         required: true,
       },
@@ -171,9 +301,6 @@ export const FEEDBACK: FormTemplate = {
     startScreen: {
       title: 'Sneaker.com',
       description: 'Let us know how we can improve our product',
-      cta: {
-        label: '💬 Share Feedback',
-      },
     },
   },
 };
diff --git a/packages/lib/types/dtos.ts b/packages/lib/types/dtos.ts
index 99c50986d..cefc4825c 100644
--- a/packages/lib/types/dtos.ts
+++ b/packages/lib/types/dtos.ts
@@ -587,6 +587,10 @@ export const FormFieldSchema = z.discriminatedUnion('type', [
     type: z.literal('text'),
     placeholder: z.string().optional(),
   }),
+  FormFieldBaseSchema.extend({
+    type: z.literal('number'),
+    placeholder: z.string().optional(),
+  }),
   FormFieldBaseSchema.extend({
     type: z.literal('multiple_choice'),
     choices: z.array(z.string().min(1)).min(1),
@@ -644,9 +648,6 @@ export const FormConfigSchema = z.object({
     .object({
       title: z.string().max(50),
       description: z.string().max(250),
-      cta: z.object({
-        label: z.string(),
-      }),
     })
     .optional(),
   endScreen: z
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c73580556..36c9ed341 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -31,6 +31,7 @@
     "dequal": "^2.0.3",
     "framer-motion": "^11.0.8",
     "medium-zoom": "^1.1.0",
+    "p-map": "^5.5.0",
     "property-information": "^6.4.0",
     "radash": "^10.7.1",
     "react-hook-form": "^7.51.0",
diff --git a/apps/dashboard/components/FileUploaderDropZone.tsx b/packages/ui/src/FileUploaderDropZone.tsx
similarity index 93%
rename from apps/dashboard/components/FileUploaderDropZone.tsx
rename to packages/ui/src/FileUploaderDropZone.tsx
index 884be1413..ec95d9dc1 100644
--- a/apps/dashboard/components/FileUploaderDropZone.tsx
+++ b/packages/ui/src/FileUploaderDropZone.tsx
@@ -1,19 +1,15 @@
-import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
 import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
-import Button from '@mui/joy/Button';
 import Card from '@mui/joy/Card';
 import Chip from '@mui/joy/Chip';
 import ChipDelete from '@mui/joy/ChipDelete';
-import IconButton from '@mui/joy/IconButton';
 import Stack from '@mui/joy/Stack';
 import Typography from '@mui/joy/Typography';
 import { useCallback, useRef, useState } from 'react';
 
-import { acceptedMimeTypesStr } from './ChatBox';
-import Loader from './Loader';
+import { acceptedMimeTypesStr } from '@chaindesk/lib/accepted-mime-types';
 import VisuallyHiddenInput from './VisuallyHiddenInput';
 
-export default function FileUploader({
+export default function FileUploaderDropZone({
   changeCallback,
   placeholder,
   variant = 'plain',
diff --git a/packages/ui/src/TraditionalForm.tsx b/packages/ui/src/TraditionalForm.tsx
new file mode 100644
index 000000000..88996b140
--- /dev/null
+++ b/packages/ui/src/TraditionalForm.tsx
@@ -0,0 +1,285 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import SendIcon from '@mui/icons-material/Send';
+import {
+  Button,
+  Card,
+  CardContent,
+  Snackbar,
+  Stack,
+  Typography,
+} from '@mui/joy';
+import axios from 'axios';
+import { AnimatePresence, motion } from 'framer-motion';
+import { memo, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import useFileUpload from '@chaindesk/ui/hooks/useFileUpload';
+import useStateReducer from '@chaindesk/ui/hooks/useStateReducer';
+import { FormConfigSchema, FormSubmitSchema } from '@chaindesk/lib/types/dtos';
+import PoweredBy from '@chaindesk/ui/PoweredBy';
+import fieldTypesMap, {
+  fieldsToZodSchema,
+} from '@chaindesk/ui/utils/fieldTypesMap';
+import { type dynamicSchema, FieldType, type fieldUnion } from './types/form';
+
+function TraditionalForm({
+  formId,
+  conversationId,
+  messageId,
+  isFormSubmitted,
+  config,
+}: {
+  formId: string;
+  conversationId?: string;
+  messageId?: string;
+  isFormSubmitted?: boolean;
+  config: FormConfigSchema;
+}) {
+  const [state, setState] = useStateReducer({
+    loading: false,
+    files: [] as File[],
+    isFormSubmitted: isFormSubmitted ?? false,
+    hasErrored: false,
+  });
+
+  useEffect(() => {
+    setState({
+      isFormSubmitted,
+    });
+  }, [isFormSubmitted]);
+
+  const { upload: s3Upload } = useFileUpload();
+
+  const dynamicSchema = (
+    fields: { name: string; required: boolean; type: fieldUnion }[]
+  ) =>
+    z.object({
+      ...fieldsToZodSchema(fields),
+    });
+
+  const shape = config?.fields?.map((field) => ({
+    name: field.name,
+    required: field.required,
+    type: field.type,
+  }));
+  const keys = config?.fields?.map((field) => field.name);
+
+  const methods = useForm<dynamicSchema<typeof keys>>({
+    resolver: zodResolver(dynamicSchema(shape)),
+    mode: 'onChange',
+  });
+
+  const submitForm = async (e: any) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    try {
+      setState({ loading: true, hasErrored: false });
+      const values = methods.getValues();
+
+      for (const field of config.fields) {
+        if (field.type === FieldType.File) {
+          const files = ((values as any)?.[field.name] as File[]) || [];
+
+          if (files.length > 0) {
+            const urls = await s3Upload(
+              files.map((each) => ({
+                case: 'formUpload',
+                fileName: each.name,
+                mimeType: each.type,
+                file: each,
+                formId,
+                conversationId,
+              }))
+            );
+
+            values[field.name] = JSON.stringify(urls);
+          }
+        }
+      }
+
+      const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_DASHBOARD_URL}/api/forms/${formId}`,
+        {
+          formId,
+          conversationId,
+          formValues: values,
+          messageId,
+        } as FormSubmitSchema
+      );
+
+      if (response.status === 200) {
+        setState({ isFormSubmitted: true });
+      }
+    } catch (e) {
+      setState({ hasErrored: true });
+      console.log('traditional form submit err:', e);
+    } finally {
+      setState({ loading: false });
+    }
+  };
+
+  return (
+    <Card
+      variant="outlined"
+      color="neutral"
+      sx={{
+        position: 'relative',
+        overflowY: 'auto',
+        width: '100%',
+        maxHeight: '100%',
+        flex: 1,
+      }}
+    >
+      <CardContent
+        component="div"
+        sx={(t) => ({
+          textAlign: 'center',
+          alignItems: 'center',
+          position: 'relative',
+          width: '100%',
+          display: 'flex',
+        })}
+      >
+        <AnimatePresence>
+          {state.isFormSubmitted && (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3, ease: 'easeInOut' }}
+              key="component"
+              className="h-full"
+            >
+              <Stack
+                spacing={2}
+                sx={{ p: 4 }}
+                height="100%"
+                justifyContent="center"
+                alignItems="center"
+              >
+                <CheckCircleRoundedIcon sx={{ fontSize: 42 }} color="primary" />
+                <Typography level="h4">
+                  {config?.endScreen?.successMessage ||
+                    'Form Submitted Succcessfully!'}
+                </Typography>
+                {config?.endScreen?.cta?.label && (
+                  <a
+                    href={config?.endScreen?.cta?.url || '#'}
+                    target={config?.endScreen?.cta?.target || '_blank'}
+                  >
+                    <Button variant="solid" size="lg" color="primary">
+                      {config?.endScreen?.cta?.label}
+                    </Button>
+                  </a>
+                )}
+              </Stack>
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <AnimatePresence>
+          {!state.isFormSubmitted && (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, ease: 'easeInOut' }}
+              key="component"
+              style={{ width: '100%' }}
+            >
+              {(config?.startScreen?.title ||
+                config?.startScreen?.description) && (
+                <Stack sx={{ mb: 2 }}>
+                  {config?.startScreen?.title && (
+                    <Typography level="h3">
+                      {config?.startScreen?.title}
+                    </Typography>
+                  )}
+
+                  {config?.startScreen?.description && (
+                    <Typography level="body-md">
+                      {config?.startScreen?.description}
+                    </Typography>
+                  )}
+                </Stack>
+              )}
+
+              <Stack
+                width="100%"
+                spacing={2}
+                onChange={(e) => {
+                  // do not bubble up, not to trigger auto-save.
+                  e.stopPropagation();
+                }}
+              >
+                {config?.fields?.map((field) => (
+                  <Stack
+                    key={field.id}
+                    spacing={1}
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                    }}
+                  >
+                    <Stack direction="row">
+                      <Typography level="title-md">{field.name}</Typography>
+                      {field.required && (
+                        <div className="text-red-500 ml-0.5">*</div>
+                      )}
+                    </Stack>
+
+                    {fieldTypesMap[field.type as keyof typeof fieldTypesMap]?.({
+                      formId,
+                      conversationId,
+                      methods,
+                      name: field.name,
+                      placeholder: (field as any)?.placeholder,
+                      changeHandler: {
+                        _: (name: string, value: any) => {
+                          methods.setValue(name, value);
+                          methods.trigger();
+                        },
+                      }['_'],
+                      options: (field as any)?.options as string[],
+                    })}
+                  </Stack>
+                ))}
+              </Stack>
+              <Stack mt={2}>
+                <Button
+                  type="submit"
+                  disabled={
+                    config?.fields.length == 0 || !methods.formState.isValid
+                  }
+                  loading={state.loading}
+                  onClick={submitForm}
+                  size="md"
+                  color="primary"
+                  endDecorator={<SendIcon fontSize="small" />}
+                  sx={{ with: '100%' }}
+                >
+                  Submit
+                </Button>
+                <Snackbar
+                  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                  open={state.hasErrored}
+                  onClose={() => setState({ hasErrored: false })}
+                  color={'danger'}
+                >
+                  Submission Failed, try again later.
+                </Snackbar>
+              </Stack>
+            </motion.div>
+          )}
+
+          <Stack sx={{ mt: 2 }}>
+            <PoweredBy />
+          </Stack>
+        </AnimatePresence>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default memo(TraditionalForm);
diff --git a/apps/dashboard/components/VisuallyHiddenInput.tsx b/packages/ui/src/VisuallyHiddenInput.tsx
similarity index 100%
rename from apps/dashboard/components/VisuallyHiddenInput.tsx
rename to packages/ui/src/VisuallyHiddenInput.tsx
diff --git a/packages/ui/src/hooks/useFileUpload.ts b/packages/ui/src/hooks/useFileUpload.ts
new file mode 100644
index 000000000..0b87c39cf
--- /dev/null
+++ b/packages/ui/src/hooks/useFileUpload.ts
@@ -0,0 +1,93 @@
+import axios from 'axios';
+import pMap from 'p-map';
+import React, { useCallback } from 'react';
+import useSWRMutation from 'swr/mutation';
+
+import { generateActionFetcher, HTTP_METHOD } from '@chaindesk/lib/swr-fetcher';
+import {
+  GenerateManyUploadLinksResponseSchema,
+  GenerateManyUploadLinksSchema,
+} from '@chaindesk/lib/types/dtos';
+
+export type FileToUpload = {
+  case:
+    | 'chatUpload'
+    | 'agentIcon'
+    | 'organizationIcon'
+    | 'userIcon'
+    | 'formUpload';
+  file: File;
+  fileName?: string;
+  agentId?: string;
+  formId?: string;
+  conversationId?: string;
+};
+
+function useFileUpload() {
+  const [isUploading, setIsUploading] = React.useState(false);
+  const API_URL = process.env.NEXT_PUBLIC_DASHBOARD_URL;
+
+  const generateLinkMutation = useSWRMutation<
+    GenerateManyUploadLinksResponseSchema,
+    any,
+    any,
+    GenerateManyUploadLinksSchema
+  >(() => {
+    return `${API_URL}/api/generate-upload-links`;
+  }, generateActionFetcher(HTTP_METHOD.POST));
+
+  const upload = useCallback(
+    async (items: FileToUpload[]) => {
+      let urls = [] as string[];
+      try {
+        setIsUploading(true);
+
+        const links =
+          (await generateLinkMutation.trigger(
+            items.map((each) => ({
+              case: each.case as any,
+              fileName: each?.fileName || each.file.name,
+              mimeType: each.file.type as any,
+              agentId: each.agentId as any,
+              formId: each.formId as any,
+              conversationId: each.conversationId as any,
+            }))
+          )) || [];
+
+        links.length > 0
+          ? await pMap(
+              links,
+              async ({ signedUrl }, index) => {
+                return axios.put(signedUrl, items[index].file, {
+                  headers: {
+                    'Content-Type': items[index]?.file?.type,
+                  },
+                });
+              },
+              {
+                concurrency: links.length,
+              }
+            )
+          : [];
+
+        setIsUploading(false);
+
+        urls = links.map((each) => each.fileUrl);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setIsUploading(false);
+        return urls;
+      }
+    },
+    [generateLinkMutation.trigger]
+  );
+
+  return {
+    generateLinkMutation,
+    upload,
+    isUploading,
+  };
+}
+
+export default useFileUpload;
diff --git a/packages/ui/src/types/form.ts b/packages/ui/src/types/form.ts
new file mode 100644
index 000000000..ad43dcb33
--- /dev/null
+++ b/packages/ui/src/types/form.ts
@@ -0,0 +1,23 @@
+export enum FieldType {
+  Email = 'email',
+  PhoneNumber = 'phoneNumber',
+  Text = 'text',
+  Number = 'number',
+  TextArea = 'textArea',
+  Select = 'select',
+  File = 'file',
+}
+
+export type dynamicSchema<T extends string[]> = {
+  [k in T[number]]: string;
+};
+
+export type fieldUnion =
+  | 'email'
+  | 'phoneNumber'
+  | 'text'
+  | 'number'
+  | 'textArea'
+  | 'select'
+  | 'file'
+  | 'multiple_choice';
diff --git a/packages/ui/src/utils/fieldTypesMap.tsx b/packages/ui/src/utils/fieldTypesMap.tsx
new file mode 100644
index 000000000..b47912b4c
--- /dev/null
+++ b/packages/ui/src/utils/fieldTypesMap.tsx
@@ -0,0 +1,224 @@
+import { Stack, Typography, Textarea, Select, Option } from '@mui/joy';
+import { FieldType, fieldUnion } from '../types/form';
+import { z } from 'zod';
+import Input from '@chaindesk/ui/Input';
+import PhoneNumberInput from '@chaindesk/ui/PhoneNumberInput';
+import FileUploaderDropZone from '@chaindesk/ui/FileUploaderDropZone';
+
+export const fieldsToZodSchema = (
+  fields: { name: string; required: boolean; type: fieldUnion }[]
+) => {
+  const obj: Record<string, any> = {};
+  fields?.map(({ name, required, type }) => {
+    let zodType;
+    switch (type) {
+      case FieldType.Email:
+        zodType = z.string().email();
+        break;
+      case FieldType.TextArea:
+        zodType = required ? z.string().min(25) : z.string().optional();
+        break;
+      case FieldType.Select:
+        zodType = required ? z.string().min(1) : z.string().optional();
+        break;
+      case FieldType.PhoneNumber:
+        // const phoneRegex = new RegExp(
+        //   /^(?:\+?(\d{1,3}))?[-. (]*(?:\d{1,4})[-. )]*(\d{1,3})[-. ]*(\d{2,4})[-. ]*(\d{2,4})$/
+        // );
+        // zodType = z.string().regex(phoneRegex, 'Invalid Number!');
+        zodType = required ? z.string().min(3) : z.string().optional();
+        break;
+      case FieldType.Text:
+        zodType = required ? z.string().min(1) : z.string().optional();
+        break;
+      case FieldType.Number:
+        zodType = required ? z.number() : z.number().optional();
+        break;
+      case FieldType.File:
+        const fileSchema = z.any();
+
+        zodType = required
+          ? z.array(fileSchema).min(1)
+          : z.array(fileSchema).optional();
+        break;
+      default:
+        zodType = z.string();
+    }
+    obj[name] = required ? zodType : zodType.optional();
+  });
+  return obj;
+};
+
+const fieldTypesMap = {
+  email: ({ methods, placeholder }: { methods: any; placeholder: string }) => (
+    <Stack>
+      <Input
+        {...methods?.register('email')}
+        sx={{ width: '100%' }}
+        placeholder={placeholder}
+      />
+      <Typography level="body-xs" color="danger" sx={{ textAlign: 'left' }}>
+        {methods?.formState?.errors?.email?.message}
+      </Typography>
+    </Stack>
+  ),
+  phoneNumber: ({
+    name,
+    methods,
+    placeholder,
+  }: {
+    name: string;
+    methods: any;
+    placeholder: string;
+  }) => (
+    <Stack>
+      <PhoneNumberInput
+        control={methods.control as any}
+        {...(methods.register(name) as any)}
+        // placeholder={t('chatbubble:lead.phoneNumber')}
+        placeholder={placeholder}
+        handleChange={(value) => {
+          methods.setValue(name, value as never, {
+            shouldValidate: true,
+            shouldDirty: true,
+          });
+        }}
+        // selectProps={{
+        //   slotProps: {
+        //     listbox: {
+        //       // Fix the styling issue with shadow root usage. Similar issue: https://stackoverflow.com/questions/69828392/mui-select-drop-down-options-not-styled-when-using-entry-point-to-insert-scoped
+        //       container: chatboxRoot,
+        //     },
+        //   },
+        // }}
+      />
+
+      {/* <Input
+        {...methods?.register(name)}
+        placeholder={placeholder}
+        sx={{ width: '100%' }}
+      />
+      <Typography level="body-xs" color="danger" sx={{ textAlign: 'left' }}>
+        {methods?.formState?.errors?.[name]?.message}
+      </Typography> */}
+    </Stack>
+  ),
+  text: ({
+    name,
+    methods,
+    placeholder,
+  }: {
+    name: string;
+    methods: any;
+    placeholder: string;
+  }) => (
+    <Stack>
+      <Input
+        sx={{ width: '100%' }}
+        {...methods?.register(name || 'text')}
+        placeholder={placeholder || ''}
+      />
+      <Typography level="body-xs" color="danger" sx={{ textAlign: 'left' }}>
+        {methods?.formState?.errors?.[name || 'text']?.message}
+      </Typography>
+    </Stack>
+  ),
+  number: ({
+    name,
+    methods,
+    placeholder,
+  }: {
+    name: string;
+    methods: any;
+    placeholder: string;
+  }) => (
+    <Stack>
+      <Input
+        type="number"
+        sx={{ width: '100%' }}
+        onChange={(e) => {
+          methods.setValue(name, parseInt(e.target.value));
+          methods.trigger();
+        }}
+        control={methods.control}
+        placeholder={placeholder || ''}
+      />
+      <Typography level="body-xs" color="danger" sx={{ textAlign: 'left' }}>
+        {methods?.formState?.errors?.[name]?.message}
+      </Typography>
+    </Stack>
+  ),
+  textArea: ({
+    name,
+    methods,
+    placeholder,
+  }: {
+    name: string;
+    methods: any;
+    placeholder?: string;
+  }) => (
+    <Stack>
+      <Textarea
+        sx={{ width: '100%' }}
+        {...methods?.register(name)}
+        minRows={4}
+        placeholder={placeholder || ''}
+      />
+      <Typography level="body-xs" color="danger" sx={{ textAlign: 'left' }}>
+        {methods?.formState?.errors?.[name]?.message}
+      </Typography>
+    </Stack>
+  ),
+  select: ({
+    name,
+    options,
+    changeHandler,
+    placeholder,
+  }: {
+    name: string;
+    options: string[];
+    changeHandler(name: string, value: string): void;
+    placeholder: string;
+  }) => (
+    <Select
+      sx={{
+        width: '100%',
+      }}
+      placeholder={placeholder}
+      onChange={(_, value) => {
+        if (value) {
+          changeHandler(name, value as string);
+        }
+      }}
+    >
+      {options?.map((option, i) => (
+        <Option key={i} value={option}>
+          {option}
+        </Option>
+      ))}
+    </Select>
+  ),
+  file: ({
+    name,
+    placeholder,
+    changeHandler,
+  }: {
+    name: string;
+    placeholder?: string;
+    formId: string;
+    conversationId?: string;
+    changeHandler(name: string, value: File[]): void;
+  }) => {
+    return (
+      <FileUploaderDropZone
+        variant="outlined"
+        placeholder={placeholder || 'Browse Files'}
+        changeCallback={async (files) => {
+          changeHandler(name, files);
+        }}
+      />
+    );
+  },
+};
+
+export default fieldTypesMap;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e1c15f3fe..fe8f82d81 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -701,17 +701,17 @@ importers:
         specifier: 1.0.2
         version: 1.0.2(@types/react@18.0.25)(react-dom@18.2.0)(react@18.2.0)
       '@react-email/button':
-        specifier: 0.0.14
-        version: 0.0.14(react@18.2.0)
+        specifier: 0.0.10
+        version: 0.0.10
       '@react-email/components':
-        specifier: ^0.0.15
-        version: 0.0.15(@types/react@18.0.25)(react-email@1.9.5)(react@18.2.0)
+        specifier: ^0.0.7
+        version: 0.0.7(ts-node@10.9.1)
       '@react-email/html':
-        specifier: 0.0.7
-        version: 0.0.7(react@18.2.0)
+        specifier: 0.0.4
+        version: 0.0.4
       '@react-email/render':
-        specifier: ^0.0.12
-        version: 0.0.12
+        specifier: 0.0.7
+        version: 0.0.7
       classnames:
         specifier: 2.3.2
         version: 2.3.2
@@ -725,8 +725,8 @@ importers:
         specifier: 8.4.6
         version: 8.4.6(react-dom@18.2.0)(react@18.2.0)
       next:
-        specifier: 13.5.4
-        version: 13.5.4(react-dom@18.2.0)(react@18.2.0)
+        specifier: 13.2.4
+        version: 13.2.4(react-dom@18.2.0)(react@18.2.0)
       prism-react-renderer:
         specifier: 1.3.5
         version: 1.3.5(react@18.2.0)
@@ -1197,6 +1197,9 @@ importers:
       next:
         specifier: 14.0.4
         version: 14.0.4(@babel/core@7.22.9)(react-dom@18.2.0)(react@18.2.0)
+      p-map:
+        specifier: ^5.5.0
+        version: 5.5.0
       property-information:
         specifier: ^6.4.0
         version: 6.4.0
@@ -3653,8 +3656,8 @@ packages:
       - bufferutil
       - utf-8-validate
 
-  /@next/env@13.5.4:
-    resolution: {integrity: sha512-LGegJkMvRNw90WWphGJ3RMHMVplYcOfRWf2Be3td3sUa+1AaxmsYyANsA+znrGCBjXJNi4XAQlSoEfUxs/4kIQ==}
+  /@next/env@13.2.4:
+    resolution: {integrity: sha512-+Mq3TtpkeeKFZanPturjcXt+KHfKYnLlX6jMLyCrmpq6OOs4i1GqBOAauSkii9QeKCMTYzGppar21JU57b/GEA==}
     dev: false
 
   /@next/env@14.0.4:
@@ -3677,8 +3680,26 @@ packages:
       glob: 7.1.7
     dev: true
 
-  /@next/swc-darwin-arm64@13.5.4:
-    resolution: {integrity: sha512-Df8SHuXgF1p+aonBMcDPEsaahNo2TCwuie7VXED4FVyECvdXfRT9unapm54NssV9tF3OQFKBFOdlje4T43VO0w==}
+  /@next/swc-android-arm-eabi@13.2.4:
+    resolution: {integrity: sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-android-arm64@13.2.4:
+    resolution: {integrity: sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-darwin-arm64@13.2.4:
+    resolution: {integrity: sha512-S6vBl+OrInP47TM3LlYx65betocKUUlTZDDKzTiRDbsRESeyIkBtZ6Qi5uT2zQs4imqllJznVjFd1bXLx3Aa6A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -3704,8 +3725,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64@13.5.4:
-    resolution: {integrity: sha512-siPuUwO45PnNRMeZnSa8n/Lye5ZX93IJom9wQRB5DEOdFrw0JjOMu1GINB8jAEdwa7Vdyn1oJ2xGNaQpdQQ9Pw==}
+  /@next/swc-darwin-x64@13.2.4:
+    resolution: {integrity: sha512-a6LBuoYGcFOPGd4o8TPo7wmv5FnMr+Prz+vYHopEDuhDoMSHOnC+v+Ab4D7F0NMZkvQjEJQdJS3rqgFhlZmKlw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -3731,8 +3752,26 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu@13.5.4:
-    resolution: {integrity: sha512-l/k/fvRP/zmB2jkFMfefmFkyZbDkYW0mRM/LB+tH5u9pB98WsHXC0WvDHlGCYp3CH/jlkJPL7gN8nkTQVrQ/2w==}
+  /@next/swc-freebsd-x64@13.2.4:
+    resolution: {integrity: sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-linux-arm-gnueabihf@13.2.4:
+    resolution: {integrity: sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/swc-linux-arm64-gnu@13.2.4:
+    resolution: {integrity: sha512-xzYZdAeq883MwXgcwc72hqo/F/dwUxCukpDOkx/j1HTq/J0wJthMGjinN9wH5bPR98Mfeh1MZJ91WWPnZOedOg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -3758,8 +3797,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl@13.5.4:
-    resolution: {integrity: sha512-YYGb7SlLkI+XqfQa8VPErljb7k9nUnhhRrVaOdfJNCaQnHBcvbT7cx/UjDQLdleJcfyg1Hkn5YSSIeVfjgmkTg==}
+  /@next/swc-linux-arm64-musl@13.2.4:
+    resolution: {integrity: sha512-8rXr3WfmqSiYkb71qzuDP6I6R2T2tpkmf83elDN8z783N9nvTJf2E7eLx86wu2OJCi4T05nuxCsh4IOU3LQ5xw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -3785,8 +3824,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu@13.5.4:
-    resolution: {integrity: sha512-uE61vyUSClnCH18YHjA8tE1prr/PBFlBFhxBZis4XBRJoR+txAky5d7gGNUIbQ8sZZ7LVkSVgm/5Fc7mwXmRAg==}
+  /@next/swc-linux-x64-gnu@13.2.4:
+    resolution: {integrity: sha512-Ngxh51zGSlYJ4EfpKG4LI6WfquulNdtmHg1yuOYlaAr33KyPJp4HeN/tivBnAHcZkoNy0hh/SbwDyCnz5PFJQQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -3812,8 +3851,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl@13.5.4:
-    resolution: {integrity: sha512-qVEKFYML/GvJSy9CfYqAdUexA6M5AklYcQCW+8JECmkQHGoPxCf04iMh7CPR7wkHyWWK+XLt4Ja7hhsPJtSnhg==}
+  /@next/swc-linux-x64-musl@13.2.4:
+    resolution: {integrity: sha512-gOvwIYoSxd+j14LOcvJr+ekd9fwYT1RyMAHOp7znA10+l40wkFiMONPLWiZuHxfRk+Dy7YdNdDh3ImumvL6VwA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -3839,8 +3878,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc@13.5.4:
-    resolution: {integrity: sha512-mDSQfqxAlfpeZOLPxLymZkX0hYF3juN57W6vFHTvwKlnHfmh12Pt7hPIRLYIShk8uYRsKPtMTth/EzpwRI+u8w==}
+  /@next/swc-win32-arm64-msvc@13.2.4:
+    resolution: {integrity: sha512-q3NJzcfClgBm4HvdcnoEncmztxrA5GXqKeiZ/hADvC56pwNALt3ngDC6t6qr1YW9V/EPDxCYeaX4zYxHciW4Dw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -3866,8 +3905,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-ia32-msvc@13.5.4:
-    resolution: {integrity: sha512-aoqAT2XIekIWoriwzOmGFAvTtVY5O7JjV21giozBTP5c6uZhpvTWRbmHXbmsjZqY4HnEZQRXWkSAppsIBweKqw==}
+  /@next/swc-win32-ia32-msvc@13.2.4:
+    resolution: {integrity: sha512-/eZ5ncmHUYtD2fc6EUmAIZlAJnVT2YmxDsKs1Ourx0ttTtvtma/WKlMV5NoUsyOez0f9ExLyOpeCoz5aj+MPXw==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -3893,8 +3932,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc@13.5.4:
-    resolution: {integrity: sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==}
+  /@next/swc-win32-x64-msvc@13.2.4:
+    resolution: {integrity: sha512-0MffFmyv7tBLlji01qc0IaPP/LVExzvj7/R5x1Jph1bTAIj4Vu81yFQWHHQAP6r4ff9Ukj1mBK6MDNVXm7Tcvw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -5166,20 +5205,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-compose-refs@1.0.1(@types/react@18.0.25)(react@18.2.0):
-    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.9
-      '@types/react': 18.0.25
-      react: 18.2.0
-    dev: false
-
   /@radix-ui/react-compose-refs@1.0.1(@types/react@18.0.29)(react@18.2.0):
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
@@ -5653,8 +5678,8 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-slot@1.0.1(react@18.2.0):
-    resolution: {integrity: sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==}
+  /@radix-ui/react-slot@1.0.0(react@18.2.0):
+    resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
@@ -5663,18 +5688,13 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-slot@1.0.2(@types/react@18.0.25)(react@18.2.0):
-    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+  /@radix-ui/react-slot@1.0.1(react@18.2.0):
+    resolution: {integrity: sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==}
     peerDependencies:
-      '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
     dependencies:
       '@babel/runtime': 7.23.9
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.25)(react@18.2.0)
-      '@types/react': 18.0.25
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
       react: 18.2.0
     dev: false
 
@@ -6038,6 +6058,12 @@ packages:
       '@babel/runtime': 7.23.9
     dev: false
 
+  /@react-email/body@0.0.2:
+    resolution: {integrity: sha512-SqZrZdxZlH7viwnrLvrMnVzOKpiofVAtho09bmm2siDzy0VMDGItXRzUPLcpg9vcbVJCHZRCIKoNXqA+PtokzQ==}
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@react-email/body@0.0.7(react@18.2.0):
     resolution: {integrity: sha512-vjJ5P1MUNWV0KNivaEWA6MGj/I3c764qQJMsKjCHlW6mkFJ4SXbm2OlQFtKAb++Bj8LDqBlnE6oW77bWcMc0NA==}
     peerDependencies:
@@ -6046,6 +6072,13 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-email/button@0.0.10:
+    resolution: {integrity: sha512-S8r7NGTxXoxvw5kCdMzpwXdBHhYAhrYM9sylK6xr+2M9osrjHQOPLBoV3I/po9xdzN3WyRcZqQixH0wPeXy2Gw==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@react-email/button@0.0.14(react@18.2.0):
     resolution: {integrity: sha512-SMk40moGcAvkHIALX4XercQlK0PNeeEIam6OXHw68ea9WtzzqVwiK4pzLY0iiMI9B4xWHcaS2lCPf3cKbQBf1Q==}
     engines: {node: '>=18.0.0'}
@@ -6055,6 +6088,13 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-email/button@0.0.9:
+    resolution: {integrity: sha512-eYWQ1X4RFlkKYYSPgSrT6rk98wuLOieEAGENrp9j37t1v/1C+jMmBu0UjZvwHsHWdbOMRjbVDFeMI/+MxWKSEg==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@react-email/code-block@0.0.3(react@18.2.0):
     resolution: {integrity: sha512-nxhl7WjjM2cOYtl0boBZfSObTrUCz2LbarcMyHkTVAsA9rbjbtWAQF7jmlefXJusk3Uol5l2c8hTh2lHLlHTRQ==}
     engines: {node: '>=18.0.0'}
@@ -6074,45 +6114,20 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@react-email/column@0.0.9(react@18.2.0):
-    resolution: {integrity: sha512-1ekqNBgmbS6m97/sUFOnVvQtLYljUWamw8Y44VId95v6SjiJ4ca+hMcdOteHWBH67xkRofEOWTvqDRea5SBV8w==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: 18.2.0
+  /@react-email/column@0.0.7:
+    resolution: {integrity: sha512-B29wVXyIcuVprgGpLkR23waPh/twlqmugZQsCKk05JlMCQ80/Puv4Lgj4dRsIJzgyTLMwG6xq17+Uxc5iGfuaQ==}
+    engines: {node: '>=16.0.0'}
     dependencies:
       react: 18.2.0
     dev: false
 
-  /@react-email/components@0.0.15(@types/react@18.0.25)(react-email@1.9.5)(react@18.2.0):
-    resolution: {integrity: sha512-jXfKiuyi94JBYfPVptEUwF57nRCvhEZIfyl2LqbL53fKsMrGlcjlN921iNnx1z41GAJOqZ8LPogeix3Iid23zw==}
+  /@react-email/column@0.0.9(react@18.2.0):
+    resolution: {integrity: sha512-1ekqNBgmbS6m97/sUFOnVvQtLYljUWamw8Y44VId95v6SjiJ4ca+hMcdOteHWBH67xkRofEOWTvqDRea5SBV8w==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: 18.2.0
     dependencies:
-      '@react-email/body': 0.0.7(react@18.2.0)
-      '@react-email/button': 0.0.14(react@18.2.0)
-      '@react-email/code-block': 0.0.3(react@18.2.0)
-      '@react-email/code-inline': 0.0.1(react@18.2.0)
-      '@react-email/column': 0.0.9(react@18.2.0)
-      '@react-email/container': 0.0.11(react@18.2.0)
-      '@react-email/font': 0.0.5(react@18.2.0)
-      '@react-email/head': 0.0.7(react@18.2.0)
-      '@react-email/heading': 0.0.11(@types/react@18.0.25)(react@18.2.0)
-      '@react-email/hr': 0.0.7(react@18.2.0)
-      '@react-email/html': 0.0.7(react@18.2.0)
-      '@react-email/img': 0.0.7(react@18.2.0)
-      '@react-email/link': 0.0.7(react@18.2.0)
-      '@react-email/markdown': 0.0.8(react-email@1.9.5)(react@18.2.0)
-      '@react-email/preview': 0.0.8(react@18.2.0)
-      '@react-email/render': 0.0.12
-      '@react-email/row': 0.0.7(react@18.2.0)
-      '@react-email/section': 0.0.11(react@18.2.0)
-      '@react-email/tailwind': 0.0.14(react@18.2.0)
-      '@react-email/text': 0.0.7(react@18.2.0)
       react: 18.2.0
-    transitivePeerDependencies:
-      - '@types/react'
-      - react-email
     dev: false
 
   /@react-email/components@0.0.15(@types/react@18.0.29)(react-email@2.1.0)(react@18.2.0):
@@ -6179,6 +6194,32 @@ packages:
       - react-email
     dev: false
 
+  /@react-email/components@0.0.7(ts-node@10.9.1):
+    resolution: {integrity: sha512-GpRKV8E7EvK9OPf61f5Z8hliB3p0hTot8tslmEUVCTtX7tdL0wM2YEcZiDWU4PJcudJ/QWHJ7Y5wGzNEARcooA==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      '@react-email/body': 0.0.2
+      '@react-email/button': 0.0.9
+      '@react-email/column': 0.0.7
+      '@react-email/container': 0.0.8
+      '@react-email/font': 0.0.2
+      '@react-email/head': 0.0.5
+      '@react-email/heading': 0.0.8
+      '@react-email/hr': 0.0.5
+      '@react-email/html': 0.0.4
+      '@react-email/img': 0.0.5
+      '@react-email/link': 0.0.5
+      '@react-email/preview': 0.0.6
+      '@react-email/render': 0.0.7
+      '@react-email/row': 0.0.5
+      '@react-email/section': 0.0.9
+      '@react-email/tailwind': 0.0.8(ts-node@10.9.1)
+      '@react-email/text': 0.0.5
+      react: 18.2.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /@react-email/container@0.0.11(react@18.2.0):
     resolution: {integrity: sha512-jzl/EHs0ClXIRFamfH+NR/cqv4GsJJscqRhdYtnWYuRAsWpKBM1muycrrPqIVhWvWi6sFHInWTt07jX+bDc3SQ==}
     engines: {node: '>=18.0.0'}
@@ -6188,6 +6229,19 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-email/container@0.0.8:
+    resolution: {integrity: sha512-MQZQxvTOoLWjJR+Jm689jltm0I/mtZbEaDnwZbNkkHKgccr++wwb9kOKMgXG777Y7tGa1JATAsZpvFYiCITwUg==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      react: 18.2.0
+    dev: false
+
+  /@react-email/font@0.0.2:
+    resolution: {integrity: sha512-mmkyOCAcbgytE7DfIuOBVG1YVDUZY9rPCor4o7pUEzGJiU2y/TNuV8CgNPSU/VgXeBKL/94QDjB62OrGHlFNMQ==}
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@react-email/font@0.0.5(react@18.2.0):
     resolution: {integrity: sha512-if/qKYmH3rJ2egQJoKbV8SfKCPavu+ikUq/naT/UkCr8Q0lkk309tRA0x7fXG/WeIrmcipjMzFRGTm2TxTecDw==}
     peerDependencies:
@@ -6196,25 +6250,20 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@react-email/head@0.0.7(react@18.2.0):
-    resolution: {integrity: sha512-IcXL4jc0H1qzAXJCD9ajcRFBQdbUHkjKJyiUeogpaYSVZSq6cVDWQuGaI23TA9k+pI2TFeQimogUFb3Kgeeudw==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: 18.2.0
+  /@react-email/head@0.0.5:
+    resolution: {integrity: sha512-s84OxJxZMee2z5b1a+RVwY1NOSUNNf1ecjPf6n64aZmMNcNUyn4gOl7RO6xbfBrZko7TigBwsFB1Cgjxtn/ydg==}
+    engines: {node: '>=16.0.0'}
     dependencies:
       react: 18.2.0
     dev: false
 
-  /@react-email/heading@0.0.11(@types/react@18.0.25)(react@18.2.0):
-    resolution: {integrity: sha512-EF5ZtRCxhHPw3m+8iibKKg0RAvAeHj1AP68sjU7s6+J+kvRgllr/E972Wi5Y8UvcIGossCvpX1WrSMDzeB4puA==}
+  /@react-email/head@0.0.7(react@18.2.0):
+    resolution: {integrity: sha512-IcXL4jc0H1qzAXJCD9ajcRFBQdbUHkjKJyiUeogpaYSVZSq6cVDWQuGaI23TA9k+pI2TFeQimogUFb3Kgeeudw==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: 18.2.0
     dependencies:
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.0.25)(react@18.2.0)
       react: 18.2.0
-    transitivePeerDependencies:
-      - '@types/react'
     dev: false
 
   /@react-email/heading@0.0.11(@types/react@18.0.29)(react@18.2.0):
@@ -6241,6 +6290,21 @@ packages:
       - '@types/react'
     dev: false
 
+  /@react-email/heading@0.0.8:
+    resolution: {integrity: sha512-7atATmoHBHTk7hFYFsFFzOIBV3u1zPpsSOWkLBojdjSUdenpk2SbX8GP8/3aBhWl/tuFX9RBGcu1Xes+ZijFLg==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      '@radix-ui/react-slot': 1.0.0(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
+  /@react-email/hr@0.0.5:
+    resolution: {integrity: sha512-nwB8GmSdvPlR/bWjDS07yHtgdfJqtvCaPXee3SVUY69YYP7NeDO/VACJlgrS9V2l79bj1lUpH0MJMU6MNAk5FQ==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@react-email/hr@0.0.7(react@18.2.0):
     resolution: {integrity: sha512-8suK0M/deXHt0DBSeKhSC4bnCBCBm37xk6KJh9M0/FIKlvdltQBem52YUiuqVl1XLB87Y6v6tvspn3SZ9fuxEA==}
     engines: {node: '>=18.0.0'}
@@ -6250,6 +6314,11 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-email/html@0.0.4:
+    resolution: {integrity: sha512-7tRYSnudYAWez+NkPWOM8yLZH7EuYFtYdiLPnzpD+pf4cdk16Gz4up531DaIX6dNBbfbyEFpQxhXZxGeJ5ZkfQ==}
+    engines: {node: '>=16.0.0'}
+    dev: false
+
   /@react-email/html@0.0.7(react@18.2.0):
     resolution: {integrity: sha512-oy7OoRtoOKApVI/5Lz1OZptMKmMYJu9Xn6+lOmdBQchAuSdQtWJqxhrSj/iI/mm8HZWo6MZEQ6SFpfOuf8/P6Q==}
     engines: {node: '>=18.0.0'}
@@ -6259,6 +6328,13 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-email/img@0.0.5:
+    resolution: {integrity: sha512-9ziFgBfrIAL+DpVlsraFcd2KwsTRyobLpqTnoiBYCcVZGod59xbYkmsmB3CbUosmLwPYg6AeD7Q7e+hCiwkWgg==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@react-email/img@0.0.7(react@18.2.0):
     resolution: {integrity: sha512-up9tM2/dJ24u/CFjcvioKbyGuPw1yeJg605QA7VkrygEhd0CoQEjjgumfugpJ+VJgIt4ZjT9xMVCK5QWTIWoaA==}
     engines: {node: '>=18.0.0'}
@@ -6268,25 +6344,20 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@react-email/link@0.0.7(react@18.2.0):
-    resolution: {integrity: sha512-hXPChT3ZMyKnUSA60BLEMD2maEgyB2A37yg5bASbLMrXmsExHi6/IS1h2XiUPLDK4KqH5KFaFxi2cdNo1JOKwA==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: 18.2.0
+  /@react-email/link@0.0.5:
+    resolution: {integrity: sha512-z+QW9f4gXBdyfhl7iYMY3td+rXKeZYK/2AGElEMsxVoywn5D0b6cF8m5w2jbf0U2V3enT+zy9yc1R6AyT59NOg==}
+    engines: {node: '>=16.0.0'}
     dependencies:
       react: 18.2.0
     dev: false
 
-  /@react-email/markdown@0.0.8(react-email@1.9.5)(react@18.2.0):
-    resolution: {integrity: sha512-x/2iTWskE0XoM13Rx80ckwbWaWdS6koYvxW6PHkOJ/k88NPnDIm+TaYvvg2DYSFJAUI0gK/LmIwenbebgNDS+w==}
+  /@react-email/link@0.0.7(react@18.2.0):
+    resolution: {integrity: sha512-hXPChT3ZMyKnUSA60BLEMD2maEgyB2A37yg5bASbLMrXmsExHi6/IS1h2XiUPLDK4KqH5KFaFxi2cdNo1JOKwA==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: 18.2.0
     dependencies:
-      md-to-react-email: 4.1.0(react-email@1.9.5)(react@18.2.0)
       react: 18.2.0
-    transitivePeerDependencies:
-      - react-email
     dev: false
 
   /@react-email/markdown@0.0.8(react-email@2.1.0)(react@18.2.0):
@@ -6301,6 +6372,13 @@ packages:
       - react-email
     dev: false
 
+  /@react-email/preview@0.0.6:
+    resolution: {integrity: sha512-mXDCc3NGpm/4W7gowBtjsTxYXowLNOLsJsYhIfrsjNJWGlVhVFB9uEHm55LjBLpxSG020g6/8LIrpJU6g22qvg==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@react-email/preview@0.0.8(react@18.2.0):
     resolution: {integrity: sha512-Jm0KUYBZQd2w0s2QRMQy0zfHdo3Ns+9bYSE1OybjknlvhANirjuZw9E5KfWgdzO7PyrRtB1OBOQD8//Obc4uIQ==}
     engines: {node: '>=18.0.0'}
@@ -6330,6 +6408,21 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@react-email/render@0.0.7:
+    resolution: {integrity: sha512-hMMhxk6TpOcDC5qnKzXPVJoVGEwfm+U5bGOPH+MyTTlx0F02RLQygcATBKsbP7aI/mvkmBAZoFbgPIHop7ovug==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      html-to-text: 9.0.3
+      pretty: 2.0.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@react-email/row@0.0.5:
+    resolution: {integrity: sha512-dir5l1M7Z/1BQqQkUrKUPIIDPt6ueEf6ScMGoBOcUh+VNNqmnqJE2Q2CH5X3w2uo6a5X7tnVhoJHGa2KTKe8Sw==}
+    engines: {node: '>=16.0.0'}
+    dev: false
+
   /@react-email/row@0.0.7(react@18.2.0):
     resolution: {integrity: sha512-h7pwrLVGk5CIx7Ai/oPxBgCCAGY7BEpCUQ7FCzi4+eThcs5IdjSwDPefLEkwaFS8KZc56UNwTAH92kNq5B7blg==}
     engines: {node: '>=18.0.0'}
@@ -6348,6 +6441,13 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-email/section@0.0.9:
+    resolution: {integrity: sha512-3EbcWJ1jUZrzquWSvXrv8Hbk9V+BGvLcMWQIli4NdIpQlddmlGKUYfXU2mB2d2pf+5ojqkGcFZZ9fWxycB84jQ==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@react-email/tailwind@0.0.14(react@18.2.0):
     resolution: {integrity: sha512-SRRcm08zxrAR5XozaW0X+GAJlTJITakZe0UXBiFZDlSDBLwFMxjaGuQwccqNF0LxDnxmduxYB71mzEAqecgTZg==}
     engines: {node: '>=18.0.0'}
@@ -6357,6 +6457,25 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-email/tailwind@0.0.8(ts-node@10.9.1):
+    resolution: {integrity: sha512-0BLjD5GpiyBK7YDlaDrjHIpj9eTrrZrMJud3f1UPoCZhS+0S/M8LcR8WMbQsR+8/aLGmiy4F4TGZuRQcsJEsFw==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      html-react-parser: 3.0.9(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tw-to-css: 0.0.11(ts-node@10.9.1)
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
+  /@react-email/text@0.0.5:
+    resolution: {integrity: sha512-LXhHiaC6oRRsNAfOzJDos4wQA22eIdVJvR6G7uu4QzUvYNOAatDMf89jRQcKGrxX7InkS640v8sHd9jl5ztM5w==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@react-email/text@0.0.7(react@18.2.0):
     resolution: {integrity: sha512-eHCx0mdllGcgK9X7wiLKjNZCBRfxRVNjD3NNYRmOc3Icbl8M9JHriJIfxBuGCmGg2UAORK5P3KmaLQ8b99/pbA==}
     engines: {node: '>=18.0.0'}
@@ -7185,6 +7304,12 @@ packages:
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
     dev: false
 
+  /@swc/helpers@0.4.14:
+    resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /@swc/helpers@0.5.2:
     resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
     dependencies:
@@ -8229,12 +8354,10 @@ packages:
       acorn: 7.4.1
       acorn-walk: 7.2.0
       xtend: 4.0.2
-    dev: true
 
   /acorn-walk@7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
@@ -8244,7 +8367,6 @@ packages:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn@8.8.2:
     resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
@@ -10544,7 +10666,6 @@ packages:
 
   /defined@1.0.1:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
-    dev: true
 
   /degenerator@5.0.1:
     resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
@@ -10608,7 +10729,6 @@ packages:
       acorn-node: 1.8.2
       defined: 1.0.1
       minimist: 1.2.8
-    dev: true
 
   /devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
@@ -13403,6 +13523,13 @@ packages:
       lru-cache: 7.18.3
     dev: true
 
+  /html-dom-parser@3.1.3:
+    resolution: {integrity: sha512-fI0yyNlIeSboxU+jnrA4v8qj4+M8SI9/q6AKYdwCY2qki22UtKCDTxvagHniECu7sa5/o2zFRdLleA67035lsA==}
+    dependencies:
+      domhandler: 5.0.3
+      htmlparser2: 8.0.1
+    dev: false
+
   /html-encoding-sniffer@3.0.0:
     resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
     engines: {node: '>=12'}
@@ -13420,6 +13547,18 @@ packages:
       void-elements: 3.1.0
     dev: false
 
+  /html-react-parser@3.0.9(react@18.2.0):
+    resolution: {integrity: sha512-gOPZmaCMXNYu7Y9+58k2tLhTMXQ+QN8ctNFijzLuBxJaLZ6TsN+tUpN+MhbI+6nGaBCRGT2rpw6y/AqkTFZckg==}
+    peerDependencies:
+      react: 0.14 || 15 || 16 || 17 || 18
+    dependencies:
+      domhandler: 5.0.3
+      html-dom-parser: 3.1.3
+      react: 18.2.0
+      react-property: 2.0.0
+      style-to-js: 1.1.3
+    dev: false
+
   /html-to-text@9.0.3:
     resolution: {integrity: sha512-hxDF1kVCF2uw4VUJ3vr2doc91pXf2D5ngKcNviSitNkhP9OMOaJkDrFIFL6RMvko7NisWTEiqGpQ9LAxcVok1w==}
     engines: {node: '>=14'}
@@ -13495,6 +13634,15 @@ packages:
       entities: 3.0.1
     dev: true
 
+  /htmlparser2@8.0.1:
+    resolution: {integrity: sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.0.1
+      entities: 4.4.0
+    dev: false
+
   /htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
     dependencies:
@@ -14901,17 +15049,6 @@ packages:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
 
-  /js-beautify@1.14.9:
-    resolution: {integrity: sha512-coM7xq1syLcMyuVGyToxcj2AlzhkDjmfklL8r0JgJ7A76wyGMpJ1oA35mr4APdYNO/o/4YY8H54NQIJzhMbhBg==}
-    engines: {node: '>=12'}
-    hasBin: true
-    dependencies:
-      config-chain: 1.1.13
-      editorconfig: 1.0.4
-      glob: 8.1.0
-      nopt: 6.0.0
-    dev: false
-
   /js-beautify@1.15.1:
     resolution: {integrity: sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==}
     engines: {node: '>=14'}
@@ -16570,17 +16707,6 @@ packages:
     hasBin: true
     dev: false
 
-  /md-to-react-email@4.1.0(react-email@1.9.5)(react@18.2.0):
-    resolution: {integrity: sha512-aQvj4dCuy0wmBVvSB377qTErlpjN5Pl61+5v+B8Z76KoxOgKhbzvK3qnO94eOsuGSWwI+9n4zb3xD3/MypxM4w==}
-    peerDependencies:
-      react: 18.x
-      react-email: '>1.9.3'
-    dependencies:
-      marked: 7.0.4
-      react: 18.2.0
-      react-email: 1.9.5
-    dev: false
-
   /md-to-react-email@4.1.0(react-email@2.1.0)(react@18.2.0):
     resolution: {integrity: sha512-aQvj4dCuy0wmBVvSB377qTErlpjN5Pl61+5v+B8Z76KoxOgKhbzvK3qnO94eOsuGSWwI+9n4zb3xD3/MypxM4w==}
     peerDependencies:
@@ -17565,40 +17691,48 @@ packages:
       trouter: 3.2.1
     dev: false
 
-  /next@13.5.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-+93un5S779gho8y9ASQhb/bTkQF17FNQOtXLKAj3lsNgltEcF0C5PMLLncDmH+8X1EnJH1kbqAERa29nRXqhjA==}
-    engines: {node: '>=16.14.0'}
+  /next@13.2.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-g1I30317cThkEpvzfXujf0O4wtaQHtDCLhlivwlTJ885Ld+eOgcz7r3TGQzeU+cSRoNHtD8tsJgzxVdYojFssw==}
+    engines: {node: '>=14.6.0'}
     hasBin: true
     peerDependencies:
-      '@opentelemetry/api': ^1.1.0
+      '@opentelemetry/api': ^1.4.0
+      fibers: '>= 3.1.0'
+      node-sass: ^6.0.0 || ^7.0.0
       react: ^18.2.0
       react-dom: ^18.2.0
       sass: ^1.3.0
     peerDependenciesMeta:
       '@opentelemetry/api':
         optional: true
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.5.4
-      '@swc/helpers': 0.5.2
-      busboy: 1.6.0
+      '@next/env': 13.2.4
+      '@swc/helpers': 0.4.14
       caniuse-lite: 1.0.30001591
-      postcss: 8.4.31
+      postcss: 8.4.14
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       styled-jsx: 5.1.1(@babel/core@7.22.9)(react@18.2.0)
-      watchpack: 2.4.0
     optionalDependencies:
-      '@next/swc-darwin-arm64': 13.5.4
-      '@next/swc-darwin-x64': 13.5.4
-      '@next/swc-linux-arm64-gnu': 13.5.4
-      '@next/swc-linux-arm64-musl': 13.5.4
-      '@next/swc-linux-x64-gnu': 13.5.4
-      '@next/swc-linux-x64-musl': 13.5.4
-      '@next/swc-win32-arm64-msvc': 13.5.4
-      '@next/swc-win32-ia32-msvc': 13.5.4
-      '@next/swc-win32-x64-msvc': 13.5.4
+      '@next/swc-android-arm-eabi': 13.2.4
+      '@next/swc-android-arm64': 13.2.4
+      '@next/swc-darwin-arm64': 13.2.4
+      '@next/swc-darwin-x64': 13.2.4
+      '@next/swc-freebsd-x64': 13.2.4
+      '@next/swc-linux-arm-gnueabihf': 13.2.4
+      '@next/swc-linux-arm64-gnu': 13.2.4
+      '@next/swc-linux-arm64-musl': 13.2.4
+      '@next/swc-linux-x64-gnu': 13.2.4
+      '@next/swc-linux-x64-musl': 13.2.4
+      '@next/swc-win32-arm64-msvc': 13.2.4
+      '@next/swc-win32-ia32-msvc': 13.2.4
+      '@next/swc-win32-x64-msvc': 13.2.4
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -17835,14 +17969,6 @@ packages:
     dev: false
     optional: true
 
-  /nopt@6.0.0:
-    resolution: {integrity: sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      abbrev: 1.1.1
-    dev: false
-
   /nopt@7.2.0:
     resolution: {integrity: sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -18878,6 +19004,17 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-css-variables@0.18.0(postcss@8.4.21):
+    resolution: {integrity: sha512-lYS802gHbzn1GI+lXvy9MYIYDuGnl1WB4FTKoqMQqJ3Mab09A7a/1wZvGTkCEZJTM8mSbIyb1mJYn8f0aPye0Q==}
+    peerDependencies:
+      postcss: ^8.2.6
+    dependencies:
+      balanced-match: 1.0.2
+      escape-string-regexp: 1.0.5
+      extend: 3.0.2
+      postcss: 8.4.21
+    dev: false
+
   /postcss-discard-comments@6.0.0(postcss@8.4.35):
     resolution: {integrity: sha512-p2skSGqzPMZkEQvJsgnkBhCn8gI7NzRH2683EEjrIkoMiwRELx68yoUJ3q3DGSGuQ8Ug9Gsn+OuDr46yfO+eFw==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -18926,6 +19063,18 @@ packages:
       resolve: 1.22.8
     dev: true
 
+  /postcss-import@14.1.0(postcss@8.4.21):
+    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.21
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+    dev: false
+
   /postcss-import@15.1.0(postcss@8.4.35):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -18947,6 +19096,16 @@ packages:
       postcss: 8.4.19
     dev: true
 
+  /postcss-js@4.0.1(postcss@8.4.21):
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.21
+    dev: false
+
   /postcss-js@4.0.1(postcss@8.4.35):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
@@ -18974,6 +19133,23 @@ packages:
       yaml: 1.10.2
     dev: true
 
+  /postcss-load-config@3.1.4(postcss@8.4.21)(ts-node@10.9.1):
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.1.0
+      postcss: 8.4.21
+      ts-node: 10.9.1(@swc/core@1.3.51)(@types/node@18.15.10)(typescript@5.0.2)
+      yaml: 1.10.2
+
   /postcss-load-config@4.0.2(postcss@8.4.35)(ts-node@10.9.1):
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
     engines: {node: '>= 14'}
@@ -19126,6 +19302,16 @@ packages:
       postcss-selector-parser: 6.0.11
     dev: true
 
+  /postcss-nested@6.0.0(postcss@8.4.21):
+    resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.21
+      postcss-selector-parser: 6.0.11
+    dev: false
+
   /postcss-nested@6.0.1(postcss@8.4.35):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
@@ -19296,6 +19482,15 @@ packages:
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
+  /postcss@8.4.14:
+    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: false
+
   /postcss@8.4.19:
     resolution: {integrity: sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==}
     engines: {node: ^10 || ^12 || >=14}
@@ -19305,6 +19500,14 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /postcss@8.4.21:
+    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
   /postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -19438,7 +19641,7 @@ packages:
     dependencies:
       condense-newlines: 0.2.1
       extend-shallow: 2.0.1
-      js-beautify: 1.14.9
+      js-beautify: 1.15.1
     dev: false
 
   /prism-react-renderer@1.3.5(react@18.2.0):
@@ -19982,6 +20185,10 @@ packages:
       - supports-color
     dev: false
 
+  /react-property@2.0.0:
+    resolution: {integrity: sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw==}
+    dev: false
+
   /react-refresh@0.9.0:
     resolution: {integrity: sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==}
     engines: {node: '>=0.10.0'}
@@ -21562,12 +21769,24 @@ packages:
       '@types/node': 18.15.10
       qs: 6.11.1
 
+  /style-to-js@1.1.3:
+    resolution: {integrity: sha512-zKI5gN/zb7LS/Vm0eUwjmjrXWw8IMtyA8aPBJZdYiQTXj4+wQ3IucOLIOnF7zCHxvW8UhIGh/uZh/t9zEHXNTQ==}
+    dependencies:
+      style-to-object: 0.4.1
+    dev: false
+
   /style-to-object@0.3.0:
     resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==}
     dependencies:
       inline-style-parser: 0.1.1
     dev: false
 
+  /style-to-object@0.4.1:
+    resolution: {integrity: sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==}
+    dependencies:
+      inline-style-parser: 0.1.1
+    dev: false
+
   /style-to-object@1.0.5:
     resolution: {integrity: sha512-rDRwHtoDD3UMMrmZ6BzOW0naTjMsVZLIjsGleSKS/0Oz+cgCfAPRspaqJuE8rDzpKha/nEvnM0IF4seEAZUTKQ==}
     dependencies:
@@ -21800,6 +22019,40 @@ packages:
       - ts-node
     dev: true
 
+  /tailwindcss@3.2.7(postcss@8.4.21)(ts-node@10.9.1):
+    resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==}
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
+    dependencies:
+      arg: 5.0.2
+      chokidar: 3.5.3
+      color-name: 1.1.4
+      detective: 5.2.1
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.1
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.21
+      postcss-import: 14.1.0(postcss@8.4.21)
+      postcss-js: 4.0.1(postcss@8.4.21)
+      postcss-load-config: 3.1.4(postcss@8.4.21)(ts-node@10.9.1)
+      postcss-nested: 6.0.0(postcss@8.4.21)
+      postcss-selector-parser: 6.0.11
+      postcss-value-parser: 4.2.0
+      quick-lru: 5.1.1
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /tailwindcss@3.4.0(ts-node@10.9.1):
     resolution: {integrity: sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==}
     engines: {node: '>=14.0.0'}
@@ -22323,7 +22576,7 @@ packages:
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 3.1.4(postcss@8.4.19)(ts-node@10.9.1)
+      postcss-load-config: 3.1.4(postcss@8.4.21)(ts-node@10.9.1)
       resolve-from: 5.0.0
       rollup: 2.78.0
       source-map: 0.8.0-beta.0
@@ -22421,6 +22674,17 @@ packages:
       turbo-windows-arm64: 1.11.2
     dev: true
 
+  /tw-to-css@0.0.11(ts-node@10.9.1):
+    resolution: {integrity: sha512-uIJuEBIwyHzZg9xyGyEgDWHIkbAwEC4bhEHQ4THPuN5SToR7Zlhes5ffMjqtrv+WdtTmudTHTdc9VwUldy0FxQ==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      postcss: 8.4.21
+      postcss-css-variables: 0.18.0(postcss@8.4.21)
+      tailwindcss: 3.2.7(postcss@8.4.21)(ts-node@10.9.1)
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /tweetnacl@0.14.5:
     resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
     dev: true