dhre-ui-kit 0.0.116 → 0.0.118

package/lib/index.mjs

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import React__default, { createContext, useContext, useState, useEffect, useRef, memo, useCallback } from 'react';
+import React, { createContext, useContext, useState, useEffect, useRef, memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { Dimensions, Text, StyleSheet, Pressable, View, Modal, KeyboardAvoidingView, Platform, TextInput, ScrollView, Animated, FlatList, ActivityIndicator, TouchableOpacity, Alert, Linking, PanResponder } from 'react-native';
 import { PanGestureHandler, GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
@@ -250,7 +249,7 @@ const ThemeProvider = ({ children }) => {
     acc[key] = theme[key][mode];
     return acc;
   }, {});
-  return /* @__PURE__ */ React__default.createElement(ThemeContext.Provider, { value: { theme: filteredTheme } }, children);
+  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: { theme: filteredTheme } }, children);
 };
 const useTheme = () => {
   const context = useContext(ThemeContext);
@@ -261,7 +260,7 @@ const useTheme = () => {
 };
 
 const withThemeProvider = (Component) => {
-  return (props) => /* @__PURE__ */ React__default.createElement(ThemeProvider, null, /* @__PURE__ */ React__default.createElement(Component, { ...props }));
+  return (props) => /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(Component, { ...props }));
 };
 
 const { width: width$1, height } = Dimensions.get("window");
@@ -325,7 +324,7 @@ const CustomTypography = ({
   ...props
 }) => {
   const textStyle = FONT_STYLES[variant];
-  return /* @__PURE__ */ React__default.createElement(Text, { testID, style: [textStyle, style], ...props }, text);
+  return /* @__PURE__ */ React.createElement(Text, { testID, style: [textStyle, style], ...props }, text);
 };
 
 const CustomText = ({
@@ -336,7 +335,7 @@ const CustomText = ({
   ...props
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant,
@@ -559,15 +558,15 @@ const Badge = ({
   iconStyle,
   handleIconPress
 }) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     Pressable,
     {
       style: [styles$C.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React__default.createElement(View, { style: [styles$C.icon, iconStyle] }, React__default.cloneElement(iconName)),
-    text && /* @__PURE__ */ React__default.createElement(
+    iconName && /* @__PURE__ */ React.createElement(View, { style: [styles$C.icon, iconStyle] }, React.cloneElement(iconName)),
+    text && /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
@@ -618,65 +617,6 @@ const styles$B = StyleSheet.create({
   rightIconStyle: { marginLeft: 8 }
 });
 
-var _path$2;
-function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
-var SvgCrossIcon = function SvgCrossIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 25,
-    fill: "none"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M17.657 8.032a.686.686 0 0 0-.97-.97L12 11.749 7.313 7.062a.686.686 0 1 0-.97.97l4.687 4.687-4.687 4.687a.686.686 0 1 0 .97.97L12 13.688l4.687 4.688a.686.686 0 1 0 .97-.97l-4.687-4.687z"
-  })));
-};
-
-function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
-var SvgCaretLeft = function SvgCaretLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
-  }, props));
-};
-
-var _path$1, _path2;
-function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
-var SvgDotsThreeVertical = function SvgDotsThreeVertical(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    stroke: "#fff",
-    strokeWidth: 0.125,
-    d: "M13.438 6a1.438 1.438 0 1 1-2.876 0 1.438 1.438 0 0 1 2.876 0ZM13.438 12a1.438 1.438 0 1 1-2.876 0 1.438 1.438 0 0 1 2.876 0Z"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M12 19.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
-  })));
-};
-
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var SvgArrowLeft = function SvgArrowLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    fillRule: "evenodd",
-    d: "M15.6 4.186a.774.774 0 0 1 .085 1.092L9.923 12l5.762 6.722a.774.774 0 0 1-1.176 1.008l-6.194-7.226a.774.774 0 0 1 0-1.008L14.51 4.27a.774.774 0 0 1 1.092-.084",
-    clipRule: "evenodd"
-  })));
-};
-
 const BottomDrawer = ({
   isModalVisible,
   toggleModal,
@@ -690,8 +630,8 @@ const BottomDrawer = ({
   showBlurView = true,
   showLeftIcon = false,
   showRightIcon = true,
-  leftIcon = /* @__PURE__ */ React__default.createElement(SvgArrowLeft, null),
-  rightIcon = /* @__PURE__ */ React__default.createElement(SvgCrossIcon, null),
+  leftIcon,
+  rightIcon,
   onLeftIconPress,
   titleStyle,
   titleVariant = "B2_REGULAR",
@@ -703,7 +643,7 @@ const BottomDrawer = ({
       toggleModal();
     }
   };
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     Modal,
     {
       animationType: "slide",
@@ -711,27 +651,37 @@ const BottomDrawer = ({
       visible: isModalVisible,
       onRequestClose: toggleModal
     },
-    /* @__PURE__ */ React__default.createElement(PanGestureHandler, { onGestureEvent: onSwipDown }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(PanGestureHandler, { onGestureEvent: onSwipDown }, /* @__PURE__ */ React.createElement(
       KeyboardAvoidingView,
       {
         behavior: Platform.OS === "ios" ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React__default.createElement(View, { style: [styles$B.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: [styles$B.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React.createElement(
         BlurView,
         {
           style: [styles$B.blurView, blurViewStyle],
           blurType: "light",
           blurAmount
         }
-      ) : null, /* @__PURE__ */ React__default.createElement(View, { style: [styles$B.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(View, { style: styles$B.separator }), /* @__PURE__ */ React__default.createElement(View, { style: styles$B.headerContainer }, /* @__PURE__ */ React__default.createElement(
+      ) : null, /* @__PURE__ */ React.createElement(View, { style: [styles$B.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$B.separator }), /* @__PURE__ */ React.createElement(View, { style: styles$B.headerContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
+        width: moderateScale(24),
+        height: moderateScale(24),
+        style: styles$B.leftIconStyle,
+        onPress: onLeftIconPress
+      }) : null, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: titleVariant,
           text: title,
           style: { ...styles$B.title, ...titleStyle }
         }
-      ))), children))
+      ), showRightIcon && rightIcon ? React.cloneElement(rightIcon, {
+        width: moderateScale(24),
+        height: moderateScale(24),
+        style: styles$B.rightIconStyle,
+        onPress: toggleModal
+      }) : null)), children))
     ))
   );
 };
@@ -753,7 +703,7 @@ const CustomButton = ({
   disableButtonTitleColor
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID,
@@ -767,8 +717,8 @@ const CustomButton = ({
       onPress,
       disabled
     },
-    imagePosition === "left" && leftIcon && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(leftIcon, { width: 20, height: 20 })),
-    /* @__PURE__ */ React__default.createElement(
+    imagePosition === "left" && leftIcon && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(leftIcon, { width: 20, height: 20 })),
+    /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         text: title,
@@ -782,7 +732,7 @@ const CustomButton = ({
         textColor: titleColor
       }
     ),
-    imagePosition === "right" && rightIcon && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(rightIcon, { width: 20, height: 20 }))
+    imagePosition === "right" && rightIcon && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(rightIcon, { width: 20, height: 20 }))
   );
 };
 const styles$A = StyleSheet.create({
@@ -862,42 +812,42 @@ const Cards = ({
   testID,
   onButtonPress
 }) => {
-  return /* @__PURE__ */ React__default.createElement(View, { testID, style: styles$z.container }, topLeftTitle ? /* @__PURE__ */ React__default.createElement(View, { style: styles$z.topLeft }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$z.container }, topLeftTitle ? /* @__PURE__ */ React.createElement(View, { style: styles$z.topLeft }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P2regular",
       style: styles$z.title,
       text: topLeftTitle
     }
-  )) : null, title ? /* @__PURE__ */ React__default.createElement(
+  )) : null, title ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "H6bold",
       style: styles$z.subTitleBelow,
       text: title
     }
-  ) : null, subtitle ? /* @__PURE__ */ React__default.createElement(
+  ) : null, subtitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P3regular",
       style: styles$z.subtitle,
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default.createElement(View, { style: styles$z.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default.createElement(
+  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$z.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P3regular",
       style: styles$z.subTitleLeftBelow,
       text: iconTitle
     }
-  ) : null), buttonShown ? /* @__PURE__ */ React__default.createElement(
+  ) : null), buttonShown ? /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Button-Press",
       style: styles$z.button,
       onPress: onButtonPress
     },
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "B2semiBold",
@@ -958,7 +908,7 @@ const Checkbox = ({
     setChecked(!checked);
     onCheck && onCheck(!checked);
   };
-  return /* @__PURE__ */ React__default.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Checkbox-Press",
@@ -966,8 +916,8 @@ const Checkbox = ({
       disabled: disable,
       style: styles$y.directionStyle
     },
-    /* @__PURE__ */ React__default.createElement(View, { style: styles$y.checkboxContainer }, React__default.cloneElement(checked ? checkedIcon : uncheckedIcon)),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles$y.checkboxContainer }, React.cloneElement(checked ? checkedIcon : uncheckedIcon)),
+    /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: titleVariant,
@@ -1028,26 +978,26 @@ const CustomDropdown$1 = ({
   downArrowIcon
 }) => {
   const [showOptions, setShowOptions] = useState(false);
-  return /* @__PURE__ */ React__default.createElement(View, { testID: testId }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID: testId }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P3regular",
       style: styles$x.labelStyle,
       text: label
     }
-  ), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: `${testId}-BTN`,
       style: styles$x.dropDownStyle,
       onPress: () => setShowOptions(!showOptions)
     },
-    iconName && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(iconName, {
+    iconName && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
       style: styles$x.iconStyle
     })),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P3regular",
@@ -1055,14 +1005,14 @@ const CustomDropdown$1 = ({
         text: selectedValue ? selectedValue.label : placeholder
       }
     ),
-    /* @__PURE__ */ React__default.createElement(View, null, showOptions ? React__default.cloneElement(upArrowIcon, {
+    /* @__PURE__ */ React.createElement(View, null, showOptions ? React.cloneElement(upArrowIcon, {
       width: moderateScale(24),
       height: moderateScale(24)
-    }) : React__default.cloneElement(downArrowIcon, {
+    }) : React.cloneElement(downArrowIcon, {
       width: moderateScale(24),
       height: moderateScale(24)
     }))
-  ), showOptions && /* @__PURE__ */ React__default.createElement(View, { style: styles$x.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default.createElement(
+  ), showOptions && /* @__PURE__ */ React.createElement(View, { style: styles$x.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React.createElement(
     Pressable,
     {
       key: id,
@@ -1078,12 +1028,12 @@ const CustomDropdown$1 = ({
         }
       ]
     },
-    iconName && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(iconName, {
+    iconName && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
       style: styles$x.iconStyle
     })),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P3regular",
@@ -1174,14 +1124,14 @@ const CustomTextInput = ({
   };
   const handleIconPress1 = () => setValue("");
   const handleIconPress2 = () => setIsSecureTextEntry(!isSecureTextEntry);
-  return /* @__PURE__ */ React__default.createElement(View, { testID }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P3medium",
       style: [styles$w.labelStyle, disabled && styles$w.disableTextStyle],
       text: label
     }
-  ), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React.createElement(
     View,
     {
       style: [
@@ -1196,12 +1146,12 @@ const CustomTextInput = ({
         }
       ]
     },
-    isSearchBar && searchIcon && React__default.cloneElement(searchIcon, {
+    isSearchBar && searchIcon && React.cloneElement(searchIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
       style: styles$w.searchIconStyle
     }),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       TextInput,
       {
         ...props,
@@ -1218,15 +1168,15 @@ const CustomTextInput = ({
         secureTextEntry: isSecureTextEntry
       }
     ),
-    value && !multiline && rightIcon1 && React__default.cloneElement(rightIcon1, {
+    value && !multiline && rightIcon1 && React.cloneElement(rightIcon1, {
       onPress: handleIconPress1,
       testID: "icon1"
     }),
-    secureTextEntry && rightIcon2 && React__default.cloneElement(rightIcon2, {
+    secureTextEntry && rightIcon2 && React.cloneElement(rightIcon2, {
       onPress: handleIconPress2,
       testID: "icon2"
     })
-  ), (error || successMessage) && /* @__PURE__ */ React__default.createElement(
+  ), (error || successMessage) && /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       numberOfLines: 2,
@@ -1269,15 +1219,15 @@ const CustomTooltip = ({
   iconStyle,
   iconColor = DHRE_COLORS_TEXT.DH_BLACK
 }) => {
-  const defaultPopoverContent = /* @__PURE__ */ React__default.createElement(View, { style: styles$v.mesageContainer, testID: testId }, /* @__PURE__ */ React__default.createElement(
+  const defaultPopoverContent = /* @__PURE__ */ React.createElement(View, { style: styles$v.mesageContainer, testID: testId }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P4regular",
       style: styles$v.messageStyle,
       text: message
     }
-  ), icon && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(icon, { fill: iconColor })));
-  return /* @__PURE__ */ React__default.createElement(
+  ), icon && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(icon, { fill: iconColor })));
+  return /* @__PURE__ */ React.createElement(
     Tooltip,
     {
       containerStyle: styles$v.tooltipContainerStyle,
@@ -1336,27 +1286,27 @@ const FileUpload = ({
   icon,
   iconStyle
 }) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     View,
     {
       style: [styles$u.container, containerStyle],
       testID: "file-upload-container"
     },
-    /* @__PURE__ */ React__default.createElement(View, { style: styles$u.content }, /* @__PURE__ */ React__default.createElement(View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React__default.cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React__default.createElement(CustomTypography, { variant: "H8bold", style: styles$u.title, text: title }), /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles$u.content }, /* @__PURE__ */ React.createElement(View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React.cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React.createElement(CustomTypography, { variant: "H8bold", style: styles$u.title, text: title }), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P4regular",
         style: styles$u.description,
         text: `Drop files directly here or `
       }
-    ), /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P4regular",
         style: styles$u.browse,
         text: btnText
       }
-    ), /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         testID: "file-upload-description",
@@ -1365,14 +1315,14 @@ const FileUpload = ({
         text: ` from your device`
       }
     )),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       Pressable,
       {
         style: styles$u.button,
         onPress: onUpload,
         testID: "file-upload-button"
       },
-      /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: "B2semiBold",
@@ -1385,7 +1335,7 @@ const FileUpload = ({
 };
 
 const PdfView = (props) => {
-  return /* @__PURE__ */ React__default.createElement(Pdf, { ...props });
+  return /* @__PURE__ */ React.createElement(Pdf, { ...props });
 };
 
 const styles$t = StyleSheet.create({
@@ -1444,28 +1394,28 @@ const PopUp = ({
   leftButtonShown = false,
   rightButtonShown = false
 }) => {
-  return /* @__PURE__ */ React__default.createElement(View, { testID, style: styles$t.container }, title ? /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$t.container }, title ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       style: styles$t.subTitleBelow,
       variant: "H6semiBold",
       text: title
     }
-  ) : null, subtitle ? /* @__PURE__ */ React__default.createElement(
+  ) : null, subtitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       style: styles$t.subtitle,
       variant: "P3regular",
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default.createElement(View, { style: styles$t.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React__default.createElement(
+  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$t.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Left-Button-Press",
       style: styles$t.buttonLeft,
       onPress: onButtonPress
     },
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         style: styles$t.buttonLeftText,
@@ -1473,7 +1423,7 @@ const PopUp = ({
         text: buttonText
       }
     )
-  ) : null, rightButtonShown ? /* @__PURE__ */ React__default.createElement(Pressable, { style: styles$t.button, onPress: onButtonPress }, /* @__PURE__ */ React__default.createElement(
+  ) : null, rightButtonShown ? /* @__PURE__ */ React.createElement(Pressable, { style: styles$t.button, onPress: onButtonPress }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       style: styles$t.buttonText,
@@ -1514,7 +1464,7 @@ const CustomProgressBar = ({
     return () => clearInterval(progressInterval);
   }, [progress, value, increment, interval]);
   const showPercentage = () => {
-    return /* @__PURE__ */ React__default.createElement(View, { style: styles$s.flexDirection }, /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(View, { style: styles$s.flexDirection }, /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         text: `${value}%`,
@@ -1522,7 +1472,7 @@ const CustomProgressBar = ({
         textColor: "CONTENT_PRIMARY",
         style: valueTextStyle
       }
-    ), percentageText ? /* @__PURE__ */ React__default.createElement(
+    ), percentageText ? /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         text: percentageText,
@@ -1534,7 +1484,7 @@ const CustomProgressBar = ({
   const renderProgressBar = () => {
     switch (type) {
       case ShapeType.LINE:
-        return /* @__PURE__ */ React__default.createElement(
+        return /* @__PURE__ */ React.createElement(
           Progress.Bar,
           {
             progress: progress / 100,
@@ -1548,7 +1498,7 @@ const CustomProgressBar = ({
           }
         );
       case ShapeType.CIRCLE:
-        return /* @__PURE__ */ React__default.createElement(
+        return /* @__PURE__ */ React.createElement(
           Progress.Circle,
           {
             progress: progress / 100,
@@ -1566,7 +1516,7 @@ const CustomProgressBar = ({
         return null;
     }
   };
-  return /* @__PURE__ */ React__default.createElement(View, { testID: "custom-progress-bar" }, renderProgressBar());
+  return /* @__PURE__ */ React.createElement(View, { testID: "custom-progress-bar" }, renderProgressBar());
 };
 const styles$s = StyleSheet.create({
   flexDirection: {
@@ -1599,19 +1549,19 @@ const splitRating = (rating) => {
 const drawStar = (starIndex, ratingArray, size, fullStarIcon, halfStarIcon, fullStarColor, emptyStarColor) => {
   const [fullStars, decimalPart] = ratingArray;
   if (starIndex <= fullStars) {
-    return React__default.cloneElement(fullStarIcon, {
+    return React.cloneElement(fullStarIcon, {
       style: { height: size, width: size },
       fill: fullStarColor,
       testID: `star-${starIndex}`
     });
   } else if (starIndex === fullStars + 1 && decimalPart >= 0.5) {
-    return React__default.cloneElement(halfStarIcon, {
+    return React.cloneElement(halfStarIcon, {
       style: { height: size, width: size },
       fill: fullStarColor,
       testID: `star-${starIndex}`
     });
   } else {
-    return React__default.cloneElement(fullStarIcon, {
+    return React.cloneElement(fullStarIcon, {
       style: { height: size, width: size },
       fill: emptyStarColor,
       testID: `star-${starIndex}`
@@ -1642,10 +1592,10 @@ const Star = ({
       emptyStarColor
     );
     stars.push(
-      /* @__PURE__ */ React__default.createElement(View, { key: i, style: [styles$r.star, starStyle] }, starType)
+      /* @__PURE__ */ React.createElement(View, { key: i, style: [styles$r.star, starStyle] }, starType)
     );
   }
-  return /* @__PURE__ */ React__default.createElement(View, { style: styles$r.container, testID: "star" }, stars);
+  return /* @__PURE__ */ React.createElement(View, { style: styles$r.container, testID: "star" }, stars);
 };
 
 var styles$q = StyleSheet.create({
@@ -1690,7 +1640,7 @@ const Tabs = ({
       onSelectionChange(selectedTabs);
     }
   };
-  return /* @__PURE__ */ React__default.createElement(View, { style: [styles$q.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: [styles$q.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React.createElement(
     Pressable,
     {
       key: id,
@@ -1701,7 +1651,7 @@ const Tabs = ({
       },
       onPress: () => handlePress(id)
     },
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         variant: FontStyle.L2_REGULAR,
@@ -1770,7 +1720,7 @@ const Tags = ({
     );
     handleTagsChange(tag);
   };
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     ScrollView,
     {
       testID,
@@ -1778,7 +1728,7 @@ const Tags = ({
       contentContainerStyle: styles$p.contentContainer,
       horizontal: false
     },
-    tags?.map((tag) => /* @__PURE__ */ React__default.createElement(
+    tags?.map((tag) => /* @__PURE__ */ React.createElement(
       Pressable,
       {
         testID: `${testID}-${tag}-BTN`,
@@ -1790,7 +1740,7 @@ const Tags = ({
           selectedTags.includes(tag) ? styles$p.selectedTag : styles$p.tagUnSelected
         ]
       },
-      /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: selectedTags.includes(tag) ? "H9semiBold" : "P4regular",
@@ -1798,13 +1748,13 @@ const Tags = ({
           text: tag
         }
       ),
-      selectedTags.includes(tag) && icon && /* @__PURE__ */ React__default.createElement(
+      selectedTags.includes(tag) && icon && /* @__PURE__ */ React.createElement(
         Pressable,
         {
           testID: `${testID}-${tag}-PRESS`,
           onPress: () => removeTag(tag)
         },
-        React__default.cloneElement(icon, { style: [icon.props.style, iconStyle] })
+        React.cloneElement(icon, { style: [icon.props.style, iconStyle] })
       )
     ))
   );
@@ -1871,14 +1821,14 @@ const CustomSwitch = ({
   const animatedStyle = {
     transform: [{ translateX: animatedValue }]
   };
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     Pressable,
     {
       onPress: toggleSwitch,
       style: [styles$o.container, { width }],
       testID: "custom-switch"
     },
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       View,
       {
         style: [
@@ -1888,8 +1838,8 @@ const CustomSwitch = ({
           }
         ]
       },
-      /* @__PURE__ */ React__default.createElement(Animated.View, { style: [styles$o.thumb, animatedStyle] }),
-      type !== ToggleButtonType.SMALL && /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$o.thumb, animatedStyle] }),
+      type !== ToggleButtonType.SMALL && /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: "B3semiBold",
@@ -1936,7 +1886,8 @@ const Accordion = ({
   optionalElement,
   // Destructure the new prop,
   headerComponent,
-  disabled = false
+  disabled = false,
+  icon
 }) => {
   const contentRef = useRef(null);
   const [animation] = useState(new Animated.Value(0));
@@ -1959,21 +1910,26 @@ const Accordion = ({
     inputRange: [0, 1],
     outputRange: [0, contentHeight]
   });
-  return /* @__PURE__ */ React__default.createElement(View, { style: [styles$n.container, containerStyle], testID: testId }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: [styles$n.container, containerStyle], testID: testId }, /* @__PURE__ */ React.createElement(
     Pressable,
     {
       style: [styles$n.header, headerStyle, disabled && { opacity: 0.5 }],
       onPress: !disabled ? onToggle : void 0
     },
-    headerComponent ? headerComponent() : /* @__PURE__ */ React__default.createElement(
+    headerComponent ? headerComponent() : /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "B4_REGULAR",
         text: title,
         style: [styles$n.title, titleStyle]
       }
-    )
-  ), optionalElement ? optionalElement() : null, isOpen && /* @__PURE__ */ React__default.createElement(Animated.View, { style: [styles$n.content, { height: cardHeight }] }, /* @__PURE__ */ React__default.createElement(
+    ),
+    React.cloneElement(icon, {
+      width: moderateScale(20),
+      height: moderateScale(20),
+      style: styles$n.iconStyle
+    })
+  ), optionalElement ? optionalElement() : null, isOpen && /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$n.content, { height: cardHeight }] }, /* @__PURE__ */ React.createElement(
     View,
     {
       ref: contentRef,
@@ -2017,7 +1973,7 @@ const styles$m = StyleSheet.create({
   }
 });
 
-const Toast = React__default.forwardRef((_props, ref) => {
+const Toast = React.forwardRef(({ sucessIcon, errorIcon }, ref) => {
   const [visible, setVisible] = useState(false);
   const [message, setMessage] = useState("");
   const [isSuccess, setIsSuccess] = useState(true);
@@ -2060,10 +2016,10 @@ const Toast = React__default.forwardRef((_props, ref) => {
       return () => clearInterval(interval);
     }
   }, [visible]);
-  React__default.useImperativeHandle(ref, () => ({
+  React.useImperativeHandle(ref, () => ({
     showToast
   }));
-  return visible ? /* @__PURE__ */ React__default.createElement(
+  return visible ? /* @__PURE__ */ React.createElement(
     Animated.View,
     {
       style: [
@@ -2073,21 +2029,21 @@ const Toast = React__default.forwardRef((_props, ref) => {
       ],
       testID: "TOAST"
     },
-    /* @__PURE__ */ React__default.createElement(View, { style: styles$m.toastContainer }, /* @__PURE__ */ React__default.createElement(View, { style: styles$m.innerContainer }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles$m.toastContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$m.innerContainer }, isSuccess ? sucessIcon : errorIcon, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "L2_REGULAR",
         text: message,
         style: styles$m.messageText
       }
-    ), btnText && /* @__PURE__ */ React__default.createElement(
+    ), btnText && /* @__PURE__ */ React.createElement(
       Pressable,
       {
         style: styles$m.button,
         onPress: onBtnPress || void 0,
         testID: "TOAST-BTN"
       },
-      /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: "L2_BOLD",
@@ -2096,7 +2052,7 @@ const Toast = React__default.forwardRef((_props, ref) => {
         }
       )
     ))),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       Progress.Bar,
       {
         progress,
@@ -2141,14 +2097,15 @@ const CustomSearchBar = ({
   onCrossIconPress,
   handleOnChangeText,
   setValue,
-  rightIcon = /* @__PURE__ */ React__default.createElement(SvgCrossIcon, null),
+  searchIcon,
+  rightIcon,
   disableBorderColor = "#4F4F4F",
   borderColor = "#FFFFFF",
   disablePlaceHolderStyle = "#686868",
   enablePlaceHolderStyle = "#A7A7A7",
   ...props
 }) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     View,
     {
       testID,
@@ -2161,7 +2118,7 @@ const CustomSearchBar = ({
         inputContainerStyle
       ]
     },
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       Pressable,
       {
         onPress: () => {
@@ -2169,9 +2126,14 @@ const CustomSearchBar = ({
           onSearchIconPress?.();
         },
         style: searchIconStyle
-      }
+      },
+      React.cloneElement(searchIcon, {
+        width: moderateScale(24),
+        height: moderateScale(24),
+        style: [styles$l.searchIconStyle, searchIconStyle]
+      })
     ),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       TextInput,
       {
         ...props,
@@ -2186,7 +2148,7 @@ const CustomSearchBar = ({
         }
       }
     ),
-    value && /* @__PURE__ */ React__default.createElement(
+    value && /* @__PURE__ */ React.createElement(
       Pressable,
       {
         onPress: () => {
@@ -2195,11 +2157,11 @@ const CustomSearchBar = ({
         },
         style: crossIconStyle
       },
-      React__default.cloneElement(rightIcon, {
+      rightIcon ? React.cloneElement(rightIcon, {
         // width: moderateScale(24),
         // height: moderateScale(24),
         style: [styles$l.crossIconStyle, crossIconStyle]
-      })
+      }) : null
     )
   );
 };
@@ -2229,31 +2191,31 @@ const styles$k = StyleSheet.create({
 const CustomHeader = ({
   title,
   testId = "CUSTOM-HEADER",
-  leftIcon = /* @__PURE__ */ React__default.createElement(SvgCaretLeft, null),
-  rightIcon = /* @__PURE__ */ React__default.createElement(SvgDotsThreeVertical, null),
+  leftIcon,
+  rightIcon,
   showLeftIcon = true,
   showRightIcon = true,
   onLeftPress,
   onRightPress
 }) => {
-  return /* @__PURE__ */ React__default.createElement(View, { style: styles$k.container, testID: testId }, /* @__PURE__ */ React__default.createElement(View, { style: styles$k.headderContainer }, showLeftIcon && React__default.cloneElement(leftIcon, {
+  return /* @__PURE__ */ React.createElement(View, { style: styles$k.container, testID: testId }, /* @__PURE__ */ React.createElement(View, { style: styles$k.headderContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
     width: moderateScale(24),
     height: moderateScale(24),
     onPress: onLeftPress,
     style: styles$k.leftIconStyle
-  }), /* @__PURE__ */ React__default.createElement(
+  }) : null, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "B2_REGULAR",
       text: title,
       style: styles$k.headerTitle
     }
-  )), showRightIcon && React__default.cloneElement(rightIcon, {
+  )), showRightIcon && rightIcon ? React.cloneElement(rightIcon, {
     width: moderateScale(24),
     height: moderateScale(24),
     onPress: onRightPress,
     style: styles$k.rightIconStyle
-  }));
+  }) : null);
 };
 
 const styles$j = StyleSheet.create({
@@ -2312,7 +2274,7 @@ const SwipableList = (props) => {
     onPress,
     style,
     testID
-  }) => /* @__PURE__ */ React__default.createElement(
+  }) => /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID,
@@ -2320,7 +2282,7 @@ const SwipableList = (props) => {
       style: [styles$j.actionButton, style]
     },
     icon,
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "L1_REGULAR",
@@ -2329,7 +2291,7 @@ const SwipableList = (props) => {
       }
     )
   );
-  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default.createElement(View, { style: [styles$j.leftActions, leftPrimaryActionStyle] }, leftPrimaryActionIcon && /* @__PURE__ */ React__default.createElement(
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React.createElement(View, { style: [styles$j.leftActions, leftPrimaryActionStyle] }, leftPrimaryActionIcon && /* @__PURE__ */ React.createElement(
     ActionButton,
     {
       icon: leftPrimaryActionIcon,
@@ -2338,7 +2300,7 @@ const SwipableList = (props) => {
       style: leftPrimaryActionStyle,
       testID: `${testId}-LEFT-PRIMARY-${item.id}`
     }
-  ), leftSecondaryActionIcon && /* @__PURE__ */ React__default.createElement(
+  ), leftSecondaryActionIcon && /* @__PURE__ */ React.createElement(
     ActionButton,
     {
       icon: leftSecondaryActionIcon,
@@ -2348,7 +2310,7 @@ const SwipableList = (props) => {
       testID: `${testId}-LEFT-SECONDARY-${item.id}`
     }
   ));
-  const rightActionHandle = (item) => /* @__PURE__ */ React__default.createElement(View, { style: [styles$j.rightActions, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default.createElement(
+  const rightActionHandle = (item) => /* @__PURE__ */ React.createElement(View, { style: [styles$j.rightActions, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React.createElement(
     ActionButton,
     {
       icon: rightPrimaryActionIcon,
@@ -2358,7 +2320,7 @@ const SwipableList = (props) => {
       testID: `${testId}-RIGHT-PRIMARY-${item.id}`
     }
   ));
-  const renderItem = ({ item }) => /* @__PURE__ */ React__default.createElement(GestureHandlerRootView, { testID: `${testId}-LIST`, style: styles$j.container }, /* @__PURE__ */ React__default.createElement(
+  const renderItem = ({ item }) => /* @__PURE__ */ React.createElement(GestureHandlerRootView, { testID: `${testId}-LIST`, style: styles$j.container }, /* @__PURE__ */ React.createElement(
     Swipeable,
     {
       renderLeftActions: () => leftActionHandle(
@@ -2373,13 +2335,13 @@ const SwipableList = (props) => {
     },
     props?.renderItem(item)
   ));
-  return /* @__PURE__ */ React__default.createElement(View, { testID: testId }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID: testId }, /* @__PURE__ */ React.createElement(
     FlatList,
     {
       data,
       renderItem,
       keyExtractor: (item) => item.id,
-      ItemSeparatorComponent: () => /* @__PURE__ */ React__default.createElement(View, { style: styles$j.seprator })
+      ItemSeparatorComponent: () => /* @__PURE__ */ React.createElement(View, { style: styles$j.seprator })
     }
   ));
 };
@@ -2403,7 +2365,7 @@ const CustomIcon = ({
   containerStyle,
   titleStyle
 }) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     Pressable,
     {
       style: [styles$i.container, containerStyle],
@@ -2411,7 +2373,7 @@ const CustomIcon = ({
       testID: testId
     },
     icon,
-    title && /* @__PURE__ */ React__default.createElement(
+    title && /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: titleVariant,
@@ -2437,12 +2399,12 @@ const styles$h = StyleSheet.create({
 
 const CustomLoader = ({ loading }) => {
   if (!loading) return null;
-  return /* @__PURE__ */ React__default.createElement(View, { style: styles$h.container }, /* @__PURE__ */ React__default.createElement(ActivityIndicator, { size: "large", color: "#686868" }));
+  return /* @__PURE__ */ React.createElement(View, { style: styles$h.container }, /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "large", color: "#686868" }));
 };
 
 const HorizontalLine = ({ style }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     View,
     {
       style: [
@@ -2469,7 +2431,7 @@ const Topic = ({
   containterStyle
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
       style: [
@@ -2479,15 +2441,15 @@ const Topic = ({
       ],
       onPress
     },
-    rightIcon && /* @__PURE__ */ React__default.createElement(View, { style: styles$f.rightIconContainer }, React__default.cloneElement(rightIcon)),
-    /* @__PURE__ */ React__default.createElement(View, { style: styles$f.textContainer }, subTitle && /* @__PURE__ */ React__default.createElement(
+    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$f.rightIconContainer }, React.cloneElement(rightIcon)),
+    /* @__PURE__ */ React.createElement(View, { style: styles$f.textContainer }, subTitle && /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         text: subTitle,
         variant: "L3_REGULAR",
         textColor: "CONTENT_PRIMARY"
       }
-    ), /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         text: title,
@@ -2575,27 +2537,27 @@ const ContactModal = ({
     onClose();
   };
   const emailOptions = ["Mail", "Gmail", "Outlook"];
-  const renderEmailOptions = () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+  const renderEmailOptions = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
       style: styles$e.title,
       text: "Open email app",
       variant: "L2_REGULAR"
     }
-  ), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
       style: styles$e.subtitle,
       text: "Which app would you like to open?",
       variant: "L2_REGULAR"
     }
-  ), emailOptions.map((option) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: option }, /* @__PURE__ */ React__default.createElement(Line, null), /* @__PURE__ */ React__default.createElement(
+  ), emailOptions.map((option) => /* @__PURE__ */ React.createElement(React.Fragment, { key: option }, /* @__PURE__ */ React.createElement(Line, null), /* @__PURE__ */ React.createElement(
     Pressable,
     {
       onPress: () => handleOptionPress(),
       style: styles$e.optionButton
     },
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         style: styles$e.optionText,
@@ -2604,14 +2566,14 @@ const ContactModal = ({
       }
     )
   ))));
-  const renderContent = () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(View, { style: styles$e.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React__default.createElement(Pressable, { onPress: handleCall, style: styles$e.optionButton }, /* @__PURE__ */ React__default.createElement(
+  const renderContent = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$e.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React.createElement(Pressable, { onPress: handleCall, style: styles$e.optionButton }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
       style: styles$e.optionText,
       text: `Call ${phoneNumber}`,
       variant: "B3_BOLD"
     }
-  ))), /* @__PURE__ */ React__default.createElement(Pressable, { onPress: onClose, style: styles$e.cancelButton }, /* @__PURE__ */ React__default.createElement(
+  ))), /* @__PURE__ */ React.createElement(Pressable, { onPress: onClose, style: styles$e.cancelButton }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
       style: styles$e.cancelText,
@@ -2619,7 +2581,7 @@ const ContactModal = ({
       variant: "B2_REGULAR"
     }
   )));
-  return /* @__PURE__ */ React__default.createElement(View, { style: styles$e.container }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: styles$e.container }, /* @__PURE__ */ React.createElement(
     Modal,
     {
       animationType: "slide",
@@ -2627,7 +2589,7 @@ const ContactModal = ({
       visible,
       onRequestClose: onClose
     },
-    /* @__PURE__ */ React__default.createElement(View, { style: styles$e.modalContainer }, /* @__PURE__ */ React__default.createElement(View, { style: styles$e.modalContent }, renderContent()))
+    /* @__PURE__ */ React.createElement(View, { style: styles$e.modalContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$e.modalContent }, renderContent()))
   ));
 };
 const styles$e = StyleSheet.create({
@@ -2750,7 +2712,7 @@ const DateRangePicker = (props) => {
     return markedDates;
   };
   const isButtonDisabled = !selectedRange.startDate || !selectedRange.endDate;
-  return /* @__PURE__ */ React__default.createElement(View, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
     Calendar,
     {
       markedDates: getMarkedDates(),
@@ -2770,7 +2732,7 @@ const DateRangePicker = (props) => {
       onDayPress,
       ...props
     }
-  ), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React.createElement(
     CustomButton$1,
     {
       title: "Apply",
@@ -2797,7 +2759,7 @@ const OurOfficesButton = ({
   descriptionColor = "CONTENT_SECONDARY"
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
       style: [
@@ -2807,8 +2769,8 @@ const OurOfficesButton = ({
       ],
       onPress
     },
-    leftIcon && /* @__PURE__ */ React__default.createElement(View, { style: styles$c.iconContainer }, React__default.cloneElement(leftIcon)),
-    /* @__PURE__ */ React__default.createElement(View, { style: styles$c.textContainer }, /* @__PURE__ */ React__default.createElement(
+    leftIcon && /* @__PURE__ */ React.createElement(View, { style: styles$c.iconContainer }, React.cloneElement(leftIcon)),
+    /* @__PURE__ */ React.createElement(View, { style: styles$c.textContainer }, /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         text: title,
@@ -2816,7 +2778,7 @@ const OurOfficesButton = ({
         textColor: titleColor,
         style: styles$c.textView
       }
-    ), /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         text: description,
@@ -2825,7 +2787,7 @@ const OurOfficesButton = ({
         style: styles$c.flexWrap
       }
     )),
-    rightIcon && /* @__PURE__ */ React__default.createElement(View, { style: styles$c.rightIconContainer }, React__default.cloneElement(rightIcon))
+    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$c.rightIconContainer }, React.cloneElement(rightIcon))
   );
 };
 const styles$c = StyleSheet.create({
@@ -2875,12 +2837,13 @@ const styles$b = StyleSheet.create({
 });
 
 const NotificationBandge = ({
-  notificationCount = 0
+  notificationCount = 0,
+  icon
 }) => {
   if (notificationCount <= 0) {
-    return null;
+    return icon;
   }
-  return /* @__PURE__ */ React__default.createElement(View, { style: styles$b.iconContainer }, /* @__PURE__ */ React__default.createElement(View, { style: styles$b.badge }, /* @__PURE__ */ React__default.createElement(Text, { style: [styles$b.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
+  return /* @__PURE__ */ React.createElement(View, { style: styles$b.iconContainer }, icon, /* @__PURE__ */ React.createElement(View, { style: styles$b.badge }, /* @__PURE__ */ React.createElement(Text, { style: [styles$b.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
 };
 
 const ScrollableList = ({
@@ -2898,7 +2861,7 @@ const ScrollableList = ({
     data && data.length > 0 ? data[0].name : null
   );
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default.createElement(View, { style: [styles$a.container, containerStyle] }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: [styles$a.container, containerStyle] }, /* @__PURE__ */ React.createElement(
     ScrollView,
     {
       horizontal: true,
@@ -2908,7 +2871,7 @@ const ScrollableList = ({
         scrollViewContentStyle
       ]
     },
-    data?.map((item) => /* @__PURE__ */ React__default.createElement(
+    data?.map((item) => /* @__PURE__ */ React.createElement(
       Pressable,
       {
         key: item.value,
@@ -2925,7 +2888,7 @@ const ScrollableList = ({
           handleSelectCategory(item.name, item.value);
         }
       },
-      /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(
         CustomText$1,
         {
           text: item.name,
@@ -2933,7 +2896,7 @@ const ScrollableList = ({
           textColor: (activeTab ?? selectedItem) === item.name ? selectedItemTextColor : defaultItemTextColor
         }
       ),
-      item?.isError && /* @__PURE__ */ React__default.createElement(
+      item?.isError && /* @__PURE__ */ React.createElement(
         View,
         {
           style: [
@@ -3027,7 +2990,7 @@ const FeedbackForm = ({
   setFeedback
 }) => {
   const maxChars = 200;
-  return /* @__PURE__ */ React__default.createElement(View, { style: styles$9.container }, /* @__PURE__ */ React__default.createElement(Text, { style: styles$9.headerText }, title), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: styles$9.container }, /* @__PURE__ */ React.createElement(Text, { style: styles$9.headerText }, title), /* @__PURE__ */ React.createElement(
     TextInput,
     {
       style: [styles$9.textInput, { height: Math.max(100) }],
@@ -3038,7 +3001,7 @@ const FeedbackForm = ({
       value: feedback,
       onChangeText: (text) => setFeedback(text)
     }
-  ), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
       text: `${feedback.length}/${maxChars} characters`,
@@ -3046,14 +3009,14 @@ const FeedbackForm = ({
       textColor: "CONTENT_SECONDRY",
       style: styles$9.charCounter
     }
-  ), /* @__PURE__ */ React__default.createElement(View, { style: styles$9.buttonContainer }, /* @__PURE__ */ React__default.createElement(Pressable, { style: styles$9.feedbackButton, onPress: handleSendFeedback }, /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React.createElement(View, { style: styles$9.buttonContainer }, /* @__PURE__ */ React.createElement(Pressable, { style: styles$9.feedbackButton, onPress: handleSendFeedback }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
       text: "Send feedback",
       variant: "L1_REGULAR",
       textColor: "CONTENT_PRIMARY"
     }
-  )), /* @__PURE__ */ React__default.createElement(Pressable, { style: styles$9.cancelButton, onPress: clearAllData }, /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React.createElement(Pressable, { style: styles$9.cancelButton, onPress: clearAllData }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
       text: "Cancel",
@@ -3090,7 +3053,7 @@ const CountryDropDown = ({
     setCallingCode(`+${country.callingCode[0]}`);
     getCountryCode(`+${country.callingCode[0]}`);
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(View, { style: [styles$8.container, containerStyle] }, /* @__PURE__ */ React__default.createElement(View, { style: [styles$8.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: [styles$8.container, containerStyle] }, /* @__PURE__ */ React.createElement(View, { style: [styles$8.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React.createElement(
     CountryPicker,
     {
       withFilter: true,
@@ -3100,21 +3063,21 @@ const CountryDropDown = ({
       onSelect: handleSelect,
       visible: pickerVisible
     }
-  ), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React.createElement(
     Text,
     {
       onPress: () => setPickerVisible(true),
       style: [styles$8.callingCode, callingCodeStyle]
     },
     callingCode
-  )), /* @__PURE__ */ React__default.createElement(View, { style: styles$8.flex }, (isFocused || value) && /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React.createElement(View, { style: styles$8.flex }, (isFocused || value) && /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
       text: label ?? "",
       style: styles$8.floatingLabel
     }
-  ), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React.createElement(
     TextInput,
     {
       style: [styles$8.input, inputStyle],
@@ -3127,7 +3090,7 @@ const CountryDropDown = ({
       maxLength,
       placeholderTextColor: theme.CONTENT_SECONDRY["light"]
     }
-  ))), errorMessage ? /* @__PURE__ */ React__default.createElement(
+  ))), errorMessage ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
@@ -3203,7 +3166,7 @@ const CommonTextInput = ({
   handlePress,
   pointerEvents
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Pressable, { onPress: handlePress, style: styles$7.container }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(Pressable, { onPress: handlePress, style: styles$7.container }, /* @__PURE__ */ React.createElement(
     TextInput$1,
     {
       mode: "outlined",
@@ -3228,7 +3191,7 @@ const CommonTextInput = ({
       editable,
       pointerEvents
     }
-  ), errorMessage ? /* @__PURE__ */ React__default.createElement(
+  ), errorMessage ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
@@ -3293,7 +3256,7 @@ const CustomDropdown = ({
   const [isFocus, setIsFocus] = useState(false);
   const renderLabel = () => {
     if (value || isFocus) {
-      return /* @__PURE__ */ React__default.createElement(
+      return /* @__PURE__ */ React.createElement(
         Text,
         {
           style: [
@@ -3315,7 +3278,7 @@ const CustomDropdown = ({
       onValueChange(newValue);
     }
   };
-  return /* @__PURE__ */ React__default.createElement(View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
     Dropdown,
     {
       style: [
@@ -3433,20 +3396,20 @@ const CustomSwitchBtn = ({
   const toggleSwitch = () => {
     onValueChange(!value);
   };
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     Pressable,
     {
       disabled,
       onPress: toggleSwitch,
       style: { ...styles$5.mainContainer, ...containerStyle }
     },
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       Animated.View,
       {
         style: [styles$5.circle, { transform: [{ translateX }], ...circleStyle }]
       }
     ),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         style: [styles$5.activeText, value ? inActiveTextStyle : activeTextStyle],
@@ -3454,7 +3417,7 @@ const CustomSwitchBtn = ({
         variant: activeTextVariant
       }
     ),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         style: [
@@ -3506,7 +3469,7 @@ const TagsComponent = ({
     }
     return tagList;
   };
-  const renderTagItem = ({ item }) => /* @__PURE__ */ React__default.createElement(
+  const renderTagItem = ({ item }) => /* @__PURE__ */ React.createElement(
     Pressable,
     {
       onPress: () => handleTagPress?.(item.name),
@@ -3515,7 +3478,7 @@ const TagsComponent = ({
         selectedTag === item?.name ? styles$4.selectedTagButton : styles$4.unselectedTagButton
       ]
     },
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       Text,
       {
         style: [
@@ -3525,9 +3488,9 @@ const TagsComponent = ({
       },
       item?.name
     ),
-    selectedTag === item?.name && /* @__PURE__ */ React__default.createElement(Text, { style: styles$4.closeButton }, "\u2715")
+    selectedTag === item?.name && /* @__PURE__ */ React.createElement(Text, { style: styles$4.closeButton }, "\u2715")
   );
-  return /* @__PURE__ */ React__default.createElement(View, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
     FlatList,
     {
       data: reorderedTags(),
@@ -3610,7 +3573,10 @@ const CustomDocumentPicker = ({
   fileTypes = [DocumentPicker.types.images, DocumentPicker.types.pdf],
   containerStyle,
   titleStyle,
-  hintStyle
+  hintStyle,
+  fileIcon,
+  uploadIcon,
+  deleteIcon
 }) => {
   const [error, setError] = useState("");
   const [docDetails, setDocDetails] = useState();
@@ -3640,10 +3606,10 @@ const CustomDocumentPicker = ({
       }
     }
   }, [fileTypes, maxFileSize, onDocumentUpload]);
-  useCallback(() => {
+  const removeDocument = useCallback(() => {
     setDocDetails(void 0);
   }, []);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     View,
     {
       style: [
@@ -3653,22 +3619,25 @@ const CustomDocumentPicker = ({
         containerStyle
       ]
     },
-    /* @__PURE__ */ React__default.createElement(Pressable, { style: styles$3.innerContainer, onPress: pickDocument }, /* @__PURE__ */ React__default.createElement(View, { style: styles$3.titleContainer }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(Pressable, { style: styles$3.innerContainer, onPress: pickDocument }, docDetails ? fileIcon : uploadIcon, /* @__PURE__ */ React.createElement(View, { style: styles$3.titleContainer }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: FontStyle.L2_REGULAR,
         text: docDetails?.name ?? title,
         style: [{ color: theme.CONTENT_PRIMARY }, titleStyle]
       }
-    ), !docDetails && /* @__PURE__ */ React__default.createElement(
+    ), !docDetails && /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: FontStyle.L3_REGULAR,
         text: hint,
         style: [{ color: theme.CONTENT_SECONDRY }, hintStyle]
       }
-    )))
-  ), error && /* @__PURE__ */ React__default.createElement(
+    ))),
+    docDetails && React.cloneElement(deleteIcon, {
+      onPress: removeDocument
+    })
+  ), error && /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: FontStyle.L2_REGULAR,
@@ -3704,7 +3673,7 @@ const styles$2 = StyleSheet.create({
   }
 });
 
-const OTPInput = React__default.forwardRef(
+const OTPInput = React.forwardRef(
   ({
     length = 4,
     onComplete,
@@ -3732,7 +3701,7 @@ const OTPInput = React__default.forwardRef(
         setIsResendOtpEnable(true);
       }, 5e3);
     };
-    React__default.useImperativeHandle(ref, () => ({
+    React.useImperativeHandle(ref, () => ({
       reset() {
         setOTP("");
       }
@@ -3763,7 +3732,7 @@ const OTPInput = React__default.forwardRef(
         onComplete?.(otp);
       }
     }, [otp]);
-    return /* @__PURE__ */ React__default.createElement(View, { style: { ...otpContainerStyle }, testID: testId }, /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(View, { style: { ...otpContainerStyle }, testID: testId }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: "OTP",
@@ -3773,7 +3742,7 @@ const OTPInput = React__default.forwardRef(
           textAlign: "left"
         }
       }
-    ), /* @__PURE__ */ React__default.createElement(View, { style: { ...styles$2.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$2.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
       TextInput,
       {
         key: index?.toString(),
@@ -3793,7 +3762,7 @@ const OTPInput = React__default.forwardRef(
         returnKeyType: otp.length === length ? "done" : "next",
         selectionColor: theme.CONTENT_PRIMARY
       }
-    ))), /* @__PURE__ */ React__default.createElement(View, { style: styles$2.resendOtpContainer }, errorMessage ? /* @__PURE__ */ React__default.createElement(
+    ))), /* @__PURE__ */ React.createElement(View, { style: styles$2.resendOtpContainer }, errorMessage ? /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: errorMessage,
@@ -3802,7 +3771,7 @@ const OTPInput = React__default.forwardRef(
           color: theme.ERROR
         }
       }
-    ) : /* @__PURE__ */ React__default.createElement(View, null), /* @__PURE__ */ React__default.createElement(Pressable, { onPress: onClickResendOTP, disabled: !isResendOtpEnable }, /* @__PURE__ */ React__default.createElement(
+    ) : /* @__PURE__ */ React.createElement(View, null), /* @__PURE__ */ React.createElement(Pressable, { onPress: onClickResendOTP, disabled: !isResendOtpEnable }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: "Resend OTP",
@@ -3902,7 +3871,8 @@ const Stepper = ({
   containerStyle,
   showStepCount = false,
   showStatus = false,
-  data
+  data,
+  completedStatusIcon
 }) => {
   const { theme } = useTheme();
   const renderCircleStyle = (status) => {
@@ -3944,18 +3914,18 @@ const Stepper = ({
       return { borderColor: theme.CONTENT_SECONDRY };
     }
   };
-  return /* @__PURE__ */ React__default.createElement(View, { style: { ...styles$1.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
+  return /* @__PURE__ */ React.createElement(View, { style: { ...styles$1.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;
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(
       View,
       {
         key: index?.toString(),
         style: { ...styles$1.stepperWrapper, ...lastViewStyle }
       },
-      /* @__PURE__ */ React__default.createElement(View, { style: styles$1.stepperSeparatorContainer }, /* @__PURE__ */ React__default.createElement(View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: styles$1.stepperSeparatorContainer }, /* @__PURE__ */ React.createElement(View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: item?.step,
@@ -3964,8 +3934,8 @@ const Stepper = ({
             color: theme.CONTENT_PRIMARY
           }
         }
-      )), index != data?.length - 1 && /* @__PURE__ */ React__default.createElement(View, { style: { ...styles$1.separator, ...dividerStyle } })),
-      /* @__PURE__ */ React__default.createElement(View, { style: styles$1.lableContainer }, /* @__PURE__ */ React__default.createElement(
+      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React.createElement(View, { style: { ...styles$1.separator, ...dividerStyle } })),
+      /* @__PURE__ */ React.createElement(View, { style: styles$1.lableContainer }, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: item?.label,
@@ -4015,7 +3985,11 @@ const styles = StyleSheet.create({
 
 const { width } = Dimensions.get("window");
 const BUTTON_WIDTH = 40;
-const CustomSlideButton = ({ label, onComplete }) => {
+const CustomSlideButton = ({
+  label,
+  onComplete,
+  icon
+}) => {
   const pan = useRef(new Animated.Value(0)).current;
   const panResponder = useRef(
     PanResponder.create({
@@ -4046,7 +4020,7 @@ const CustomSlideButton = ({ label, onComplete }) => {
     })
   ).current;
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     View,
     {
       style: {
@@ -4054,7 +4028,7 @@ const CustomSlideButton = ({ label, onComplete }) => {
         backgroundColor: theme.SURFACE_INVERTED
       }
     },
-    /* @__PURE__ */ React__default.createElement(View, { style: styles.buttonTextCOntainer }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles.buttonTextCOntainer }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: label,
@@ -4064,13 +4038,13 @@ const CustomSlideButton = ({ label, onComplete }) => {
         }
       }
     )),
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       Animated.View,
       {
         style: [styles.slider, { transform: [{ translateX: pan }] }],
         ...panResponder.panHandlers
       },
-      /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(
         View,
         {
           style: {
@@ -4078,7 +4052,8 @@ const CustomSlideButton = ({ label, onComplete }) => {
             backgroundColor: theme.SURFACE_PRIMARY,
             width: BUTTON_WIDTH
           }
-        }
+        },
+        icon
       )
     )
   );