dhre-ui-kit 0.0.137 → 0.0.139

package/lib/index.js

@@ -361,13 +361,13 @@ const CustomTypography = ({
     reactNative.Text,
     {
       testID,
-      style: [textStyle, styles$F.container, style],
+      style: [textStyle, styles$E.container, style],
       ...props
     },
     text
   );
 };
-const styles$F = reactNative.StyleSheet.create({
+const styles$E = reactNative.StyleSheet.create({
   container: { writingDirection: "auto", alignSelf: "flex-start" }
 });
 
@@ -578,7 +578,7 @@ const DHRE_COLORS_TEXT = {
   DH_LIGHTGREEN: "#00B578"
 };
 
-const styles$E = reactNative.StyleSheet.create({
+const styles$D = reactNative.StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -605,16 +605,16 @@ const Badge = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
-      style: [styles$E.badge, commonStyles.centerRow, style],
+      style: [styles$D.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$E.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$D.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
     text && /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$E.text, textStyle],
+        style: [styles$D.text, textStyle],
         text
       }
     )
@@ -622,7 +622,7 @@ const Badge = ({
 };
 var Badge$1 = withThemeProvider(Badge);
 
-const styles$D = reactNative.StyleSheet.create({
+const styles$C = reactNative.StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -702,29 +702,29 @@ const BottomDrawer = ({
         behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$D.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$C.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
         blur.BlurView,
         {
-          style: [styles$D.blurView, blurViewStyle],
+          style: [styles$C.blurView, blurViewStyle],
           blurType,
           blurAmount
         }
-      ) : 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, {
+      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$C.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$C.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$C.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$D.leftIconStyle,
+        style: styles$C.leftIconStyle,
         onPress: onLeftIconPress
       }) : null, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: titleVariant,
           text: title,
-          style: { ...styles$D.title, ...titleStyle }
+          style: { ...styles$C.title, ...titleStyle }
         }
       ), showRightIcon && rightIcon ? React__default["default"].cloneElement(rightIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$D.rightIconStyle,
+        style: styles$C.rightIconStyle,
         onPress: toggleModal
       }) : null)), children))
     ))
@@ -753,7 +753,7 @@ const CustomButton = ({
     {
       testID,
       style: [
-        styles$C.buttonContainer,
+        styles$B.buttonContainer,
         containerStyle,
         disabled ? {
           backgroundColor: disabledColor ? disabledColor : theme.SURFACE_DISABLE
@@ -780,7 +780,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$C = reactNative.StyleSheet.create({
+const styles$B = reactNative.StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -792,7 +792,7 @@ const styles$C = reactNative.StyleSheet.create({
 });
 var CustomButton$1 = withThemeProvider(CustomButton);
 
-const styles$B = reactNative.StyleSheet.create({
+const styles$A = reactNative.StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -857,53 +857,53 @@ const Cards = ({
   testID,
   onButtonPress
 }) => {
-  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(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$A.container }, topLeftTitle ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$A.topLeft }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P2regular",
-      style: styles$B.title,
+      style: styles$A.title,
       text: topLeftTitle
     }
   )) : null, title ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "H6bold",
-      style: styles$B.subTitleBelow,
+      style: styles$A.subTitleBelow,
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$B.subtitle,
+      style: styles$A.subtitle,
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$B.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$A.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$B.subTitleLeftBelow,
+      style: styles$A.subTitleLeftBelow,
       text: iconTitle
     }
   ) : null), buttonShown ? /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Button-Press",
-      style: styles$B.button,
+      style: styles$A.button,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B2semiBold",
-        style: styles$B.buttonText,
+        style: styles$A.buttonText,
         text: buttonText
       }
     )
   ) : null);
 };
 
-const styles$A = reactNative.StyleSheet.create({
+const styles$z = reactNative.StyleSheet.create({
   checkboxContainer: {
     alignItems: "center",
     justifyContent: "center"
@@ -959,9 +959,9 @@ const Checkbox = ({
       testID: "Checkbox-Press",
       onPress: handlePress,
       disabled: disable,
-      style: styles$A.directionStyle
+      style: styles$z.directionStyle
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$A.checkboxContainer }, React__default["default"].cloneElement(checked ? checkedIcon : uncheckedIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.checkboxContainer }, React__default["default"].cloneElement(checked ? checkedIcon : uncheckedIcon)),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
@@ -973,7 +973,7 @@ const Checkbox = ({
   ));
 };
 
-const styles$z = reactNative.StyleSheet.create({
+const styles$y = reactNative.StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
   },
@@ -1027,26 +1027,26 @@ const CustomDropdown$1 = ({
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$z.labelStyle,
+      style: styles$y.labelStyle,
       text: label
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: `${testId}-BTN`,
-      style: styles$z.dropDownStyle,
+      style: styles$y.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$z.iconStyle
+      style: styles$y.iconStyle
     })),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P3regular",
-        style: styles$z.selectedValueStyle,
+        style: styles$y.selectedValueStyle,
         text: selectedValue ? selectedValue.label : placeholder
       }
     ),
@@ -1057,7 +1057,7 @@ const CustomDropdown$1 = ({
       width: moderateScale(24),
       height: moderateScale(24)
     }))
-  ), showOptions && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default["default"].createElement(
+  ), showOptions && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$y.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       key: id,
@@ -1067,7 +1067,7 @@ const CustomDropdown$1 = ({
         oneSelect({ id, value, label: label2 });
       },
       style: [
-        styles$z.item,
+        styles$y.item,
         {
           backgroundColor: id === selectedValue?.id ? DHRE_COLORS_BG.DH_GREY1 : DHRE_COLORS_TEXT.DH_WHITE
         }
@@ -1076,7 +1076,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$z.iconStyle
+      style: styles$y.iconStyle
     })),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
@@ -1091,7 +1091,7 @@ const CustomDropdown$1 = ({
   ))));
 };
 
-const styles$y = reactNative.StyleSheet.create({
+const styles$x = reactNative.StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTDARK
   },
@@ -1173,18 +1173,18 @@ const CustomTextInput = ({
     CustomTypography,
     {
       variant: "P3medium",
-      style: [styles$y.labelStyle, disabled && styles$y.disableTextStyle],
+      style: [styles$x.labelStyle, disabled && styles$x.disableTextStyle],
       text: label
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
       style: [
-        styles$y.inputContainer,
-        isFocused && styles$y.inputFocused,
-        error && styles$y.inputError,
-        disabled && styles$y.disableInputStyle,
-        successMessage ? styles$y.inputSucess : {},
+        styles$x.inputContainer,
+        isFocused && styles$x.inputFocused,
+        error && styles$x.inputError,
+        disabled && styles$x.disableInputStyle,
+        successMessage ? styles$x.inputSucess : {},
         {
           height: multiline ? 120 : 48,
           alignItems: multiline ? "flex-start" : "center"
@@ -1194,7 +1194,7 @@ const CustomTextInput = ({
     isSearchBar && searchIcon && React__default["default"].cloneElement(searchIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$y.searchIconStyle
+      style: styles$x.searchIconStyle
     }),
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TextInput,
@@ -1202,7 +1202,7 @@ const CustomTextInput = ({
         ...props,
         onFocus,
         onBlur,
-        style: styles$y.input,
+        style: styles$x.input,
         placeholderTextColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
         editable: !disabled,
         value,
@@ -1235,7 +1235,7 @@ const CustomTextInput = ({
   ));
 };
 
-const styles$x = reactNative.StyleSheet.create({
+const styles$w = reactNative.StyleSheet.create({
   tooltipContainerStyle: {
     flex: 1,
     borderRadius: moderateScale(16),
@@ -1264,18 +1264,18 @@ const CustomTooltip = ({
   iconStyle,
   iconColor = DHRE_COLORS_TEXT.DH_BLACK
 }) => {
-  const defaultPopoverContent = /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$x.mesageContainer, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(
+  const defaultPopoverContent = /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$w.mesageContainer, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P4regular",
-      style: styles$x.messageStyle,
+      style: styles$w.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$x.tooltipContainerStyle,
+      containerStyle: styles$w.tooltipContainerStyle,
       backgroundColor,
       popover: popoverContent || defaultPopoverContent,
       actionType
@@ -1284,7 +1284,7 @@ const CustomTooltip = ({
   );
 };
 
-const styles$w = reactNative.StyleSheet.create({
+const styles$v = reactNative.StyleSheet.create({
   container: {
     backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
     paddingHorizontal: horizontalScale(16),
@@ -1334,21 +1334,21 @@ const FileUpload = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
-      style: [styles$w.container, containerStyle],
+      style: [styles$v.container, containerStyle],
       testID: "file-upload-container"
     },
-    /* @__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(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.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$v.title, text: title }), /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$w.description,
+        style: styles$v.description,
         text: `Drop files directly here or `
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$w.browse,
+        style: styles$v.browse,
         text: btnText
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
@@ -1356,14 +1356,14 @@ const FileUpload = ({
       {
         testID: "file-upload-description",
         variant: "P4regular",
-        style: styles$w.description,
+        style: styles$v.description,
         text: ` from your device`
       }
     )),
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Pressable,
       {
-        style: styles$w.button,
+        style: styles$v.button,
         onPress: onUpload,
         testID: "file-upload-button"
       },
@@ -1371,7 +1371,7 @@ const FileUpload = ({
         CustomTypography,
         {
           variant: "B2semiBold",
-          style: styles$w.buttonText,
+          style: styles$v.buttonText,
           text: btnText
         }
       )
@@ -1383,7 +1383,7 @@ const PdfView = (props) => {
   return /* @__PURE__ */ React__default["default"].createElement(Pdf__default["default"], { ...props });
 };
 
-const styles$v = reactNative.StyleSheet.create({
+const styles$u = reactNative.StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -1439,39 +1439,39 @@ const PopUp = ({
   leftButtonShown = false,
   rightButtonShown = false
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$v.container }, title ? /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$u.container }, title ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$v.subTitleBelow,
+      style: styles$u.subTitleBelow,
       variant: "H6semiBold",
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$v.subtitle,
+      style: styles$u.subtitle,
       variant: "P3regular",
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$u.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Left-Button-Press",
-      style: styles$v.buttonLeft,
+      style: styles$u.buttonLeft,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        style: styles$v.buttonLeftText,
+        style: styles$u.buttonLeftText,
         variant: "B2semiBold",
         text: buttonText
       }
     )
-  ) : null, rightButtonShown ? /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$v.button, onPress: onButtonPress }, /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, rightButtonShown ? /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$u.button, onPress: onButtonPress }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$v.buttonText,
+      style: styles$u.buttonText,
       variant: "B2semiBold",
       text: buttonText
     }
@@ -1509,7 +1509,7 @@ const CustomProgressBar = ({
     return () => clearInterval(progressInterval);
   }, [progress, value, increment, interval]);
   const showPercentage = () => {
-    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$u.flexDirection }, /* @__PURE__ */ React__default["default"].createElement(
+    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$t.flexDirection }, /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
         text: `${value}%`,
@@ -1563,7 +1563,7 @@ const CustomProgressBar = ({
   };
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID: "custom-progress-bar" }, renderProgressBar());
 };
-const styles$u = reactNative.StyleSheet.create({
+const styles$t = reactNative.StyleSheet.create({
   flexDirection: {
     flexDirection: "column",
     justifyContent: "center",
@@ -1571,7 +1571,7 @@ const styles$u = reactNative.StyleSheet.create({
   }
 });
 
-const styles$t = reactNative.StyleSheet.create({
+const styles$s = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center"
@@ -1637,13 +1637,13 @@ const Star = ({
       emptyStarColor
     );
     stars.push(
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { key: i, style: [styles$t.star, starStyle] }, starType)
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { key: i, style: [styles$s.star, starStyle] }, starType)
     );
   }
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$t.container, testID: "star" }, stars);
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$s.container, testID: "star" }, stars);
 };
 
-var styles$s = reactNative.StyleSheet.create({
+var styles$r = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     gap: horizontalScale(5),
@@ -1685,12 +1685,12 @@ const Tabs = ({
       onSelectionChange(selectedTabs);
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$s.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$r.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       key: id,
       style: {
-        ...styles$s.button,
+        ...styles$r.button,
         backgroundColor: isSelected ? theme.CONTENT_PRIMARY : theme.CONTENT_INVERTED,
         borderColor: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_SECONDRY
       },
@@ -1710,7 +1710,7 @@ const Tabs = ({
 };
 var Tabs$1 = withThemeProvider(Tabs);
 
-const styles$r = reactNative.StyleSheet.create({
+const styles$q = reactNative.StyleSheet.create({
   container: {
     width: "100%"
   },
@@ -1769,8 +1769,8 @@ const Tags = ({
     reactNative.ScrollView,
     {
       testID,
-      style: styles$r.container,
-      contentContainerStyle: styles$r.contentContainer,
+      style: styles$q.container,
+      contentContainerStyle: styles$q.contentContainer,
       horizontal: false
     },
     tags?.map((tag) => /* @__PURE__ */ React__default["default"].createElement(
@@ -1780,16 +1780,16 @@ const Tags = ({
         key: tag,
         onPress: () => toggleTag(tag),
         style: [
-          styles$r.tag,
+          styles$q.tag,
           tagStyles,
-          selectedTags.includes(tag) ? styles$r.selectedTag : styles$r.tagUnSelected
+          selectedTags.includes(tag) ? styles$q.selectedTag : styles$q.tagUnSelected
         ]
       },
       /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: selectedTags.includes(tag) ? "H9semiBold" : "P4regular",
-          style: selectedTags.includes(tag) ? styles$r.tagText : styles$r.tagUnselectedText,
+          style: selectedTags.includes(tag) ? styles$q.tagText : styles$q.tagUnselectedText,
           text: tag
         }
       ),
@@ -1805,7 +1805,7 @@ const Tags = ({
   );
 };
 
-const styles$q = reactNative.StyleSheet.create({
+const styles$p = reactNative.StyleSheet.create({
   container: {
     width: horizontalScale(70),
     height: verticalScale(25),
@@ -1870,26 +1870,26 @@ const CustomSwitch = ({
     reactNative.Pressable,
     {
       onPress: toggleSwitch,
-      style: [styles$q.container, { width }],
+      style: [styles$p.container, { width }],
       testID: "custom-switch"
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
       {
         style: [
-          styles$q.track,
+          styles$p.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$q.thumb, animatedStyle] }),
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$p.thumb, animatedStyle] }),
       type !== ToggleButtonType.SMALL && /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: "B3semiBold",
           style: [
-            styles$q.text,
+            styles$p.text,
             { textAlign: isOn ? TextDirectType.left : TextDirectType.right }
           ],
           text: isOn ? ToggleTextType.ON : ToggleTextType.OFF
@@ -1899,7 +1899,7 @@ const CustomSwitch = ({
   );
 };
 
-const styles$p = reactNative.StyleSheet.create({
+const styles$o = reactNative.StyleSheet.create({
   container: {
     paddingVertical: verticalScale(24),
     borderBottomWidth: moderateScale(1)
@@ -1961,19 +1961,19 @@ const Accordion = ({
     reactNative.View,
     {
       style: {
-        ...styles$p.container,
+        ...styles$o.container,
         borderBottomColor: theme.BORDER_SEPRATOR,
         ...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(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$o.header, headerStyle, disabled && { opacity: 0.5 }] }, headerComponent ? headerComponent() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onHeaderPress }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: titleVariant,
         text: title,
         style: {
-          ...styles$p.title,
+          ...styles$o.title,
           color: theme.CONTENT_PRIMARY,
           ...titleStyle
         }
@@ -1981,10 +1981,10 @@ const Accordion = ({
     )), /* @__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
+      style: styles$o.iconStyle
     }))),
     optionalElement ? optionalElement() : null,
-    isOpen && /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$p.content, { height: cardHeight }] }, /* @__PURE__ */ React__default["default"].createElement(
+    isOpen && /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$o.content, { height: cardHeight }] }, /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
       {
         ref: contentRef,
@@ -1998,7 +1998,7 @@ const Accordion = ({
 };
 var Accordion$1 = withThemeProvider(Accordion);
 
-const styles$o = reactNative.StyleSheet.create({
+const styles$n = reactNative.StyleSheet.create({
   container: {
     position: "absolute",
     alignSelf: "center",
@@ -2080,23 +2080,23 @@ const Toast = React__default["default"].forwardRef(({ sucessIcon, errorIcon }, r
     reactNative.Animated.View,
     {
       style: [
-        styles$o.container,
+        styles$n.container,
         { bottom },
         { backgroundColor: isSuccess ? "#04743F" : "#DB3056" }
       ],
       testID: "TOAST"
     },
-    /* @__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(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$n.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$n.innerContainer }, isSuccess ? sucessIcon : errorIcon, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "L2_REGULAR",
         text: message,
-        style: styles$o.messageText
+        style: styles$n.messageText
       }
     ), btnText && /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Pressable,
       {
-        style: styles$o.button,
+        style: styles$n.button,
         onPress: onBtnPress || void 0,
         testID: "TOAST-BTN"
       },
@@ -2105,7 +2105,7 @@ const Toast = React__default["default"].forwardRef(({ sucessIcon, errorIcon }, r
         {
           variant: "L2_BOLD",
           text: btnText,
-          style: styles$o.buttonText
+          style: styles$n.buttonText
         }
       )
     ))),
@@ -2123,7 +2123,7 @@ const Toast = React__default["default"].forwardRef(({ sucessIcon, errorIcon }, r
 });
 Toast.displayName = "Toast";
 
-const styles$n = reactNative.StyleSheet.create({
+const styles$m = reactNative.StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     justifyContent: "center",
@@ -2160,20 +2160,23 @@ const CustomSearchBar = ({
   borderColor = "#FFFFFF",
   disablePlaceHolderStyle = "#686868",
   enablePlaceHolderStyle = "#A7A7A7",
+  handlePress,
+  pointerEvents,
   ...props
 }) => {
   return /* @__PURE__ */ React__default["default"].createElement(
-    reactNative.View,
+    reactNative.Pressable,
     {
       testID,
       style: [
-        styles$n.inputContainer,
+        styles$m.inputContainer,
         {
           height: verticalScale(height),
           borderColor: disabled ? disableBorderColor : value ? borderColor : "#A7A7A7"
         },
         inputContainerStyle
-      ]
+      ],
+      onPress: handlePress
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Pressable,
@@ -2187,7 +2190,7 @@ const CustomSearchBar = ({
       React__default["default"].cloneElement(searchIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: [styles$n.searchIconStyle, searchIconStyle]
+        style: [styles$m.searchIconStyle, searchIconStyle]
       })
     ),
     /* @__PURE__ */ React__default["default"].createElement(
@@ -2195,14 +2198,15 @@ const CustomSearchBar = ({
       {
         ...props,
         testID: `${testID}-INPUT`,
-        style: [styles$n.input, inputStyle],
+        style: [styles$m.input, inputStyle],
         editable: !disabled,
         value,
         placeholderTextColor: disabled ? disablePlaceHolderStyle : enablePlaceHolderStyle,
         onChangeText: (val) => {
           setValue(val);
           handleOnChangeText?.(val);
-        }
+        },
+        pointerEvents
       }
     ),
     value && /* @__PURE__ */ React__default["default"].createElement(
@@ -2217,13 +2221,13 @@ const CustomSearchBar = ({
       React__default["default"].cloneElement(rightIcon, {
         // width: moderateScale(24),
         // height: moderateScale(24),
-        style: [styles$n.crossIconStyle, crossIconStyle]
+        style: [styles$m.crossIconStyle, crossIconStyle]
       })
     )
   );
 };
 
-const styles$m = reactNative.StyleSheet.create({
+const styles$l = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -2255,17 +2259,17 @@ const CustomHeader = ({
     reactNative.View,
     {
       style: {
-        ...styles$m.container,
+        ...styles$l.container,
         backgroundColor: theme.SURFACE_SECONDARY,
         borderBottomColor: theme.BORDER_SEPERATOR_HEADER
       },
       testID: testId
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.headderContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$l.headderContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
       onPress: onLeftPress,
-      style: styles$m.leftIconStyle
+      style: styles$l.leftIconStyle
     }) : null, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
@@ -2278,13 +2282,13 @@ const CustomHeader = ({
       width: moderateScale(24),
       height: moderateScale(24),
       onPress: onRightPress,
-      style: styles$m.rightIconStyle
+      style: styles$l.rightIconStyle
     }) : null
   );
 };
 var CustomHeader$1 = withThemeProvider(CustomHeader);
 
-const styles$l = reactNative.StyleSheet.create({
+const styles$k = reactNative.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -2338,19 +2342,19 @@ const SwipableList = (props) => {
     {
       testID,
       onPress,
-      style: [styles$l.actionButton, style]
+      style: [styles$k.actionButton, style]
     },
     icon,
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "L1_REGULAR",
-        style: [styles$l.titleStyle, titleStyle],
+        style: [styles$k.titleStyle, titleStyle],
         text: title
       }
     )
   );
-  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$l.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
     ActionButton,
     {
       icon: leftPrimaryActionIcon,
@@ -2369,7 +2373,7 @@ const SwipableList = (props) => {
       testID: `${testId}-LEFT-SECONDARY-${item.id}`
     }
   ));
-  const rightActionHandle = (item) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$l.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
+  const rightActionHandle = (item) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$k.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
     ActionButton,
     {
       icon: rightPrimaryActionIcon,
@@ -2379,7 +2383,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$l.container }, /* @__PURE__ */ React__default["default"].createElement(
+  const renderItem = ({ item }) => /* @__PURE__ */ React__default["default"].createElement(reactNativeGestureHandler.GestureHandlerRootView, { testID: `${testId}-LIST`, style: styles$k.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNativeGestureHandler.Swipeable,
     {
       renderLeftActions: () => leftActionHandle(
@@ -2390,7 +2394,7 @@ const SwipableList = (props) => {
         item.isRead ? leftSecondaryActionInActiveTitle : leftSecondaryActionActiveTitle
       ),
       renderRightActions: () => rightActionHandle(item),
-      containerStyle: styles$l.swippableContainer
+      containerStyle: styles$k.swippableContainer
     },
     props?.renderItem(item)
   ));
@@ -2400,12 +2404,12 @@ const SwipableList = (props) => {
       data,
       renderItem,
       keyExtractor: (item) => item.id,
-      ItemSeparatorComponent: () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$l.seprator })
+      ItemSeparatorComponent: () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.seprator })
     }
   ));
 };
 
-const styles$k = reactNative.StyleSheet.create({
+const styles$j = reactNative.StyleSheet.create({
   container: {
     justifyContent: "center",
     alignItems: "center"
@@ -2427,7 +2431,7 @@ const CustomIcon = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
-      style: [styles$k.container, containerStyle],
+      style: [styles$j.container, containerStyle],
       onPress,
       testID: testId
     },
@@ -2437,13 +2441,13 @@ const CustomIcon = ({
       {
         variant: titleVariant,
         text: title,
-        style: [styles$k.title, titleStyle]
+        style: [styles$j.title, titleStyle]
       }
     )
   );
 };
 
-const styles$j = reactNative.StyleSheet.create({
+const styles$i = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
@@ -2458,23 +2462,23 @@ const styles$j = reactNative.StyleSheet.create({
 
 const CustomLoader = ({ loading }) => {
   if (!loading) return null;
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.container }, /* @__PURE__ */ React__default["default"].createElement(reactNative.ActivityIndicator, { size: "large", color: "#686868" }));
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$i.container }, /* @__PURE__ */ React__default["default"].createElement(reactNative.ActivityIndicator, { size: "large", color: "#686868" }));
 };
 
-const HorizontalLine = ({ style }) => {
+const HorizontalLine = ({ backgroundColor = "SURFACE_SECONDARY", style }) => {
   const { theme } = useTheme();
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
       style: [
-        styles$i.line,
-        { backgroundColor: theme["SURFACE_SECONDARY"] },
+        styles$h.line,
+        { backgroundColor: theme[backgroundColor] },
         style
       ]
     }
   );
 };
-const styles$i = reactNative.StyleSheet.create({
+const styles$h = reactNative.StyleSheet.create({
   line: {
     height: 1,
     width: "100%"
@@ -2497,18 +2501,18 @@ const Topic = ({
     reactNative.TouchableOpacity,
     {
       style: [
-        styles$h.button,
+        styles$g.button,
         { backgroundColor: theme[Theme.SURFACE_SECONDARY] },
         containterStyle
       ],
       onPress
     },
-    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.timeContainer }, time && /* @__PURE__ */ React__default["default"].createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.textContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.paymentView }, statusImage && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null, React__default["default"].cloneElement(statusImage)), subTitle && /* @__PURE__ */ React__default["default"].createElement(
+    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.rightIconContainer }, React__default["default"].cloneElement(rightIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.timeContainer }, time && /* @__PURE__ */ React__default["default"].createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.textContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.paymentView }, statusImage && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null, React__default["default"].cloneElement(statusImage)), subTitle && /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
-        style: [styles$h.subTitle, subTitleStyle],
+        style: [styles$g.subTitle, subTitleStyle],
         text: subTitle,
         variant: FontStyle.L2_REGULAR,
         textColor: Theme.CONTENT_PRIMARY
@@ -2523,7 +2527,7 @@ const Topic = ({
     ))
   );
 };
-const styles$h = reactNative.StyleSheet.create({
+const styles$g = reactNative.StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -2617,14 +2621,14 @@ const ContactModal = ({
   const renderEmailOptions = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$g.title,
+      style: styles$f.title,
       text: "Open email app",
       variant: "L2_REGULAR"
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$g.subtitle,
+      style: styles$f.subtitle,
       text: "Which app would you like to open?",
       variant: "L2_REGULAR"
     }
@@ -2632,33 +2636,33 @@ const ContactModal = ({
     reactNative.Pressable,
     {
       onPress: () => handleOptionPress(),
-      style: styles$g.optionButton
+      style: styles$f.optionButton
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
-        style: styles$g.optionText,
+        style: styles$f.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$g.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handleCall, style: styles$g.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$f.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handleCall, style: styles$f.optionButton }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$g.optionText,
+      style: styles$f.optionText,
       text: `Call ${phoneNumber}`,
       variant: "B3_BOLD"
     }
-  ))), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onClose, style: styles$g.cancelButton }, /* @__PURE__ */ React__default["default"].createElement(
+  ))), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onClose, style: styles$f.cancelButton }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$g.cancelText,
+      style: styles$f.cancelText,
       text: "Cancel",
       variant: "B2_REGULAR"
     }
   )));
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.container }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$f.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Modal,
     {
       animationType: "slide",
@@ -2666,10 +2670,10 @@ const ContactModal = ({
       visible,
       onRequestClose: onClose
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.modalContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.modalContent }, renderContent()))
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$f.modalContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$f.modalContent }, renderContent()))
   ));
 };
-const styles$g = reactNative.StyleSheet.create({
+const styles$f = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
@@ -2725,7 +2729,7 @@ const styles$g = reactNative.StyleSheet.create({
 });
 var ContactModel = withThemeProvider(ContactModal);
 
-const styles$f = reactNative.StyleSheet.create({
+const styles$e = reactNative.StyleSheet.create({
   applyButton: {
     marginTop: verticalScale(24),
     height: verticalScale(48),
@@ -2816,7 +2820,7 @@ const DateRangePicker = (props) => {
         onButtonPress(selectedRange?.startDate, selectedRange?.endDate);
       },
       containerStyle: {
-        ...styles$f.applyButton,
+        ...styles$e.applyButton,
         backgroundColor: theme.SURFACE_INVERTED
       },
       textStyle: { color: theme.CONTENT_INVERTED },
@@ -2843,20 +2847,20 @@ const OurOfficesButton = ({
     reactNative.TouchableOpacity,
     {
       style: [
-        styles$e.button,
+        styles$d.button,
         { backgroundColor: theme["SURFACE_SECONDARY"] },
         containerStyle
       ],
       onPress
     },
-    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(
+    leftIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.iconContainer }, React__default["default"].cloneElement(leftIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.textContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
         text: title,
         variant: titleVariant,
         textColor: titleColor,
-        style: styles$e.textView
+        style: styles$d.textView
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
@@ -2864,13 +2868,13 @@ const OurOfficesButton = ({
         text: description,
         variant: descriptionVariant,
         textColor: descriptionColor,
-        style: styles$e.flexWrap
+        style: styles$d.flexWrap
       }
     )),
-    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.rightIconContainer }, React__default["default"].cloneElement(rightIcon))
+    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.rightIconContainer }, React__default["default"].cloneElement(rightIcon))
   );
 };
-const styles$e = reactNative.StyleSheet.create({
+const styles$d = reactNative.StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -2894,7 +2898,7 @@ const styles$e = reactNative.StyleSheet.create({
 });
 var OurOffices = withThemeProvider(OurOfficesButton);
 
-const styles$d = reactNative.StyleSheet.create({
+const styles$c = reactNative.StyleSheet.create({
   iconContainer: {
     position: "relative",
     alignItems: "center"
@@ -2923,7 +2927,7 @@ const NotificationBandge = ({
   if (notificationCount <= 0) {
     return icon;
   }
-  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)));
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.iconContainer }, icon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.badge }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$c.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
 };
 
 const ScrollableList = ({
@@ -2941,13 +2945,13 @@ const ScrollableList = ({
     data && data.length > 0 ? data[0].name : null
   );
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$c.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$b.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.ScrollView,
     {
       horizontal: true,
       showsHorizontalScrollIndicator: false,
       contentContainerStyle: [
-        styles$c.scrollViewContent,
+        styles$b.scrollViewContent,
         scrollViewContentStyle
       ]
     },
@@ -2956,10 +2960,10 @@ const ScrollableList = ({
       {
         key: item.value,
         style: [
-          styles$c.item,
+          styles$b.item,
           itemStyle,
           (activeTab ?? selectedItem) === item.name && [
-            styles$c.selectedItem,
+            styles$b.selectedItem,
             selectedItemStyle
           ]
         ],
@@ -2980,7 +2984,7 @@ const ScrollableList = ({
         reactNative.View,
         {
           style: [
-            styles$c.errorViewStyle,
+            styles$b.errorViewStyle,
             {
               backgroundColor: theme.SURFACE_BRAND_STATIC
             }
@@ -2990,7 +2994,7 @@ const ScrollableList = ({
     ))
   ));
 };
-const styles$c = reactNative.StyleSheet.create({
+const styles$b = reactNative.StyleSheet.create({
   container: {
     paddingVertical: 10
   },
@@ -3017,64 +3021,76 @@ const styles$c = reactNative.StyleSheet.create({
 });
 var category = withThemeProvider(ScrollableList);
 
-const styles$b = reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "black",
-    padding: 20,
-    justifyContent: "center"
-  },
-  headerText: {
-    color: "white",
-    fontSize: 18,
-    fontWeight: "bold",
-    marginBottom: 20
-  },
-  textInput: {
-    backgroundColor: "white",
-    borderRadius: 10,
-    padding: 15,
-    color: "black",
-    fontSize: 16,
-    textAlignVertical: "top",
-    minHeight: 100
-  },
-  charCounter: {
-    textAlign: "left",
-    marginTop: 10
-  },
-  buttonContainer: {
-    flexDirection: "row",
-    //justifyContent: "space-between",
-    marginTop: 20
-  },
-  feedbackButton: {
-    backgroundColor: "transparent",
-    borderColor: "white",
-    borderWidth: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 30
-  },
-  cancelButton: {
-    paddingVertical: 10,
-    paddingHorizontal: 40
-  }
-});
+const createStyles = (theme) => {
+  return reactNative.StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 20,
+      justifyContent: "center",
+      backgroundColor: theme[Theme.SURFACE_PRIMARY]
+    },
+    headerText: {
+      color: theme[Theme.CONTENT_PRIMARY],
+      marginBottom: 20
+    },
+    textInput: {
+      borderRadius: 10,
+      padding: 15,
+      color: theme[Theme.CONTENT_SECONDRY],
+      textAlignVertical: "top",
+      minHeight: 100,
+      borderColor: theme[Theme.BORDER_PRIMARY]
+    },
+    charCounter: {
+      textAlign: "left",
+      marginTop: 10,
+      color: theme[Theme.CONTENT_SECONDRY]
+    },
+    buttonContainer: {
+      flexDirection: "row",
+      marginTop: 20
+    },
+    feedbackButton: {
+      backgroundColor: theme[Theme.SURFACE_PRIMARY],
+      borderColor: theme[Theme.BORDER_INVERTED],
+      borderWidth: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 20,
+      borderRadius: 30
+    },
+    cancelButton: {
+      paddingVertical: 10,
+      paddingHorizontal: 40
+    }
+  });
+};
 
 const FeedbackForm = ({
   title,
   clearAllData,
   handleSendFeedback,
   feedback,
+  inputText,
+  rightBtnTxt,
+  leftBtnTxt,
   setFeedback
 }) => {
   const maxChars = 200;
-  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(
+  const { theme } = useTheme();
+  const styles = createStyles({ theme });
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.container }, /* @__PURE__ */ React__default["default"].createElement(
+    CustomText$1,
+    {
+      text: title,
+      variant: FontStyle.L1_REGULAR,
+      textColor: Theme.CONTENT_SECONDRY,
+      style: styles.headerText
+    }
+  ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.TextInput,
     {
-      style: [styles$b.textInput, { height: Math.max(100) }],
-      placeholder: "Would you like to tell us more...",
+      style: [styles.textInput, { height: Math.max(100) }],
+      placeholder: inputText,
       placeholderTextColor: "gray",
       multiline: true,
       maxLength: maxChars,
@@ -3085,26 +3101,27 @@ const FeedbackForm = ({
     CustomText$1,
     {
       text: `${feedback.length}/${maxChars} characters`,
-      variant: "L2_REGULAR",
-      textColor: "CONTENT_SECONDRY",
-      style: styles$b.charCounter
+      variant: FontStyle.L2_REGULAR,
+      textColor: Theme.CONTENT_SECONDRY,
+      style: styles.charCounter
     }
-  ), /* @__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(
+  ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.buttonContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles.feedbackButton, onPress: handleSendFeedback }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      text: "Send feedback",
-      variant: "L1_REGULAR",
-      textColor: "CONTENT_PRIMARY"
+      text: leftBtnTxt,
+      variant: FontStyle.L1_REGULAR,
+      textColor: Theme.CONTENT_PRIMARY
     }
-  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$b.cancelButton, onPress: clearAllData }, /* @__PURE__ */ React__default["default"].createElement(
+  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles.cancelButton, onPress: clearAllData }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      text: "Cancel",
-      variant: "L1_REGULAR",
-      textColor: "CONTENT_PRIMARY"
+      text: rightBtnTxt,
+      variant: FontStyle.L1_REGULAR,
+      textColor: Theme.CONTENT_PRIMARY
     }
   ))));
 };
+var feedback = withThemeProvider(FeedbackForm);
 
 const DEFAULT_COUNTRY_CODE = "AE";
 const DEFAULT_CALLING_CODE = "+971";
@@ -4451,7 +4468,7 @@ exports.DHRE_DEFAULT = DHRE_DEFAULT;
 exports.DateRangePicker = DateRangePicker$1;
 exports.DropDown = CustomDropdown;
 exports.FONT_STYLES = FONT_STYLES;
-exports.FeedbackForm = FeedbackForm;
+exports.FeedbackForm = feedback;
 exports.FileUpload = FileUpload;
 exports.FontStyle = FontStyle;
 exports.Line = Line;