diff --git a/app/(app)/Appointments/index.tsx b/app/(app)/Appointments/index.tsx
index 2aa54f81..a203b8e5 100644
--- a/app/(app)/Appointments/index.tsx
+++ b/app/(app)/Appointments/index.tsx
@@ -10,6 +10,7 @@ import {
   ImageBackground,
   ScrollView,
   Pressable,
+  TextInput
 } from "react-native";
 import { SvgXml } from "react-native-svg";
 import { SearchIcon } from "@/assets/icons/SearchSvg";
@@ -18,18 +19,57 @@ import Line from "@/components/Line";
 import Typography from "@/constants/Typography";
 import { StatusBar } from "expo-status-bar";
 import { router } from "expo-router";
+import appointmentsData from '../../Appointments.json';
+import DoctorCard from '@/components/AppointmentDoctorsCards';
+import SearchComponent from '@/components/SearchComponent';
+import NofoundComponent from '@/components/NofoundComponent';
 
+interface imageMapProp{
+  [key:string]:ReturnType<typeof require>
+}
+
+const imageMap:imageMapProp = {
+  'doctor1.png': require("../../../assets/images/Doctors/doctor1.png"),
+  'doctor2.png': require("../../../assets/images/Doctors/doctor2.png"),
+  'doctor3.png': require("../../../assets/images/Doctors/doctor3.png"),
+  'doctor4.png': require("../../../assets/images/Doctors/doctor4.png"),
+  'doctor5.png':require("../../../assets/images/Doctors/doctor5.png"),
+  'VideoCall.png': require('@/assets/images/VideoCall.png'),
+  'VoiceCall.png': require('@/assets/images/VoiceCall.png'),
+  'Messaging.png': require('@/assets/images/Messaging.png'),
+}
+
+
+type Doctor = {
+  name: string;
+  date: string;
+  time: string;
+  image: any;
+  status: string;
+  statusColor: string;
+  type: string;
+  icon: any;
+};
 
-export default function UpcomingAppointment() {
-  const [activeTab, setActiveTab] = useState("Upcoming");
+type DoctorsData = {
+  Upcoming: Doctor[];
+  Completed: Doctor[];
+  Cancelled: Doctor[];
+};
+
+type TabKey = 'Upcoming' | 'Completed' | 'Cancelled';
+
+
+const AppointmentScreen: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<TabKey>('Upcoming');
   const [headerWidth, setHeaderWidth] = useState(0);
-  const [activeIcon, setActiveIcon] = useState("Appointment");
-  const [text, setText] = useState("");
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filteredData, setFilteredData] = useState<DoctorsData>(appointmentsData);
   const navigation = useNavigation();
 
   useEffect(() => {
     const updateHeaderWidth = () => {
-      const screenWidth = Dimensions.get("window").width;
+      const screenWidth = Dimensions.get('window').width;
       const headerPadding = 20 * 2;
       const headerAvailableWidth = screenWidth - headerPadding;
       setHeaderWidth(headerAvailableWidth);
@@ -38,32 +78,31 @@ export default function UpcomingAppointment() {
     updateHeaderWidth();
   }, []);
 
-  const handleTabPress = (screen: "Upcoming" | "Completed" | "Cancelled") => {
+  const handleTabPress = (screen: TabKey) => {
     setActiveTab(screen);
-
-    if (screen === "Upcoming") {
-      navigation.navigate("Appointments/ScheduledAppointments/AppointmentUpcoming" as never);
-    } else if (screen === "Completed") {
-      navigation.navigate("Appointments/ScheduledAppointments/AppointmentCompleted" as never);
-    } else if (screen === "Cancelled") {
-      navigation.navigate("Appointments/ScheduledAppointments/AppointmentCancelledScreen" as never);
-    }
+    setSearchTerm('');
+    setFilteredData(appointmentsData);
   };
 
-  const activeTabLinePosition = {
-    width: headerWidth / 3,
-    left:
-      activeTab === "Upcoming"
-        ? 0
-        : activeTab === "Completed"
-        ? headerWidth / 3
-        : (headerWidth * 2) / 3,
+  const handleSearch = (text: string) => {
+    setSearchTerm(text);
+    const updatedData: DoctorsData = {
+      Upcoming: [],
+      Completed: [],
+      Cancelled: [],
+    };
+
+    (Object.keys(appointmentsData) as TabKey[]).forEach(key => {
+      updatedData[key] = appointmentsData[key].filter((doctor: Doctor) =>
+        doctor.name.toLowerCase().includes(text.toLowerCase())
+      );
+    });
+
+    setFilteredData(updatedData);
   };
+  
 
-  const renderTab = (
-    screen: "Upcoming" | "Completed" | "Cancelled",
-    label: string
-  ) => {
+  const renderTab = (screen: TabKey, label: string) => {
     const isActive = activeTab === screen;
     return (
       <TouchableOpacity
@@ -71,591 +110,183 @@ export default function UpcomingAppointment() {
         style={[
           styles.tab,
           isActive && styles.activeTab,
-          { borderBottomColor: isActive ? "#246BFD" : "#D3D3D3" },
+          { borderBottomColor: isActive ? '#246BFD' : '#D3D3D3' },
         ]}
         onPress={() => handleTabPress(screen)}
       >
-        <Text style={[styles.tabText, isActive && styles.activeTabText]}>
-          {label}
-        </Text>
+        <Text style={[styles.tabText, isActive && styles.activeTabText]}>{label}</Text>
       </TouchableOpacity>
     );
   };
 
+  const activeTabLinePosition = {
+    width: headerWidth / 3,
+    left: activeTab === 'Upcoming' ? 0 : activeTab === 'Completed' ? headerWidth / 3 : (headerWidth * 2) / 3,
+  };
+
+  const getButtons = (tab: TabKey) => {
+    if (tab === 'Upcoming') {
+      return [
+        { label: 'Cancel Appointment', action: () => console.log('Cancel Appointment'), styleType: 'cancel' as const },
+        { label: 'Reschedule', action: () => console.log('Reschedule'), styleType: 'primary' as const },
+      ];
+    } else if (tab === 'Completed') {
+      return [
+        { label: 'Book Again', action: () => console.log('Book Again'), styleType: 'cancel' as const },
+        { label: 'Leave a Review', action: () => console.log('Leave a Review'), styleType: 'primary' as const },
+      ];
+    }
+    return [];
+  };
+
   return (
     <View style={styles.container}>
-      <StatusBar style="dark"/>
       <ImageBackground style={styles.header}>
         <View style={styles.heading}>
-          <Image
-            style={styles.headerLogo}
-            source={require("@/assets/images/DefaultLogo.png")}
-          ></Image>
-          <Text style={styles.headerTitle}>My Appointment </Text>
+          <Image style={styles.headerLogo} source={require('@/assets/images/DefaultLogo.png')}></Image>
+          <Text style={styles.headerTitle}>My Appointment</Text>
           <TouchableOpacity>
-            <SvgXml xml={SearchIcon} style={[styles.SearchIcon]} />
+            <SvgXml xml={SearchIcon} style={styles.searchIcon} />
           </TouchableOpacity>
           <TouchableOpacity>
-            <SvgXml xml={MoreIcon} style={[styles.MoreIcon]} />
+            <SvgXml xml={MoreIcon} style={styles.moreIcon} />
           </TouchableOpacity>
         </View>
         <View style={styles.headerNav}>
-          <TouchableOpacity onPress={() => handleTabPress("Upcoming")}>
-            <Text>{renderTab("Upcoming", "Upcoming")}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleTabPress("Completed")}>
-            <Text>{renderTab("Completed", "Completed")}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleTabPress("Cancelled")}>
-            <Text>{renderTab("Cancelled", "Cancelled")}</Text>
-          </TouchableOpacity>
+          {renderTab('Upcoming', 'Upcoming')}
+          {renderTab('Completed', 'Completed')}
+          {renderTab('Cancelled', 'Cancelled')}
           <View style={[styles.activeTabLine, activeTabLinePosition]} />
         </View>
+        
       </ImageBackground>
-
-      <ScrollView>
-        <ImageBackground style={styles.cardContainer}>
-          {/* 1st Card*/}
-          <ImageBackground style={styles.card}>
-            <View style={styles.upperSection}>
-              <Image
-                style={styles.cardImage}
-                source={require("@/assets/images/Randy.png")}
-              ></Image>
-              <ImageBackground style={styles.DocDescription}>
-                <View style={styles.CardHeader}>
-                  <Text style={[styles.DocName, Typography.bold.xLarge]}> Dr. Drake Boeson</Text>
-                </View>
-                <View style={styles.DocStatus}>
-                  <Text>Messaging - </Text>
-                  <View
-                    style={{
-                      backgroundColor: "#ffffff",
-                      padding: 2,
-                      paddingHorizontal: 10,
-                      borderColor: "#246BFD",
-                      borderWidth: 2,
-                      borderRadius: 10,
-                      height: 30,
-                      alignItems: "center",
-                    }}
-                  >
-                    <Text
-                      style={{
-                        color: "#246BFD",
-                        fontSize: 12,
-                      }}
-                    >
-                      Upcoming
-                    </Text>
-                  </View>
-                  <TouchableOpacity onPress={()=>router.push("/Appointments/MessagingAppointment")}>
-                  <Image
-                    style={{ marginBottom: 10, marginLeft: "6%" }}
-                    source={require("@/assets/images/Messaging.png")}
-                    />
-                    </TouchableOpacity>
-                </View>
-                <Text style={styles.Date}>Today | 16:00 PM</Text>
-              </ImageBackground>
-            </View>
-            <Line
-              color="#EEEEEE"
-              thickness={2}
-              style={{ marginLeft: 10, marginTop: 20, width: "90%" }}
-            />
-            <View style={styles.CardButtons}>
-              <TouchableOpacity
-                style={{
-                  backgroundColor: "#ffffff",
-                  marginLeft: 10,
-                  padding: 5,
-                  paddingHorizontal: 10,
-                  borderColor: "#246BFD",
-                  borderWidth: 2,
-                  borderRadius: 20,
-                  height: 34,
-                  alignItems: "center",
-                }}
-              >
-                <Text
-                  style={{  color: "#246BFD" }}
-                >
-                  Cancel Appointment
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={{
-                  backgroundColor: "#246BFD",
-                  padding: 5,
-                  paddingHorizontal: 10,
-                  borderRadius: 20,
-                  justifyContent: "center",
-                  width: 150,
-                  height: 34,
-                  alignItems: "center",
-                }}
-                onPress={()=> router.push('/(app)/Appointments/ReschedualAppointment/selectreason')}
-              >
-                <Text
-                  style={{  color: "white" }}
-                >
-                  Reschedule
-                </Text>
-              </TouchableOpacity>
-            </View>
-          </ImageBackground>
-
-          {/* 2nd Card*/}
-          <ImageBackground style={styles.card}>
-            <View style={styles.upperSection}>
-              <Image
-                style={styles.cardImage}
-                source={require("@/assets/images/Dr jenny.png")}
-              ></Image>
-              <ImageBackground style={styles.DocDescription}>
-                <View style={styles.CardHeader}>
-                  <Text style={styles.DocName}> Dr. Jenny Watson</Text>
-                </View>
-                <View style={styles.DocStatus}>
-                  <Text>Voice call - </Text>
-                  <View
-                    style={{
-                      backgroundColor: "#ffffff",
-                      padding: 2,
-                      paddingHorizontal: 10,
-                      borderColor: "#246BFD",
-                      borderWidth: 2,
-                      borderRadius: 10,
-                      height: 30,
-                      alignItems: "center",
-                    }}
-                  >
-                    <Text
-                      style={{
-                        color: "#246BFD",
-                        fontSize: 12,
-                      }}
-                    >
-                      Upcoming
-                    </Text>
-                  </View>
-                  <TouchableOpacity onPress={()=> router.push('/(app)/Appointments/VoiceCallAppointment/MyAppointmentVoiceCall')}>
-                  <Image
-                    style={{ marginBottom: 10, marginLeft: "6%" }}
-                    source={require("@/assets/images/VoiceCall.png")}
-                  />
-                  </TouchableOpacity>
-
-                </View>
-                <Text style={styles.Date}>Today | 14:00 PM</Text>
-              </ImageBackground>
-            </View>
-            <Line
-              color="#EEEEEE"
-              thickness={2}
-              style={{ marginLeft: 10, marginTop: 20, width: "90%" }}
-            />
-            <View style={styles.CardButtons}>
-              <TouchableOpacity
-                style={{
-                  backgroundColor: "#ffffff",
-                  marginLeft: 10,
-                  padding: 5,
-                  paddingHorizontal: 10,
-                  borderColor: "#246BFD",
-                  borderWidth: 2,
-                  borderRadius: 20,
-                  height: 34,
-                  alignItems: "center",
-                }}
-              >
-                <Text
-                  style={{  color: "#246BFD" }}
-                >
-                  Cancel Appointment
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={{
-                  backgroundColor: "#246BFD",
-                  padding: 5,
-                  paddingHorizontal: 10,
-                  borderRadius: 20,
-                  justifyContent: "center",
-                  width: 150,
-                  height: 34,
-                  alignItems: "center",
-                }}
-              >
-                <Text
-                  style={{ color: "white" }}
-                >
-                  Reschedule
-                </Text>
-              </TouchableOpacity>
-            </View>
-          </ImageBackground>
-
-          {/* 3rd Card*/}
-          <ImageBackground style={styles.card}>
-            <View style={styles.upperSection}>
-              <Image
-                style={styles.cardImage}
-                source={require("@/assets/images/Dr maria.png")}
-              ></Image>
-              <ImageBackground style={styles.DocDescription}>
-                <View style={styles.CardHeader}>
-                  <Text style={styles.DocName}> Dr. Maria Foose</Text>
-                </View>
-                <View style={styles.DocStatus}>
-                  <Text>Messaging - </Text>
-                  <View
-                    style={{
-                      backgroundColor: "#ffffff",
-                      padding: 2,
-                      paddingHorizontal: 10,
-                      borderColor: "#246BFD",
-                      borderWidth: 2,
-                      borderRadius: 10,
-                      height: 30,
-                      alignItems: "center",
-                    }}
-                  >
-                    <Text
-                      style={{
-                        color: "#246BFD",
-                        fontSize: 12,
-                      }}
-                    >
-                      Upcoming
-                    </Text>
-                  </View>
-                  <Image
-                    style={{ marginBottom: 10, marginLeft: "6%" }}
-                    source={require("@/assets/images/VideoCall.png")}
-                  ></Image>
-                </View>
-                <Text style={styles.Date}>Today | 10:00 AM</Text>
-              </ImageBackground>
-            </View>
-            <Line
-              color="#EEEEEE"
-              thickness={2}
-              style={{ marginLeft: 10, marginTop: 20, width: "90%" }}
-            />
-            <View style={styles.CardButtons}>
-              <TouchableOpacity
-                style={{
-                  backgroundColor: "#ffffff",
-                  marginLeft: 10,
-                  padding: 5,
-                  paddingHorizontal: 10,
-                  borderColor: "#246BFD",
-                  borderWidth: 2,
-                  borderRadius: 20,
-                  height: 34,
-                  alignItems: "center",
-                }}
-              >
-                <Text
-                  style={{ color: "#246BFD" }}
-                >
-                  Cancel Appointment
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={{
-                  backgroundColor: "#246BFD",
-                  padding: 5,
-                  paddingHorizontal: 10,
-                  borderRadius: 20,
-                  justifyContent: "center",
-                  width: 150,
-                  height: 34,
-                  alignItems: "center",
-                }}
-              >
-                <Text
-                  style={{  color: "white" }}
-                >
-                  Reschedule
-                </Text>
-              </TouchableOpacity>
-            </View>
-          </ImageBackground>
-
-          {/* 4th Card*/}
-          <ImageBackground style={styles.card}>
-            <View style={styles.upperSection}>
-              <Image
-                style={styles.cardImage}
-                source={require("@/assets/images/Randy.png")}
-              ></Image>
-              <ImageBackground style={styles.DocDescription}>
-                <View style={styles.CardHeader}>
-                  <Text style={styles.DocName}> Dr. Drake Boeson</Text>
-                </View>
-                <View style={styles.DocStatus}>
-                  <Text>Messaging - </Text>
-                  <View
-                    style={{
-                      backgroundColor: "#ffffff",
-                      padding: 2,
-                      paddingHorizontal: 10,
-                      borderColor: "#246BFD",
-                      borderWidth: 2,
-                      borderRadius: 10,
-                      height: 30,
-                      alignItems: "center",
-                    }}
-                  >
-                    <Text
-                      style={{
-                        color: "#246BFD",
-                        fontSize: 12,
-                      }}
-                    >
-                      Upcoming
-                    </Text>
-                  </View>
-                  <Image
-                    style={{ marginBottom: 10, marginLeft: "6%" }}
-                    source={require("@/assets/images/Messaging.png")}
-                  ></Image>
-                </View>
-                <Text style={styles.Date}>Today | 16:00 PM</Text>
-              </ImageBackground>
-            </View>
-            <Line
-              color="#EEEEEE"
-              thickness={2}
-              style={{ marginLeft: 10, marginTop: 20, width: "90%" }}
-            />
-            <View style={styles.CardButtons}>
-              <TouchableOpacity
-                style={{
-                  backgroundColor: "#ffffff",
-                  marginLeft: 10,
-                  padding: 5,
-                  paddingHorizontal: 10,
-                  borderColor: "#246BFD",
-                  borderWidth: 2,
-                  borderRadius: 20,
-                  height: 34,
-                  alignItems: "center",
-                }}
-              >
-                <Text
-                  style={{  color: "#246BFD" }}
-                >
-                  Cancel Appointment
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={{
-                  backgroundColor: "#246BFD",
-                  padding: 5,
-                  paddingHorizontal: 10,
-                  borderRadius: 20,
-                  justifyContent: "center",
-                  width: 150,
-                  height: 34,
-                  alignItems: "center",
-                }}
-              >
-                <Text
-                  style={{  color: "white" }}
-                >
-                  Reschedule
-                </Text>
-              </TouchableOpacity>
-            </View>
-          </ImageBackground>
-        </ImageBackground>
+      
+      <ScrollView style={styles.cardContainer}>
+        {filteredData[activeTab].map((doctor: Doctor, index: number) => (
+          <DoctorCard
+            key={index}
+            name={doctor.name}
+            date={doctor.date}
+            time={doctor.time}
+            image={imageMap[doctor.image]}
+            status={doctor.status}
+            statusColor={doctor.statusColor}
+            type={doctor.type}
+            icon={imageMap[doctor.icon]}
+            buttons={activeTab !== 'Cancelled' ? getButtons(activeTab) : []}
+          />
+        ))}
       </ScrollView>
+
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "#F7F7F7",
-    padding: 0,
-    height: "100%",
+    flex: 1,
+    backgroundColor: '#F5F5F5',
   },
   header: {
-    padding: 20,
+    backgroundColor: '#FFFFFF',
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+    height: '20%',
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
   },
-
   heading: {
-    backgroundColor: "transparent",
-    flexDirection: "row",
-    width: "100%",
-    marginBottom: "0%",
-    marginTop: "5%",
-    padding: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 30,
   },
-
   headerLogo: {
-    backgroundColor: "transparent",
+    width: 40,
+    height: 40,
   },
   headerTitle: {
-    fontSize: 22,
-    marginLeft: "3%",
+    color: '#000000',
+    fontSize: 20,
+    fontFamily: 'Urbanist-bold',
   },
-  SearchIcon: {
-    marginLeft: 75,
+  searchIcon: {
+    color: '#FFFFFF',
+    width: 20,
+    height: 20,
   },
-  MoreIcon: {
-    marginLeft: 25,
+  moreIcon: {
+    color: '#FFFFFF',
+    width: 20,
+    height: 20,
   },
-
   headerNav: {
-    flexDirection: "row",
-    justifyContent: "space-around",
-    alignItems: "center",
-    borderBottomWidth: 2,
-    borderBottomColor: "#D3D3D3",
-    paddingBottom: 10,
-    position: "relative",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 20,
   },
   tab: {
-    paddingVertical: 8,
+    paddingBottom: 10,
+    borderBottomWidth: 2,
+  },
+  activeTab: {
+    borderBottomColor: '#246BFD',
   },
   tabText: {
+    fontFamily: 'Urbanist-bold',
     fontSize: 16,
-    marginTop: "4%",
-    color: "#9E9E9E",
-  },
-  activeTab: {
-    // Define styles for active tab if needed
+    color: '#D3D3D3',
   },
   activeTabText: {
-    color: "#246BFD",
-    fontWeight: "bold",
+    color: '#246BFD',
   },
   activeTabLine: {
-    position: "absolute",
-    bottom: 0,
-    height: 3,
-    backgroundColor: "#246BFD",
-    zIndex: 1,
-  },
-
-  Body: {
-    height: "100%",
-    width: "100%",
-    backgroundColor: "#F5F5F5",
-  },
-
-  Footer: {
-    backgroundColor: "#FFFFFF",
-    height: 90,
-    width: "100%",
-    marginTop: "0%",
-    marginLeft: "0%",
-    alignItems: "flex-start",
-    justifyContent: "space-around",
-    marginBottom: "0%",
-    flexDirection: "row",
-    gap: 45,
-    //position:'absolute'
-    position: "absolute",
+    position: 'absolute',
     bottom: 0,
-    left: 0,
-    right: 0,
-    padding: 20,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-  },
-  icon: {
-    marginLeft: "0%",
-  },
-  iconText: {
-    color: "#000000",
-    fontSize: 12,
-    marginLeft: "0%",
-  },
-  activeIcon: {
-    color: "#246BFD", // Example: change color for active icon
-  },
-  activeText: {
-    color: "#246BFD", // Example: change color for active text
-    fontWeight: "bold", // Example: apply font weight for active text
+    height: 2,
+    backgroundColor: '#246BFD',
   },
-  iconsBox: {
-    backgroundColor: "transparent",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-
   cardContainer: {
-    backgroundColor: "#F5F5F5",
-    width: "100%",
-    height: "100%",
-    padding: 5,
+    flex: 1,
+    paddingHorizontal: 10,
+    paddingTop: 10,
+    paddingBottom:20
   },
-  card: {
-    width: "95%",
-    height: 210,
-    marginTop: 20,
-    marginLeft: "2%",
-    borderRadius: 20,
-    backgroundColor: "#FFFFFF",
-    padding: 15,
-    flexDirection: "column",
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    backgroundColor: '#FFFFFF',
+    borderTopWidth: 1,
+    borderTopColor: '#D3D3D3',
   },
-  cardImage: {
-    height: 110,
-    width: "30%",
-    borderRadius: 20,
-    //backgroundColor:'black'
+  footerButton: {
+    alignItems: 'center',
   },
-
-  upperSection: {
-    flexDirection: "row",
-  },
-
-  CardButtons: {
-    flexDirection: "row",
-    gap: 20,
-    marginLeft: "1%",
-    marginTop: "4%",
+  footerIcon: {
+    width: 24,
+    height: 24,
   },
-
-  DocName: {
-    color: "#000000",
-    marginLeft: "3%",
-    marginRight: "18%",
-    marginTop: "1%",
-    fontSize: 20,
-    padding: 0,
-  },
-  DocDescription: {
-    flexDirection: "column",
-    backgroundColor: "transparent",
-  },
-  DocHeart: {
-    marginTop: "3%",
-  },
-  CardHeader: {
-    flexDirection: "row",
-    backgroundColor: "transparent",
-  },
-  Date: {
-    backgroundColor: "transparent",
-    color: "#424242",
+  footerButtonText: {
+    fontFamily: 'Urbanist-regular',
     fontSize: 12,
-    marginLeft: "5%",
-    marginTop: "0%",
+    color: '#D3D3D3',
+  },
+  activeFooterButtonText: {
+    color: '#246BFD',
   },
-  DocStatus: {
-    backgroundColor: "transparent",
-    flexDirection: "row",
-    marginLeft: "5%",
-    marginTop: "0%",
-    justifyContent: "center",
-    alignItems: "center",
+  searchContainer: {
+    marginTop: 10,
+    paddingHorizontal: 20,
   },
+  searchInput: {
+    height: 40,
+    backgroundColor: '#F0F0F0',
+    borderRadius: 20,
+    paddingHorizontal: 20,
+  }
 });
+
+export default AppointmentScreen;
diff --git a/app/Appointments.json b/app/Appointments.json
new file mode 100644
index 00000000..519e1df6
--- /dev/null
+++ b/app/Appointments.json
@@ -0,0 +1,21 @@
+{
+    "Upcoming": [
+      { "name": "Dr. Raul Zirkind", "date": "Dec 12, 2022", "time": "16:00 PM", "image": "doctor1.png", "status": "Upcoming", "statusColor": "#246BFD", "type": "Video Call", "icon": "VoiceCall.png" },
+      { "name": "Dr. Keegan Dach", "date": "Nov 20, 2022", "time": "10:00 AM", "image": "doctor2.png","status": "Upcoming", "statusColor": "#246BFD", "type": "Messaging", "icon": "Messaging.png"},
+      {"name": "Dr. Drake Boeson", "date": "Nov 08, 2022", "time": "13:00 PM", "image": "doctor3.png","status": "Upcoming", "statusColor": "#246BFD","type": "Video Call", "icon": "VideoCall.png"},
+      {"name": "Dr. Quinn Slatter", "date": "Oct 16, 2022", "time": "09:00 AM", "image": "doctor4.png","status": "Upcoming", "statusColor": "#246BFD","type": "Voice Call", "icon": "VoiceCall.png"}
+    ],
+    "Completed": [
+      { "name": "Dr. Keegan Dach", "date": "Nov 20, 2022", "time": "10:00 AM", "image": "doctor2.png", "status": "Completed", "statusColor": "#28A745", "type": "Messaging", "icon": "Messaging.png" },
+      { "name": "Dr. Quinn Slatter", "date": "Oct 16, 2022", "time": "09:00 AM", "image": "doctor4.png", "status": "Completed", "statusColor": "#28A745","type": "Voice Call", "icon": "VoiceCall.png" },
+      { "name": "Dr. Raul Zirkind", "date": "Dec 12, 2022", "time": "16:00 PM", "image": "doctor1.png", "status": "Completed", "statusColor": "#28A745", "type": "Video Call", "icon": "VoiceCall.png"},
+      { "name": "Dr. Drake Boeson", "date": "Nov 08, 2022", "time": "13:00 PM", "image": "doctor3.png", "status": "Completed", "statusColor": "#28A745", "type": "Video Call", "icon": "VideoCall.png"}
+    ],
+    "Cancelled": [
+      { "name": "Dr. Drake Boeson", "date": "Nov 08, 2022", "time": "13:00 PM", "image": "doctor3.png", "status": "Cancelled", "statusColor": "#F75555", "type": "Video Call", "icon": "VideoCall.png"},
+      { "name": "Dr. Quinn Slatter", "date": "Oct 16, 2022", "time": "09:00 AM", "image": "doctor4.png", "status": "Cancelled", "statusColor": "#F75555", "type": "Voice Call", "icon": "VoiceCall.png" },
+      { "name": "Dr. Keegan Dach", "date": "Nov 20, 2022", "time": "10:00 AM", "image": "doctor2.png", "status": "Cancelled", "statusColor": "#F75555", "type": "Messaging", "icon": "Messaging.png"},
+      { "name": "Dr. Raul Zirkind", "date": "Dec 12, 2022", "time": "16:00 PM", "image": "doctor1.png", "status": "Cancelled", "statusColor": "#F75555", "type": "Video Call", "icon": "VoiceCall.png"}
+    ]
+  }
+  
\ No newline at end of file
diff --git a/components/AppointmentDoctorsCards.tsx b/components/AppointmentDoctorsCards.tsx
new file mode 100644
index 00000000..3f707e7f
--- /dev/null
+++ b/components/AppointmentDoctorsCards.tsx
@@ -0,0 +1,157 @@
+// DoctorCard.tsx
+import React from 'react';
+import { View, Text, Image, StyleSheet, ImageBackground, TouchableOpacity } from 'react-native';
+
+interface DoctorCardProps {
+  name: string;
+  date: string;
+  time: string;
+  image: any;
+  status: string;
+  statusColor: string;
+  type: string;
+  icon: any;
+  buttons?: { label: string, action: () => void, styleType: 'cancel' | 'primary' }[];
+}
+
+const DoctorCard: React.FC<DoctorCardProps> = ({ name, date, time, image, status, statusColor, type, icon, buttons }) => {
+  return (
+    <ImageBackground style={styles.card}>
+      <View style={styles.upperSection}>
+        <Image style={styles.cardImage} source={image}></Image>
+        <ImageBackground style={styles.docDescription}>
+          <View style={styles.cardHeader}>
+            <Text style={styles.docName}>{name}</Text>
+          </View>
+          <View style={styles.docStatus}>
+            <Text style={{ color: '#424242', fontSize: 12, fontFamily: "Urbanist-regular" }}>{type} - </Text>
+            <View style={[styles.statusContainer, { borderColor: statusColor }]}>
+              <Text style={{ fontFamily: "Urbanist-regular", color: statusColor, fontSize: 12 }}>{status}</Text>
+            </View>
+            <TouchableOpacity>
+            <Image style={{ marginBottom: 10, marginLeft: '6%' }} source={icon}></Image>
+            </TouchableOpacity>
+          </View>
+          <Text style={styles.date}>{date} | {time}</Text>
+        </ImageBackground>
+      </View>
+      {buttons && (
+        
+        <View style={styles.CardButtons}>
+          {buttons.map((button, index) => (
+            <TouchableOpacity
+              key={index}
+              style={button.styleType === 'cancel' ? styles.cancelButton : styles.primaryButton}
+              onPress={button.action}
+            >
+              <Text style={button.styleType === 'cancel' ? styles.cancelButtonText : styles.primaryButtonText}>{button.label}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      )}
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    width: '95%',
+    height: 200,
+    marginTop: 20,
+    marginLeft: '2%',
+    borderRadius: 20,
+    backgroundColor: '#FFFFFF',
+    padding: 15,
+    flexDirection: 'column'
+  },
+  cardImage: {
+    height: 110,
+    width: '30%',
+    borderRadius: 20,
+  },
+  upperSection: {
+    flexDirection: 'row'
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    backgroundColor: 'transparent'
+  },
+  docName: {
+    fontFamily: 'Urbanist-bold',
+    color: '#000000',
+    marginLeft: '3%',
+    marginRight: '18%',
+    marginTop: '1%',
+    fontSize: 20,
+    padding: 0,
+  },
+  docDescription: {
+    flexDirection: 'column',
+    backgroundColor: 'transparent'
+  },
+  docStatus: {
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    marginLeft: '5%',
+    marginTop: '0%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  statusContainer: {
+    backgroundColor: "#ffffff",
+    padding: 5,
+    paddingHorizontal: 10,
+    borderWidth: 2,
+    borderRadius: 10,
+    height: 30,
+    alignItems: 'center',
+    marginRight:10
+  },
+  date: {
+    backgroundColor: 'transparent',
+    color: '#424242',
+    fontFamily: 'Urbanist-regular',
+    fontSize: 12,
+    marginLeft: '5%',
+    marginTop: '0%'
+  },
+  
+  CardButtons: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 20,
+  },
+  cancelButton: {
+    backgroundColor: "#ffffff",
+    padding: 5,
+    //paddingHorizontal: 15,
+    borderColor: '#246BFD',
+    borderWidth: 2,
+    borderRadius: 20,
+    width: 150,
+    height: 34,
+    alignItems: 'center',
+    justifyContent: "center",
+    marginLeft: 10
+  },
+  primaryButton: {
+    backgroundColor: "#246BFD",
+    padding: 5,
+    paddingHorizontal: 10,
+    borderRadius: 20,
+    justifyContent: "center",
+    width: 150,
+    height: 34,
+    alignItems: 'center'
+  },
+  cancelButtonText: {
+    fontFamily: "Urbanist-regular",
+    color: '#246BFD'
+  },
+  primaryButtonText: {
+    fontFamily: "Urbanist-regular",
+    color: "white"
+  }
+});
+
+export default DoctorCard;
diff --git a/components/AppointmentStatus.tsx b/components/AppointmentStatus.tsx
new file mode 100644
index 00000000..e3a0fd4a
--- /dev/null
+++ b/components/AppointmentStatus.tsx
@@ -0,0 +1,34 @@
+// AppointmentStatus.tsx
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+interface AppointmentStatusProps {
+  status: string;
+  color: string;
+}
+
+const AppointmentStatus: React.FC<AppointmentStatusProps> = ({ status, color }) => {
+  return (
+    <View style={[styles.statusContainer, { borderColor: color }]}>
+      <Text style={[styles.statusText, { color }]}>{status}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  statusContainer: {
+    padding: 5,
+    paddingHorizontal: 10,
+    borderWidth: 2,
+    borderRadius: 10,
+    height: 30,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  statusText: {
+    fontFamily: "Urbanist-regular",
+    fontSize: 12,
+  }
+});
+
+export default AppointmentStatus;
diff --git a/package-lock.json b/package-lock.json
index 7c407088..fc1b225a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -299,18 +299,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz",
-      "integrity": "sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/types": "^7.22.15"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
@@ -625,70 +613,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.5.tgz",
-      "integrity": "sha512-LdXRi1wEMTrHVR4Zc9F8OewC3vdm5h4QB6L71zy6StmYeqGi1b3ttIO8UC+BfZKcH9jdr4aI249rBkm+3+YvHw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.24.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.1.tgz",
-      "integrity": "sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.1.tgz",
-      "integrity": "sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-        "@babel/plugin-transform-optional-chaining": "^7.24.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.13.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.1.tgz",
-      "integrity": "sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-async-generator-functions": {
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
@@ -854,18 +778,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "peer": true,
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
@@ -893,6 +805,7 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
       "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.12.13"
       },
@@ -900,21 +813,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-syntax-decorators": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.24.1.tgz",
@@ -979,40 +877,11 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-import-assertions": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.1.tgz",
-      "integrity": "sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-import-attributes": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.1.tgz",
-      "integrity": "sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-syntax-import-meta": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
       "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
       },
@@ -1024,6 +893,7 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
       "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
       },
@@ -1129,6 +999,7 @@
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
       "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
       },
@@ -1153,22 +1024,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
-      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
     "node_modules/@babel/plugin-transform-arrow-functions": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.1.tgz",
@@ -1183,24 +1038,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.24.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.3.tgz",
-      "integrity": "sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-remap-async-to-generator": "^7.22.20",
-        "@babel/plugin-syntax-async-generators": "^7.8.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-async-to-generator": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.1.tgz",
@@ -1217,21 +1054,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.1.tgz",
-      "integrity": "sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-block-scoping": {
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.5.tgz",
@@ -1246,39 +1068,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-class-properties": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.1.tgz",
-      "integrity": "sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.24.1",
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-class-static-block": {
-      "version": "7.24.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.4.tgz",
-      "integrity": "sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.24.4",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.12.0"
-      }
-    },
     "node_modules/@babel/plugin-transform-classes": {
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.5.tgz",
@@ -1337,69 +1126,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.1.tgz",
-      "integrity": "sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-duplicate-keys": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.1.tgz",
-      "integrity": "sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-dynamic-import": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.1.tgz",
-      "integrity": "sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.1.tgz",
-      "integrity": "sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-export-namespace-from": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.1.tgz",
@@ -1430,22 +1156,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.1.tgz",
-      "integrity": "sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-function-name": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.1.tgz",
@@ -1462,22 +1172,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-json-strings": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.1.tgz",
-      "integrity": "sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/plugin-syntax-json-strings": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-literals": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.24.1.tgz",
@@ -1492,53 +1186,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.1.tgz",
-      "integrity": "sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-member-expression-literals": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.1.tgz",
-      "integrity": "sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.1.tgz",
-      "integrity": "sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.1.tgz",
@@ -1555,40 +1202,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.1.tgz",
-      "integrity": "sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-validator-identifier": "^7.22.20"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-modules-umd": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.1.tgz",
-      "integrity": "sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
@@ -1604,21 +1217,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.1.tgz",
-      "integrity": "sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz",
@@ -1634,22 +1232,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-numeric-separator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.1.tgz",
-      "integrity": "sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.5.tgz",
@@ -1667,38 +1249,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.1.tgz",
-      "integrity": "sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-replace-supers": "^7.24.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-optional-catch-binding": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.1.tgz",
-      "integrity": "sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-optional-chaining": {
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.5.tgz",
@@ -1761,21 +1311,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-property-literals": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.1.tgz",
-      "integrity": "sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-react-display-name": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.1.tgz",
@@ -1865,37 +1400,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.1.tgz",
-      "integrity": "sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "regenerator-transform": "^0.15.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.1.tgz",
-      "integrity": "sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-runtime": {
       "version": "7.24.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.3.tgz",
@@ -1972,21 +1476,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-typeof-symbol": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.5.tgz",
-      "integrity": "sha512-UTGnhYVZtTAjdwOTzT+sCyXmTn8AhaxOS/MjG9REclZ6ULHWF9KoCZur0HSGU7hk8PdBFKKbYe6+gqdXWz84Jg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-typescript": {
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.5.tgz",
@@ -2004,37 +1493,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.1.tgz",
-      "integrity": "sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-unicode-property-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.1.tgz",
-      "integrity": "sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-unicode-regex": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.1.tgz",
@@ -2050,117 +1508,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.1.tgz",
-      "integrity": "sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/preset-env": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.24.5.tgz",
-      "integrity": "sha512-UGK2ifKtcC8i5AI4cH+sbLLuLc2ktYSFJgBAXorKAsHUZmrQ1q6aQ6i3BvU24wWs2AAKqQB6kq3N9V9Gw1HiMQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/compat-data": "^7.24.4",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-plugin-utils": "^7.24.5",
-        "@babel/helper-validator-option": "^7.23.5",
-        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.24.5",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.24.1",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.24.1",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.24.1",
-        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-class-properties": "^7.12.13",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-        "@babel/plugin-syntax-import-assertions": "^7.24.1",
-        "@babel/plugin-syntax-import-attributes": "^7.24.1",
-        "@babel/plugin-syntax-import-meta": "^7.10.4",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-        "@babel/plugin-syntax-top-level-await": "^7.14.5",
-        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
-        "@babel/plugin-transform-arrow-functions": "^7.24.1",
-        "@babel/plugin-transform-async-generator-functions": "^7.24.3",
-        "@babel/plugin-transform-async-to-generator": "^7.24.1",
-        "@babel/plugin-transform-block-scoped-functions": "^7.24.1",
-        "@babel/plugin-transform-block-scoping": "^7.24.5",
-        "@babel/plugin-transform-class-properties": "^7.24.1",
-        "@babel/plugin-transform-class-static-block": "^7.24.4",
-        "@babel/plugin-transform-classes": "^7.24.5",
-        "@babel/plugin-transform-computed-properties": "^7.24.1",
-        "@babel/plugin-transform-destructuring": "^7.24.5",
-        "@babel/plugin-transform-dotall-regex": "^7.24.1",
-        "@babel/plugin-transform-duplicate-keys": "^7.24.1",
-        "@babel/plugin-transform-dynamic-import": "^7.24.1",
-        "@babel/plugin-transform-exponentiation-operator": "^7.24.1",
-        "@babel/plugin-transform-export-namespace-from": "^7.24.1",
-        "@babel/plugin-transform-for-of": "^7.24.1",
-        "@babel/plugin-transform-function-name": "^7.24.1",
-        "@babel/plugin-transform-json-strings": "^7.24.1",
-        "@babel/plugin-transform-literals": "^7.24.1",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.24.1",
-        "@babel/plugin-transform-member-expression-literals": "^7.24.1",
-        "@babel/plugin-transform-modules-amd": "^7.24.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.24.1",
-        "@babel/plugin-transform-modules-systemjs": "^7.24.1",
-        "@babel/plugin-transform-modules-umd": "^7.24.1",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
-        "@babel/plugin-transform-new-target": "^7.24.1",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.1",
-        "@babel/plugin-transform-numeric-separator": "^7.24.1",
-        "@babel/plugin-transform-object-rest-spread": "^7.24.5",
-        "@babel/plugin-transform-object-super": "^7.24.1",
-        "@babel/plugin-transform-optional-catch-binding": "^7.24.1",
-        "@babel/plugin-transform-optional-chaining": "^7.24.5",
-        "@babel/plugin-transform-parameters": "^7.24.5",
-        "@babel/plugin-transform-private-methods": "^7.24.1",
-        "@babel/plugin-transform-private-property-in-object": "^7.24.5",
-        "@babel/plugin-transform-property-literals": "^7.24.1",
-        "@babel/plugin-transform-regenerator": "^7.24.1",
-        "@babel/plugin-transform-reserved-words": "^7.24.1",
-        "@babel/plugin-transform-shorthand-properties": "^7.24.1",
-        "@babel/plugin-transform-spread": "^7.24.1",
-        "@babel/plugin-transform-sticky-regex": "^7.24.1",
-        "@babel/plugin-transform-template-literals": "^7.24.1",
-        "@babel/plugin-transform-typeof-symbol": "^7.24.5",
-        "@babel/plugin-transform-unicode-escapes": "^7.24.1",
-        "@babel/plugin-transform-unicode-property-regex": "^7.24.1",
-        "@babel/plugin-transform-unicode-regex": "^7.24.1",
-        "@babel/plugin-transform-unicode-sets-regex": "^7.24.1",
-        "@babel/preset-modules": "0.1.6-no-external-plugins",
-        "babel-plugin-polyfill-corejs2": "^0.4.10",
-        "babel-plugin-polyfill-corejs3": "^0.10.4",
-        "babel-plugin-polyfill-regenerator": "^0.6.1",
-        "core-js-compat": "^3.31.0",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/preset-flow": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.24.1.tgz",
@@ -2177,20 +1524,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/preset-modules": {
-      "version": "0.1.6-no-external-plugins",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
-      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/types": "^7.4.4",
-        "esutils": "^2.0.2"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
-      }
-    },
     "node_modules/@babel/preset-react": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.24.1.tgz",
@@ -12336,6 +11669,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -24067,15 +23401,6 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
-    "node_modules/regenerator-transform": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
-      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.8.4"
-      }
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -25907,6 +25232,7 @@
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
       "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"