dhre-ui-kit 0.0.123 → 0.0.125

package/lib/index.js

@@ -16,6 +16,7 @@ var reactNativePaper = require('react-native-paper');
 var reactNativeElementDropdown = require('react-native-element-dropdown');
 var DocumentPicker = require('react-native-document-picker');
 var RNFS = require('react-native-fs');
+var stylehelper = require('src/utils/stylehelper');
 var Clipboard = require('@react-native-clipboard/clipboard');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -250,8 +251,8 @@ const theme = {
     dark: "#404040"
   },
   [Theme.BORDER_SEPRATOR]: {
-    light: "#282828",
-    dark: "#FFFFFF"
+    light: "#F5F5F5",
+    dark: "#282828"
   },
   [Theme.BORDER_SEPERATOR_HEADER]: {
     light: "#E1E1E1",
@@ -567,7 +568,7 @@ const DHRE_COLORS_TEXT = {
   DH_LIGHTGREEN: "#00B578"
 };
 
-const styles$C = reactNative.StyleSheet.create({
+const styles$E = reactNative.StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -594,16 +595,16 @@ const Badge = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
-      style: [styles$C.badge, commonStyles.centerRow, style],
+      style: [styles$E.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$C.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$E.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
     text && /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$C.text, textStyle],
+        style: [styles$E.text, textStyle],
         text
       }
     )
@@ -611,7 +612,7 @@ const Badge = ({
 };
 var Badge$1 = withThemeProvider(Badge);
 
-const styles$B = reactNative.StyleSheet.create({
+const styles$D = reactNative.StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -690,29 +691,29 @@ const BottomDrawer = ({
         behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$B.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$D.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
         blur.BlurView,
         {
-          style: [styles$B.blurView, blurViewStyle],
+          style: [styles$D.blurView, blurViewStyle],
           blurType: "light",
           blurAmount
         }
-      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$B.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$B.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$B.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$D.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$D.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$D.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$B.leftIconStyle,
+        style: styles$D.leftIconStyle,
         onPress: onLeftIconPress
       }) : null, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: titleVariant,
           text: title,
-          style: { ...styles$B.title, ...titleStyle }
+          style: { ...styles$D.title, ...titleStyle }
         }
       ), showRightIcon && rightIcon ? React__default["default"].cloneElement(rightIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$B.rightIconStyle,
+        style: styles$D.rightIconStyle,
         onPress: toggleModal
       }) : null)), children))
     ))
@@ -741,7 +742,7 @@ const CustomButton = ({
     {
       testID,
       style: [
-        styles$A.buttonContainer,
+        styles$C.buttonContainer,
         containerStyle,
         disabled ? {
           backgroundColor: disabledColor ? disabledColor : theme.SURFACE_DISABLE
@@ -768,7 +769,7 @@ const CustomButton = ({
     imagePosition === "right" && rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(rightIcon, { width: 20, height: 20 }))
   );
 };
-const styles$A = reactNative.StyleSheet.create({
+const styles$C = reactNative.StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -780,7 +781,7 @@ const styles$A = reactNative.StyleSheet.create({
 });
 var CustomButton$1 = withThemeProvider(CustomButton);
 
-const styles$z = reactNative.StyleSheet.create({
+const styles$B = reactNative.StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -845,53 +846,53 @@ const Cards = ({
   testID,
   onButtonPress
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$z.container }, topLeftTitle ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.topLeft }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$B.container }, topLeftTitle ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$B.topLeft }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P2regular",
-      style: styles$z.title,
+      style: styles$B.title,
       text: topLeftTitle
     }
   )) : null, title ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "H6bold",
-      style: styles$z.subTitleBelow,
+      style: styles$B.subTitleBelow,
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$z.subtitle,
+      style: styles$B.subtitle,
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$B.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$z.subTitleLeftBelow,
+      style: styles$B.subTitleLeftBelow,
       text: iconTitle
     }
   ) : null), buttonShown ? /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Button-Press",
-      style: styles$z.button,
+      style: styles$B.button,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B2semiBold",
-        style: styles$z.buttonText,
+        style: styles$B.buttonText,
         text: buttonText
       }
     )
   ) : null);
 };
 
-const styles$y = reactNative.StyleSheet.create({
+const styles$A = reactNative.StyleSheet.create({
   checkboxContainer: {
     alignItems: "center",
     justifyContent: "center"
@@ -947,9 +948,9 @@ const Checkbox = ({
       testID: "Checkbox-Press",
       onPress: handlePress,
       disabled: disable,
-      style: styles$y.directionStyle
+      style: styles$A.directionStyle
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$y.checkboxContainer }, React__default["default"].cloneElement(checked ? checkedIcon : uncheckedIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$A.checkboxContainer }, React__default["default"].cloneElement(checked ? checkedIcon : uncheckedIcon)),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
@@ -961,7 +962,7 @@ const Checkbox = ({
   ));
 };
 
-const styles$x = reactNative.StyleSheet.create({
+const styles$z = reactNative.StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
   },
@@ -1015,26 +1016,26 @@ const CustomDropdown$1 = ({
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$x.labelStyle,
+      style: styles$z.labelStyle,
       text: label
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: `${testId}-BTN`,
-      style: styles$x.dropDownStyle,
+      style: styles$z.dropDownStyle,
       onPress: () => setShowOptions(!showOptions)
     },
     iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$x.iconStyle
+      style: styles$z.iconStyle
     })),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P3regular",
-        style: styles$x.selectedValueStyle,
+        style: styles$z.selectedValueStyle,
         text: selectedValue ? selectedValue.label : placeholder
       }
     ),
@@ -1045,7 +1046,7 @@ const CustomDropdown$1 = ({
       width: moderateScale(24),
       height: moderateScale(24)
     }))
-  ), showOptions && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$x.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default["default"].createElement(
+  ), showOptions && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       key: id,
@@ -1055,7 +1056,7 @@ const CustomDropdown$1 = ({
         oneSelect({ id, value, label: label2 });
       },
       style: [
-        styles$x.item,
+        styles$z.item,
         {
           backgroundColor: id === selectedValue?.id ? DHRE_COLORS_BG.DH_GREY1 : DHRE_COLORS_TEXT.DH_WHITE
         }
@@ -1064,7 +1065,7 @@ const CustomDropdown$1 = ({
     iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$x.iconStyle
+      style: styles$z.iconStyle
     })),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
@@ -1079,7 +1080,7 @@ const CustomDropdown$1 = ({
   ))));
 };
 
-const styles$w = reactNative.StyleSheet.create({
+const styles$y = reactNative.StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTDARK
   },
@@ -1161,18 +1162,18 @@ const CustomTextInput = ({
     CustomTypography,
     {
       variant: "P3medium",
-      style: [styles$w.labelStyle, disabled && styles$w.disableTextStyle],
+      style: [styles$y.labelStyle, disabled && styles$y.disableTextStyle],
       text: label
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
       style: [
-        styles$w.inputContainer,
-        isFocused && styles$w.inputFocused,
-        error && styles$w.inputError,
-        disabled && styles$w.disableInputStyle,
-        successMessage ? styles$w.inputSucess : {},
+        styles$y.inputContainer,
+        isFocused && styles$y.inputFocused,
+        error && styles$y.inputError,
+        disabled && styles$y.disableInputStyle,
+        successMessage ? styles$y.inputSucess : {},
         {
           height: multiline ? 120 : 48,
           alignItems: multiline ? "flex-start" : "center"
@@ -1182,7 +1183,7 @@ const CustomTextInput = ({
     isSearchBar && searchIcon && React__default["default"].cloneElement(searchIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$w.searchIconStyle
+      style: styles$y.searchIconStyle
     }),
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TextInput,
@@ -1190,7 +1191,7 @@ const CustomTextInput = ({
         ...props,
         onFocus,
         onBlur,
-        style: styles$w.input,
+        style: styles$y.input,
         placeholderTextColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
         editable: !disabled,
         value,
@@ -1223,7 +1224,7 @@ const CustomTextInput = ({
   ));
 };
 
-const styles$v = reactNative.StyleSheet.create({
+const styles$x = reactNative.StyleSheet.create({
   tooltipContainerStyle: {
     flex: 1,
     borderRadius: moderateScale(16),
@@ -1252,18 +1253,18 @@ const CustomTooltip = ({
   iconStyle,
   iconColor = DHRE_COLORS_TEXT.DH_BLACK
 }) => {
-  const defaultPopoverContent = /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.mesageContainer, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(
+  const defaultPopoverContent = /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$x.mesageContainer, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P4regular",
-      style: styles$v.messageStyle,
+      style: styles$x.messageStyle,
       text: message
     }
   ), icon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(icon, { fill: iconColor })));
   return /* @__PURE__ */ React__default["default"].createElement(
     Tooltip__default["default"],
     {
-      containerStyle: styles$v.tooltipContainerStyle,
+      containerStyle: styles$x.tooltipContainerStyle,
       backgroundColor,
       popover: popoverContent || defaultPopoverContent,
       actionType
@@ -1272,7 +1273,7 @@ const CustomTooltip = ({
   );
 };
 
-const styles$u = reactNative.StyleSheet.create({
+const styles$w = reactNative.StyleSheet.create({
   container: {
     backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
     paddingHorizontal: horizontalScale(16),
@@ -1322,21 +1323,21 @@ const FileUpload = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
-      style: [styles$u.container, containerStyle],
+      style: [styles$w.container, containerStyle],
       testID: "file-upload-container"
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$u.content }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React__default["default"].cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React__default["default"].createElement(CustomTypography, { variant: "H8bold", style: styles$u.title, text: title }), /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$w.content }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React__default["default"].cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React__default["default"].createElement(CustomTypography, { variant: "H8bold", style: styles$w.title, text: title }), /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$u.description,
+        style: styles$w.description,
         text: `Drop files directly here or `
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$u.browse,
+        style: styles$w.browse,
         text: btnText
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
@@ -1344,14 +1345,14 @@ const FileUpload = ({
       {
         testID: "file-upload-description",
         variant: "P4regular",
-        style: styles$u.description,
+        style: styles$w.description,
         text: ` from your device`
       }
     )),
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Pressable,
       {
-        style: styles$u.button,
+        style: styles$w.button,
         onPress: onUpload,
         testID: "file-upload-button"
       },
@@ -1359,7 +1360,7 @@ const FileUpload = ({
         CustomTypography,
         {
           variant: "B2semiBold",
-          style: styles$u.buttonText,
+          style: styles$w.buttonText,
           text: btnText
         }
       )
@@ -1371,7 +1372,7 @@ const PdfView = (props) => {
   return /* @__PURE__ */ React__default["default"].createElement(Pdf__default["default"], { ...props });
 };
 
-const styles$t = reactNative.StyleSheet.create({
+const styles$v = reactNative.StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -1427,39 +1428,39 @@ const PopUp = ({
   leftButtonShown = false,
   rightButtonShown = false
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$t.container }, title ? /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$v.container }, title ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$t.subTitleBelow,
+      style: styles$v.subTitleBelow,
       variant: "H6semiBold",
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$t.subtitle,
+      style: styles$v.subtitle,
       variant: "P3regular",
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$t.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Left-Button-Press",
-      style: styles$t.buttonLeft,
+      style: styles$v.buttonLeft,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        style: styles$t.buttonLeftText,
+        style: styles$v.buttonLeftText,
         variant: "B2semiBold",
         text: buttonText
       }
     )
-  ) : null, rightButtonShown ? /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$t.button, onPress: onButtonPress }, /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, rightButtonShown ? /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$v.button, onPress: onButtonPress }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$t.buttonText,
+      style: styles$v.buttonText,
       variant: "B2semiBold",
       text: buttonText
     }
@@ -1497,7 +1498,7 @@ const CustomProgressBar = ({
     return () => clearInterval(progressInterval);
   }, [progress, value, increment, interval]);
   const showPercentage = () => {
-    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$s.flexDirection }, /* @__PURE__ */ React__default["default"].createElement(
+    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$u.flexDirection }, /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
         text: `${value}%`,
@@ -1551,7 +1552,7 @@ const CustomProgressBar = ({
   };
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID: "custom-progress-bar" }, renderProgressBar());
 };
-const styles$s = reactNative.StyleSheet.create({
+const styles$u = reactNative.StyleSheet.create({
   flexDirection: {
     flexDirection: "column",
     justifyContent: "center",
@@ -1559,7 +1560,7 @@ const styles$s = reactNative.StyleSheet.create({
   }
 });
 
-const styles$r = reactNative.StyleSheet.create({
+const styles$t = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center"
@@ -1625,13 +1626,13 @@ const Star = ({
       emptyStarColor
     );
     stars.push(
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { key: i, style: [styles$r.star, starStyle] }, starType)
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { key: i, style: [styles$t.star, starStyle] }, starType)
     );
   }
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$r.container, testID: "star" }, stars);
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$t.container, testID: "star" }, stars);
 };
 
-var styles$q = reactNative.StyleSheet.create({
+var styles$s = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     gap: horizontalScale(5),
@@ -1673,12 +1674,12 @@ const Tabs = ({
       onSelectionChange(selectedTabs);
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$q.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$s.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       key: id,
       style: {
-        ...styles$q.button,
+        ...styles$s.button,
         backgroundColor: isSelected ? theme.CONTENT_PRIMARY : theme.CONTENT_INVERTED,
         borderColor: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_SECONDRY
       },
@@ -1698,7 +1699,7 @@ const Tabs = ({
 };
 var Tabs$1 = withThemeProvider(Tabs);
 
-const styles$p = reactNative.StyleSheet.create({
+const styles$r = reactNative.StyleSheet.create({
   container: {
     width: "100%"
   },
@@ -1757,8 +1758,8 @@ const Tags = ({
     reactNative.ScrollView,
     {
       testID,
-      style: styles$p.container,
-      contentContainerStyle: styles$p.contentContainer,
+      style: styles$r.container,
+      contentContainerStyle: styles$r.contentContainer,
       horizontal: false
     },
     tags?.map((tag) => /* @__PURE__ */ React__default["default"].createElement(
@@ -1768,16 +1769,16 @@ const Tags = ({
         key: tag,
         onPress: () => toggleTag(tag),
         style: [
-          styles$p.tag,
+          styles$r.tag,
           tagStyles,
-          selectedTags.includes(tag) ? styles$p.selectedTag : styles$p.tagUnSelected
+          selectedTags.includes(tag) ? styles$r.selectedTag : styles$r.tagUnSelected
         ]
       },
       /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: selectedTags.includes(tag) ? "H9semiBold" : "P4regular",
-          style: selectedTags.includes(tag) ? styles$p.tagText : styles$p.tagUnselectedText,
+          style: selectedTags.includes(tag) ? styles$r.tagText : styles$r.tagUnselectedText,
           text: tag
         }
       ),
@@ -1793,7 +1794,7 @@ const Tags = ({
   );
 };
 
-const styles$o = reactNative.StyleSheet.create({
+const styles$q = reactNative.StyleSheet.create({
   container: {
     width: horizontalScale(70),
     height: verticalScale(25),
@@ -1858,26 +1859,26 @@ const CustomSwitch = ({
     reactNative.Pressable,
     {
       onPress: toggleSwitch,
-      style: [styles$o.container, { width }],
+      style: [styles$q.container, { width }],
       testID: "custom-switch"
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
       {
         style: [
-          styles$o.track,
+          styles$q.track,
           {
             backgroundColor: isOn ? DHRE_COLORS_ALERT.DH_SUCCESS_GREEN_ACCENT : DHRE_COLORS_TEXT.DH_TEXTDISABLED
           }
         ]
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$o.thumb, animatedStyle] }),
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$q.thumb, animatedStyle] }),
       type !== ToggleButtonType.SMALL && /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: "B3semiBold",
           style: [
-            styles$o.text,
+            styles$q.text,
             { textAlign: isOn ? TextDirectType.left : TextDirectType.right }
           ],
           text: isOn ? ToggleTextType.ON : ToggleTextType.OFF
@@ -1887,7 +1888,7 @@ const CustomSwitch = ({
   );
 };
 
-const styles$n = reactNative.StyleSheet.create({
+const styles$p = reactNative.StyleSheet.create({
   container: {
     paddingVertical: verticalScale(24),
     borderBottomWidth: moderateScale(1),
@@ -1920,7 +1921,8 @@ const Accordion = ({
   // Destructure the new prop,
   headerComponent,
   disabled = false,
-  icon
+  icon,
+  onHeaderPress
 }) => {
   const contentRef = React.useRef(null);
   const [animation] = React.useState(new reactNative.Animated.Value(0));
@@ -1943,26 +1945,18 @@ const Accordion = ({
     inputRange: [0, 1],
     outputRange: [0, contentHeight]
   });
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$n.container, containerStyle], testID: testId }, /* @__PURE__ */ React__default["default"].createElement(
-    reactNative.Pressable,
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$p.container, containerStyle], testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$p.header, headerStyle, disabled && { opacity: 0.5 }] }, headerComponent ? headerComponent() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onHeaderPress }, /* @__PURE__ */ React__default["default"].createElement(
+    CustomTypography,
     {
-      style: [styles$n.header, headerStyle, disabled && { opacity: 0.5 }],
-      onPress: !disabled ? onToggle : void 0
-    },
-    headerComponent ? headerComponent() : /* @__PURE__ */ React__default["default"].createElement(
-      CustomTypography,
-      {
-        variant: "B4_REGULAR",
-        text: title,
-        style: [styles$n.title, titleStyle]
-      }
-    ),
-    React__default["default"].cloneElement(icon, {
-      width: moderateScale(20),
-      height: moderateScale(20),
-      style: styles$n.iconStyle
-    })
-  ), optionalElement ? optionalElement() : null, isOpen && /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$n.content, { height: cardHeight }] }, /* @__PURE__ */ React__default["default"].createElement(
+      variant: "B4_REGULAR",
+      text: title,
+      style: [styles$p.title, titleStyle]
+    }
+  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: !disabled ? onToggle : void 0 }, React__default["default"].cloneElement(icon, {
+    width: moderateScale(20),
+    height: moderateScale(20),
+    style: styles$p.iconStyle
+  }))), optionalElement ? optionalElement() : null, isOpen && /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$p.content, { height: cardHeight }] }, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
       ref: contentRef,
@@ -1974,7 +1968,7 @@ const Accordion = ({
   )));
 };
 
-const styles$m = reactNative.StyleSheet.create({
+const styles$o = reactNative.StyleSheet.create({
   container: {
     position: "absolute",
     alignSelf: "center",
@@ -2056,23 +2050,23 @@ const Toast = React__default["default"].forwardRef(({ sucessIcon, errorIcon }, r
     reactNative.Animated.View,
     {
       style: [
-        styles$m.container,
+        styles$o.container,
         { bottom },
         { backgroundColor: isSuccess ? "#04743F" : "#DB3056" }
       ],
       testID: "TOAST"
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.innerContainer }, isSuccess ? sucessIcon : errorIcon, /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$o.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$o.innerContainer }, isSuccess ? sucessIcon : errorIcon, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "L2_REGULAR",
         text: message,
-        style: styles$m.messageText
+        style: styles$o.messageText
       }
     ), btnText && /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Pressable,
       {
-        style: styles$m.button,
+        style: styles$o.button,
         onPress: onBtnPress || void 0,
         testID: "TOAST-BTN"
       },
@@ -2081,7 +2075,7 @@ const Toast = React__default["default"].forwardRef(({ sucessIcon, errorIcon }, r
         {
           variant: "L2_BOLD",
           text: btnText,
-          style: styles$m.buttonText
+          style: styles$o.buttonText
         }
       )
     ))),
@@ -2099,7 +2093,7 @@ const Toast = React__default["default"].forwardRef(({ sucessIcon, errorIcon }, r
 });
 Toast.displayName = "Toast";
 
-const styles$l = reactNative.StyleSheet.create({
+const styles$n = reactNative.StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     justifyContent: "center",
@@ -2143,7 +2137,7 @@ const CustomSearchBar = ({
     {
       testID,
       style: [
-        styles$l.inputContainer,
+        styles$n.inputContainer,
         {
           height: verticalScale(height),
           borderColor: disabled ? disableBorderColor : value ? borderColor : "#A7A7A7"
@@ -2163,7 +2157,7 @@ const CustomSearchBar = ({
       React__default["default"].cloneElement(searchIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: [styles$l.searchIconStyle, searchIconStyle]
+        style: [styles$n.searchIconStyle, searchIconStyle]
       })
     ),
     /* @__PURE__ */ React__default["default"].createElement(
@@ -2171,7 +2165,7 @@ const CustomSearchBar = ({
       {
         ...props,
         testID: `${testID}-INPUT`,
-        style: [styles$l.input, inputStyle],
+        style: [styles$n.input, inputStyle],
         editable: !disabled,
         value,
         placeholderTextColor: disabled ? disablePlaceHolderStyle : enablePlaceHolderStyle,
@@ -2193,13 +2187,13 @@ const CustomSearchBar = ({
       React__default["default"].cloneElement(rightIcon, {
         // width: moderateScale(24),
         // height: moderateScale(24),
-        style: [styles$l.crossIconStyle, crossIconStyle]
+        style: [styles$n.crossIconStyle, crossIconStyle]
       })
     )
   );
 };
 
-const styles$k = reactNative.StyleSheet.create({
+const styles$m = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -2231,27 +2225,27 @@ const CustomHeader = ({
   onLeftPress,
   onRightPress
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.container, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.headderContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.container, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.headderContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
     width: moderateScale(24),
     height: moderateScale(24),
     onPress: onLeftPress,
-    style: styles$k.leftIconStyle
+    style: styles$m.leftIconStyle
   }) : null, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "B2_REGULAR",
       text: title,
-      style: styles$k.headerTitle
+      style: styles$m.headerTitle
     }
   )), showRightIcon && rightIcon ? React__default["default"].cloneElement(rightIcon, {
     width: moderateScale(24),
     height: moderateScale(24),
     onPress: onRightPress,
-    style: styles$k.rightIconStyle
+    style: styles$m.rightIconStyle
   }) : null);
 };
 
-const styles$j = reactNative.StyleSheet.create({
+const styles$l = reactNative.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -2312,19 +2306,19 @@ const SwipableList = (props) => {
     {
       testID,
       onPress,
-      style: [styles$j.actionButton, style]
+      style: [styles$l.actionButton, style]
     },
     icon,
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "L1_REGULAR",
-        style: [styles$j.titleStyle, titleStyle],
+        style: [styles$l.titleStyle, titleStyle],
         text: title
       }
     )
   );
-  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$j.leftActions, leftPrimaryActionStyle] }, leftPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$l.leftActions, leftPrimaryActionStyle] }, leftPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
     ActionButton,
     {
       icon: leftPrimaryActionIcon,
@@ -2343,7 +2337,7 @@ const SwipableList = (props) => {
       testID: `${testId}-LEFT-SECONDARY-${item.id}`
     }
   ));
-  const rightActionHandle = (item) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$j.rightActions, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
+  const rightActionHandle = (item) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$l.rightActions, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
     ActionButton,
     {
       icon: rightPrimaryActionIcon,
@@ -2353,7 +2347,7 @@ const SwipableList = (props) => {
       testID: `${testId}-RIGHT-PRIMARY-${item.id}`
     }
   ));
-  const renderItem = ({ item }) => /* @__PURE__ */ React__default["default"].createElement(reactNativeGestureHandler.GestureHandlerRootView, { testID: `${testId}-LIST`, style: styles$j.container }, /* @__PURE__ */ React__default["default"].createElement(
+  const renderItem = ({ item }) => /* @__PURE__ */ React__default["default"].createElement(reactNativeGestureHandler.GestureHandlerRootView, { testID: `${testId}-LIST`, style: styles$l.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNativeGestureHandler.Swipeable,
     {
       renderLeftActions: () => leftActionHandle(
@@ -2364,7 +2358,7 @@ const SwipableList = (props) => {
         item.isRead ? leftSecondaryActionInActiveTitle : leftSecondaryActionActiveTitle
       ),
       renderRightActions: () => rightActionHandle(item),
-      containerStyle: styles$j.swippableContainer
+      containerStyle: styles$l.swippableContainer
     },
     props?.renderItem(item)
   ));
@@ -2374,12 +2368,12 @@ const SwipableList = (props) => {
       data,
       renderItem,
       keyExtractor: (item) => item.id,
-      ItemSeparatorComponent: () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.seprator })
+      ItemSeparatorComponent: () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$l.seprator })
     }
   ));
 };
 
-const styles$i = reactNative.StyleSheet.create({
+const styles$k = reactNative.StyleSheet.create({
   container: {
     justifyContent: "center",
     alignItems: "center"
@@ -2401,7 +2395,7 @@ const CustomIcon = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
-      style: [styles$i.container, containerStyle],
+      style: [styles$k.container, containerStyle],
       onPress,
       testID: testId
     },
@@ -2411,13 +2405,13 @@ const CustomIcon = ({
       {
         variant: titleVariant,
         text: title,
-        style: [styles$i.title, titleStyle]
+        style: [styles$k.title, titleStyle]
       }
     )
   );
 };
 
-const styles$h = reactNative.StyleSheet.create({
+const styles$j = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
@@ -2432,7 +2426,7 @@ const styles$h = reactNative.StyleSheet.create({
 
 const CustomLoader = ({ loading }) => {
   if (!loading) return null;
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.container }, /* @__PURE__ */ React__default["default"].createElement(reactNative.ActivityIndicator, { size: "large", color: "#686868" }));
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.container }, /* @__PURE__ */ React__default["default"].createElement(reactNative.ActivityIndicator, { size: "large", color: "#686868" }));
 };
 
 const HorizontalLine = ({ style }) => {
@@ -2441,14 +2435,14 @@ const HorizontalLine = ({ style }) => {
     reactNative.View,
     {
       style: [
-        styles$g.line,
+        styles$i.line,
         { backgroundColor: theme["SURFACE_SECONDARY"] },
         style
       ]
     }
   );
 };
-const styles$g = reactNative.StyleSheet.create({
+const styles$i = reactNative.StyleSheet.create({
   line: {
     height: 1,
     width: "100%"
@@ -2468,14 +2462,14 @@ const Topic = ({
     reactNative.TouchableOpacity,
     {
       style: [
-        styles$f.button,
+        styles$h.button,
         { backgroundColor: theme["SURFACE_SECONDARY"] },
         containterStyle
       ],
       onPress
     },
-    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$f.rightIconContainer }, React__default["default"].cloneElement(rightIcon)),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$f.textContainer }, subTitle && /* @__PURE__ */ React__default["default"].createElement(
+    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.rightIconContainer }, React__default["default"].cloneElement(rightIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.textContainer }, subTitle && /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
         text: subTitle,
@@ -2492,7 +2486,7 @@ const Topic = ({
     ))
   );
 };
-const styles$f = reactNative.StyleSheet.create({
+const styles$h = reactNative.StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -2573,14 +2567,14 @@ const ContactModal = ({
   const renderEmailOptions = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$e.title,
+      style: styles$g.title,
       text: "Open email app",
       variant: "L2_REGULAR"
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$e.subtitle,
+      style: styles$g.subtitle,
       text: "Which app would you like to open?",
       variant: "L2_REGULAR"
     }
@@ -2588,33 +2582,33 @@ const ContactModal = ({
     reactNative.Pressable,
     {
       onPress: () => handleOptionPress(),
-      style: styles$e.optionButton
+      style: styles$g.optionButton
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
-        style: styles$e.optionText,
+        style: styles$g.optionText,
         text: option,
         variant: "B3_BOLD"
       }
     )
   ))));
-  const renderContent = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handleCall, style: styles$e.optionButton }, /* @__PURE__ */ React__default["default"].createElement(
+  const renderContent = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handleCall, style: styles$g.optionButton }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$e.optionText,
+      style: styles$g.optionText,
       text: `Call ${phoneNumber}`,
       variant: "B3_BOLD"
     }
-  ))), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onClose, style: styles$e.cancelButton }, /* @__PURE__ */ React__default["default"].createElement(
+  ))), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onClose, style: styles$g.cancelButton }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$e.cancelText,
+      style: styles$g.cancelText,
       text: "Cancel",
       variant: "B2_REGULAR"
     }
   )));
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.container }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Modal,
     {
       animationType: "slide",
@@ -2622,10 +2616,10 @@ const ContactModal = ({
       visible,
       onRequestClose: onClose
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.modalContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.modalContent }, renderContent()))
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.modalContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.modalContent }, renderContent()))
   ));
 };
-const styles$e = reactNative.StyleSheet.create({
+const styles$g = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
@@ -2681,7 +2675,7 @@ const styles$e = reactNative.StyleSheet.create({
 });
 var ContactModel = withThemeProvider(ContactModal);
 
-const styles$d = reactNative.StyleSheet.create({
+const styles$f = reactNative.StyleSheet.create({
   applyButton: {
     marginTop: verticalScale(24),
     height: verticalScale(48),
@@ -2772,8 +2766,8 @@ const DateRangePicker = (props) => {
       onPress: () => {
         onButtonPress(selectedRange?.startDate, selectedRange?.endDate);
       },
-      containerStyle: styles$d.applyButton,
-      textStyle: styles$d.applyButtonText,
+      containerStyle: styles$f.applyButton,
+      textStyle: styles$f.applyButtonText,
       disabled: isButtonDisabled
     }
   ));
@@ -2796,20 +2790,20 @@ const OurOfficesButton = ({
     reactNative.TouchableOpacity,
     {
       style: [
-        styles$c.button,
+        styles$e.button,
         { backgroundColor: theme["SURFACE_SECONDARY"] },
         containerStyle
       ],
       onPress
     },
-    leftIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.iconContainer }, React__default["default"].cloneElement(leftIcon)),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.textContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    leftIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.iconContainer }, React__default["default"].cloneElement(leftIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.textContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
         text: title,
         variant: titleVariant,
         textColor: titleColor,
-        style: styles$c.textView
+        style: styles$e.textView
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
@@ -2817,13 +2811,13 @@ const OurOfficesButton = ({
         text: description,
         variant: descriptionVariant,
         textColor: descriptionColor,
-        style: styles$c.flexWrap
+        style: styles$e.flexWrap
       }
     )),
-    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.rightIconContainer }, React__default["default"].cloneElement(rightIcon))
+    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.rightIconContainer }, React__default["default"].cloneElement(rightIcon))
   );
 };
-const styles$c = reactNative.StyleSheet.create({
+const styles$e = reactNative.StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -2847,7 +2841,7 @@ const styles$c = reactNative.StyleSheet.create({
 });
 var OurOffices = withThemeProvider(OurOfficesButton);
 
-const styles$b = reactNative.StyleSheet.create({
+const styles$d = reactNative.StyleSheet.create({
   iconContainer: {
     position: "relative",
     alignItems: "center"
@@ -2876,7 +2870,7 @@ const NotificationBandge = ({
   if (notificationCount <= 0) {
     return icon;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.iconContainer }, icon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.badge }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$b.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.iconContainer }, icon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.badge }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$d.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
 };
 
 const ScrollableList = ({
@@ -2894,13 +2888,13 @@ const ScrollableList = ({
     data && data.length > 0 ? data[0].name : null
   );
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$a.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$c.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.ScrollView,
     {
       horizontal: true,
       showsHorizontalScrollIndicator: false,
       contentContainerStyle: [
-        styles$a.scrollViewContent,
+        styles$c.scrollViewContent,
         scrollViewContentStyle
       ]
     },
@@ -2909,10 +2903,10 @@ const ScrollableList = ({
       {
         key: item.value,
         style: [
-          styles$a.item,
+          styles$c.item,
           itemStyle,
           (activeTab ?? selectedItem) === item.name && [
-            styles$a.selectedItem,
+            styles$c.selectedItem,
             selectedItemStyle
           ]
         ],
@@ -2933,7 +2927,7 @@ const ScrollableList = ({
         reactNative.View,
         {
           style: [
-            styles$a.errorViewStyle,
+            styles$c.errorViewStyle,
             {
               backgroundColor: theme.SURFACE_BRAND_STATIC
             }
@@ -2943,7 +2937,7 @@ const ScrollableList = ({
     ))
   ));
 };
-const styles$a = reactNative.StyleSheet.create({
+const styles$c = reactNative.StyleSheet.create({
   container: {
     paddingVertical: 10
   },
@@ -2970,7 +2964,7 @@ const styles$a = reactNative.StyleSheet.create({
 });
 var category = withThemeProvider(ScrollableList);
 
-const styles$9 = reactNative.StyleSheet.create({
+const styles$b = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "black",
@@ -3023,10 +3017,10 @@ const FeedbackForm = ({
   setFeedback
 }) => {
   const maxChars = 200;
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$9.container }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: styles$9.headerText }, title), /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.container }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: styles$b.headerText }, title), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.TextInput,
     {
-      style: [styles$9.textInput, { height: Math.max(100) }],
+      style: [styles$b.textInput, { height: Math.max(100) }],
       placeholder: "Would you like to tell us more...",
       placeholderTextColor: "gray",
       multiline: true,
@@ -3040,16 +3034,16 @@ const FeedbackForm = ({
       text: `${feedback.length}/${maxChars} characters`,
       variant: "L2_REGULAR",
       textColor: "CONTENT_SECONDRY",
-      style: styles$9.charCounter
+      style: styles$b.charCounter
     }
-  ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$9.buttonContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$9.feedbackButton, onPress: handleSendFeedback }, /* @__PURE__ */ React__default["default"].createElement(
+  ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.buttonContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$b.feedbackButton, onPress: handleSendFeedback }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
       text: "Send feedback",
       variant: "L1_REGULAR",
       textColor: "CONTENT_PRIMARY"
     }
-  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$9.cancelButton, onPress: clearAllData }, /* @__PURE__ */ React__default["default"].createElement(
+  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$b.cancelButton, onPress: clearAllData }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
       text: "Cancel",
@@ -3086,7 +3080,7 @@ const CountryDropDown = ({
     setCallingCode(`+${country.callingCode[0]}`);
     getCountryCode(`+${country.callingCode[0]}`);
   };
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$8.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$8.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$a.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$a.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
     CountryPicker__default["default"],
     {
       withFilter: true,
@@ -3100,20 +3094,20 @@ const CountryDropDown = ({
     reactNative.Text,
     {
       onPress: () => setPickerVisible(true),
-      style: [styles$8.callingCode, callingCodeStyle]
+      style: [styles$a.callingCode, callingCodeStyle]
     },
     callingCode
-  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$8.flex }, (isFocused || value) && /* @__PURE__ */ React__default["default"].createElement(
+  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.flex }, (isFocused || value) && /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
       text: label ?? "",
-      style: styles$8.floatingLabel
+      style: styles$a.floatingLabel
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.TextInput,
     {
-      style: [styles$8.input, inputStyle],
+      style: [styles$a.input, inputStyle],
       placeholder: !isFocused ? placeholder : "",
       keyboardType: "phone-pad",
       value,
@@ -3129,13 +3123,13 @@ const CountryDropDown = ({
       variant: "L2_REGULAR",
       text: errorMessage ?? "",
       style: {
-        ...styles$8.errorStyle,
+        ...styles$a.errorStyle,
         color: DHRE_DEFAULT.DH_SEMENTIC_ERROR
       }
     }
   ) : null);
 };
-const styles$8 = reactNative.StyleSheet.create({
+const styles$a = reactNative.StyleSheet.create({
   flex: {
     flex: 1
   },
@@ -3199,12 +3193,12 @@ const CommonTextInput = ({
   handlePress,
   pointerEvents
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handlePress, style: styles$7.container }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handlePress, style: styles$9.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNativePaper.TextInput,
     {
       mode: "outlined",
       outlineStyle: {
-        ...styles$7.outlineStyle,
+        ...styles$9.outlineStyle,
         borderColor: value?.length ? activeBorderColor : inactiveBorderColor
       },
       label,
@@ -3217,7 +3211,7 @@ const CommonTextInput = ({
           primary: labelColor ? labelColor : DHRE_COLORS_TEXT.DH_BLACK
         }
       },
-      style: [errorMessage ? styles$7.errorInput : styles$7.input, inputStyle],
+      style: [errorMessage ? styles$9.errorInput : styles$9.input, inputStyle],
       maxLength,
       textColor,
       placeholder: placeholderText,
@@ -3230,13 +3224,13 @@ const CommonTextInput = ({
       variant: "L2_REGULAR",
       text: errorMessage ?? "",
       style: {
-        ...styles$7.errorStyle,
+        ...styles$9.errorStyle,
         color: DHRE_DEFAULT.DH_SEMENTIC_ERROR
       }
     }
   ) : null);
 };
-const styles$7 = reactNative.StyleSheet.create({
+const styles$9 = reactNative.StyleSheet.create({
   container: {
     justifyContent: "center"
   },
@@ -3275,15 +3269,19 @@ const CustomDropdown = ({
   placeholder,
   containerStyle,
   dropdownStyle,
+  dropdownFocusStyle,
   placeholderStyle,
   selectedTextStyle,
   iconStyle,
   labelStyle,
+  labelFocusStyle,
   defaultValue,
   iconColor,
   itemTextStyle,
   onValueChange,
-  itemContainerStyle
+  itemContainerStyle,
+  menuContainerStyle,
+  activeColor
 }) => {
   const [value, setValue] = React.useState(defaultValue);
   const [isFocus, setIsFocus] = React.useState(false);
@@ -3293,9 +3291,9 @@ const CustomDropdown = ({
         reactNative.Text,
         {
           style: [
-            styles$6.label,
+            styles$8.label,
             labelStyle,
-            isFocus && { color: theme.BORDER_INVERTED["light"] }
+            isFocus && (labelFocusStyle ?? { color: theme.BORDER_INVERTED["light"] })
           ]
         },
         label
@@ -3311,17 +3309,17 @@ const CustomDropdown = ({
       onValueChange(newValue);
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$8.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default["default"].createElement(
     reactNativeElementDropdown.Dropdown,
     {
       style: [
-        styles$6.dropdown,
+        styles$8.dropdown,
         dropdownStyle,
-        isFocus && { borderColor: theme.BORDER_INVERTED["light"] }
+        isFocus && (dropdownFocusStyle ?? { borderColor: theme.BORDER_INVERTED["light"] })
       ],
-      placeholderStyle: [styles$6.placeholderStyle, placeholderStyle],
-      selectedTextStyle: [styles$6.selectedTextStyle, selectedTextStyle],
-      iconStyle: [styles$6.iconStyle, iconStyle],
+      placeholderStyle: [styles$8.placeholderStyle, placeholderStyle],
+      selectedTextStyle: [styles$8.selectedTextStyle, selectedTextStyle],
+      iconStyle: [styles$8.iconStyle, iconStyle],
       data: data ?? [],
       labelField,
       valueField,
@@ -3333,11 +3331,13 @@ const CustomDropdown = ({
       iconColor,
       dropdownPosition: "bottom",
       itemTextStyle,
-      itemContainerStyle: [styles$6.itemListStyle, itemContainerStyle]
+      containerStyle: menuContainerStyle,
+      activeColor,
+      itemContainerStyle: [styles$8.itemListStyle, itemContainerStyle]
     }
   ));
 };
-const styles$6 = reactNative.StyleSheet.create({
+const styles$8 = reactNative.StyleSheet.create({
   container: {
     backgroundColor: theme.SURFACE_STATIC["light"],
     marginVertical: verticalScale(4)
@@ -3375,7 +3375,7 @@ const styles$6 = reactNative.StyleSheet.create({
   }
 });
 
-const styles$5 = reactNative.StyleSheet.create({
+const styles$7 = reactNative.StyleSheet.create({
   mainContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -3434,18 +3434,18 @@ const CustomSwitchBtn = ({
     {
       disabled,
       onPress: toggleSwitch,
-      style: { ...styles$5.mainContainer, ...containerStyle }
+      style: { ...styles$7.mainContainer, ...containerStyle }
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Animated.View,
       {
-        style: [styles$5.circle, { transform: [{ translateX }], ...circleStyle }]
+        style: [styles$7.circle, { transform: [{ translateX }], ...circleStyle }]
       }
     ),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        style: [styles$5.activeText, value ? inActiveTextStyle : activeTextStyle],
+        style: [styles$7.activeText, value ? inActiveTextStyle : activeTextStyle],
         text: activeText,
         variant: activeTextVariant
       }
@@ -3454,7 +3454,7 @@ const CustomSwitchBtn = ({
       CustomTypography,
       {
         style: [
-          styles$5.inActiveText,
+          styles$7.inActiveText,
           value ? activeTextStyle : inActiveTextStyle
         ],
         text: inActiveText,
@@ -3507,21 +3507,21 @@ const TagsComponent = ({
     {
       onPress: () => handleTagPress?.(item.name),
       style: [
-        styles$4.tagButton,
-        selectedTag === item?.name ? styles$4.selectedTagButton : styles$4.unselectedTagButton
+        styles$6.tagButton,
+        selectedTag === item?.name ? styles$6.selectedTagButton : styles$6.unselectedTagButton
       ]
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Text,
       {
         style: [
-          styles$4.tagText,
-          selectedTag === item?.name ? styles$4.selectedTagText : styles$4.unselectedTagText
+          styles$6.tagText,
+          selectedTag === item?.name ? styles$6.selectedTagText : styles$6.unselectedTagText
         ]
       },
       item?.name
     ),
-    selectedTag === item?.name && /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: styles$4.closeButton }, "\u2715")
+    selectedTag === item?.name && /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: styles$6.closeButton }, "\u2715")
   );
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.FlatList,
@@ -3531,11 +3531,11 @@ const TagsComponent = ({
       keyExtractor: (item) => item?.name,
       horizontal: true,
       showsHorizontalScrollIndicator: false,
-      contentContainerStyle: styles$4.listContainer
+      contentContainerStyle: styles$6.listContainer
     }
   ));
 };
-const styles$4 = reactNative.StyleSheet.create({
+const styles$6 = reactNative.StyleSheet.create({
   listContainer: {
     paddingHorizontal: 10,
     alignItems: "center"
@@ -3573,7 +3573,7 @@ const styles$4 = reactNative.StyleSheet.create({
   }
 });
 
-const styles$3 = reactNative.StyleSheet.create({
+const styles$5 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -3646,13 +3646,13 @@ const CustomDocumentPicker = ({
     reactNative.View,
     {
       style: [
-        docDetails ? styles$3.fileUploadContainerStyle : styles$3.container,
+        docDetails ? styles$5.fileUploadContainerStyle : styles$5.container,
         { borderColor: error ? theme.ERROR : theme.BORDER_SECONDRY },
         docDetails ? { backgroundColor: theme.SURFACE_SECONDARY } : {},
         containerStyle
       ]
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$3.innerContainer, onPress: pickDocument }, docDetails ? fileIcon : uploadIcon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.titleContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$5.innerContainer, onPress: pickDocument }, docDetails ? fileIcon : uploadIcon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.titleContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: FontStyle.L2_REGULAR,
@@ -3681,7 +3681,7 @@ const CustomDocumentPicker = ({
 };
 var CustomDocumentPicker$1 = withThemeProvider(React.memo(CustomDocumentPicker));
 
-const styles$2 = reactNative.StyleSheet.create({
+const styles$4 = reactNative.StyleSheet.create({
   textInputContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -3781,12 +3781,12 @@ const OTPInput = React__default["default"].forwardRef(
           ...otpHeaderTextStyle
         }
       }
-    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$2.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
+    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$4.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TextInput,
       {
         key: index?.toString(),
         style: {
-          ...styles$2.textInputStyle,
+          ...styles$4.textInputStyle,
           color: theme.CONTENT_PRIMARY,
           borderColor: errorMessage ? theme.ERROR : otp.length === length ? theme.SUCCESS : activeInput === index ? theme.BORDER_INVERTED : theme.BORDER_PRIMARY,
           ...textInputStyle
@@ -3802,7 +3802,7 @@ const OTPInput = React__default["default"].forwardRef(
         returnKeyType: otp.length === length ? "done" : "next",
         selectionColor: theme.CONTENT_PRIMARY
       }
-    ))), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.resendOtpContainer }, errorMessage ? /* @__PURE__ */ React__default["default"].createElement(
+    ))), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.resendOtpContainer }, errorMessage ? /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         text: errorMessage,
@@ -3825,10 +3825,10 @@ const OTPInput = React__default["default"].forwardRef(
     ))));
   }
 );
-var index$2 = withThemeProvider(OTPInput);
+var index$4 = withThemeProvider(OTPInput);
 OTPInput.displayName = "OTPInput";
 
-const styles$1 = reactNative.StyleSheet.create({
+const styles$3 = reactNative.StyleSheet.create({
   stepperContainer: {
     flexDirection: "row",
     marginBottom: 24,
@@ -3918,27 +3918,27 @@ const Stepper = ({
   const { theme } = useTheme();
   const renderCircleStyle = (status) => {
     if (status === Status.Active) {
-      return { ...styles$1.activeStepCircle, borderColor: theme.CONTENT_PRIMARY };
+      return { ...styles$3.activeStepCircle, borderColor: theme.CONTENT_PRIMARY };
     } else if (status === Status.Inactive) {
       return {
-        ...styles$1.inactiveStepCircle,
+        ...styles$3.inactiveStepCircle,
         borderColor: theme.CONTENT_SECONDRY
       };
     } else if (status === Status.Completed) {
-      return { ...styles$1.completeStepCircle, backgroundColor: theme.SUCCESS };
+      return { ...styles$3.completeStepCircle, backgroundColor: theme.SUCCESS };
     } else {
-      return { ...styles$1.stepCountCircle, borderColor: theme.BORDER_PRIMARY };
+      return { ...styles$3.stepCountCircle, borderColor: theme.BORDER_PRIMARY };
     }
   };
   const renderLableStyle = (status) => {
     if (status === Status.Active) {
-      return { ...styles$1.activeStepLabel, color: theme.CONTENT_PRIMARY };
+      return { ...styles$3.activeStepLabel, color: theme.CONTENT_PRIMARY };
     } else if (status === Status.Inactive) {
-      return { ...styles$1.inactiveStepLabel, color: theme.CONTENT_SECONDRY };
+      return { ...styles$3.inactiveStepLabel, color: theme.CONTENT_SECONDRY };
     } else if (status === Status.Completed) {
-      return { ...styles$1.completeStepLabel, color: theme.CONTENT_PRIMARY };
+      return { ...styles$3.completeStepLabel, color: theme.CONTENT_PRIMARY };
     } else {
-      return { ...styles$1.countStepLabel, color: theme.CONTENT_PRIMARY };
+      return { ...styles$3.countStepLabel, color: theme.CONTENT_PRIMARY };
     }
   };
   const renderDividerStyle = (status) => {
@@ -3948,25 +3948,25 @@ const Stepper = ({
       return { borderColor: theme.BORDER_PRIMARY };
     } else if (status === Status.Completed) {
       return {
-        ...styles$1.completeStepDivider,
+        ...styles$3.completeStepDivider,
         borderColor: theme.CONTENT_PRIMARY
       };
     } else {
       return { borderColor: theme.CONTENT_SECONDRY };
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$1.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.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$1.lastStepWrapper : null;
+    const lastViewStyle = index === data?.length - 1 ? styles$3.lastStepWrapper : null;
     return /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
       {
         key: index?.toString(),
-        style: { ...styles$1.stepperWrapper, ...lastViewStyle }
+        style: { ...styles$3.stepperWrapper, ...lastViewStyle }
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.stepperSeparatorContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.stepperSeparatorContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: item?.step,
@@ -3975,8 +3975,8 @@ const Stepper = ({
             color: theme.CONTENT_PRIMARY
           }
         }
-      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$1.separator, ...dividerStyle } })),
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.lableContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$3.separator, ...dividerStyle } })),
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.lableContainer }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: item?.label,
@@ -3987,9 +3987,9 @@ const Stepper = ({
     );
   }));
 };
-var index$1 = withThemeProvider(Stepper);
+var index$3 = withThemeProvider(Stepper);
 
-const styles = reactNative.StyleSheet.create({
+const styles$2 = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
@@ -4004,7 +4004,8 @@ const styles = reactNative.StyleSheet.create({
   slider: {
     height: "100%",
     width: "100%",
-    position: "absolute"
+    position: "absolute",
+    justifyContent: "center"
   },
   button: {
     height: verticalScale(40),
@@ -4028,7 +4029,8 @@ const BUTTON_WIDTH = 40;
 const CustomSlideButton = ({
   label,
   onComplete,
-  icon
+  icon,
+  size = BUTTON_WIDTH
 }) => {
   const value = React.useRef(0);
   const cardRef = React.useRef(null);
@@ -4073,9 +4075,9 @@ const CustomSlideButton = ({
   ).current;
   const { theme } = useTheme();
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: {
-    ...styles.sliderContainer,
+    ...styles$2.sliderContainer,
     backgroundColor: theme.SURFACE_INVERTED
-  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.buttonTextCOntainer }, /* @__PURE__ */ React__default["default"].createElement(
+  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.buttonTextCOntainer }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       text: label,
@@ -4087,29 +4089,276 @@ const CustomSlideButton = ({
   )), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Animated.View,
     {
-      style: [styles.slider, { transform: [{ translateX: pan }] }],
+      style: [styles$2.slider, { transform: [{ translateX: pan }] }],
       ...panResponder.panHandlers
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
       {
         style: {
-          ...styles.button,
+          ...styles$2.button,
           backgroundColor: theme.SURFACE_PRIMARY,
-          width: BUTTON_WIDTH
+          width: stylehelper.verticalScale(size),
+          height: stylehelper.verticalScale(size),
+          borderRadius: stylehelper.verticalScale(size / 2)
         }
       },
       icon
     )
   ));
 };
-var index = withThemeProvider(CustomSlideButton);
+var index$2 = withThemeProvider(CustomSlideButton);
 
 const copyToClipboard = (textToCopy) => {
   Clipboard__default["default"].setString(textToCopy);
 };
 
+const styles$1 = reactNative.StyleSheet.create({
+  accordionContainer: {
+    gap: verticalScale(8),
+    marginHorizontal: horizontalScale(24),
+    marginVertical: verticalScale(16)
+  },
+  accordionStyle: {
+    paddingHorizontal: moderateScale(16),
+    borderWidth: 1,
+    borderRadius: moderateScale(8)
+  },
+  accordionHeader: {
+    paddingHorizontal: 0
+  },
+  accordionHeaderContent: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: horizontalScale(16)
+  },
+  accordionText: {
+    rowGap: verticalScale(4)
+  },
+  accordionDetails: {
+    paddingTop: verticalScale(16),
+    borderTopWidth: 1,
+    rowGap: verticalScale(16)
+  },
+  appointmentInfo: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  infoColumn: {
+    flex: 1,
+    rowGap: verticalScale(4)
+  },
+  locationInfo: {
+    rowGap: verticalScale(4)
+  },
+  getDirectionsText: {
+    textDecorationLine: "underline"
+  }
+});
+
+const AppointmentCard = ({
+  isOpen,
+  onToggle,
+  icon,
+  headerIcon,
+  title,
+  headerTitle,
+  headerSubtitle,
+  appointmentId,
+  requestId,
+  location,
+  onPress
+}) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React__default["default"].createElement(
+    Accordion,
+    {
+      title,
+      isOpen,
+      onToggle,
+      containerStyle: {
+        ...styles$1.accordionStyle,
+        backgroundColor: theme.SURFACE_SECONDARY,
+        borderColor: theme.BORDER_SEPERATOR_HEADER,
+        borderBottomColor: theme.BORDER_SEPERATOR_HEADER
+      },
+      headerStyle: styles$1.accordionHeader,
+      headerComponent: () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.accordionText }, /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          text: headerTitle,
+          variant: FontStyle.L2_REGULAR,
+          style: { color: theme.CONTENT_SECONDRY }
+        }
+      ), /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          text: headerSubtitle,
+          variant: FontStyle.B3_REGULAR,
+          style: { color: theme.CONTENT_PRIMARY }
+        }
+      ))),
+      icon
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.View,
+      {
+        style: {
+          ...styles$1.accordionDetails,
+          borderTopColor: theme.BORDER_SEPERATOR_HEADER
+        }
+      },
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.appointmentInfo }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.infoColumn }, /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          text: "APPOINTMENT ID",
+          variant: FontStyle.L3_REGULAR,
+          style: { color: theme.CONTENT_SECONDRY }
+        }
+      ), /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          text: appointmentId,
+          variant: FontStyle.L1_REGULAR,
+          style: { color: theme.CONTENT_PRIMARY }
+        }
+      )), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.infoColumn }, /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          text: "REQUEST ID",
+          variant: FontStyle.L3_REGULAR,
+          style: { color: theme.CONTENT_SECONDRY }
+        }
+      ), /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          text: requestId,
+          variant: FontStyle.L1_REGULAR,
+          style: { color: theme.CONTENT_PRIMARY }
+        }
+      ))),
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.locationInfo }, /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          text: "LOCATION",
+          variant: FontStyle.L3_REGULAR,
+          style: { color: theme.CONTENT_SECONDRY }
+        }
+      ), /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          text: location,
+          variant: FontStyle.L1_REGULAR,
+          style: { color: theme.CONTENT_PRIMARY }
+        }
+      ), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress }, /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          text: "Get directions",
+          variant: FontStyle.L2_REGULAR,
+          style: {
+            ...styles$1.getDirectionsText,
+            color: theme.CONTENT_PRIMARY
+          }
+        }
+      )))
+    )
+  );
+};
+var index$1 = withThemeProvider(AppointmentCard);
+
+const styles = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: horizontalScale(24),
+    paddingVertical: verticalScale(16),
+    borderTopWidth: 1,
+    borderBottomWidth: 1
+  },
+  propertyInfo: {
+    rowGap: verticalScale(4)
+  },
+  arrowIconContainer: {
+    width: moderateScale(32),
+    height: moderateScale(32),
+    borderRadius: moderateScale(25)
+  },
+  propertyNumber: {
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: horizontalScale(4)
+  }
+});
+
+const PropertyDetails = ({
+  icon,
+  brandIcon,
+  title,
+  subTitle,
+  propertyNumber,
+  hintIcon,
+  btnIcon,
+  onRightIconPress
+}) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React__default["default"].createElement(
+    reactNative.View,
+    {
+      style: {
+        ...styles.container,
+        backgroundColor: theme.SURFACE_SECONDARY,
+        borderColor: theme.BORDER_SEPERATOR_HEADER
+      }
+    },
+    React__default["default"].cloneElement(icon, {
+      width: moderateScale(87),
+      height: moderateScale(87)
+    }),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.propertyInfo }, brandIcon, /* @__PURE__ */ React__default["default"].createElement(
+      CustomTypography,
+      {
+        text: title,
+        variant: FontStyle.L2_REGULAR,
+        style: { color: theme.CONTENT_PRIMARY }
+      }
+    ), /* @__PURE__ */ React__default["default"].createElement(
+      CustomTypography,
+      {
+        text: subTitle,
+        variant: FontStyle.L1_REGULAR,
+        style: { color: theme.CONTENT_PRIMARY }
+      }
+    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.propertyNumber }, /* @__PURE__ */ React__default["default"].createElement(
+      CustomTypography,
+      {
+        text: propertyNumber,
+        variant: FontStyle.L2_REGULAR,
+        style: {
+          color: theme.CONTENT_SECONDRY
+        }
+      }
+    ), hintIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(
+      CustomIcon,
+      {
+        icon: btnIcon,
+        containerStyle: {
+          ...styles.arrowIconContainer,
+          backgroundColor: theme.SURFACE_INVERTED
+        },
+        onPress: onRightIconPress
+      }
+    )
+  );
+};
+var index = withThemeProvider(PropertyDetails);
+
 exports.Accordion = Accordion;
+exports.AppointmentCard = index$1;
 exports.Badge = Badge$1;
 exports.BottomDrawer = BottomDrawer;
 exports.Button = CustomButton$1;
@@ -4125,7 +4374,7 @@ exports.CustomIcon = CustomIcon;
 exports.CustomLoader = CustomLoader;
 exports.CustomProgressBar = CustomProgressBar;
 exports.CustomSearchBar = CustomSearchBar;
-exports.CustomSlideButton = index;
+exports.CustomSlideButton = index$2;
 exports.CustomSwitchBtn = CustomSwitchBtn;
 exports.CustomText = CustomText$1;
 exports.CustomTextInput = CustomTextInput;
@@ -4145,14 +4394,15 @@ exports.FileUpload = FileUpload;
 exports.FontStyle = FontStyle;
 exports.Line = Line;
 exports.NotificationBandge = NotificationBandge;
-exports.OTPInput = index$2;
+exports.OTPInput = index$4;
 exports.OurOfficesButton = OurOffices;
 exports.PdfView = PdfView;
 exports.PopUp = PopUp;
+exports.PropertyDetails = index;
 exports.ShapeType = ShapeType;
 exports.SingleSelectionTags = TagsComponent;
 exports.StarRating = Star;
-exports.Stepper = index$1;
+exports.Stepper = index$3;
 exports.SwipableList = SwipableList;
 exports.Tabs = Tabs$1;
 exports.Tags = Tags;