dhre-ui-kit 0.0.173 → 0.0.175

package/lib/index.mjs

@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useState, useEffect, useRef, memo, useCallback } from 'react';
+import * as React from 'react';
+import React__default, { createContext, useContext, useState, useEffect, useRef, memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { Dimensions, StyleSheet, Text, Pressable, View, Modal, KeyboardAvoidingView, Platform, ActivityIndicator, TextInput, ScrollView, Animated, FlatList, TouchableOpacity, Alert, Linking, PanResponder } from 'react-native';
 import { PanGestureHandler, GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
@@ -108,6 +109,7 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["SUCCESS"] = "SUCCESS";
   Theme2["INFO"] = "INFO";
   Theme2["ERROR"] = "ERROR";
+  Theme2["TRANSPARENT_INVERTED"] = "TRANSPARENT_INVERTED";
   return Theme2;
 })(Theme || {});
 
@@ -239,6 +241,10 @@ const theme = {
   [Theme.ERROR]: {
     light: "#EB0542",
     dark: "#EB0542"
+  },
+  [Theme.TRANSPARENT_INVERTED]: {
+    light: "#68686833",
+    dark: "#FFFFFF33"
   }
 };
 
@@ -249,7 +255,7 @@ const ThemeProvider = ({ children }) => {
     acc[key] = theme[key][mode];
     return acc;
   }, {});
-  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: { theme: filteredTheme, mode } }, children);
+  return /* @__PURE__ */ React__default.createElement(ThemeContext.Provider, { value: { theme: filteredTheme, mode } }, children);
 };
 const useTheme = () => {
   const context = useContext(ThemeContext);
@@ -260,7 +266,7 @@ const useTheme = () => {
 };
 
 const withThemeProvider = (Component) => {
-  return (props) => /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(Component, { ...props }));
+  return (props) => /* @__PURE__ */ React__default.createElement(ThemeProvider, null, /* @__PURE__ */ React__default.createElement(Component, { ...props }));
 };
 
 const { width, height } = Dimensions.get("window");
@@ -324,7 +330,7 @@ const CustomTypography = ({
   ...props
 }) => {
   const textStyle = FONT_STYLES[variant];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Text,
     {
       testID,
@@ -346,7 +352,7 @@ const CustomText = ({
   ...props
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant,
@@ -569,15 +575,15 @@ const Badge = ({
   iconStyle,
   handleIconPress
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       style: [styles$A.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React.createElement(View, { style: [styles$A.icon, iconStyle] }, React.cloneElement(iconName)),
-    text && /* @__PURE__ */ React.createElement(
+    iconName && /* @__PURE__ */ React__default.createElement(View, { style: [styles$A.icon, iconStyle] }, React__default.cloneElement(iconName)),
+    text && /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
@@ -655,7 +661,7 @@ const BottomDrawer = ({
       toggleModal();
     }
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Modal,
     {
       animationType: "slide",
@@ -663,32 +669,32 @@ const BottomDrawer = ({
       visible: isModalVisible,
       onRequestClose: toggleModal
     },
-    /* @__PURE__ */ React.createElement(PanGestureHandler, { onGestureEvent: onSwipDown }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(PanGestureHandler, { onGestureEvent: onSwipDown }, /* @__PURE__ */ React__default.createElement(
       KeyboardAvoidingView,
       {
         behavior: Platform.OS === "ios" ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React.createElement(View, { style: [styles$z.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(View, { style: [styles$z.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default.createElement(
         BlurView,
         {
           style: [styles$z.blurView, blurViewStyle],
           blurType,
           blurAmount
         }
-      ) : null, /* @__PURE__ */ React.createElement(View, { style: [styles$z.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$z.separator }), /* @__PURE__ */ React.createElement(View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
+      ) : null, /* @__PURE__ */ React__default.createElement(View, { style: [styles$z.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(View, { style: styles$z.separator }), /* @__PURE__ */ React__default.createElement(View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React__default.cloneElement(leftIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
         style: styles$z.leftIconStyle,
         onPress: onLeftIconPress
-      }) : null, /* @__PURE__ */ React.createElement(
+      }) : null, /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           variant: titleVariant,
           text: title,
           style: { ...styles$z.title, ...titleStyle }
         }
-      ), showRightIcon && rightIcon ? React.cloneElement(rightIcon, {
+      ), showRightIcon && rightIcon ? React__default.cloneElement(rightIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
         style: styles$z.rightIconStyle,
@@ -713,7 +719,7 @@ const styles$y = StyleSheet.create({
 
 const CustomLoader = ({ loading }) => {
   if (!loading) return null;
-  return /* @__PURE__ */ React.createElement(View, { style: styles$y.container }, /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "large", color: "#686868" }));
+  return /* @__PURE__ */ React__default.createElement(View, { style: styles$y.container }, /* @__PURE__ */ React__default.createElement(ActivityIndicator, { size: "large", color: "#686868" }));
 };
 
 const CustomButton = ({
@@ -734,7 +740,7 @@ const CustomButton = ({
   isLoading = false
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       testID,
@@ -751,8 +757,8 @@ const CustomButton = ({
       onPress,
       disabled
     },
-    imagePosition === "left" && leftIcon && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(leftIcon, { width: 20, height: 20 })),
-    isLoading ? /* @__PURE__ */ React.createElement(CustomLoader, { loading: isLoading }) : /* @__PURE__ */ React.createElement(
+    imagePosition === "left" && leftIcon && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(leftIcon, { width: 20, height: 20 })),
+    isLoading ? /* @__PURE__ */ React__default.createElement(CustomLoader, { loading: isLoading }) : /* @__PURE__ */ React__default.createElement(
       CustomText$1,
       {
         text: title,
@@ -766,7 +772,7 @@ const CustomButton = ({
         textColor: titleColor
       }
     ),
-    imagePosition === "right" && rightIcon && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(rightIcon, { width: 20, height: 20 }))
+    imagePosition === "right" && rightIcon && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(rightIcon, { width: 20, height: 20 }))
   );
 };
 const styles$x = StyleSheet.create({
@@ -846,42 +852,42 @@ const Cards = ({
   testID,
   onButtonPress
 }) => {
-  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$w.container }, topLeftTitle ? /* @__PURE__ */ React.createElement(View, { style: styles$w.topLeft }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { testID, style: styles$w.container }, topLeftTitle ? /* @__PURE__ */ React__default.createElement(View, { style: styles$w.topLeft }, /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant: "P2regular",
       style: styles$w.title,
       text: topLeftTitle
     }
-  )) : null, title ? /* @__PURE__ */ React.createElement(
+  )) : null, title ? /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant: "H6bold",
       style: styles$w.subTitleBelow,
       text: title
     }
-  ) : null, subtitle ? /* @__PURE__ */ React.createElement(
+  ) : null, subtitle ? /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant: "P3regular",
       style: styles$w.subtitle,
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$w.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React.createElement(
+  ) : null, /* @__PURE__ */ React__default.createElement(View, { style: styles$w.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant: "P3regular",
       style: styles$w.subTitleLeftBelow,
       text: iconTitle
     }
-  ) : null), buttonShown ? /* @__PURE__ */ React.createElement(
+  ) : null), buttonShown ? /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       testID: "Button-Press",
       style: styles$w.button,
       onPress: onButtonPress
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: "B2semiBold",
@@ -942,7 +948,7 @@ const Checkbox = ({
     setChecked(!checked);
     onCheck && onCheck(!checked);
   };
-  return /* @__PURE__ */ React.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       testID: "Checkbox-Press",
@@ -950,8 +956,8 @@ const Checkbox = ({
       disabled: disable,
       style: styles$v.directionStyle
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$v.checkboxContainer }, React.cloneElement(checked ? checkedIcon : uncheckedIcon)),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(View, { style: styles$v.checkboxContainer }, React__default.cloneElement(checked ? checkedIcon : uncheckedIcon)),
+    /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: titleVariant,
@@ -1012,26 +1018,26 @@ const CustomDropdown$1 = ({
   downArrowIcon
 }) => {
   const [showOptions, setShowOptions] = useState(false);
-  return /* @__PURE__ */ React.createElement(View, { testID: testId }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { testID: testId }, /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant: "P3regular",
       style: styles$u.labelStyle,
       text: label
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       testID: `${testId}-BTN`,
       style: styles$u.dropDownStyle,
       onPress: () => setShowOptions(!showOptions)
     },
-    iconName && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(iconName, {
+    iconName && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
       style: styles$u.iconStyle
     })),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: "P3regular",
@@ -1039,14 +1045,14 @@ const CustomDropdown$1 = ({
         text: selectedValue ? selectedValue.label : placeholder
       }
     ),
-    /* @__PURE__ */ React.createElement(View, null, showOptions ? React.cloneElement(upArrowIcon, {
+    /* @__PURE__ */ React__default.createElement(View, null, showOptions ? React__default.cloneElement(upArrowIcon, {
       width: moderateScale(24),
       height: moderateScale(24)
-    }) : React.cloneElement(downArrowIcon, {
+    }) : React__default.cloneElement(downArrowIcon, {
       width: moderateScale(24),
       height: moderateScale(24)
     }))
-  ), showOptions && /* @__PURE__ */ React.createElement(View, { style: styles$u.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React.createElement(
+  ), showOptions && /* @__PURE__ */ React__default.createElement(View, { style: styles$u.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       key: id,
@@ -1062,12 +1068,12 @@ const CustomDropdown$1 = ({
         }
       ]
     },
-    iconName && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(iconName, {
+    iconName && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
       style: styles$u.iconStyle
     })),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: "P3regular",
@@ -1158,14 +1164,14 @@ const CustomTextInput = ({
   };
   const handleIconPress1 = () => setValue("");
   const handleIconPress2 = () => setIsSecureTextEntry(!isSecureTextEntry);
-  return /* @__PURE__ */ React.createElement(View, { testID }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { testID }, /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant: "P3medium",
       style: [styles$t.labelStyle, disabled && styles$t.disableTextStyle],
       text: label
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     View,
     {
       style: [
@@ -1180,12 +1186,12 @@ const CustomTextInput = ({
         }
       ]
     },
-    isSearchBar && searchIcon && React.cloneElement(searchIcon, {
+    isSearchBar && searchIcon && React__default.cloneElement(searchIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
       style: styles$t.searchIconStyle
     }),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       TextInput,
       {
         ...props,
@@ -1202,15 +1208,15 @@ const CustomTextInput = ({
         secureTextEntry: isSecureTextEntry
       }
     ),
-    value && !multiline && rightIcon1 && React.cloneElement(rightIcon1, {
+    value && !multiline && rightIcon1 && React__default.cloneElement(rightIcon1, {
       onPress: handleIconPress1,
       testID: "icon1"
     }),
-    secureTextEntry && rightIcon2 && React.cloneElement(rightIcon2, {
+    secureTextEntry && rightIcon2 && React__default.cloneElement(rightIcon2, {
       onPress: handleIconPress2,
       testID: "icon2"
     })
-  ), (error || successMessage) && /* @__PURE__ */ React.createElement(
+  ), (error || successMessage) && /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       numberOfLines: 2,
@@ -1233,7 +1239,7 @@ const CustomTooltip = ({
   backgroundColor,
   triggerElement
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Tooltip,
     {
       isVisible,
@@ -1294,27 +1300,27 @@ const FileUpload = ({
   icon,
   iconStyle
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     View,
     {
       style: [styles$s.container, containerStyle],
       testID: "file-upload-container"
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$s.content }, /* @__PURE__ */ React.createElement(View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React.cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React.createElement(CustomTypography, { variant: "H8bold", style: styles$s.title, text: title }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(View, { style: styles$s.content }, /* @__PURE__ */ React__default.createElement(View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React__default.cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React__default.createElement(CustomTypography, { variant: "H8bold", style: styles$s.title, text: title }), /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: "P4regular",
         style: styles$s.description,
         text: `Drop files directly here or `
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: "P4regular",
         style: styles$s.browse,
         text: btnText
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         testID: "file-upload-description",
@@ -1323,14 +1329,14 @@ const FileUpload = ({
         text: ` from your device`
       }
     )),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       Pressable,
       {
         style: styles$s.button,
         onPress: onUpload,
         testID: "file-upload-button"
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           variant: "B2semiBold",
@@ -1343,7 +1349,7 @@ const FileUpload = ({
 };
 
 const PdfView = (props) => {
-  return /* @__PURE__ */ React.createElement(Pdf, { ...props });
+  return /* @__PURE__ */ React__default.createElement(Pdf, { ...props });
 };
 
 const styles$r = StyleSheet.create({
@@ -1402,28 +1408,28 @@ const PopUp = ({
   leftButtonShown = false,
   rightButtonShown = false
 }) => {
-  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$r.container }, title ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { testID, style: styles$r.container }, title ? /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       style: styles$r.subTitleBelow,
       variant: "H6semiBold",
       text: title
     }
-  ) : null, subtitle ? /* @__PURE__ */ React.createElement(
+  ) : null, subtitle ? /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       style: styles$r.subtitle,
       variant: "P3regular",
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$r.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React.createElement(
+  ) : null, /* @__PURE__ */ React__default.createElement(View, { style: styles$r.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       testID: "Left-Button-Press",
       style: styles$r.buttonLeft,
       onPress: onButtonPress
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         style: styles$r.buttonLeftText,
@@ -1431,7 +1437,7 @@ const PopUp = ({
         text: buttonText
       }
     )
-  ) : null, rightButtonShown ? /* @__PURE__ */ React.createElement(Pressable, { style: styles$r.button, onPress: onButtonPress }, /* @__PURE__ */ React.createElement(
+  ) : null, rightButtonShown ? /* @__PURE__ */ React__default.createElement(Pressable, { style: styles$r.button, onPress: onButtonPress }, /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       style: styles$r.buttonText,
@@ -1472,7 +1478,7 @@ const CustomProgressBar = ({
     return () => clearInterval(progressInterval);
   }, [progress, value, increment, interval]);
   const showPercentage = () => {
-    return /* @__PURE__ */ React.createElement(View, { style: styles$q.flexDirection }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(View, { style: styles$q.flexDirection }, /* @__PURE__ */ React__default.createElement(
       CustomText$1,
       {
         text: `${value}%`,
@@ -1480,7 +1486,7 @@ const CustomProgressBar = ({
         textColor: "CONTENT_PRIMARY",
         style: valueTextStyle
       }
-    ), percentageText ? /* @__PURE__ */ React.createElement(
+    ), percentageText ? /* @__PURE__ */ React__default.createElement(
       CustomText$1,
       {
         text: percentageText,
@@ -1492,7 +1498,7 @@ const CustomProgressBar = ({
   const renderProgressBar = () => {
     switch (type) {
       case ShapeType.LINE:
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ React__default.createElement(
           Progress.Bar,
           {
             progress: progress / 100,
@@ -1506,7 +1512,7 @@ const CustomProgressBar = ({
           }
         );
       case ShapeType.CIRCLE:
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ React__default.createElement(
           Progress.Circle,
           {
             progress: progress / 100,
@@ -1524,7 +1530,7 @@ const CustomProgressBar = ({
         return null;
     }
   };
-  return /* @__PURE__ */ React.createElement(View, { testID: "custom-progress-bar" }, renderProgressBar());
+  return /* @__PURE__ */ React__default.createElement(View, { testID: "custom-progress-bar" }, renderProgressBar());
 };
 const styles$q = StyleSheet.create({
   flexDirection: {
@@ -1557,19 +1563,19 @@ const splitRating = (rating) => {
 const drawStar = (starIndex, ratingArray, size, fullStarIcon, halfStarIcon, fullStarColor, emptyStarColor) => {
   const [fullStars, decimalPart] = ratingArray;
   if (starIndex <= fullStars) {
-    return React.cloneElement(fullStarIcon, {
+    return React__default.cloneElement(fullStarIcon, {
       style: { height: size, width: size },
       fill: fullStarColor,
       testID: `star-${starIndex}`
     });
   } else if (starIndex === fullStars + 1 && decimalPart >= 0.5) {
-    return React.cloneElement(halfStarIcon, {
+    return React__default.cloneElement(halfStarIcon, {
       style: { height: size, width: size },
       fill: fullStarColor,
       testID: `star-${starIndex}`
     });
   } else {
-    return React.cloneElement(fullStarIcon, {
+    return React__default.cloneElement(fullStarIcon, {
       style: { height: size, width: size },
       fill: emptyStarColor,
       testID: `star-${starIndex}`
@@ -1600,10 +1606,10 @@ const Star = ({
       emptyStarColor
     );
     stars.push(
-      /* @__PURE__ */ React.createElement(View, { key: i, style: [styles$p.star, starStyle] }, starType)
+      /* @__PURE__ */ React__default.createElement(View, { key: i, style: [styles$p.star, starStyle] }, starType)
     );
   }
-  return /* @__PURE__ */ React.createElement(View, { style: styles$p.container, testID: "star" }, stars);
+  return /* @__PURE__ */ React__default.createElement(View, { style: styles$p.container, testID: "star" }, stars);
 };
 
 var styles$o = StyleSheet.create({
@@ -1648,7 +1654,7 @@ const Tabs = ({
       onSelectionChange(selectedTabs);
     }
   };
-  return /* @__PURE__ */ React.createElement(View, { style: [styles$o.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { style: [styles$o.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       key: id,
@@ -1659,7 +1665,7 @@ const Tabs = ({
       },
       onPress: () => handlePress(id)
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomText$1,
       {
         variant: FontStyle.L2_REGULAR,
@@ -1728,7 +1734,7 @@ const Tags = ({
     );
     handleTagsChange(tag);
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     ScrollView,
     {
       testID,
@@ -1736,7 +1742,7 @@ const Tags = ({
       contentContainerStyle: styles$n.contentContainer,
       horizontal: false
     },
-    tags?.map((tag) => /* @__PURE__ */ React.createElement(
+    tags?.map((tag) => /* @__PURE__ */ React__default.createElement(
       Pressable,
       {
         testID: `${testID}-${tag}-BTN`,
@@ -1748,7 +1754,7 @@ const Tags = ({
           selectedTags.includes(tag) ? styles$n.selectedTag : styles$n.tagUnSelected
         ]
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           variant: selectedTags.includes(tag) ? "H9semiBold" : "P4regular",
@@ -1756,13 +1762,13 @@ const Tags = ({
           text: tag
         }
       ),
-      selectedTags.includes(tag) && icon && /* @__PURE__ */ React.createElement(
+      selectedTags.includes(tag) && icon && /* @__PURE__ */ React__default.createElement(
         Pressable,
         {
           testID: `${testID}-${tag}-PRESS`,
           onPress: () => removeTag(tag)
         },
-        React.cloneElement(icon, { style: [icon.props.style, iconStyle] })
+        React__default.cloneElement(icon, { style: [icon.props.style, iconStyle] })
       )
     ))
   );
@@ -1829,14 +1835,14 @@ const CustomSwitch = ({
   const animatedStyle = {
     transform: [{ translateX: animatedValue }]
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       onPress: toggleSwitch,
       style: [styles$m.container, { width }],
       testID: "custom-switch"
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       View,
       {
         style: [
@@ -1846,8 +1852,8 @@ const CustomSwitch = ({
           }
         ]
       },
-      /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$m.thumb, animatedStyle] }),
-      type !== ToggleButtonType.SMALL && /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(Animated.View, { style: [styles$m.thumb, animatedStyle] }),
+      type !== ToggleButtonType.SMALL && /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           variant: "B3semiBold",
@@ -1919,7 +1925,7 @@ const Accordion = ({
     inputRange: [0, 1],
     outputRange: [0, contentHeight]
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     View,
     {
       style: {
@@ -1929,13 +1935,13 @@ const Accordion = ({
       },
       testID: testId
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       Pressable,
       {
         style: [styles$l.header, headerStyle, disabled && { opacity: 0.5 }],
         onPress: !disabled ? onToggle : void 0
       },
-      headerComponent ? headerComponent() : /* @__PURE__ */ React.createElement(
+      headerComponent ? headerComponent() : /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           variant: titleVariant,
@@ -1947,14 +1953,14 @@ const Accordion = ({
           }
         }
       ),
-      React.cloneElement(icon, {
+      React__default.cloneElement(icon, {
         width: moderateScale(20),
         height: moderateScale(20),
         style: styles$l.iconStyle
       })
     ),
     optionalElement ? optionalElement() : null,
-    isOpen && /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$l.content, { height: cardHeight }] }, /* @__PURE__ */ React.createElement(
+    isOpen && /* @__PURE__ */ React__default.createElement(Animated.View, { style: [styles$l.content, { height: cardHeight }] }, /* @__PURE__ */ React__default.createElement(
       View,
       {
         ref: contentRef,
@@ -2000,7 +2006,7 @@ const styles$k = StyleSheet.create({
   }
 });
 
-const Toast = React.forwardRef(({ sucessIcon, errorIcon }, ref) => {
+const Toast = React__default.forwardRef(({ sucessIcon, errorIcon }, ref) => {
   const [visible, setVisible] = useState(false);
   const [message, setMessage] = useState("");
   const [isSuccess, setIsSuccess] = useState(true);
@@ -2043,10 +2049,10 @@ const Toast = React.forwardRef(({ sucessIcon, errorIcon }, ref) => {
       return () => clearInterval(interval);
     }
   }, [visible]);
-  React.useImperativeHandle(ref, () => ({
+  React__default.useImperativeHandle(ref, () => ({
     showToast
   }));
-  return visible ? /* @__PURE__ */ React.createElement(
+  return visible ? /* @__PURE__ */ React__default.createElement(
     Animated.View,
     {
       style: [
@@ -2056,21 +2062,21 @@ const Toast = React.forwardRef(({ sucessIcon, errorIcon }, ref) => {
       ],
       testID: "TOAST"
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$k.toastContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$k.innerContainer }, isSuccess ? sucessIcon : errorIcon, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(View, { style: styles$k.toastContainer }, /* @__PURE__ */ React__default.createElement(View, { style: styles$k.innerContainer }, isSuccess ? sucessIcon : errorIcon, /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: "L2_REGULAR",
         text: message,
         style: styles$k.messageText
       }
-    ), btnText && /* @__PURE__ */ React.createElement(
+    ), btnText && /* @__PURE__ */ React__default.createElement(
       Pressable,
       {
         style: styles$k.button,
         onPress: onBtnPress || void 0,
         testID: "TOAST-BTN"
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           variant: "L2_BOLD",
@@ -2079,7 +2085,7 @@ const Toast = React.forwardRef(({ sucessIcon, errorIcon }, ref) => {
         }
       )
     ))),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       Progress.Bar,
       {
         progress,
@@ -2134,7 +2140,7 @@ const CustomSearchBar = ({
   pointerEvents,
   ...props
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       testID,
@@ -2148,7 +2154,7 @@ const CustomSearchBar = ({
       ],
       onPress: handlePress
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       Pressable,
       {
         onPress: () => {
@@ -2157,13 +2163,13 @@ const CustomSearchBar = ({
         },
         style: searchIconStyle
       },
-      React.cloneElement(searchIcon, {
+      React__default.cloneElement(searchIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
         style: [styles$j.searchIconStyle, searchIconStyle]
       })
     ),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       TextInput,
       {
         ...props,
@@ -2179,7 +2185,7 @@ const CustomSearchBar = ({
         pointerEvents
       }
     ),
-    value && /* @__PURE__ */ React.createElement(
+    value && /* @__PURE__ */ React__default.createElement(
       Pressable,
       {
         onPress: () => {
@@ -2188,7 +2194,7 @@ const CustomSearchBar = ({
         },
         style: crossIconStyle
       },
-      React.cloneElement(rightIcon, {
+      React__default.cloneElement(rightIcon, {
         // width: moderateScale(24),
         // height: moderateScale(24),
         style: [styles$j.crossIconStyle, crossIconStyle]
@@ -2225,7 +2231,7 @@ const CustomHeader = ({
   onRightPress
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     View,
     {
       style: {
@@ -2235,12 +2241,12 @@ const CustomHeader = ({
       },
       testID: testId
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$i.headderContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
+    /* @__PURE__ */ React__default.createElement(View, { style: styles$i.headderContainer }, showLeftIcon && leftIcon ? React__default.cloneElement(leftIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
       onPress: onLeftPress,
       style: styles$i.leftIconStyle
-    }) : null, /* @__PURE__ */ React.createElement(
+    }) : null, /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: "B2_REGULAR",
@@ -2248,7 +2254,7 @@ const CustomHeader = ({
         style: { color: theme.CONTENT_PRIMARY }
       }
     )),
-    showRightIcon && rightIcon ? React.cloneElement(rightIcon, {
+    showRightIcon && rightIcon ? React__default.cloneElement(rightIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
       onPress: onRightPress,
@@ -2305,7 +2311,7 @@ const SwipableList = (props) => {
     onPress,
     style,
     testID
-  }) => /* @__PURE__ */ React.createElement(
+  }) => /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       testID,
@@ -2313,7 +2319,7 @@ const SwipableList = (props) => {
       style: [styles$h.actionButton, style]
     },
     icon,
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: "L1_REGULAR",
@@ -2322,7 +2328,7 @@ const SwipableList = (props) => {
       }
     )
   );
-  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React.createElement(View, { style: styles$h.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React.createElement(
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default.createElement(View, { style: styles$h.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React__default.createElement(
     ActionButton,
     {
       icon: leftPrimaryActionIcon,
@@ -2331,7 +2337,7 @@ const SwipableList = (props) => {
       style: leftPrimaryActionStyle,
       testID: `${testId}-LEFT-PRIMARY-${item.id}`
     }
-  ), leftSecondaryActionIcon && /* @__PURE__ */ React.createElement(
+  ), leftSecondaryActionIcon && /* @__PURE__ */ React__default.createElement(
     ActionButton,
     {
       icon: leftSecondaryActionIcon,
@@ -2341,7 +2347,7 @@ const SwipableList = (props) => {
       testID: `${testId}-LEFT-SECONDARY-${item.id}`
     }
   ));
-  const rightActionHandle = (item) => /* @__PURE__ */ React.createElement(View, { style: [styles$h.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React.createElement(
+  const rightActionHandle = (item) => /* @__PURE__ */ React__default.createElement(View, { style: [styles$h.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default.createElement(
     ActionButton,
     {
       icon: rightPrimaryActionIcon,
@@ -2351,7 +2357,7 @@ const SwipableList = (props) => {
       testID: `${testId}-RIGHT-PRIMARY-${item.id}`
     }
   ));
-  const renderItem = ({ item }) => /* @__PURE__ */ React.createElement(GestureHandlerRootView, { testID: `${testId}-LIST`, style: styles$h.container }, /* @__PURE__ */ React.createElement(
+  const renderItem = ({ item }) => /* @__PURE__ */ React__default.createElement(GestureHandlerRootView, { testID: `${testId}-LIST`, style: styles$h.container }, /* @__PURE__ */ React__default.createElement(
     Swipeable,
     {
       renderLeftActions: () => leftActionHandle(
@@ -2365,13 +2371,13 @@ const SwipableList = (props) => {
     },
     props?.renderItem(item)
   ));
-  return /* @__PURE__ */ React.createElement(View, { testID: testId }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { testID: testId }, /* @__PURE__ */ React__default.createElement(
     FlatList,
     {
       data,
       renderItem,
       keyExtractor: (item) => item.id,
-      ItemSeparatorComponent: () => /* @__PURE__ */ React.createElement(
+      ItemSeparatorComponent: () => /* @__PURE__ */ React__default.createElement(
         View,
         {
           style: {
@@ -2404,7 +2410,7 @@ const CustomIcon = ({
   containerStyle,
   titleStyle
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       style: [styles$g.container, containerStyle],
@@ -2412,7 +2418,7 @@ const CustomIcon = ({
       testID: testId
     },
     icon,
-    title && /* @__PURE__ */ React.createElement(
+    title && /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: titleVariant,
@@ -2425,7 +2431,7 @@ const CustomIcon = ({
 
 const HorizontalLine = ({ backgroundColor = "SURFACE_SECONDARY", style }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     View,
     {
       style: [
@@ -2455,7 +2461,7 @@ const Topic = ({
   subTitleStyle
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     TouchableOpacity,
     {
       style: [
@@ -2465,9 +2471,9 @@ const Topic = ({
       ],
       onPress
     },
-    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$e.rightIconContainer }, React.cloneElement(rightIcon)),
-    /* @__PURE__ */ React.createElement(View, { style: styles$e.timeContainer }, time && /* @__PURE__ */ React.createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
-    /* @__PURE__ */ React.createElement(View, { style: styles$e.textContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$e.paymentView }, statusImage && /* @__PURE__ */ React.createElement(View, null, React.cloneElement(statusImage)), subTitle && /* @__PURE__ */ React.createElement(
+    rightIcon && /* @__PURE__ */ React__default.createElement(View, { style: styles$e.rightIconContainer }, React__default.cloneElement(rightIcon)),
+    /* @__PURE__ */ React__default.createElement(View, { style: styles$e.timeContainer }, time && /* @__PURE__ */ React__default.createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
+    /* @__PURE__ */ React__default.createElement(View, { style: styles$e.textContainer }, /* @__PURE__ */ React__default.createElement(View, { style: styles$e.paymentView }, statusImage && /* @__PURE__ */ React__default.createElement(View, null, React__default.cloneElement(statusImage)), subTitle && /* @__PURE__ */ React__default.createElement(
       CustomText$1,
       {
         style: [styles$e.subTitle, subTitleStyle],
@@ -2475,7 +2481,7 @@ const Topic = ({
         variant: FontStyle.L2_REGULAR,
         textColor: Theme.CONTENT_PRIMARY
       }
-    )), /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React__default.createElement(
       CustomText$1,
       {
         text: title,
@@ -2576,27 +2582,27 @@ const ContactModal = ({
     onClose();
   };
   const emailOptions = ["Mail", "Gmail", "Outlook"];
-  const renderEmailOptions = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  const renderEmailOptions = () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     CustomText$1,
     {
       style: styles$d.title,
       text: "Open email app",
       variant: "L2_REGULAR"
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     CustomText$1,
     {
       style: styles$d.subtitle,
       text: "Which app would you like to open?",
       variant: "L2_REGULAR"
     }
-  ), emailOptions.map((option) => /* @__PURE__ */ React.createElement(React.Fragment, { key: option }, /* @__PURE__ */ React.createElement(Line, null), /* @__PURE__ */ React.createElement(
+  ), emailOptions.map((option) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: option }, /* @__PURE__ */ React__default.createElement(Line, null), /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       onPress: () => handleOptionPress(),
       style: styles$d.optionButton
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomText$1,
       {
         style: styles$d.optionText,
@@ -2605,14 +2611,14 @@ const ContactModal = ({
       }
     )
   ))));
-  const renderContent = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$d.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React.createElement(Pressable, { onPress: handleCall, style: styles$d.optionButton }, /* @__PURE__ */ React.createElement(
+  const renderContent = () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(View, { style: styles$d.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React__default.createElement(Pressable, { onPress: handleCall, style: styles$d.optionButton }, /* @__PURE__ */ React__default.createElement(
     CustomText$1,
     {
       style: styles$d.optionText,
       text: `Call ${phoneNumber}`,
       variant: "B3_BOLD"
     }
-  ))), /* @__PURE__ */ React.createElement(Pressable, { onPress: onClose, style: styles$d.cancelButton }, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React__default.createElement(Pressable, { onPress: onClose, style: styles$d.cancelButton }, /* @__PURE__ */ React__default.createElement(
     CustomText$1,
     {
       style: styles$d.cancelText,
@@ -2620,7 +2626,7 @@ const ContactModal = ({
       variant: "B2_REGULAR"
     }
   )));
-  return /* @__PURE__ */ React.createElement(View, { style: styles$d.container }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { style: styles$d.container }, /* @__PURE__ */ React__default.createElement(
     Modal,
     {
       animationType: "slide",
@@ -2628,7 +2634,7 @@ const ContactModal = ({
       visible,
       onRequestClose: onClose
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$d.modalContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$d.modalContent }, renderContent()))
+    /* @__PURE__ */ React__default.createElement(View, { style: styles$d.modalContainer }, /* @__PURE__ */ React__default.createElement(View, { style: styles$d.modalContent }, renderContent()))
   ));
 };
 const styles$d = StyleSheet.create({
@@ -2656,25 +2662,31 @@ const styles$d = StyleSheet.create({
     borderRadius: 10
   },
   cancelText: {
-    color: "#007AFF"
+    color: "#007AFF",
+    alignSelf: "center"
   },
   title: {
     textAlign: "center",
-    marginTop: 13
+    marginTop: 13,
+    alignSelf: "center"
   },
   subtitle: {
     textAlign: "center",
     marginTop: 2,
-    marginBottom: 13
+    marginBottom: 13,
+    alignSelf: "center"
   },
   optionButton: {
     padding: 16,
     borderRadius: 8,
-    alignItems: "center"
+    alignItems: "center",
+    textAlign: "center"
   },
   optionText: {
     fontSize: 16,
-    color: "#007AFF"
+    color: "#007AFF",
+    alignSelf: "center",
+    textAlign: "center"
   },
   cancelButton: {
     marginTop: 10,
@@ -2759,7 +2771,7 @@ const DateRangePicker = (props) => {
     return markedDates;
   };
   const isButtonDisabled = !selectedRange.startDate || !selectedRange.endDate;
-  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, null, /* @__PURE__ */ React__default.createElement(
     Calendar,
     {
       markedDates: getMarkedDates(),
@@ -2782,7 +2794,7 @@ const DateRangePicker = (props) => {
       firstDay: 1,
       ...props
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     CustomButton$1,
     {
       title: btnTitle,
@@ -2813,7 +2825,7 @@ const OurOfficesButton = ({
   descriptionColor = "CONTENT_SECONDARY"
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     TouchableOpacity,
     {
       style: [
@@ -2823,8 +2835,8 @@ const OurOfficesButton = ({
       ],
       onPress
     },
-    leftIcon && /* @__PURE__ */ React.createElement(View, { style: styles$b.iconContainer }, React.cloneElement(leftIcon)),
-    /* @__PURE__ */ React.createElement(View, { style: styles$b.textContainer }, /* @__PURE__ */ React.createElement(
+    leftIcon && /* @__PURE__ */ React__default.createElement(View, { style: styles$b.iconContainer }, React__default.cloneElement(leftIcon)),
+    /* @__PURE__ */ React__default.createElement(View, { style: styles$b.textContainer }, /* @__PURE__ */ React__default.createElement(
       CustomText$1,
       {
         text: title,
@@ -2832,7 +2844,7 @@ const OurOfficesButton = ({
         textColor: titleColor,
         style: styles$b.textView
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React__default.createElement(
       CustomText$1,
       {
         text: description,
@@ -2841,7 +2853,7 @@ const OurOfficesButton = ({
         style: styles$b.flexWrap
       }
     )),
-    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$b.rightIconContainer }, React.cloneElement(rightIcon))
+    rightIcon && /* @__PURE__ */ React__default.createElement(View, { style: styles$b.rightIconContainer }, React__default.cloneElement(rightIcon))
   );
 };
 const styles$b = StyleSheet.create({
@@ -2897,7 +2909,7 @@ const NotificationBandge = ({
   if (notificationCount <= 0) {
     return icon;
   }
-  return /* @__PURE__ */ React.createElement(View, { style: styles$a.iconContainer }, icon, /* @__PURE__ */ React.createElement(View, { style: styles$a.badge }, /* @__PURE__ */ React.createElement(Text, { style: [styles$a.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
+  return /* @__PURE__ */ React__default.createElement(View, { style: styles$a.iconContainer }, icon, /* @__PURE__ */ React__default.createElement(View, { style: styles$a.badge }, /* @__PURE__ */ React__default.createElement(Text, { style: [styles$a.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
 };
 
 const ScrollableList = ({
@@ -2916,7 +2928,7 @@ const ScrollableList = ({
   );
   const { theme } = useTheme();
   const styles = createStyles$2({ theme });
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle] }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { style: [styles.container, containerStyle] }, /* @__PURE__ */ React__default.createElement(
     ScrollView,
     {
       horizontal: true,
@@ -2926,7 +2938,7 @@ const ScrollableList = ({
         scrollViewContentStyle
       ]
     },
-    data?.map((item) => /* @__PURE__ */ React.createElement(
+    data?.map((item) => /* @__PURE__ */ React__default.createElement(
       Pressable,
       {
         key: item.value,
@@ -2943,7 +2955,7 @@ const ScrollableList = ({
           handleSelectCategory(item.name, item.value);
         }
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         CustomText$1,
         {
           text: item.name,
@@ -2951,7 +2963,7 @@ const ScrollableList = ({
           textColor: (activeTab ?? selectedItem) === item.name ? selectedItemTextColor : defaultItemTextColor
         }
       ),
-      item?.isError && /* @__PURE__ */ React.createElement(View, { style: [styles.errorViewStyle] })
+      item?.isError && /* @__PURE__ */ React__default.createElement(View, { style: [styles.errorViewStyle] })
     ))
   ));
 };
@@ -2973,7 +2985,7 @@ const createStyles$2 = (theme) => {
       borderBottomColor: theme[Theme.BORDER_SEPERATOR_HEADER]
     },
     selectedItem: {
-      borderBottomWidth: 1,
+      borderBottomWidth: 2,
       borderBottomColor: theme[Theme.BORDER_INVERTED]
     },
     errorViewStyle: {
@@ -3045,7 +3057,7 @@ const FeedbackForm = ({
   const maxChars = 200;
   const { theme } = useTheme();
   const styles = createStyles$1(theme);
-  return /* @__PURE__ */ React.createElement(View, { style: styles.container }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { style: styles.container }, /* @__PURE__ */ React__default.createElement(
     CustomText$1,
     {
       text: title,
@@ -3053,7 +3065,7 @@ const FeedbackForm = ({
       textColor: Theme.CONTENT_SECONDRY,
       style: styles.headerText
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     TextInput,
     {
       style: [styles.textInput, { height: Math.max(100) }],
@@ -3064,7 +3076,7 @@ const FeedbackForm = ({
       value: feedback,
       onChangeText: (text) => setFeedback(text)
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     CustomText$1,
     {
       text: `${feedback.length}/${maxChars} characters`,
@@ -3072,14 +3084,14 @@ const FeedbackForm = ({
       textColor: Theme.CONTENT_SECONDRY,
       style: styles.charCounter
     }
-  ), /* @__PURE__ */ React.createElement(View, { style: styles.buttonContainer }, /* @__PURE__ */ React.createElement(Pressable, { style: styles.feedbackButton, onPress: handleSendFeedback }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(View, { style: styles.buttonContainer }, /* @__PURE__ */ React__default.createElement(Pressable, { style: styles.feedbackButton, onPress: handleSendFeedback }, /* @__PURE__ */ React__default.createElement(
     CustomText$1,
     {
       text: leftBtnTxt,
       variant: FontStyle.L1_REGULAR,
       textColor: Theme.CONTENT_PRIMARY
     }
-  )), /* @__PURE__ */ React.createElement(Pressable, { style: styles.cancelButton, onPress: clearAllData }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React__default.createElement(Pressable, { style: styles.cancelButton, onPress: clearAllData }, /* @__PURE__ */ React__default.createElement(
     CustomText$1,
     {
       text: rightBtnTxt,
@@ -3117,7 +3129,7 @@ const CountryDropDown = ({
     setCallingCode(`+${country.callingCode[0]}`);
     getCountryCode(`+${country.callingCode[0]}`);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: [styles$9.container, containerStyle] }, /* @__PURE__ */ React.createElement(View, { style: [styles$9.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(View, { style: [styles$9.container, containerStyle] }, /* @__PURE__ */ React__default.createElement(View, { style: [styles$9.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React__default.createElement(
     CountryPicker,
     {
       withFilter: true,
@@ -3127,21 +3139,21 @@ const CountryDropDown = ({
       onSelect: handleSelect,
       visible: pickerVisible
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     Text,
     {
       onPress: () => setPickerVisible(true),
       style: [styles$9.callingCode, callingCodeStyle]
     },
     callingCode
-  )), /* @__PURE__ */ React.createElement(View, { style: styles$9.flex }, (isFocused || value) && /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React__default.createElement(View, { style: styles$9.flex }, (isFocused || value) && /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
       text: label ?? "",
       style: styles$9.floatingLabel
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     TextInput,
     {
       style: [styles$9.input, inputStyle],
@@ -3154,7 +3166,7 @@ const CountryDropDown = ({
       maxLength,
       placeholderTextColor: theme.CONTENT_SECONDRY["light"]
     }
-  ))), errorMessage ? /* @__PURE__ */ React.createElement(
+  ))), errorMessage ? /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
@@ -3235,7 +3247,7 @@ const CommonTextInput = (props) => {
     rightIcon,
     onRightIconPress
   } = props;
-  return /* @__PURE__ */ React.createElement(Pressable, { onPress: handlePress, style: styles$8.container }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Pressable, { onPress: handlePress, style: styles$8.container }, /* @__PURE__ */ React__default.createElement(
     TextInput$1,
     {
       mode: "outlined",
@@ -3267,7 +3279,7 @@ const CommonTextInput = (props) => {
       error: errorMessage?.length ? true : false,
       multiline,
       numberOfLines: multiline ? 4 : 1,
-      right: rightIcon ? /* @__PURE__ */ React.createElement(
+      right: rightIcon ? /* @__PURE__ */ React__default.createElement(
         TextInput$1.Icon,
         {
           icon: rightIcon,
@@ -3279,7 +3291,7 @@ const CommonTextInput = (props) => {
       ) : null,
       ...props
     }
-  ), errorMessage ? /* @__PURE__ */ React.createElement(
+  ), errorMessage ? /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
@@ -3324,6 +3336,22 @@ const styles$8 = StyleSheet.create({
   }
 });
 
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgDropDownArrow = function SvgDropDownArrow(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M19.5 9 12 16.5 4.5 9"
+  })));
+};
+
 const CustomDropdown = ({
   data,
   labelField = "label",
@@ -3350,7 +3378,7 @@ const CustomDropdown = ({
   const [isFocus, setIsFocus] = useState(false);
   const renderLabel = () => {
     if (value || isFocus) {
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React__default.createElement(
         Text,
         {
           style: [
@@ -3372,7 +3400,7 @@ const CustomDropdown = ({
       onValueChange(newValue);
     }
   };
-  return /* @__PURE__ */ React.createElement(View, { style: [styles$7.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { style: [styles$7.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default.createElement(
     Dropdown,
     {
       style: [
@@ -3396,7 +3424,8 @@ const CustomDropdown = ({
       itemTextStyle,
       containerStyle: menuContainerStyle,
       activeColor,
-      itemContainerStyle: [styles$7.itemListStyle, itemContainerStyle]
+      itemContainerStyle: [styles$7.itemListStyle, itemContainerStyle],
+      renderRightIcon: () => /* @__PURE__ */ React__default.createElement(SvgDropDownArrow, null)
     }
   ));
 };
@@ -3492,20 +3521,20 @@ const CustomSwitchBtn = ({
   const toggleSwitch = () => {
     onValueChange(!value);
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       disabled,
       onPress: toggleSwitch,
       style: { ...styles$6.mainContainer, ...containerStyle }
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       Animated.View,
       {
         style: [styles$6.circle, { transform: [{ translateX }], ...circleStyle }]
       }
     ),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         style: [styles$6.activeText, value ? inActiveTextStyle : activeTextStyle],
@@ -3513,7 +3542,7 @@ const CustomSwitchBtn = ({
         variant: activeTextVariant
       }
     ),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         style: [
@@ -3569,7 +3598,7 @@ const TagsComponent = ({
     }
     return tagList;
   };
-  const renderTagItem = ({ item }) => /* @__PURE__ */ React.createElement(
+  const renderTagItem = ({ item }) => /* @__PURE__ */ React__default.createElement(
     Pressable,
     {
       onPress: () => handleTagPress?.(item.name),
@@ -3578,7 +3607,7 @@ const TagsComponent = ({
         selectedTag === item?.name ? [styles.selectedTagButton, selectedTagButton] : [styles.unselectedTagButton, unselectedTagButton]
       ]
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomText$1,
       {
         textColor: selectedTag === item?.name ? Theme.CONTENT_INVERTED : Theme.CONTENT_SECONDRY,
@@ -3587,9 +3616,9 @@ const TagsComponent = ({
       },
       item?.name
     ),
-    selectedTag === item?.name && /* @__PURE__ */ React.createElement(Text, { style: styles.closeButton }, "\u2715")
+    selectedTag === item?.name && /* @__PURE__ */ React__default.createElement(Text, { style: styles.closeButton }, "\u2715")
   );
-  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, null, /* @__PURE__ */ React__default.createElement(
     FlatList,
     {
       data: reorderedTags(),
@@ -3703,7 +3732,7 @@ const CustomDocumentPicker = ({
   const removeDocument = useCallback(() => {
     setDocDetails(void 0);
   }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     View,
     {
       style: [
@@ -3713,14 +3742,14 @@ const CustomDocumentPicker = ({
         containerStyle
       ]
     },
-    /* @__PURE__ */ React.createElement(Pressable, { style: styles$5.innerContainer, onPress: pickDocument }, docDetails ? fileIcon : uploadIcon, /* @__PURE__ */ React.createElement(View, { style: styles$5.titleContainer }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(Pressable, { style: styles$5.innerContainer, onPress: pickDocument }, docDetails ? fileIcon : uploadIcon, /* @__PURE__ */ React__default.createElement(View, { style: styles$5.titleContainer }, /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: FontStyle.L2_REGULAR,
         text: docDetails?.name ?? title,
         style: [{ color: theme.CONTENT_PRIMARY }, titleStyle]
       }
-    ), !docDetails && /* @__PURE__ */ React.createElement(
+    ), !docDetails && /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         variant: FontStyle.L3_REGULAR,
@@ -3728,10 +3757,10 @@ const CustomDocumentPicker = ({
         style: [{ color: theme.CONTENT_SECONDRY }, hintStyle]
       }
     ))),
-    docDetails && React.cloneElement(deleteIcon, {
+    docDetails && React__default.cloneElement(deleteIcon, {
       onPress: removeDocument
     })
-  ), error && /* @__PURE__ */ React.createElement(
+  ), error && /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       variant: FontStyle.L2_REGULAR,
@@ -3771,7 +3800,7 @@ const styles$4 = StyleSheet.create({
   }
 });
 
-const OTPInput = React.forwardRef(
+const OTPInput = React__default.forwardRef(
   ({
     length = 4,
     onComplete,
@@ -3814,7 +3843,7 @@ const OTPInput = React.forwardRef(
         setIsResendOtpEnable(true);
       }, 5e3);
     };
-    React.useImperativeHandle(ref, () => ({
+    React__default.useImperativeHandle(ref, () => ({
       reset() {
         setOTP("");
       }
@@ -3845,7 +3874,7 @@ const OTPInput = React.forwardRef(
         onComplete?.(otp);
       }
     }, [otp]);
-    return /* @__PURE__ */ React.createElement(View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         text: label,
@@ -3856,7 +3885,7 @@ const OTPInput = React.forwardRef(
           ...otpHeaderTextStyle
         }
       }
-    ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$4.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React__default.createElement(View, { style: { ...styles$4.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default.createElement(
       TextInput,
       {
         key: index?.toString(),
@@ -3877,14 +3906,14 @@ const OTPInput = React.forwardRef(
         returnKeyType: otp.length === length ? "done" : "next",
         selectionColor: theme$1.CONTENT_PRIMARY
       }
-    ))), /* @__PURE__ */ React.createElement(
+    ))), /* @__PURE__ */ React__default.createElement(
       Pressable,
       {
         onPress: onClickResendOTP,
         style: styles$4.resendOTPStyle,
         disabled: !isResendOtpEnable
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           text: resendText,
@@ -3896,7 +3925,7 @@ const OTPInput = React.forwardRef(
           }
         }
       )
-    ), /* @__PURE__ */ React.createElement(View, { style: styles$4.resendOtpContainer }, errorMessage ? /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React__default.createElement(View, { style: styles$4.resendOtpContainer }, errorMessage ? /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         text: errorMessage,
@@ -3906,7 +3935,7 @@ const OTPInput = React.forwardRef(
           color: theme$1.ERROR
         }
       }
-    ) : /* @__PURE__ */ React.createElement(View, null)));
+    ) : /* @__PURE__ */ React__default.createElement(View, null)));
   }
 );
 var index$4 = withThemeProvider(OTPInput);
@@ -4039,18 +4068,18 @@ const Stepper = ({
       return { borderColor: theme.CONTENT_SECONDRY };
     }
   };
-  return /* @__PURE__ */ React.createElement(View, { style: { ...styles$3.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
+  return /* @__PURE__ */ React__default.createElement(View, { style: { ...styles$3.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
     const stepCircleStyle = renderCircleStyle(item?.status);
     const dividerStyle = renderDividerStyle(item?.status);
     const labelStyle = renderLableStyle(item?.status);
     const lastViewStyle = index === data?.length - 1 ? styles$3.lastStepWrapper : null;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       View,
       {
         key: index?.toString(),
         style: { ...styles$3.stepperWrapper, ...lastViewStyle }
       },
-      /* @__PURE__ */ React.createElement(View, { style: styles$3.stepperSeparatorContainer }, /* @__PURE__ */ React.createElement(View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(View, { style: styles$3.stepperSeparatorContainer }, /* @__PURE__ */ React__default.createElement(View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           text: item?.step,
@@ -4059,8 +4088,8 @@ const Stepper = ({
             color: theme.CONTENT_PRIMARY
           }
         }
-      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React.createElement(View, { style: { ...styles$3.separator, ...dividerStyle } })),
-      /* @__PURE__ */ React.createElement(View, { style: styles$3.lableContainer }, /* @__PURE__ */ React.createElement(
+      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React__default.createElement(View, { style: { ...styles$3.separator, ...dividerStyle } })),
+      /* @__PURE__ */ React__default.createElement(View, { style: styles$3.lableContainer }, /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           text: item?.label,
@@ -4161,11 +4190,11 @@ const CustomSlideButton = ({
     })
   ).current;
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(View, { style: {
+  return /* @__PURE__ */ React__default.createElement(View, { style: {
     ...styles$2.sliderContainer,
     backgroundColor: theme.SURFACE_INVERTED,
     ...containerStyle
-  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React.createElement(View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React.createElement(
+  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React__default.createElement(View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React__default.createElement(
     CustomTypography,
     {
       text: label,
@@ -4176,13 +4205,13 @@ const CustomSlideButton = ({
         ...textStyle
       }
     }
-  )), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React__default.createElement(
     Animated.View,
     {
       style: [styles$2.slider, { transform: [{ translateX: pan }] }],
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       View,
       {
         style: {
@@ -4302,7 +4331,7 @@ const AppointmentCard = ({
   directionText
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Accordion$1,
     {
       title,
@@ -4315,14 +4344,14 @@ const AppointmentCard = ({
         borderBottomColor: theme.BORDER_SEPERATOR_HEADER
       },
       headerStyle: styles$1.accordionHeader,
-      headerComponent: () => /* @__PURE__ */ React.createElement(View, { style: styles$1.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React.createElement(View, { style: styles$1.accordionText }, /* @__PURE__ */ React.createElement(
+      headerComponent: () => /* @__PURE__ */ React__default.createElement(View, { style: styles$1.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React__default.createElement(View, { style: styles$1.accordionText }, /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           text: headerTitle,
           variant: FontStyle.L2_REGULAR,
           style: { color: theme.CONTENT_SECONDRY }
         }
-      ), /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           text: headerSubtitle,
@@ -4332,7 +4361,7 @@ const AppointmentCard = ({
       ))),
       icon
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       View,
       {
         style: [
@@ -4340,14 +4369,14 @@ const AppointmentCard = ({
           { borderTopColor: theme.BORDER_SEPERATOR_HEADER }
         ]
       },
-      /* @__PURE__ */ React.createElement(View, { style: styles$1.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React.createElement(View, { style: styles$1.infoColumn, key: title2 }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(View, { style: styles$1.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React__default.createElement(View, { style: styles$1.infoColumn, key: title2 }, /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           text: title2,
           variant: FontStyle.L3_REGULAR,
           style: { color: theme.CONTENT_SECONDRY }
         }
-      ), /* @__PURE__ */ React.createElement(View, { style: styles$1.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React__default.createElement(View, { style: styles$1.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           text: value,
@@ -4356,7 +4385,7 @@ const AppointmentCard = ({
             color: isStatus ? theme.WARNING : theme.CONTENT_PRIMARY
           }
         }
-      )), isLocation && /* @__PURE__ */ React.createElement(
+      )), isLocation && /* @__PURE__ */ React__default.createElement(
         CustomTypography,
         {
           text: directionText,
@@ -4368,7 +4397,7 @@ const AppointmentCard = ({
           onPress: onDirectionPress
         }
       )))),
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         View,
         {
           style: [
@@ -4379,7 +4408,7 @@ const AppointmentCard = ({
           ]
         },
         infoIcon,
-        /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React__default.createElement(
           CustomTypography,
           {
             text: info,
@@ -4388,7 +4417,7 @@ const AppointmentCard = ({
           }
         )
       ),
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         View,
         {
           style: [
@@ -4398,7 +4427,7 @@ const AppointmentCard = ({
             }
           ]
         },
-        /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React__default.createElement(
           CustomTypography,
           {
             text: viewText,
@@ -4412,7 +4441,7 @@ const AppointmentCard = ({
             onPress: onViewDetailsPress
           }
         ),
-        /* @__PURE__ */ React.createElement(View, { style: styles$1.actionIcons }, /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React__default.createElement(View, { style: styles$1.actionIcons }, /* @__PURE__ */ React__default.createElement(
           CustomIcon,
           {
             icon: deleteIcon,
@@ -4422,7 +4451,7 @@ const AppointmentCard = ({
             },
             onPress: onDeletePress
           }
-        ), /* @__PURE__ */ React.createElement(
+        ), /* @__PURE__ */ React__default.createElement(
           CustomIcon,
           {
             icon: editIcon,
@@ -4475,7 +4504,7 @@ const PropertyDetails = ({
   onRightIconPress
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     View,
     {
       style: {
@@ -4484,25 +4513,25 @@ const PropertyDetails = ({
         borderColor: theme.BORDER_SEPERATOR_HEADER
       }
     },
-    React.cloneElement(icon, {
+    React__default.cloneElement(icon, {
       width: moderateScale(87),
       height: moderateScale(87)
     }),
-    /* @__PURE__ */ React.createElement(View, { style: styles.propertyInfo }, brandIcon, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(View, { style: styles.propertyInfo }, brandIcon, /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         text: title,
         variant: FontStyle.L2_REGULAR,
         style: { color: theme.CONTENT_PRIMARY }
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         text: subTitle,
         variant: FontStyle.L1_REGULAR,
         style: { color: theme.CONTENT_PRIMARY }
       }
-    ), /* @__PURE__ */ React.createElement(View, { style: styles.propertyNumber }, /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React__default.createElement(View, { style: styles.propertyNumber }, /* @__PURE__ */ React__default.createElement(
       CustomTypography,
       {
         text: propertyNumber,
@@ -4512,7 +4541,7 @@ const PropertyDetails = ({
         }
       }
     ), hintIcon)),
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CustomIcon,
       {
         icon: btnIcon,