dhre-ui-kit 0.0.94 → 0.0.96

package/lib/index.mjs

@@ -0,0 +1,4248 @@
+import * as React from 'react';
+import React__default, { 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';
+import { BlurView } from '@react-native-community/blur';
+import Tooltip from 'rn-tooltip';
+import Pdf from 'react-native-pdf';
+import * as Progress from 'react-native-progress';
+import { Calendar } from 'react-native-calendars';
+import CountryPicker from 'react-native-country-picker-modal';
+import { TextInput as TextInput$1 } from 'react-native-paper';
+import { Dropdown } from 'react-native-element-dropdown';
+import DocumentPicker from 'react-native-document-picker';
+import RNFS from 'react-native-fs';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+var ShapeType = /* @__PURE__ */ ((ShapeType2) => {
+  ShapeType2["LINE"] = "line";
+  ShapeType2["CIRCLE"] = "circle";
+  return ShapeType2;
+})(ShapeType || {});
+var ToggleButtonType = /* @__PURE__ */ ((ToggleButtonType2) => {
+  ToggleButtonType2["SMALL"] = "small";
+  ToggleButtonType2["LARGE"] = "large";
+  return ToggleButtonType2;
+})(ToggleButtonType || {});
+var TextDirectType = /* @__PURE__ */ ((TextDirectType2) => {
+  TextDirectType2["left"] = "left";
+  TextDirectType2["right"] = "right";
+  return TextDirectType2;
+})(TextDirectType || {});
+var ToggleTextType = /* @__PURE__ */ ((ToggleTextType2) => {
+  ToggleTextType2["ON"] = "ON";
+  ToggleTextType2["OFF"] = "OFF";
+  return ToggleTextType2;
+})(ToggleTextType || {});
+var FontStyle = /* @__PURE__ */ ((FontStyle2) => {
+  FontStyle2["H1_BOLD"] = "H1_BOLD";
+  FontStyle2["H2_BOLD"] = "H2_BOLD";
+  FontStyle2["H3_BOLD"] = "H3_BOLD";
+  FontStyle2["H4_BOLD"] = "H4_BOLD";
+  FontStyle2["H5_BOLD"] = "H5_BOLD";
+  FontStyle2["H6_BOLD"] = "H6_BOLD";
+  FontStyle2["H7_BOLD"] = "H7_BOLD";
+  FontStyle2["H8_BOLD"] = "H8_BOLD";
+  FontStyle2["H1_REGULAR"] = "H1_REGULAR";
+  FontStyle2["H2_REGULAR"] = "H2_REGULAR";
+  FontStyle2["H3_REGULAR"] = "H3_REGULAR";
+  FontStyle2["H4_REGULAR"] = "H4_REGULAR";
+  FontStyle2["H5_REGULAR"] = "H5_REGULAR";
+  FontStyle2["H6_REGULAR"] = "H6_REGULAR";
+  FontStyle2["H7_REGULAR"] = "H7_REGULAR";
+  FontStyle2["H8_REGULAR"] = "H8_REGULAR";
+  FontStyle2["H1_LIGHT"] = "H1_LIGHT";
+  FontStyle2["H2_LIGHT"] = "H2_LIGHT";
+  FontStyle2["H3_LIGHT"] = "H3_LIGHT";
+  FontStyle2["H4_LIGHT"] = "H4_LIGHT";
+  FontStyle2["H5_LIGHT"] = "H5_LIGHT";
+  FontStyle2["H6_LIGHT"] = "H6_LIGHT";
+  FontStyle2["H7_LIGHT"] = "H7_LIGHT";
+  FontStyle2["H8_LIGHT"] = "H8_LIGHT";
+  FontStyle2["B1_BOLD"] = "B1_BOLD";
+  FontStyle2["B2_BOLD"] = "B2_BOLD";
+  FontStyle2["B3_BOLD"] = "B3_BOLD";
+  FontStyle2["B4_BOLD"] = "B4_BOLD";
+  FontStyle2["B1_REGULAR"] = "B1_REGULAR";
+  FontStyle2["B2_REGULAR"] = "B2_REGULAR";
+  FontStyle2["B3_REGULAR"] = "B3_REGULAR";
+  FontStyle2["B4_REGULAR"] = "B4_REGULAR";
+  FontStyle2["L1_BOLD"] = "L1_BOLD";
+  FontStyle2["L2_BOLD"] = "L2_BOLD";
+  FontStyle2["L3_BOLD"] = "L3_BOLD";
+  FontStyle2["L1_REGULAR"] = "L1_REGULAR";
+  FontStyle2["L2_REGULAR"] = "L2_REGULAR";
+  FontStyle2["L3_REGULAR"] = "L3_REGULAR";
+  return FontStyle2;
+})(FontStyle || {});
+var Theme = /* @__PURE__ */ ((Theme2) => {
+  Theme2["SURFACE_PRIMARY"] = "SURFACE_PRIMARY";
+  Theme2["SURFACE_SECONDARY"] = "SURFACE_SECONDARY";
+  Theme2["SURFACE_TERTIARY"] = "SURFACE_TERTIARY";
+  Theme2["SURFACE_STATIC"] = "SURFACE_STATIC";
+  Theme2["SURFACE_BRAND_STATIC"] = "SURFACE_BRAND_STATIC";
+  Theme2["SURFACE_BRAND_TRANSPARENT_STATIC"] = "SURFACE_BRAND_TRANSPARENT_STATIC";
+  Theme2["SURFACE_DISABLE"] = "SURFACE_DISABLE";
+  Theme2["SURFACE_INVERTED"] = "SURFACE_INVERTED";
+  Theme2["SURFACE_INVERTED_TRANSPARENT"] = "SURFACE_INVERTED_TRANSPARENT";
+  Theme2["SURFACE_DROP_SHADOW"] = "SURFACE_DROP_SHADOW";
+  Theme2["SURFACE_BLUR"] = "SURFACE_BLUR";
+  Theme2["CONTENT_PRIMARY"] = "CONTENT_PRIMARY";
+  Theme2["CONTENT_SECONDRY"] = "CONTENT_SECONDRY";
+  Theme2["CONTENT_DISABLE"] = "CONTENT_DISABLE";
+  Theme2["CONTENT_INVERTED"] = "CONTENT_INVERTED";
+  Theme2["CONTENT_STATIC"] = "CONTENT_STATIC";
+  Theme2["CONTENT_PRIMARY_STATIC"] = "CONTENT_PRIMARY_STATIC";
+  Theme2["CONTENT_SECONDRY_STATIC"] = "CONTENT_SECONDRY_STATIC";
+  Theme2["BORDER_PRIMARY"] = "BORDER_PRIMARY";
+  Theme2["BORDER_SECONDRY"] = "BORDER_SECONDRY";
+  Theme2["BORDER_DISABLE"] = "BORDER_DISABLE";
+  Theme2["BORDER_INVERTED"] = "BORDER_INVERTED";
+  Theme2["BORDER_BRAND_STATIC"] = "BORDER_BRAND_STATIC";
+  Theme2["BORDER_BRAND_TRANSPARENT_STATIC"] = "BORDER_BRAND_TRANSPARENT_STATIC";
+  Theme2["BORDER_TEXT_FIELD"] = "BORDER_TEXT_FIELD";
+  Theme2["BORDER_SEPERATOR_HEADER"] = "BORDER_SEPERATOR_HEADER";
+  Theme2["BORDER_STATIC"] = "BORDER_STATIC";
+  Theme2["BORDER_SEPRATOR"] = "BORDER_SEPRATOR";
+  Theme2["WARNING"] = "WARNING";
+  Theme2["SUCCESS"] = "SUCCESS";
+  Theme2["INFO"] = "INFO";
+  Theme2["ERROR"] = "ERROR";
+  return Theme2;
+})(Theme || {});
+
+const theme = {
+  [Theme.SURFACE_PRIMARY]: {
+    light: "#FFFFFF",
+    dark: "#000000"
+  },
+  [Theme.SURFACE_SECONDARY]: {
+    light: "#F5F5F5",
+    dark: "#212121"
+  },
+  [Theme.SURFACE_TERTIARY]: {
+    light: "#0000001A",
+    dark: "#373737"
+  },
+  [Theme.SURFACE_STATIC]: {
+    light: "#FFFFFF",
+    dark: "#FFFFFF"
+  },
+  [Theme.SURFACE_BRAND_STATIC]: {
+    light: "#D92D27",
+    dark: "#D92D27"
+  },
+  [Theme.SURFACE_BRAND_TRANSPARENT_STATIC]: {
+    light: "#D92D3E",
+    dark: "#D92D3E"
+  },
+  [Theme.SURFACE_DISABLE]: {
+    light: "#E1E1E1",
+    dark: "#A7A7A7"
+  },
+  [Theme.SURFACE_INVERTED]: {
+    light: "#000000",
+    dark: "#FFFFFF"
+  },
+  [Theme.SURFACE_INVERTED_TRANSPARENT]: {
+    light: "#686868",
+    dark: "#FFFFFF"
+  },
+  [Theme.SURFACE_DROP_SHADOW]: {
+    light: "#CECECE",
+    dark: "#373737"
+  },
+  [Theme.SURFACE_BLUR]: {
+    light: "#000000B2",
+    dark: "#FFFFFFB2"
+  },
+  [Theme.CONTENT_PRIMARY]: {
+    light: "#000000",
+    dark: "#FFFFFF"
+  },
+  [Theme.CONTENT_SECONDRY]: {
+    light: "#686868",
+    dark: "#A7A7A7"
+  },
+  [Theme.CONTENT_DISABLE]: {
+    light: "#A7A7A7",
+    dark: "#686868"
+  },
+  [Theme.CONTENT_INVERTED]: {
+    light: "#FFFFFF",
+    dark: "#000000"
+  },
+  [Theme.CONTENT_STATIC]: {
+    light: "#FFFFFF",
+    dark: "#FFFFFF"
+  },
+  [Theme.CONTENT_PRIMARY_STATIC]: {
+    light: "#0000001A",
+    dark: "#686868"
+  },
+  [Theme.CONTENT_SECONDRY_STATIC]: {
+    light: "#CECECE",
+    dark: "#CECECE"
+  },
+  [Theme.BORDER_PRIMARY]: {
+    light: "#686868",
+    dark: "#404040"
+  },
+  [Theme.BORDER_SECONDRY]: {
+    light: "#A7A7A7",
+    dark: "#686868"
+  },
+  [Theme.BORDER_DISABLE]: {
+    light: "#CECECE",
+    dark: "#4F4F4F"
+  },
+  [Theme.BORDER_INVERTED]: {
+    light: "#000000",
+    dark: "#FFFFFF"
+  },
+  [Theme.BORDER_BRAND_STATIC]: {
+    light: "#D92D27",
+    dark: "#D92D27"
+  },
+  [Theme.BORDER_BRAND_TRANSPARENT_STATIC]: {
+    light: "#D92D3E",
+    dark: "#D92D3E"
+  },
+  [Theme.BORDER_STATIC]: {
+    light: "#FFFFFF",
+    dark: "#FFFFFF"
+  },
+  [Theme.BORDER_TEXT_FIELD]: {
+    light: "#0000001A",
+    dark: "#404040"
+  },
+  [Theme.BORDER_SEPRATOR]: {
+    light: "#282828",
+    dark: "#FFFFFF"
+  },
+  [Theme.BORDER_SEPERATOR_HEADER]: {
+    light: "#E1E1E1",
+    dark: "#404040"
+  },
+  [Theme.WARNING]: {
+    light: "#B65E01",
+    dark: "#EB8425"
+  },
+  [Theme.SUCCESS]: {
+    light: "#008256",
+    dark: "#00B578"
+  },
+  [Theme.INFO]: {
+    light: "#0569C2",
+    dark: "#339ECF"
+  },
+  [Theme.ERROR]: {
+    light: "#EB0542",
+    dark: "#EB0542"
+  }
+};
+
+const ThemeContext = createContext(void 0);
+const ThemeProvider = ({ children }) => {
+  const mode = useSelector((state) => state.theme.currentTheme);
+  const filteredTheme = Object.keys(theme).reduce((acc, key) => {
+    acc[key] = theme[key][mode];
+    return acc;
+  }, {});
+  return /* @__PURE__ */ React__default.createElement(ThemeContext.Provider, { value: { theme: filteredTheme } }, children);
+};
+const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+
+const withThemeProvider = (Component) => {
+  return (props) => /* @__PURE__ */ React__default.createElement(ThemeProvider, null, /* @__PURE__ */ React__default.createElement(Component, { ...props }));
+};
+
+const { width: width$1, height } = Dimensions.get("window");
+const guidelineBaseWidth = 375;
+const guidelineBaseHeight = 812;
+const horizontalScale = (size) => width$1 / guidelineBaseWidth * size;
+const verticalScale = (size) => height / guidelineBaseHeight * size;
+const moderateScale = (size, factor = 0.5) => size + (horizontalScale(size) - size) * factor;
+
+const createFontStyle = (fontFamily, fontSize, lineHeight) => ({
+  fontSize: moderateScale(fontSize),
+  lineHeight: verticalScale(lineHeight),
+  fontFamily
+});
+const FONT_STYLES = {
+  [FontStyle.H1_BOLD]: createFontStyle("MeraasAktiv_Bd", 40, 56),
+  [FontStyle.H2_BOLD]: createFontStyle("MeraasAktiv_Bd", 36, 50.4),
+  [FontStyle.H3_BOLD]: createFontStyle("MeraasAktiv_Bd", 32, 44.8),
+  [FontStyle.H4_BOLD]: createFontStyle("MeraasAktiv_Bd", 26, 36.4),
+  [FontStyle.H5_BOLD]: createFontStyle("MeraasAktiv_Bd", 24, 33.6),
+  [FontStyle.H6_BOLD]: createFontStyle("MeraasAktiv_Bd", 22, 30.8),
+  [FontStyle.H7_BOLD]: createFontStyle("MeraasAktiv_Bd", 20, 28),
+  [FontStyle.H8_BOLD]: createFontStyle("MeraasAktiv_Bd", 18, 25.2),
+  [FontStyle.H1_REGULAR]: createFontStyle("MeraasAktiv_Rg", 40, 56),
+  [FontStyle.H2_REGULAR]: createFontStyle("MeraasAktiv_Rg", 36, 50.4),
+  [FontStyle.H3_REGULAR]: createFontStyle("MeraasAktiv_Rg", 32, 44.8),
+  [FontStyle.H4_REGULAR]: createFontStyle("MeraasAktiv_Rg", 26, 36.4),
+  [FontStyle.H5_REGULAR]: createFontStyle("MeraasAktiv_Rg", 24, 33.6),
+  [FontStyle.H6_REGULAR]: createFontStyle("MeraasAktiv_Rg", 22, 30.8),
+  [FontStyle.H7_REGULAR]: createFontStyle("MeraasAktiv_Rg", 20, 28),
+  [FontStyle.H8_REGULAR]: createFontStyle("MeraasAktiv_Rg", 18, 25.2),
+  [FontStyle.H1_LIGHT]: createFontStyle("MeraasAktiv_Lt", 40, 56),
+  [FontStyle.H2_LIGHT]: createFontStyle("MeraasAktiv_Lt", 36, 50.4),
+  [FontStyle.H3_LIGHT]: createFontStyle("MeraasAktiv_Lt", 32, 44.8),
+  [FontStyle.H4_LIGHT]: createFontStyle("MeraasAktiv_Lt", 26, 36.4),
+  [FontStyle.H5_LIGHT]: createFontStyle("MeraasAktiv_Lt", 24, 33.6),
+  [FontStyle.H6_LIGHT]: createFontStyle("MeraasAktiv_Lt", 22, 30.8),
+  [FontStyle.H7_LIGHT]: createFontStyle("MeraasAktiv_Lt", 20, 28),
+  [FontStyle.H8_LIGHT]: createFontStyle("MeraasAktiv_Lt", 18, 25.2),
+  [FontStyle.B1_BOLD]: createFontStyle("MeraasAktiv_Bd", 20, 28),
+  [FontStyle.B2_BOLD]: createFontStyle("MeraasAktiv_Bd", 18, 25.2),
+  [FontStyle.B3_BOLD]: createFontStyle("MeraasAktiv_Bd", 16, 22.4),
+  [FontStyle.B4_BOLD]: createFontStyle("MeraasAktiv_Bd", 14, 22.4),
+  [FontStyle.B1_REGULAR]: createFontStyle("MeraasAktiv_Rg", 20, 28),
+  [FontStyle.B2_REGULAR]: createFontStyle("MeraasAktiv_Rg", 18, 25.2),
+  [FontStyle.B3_REGULAR]: createFontStyle("MeraasAktiv_Rg", 16, 22.4),
+  [FontStyle.B4_REGULAR]: createFontStyle("MeraasAktiv_Rg", 14, 22.4),
+  [FontStyle.L1_BOLD]: createFontStyle("MeraasAktiv_Bd", 14, 19.6),
+  [FontStyle.L2_BOLD]: createFontStyle("MeraasAktiv_Bd", 12, 16.8),
+  [FontStyle.L3_BOLD]: createFontStyle("MeraasAktiv_Bd", 10, 14),
+  [FontStyle.L1_REGULAR]: createFontStyle("MeraasAktiv_Rg", 14, 19.6),
+  [FontStyle.L2_REGULAR]: createFontStyle("MeraasAktiv_Rg", 12, 16.8),
+  [FontStyle.L3_REGULAR]: createFontStyle("MeraasAktiv_Rg", 10, 14)
+};
+
+const CustomTypography = ({
+  variant,
+  style,
+  text,
+  testID = "CUSTOM_TYPOGRAPHY",
+  ...props
+}) => {
+  const textStyle = FONT_STYLES[variant];
+  return /* @__PURE__ */ React__default.createElement(Text, { testID, style: [textStyle, style], ...props }, text);
+};
+
+const CustomText = ({
+  text,
+  style,
+  variant,
+  textColor = "SURFACE_STATIC",
+  ...props
+}) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      variant,
+      text: text || "",
+      style: [{ color: theme[textColor] }, style],
+      ...props
+    }
+  );
+};
+var CustomText$1 = withThemeProvider(CustomText);
+
+const commonStyles = StyleSheet.create({
+  flexOne: {
+    flex: 1
+  },
+  centeredContainer: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  centerRow: {
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row"
+  }
+});
+
+const DHRE_COLORS_PRIMARY = {
+  //Black
+  DH_BLACK_25: "#C4C5C7",
+  DH_BLACK_50: "#888B8F",
+  DH_BLACK_75: "#4D5257",
+  DH_BLACK_100: "#101820",
+  //RED
+  DH_RED_25: "#EFCBC7",
+  DH_RED_50: "#E09890",
+  DH_RED_75: "#D3675B",
+  DH_RED_100: "#DA291C",
+  //GREY
+  DH_GREY_25: "#D7D9DB",
+  DH_GREY_50: "#AEB3B7",
+  DH_GREY_75: "#868D93",
+  DH_GREY_100: "#5B6770"
+};
+const DHRE_COLORS_ALERT = {
+  DH_SUCCESS_GREEN_0: "#F5FFFA",
+  DH_SUCCESS_GREEN_100: "#DFFEEE",
+  DH_SUCCESS_GREEN_200: "#99FBC7",
+  DH_SUCCESS_GREEN_300: "#72F7B0",
+  DH_SUCCESS_GREEN_400: "#53F29D",
+  DH_SUCCESS_GREEN_500: "#3CEB8D",
+  DH_SUCCESS_GREEN_600: "#2BE180",
+  DH_SUCCESS_GREEN_700: "#1FD574",
+  DH_SUCCESS_GREEN_800: "#17C669",
+  DH_SUCCESS_GREEN_900: "#12B85F",
+  DH_SUCCESS_GREEN: "#10CF68",
+  DH_SUCCESS_GREEN_ACCENT: "#00B578",
+  DH_INFO_BLUE_0: "#F5F9FF",
+  DH_INFO_BLUE_100: "#EDF3FD",
+  DH_INFO_BLUE_200: "#E0EAF9",
+  DH_INFO_BLUE_300: "#CDDCF2",
+  DH_INFO_BLUE_400: "#B3C8E9",
+  DH_INFO_BLUE_500: "#91AFDD",
+  DH_INFO_BLUE_600: "#6991CD",
+  DH_INFO_BLUE_700: "#3F6FB8",
+  DH_INFO_BLUE_800: "#1B50A0",
+  DH_INFO_BLUE_900: "#003687",
+  DH_INFO_BLUE: "#2B5FAC",
+  DH_ALERT_ORANGE_0: "#FEF6F4",
+  DH_ALERT_ORANGE_100: "#FDEDE8",
+  DH_ALERT_ORANGE_200: "#F6C6B6",
+  DH_ALERT_ORANGE_300: "#F3B39D",
+  DH_ALERT_ORANGE_400: "#EF8F6E",
+  DH_ALERT_ORANGE_500: "#ED6C43",
+  DH_ALERT_ORANGE_600: "#BC3D1D",
+  DH_ALERT_ORANGE_700: "#8D2E13",
+  DH_ALERT_ORANGE_800: "#5E1E0A",
+  DH_ALERT_ORANGE_900: "#461606",
+  DH_ALERT_ORANGE: "#FF3A00",
+  DH_WARNING_YELLOW_0: "#FFFBF5",
+  DH_WARNING_YELLOW_100: "#FEEFD4",
+  DH_WARNING_YELLOW_200: "#FBE1B2",
+  DH_WARNING_YELLOW_300: "#F5D18D",
+  DH_WARNING_YELLOW_400: "#ECBC62",
+  DH_WARNING_YELLOW_500: "#DDA338",
+  DH_WARNING_YELLOW_600: "#CD9327",
+  DH_WARNING_YELLOW_700: "#B8811B",
+  DH_WARNING_YELLOW_800: "#A06F13",
+  DH_WARNING_YELLOW_900: "#875D0E",
+  DH_WARNING_YELLOW: "#F4AE28"
+};
+const DHRE_COLORS_BG = {
+  DH_LINE_GREY_0: "#FAFAFA",
+  DH_LINE_GREY_100: "#F6F6F6",
+  DH_LINE_GREY_200: "#F1F1F1",
+  DH_LINE_GREY_300: "#EDEDED",
+  DH_LINE_GREY_400: "#EDEDED",
+  DH_LINE_GREY_500: "#CCCACA",
+  DH_LINE_GREY_600: "#B4B2B2",
+  DH_LINE_GREY_700: "#959494",
+  DH_LINE_GREY_800: "#727171",
+  DH_LINE_GREY_900: "#4D4C4C",
+  DH_GREY1: "#E8E8E8",
+  DH_BG_GREY_0: "#F5F7FF",
+  DH_BG_GREY_100: "#F2F4FD",
+  DH_BG_GREY_200: "#EDEFF9",
+  DH_BG_GREY_300: "#E5E7F2",
+  DH_BG_GREY_400: "#D9DCE9",
+  DH_BG_GREY_500: "#CACDDD",
+  DH_BG_GREY_600: "#B7BBCD",
+  DH_BG_GREY_700: "#A0A4B8",
+  DH_BG_GREY_800: "#878BA0",
+  DH_BG_GREY_900: "#6F7387",
+  DH_BG_GREY: "#F2F3F8"
+};
+const DHRE_DEFAULT = {
+  DH_LINE_GREY_0: "#FAFAFA",
+  DH_LINE_GREY_100: "#F6F6F6",
+  DH_LINE_GREY_200: "#F1F1F1",
+  DH_LINE_GREY_300: "#EDEDED",
+  DH_LINE_GREY_400: "#EDEDED",
+  DH_LINE_GREY_500: "#CCCACA",
+  DH_LINE_GREY_600: "#B4B2B2",
+  DH_LINE_GREY_700: "#959494",
+  DH_LINE_GREY_800: "#727171",
+  DH_NETURAL_GRAY_800: "#373737",
+  DH_BLUE: "#007AFF",
+  DH_BG_GREY_0: "#F5F7FF",
+  DH_BG_GREY_100: "#F2F4FD",
+  DH_BG_GREY_200: "#EDEFF9",
+  DH_BG_GREY_300: "#E5E7F2",
+  DH_BG_GREY_400: "#D9DCE9",
+  DH_BG_GREY_500: "#CACDDD",
+  DH_BG_GREY_600: "#B7BBCD",
+  DH_BG_GREY_700: "#A0A4B8",
+  DH_BG_GREY_800: "#878BA0",
+  DH_BG_GREY_900: "#6F7387",
+  DH_BG_GREY: "#F2F3F8",
+  DH_SUCESS: "#2DE3A6",
+  DH_ERROR: "#EB382D",
+  DH_INFO: "#339ECF",
+  DH_SEMENTIC_ERROR: "#EB0542",
+  DH_SEMENTIC_WARNING: "#EB8425"
+};
+const DHRE_COLORS_TEXT = {
+  //Black
+  DH_BLACK: "#000000",
+  DH_WHITE: "#FFFFFF",
+  DH_TEXTDARK: "#3A3B43",
+  DH_TEXTLIGHT: "#6C6C6C",
+  DH_TEXTLIGHTEST: "#A7A7A7",
+  DH_TEXTDISABLED: "#CCCCCC",
+  DH_LIGHTGREEN: "#00B578"
+};
+
+const styles$C = StyleSheet.create({
+  badge: {
+    backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
+    borderRadius: 15,
+    padding: verticalScale(4)
+  },
+  icon: {
+    marginHorizontal: horizontalScale(4),
+    height: verticalScale(16),
+    width: horizontalScale(16)
+  },
+  text: {
+    color: DHRE_COLORS_TEXT.DH_WHITE
+  }
+});
+
+const Badge = ({
+  text,
+  style,
+  iconName,
+  textStyle,
+  iconStyle,
+  handleIconPress
+}) => {
+  return /* @__PURE__ */ React__default.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(
+      CustomTypography,
+      {
+        variant: "B3semiBold",
+        style: [styles$C.text, textStyle],
+        text
+      }
+    )
+  );
+};
+var Badge$1 = withThemeProvider(Badge);
+
+const styles$B = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  blurView: {
+    ...StyleSheet.absoluteFillObject,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  },
+  modalContainer: {
+    flex: 0.5,
+    backgroundColor: "#000",
+    paddingTop: moderateScale(8),
+    paddingHorizontal: moderateScale(16),
+    borderTopLeftRadius: moderateScale(22),
+    borderTopRightRadius: moderateScale(22)
+  },
+  separator: {
+    height: verticalScale(3),
+    width: horizontalScale(32),
+    alignSelf: "center",
+    backgroundColor: "#A7A7A7",
+    borderRadius: moderateScale(25)
+  },
+  headerContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: verticalScale(24)
+  },
+  title: { flex: 1, color: "#fff" },
+  leftIconStyle: { marginRight: 8 },
+  rightIconStyle: { marginLeft: 8 }
+});
+
+var _path$c;
+function _extends$d() { return _extends$d = 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$d.apply(null, arguments); }
+var SvgSearchIcon = function SvgSearchIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 25,
+    fill: "none"
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+    stroke: "#A7A7A7",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.5,
+    d: "M10.875 19.469a7.875 7.875 0 1 0 0-15.75 7.875 7.875 0 0 0 0 15.75M16.444 17.163 21 21.719"
+  })));
+};
+
+var _path$b;
+function _extends$c() { return _extends$c = 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$c.apply(null, arguments); }
+var SvgCrossIcon = function SvgCrossIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 25,
+    fill: "none"
+  }, props), _path$b || (_path$b = /*#__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"
+  })));
+};
+
+var _path$a;
+function _extends$b() { return _extends$b = 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$b.apply(null, arguments); }
+var SvgCaretUp = function SvgCaretUp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 28,
+    height: 20,
+    fill: "none"
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+    stroke: "#A7A7A7",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M3.75 12.5 10 6.25l6.25 6.25"
+  })));
+};
+
+var _path$9;
+function _extends$a() { return _extends$a = 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$a.apply(null, arguments); }
+var SvgCaretDown = function SvgCaretDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 28,
+    height: 20,
+    fill: "none"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#A7A7A7",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M16.25 7.5 10 13.75 3.75 7.5"
+  })));
+};
+
+var _path$8;
+function _extends$9() { return _extends$9 = 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$9.apply(null, arguments); }
+var SvgCaretLeft = function SvgCaretLeft(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none"
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#fff",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.5,
+    d: "M15 19.5 7.5 12 15 4.5"
+  })));
+};
+
+var _path$7, _path2$1;
+function _extends$8() { return _extends$8 = 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$8.apply(null, arguments); }
+var SvgDotsThreeVertical = function SvgDotsThreeVertical(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none"
+  }, props), _path$7 || (_path$7 = /*#__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$1 || (_path2$1 = /*#__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$6;
+function _extends$7() { return _extends$7 = 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$7.apply(null, arguments); }
+var SvgCircleTick = function SvgCircleTick(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none"
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M14.03 7.22a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 1 1 1.06-1.06l1.72 1.72 4.72-4.72a.75.75 0 0 1 1.06 0M19.5 10A9.75 9.75 0 1 1 9.75.25 9.76 9.76 0 0 1 19.5 10M18 10a8.25 8.25 0 1 0-8.25 8.25A8.26 8.26 0 0 0 18 10"
+  })));
+};
+
+var _path$5;
+function _extends$6() { return _extends$6 = 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$6.apply(null, arguments); }
+var SvgArrowLeft = function SvgArrowLeft(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none"
+  }, props), _path$5 || (_path$5 = /*#__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"
+  })));
+};
+
+var _path$4;
+function _extends$5() { return _extends$5 = 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$5.apply(null, arguments); }
+var SvgBellSimple = function SvgBellSimple(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 29,
+    height: 29,
+    fill: "none"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M18.805 25.375a.68.68 0 0 1-.68.68h-7.25a.68.68 0 1 1 0-1.36h7.25a.68.68 0 0 1 .68.68m6.13-3.738a1.57 1.57 0 0 1-1.371.793H5.437a1.587 1.587 0 0 1-1.366-2.386c.64-1.103 1.593-4.214 1.593-8.263a8.836 8.836 0 0 1 17.672 0c0 4.048.954 7.16 1.595 8.263a1.57 1.57 0 0 1 .003 1.593m-1.18-.907c-.857-1.472-1.778-4.907-1.778-8.949a7.477 7.477 0 0 0-14.954 0c0 4.043-.922 7.477-1.78 8.95a.23.23 0 0 0 0 .226.22.22 0 0 0 .193.113h18.127a.22.22 0 0 0 .192-.113.23.23 0 0 0 0-.227"
+  })));
+};
+
+var _g, _defs;
+function _extends$4() { return _extends$4 = 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$4.apply(null, arguments); }
+var SvgUploadFileIcon = function SvgUploadFileIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 25,
+    fill: "none"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    clipPath: "url(#uploadFileIcon_svg__a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 14V3.5M20.25 14v6H3.75v-6M8.25 7.25 12 3.5l3.75 3.75"
+  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "uploadFileIcon_svg__a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 .5h24v24H0z"
+  })))));
+};
+
+var _path$3;
+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 SvgCaretRight = function SvgCaretRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    fill: "none"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#fff",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M6.75 3.375 12.375 9 6.75 14.625"
+  })));
+};
+
+var _path$2;
+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 SvgCheckWhite = function SvgCheckWhite(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#fff",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "m13.5 4.5-7 7L3 8"
+  })));
+};
+
+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 SvgFileIcon = function SvgFileIcon(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", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M4.5 12V3.75A.75.75 0 0 1 5.25 3h9l5.25 5.25V12"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M14.25 3v5.25h5.25M4.5 18.75H6a1.5 1.5 0 1 0 0-3H4.5v4.5M20.25 15.75h-2.625v4.5M19.875 18.375h-2.25M12 20.25a2.25 2.25 0 0 0 0-4.5h-1.312v4.5z"
+  })));
+};
+
+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 SvgTrash = function SvgTrash(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "#EB0542",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M20.25 5.25H3.75M9.75 9.75v6M14.25 9.75v6M18.75 5.25V19.5a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75V5.25M15.75 5.25v-1.5a1.5 1.5 0 0 0-1.5-1.5h-4.5a1.5 1.5 0 0 0-1.5 1.5v1.5"
+  })));
+};
+
+const BottomDrawer = ({
+  isModalVisible,
+  toggleModal,
+  children,
+  title,
+  testID = "BOTTOM-DRAWER",
+  style,
+  modalContainerStyle,
+  blurAmount = 10,
+  blurViewStyle,
+  showBlurView = true,
+  showLeftIcon = false,
+  showRightIcon = true,
+  leftIcon = /* @__PURE__ */ React__default.createElement(SvgArrowLeft, null),
+  rightIcon = /* @__PURE__ */ React__default.createElement(SvgCrossIcon, null),
+  onLeftIconPress,
+  titleStyle,
+  titleVariant = "B2_REGULAR",
+  showHeader = true
+}) => {
+  const onSwipDown = (event) => {
+    const { translationY } = event.nativeEvent;
+    if (translationY > 50) {
+      toggleModal();
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Modal,
+    {
+      animationType: "slide",
+      transparent: true,
+      visible: isModalVisible,
+      onRequestClose: toggleModal
+    },
+    /* @__PURE__ */ React__default.createElement(PanGestureHandler, { onGestureEvent: onSwipDown }, /* @__PURE__ */ React__default.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(
+        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 }, showLeftIcon && React__default.cloneElement(leftIcon, {
+        width: moderateScale(24),
+        height: moderateScale(24),
+        style: styles$B.leftIconStyle,
+        onPress: onLeftIconPress
+      }), /* @__PURE__ */ React__default.createElement(
+        CustomTypography,
+        {
+          variant: titleVariant,
+          text: title,
+          style: { ...styles$B.title, ...titleStyle }
+        }
+      ), showRightIcon && React__default.cloneElement(rightIcon, {
+        width: moderateScale(24),
+        height: moderateScale(24),
+        style: styles$B.rightIconStyle,
+        onPress: toggleModal
+      }))), children))
+    ))
+  );
+};
+
+const CustomButton = ({
+  title,
+  testID,
+  onPress,
+  containerStyle,
+  textStyle,
+  leftIcon,
+  rightIcon,
+  iconStyle,
+  titleColor,
+  titleVariant = "L2_REGULAR",
+  imagePosition = "right",
+  disabled = false,
+  disabledColor,
+  disableButtonTitleColor
+}) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      testID,
+      style: [
+        styles$A.buttonContainer,
+        containerStyle,
+        disabled ? {
+          backgroundColor: disabledColor ? disabledColor : theme.SURFACE_DISABLE
+        } : {}
+      ],
+      onPress,
+      disabled
+    },
+    imagePosition === "left" && leftIcon && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(leftIcon, { width: 20, height: 20 })),
+    /* @__PURE__ */ React__default.createElement(
+      CustomText$1,
+      {
+        text: title,
+        variant: titleVariant,
+        style: [
+          textStyle,
+          disabled ? {
+            color: disableButtonTitleColor ? disableButtonTitleColor : theme.CONTENT_DISABLE
+          } : {}
+        ],
+        textColor: titleColor
+      }
+    ),
+    imagePosition === "right" && rightIcon && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(rightIcon, { width: 20, height: 20 }))
+  );
+};
+const styles$A = StyleSheet.create({
+  buttonContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 10,
+    backgroundColor: "#000000",
+    borderRadius: 8,
+    justifyContent: "center"
+  }
+});
+var CustomButton$1 = withThemeProvider(CustomButton);
+
+const styles$z = StyleSheet.create({
+  container: {
+    padding: horizontalScale(20),
+    marginHorizontal: horizontalScale(16),
+    justifyContent: "space-between",
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE
+  },
+  topLeft: {
+    alignSelf: "flex-start",
+    paddingVertical: verticalScale(4),
+    paddingHorizontal: horizontalScale(12),
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    borderWidth: 1,
+    borderColor: DHRE_COLORS_TEXT.DH_LIGHTGREEN,
+    borderRadius: 50
+  },
+  title: {
+    color: DHRE_COLORS_TEXT.DH_LIGHTGREEN
+  },
+  subTitleBelow: {
+    marginTop: verticalScale(12),
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK
+  },
+  subtitle: {
+    letterSpacing: 0.5,
+    marginTop: verticalScale(8),
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
+  },
+  leftBottomView: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: verticalScale(8)
+  },
+  subTitleLeftBelow: {
+    letterSpacing: 0.5,
+    marginTop: verticalScale(4),
+    marginBottom: verticalScale(4),
+    marginLeft: horizontalScale(4),
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
+  },
+  button: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    paddingVertical: verticalScale(6),
+    paddingHorizontal: horizontalScale(34),
+    borderRadius: 50,
+    position: "absolute",
+    bottom: verticalScale(20),
+    right: horizontalScale(20)
+  },
+  buttonText: {
+    color: DHRE_COLORS_TEXT.DH_WHITE
+  }
+});
+
+const Cards = ({
+  topLeftTitle,
+  subtitle,
+  title,
+  iconSource,
+  buttonText,
+  iconTitle,
+  buttonShown,
+  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(
+    CustomTypography,
+    {
+      variant: "P2regular",
+      style: styles$z.title,
+      text: topLeftTitle
+    }
+  )) : null, title ? /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      variant: "H6bold",
+      style: styles$z.subTitleBelow,
+      text: title
+    }
+  ) : null, subtitle ? /* @__PURE__ */ React__default.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(
+    CustomTypography,
+    {
+      variant: "P3regular",
+      style: styles$z.subTitleLeftBelow,
+      text: iconTitle
+    }
+  ) : null), buttonShown ? /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      testID: "Button-Press",
+      style: styles$z.button,
+      onPress: onButtonPress
+    },
+    /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        variant: "B2semiBold",
+        style: styles$z.buttonText,
+        text: buttonText
+      }
+    )
+  ) : null);
+};
+
+const styles$y = StyleSheet.create({
+  checkboxContainer: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkboxImage: {
+    width: horizontalScale(18),
+    height: verticalScale(18),
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    resizeMode: "contain"
+  },
+  uncheckedCheckbox: {
+    width: horizontalScale(18),
+    height: verticalScale(18),
+    overflow: "hidden",
+    borderRadius: 1,
+    borderWidth: 1,
+    borderColor: DHRE_COLORS_TEXT.DH_BLACK
+  },
+  directionStyle: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: horizontalScale(8)
+  },
+  labelStyle: {
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK
+  }
+});
+
+const Checkbox = ({
+  isChecked,
+  onCheck,
+  labelName,
+  disable,
+  testID,
+  checkedIcon,
+  uncheckedIcon,
+  titleVariant = "L1_REGULAR",
+  titleStyle,
+  containerStyle
+}) => {
+  const [checked, setChecked] = useState(isChecked || false);
+  useEffect(() => {
+    setChecked(isChecked);
+  }, [isChecked]);
+  const handlePress = () => {
+    setChecked(!checked);
+    onCheck && onCheck(!checked);
+  };
+  return /* @__PURE__ */ React__default.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      testID: "Checkbox-Press",
+      onPress: handlePress,
+      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(
+      CustomTypography,
+      {
+        variant: titleVariant,
+        text: labelName,
+        style: titleStyle
+      }
+    )
+  ));
+};
+
+const styles$x = StyleSheet.create({
+  labelStyle: {
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
+  },
+  dropDownStyle: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    height: verticalScale(48),
+    marginTop: verticalScale(8),
+    paddingHorizontal: horizontalScale(20),
+    paddingVertical: verticalScale(12),
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    borderWidth: 1,
+    borderColor: DHRE_COLORS_BG.DH_LINE_GREY_700,
+    borderRadius: moderateScale(24)
+  },
+  selectedValueStyle: {
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK
+  },
+  optionContainer: {
+    marginTop: verticalScale(4),
+    borderRadius: moderateScale(24),
+    borderWidth: 1,
+    borderColor: DHRE_COLORS_BG.DH_GREY1
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: verticalScale(12),
+    paddingHorizontal: horizontalScale(20)
+  },
+  iconStyle: {
+    marginRight: horizontalScale(12)
+  }
+});
+
+const CustomDropdown$1 = ({
+  label,
+  placeholder = "Choose Option",
+  options,
+  selectedValue,
+  oneSelect,
+  testId = "CUSTOM-DROPDOWN",
+  iconName,
+  iconStyle,
+  upArrowIcon,
+  downArrowIcon
+}) => {
+  const [showOptions, setShowOptions] = useState(false);
+  return /* @__PURE__ */ React__default.createElement(View, { testID: testId }, /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      variant: "P3regular",
+      style: styles$x.labelStyle,
+      text: label
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      testID: `${testId}-BTN`,
+      style: styles$x.dropDownStyle,
+      onPress: () => setShowOptions(!showOptions)
+    },
+    iconName && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(iconName, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      style: styles$x.iconStyle
+    })),
+    /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        variant: "P3regular",
+        style: styles$x.selectedValueStyle,
+        text: selectedValue ? selectedValue.label : placeholder
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(View, null, showOptions ? React__default.cloneElement(upArrowIcon, {
+      width: moderateScale(24),
+      height: moderateScale(24)
+    }) : React__default.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(
+    Pressable,
+    {
+      key: id,
+      testID: `${testId}-${label2}-BTN`,
+      onPress: () => {
+        setShowOptions(!showOptions);
+        oneSelect({ id, value, label: label2 });
+      },
+      style: [
+        styles$x.item,
+        {
+          backgroundColor: id === selectedValue?.id ? DHRE_COLORS_BG.DH_GREY1 : DHRE_COLORS_TEXT.DH_WHITE
+        }
+      ]
+    },
+    iconName && /* @__PURE__ */ React__default.createElement(View, { style: iconStyle }, React__default.cloneElement(iconName, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      style: styles$x.iconStyle
+    })),
+    /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        variant: "P3regular",
+        style: {
+          color: id === selectedValue?.id ? DHRE_COLORS_TEXT.DH_BLACK : DHRE_COLORS_TEXT.DH_TEXTDARK
+        },
+        text: label2
+      }
+    )
+  ))));
+};
+
+const styles$w = StyleSheet.create({
+  labelStyle: {
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK
+  },
+  inputContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginVertical: verticalScale(8),
+    paddingHorizontal: horizontalScale(20),
+    paddingVertical: verticalScale(12),
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    borderWidth: 1,
+    borderColor: DHRE_COLORS_BG.DH_LINE_GREY_700,
+    borderRadius: moderateScale(24)
+  },
+  input: {
+    flex: 1,
+    ...FONT_STYLES.P2medium,
+    color: DHRE_COLORS_TEXT.DH_BLACK
+  },
+  inputFocused: {
+    borderColor: DHRE_COLORS_TEXT.DH_BLACK
+  },
+  inputError: {
+    borderColor: DHRE_COLORS_ALERT.DH_ALERT_ORANGE
+  },
+  inputSucess: {
+    borderColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN
+  },
+  disableInputStyle: {
+    borderColor: DHRE_COLORS_BG.DH_GREY1,
+    backgroundColor: DHRE_COLORS_BG.DH_GREY1
+    //need to check background and border color
+  },
+  disableTextStyle: {
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST
+  },
+  crossIconStyle: { marginLeft: horizontalScale(12) },
+  eyeIconStyle: { marginLeft: horizontalScale(16) },
+  searchIconStyle: { marginRight: horizontalScale(12) }
+});
+
+const CustomTextInput = ({
+  label,
+  placeholder,
+  disabled = false,
+  errorMessage,
+  successMessage,
+  testID = "CUSTOM-TEST-INPUT",
+  handleFocus,
+  handleBlur,
+  handleOnChangeText,
+  secureTextEntry = false,
+  isSearchBar = false,
+  multiline,
+  rightIcon1,
+  rightIcon2,
+  searchIcon,
+  ...props
+}) => {
+  const [value, setValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const [error, setError] = useState(!!errorMessage);
+  const [isSecureTextEntry, setIsSecureTextEntry] = useState(secureTextEntry);
+  const onFocus = () => {
+    handleFocus?.();
+    setIsFocused(true);
+    setError(false);
+  };
+  const onBlur = () => {
+    handleBlur?.();
+    if (!value) {
+      setError(true);
+    }
+    setIsFocused(false);
+  };
+  const handleIconPress1 = () => setValue("");
+  const handleIconPress2 = () => setIsSecureTextEntry(!isSecureTextEntry);
+  return /* @__PURE__ */ React__default.createElement(View, { testID }, /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      variant: "P3medium",
+      style: [styles$w.labelStyle, disabled && styles$w.disableTextStyle],
+      text: label
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    View,
+    {
+      style: [
+        styles$w.inputContainer,
+        isFocused && styles$w.inputFocused,
+        error && styles$w.inputError,
+        disabled && styles$w.disableInputStyle,
+        successMessage ? styles$w.inputSucess : {},
+        {
+          height: multiline ? 120 : 48,
+          alignItems: multiline ? "flex-start" : "center"
+        }
+      ]
+    },
+    isSearchBar && searchIcon && React__default.cloneElement(searchIcon, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      style: styles$w.searchIconStyle
+    }),
+    /* @__PURE__ */ React__default.createElement(
+      TextInput,
+      {
+        ...props,
+        onFocus,
+        onBlur,
+        style: styles$w.input,
+        placeholderTextColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
+        editable: !disabled,
+        value,
+        onChangeText: (val) => {
+          setValue(val);
+          handleOnChangeText?.(val);
+        },
+        secureTextEntry: isSecureTextEntry
+      }
+    ),
+    value && !multiline && rightIcon1 && React__default.cloneElement(rightIcon1, {
+      onPress: handleIconPress1,
+      testID: "icon1"
+    }),
+    secureTextEntry && rightIcon2 && React__default.cloneElement(rightIcon2, {
+      onPress: handleIconPress2,
+      testID: "icon2"
+    })
+  ), (error || successMessage) && /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      numberOfLines: 2,
+      variant: "P4regular",
+      style: {
+        color: successMessage ? DHRE_COLORS_ALERT.DH_SUCCESS_GREEN : DHRE_COLORS_ALERT.DH_ALERT_ORANGE
+      },
+      testID: `${testID}-message`,
+      text: successMessage || errorMessage || `Please Enter ${placeholder}`
+    }
+  ));
+};
+
+const styles$v = StyleSheet.create({
+  tooltipContainerStyle: {
+    flex: 1,
+    borderRadius: moderateScale(16),
+    padding: moderateScale(8)
+  },
+  mesageContainer: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  messageStyle: {
+    flex: 1,
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK
+  }
+});
+
+const CustomTooltip = ({
+  message,
+  children,
+  actionType = "press",
+  testId = "CUSTOM-TOOLTIP",
+  backgroundColor = DHRE_COLORS_TEXT.DH_WHITE,
+  popoverContent,
+  icon,
+  iconStyle,
+  iconColor = DHRE_COLORS_TEXT.DH_BLACK
+}) => {
+  const defaultPopoverContent = /* @__PURE__ */ React__default.createElement(View, { style: styles$v.mesageContainer, testID: testId }, /* @__PURE__ */ React__default.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(
+    Tooltip,
+    {
+      containerStyle: styles$v.tooltipContainerStyle,
+      backgroundColor,
+      popover: popoverContent || defaultPopoverContent,
+      actionType
+    },
+    children
+  );
+};
+
+const styles$u = StyleSheet.create({
+  container: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    paddingHorizontal: horizontalScale(16),
+    paddingVertical: verticalScale(24),
+    width: verticalScale(327),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    alignItems: "center"
+  },
+  title: {
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
+    marginTop: verticalScale(16)
+  },
+  description: {
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
+    textAlign: "center",
+    marginTop: verticalScale(16)
+  },
+  browse: {
+    color: DHRE_COLORS_PRIMARY.DH_RED_100,
+    textDecorationLine: "underline"
+  },
+  button: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    padding: verticalScale(12),
+    borderRadius: 20,
+    width: "40%",
+    marginTop: verticalScale(16)
+  },
+  buttonText: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+    textAlign: "center"
+  }
+});
+
+const FileUpload = ({
+  onUpload,
+  title,
+  containerStyle,
+  btnText,
+  uploadImageStyling,
+  icon,
+  iconStyle
+}) => {
+  return /* @__PURE__ */ React__default.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(
+      CustomTypography,
+      {
+        variant: "P4regular",
+        style: styles$u.description,
+        text: `Drop files directly here or `
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        variant: "P4regular",
+        style: styles$u.browse,
+        text: btnText
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        testID: "file-upload-description",
+        variant: "P4regular",
+        style: styles$u.description,
+        text: ` from your device`
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement(
+      Pressable,
+      {
+        style: styles$u.button,
+        onPress: onUpload,
+        testID: "file-upload-button"
+      },
+      /* @__PURE__ */ React__default.createElement(
+        CustomTypography,
+        {
+          variant: "B2semiBold",
+          style: styles$u.buttonText,
+          text: btnText
+        }
+      )
+    )
+  );
+};
+
+const PdfView = (props) => {
+  return /* @__PURE__ */ React__default.createElement(Pdf, { ...props });
+};
+
+const styles$t = StyleSheet.create({
+  container: {
+    padding: horizontalScale(20),
+    marginHorizontal: horizontalScale(16),
+    justifyContent: "space-between",
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE
+  },
+  subTitleBelow: {
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK
+  },
+  subtitle: {
+    letterSpacing: 0.5,
+    marginTop: verticalScale(8),
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
+    marginBottom: verticalScale(24)
+  },
+  button: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    paddingVertical: verticalScale(14),
+    paddingHorizontal: horizontalScale(34),
+    borderRadius: 50,
+    flex: 1
+  },
+  buttonText: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+    textAlign: "center"
+  },
+  buttonLeft: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingVertical: verticalScale(14),
+    paddingHorizontal: horizontalScale(34),
+    borderRadius: 50,
+    borderWidth: 1,
+    flex: 1,
+    borderColor: DHRE_COLORS_BG.DH_GREY1
+  },
+  buttonLeftText: {
+    color: DHRE_COLORS_TEXT.DH_BLACK,
+    textAlign: "center"
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    gap: horizontalScale(16),
+    justifyContent: "space-between"
+  }
+});
+
+const PopUp = ({
+  subtitle,
+  title,
+  buttonText,
+  onButtonPress,
+  testID,
+  leftButtonShown = false,
+  rightButtonShown = false
+}) => {
+  return /* @__PURE__ */ React__default.createElement(View, { testID, style: styles$t.container }, title ? /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      style: styles$t.subTitleBelow,
+      variant: "H6semiBold",
+      text: title
+    }
+  ) : null, subtitle ? /* @__PURE__ */ React__default.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(
+    Pressable,
+    {
+      testID: "Left-Button-Press",
+      style: styles$t.buttonLeft,
+      onPress: onButtonPress
+    },
+    /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        style: styles$t.buttonLeftText,
+        variant: "B2semiBold",
+        text: buttonText
+      }
+    )
+  ) : null, rightButtonShown ? /* @__PURE__ */ React__default.createElement(Pressable, { style: styles$t.button, onPress: onButtonPress }, /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      style: styles$t.buttonText,
+      variant: "B2semiBold",
+      text: buttonText
+    }
+  )) : null));
+};
+
+const CustomProgressBar = ({
+  value,
+  type,
+  width,
+  height,
+  fillColor,
+  unfilledColor,
+  borderWidth,
+  borderRadius,
+  circleSize,
+  thickness,
+  progress,
+  setProgress,
+  increment = 1,
+  // Default increment to 1
+  interval = 100,
+  // Default interval to 100ms
+  percentageText,
+  valueTextStyle
+}) => {
+  useEffect(() => {
+    const progressInterval = setInterval(() => {
+      if (progress < value) {
+        setProgress((prevProgress) => prevProgress + increment);
+      } else {
+        clearInterval(progressInterval);
+      }
+    }, interval);
+    return () => clearInterval(progressInterval);
+  }, [progress, value, increment, interval]);
+  const showPercentage = () => {
+    return /* @__PURE__ */ React__default.createElement(View, { style: styles$s.flexDirection }, /* @__PURE__ */ React__default.createElement(
+      CustomText$1,
+      {
+        text: `${value}%`,
+        variant: "B1_REGULAR",
+        textColor: "CONTENT_PRIMARY",
+        style: valueTextStyle
+      }
+    ), percentageText ? /* @__PURE__ */ React__default.createElement(
+      CustomText$1,
+      {
+        text: percentageText,
+        variant: "L3_REGULAR",
+        textColor: "CONTENT_PRIMARY"
+      }
+    ) : null);
+  };
+  const renderProgressBar = () => {
+    switch (type) {
+      case ShapeType.LINE:
+        return /* @__PURE__ */ React__default.createElement(
+          Progress.Bar,
+          {
+            progress: progress / 100,
+            width,
+            height,
+            color: fillColor,
+            unfilledColor,
+            borderWidth,
+            borderRadius,
+            testID: "custom-progress-bar-line"
+          }
+        );
+      case ShapeType.CIRCLE:
+        return /* @__PURE__ */ React__default.createElement(
+          Progress.Circle,
+          {
+            progress: progress / 100,
+            size: circleSize,
+            thickness,
+            color: fillColor,
+            unfilledColor,
+            borderWidth,
+            showsText: true,
+            formatText: showPercentage,
+            testID: "custom-progress-bar-circle"
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(View, { testID: "custom-progress-bar" }, renderProgressBar());
+};
+const styles$s = StyleSheet.create({
+  flexDirection: {
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+
+const styles$r = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  star: {
+    marginHorizontal: horizontalScale(2)
+  }
+});
+
+const splitRating = (rating) => {
+  const isDecimal = rating !== Math.floor(rating);
+  if (isDecimal) {
+    const integerPart = Math.floor(rating);
+    const decimalPart = rating - integerPart;
+    return [integerPart, decimalPart];
+  } else {
+    return [rating, 0];
+  }
+};
+const drawStar = (starIndex, ratingArray, size, fullStarIcon, halfStarIcon, fullStarColor, emptyStarColor) => {
+  const [fullStars, decimalPart] = ratingArray;
+  if (starIndex <= fullStars) {
+    return React__default.cloneElement(fullStarIcon, {
+      style: { height: size, width: size },
+      fill: fullStarColor,
+      testID: `star-${starIndex}`
+    });
+  } else if (starIndex === fullStars + 1 && decimalPart >= 0.5) {
+    return React__default.cloneElement(halfStarIcon, {
+      style: { height: size, width: size },
+      fill: fullStarColor,
+      testID: `star-${starIndex}`
+    });
+  } else {
+    return React__default.cloneElement(fullStarIcon, {
+      style: { height: size, width: size },
+      fill: emptyStarColor,
+      testID: `star-${starIndex}`
+    });
+  }
+};
+const Star = ({
+  rating,
+  count,
+  size,
+  fullStarIcon,
+  halfStarIcon,
+  fullStarColor = "gold",
+  emptyStarColor = "gray",
+  starStyle
+}) => {
+  const stars = [];
+  for (let i = 0; i < count; i++) {
+    const starIndex = i + 1;
+    const ratingArray = splitRating(rating);
+    const starType = drawStar(
+      starIndex,
+      ratingArray,
+      size,
+      fullStarIcon,
+      halfStarIcon,
+      fullStarColor,
+      emptyStarColor
+    );
+    stars.push(
+      /* @__PURE__ */ React__default.createElement(View, { key: i, style: [styles$r.star, starStyle] }, starType)
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(View, { style: styles$r.container, testID: "star" }, stars);
+};
+
+var styles$q = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: horizontalScale(5),
+    flexWrap: "wrap"
+  },
+  button: {
+    minWidth: horizontalScale(94),
+    minHeight: verticalScale(32),
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: horizontalScale(12),
+    borderRadius: moderateScale(32),
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1
+  }
+});
+
+const Tabs = ({
+  options,
+  initialSelected = [],
+  onSelectionChange,
+  style
+}) => {
+  const { theme } = useTheme();
+  const [data, setData] = useState(
+    options.map((option) => ({
+      title: option,
+      id: option,
+      isSelected: initialSelected?.includes(option)
+    }))
+  );
+  const handlePress = (id) => {
+    const updatedData = data?.map(
+      (item) => item?.id === id ? { ...item, isSelected: !item?.isSelected } : item
+    );
+    setData(updatedData);
+    const selectedTabs = updatedData.filter((item) => item?.isSelected).map((item) => item?.id);
+    if (onSelectionChange) {
+      onSelectionChange(selectedTabs);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(View, { style: [styles$q.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      key: id,
+      style: {
+        ...styles$q.button,
+        backgroundColor: isSelected ? theme.CONTENT_PRIMARY : theme.CONTENT_INVERTED,
+        borderColor: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_SECONDRY
+      },
+      onPress: () => handlePress(id)
+    },
+    /* @__PURE__ */ React__default.createElement(
+      CustomText$1,
+      {
+        variant: FontStyle.L2_REGULAR,
+        style: {
+          color: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_SECONDRY
+        },
+        text: title
+      }
+    )
+  )));
+};
+var Tabs$1 = withThemeProvider(Tabs);
+
+const styles$p = StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  contentContainer: {
+    flexWrap: "wrap",
+    flexDirection: "row"
+  },
+  tag: {
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: horizontalScale(12),
+    borderRadius: 20,
+    margin: horizontalScale(8),
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  selectedTag: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK
+  },
+  tagText: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+    marginRight: horizontalScale(8)
+  },
+  tagUnSelected: {
+    backgroundColor: DHRE_COLORS_BG.DH_GREY1
+  },
+  tagUnselectedText: {
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
+  }
+});
+
+const Tags = ({
+  tags,
+  tagStyles,
+  handleSetSelectedTagsOptions,
+  handleTagsChange,
+  testID,
+  icon,
+  iconStyle
+}) => {
+  const [selectedTags, setSelectedTags] = useState([]);
+  const toggleTag = (tag) => {
+    setSelectedTags((prevSelectedTags) => {
+      const selectedTagsSet = new Set(prevSelectedTags);
+      selectedTagsSet.has(tag) ? selectedTagsSet.delete(tag) : selectedTagsSet.add(tag);
+      handleSetSelectedTagsOptions([...selectedTagsSet]);
+      return [...selectedTagsSet];
+    });
+  };
+  const removeTag = (tag) => {
+    setSelectedTags(
+      (prevSelectedTags) => prevSelectedTags.filter((t) => t !== tag)
+    );
+    handleTagsChange(tag);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    ScrollView,
+    {
+      testID,
+      style: styles$p.container,
+      contentContainerStyle: styles$p.contentContainer,
+      horizontal: false
+    },
+    tags?.map((tag) => /* @__PURE__ */ React__default.createElement(
+      Pressable,
+      {
+        testID: `${testID}-${tag}-BTN`,
+        key: tag,
+        onPress: () => toggleTag(tag),
+        style: [
+          styles$p.tag,
+          tagStyles,
+          selectedTags.includes(tag) ? styles$p.selectedTag : styles$p.tagUnSelected
+        ]
+      },
+      /* @__PURE__ */ React__default.createElement(
+        CustomTypography,
+        {
+          variant: selectedTags.includes(tag) ? "H9semiBold" : "P4regular",
+          style: selectedTags.includes(tag) ? styles$p.tagText : styles$p.tagUnselectedText,
+          text: tag
+        }
+      ),
+      selectedTags.includes(tag) && icon && /* @__PURE__ */ React__default.createElement(
+        Pressable,
+        {
+          testID: `${testID}-${tag}-PRESS`,
+          onPress: () => removeTag(tag)
+        },
+        React__default.cloneElement(icon, { style: [icon.props.style, iconStyle] })
+      )
+    ))
+  );
+};
+
+const styles$o = StyleSheet.create({
+  container: {
+    width: horizontalScale(70),
+    height: verticalScale(25),
+    borderRadius: 15,
+    justifyContent: "center"
+  },
+  track: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: "center",
+    borderRadius: 15
+  },
+  thumb: {
+    position: "absolute",
+    width: horizontalScale(20),
+    height: verticalScale(20),
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    left: horizontalScale(2)
+  },
+  text: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+    textAlign: "left",
+    marginHorizontal: horizontalScale(10)
+  },
+  textRight: {
+    textAlign: "right"
+  }
+});
+
+const CustomSwitch = ({
+  onValueChange,
+  value,
+  type = ToggleButtonType.LARGE,
+  trackWidth = type !== ToggleButtonType.SMALL ? 35 : 15,
+  width = type !== ToggleButtonType.SMALL ? 60 : 40
+}) => {
+  const [isOn, setIsOn] = useState(value);
+  const animatedValue = useRef(
+    new Animated.Value(value ? trackWidth : 0)
+  ).current;
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: isOn ? trackWidth : 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  }, [isOn, animatedValue, trackWidth]);
+  const toggleSwitch = () => {
+    setIsOn(!isOn);
+    onValueChange(!isOn);
+  };
+  const animatedStyle = {
+    transform: [{ translateX: animatedValue }]
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      onPress: toggleSwitch,
+      style: [styles$o.container, { width }],
+      testID: "custom-switch"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      View,
+      {
+        style: [
+          styles$o.track,
+          {
+            backgroundColor: isOn ? DHRE_COLORS_ALERT.DH_SUCCESS_GREEN_ACCENT : DHRE_COLORS_TEXT.DH_TEXTDISABLED
+          }
+        ]
+      },
+      /* @__PURE__ */ React__default.createElement(Animated.View, { style: [styles$o.thumb, animatedStyle] }),
+      type !== ToggleButtonType.SMALL && /* @__PURE__ */ React__default.createElement(
+        CustomTypography,
+        {
+          variant: "B3semiBold",
+          style: [
+            styles$o.text,
+            { textAlign: isOn ? TextDirectType.left : TextDirectType.right }
+          ],
+          text: isOn ? ToggleTextType.ON : ToggleTextType.OFF
+        }
+      )
+    )
+  );
+};
+
+const styles$n = StyleSheet.create({
+  container: {
+    paddingVertical: verticalScale(24),
+    borderBottomWidth: moderateScale(1),
+    borderBottomColor: "#282828"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: horizontalScale(24)
+  },
+  title: { flex: 1, color: "#FFFFFF" },
+  iconStyle: { marginLeft: horizontalScale(20) },
+  content: {
+    overflow: "scroll",
+    marginTop: verticalScale(16)
+  }
+});
+
+const Accordion = ({
+  title,
+  testId = "ACCORDION",
+  containerStyle,
+  titleStyle,
+  headerStyle,
+  children,
+  isOpen,
+  onToggle,
+  optionalElement,
+  // Destructure the new prop,
+  headerComponent,
+  disabled = false
+}) => {
+  const contentRef = useRef(null);
+  const [animation] = useState(new Animated.Value(0));
+  const [contentHeight, setContentHeight] = useState(0);
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.measure((x, y, width, height) => {
+        setContentHeight(height);
+      });
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    Animated.timing(animation, {
+      toValue: isOpen ? 1 : 0,
+      duration: 300,
+      useNativeDriver: false
+    }).start();
+  }, [isOpen]);
+  const cardHeight = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, contentHeight]
+  });
+  return /* @__PURE__ */ React__default.createElement(View, { style: [styles$n.container, containerStyle], testID: testId }, /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      style: [styles$n.header, headerStyle, disabled && { opacity: 0.5 }],
+      onPress: !disabled ? onToggle : void 0
+    },
+    headerComponent ? headerComponent() : /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        variant: "B4_REGULAR",
+        text: title,
+        style: [styles$n.title, titleStyle]
+      }
+    ),
+    React__default.cloneElement(isOpen ? /* @__PURE__ */ React__default.createElement(SvgCaretUp, null) : /* @__PURE__ */ React__default.createElement(SvgCaretDown, null), {
+      width: moderateScale(20),
+      height: moderateScale(20),
+      style: styles$n.iconStyle
+    })
+  ), optionalElement ? optionalElement() : null, isOpen && /* @__PURE__ */ React__default.createElement(Animated.View, { style: [styles$n.content, { height: cardHeight }] }, /* @__PURE__ */ React__default.createElement(
+    View,
+    {
+      ref: contentRef,
+      onLayout: (event) => {
+        setContentHeight(event.nativeEvent.layout.height);
+      }
+    },
+    children
+  )));
+};
+
+const styles$m = StyleSheet.create({
+  container: {
+    position: "absolute",
+    alignSelf: "center",
+    height: verticalScale(72),
+    width: width$1 - horizontalScale(32),
+    top: 56,
+    borderRadius: moderateScale(8),
+    overflow: "hidden"
+  },
+  toastContainer: { flex: 1, justifyContent: "center" },
+  innerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: horizontalScale(12)
+  },
+  icon: {
+    marginRight: 9
+  },
+  messageText: {
+    flex: 1,
+    color: "#fff"
+  },
+  button: {
+    marginLeft: 9
+  },
+  buttonText: {
+    textDecorationLine: "underline",
+    color: "#fff"
+  }
+});
+
+const Toast = React__default.forwardRef((_props, ref) => {
+  const [visible, setVisible] = useState(false);
+  const [message, setMessage] = useState("");
+  const [isSuccess, setIsSuccess] = useState(true);
+  const [btnText, setBtnText] = useState(null);
+  const [onBtnPress, setOnBtnPress] = useState(null);
+  const [progress, setProgress] = useState(0);
+  const bottom = useRef(new Animated.Value(-80)).current;
+  const showToast = (toastMessage, duration = 3e3, success = true, buttonText = null, buttonAction = null) => {
+    setMessage(toastMessage);
+    setIsSuccess(success);
+    setBtnText(buttonText);
+    setOnBtnPress(() => buttonAction);
+    setVisible(true);
+    Animated.timing(bottom, {
+      toValue: 20,
+      duration: 500,
+      useNativeDriver: false
+    }).start();
+    setTimeout(() => {
+      hideToast();
+    }, duration);
+  };
+  const hideToast = () => {
+    Animated.timing(bottom, {
+      toValue: -80,
+      duration: 500,
+      useNativeDriver: false
+    }).start(() => {
+      setVisible(false);
+      setMessage("");
+    });
+  };
+  const simulateProgress = () => {
+    setProgress((prev) => prev + 0.1 > 1 ? 1 : prev + 0.1);
+  };
+  useEffect(() => {
+    if (visible) {
+      setProgress(0);
+      const interval = setInterval(simulateProgress, 180);
+      return () => clearInterval(interval);
+    }
+  }, [visible]);
+  React__default.useImperativeHandle(ref, () => ({
+    showToast
+  }));
+  return visible ? /* @__PURE__ */ React__default.createElement(
+    Animated.View,
+    {
+      style: [
+        styles$m.container,
+        { bottom },
+        { backgroundColor: isSuccess ? "#04743F" : "#DB3056" }
+      ],
+      testID: "TOAST"
+    },
+    /* @__PURE__ */ React__default.createElement(View, { style: styles$m.toastContainer }, /* @__PURE__ */ React__default.createElement(View, { style: styles$m.innerContainer }, isSuccess ? /* @__PURE__ */ React__default.createElement(SvgCircleTick, null) : /* @__PURE__ */ React__default.createElement(SvgCrossIcon, null), /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        variant: "L2_REGULAR",
+        text: message,
+        style: styles$m.messageText
+      }
+    ), btnText && /* @__PURE__ */ React__default.createElement(
+      Pressable,
+      {
+        style: styles$m.button,
+        onPress: onBtnPress || void 0,
+        testID: "TOAST-BTN"
+      },
+      /* @__PURE__ */ React__default.createElement(
+        CustomTypography,
+        {
+          variant: "L2_BOLD",
+          text: btnText,
+          style: styles$m.buttonText
+        }
+      )
+    ))),
+    /* @__PURE__ */ React__default.createElement(
+      Progress.Bar,
+      {
+        progress,
+        width: width$1 - horizontalScale(48),
+        height: 3,
+        color: isSuccess ? "#024324" : "#851D41",
+        borderColor: "transparent"
+      }
+    )
+  ) : null;
+});
+Toast.displayName = "Toast";
+
+const styles$l = StyleSheet.create({
+  inputContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: horizontalScale(16),
+    borderRadius: moderateScale(8),
+    borderWidth: moderateScale(1)
+  },
+  input: {
+    flex: 1,
+    ...FONT_STYLES.L1_REGULAR,
+    color: "#fff"
+  },
+  crossIconStyle: { marginLeft: horizontalScale(8) },
+  searchIconStyle: { marginRight: horizontalScale(8) }
+});
+
+const CustomSearchBar = ({
+  value,
+  height = 40,
+  disabled = false,
+  testID = "CUSTOM-SEARCH-BAR",
+  inputContainerStyle,
+  searchIconStyle,
+  crossIconStyle,
+  inputStyle,
+  onSearchIconPress,
+  onCrossIconPress,
+  handleOnChangeText,
+  setValue,
+  rightIcon = /* @__PURE__ */ React__default.createElement(SvgCrossIcon, null),
+  disableBorderColor = "#4F4F4F",
+  borderColor = "#FFFFFF",
+  disablePlaceHolderStyle = "#686868",
+  enablePlaceHolderStyle = "#A7A7A7",
+  ...props
+}) => {
+  return /* @__PURE__ */ React__default.createElement(
+    View,
+    {
+      testID,
+      style: [
+        styles$l.inputContainer,
+        {
+          height: verticalScale(height),
+          borderColor: disabled ? disableBorderColor : value ? borderColor : "#A7A7A7"
+        },
+        inputContainerStyle
+      ]
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Pressable,
+      {
+        onPress: () => {
+          console.log("Search icon pressed");
+          onSearchIconPress?.();
+        },
+        style: searchIconStyle
+      },
+      React__default.cloneElement(/* @__PURE__ */ React__default.createElement(SvgSearchIcon, null), {
+        width: moderateScale(24),
+        height: moderateScale(24),
+        style: [styles$l.searchIconStyle, searchIconStyle]
+      })
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      TextInput,
+      {
+        ...props,
+        testID: `${testID}-INPUT`,
+        style: [styles$l.input, inputStyle],
+        editable: !disabled,
+        value,
+        placeholderTextColor: disabled ? disablePlaceHolderStyle : enablePlaceHolderStyle,
+        onChangeText: (val) => {
+          setValue(val);
+          handleOnChangeText?.(val);
+        }
+      }
+    ),
+    value && /* @__PURE__ */ React__default.createElement(
+      Pressable,
+      {
+        onPress: () => {
+          setValue("");
+          onCrossIconPress?.();
+        },
+        style: crossIconStyle
+      },
+      React__default.cloneElement(rightIcon, {
+        // width: moderateScale(24),
+        // height: moderateScale(24),
+        style: [styles$l.crossIconStyle, crossIconStyle]
+      })
+    )
+  );
+};
+
+const styles$k = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingHorizontal: horizontalScale(16),
+    paddingTop: verticalScale(74),
+    paddingBottom: verticalScale(16),
+    backgroundColor: "#212121",
+    borderBottomWidth: 1,
+    borderBottomColor: "#282828"
+  },
+  headderContainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  headerTitle: {
+    color: "#FFFFFF"
+  },
+  leftIconStyle: { marginRight: horizontalScale(9) },
+  rightIconStyle: { marginLeft: horizontalScale(8) }
+});
+
+const CustomHeader = ({
+  title,
+  testId = "CUSTOM-HEADER",
+  leftIcon = /* @__PURE__ */ React__default.createElement(SvgCaretLeft, null),
+  rightIcon = /* @__PURE__ */ React__default.createElement(SvgDotsThreeVertical, null),
+  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, {
+    width: moderateScale(24),
+    height: moderateScale(24),
+    onPress: onLeftPress,
+    style: styles$k.leftIconStyle
+  }), /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      variant: "B2_REGULAR",
+      text: title,
+      style: styles$k.headerTitle
+    }
+  )), showRightIcon && React__default.cloneElement(rightIcon, {
+    width: moderateScale(24),
+    height: moderateScale(24),
+    onPress: onRightPress,
+    style: styles$k.rightIconStyle
+  }));
+};
+
+const styles$j = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  swippableContainer: { paddingVertical: verticalScale(16) },
+  actionButton: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  titleStyle: {
+    color: "#fff"
+  },
+  leftActions: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    width: horizontalScale(150),
+    gap: horizontalScale(24)
+  },
+  rightActions: {
+    flexDirection: "row",
+    paddingHorizontal: horizontalScale(24)
+  },
+  seprator: {
+    height: verticalScale(16)
+  }
+});
+
+const SwipableList = (props) => {
+  const {
+    data,
+    testId = "SWIPABLE-LIST",
+    leftPrimaryActionActiveIcon,
+    leftPrimaryActionInActiveIcon,
+    leftPrimaryActionActiveTitle,
+    leftPrimaryActionInActiveTitle,
+    leftSecondaryActionActiveIcon,
+    leftSecondaryActionInActiveIcon,
+    leftSecondaryActionActiveTitle,
+    leftSecondaryActionInActiveTitle,
+    leftPrimaryActionHandler,
+    leftPrimaryActionStyle,
+    leftSecondaryActionHandler,
+    leftSecondaryActionStyle,
+    rightPrimaryActionIcon,
+    rightPrimaryActionTitle,
+    rightPrimaryActionHandler,
+    rightPrimaryActionStyle,
+    titleStyle
+  } = props;
+  const ActionButton = ({
+    icon,
+    title,
+    onPress,
+    style,
+    testID
+  }) => /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      testID,
+      onPress,
+      style: [styles$j.actionButton, style]
+    },
+    icon,
+    /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        variant: "L1_REGULAR",
+        style: [styles$j.titleStyle, titleStyle],
+        text: title
+      }
+    )
+  );
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default.createElement(View, { style: [styles$j.leftActions, leftPrimaryActionStyle] }, leftPrimaryActionIcon && /* @__PURE__ */ React__default.createElement(
+    ActionButton,
+    {
+      icon: leftPrimaryActionIcon,
+      title: leftPrimaryActionTitle,
+      onPress: () => leftPrimaryActionHandler?.(item),
+      style: leftPrimaryActionStyle,
+      testID: `${testId}-LEFT-PRIMARY-${item.id}`
+    }
+  ), leftSecondaryActionIcon && /* @__PURE__ */ React__default.createElement(
+    ActionButton,
+    {
+      icon: leftSecondaryActionIcon,
+      title: leftSecondaryActionTitle,
+      onPress: () => leftSecondaryActionHandler?.(item),
+      style: leftSecondaryActionStyle,
+      testID: `${testId}-LEFT-SECONDARY-${item.id}`
+    }
+  ));
+  const rightActionHandle = (item) => /* @__PURE__ */ React__default.createElement(View, { style: [styles$j.rightActions, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default.createElement(
+    ActionButton,
+    {
+      icon: rightPrimaryActionIcon,
+      title: rightPrimaryActionTitle || "",
+      onPress: () => rightPrimaryActionHandler?.(item),
+      style: rightPrimaryActionStyle,
+      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(
+    Swipeable,
+    {
+      renderLeftActions: () => leftActionHandle(
+        item,
+        item.isPinned ? leftPrimaryActionInActiveIcon : leftPrimaryActionActiveIcon,
+        item.isPinned ? leftPrimaryActionInActiveTitle : leftPrimaryActionActiveTitle,
+        item.isRead ? leftSecondaryActionInActiveIcon : leftSecondaryActionActiveIcon,
+        item.isRead ? leftSecondaryActionInActiveTitle : leftSecondaryActionActiveTitle
+      ),
+      renderRightActions: () => rightActionHandle(item),
+      containerStyle: styles$j.swippableContainer
+    },
+    props?.renderItem(item)
+  ));
+  return /* @__PURE__ */ React__default.createElement(View, { testID: testId }, /* @__PURE__ */ React__default.createElement(
+    FlatList,
+    {
+      data,
+      renderItem,
+      keyExtractor: (item) => item.id,
+      ItemSeparatorComponent: () => /* @__PURE__ */ React__default.createElement(View, { style: styles$j.seprator })
+    }
+  ));
+};
+
+const styles$i = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  title: {
+    color: "#000"
+  }
+});
+
+const CustomIcon = ({
+  icon,
+  title,
+  titleVariant = "L1_REGULAR",
+  testId = "CUSTOM-ICON",
+  onPress,
+  containerStyle,
+  titleStyle
+}) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      style: [styles$i.container, containerStyle],
+      onPress,
+      testID: testId
+    },
+    icon,
+    title && /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        variant: titleVariant,
+        text: title,
+        style: [styles$i.title, titleStyle]
+      }
+    )
+  );
+};
+
+const styles$h = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "transparent",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    zIndex: 1e3
+  }
+});
+
+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" }));
+};
+
+const HorizontalLine = ({ style }) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React__default.createElement(
+    View,
+    {
+      style: [
+        styles$g.line,
+        { backgroundColor: theme["SURFACE_SECONDARY"] },
+        style
+      ]
+    }
+  );
+};
+const styles$g = StyleSheet.create({
+  line: {
+    height: 1,
+    width: "100%"
+  }
+});
+var Line = withThemeProvider(HorizontalLine);
+
+const Topic = ({
+  rightIcon,
+  onPress,
+  title,
+  subTitle,
+  containterStyle
+}) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React__default.createElement(
+    TouchableOpacity,
+    {
+      style: [
+        styles$f.button,
+        { backgroundColor: theme["SURFACE_SECONDARY"] },
+        containterStyle
+      ],
+      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(
+      CustomText$1,
+      {
+        text: subTitle,
+        variant: "L3_REGULAR",
+        textColor: "CONTENT_PRIMARY"
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      CustomText$1,
+      {
+        text: title,
+        variant: "L1_REGULAR",
+        textColor: "CONTENT_PRIMARY"
+      }
+    ))
+  );
+};
+const styles$f = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 75,
+    width: 158,
+    borderRadius: 10,
+    marginLeft: 12,
+    marginVertical: 14
+  },
+  iconContainer: {
+    marginHorizontal: 16
+  },
+  textContainer: {
+    flex: 1,
+    position: "absolute",
+    padding: 10,
+    bottom: 0,
+    marginHorizontal: 8,
+    marginTop: 20
+  },
+  titleText: {
+    marginBottom: 4
+  },
+  rightIconContainer: {
+    position: "absolute",
+    left: 16,
+    top: 10
+  }
+});
+var Topic$1 = withThemeProvider(Topic);
+
+const ContactModal = ({
+  phoneNumber,
+  visible,
+  onClose,
+  isMailOpen,
+  data
+}) => {
+  const handleCall = () => {
+    if (Platform.OS === "ios") {
+      Alert.alert("Phone calls are not supported on the iOS simulator.");
+    } else {
+      Linking.openURL(`tel:${phoneNumber}`);
+    }
+    onClose();
+  };
+  const openEmail = (recipient) => {
+    const mailtoUrl = `mailto:${recipient}?subject=${encodeURIComponent(
+      ""
+    )}&body=${encodeURIComponent("")}`;
+    if (Platform.OS === "android") {
+      const gmailUrl = `intent://#Intent;scheme=mailto;package=com.google.android.gm;S.to=${recipient};S.subject=${encodeURIComponent(
+        ""
+      )};S.body=${encodeURIComponent("")};end`;
+      Linking.canOpenURL(gmailUrl).then((supported) => {
+        if (supported) {
+          return Linking.openURL(gmailUrl);
+        } else {
+          console.log("Gmail app not available, opening default mail app");
+          return Linking.openURL(mailtoUrl);
+        }
+      }).catch((err) => console.error("Error:", err));
+    } else {
+      Linking.canOpenURL(mailtoUrl).then((supported) => {
+        if (!supported) {
+          console.log("No email client available");
+        } else {
+          return Linking.openURL(mailtoUrl);
+        }
+      }).catch((err) => console.error("Error:", err));
+    }
+  };
+  const handleOptionPress = () => {
+    openEmail(data);
+    onClose();
+  };
+  const emailOptions = ["Mail", "Gmail", "Outlook"];
+  const renderEmailOptions = () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    CustomText$1,
+    {
+      style: styles$e.title,
+      text: "Open email app",
+      variant: "L2_REGULAR"
+    }
+  ), /* @__PURE__ */ React__default.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(
+    Pressable,
+    {
+      onPress: () => handleOptionPress(),
+      style: styles$e.optionButton
+    },
+    /* @__PURE__ */ React__default.createElement(
+      CustomText$1,
+      {
+        style: styles$e.optionText,
+        text: option,
+        variant: "B3_BOLD"
+      }
+    )
+  ))));
+  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(
+    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(
+    CustomText$1,
+    {
+      style: styles$e.cancelText,
+      text: "Cancel",
+      variant: "B2_REGULAR"
+    }
+  )));
+  return /* @__PURE__ */ React__default.createElement(View, { style: styles$e.container }, /* @__PURE__ */ React__default.createElement(
+    Modal,
+    {
+      animationType: "slide",
+      transparent: true,
+      visible,
+      onRequestClose: onClose
+    },
+    /* @__PURE__ */ React__default.createElement(View, { style: styles$e.modalContainer }, /* @__PURE__ */ React__default.createElement(View, { style: styles$e.modalContent }, renderContent()))
+  ));
+};
+const styles$e = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, .7)"
+  },
+  modalContent: {
+    padding: 20,
+    width: "100%",
+    alignItems: "center",
+    marginHorizontal: 20,
+    borderRadius: 10
+  },
+  viewContainer: {
+    width: "100%",
+    backgroundColor: "#1C1C1E",
+    borderRadius: 10
+  },
+  cancelText: {
+    color: "#007AFF"
+  },
+  title: {
+    textAlign: "center",
+    marginTop: 13
+  },
+  subtitle: {
+    textAlign: "center",
+    marginTop: 2,
+    marginBottom: 13
+  },
+  optionButton: {
+    padding: 16,
+    borderRadius: 8,
+    alignItems: "center"
+  },
+  optionText: {
+    fontSize: 16,
+    color: "#007AFF"
+  },
+  cancelButton: {
+    marginTop: 10,
+    paddingVertical: 15,
+    alignItems: "center",
+    borderRadius: 8,
+    backgroundColor: "#1C1C1E",
+    width: "100%"
+  }
+});
+var ContactModel = withThemeProvider(ContactModal);
+
+const styles$d = StyleSheet.create({
+  applyButton: {
+    marginTop: verticalScale(24),
+    height: verticalScale(48),
+    alignItems: "center",
+    borderRadius: moderateScale(25),
+    backgroundColor: "#fff"
+  },
+  applyButtonText: {
+    color: "#000",
+    ...FONT_STYLES.L1_REGULAR
+  }
+});
+
+const DateRangePicker = (props) => {
+  const { onButtonPress } = props;
+  const [selectedRange, setSelectedRange] = useState({
+    startDate: "",
+    endDate: ""
+  });
+  const onDayPress = (day) => {
+    const { dateString } = day;
+    const { startDate, endDate } = selectedRange;
+    if (!startDate || startDate && endDate) {
+      setSelectedRange({ startDate: dateString, endDate: "" });
+    } else if (startDate && !endDate) {
+      if (new Date(dateString) >= new Date(startDate)) {
+        setSelectedRange({ startDate, endDate: dateString });
+      } else {
+        setSelectedRange({ startDate: dateString, endDate: "" });
+      }
+    }
+  };
+  const getMarkedDates = () => {
+    const { startDate, endDate } = selectedRange;
+    const markedDates = {};
+    if (startDate) {
+      markedDates[startDate] = {
+        startingDay: true,
+        color: "#2DE3A6",
+        textColor: "#000000"
+      };
+    }
+    if (endDate) {
+      markedDates[endDate] = {
+        endingDay: true,
+        color: "#2DE3A6",
+        textColor: "#000000"
+      };
+    }
+    if (startDate && endDate) {
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+      while (start < end) {
+        start.setDate(start.getDate() + 1);
+        markedDates[start.toISOString().split("T")[0]] = {
+          color: "#2DE3A6",
+          textColor: "#000000"
+        };
+      }
+    }
+    return markedDates;
+  };
+  const isButtonDisabled = !selectedRange.startDate || !selectedRange.endDate;
+  return /* @__PURE__ */ React__default.createElement(View, null, /* @__PURE__ */ React__default.createElement(
+    Calendar,
+    {
+      markedDates: getMarkedDates(),
+      mode: "date",
+      markingType: "period",
+      theme: {
+        calendarBackground: "transparent",
+        arrowColor: "#fff",
+        monthTextColor: "#FFFFFF",
+        dayTextColor: "#A7A7A7",
+        todayTextColor: "#2DE3A6"
+      },
+      style: {
+        backgroundColor: "transparent",
+        color: "#A7A7A7"
+      },
+      onDayPress,
+      ...props
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    CustomButton$1,
+    {
+      title: "Apply",
+      onPress: () => {
+        onButtonPress(selectedRange?.startDate, selectedRange?.endDate);
+      },
+      containerStyle: styles$d.applyButton,
+      textStyle: styles$d.applyButtonText,
+      disabled: isButtonDisabled
+    }
+  ));
+};
+
+const OurOfficesButton = ({
+  leftIcon,
+  rightIcon,
+  onPress,
+  title,
+  description,
+  containerStyle,
+  titleVariant = "L1_REGULAR",
+  descriptionVariant = "L1_REGULAR",
+  titleColor = "CONTENT_PRIMARY",
+  descriptionColor = "CONTENT_SECONDARY"
+}) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React__default.createElement(
+    TouchableOpacity,
+    {
+      style: [
+        styles$c.button,
+        { backgroundColor: theme["SURFACE_SECONDARY"] },
+        containerStyle
+      ],
+      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(
+      CustomText$1,
+      {
+        text: title,
+        variant: titleVariant,
+        textColor: titleColor,
+        style: styles$c.textView
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      CustomText$1,
+      {
+        text: description,
+        variant: descriptionVariant,
+        textColor: descriptionColor,
+        style: styles$c.flexWrap
+      }
+    )),
+    rightIcon && /* @__PURE__ */ React__default.createElement(View, { style: styles$c.rightIconContainer }, React__default.cloneElement(rightIcon))
+  );
+};
+const styles$c = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 10
+  },
+  iconContainer: {
+    marginHorizontal: 16
+  },
+  textContainer: {
+    flex: 1,
+    padding: 10,
+    borderRadius: 4
+  },
+  rightIconContainer: {
+    marginLeft: 10,
+    position: "absolute",
+    right: 10
+  },
+  textView: { marginBottom: 4 },
+  flexWrap: { flexWrap: "wrap" }
+});
+var OurOffices = withThemeProvider(OurOfficesButton);
+
+const styles$b = StyleSheet.create({
+  iconContainer: {
+    position: "relative",
+    alignItems: "center"
+  },
+  badge: {
+    position: "absolute",
+    top: -5,
+    right: -5,
+    minWidth: 20,
+    height: 20,
+    borderRadius: 10,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#F5524A"
+  },
+  badgeText: {
+    ...FONT_STYLES.L3_BOLD,
+    color: "#fff"
+  }
+});
+
+const NotificationBandge = ({
+  notificationCount = 0
+}) => {
+  if (notificationCount <= 0) {
+    return /* @__PURE__ */ React__default.createElement(SvgBellSimple, null);
+  }
+  return /* @__PURE__ */ React__default.createElement(View, { style: styles$b.iconContainer }, /* @__PURE__ */ React__default.createElement(SvgBellSimple, null), /* @__PURE__ */ React__default.createElement(View, { style: styles$b.badge }, /* @__PURE__ */ React__default.createElement(Text, { style: [styles$b.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
+};
+
+const ScrollableList = ({
+  data,
+  handleSelectCategory,
+  containerStyle,
+  scrollViewContentStyle,
+  itemStyle,
+  selectedItemStyle,
+  selectedItemTextColor = "CONTENT_PRIMARY",
+  defaultItemTextColor = "CONTENT_SECONDRY",
+  activeTab
+}) => {
+  const [selectedItem, setSelectedItem] = useState(
+    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(
+    ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [
+        styles$a.scrollViewContent,
+        scrollViewContentStyle
+      ]
+    },
+    data?.map((item) => /* @__PURE__ */ React__default.createElement(
+      Pressable,
+      {
+        key: item.value,
+        style: [
+          styles$a.item,
+          itemStyle,
+          (activeTab ?? selectedItem) === item.name && [
+            styles$a.selectedItem,
+            selectedItemStyle
+          ]
+        ],
+        onPress: () => {
+          setSelectedItem(item.name);
+          handleSelectCategory(item.name, item.value);
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        CustomText$1,
+        {
+          text: item.name,
+          variant: "L1_REGULAR",
+          textColor: (activeTab ?? selectedItem) === item.name ? selectedItemTextColor : defaultItemTextColor
+        }
+      ),
+      item?.isError && /* @__PURE__ */ React__default.createElement(
+        View,
+        {
+          style: [
+            styles$a.errorViewStyle,
+            {
+              backgroundColor: theme.SURFACE_BRAND_STATIC
+            }
+          ]
+        }
+      )
+    ))
+  ));
+};
+const styles$a = StyleSheet.create({
+  container: {
+    paddingVertical: 10
+  },
+  scrollViewContent: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 12,
+    borderBottomWidth: 2,
+    borderBottomColor: "transparent"
+  },
+  selectedItem: {
+    borderBottomColor: "white"
+  },
+  errorViewStyle: {
+    width: 6,
+    height: 6,
+    borderRadius: 100
+  }
+});
+var category = withThemeProvider(ScrollableList);
+
+const styles$9 = 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 FeedbackForm = ({
+  title,
+  clearAllData,
+  handleSendFeedback,
+  feedback,
+  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(
+    TextInput,
+    {
+      style: [styles$9.textInput, { height: Math.max(100) }],
+      placeholder: "Would you like to tell us more...",
+      placeholderTextColor: "gray",
+      multiline: true,
+      maxLength: maxChars,
+      value: feedback,
+      onChangeText: (text) => setFeedback(text)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    CustomText$1,
+    {
+      text: `${feedback.length}/${maxChars} characters`,
+      variant: "L2_REGULAR",
+      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(
+    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(
+    CustomText$1,
+    {
+      text: "Cancel",
+      variant: "L1_REGULAR",
+      textColor: "CONTENT_PRIMARY"
+    }
+  ))));
+};
+
+const DEFAULT_COUNTRY_CODE = "AE";
+const DEFAULT_CALLING_CODE = "+971";
+
+const CountryDropDown = ({
+  defaultCountryCode = DEFAULT_COUNTRY_CODE,
+  defaultCallingCode = DEFAULT_CALLING_CODE,
+  placeholder,
+  onChangeText,
+  value,
+  containerStyle,
+  inputStyle,
+  countryPickerStyle,
+  callingCodeStyle,
+  getCountryCode,
+  maxLength,
+  errorMessage,
+  label
+}) => {
+  const [countryCode, setCountryCode] = useState(defaultCountryCode);
+  const [callingCode, setCallingCode] = useState(defaultCallingCode);
+  const [pickerVisible, setPickerVisible] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const handleSelect = (country) => {
+    setCountryCode(country.cca2);
+    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(
+    CountryPicker,
+    {
+      withFilter: true,
+      withFlag: true,
+      countryCode,
+      withCallingCode: true,
+      onSelect: handleSelect,
+      visible: pickerVisible
+    }
+  ), /* @__PURE__ */ React__default.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(
+    CustomTypography,
+    {
+      variant: "L2_REGULAR",
+      text: label ?? "",
+      style: styles$8.floatingLabel
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    TextInput,
+    {
+      style: [styles$8.input, inputStyle],
+      placeholder: !isFocused ? placeholder : "",
+      keyboardType: "phone-pad",
+      value,
+      onChangeText,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      maxLength,
+      placeholderTextColor: theme.CONTENT_SECONDRY["light"]
+    }
+  ))), errorMessage ? /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      variant: "L2_REGULAR",
+      text: errorMessage ?? "",
+      style: {
+        ...styles$8.errorStyle,
+        color: DHRE_DEFAULT.DH_SEMENTIC_ERROR
+      }
+    }
+  ) : null);
+};
+const styles$8 = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderColor: DHRE_COLORS_TEXT.DH_BLACK,
+    borderWidth: 1,
+    height: verticalScale(48),
+    borderRadius: moderateScale(8),
+    paddingHorizontal: horizontalScale(10),
+    paddingVertical: verticalScale(0),
+    marginTop: verticalScale(20)
+  },
+  countryPickerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: horizontalScale(10)
+  },
+  callingCode: {
+    fontSize: moderateScale(16),
+    color: DHRE_COLORS_TEXT.DH_BLACK
+  },
+  input: {
+    flex: 1,
+    fontSize: moderateScale(16),
+    borderLeftWidth: 1,
+    borderLeftColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
+    paddingLeft: horizontalScale(8)
+  },
+  floatingLabel: {
+    position: "absolute",
+    left: horizontalScale(-88),
+    top: verticalScale(-8),
+    fontSize: moderateScale(12),
+    color: DHRE_COLORS_TEXT.DH_BLACK,
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingHorizontal: horizontalScale(4),
+    zIndex: 1
+  },
+  errorStyle: {
+    marginTop: verticalScale(4)
+  }
+});
+
+const CommonTextInput = ({
+  label,
+  value,
+  onChangeText,
+  isSecureTextEntry = false,
+  keyboardType = "default",
+  placeholderText,
+  activeBorderColor = theme.CONTENT_PRIMARY["light"],
+  inactiveBorderColor = theme.BORDER_PRIMARY["light"],
+  inputStyle,
+  maxLength,
+  errorMessage,
+  editable = true,
+  textColor = theme.CONTENT_PRIMARY["light"],
+  labelColor,
+  handlePress,
+  pointerEvents
+}) => {
+  return /* @__PURE__ */ React__default.createElement(Pressable, { onPress: handlePress, style: styles$7.container }, /* @__PURE__ */ React__default.createElement(
+    TextInput$1,
+    {
+      mode: "outlined",
+      outlineStyle: {
+        ...styles$7.outlineStyle,
+        borderColor: value?.length ? activeBorderColor : inactiveBorderColor
+      },
+      label,
+      value,
+      onChangeText,
+      secureTextEntry: isSecureTextEntry,
+      keyboardType,
+      theme: {
+        colors: {
+          primary: labelColor ? labelColor : DHRE_COLORS_TEXT.DH_BLACK
+        }
+      },
+      style: [errorMessage ? styles$7.errorInput : styles$7.input, inputStyle],
+      maxLength,
+      textColor,
+      placeholder: placeholderText,
+      editable,
+      pointerEvents
+    }
+  ), errorMessage ? /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      variant: "L2_REGULAR",
+      text: errorMessage ?? "",
+      style: {
+        ...styles$7.errorStyle,
+        color: DHRE_DEFAULT.DH_SEMENTIC_ERROR
+      }
+    }
+  ) : null);
+};
+const styles$7 = StyleSheet.create({
+  container: {
+    justifyContent: "center"
+  },
+  touchable: {
+    width: "100%"
+  },
+  input: {
+    marginVertical: verticalScale(8),
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingVertical: 0,
+    height: verticalScale(48),
+    justifyContent: "center"
+  },
+  errorInput: {
+    marginTop: verticalScale(12),
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingVertical: 0,
+    height: verticalScale(48),
+    justifyContent: "center"
+  },
+  outlineStyle: {
+    borderWidth: 1,
+    height: verticalScale(48),
+    borderRadius: moderateScale(8)
+  },
+  errorStyle: {
+    marginTop: verticalScale(4)
+  }
+});
+
+const CustomDropdown = ({
+  data,
+  labelField = "label",
+  valueField = "value",
+  label,
+  placeholder,
+  containerStyle,
+  dropdownStyle,
+  placeholderStyle,
+  selectedTextStyle,
+  iconStyle,
+  labelStyle,
+  defaultValue,
+  iconColor,
+  itemTextStyle,
+  onValueChange,
+  itemContainerStyle
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const [isFocus, setIsFocus] = useState(false);
+  const renderLabel = () => {
+    if (value || isFocus) {
+      return /* @__PURE__ */ React__default.createElement(
+        Text,
+        {
+          style: [
+            styles$6.label,
+            labelStyle,
+            isFocus && { color: theme.BORDER_INVERTED["light"] }
+          ]
+        },
+        label
+      );
+    }
+    return null;
+  };
+  const handleValueChange = (item) => {
+    const newValue = item[valueField];
+    setValue(newValue);
+    setIsFocus(false);
+    if (onValueChange) {
+      onValueChange(newValue);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default.createElement(
+    Dropdown,
+    {
+      style: [
+        styles$6.dropdown,
+        dropdownStyle,
+        isFocus && { borderColor: theme.BORDER_INVERTED["light"] }
+      ],
+      placeholderStyle: [styles$6.placeholderStyle, placeholderStyle],
+      selectedTextStyle: [styles$6.selectedTextStyle, selectedTextStyle],
+      iconStyle: [styles$6.iconStyle, iconStyle],
+      data: data ?? [],
+      labelField,
+      valueField,
+      placeholder: !isFocus ? placeholder : "",
+      value,
+      onFocus: () => setIsFocus(true),
+      onBlur: () => setIsFocus(false),
+      onChange: handleValueChange,
+      iconColor,
+      dropdownPosition: "bottom",
+      itemTextStyle,
+      itemContainerStyle: [styles$6.itemListStyle, itemContainerStyle]
+    }
+  ));
+};
+const styles$6 = StyleSheet.create({
+  container: {
+    backgroundColor: theme.SURFACE_STATIC["light"],
+    marginVertical: verticalScale(4)
+    // External margin
+  },
+  dropdown: {
+    height: verticalScale(48),
+    borderColor: theme.BORDER_PRIMARY["light"],
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: horizontalScale(12),
+    backgroundColor: theme.SURFACE_STATIC["light"]
+  },
+  label: {
+    position: "absolute",
+    backgroundColor: theme.SURFACE_STATIC["light"],
+    left: horizontalScale(10),
+    top: verticalScale(-8),
+    zIndex: 10,
+    paddingHorizontal: horizontalScale(4),
+    fontSize: verticalScale(12)
+  },
+  placeholderStyle: {
+    fontSize: verticalScale(16)
+  },
+  selectedTextStyle: {
+    fontSize: verticalScale(16)
+  },
+  iconStyle: {
+    width: horizontalScale(20),
+    height: verticalScale(20)
+  },
+  itemListStyle: {
+    maxHeight: verticalScale(150)
+  }
+});
+
+const styles$5 = StyleSheet.create({
+  mainContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: horizontalScale(75),
+    height: verticalScale(32),
+    borderRadius: moderateScale(25),
+    padding: moderateScale(4)
+  },
+  circle: {
+    width: horizontalScale(38),
+    height: verticalScale(24),
+    borderRadius: moderateScale(25)
+  },
+  activeText: {
+    position: "absolute",
+    left: horizontalScale(12)
+  },
+  inActiveText: {
+    position: "absolute",
+    top: verticalScale(2),
+    right: horizontalScale(18)
+  }
+});
+
+const CustomSwitchBtn = ({
+  value,
+  onValueChange,
+  disabled = false,
+  activeText,
+  activeTextVariant = FontStyle.L2_BOLD,
+  inActiveText,
+  inActiveTextVariant = FontStyle.B3_REGULAR,
+  containerStyle,
+  activeTextStyle,
+  inActiveTextStyle,
+  circleStyle
+}) => {
+  const [animatedValue] = useState(new Animated.Value(value ? 1 : 0));
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 28]
+  });
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: value ? 1 : 0,
+      duration: 300,
+      useNativeDriver: false
+    }).start();
+  }, [value]);
+  const toggleSwitch = () => {
+    onValueChange(!value);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      disabled,
+      onPress: toggleSwitch,
+      style: { ...styles$5.mainContainer, ...containerStyle }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Animated.View,
+      {
+        style: [styles$5.circle, { transform: [{ translateX }], ...circleStyle }]
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        style: [styles$5.activeText, value ? inActiveTextStyle : activeTextStyle],
+        text: activeText,
+        variant: activeTextVariant
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        style: [
+          styles$5.inActiveText,
+          value ? activeTextStyle : inActiveTextStyle
+        ],
+        text: inActiveText,
+        variant: inActiveTextVariant
+      }
+    )
+  );
+};
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class ToastService {
+  constructor() {
+    __publicField(this, "toastRef", null);
+  }
+  setRef(ref) {
+    this.toastRef = ref;
+  }
+  showToast(message, duration = 3e3, isSuccess = true, buttonText = null, buttonAction = null) {
+    if (this.toastRef) {
+      this.toastRef.showToast(
+        message,
+        duration,
+        isSuccess,
+        buttonText,
+        buttonAction
+      );
+    }
+  }
+}
+const toastService = new ToastService();
+
+const TagsComponent = ({
+  tagList,
+  selectedTag,
+  handleTagPress
+}) => {
+  const reorderedTags = () => {
+    if (selectedTag) {
+      return [
+        tagList.find((tag) => tag.name === selectedTag),
+        ...tagList.filter((tag) => tag.name !== selectedTag)
+      ];
+    }
+    return tagList;
+  };
+  const renderTagItem = ({ item }) => /* @__PURE__ */ React__default.createElement(
+    Pressable,
+    {
+      onPress: () => handleTagPress?.(item.name),
+      style: [
+        styles$4.tagButton,
+        selectedTag === item?.name ? styles$4.selectedTagButton : styles$4.unselectedTagButton
+      ]
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Text,
+      {
+        style: [
+          styles$4.tagText,
+          selectedTag === item?.name ? styles$4.selectedTagText : styles$4.unselectedTagText
+        ]
+      },
+      item?.name
+    ),
+    selectedTag === item?.name && /* @__PURE__ */ React__default.createElement(Text, { style: styles$4.closeButton }, "\u2715")
+  );
+  return /* @__PURE__ */ React__default.createElement(View, null, /* @__PURE__ */ React__default.createElement(
+    FlatList,
+    {
+      data: reorderedTags(),
+      renderItem: renderTagItem,
+      keyExtractor: (item) => item?.name,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: styles$4.listContainer
+    }
+  ));
+};
+const styles$4 = StyleSheet.create({
+  listContainer: {
+    paddingHorizontal: 10,
+    alignItems: "center"
+  },
+  tagButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 20,
+    marginHorizontal: 8,
+    borderWidth: 1
+  },
+  selectedTagButton: {
+    backgroundColor: "#FFF",
+    borderColor: "#000"
+  },
+  unselectedTagButton: {
+    backgroundColor: "transparent",
+    borderColor: "#888"
+  },
+  tagText: {
+    fontSize: 16
+  },
+  selectedTagText: {
+    color: "#000"
+  },
+  unselectedTagText: {
+    color: "#888"
+  },
+  closeButton: {
+    marginLeft: 10,
+    fontSize: 18,
+    color: "#000"
+  }
+});
+
+const styles$3 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: verticalScale(16),
+    paddingHorizontal: horizontalScale(24),
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderRadius: moderateScale(8),
+    marginBottom: verticalScale(8)
+  },
+  fileUploadContainerStyle: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: verticalScale(16),
+    paddingHorizontal: horizontalScale(24),
+    borderRadius: moderateScale(8),
+    marginBottom: verticalScale(8)
+  },
+  innerContainer: { flexDirection: "row", columnGap: horizontalScale(24) },
+  titleContainer: { gap: verticalScale(4) }
+});
+
+const CustomDocumentPicker = ({
+  onDocumentUpload,
+  title = "Upload Images/Videos",
+  hint = "PNG, JPEG (max size. 4MB)",
+  maxFileSize = 4,
+  fileTypes = [DocumentPicker.types.images, DocumentPicker.types.pdf],
+  containerStyle,
+  titleStyle,
+  hintStyle
+}) => {
+  const [error, setError] = useState("");
+  const [docDetails, setDocDetails] = useState();
+  const { theme } = useTheme();
+  const pickDocument = useCallback(async () => {
+    try {
+      const res = await DocumentPicker.pickSingle({
+        type: fileTypes
+      });
+      if (res?.size && res.size > maxFileSize * 1024 * 1024) {
+        setError(
+          `File size higher than ${maxFileSize}MB. Please upload a smaller file.`
+        );
+        return;
+      }
+      setError("");
+      setDocDetails(res);
+      const base64Data = await RNFS.readFile(res.uri, "base64");
+      onDocumentUpload(base64Data, res);
+    } catch (err) {
+      if (DocumentPicker.isCancel(err)) {
+        Alert.alert("User canceled the picker");
+      } else if (err instanceof Error) {
+        Alert.alert("Unknown Error: " + err.message);
+      } else {
+        Alert.alert("Unknown Error: " + JSON.stringify(err));
+      }
+    }
+  }, [fileTypes, maxFileSize, onDocumentUpload]);
+  const removeDocument = useCallback(() => {
+    setDocDetails(void 0);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    View,
+    {
+      style: [
+        docDetails ? styles$3.fileUploadContainerStyle : styles$3.container,
+        { borderColor: error ? theme.ERROR : theme.BORDER_SECONDRY },
+        docDetails ? { backgroundColor: theme.SURFACE_SECONDARY } : {},
+        containerStyle
+      ]
+    },
+    /* @__PURE__ */ React__default.createElement(Pressable, { style: styles$3.innerContainer, onPress: pickDocument }, docDetails ? /* @__PURE__ */ React__default.createElement(SvgFileIcon, null) : /* @__PURE__ */ React__default.createElement(SvgUploadFileIcon, null), /* @__PURE__ */ React__default.createElement(View, { style: styles$3.titleContainer }, /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        variant: FontStyle.L2_REGULAR,
+        text: docDetails?.name ?? title,
+        style: [{ color: theme.CONTENT_PRIMARY }, titleStyle]
+      }
+    ), !docDetails && /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        variant: FontStyle.L3_REGULAR,
+        text: hint,
+        style: [{ color: theme.CONTENT_SECONDRY }, hintStyle]
+      }
+    ))),
+    docDetails && /* @__PURE__ */ React__default.createElement(SvgTrash, { onPress: removeDocument })
+  ), error && /* @__PURE__ */ React__default.createElement(
+    CustomTypography,
+    {
+      variant: FontStyle.L2_REGULAR,
+      text: error,
+      style: { color: theme.ERROR }
+    }
+  ));
+};
+var CustomDocumentPicker$1 = withThemeProvider(memo(CustomDocumentPicker));
+
+const styles$2 = StyleSheet.create({
+  textInputContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: verticalScale(8)
+  },
+  textInputStyle: {
+    height: verticalScale(48),
+    width: moderateScale(72),
+    borderRadius: moderateScale(8),
+    borderWidth: 1,
+    textAlign: "center",
+    fontSize: moderateScale(12)
+  },
+  resendOtpContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: verticalScale(12)
+  },
+  resendOtpTextEnable: {
+    textDecorationLine: "underline"
+  }
+});
+
+const OTPInput = React__default.forwardRef(
+  ({
+    length = 4,
+    onComplete,
+    resendOTP,
+    errorMessage,
+    testId = "",
+    otpContainerStyle
+  }, ref) => {
+    const [otp, setOTP] = useState("");
+    const [isResendOtpEnable, setIsResendOtpEnable] = useState(false);
+    const [activeInput, setActiveInput] = useState(null);
+    const { theme } = useTheme();
+    const refs = useRef([]);
+    refs.current = Array(length).fill(0).map((_, index) => refs.current[index] || null);
+    useEffect(() => {
+      enableResendOtp();
+    }, []);
+    const onClickResendOTP = () => {
+      setIsResendOtpEnable(false);
+      enableResendOtp();
+      resendOTP?.();
+    };
+    const enableResendOtp = () => {
+      setTimeout(() => {
+        setIsResendOtpEnable(true);
+      }, 5e3);
+    };
+    React__default.useImperativeHandle(ref, () => ({
+      reset() {
+        setOTP("");
+      }
+    }));
+    const handleChange = (index, value) => {
+      const regex = /^\d+$/;
+      if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
+        const newOTP = `${otp}${value}`;
+        setOTP(newOTP);
+        refs.current[index + 1]?.focus();
+      } else if (value.length === 0 && index > 0) {
+        const newOTP = otp.slice(0, -1);
+        setOTP(newOTP);
+        refs.current[index - 1]?.focus();
+      } else {
+        const newOTP = otp.slice(0, -1);
+        setOTP(newOTP);
+        refs.current[index]?.focus();
+      }
+    };
+    const handleKeyPress = (e, index) => {
+      if (e.nativeEvent.key === "Backspace" && index > 0) {
+        refs.current[index - 1]?.focus();
+      }
+    };
+    useEffect(() => {
+      if (otp.length === length) {
+        onComplete?.(otp);
+      }
+    }, [otp]);
+    return /* @__PURE__ */ React__default.createElement(View, { style: { ...otpContainerStyle } }, /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        text: "OTP",
+        variant: FontStyle.B4_REGULAR,
+        style: {
+          color: otp?.length ? theme.CONTENT_PRIMARY : theme.CONTENT_SECONDRY,
+          textAlign: "left"
+        }
+      }
+    ), /* @__PURE__ */ React__default.createElement(View, { style: { ...styles$2.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default.createElement(
+      TextInput,
+      {
+        key: index?.toString(),
+        style: {
+          ...styles$2.textInputStyle,
+          color: theme.CONTENT_PRIMARY,
+          borderColor: errorMessage ? theme.ERROR : otp.length === length ? theme.SUCCESS : activeInput === index ? theme.BORDER_INVERTED : theme.BORDER_PRIMARY
+        },
+        onFocus: () => setActiveInput(index),
+        onBlur: () => setActiveInput(null),
+        onKeyPress: (e) => handleKeyPress(e, index),
+        onChangeText: (text) => handleChange(index, text),
+        value: otp[index] ? "\u25CF" : "",
+        placeholder: "",
+        keyboardType: "numeric",
+        ref: (el) => refs.current[index] = el,
+        returnKeyType: otp.length === length ? "done" : "next",
+        selectionColor: theme.CONTENT_PRIMARY
+      }
+    ))), /* @__PURE__ */ React__default.createElement(View, { style: styles$2.resendOtpContainer }, errorMessage ? /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        text: errorMessage,
+        variant: FontStyle.L2_REGULAR,
+        style: {
+          color: theme.ERROR
+        }
+      }
+    ) : /* @__PURE__ */ React__default.createElement(View, null), /* @__PURE__ */ React__default.createElement(Pressable, { onPress: onClickResendOTP, disabled: !isResendOtpEnable }, /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        text: "Resend OTP",
+        variant: FontStyle.L2_REGULAR,
+        style: {
+          textDecorationLine: "underline",
+          color: isResendOtpEnable ? theme.CONTENT_PRIMARY : theme.CONTENT_DISABLE
+        }
+      }
+    ))));
+  }
+);
+var index$2 = withThemeProvider(OTPInput);
+OTPInput.displayName = "OTPInput";
+
+const styles$1 = StyleSheet.create({
+  stepperContainer: {
+    flexDirection: "row",
+    marginBottom: 24,
+    justifyContent: "space-between"
+  },
+  stepperWrapper: {
+    flex: 1,
+    marginRight: 10,
+    overflow: "hidden"
+  },
+  lastStepWrapper: { flex: 0.5 },
+  stepperSeparatorContainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  activeStepCircle: {
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    borderWidth: 2,
+    justifyContent: "center"
+  },
+  activeStepLabel: {
+    marginTop: 11
+  },
+  inactiveStepCircle: {
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    borderWidth: 2,
+    justifyContent: "center"
+  },
+  inactiveStepLabel: {
+    marginTop: 11
+  },
+  completeStepCircle: {
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  completeStepLabel: {
+    marginTop: 11
+  },
+  completeStepDivider: {
+    borderStyle: "solid"
+  },
+  stepCountCircle: {
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    borderWidth: 1,
+    justifyContent: "center"
+  },
+  countStepLabel: {
+    marginTop: 11
+  },
+  separator: {
+    borderWidth: 1,
+    borderStyle: "dashed",
+    width: "100%",
+    marginLeft: 10
+  },
+  lableContainer: { width: 60 }
+});
+
+var Status = /* @__PURE__ */ ((Status2) => {
+  Status2["Active"] = "Active";
+  Status2["Inactive"] = "Inactive";
+  Status2["Completed"] = "Completed";
+  Status2["Rejected"] = "Rejected";
+  Status2["Count"] = "Count";
+  return Status2;
+})(Status || {});
+
+const Stepper = ({
+  containerStyle,
+  showStepCount = false,
+  showStatus = false,
+  data
+}) => {
+  const { theme } = useTheme();
+  const renderCircleStyle = (status) => {
+    if (status === Status.Active) {
+      return { ...styles$1.activeStepCircle, borderColor: theme.CONTENT_PRIMARY };
+    } else if (status === Status.Inactive) {
+      return {
+        ...styles$1.inactiveStepCircle,
+        borderColor: theme.CONTENT_SECONDRY
+      };
+    } else if (status === Status.Completed) {
+      return { ...styles$1.completeStepCircle, backgroundColor: theme.SUCCESS };
+    } else {
+      return { ...styles$1.stepCountCircle, borderColor: theme.BORDER_PRIMARY };
+    }
+  };
+  const renderLableStyle = (status) => {
+    if (status === Status.Active) {
+      return { ...styles$1.activeStepLabel, color: theme.CONTENT_PRIMARY };
+    } else if (status === Status.Inactive) {
+      return { ...styles$1.inactiveStepLabel, color: theme.CONTENT_SECONDRY };
+    } else if (status === Status.Completed) {
+      return { ...styles$1.completeStepLabel, color: theme.CONTENT_PRIMARY };
+    } else {
+      return { ...styles$1.countStepLabel, color: theme.CONTENT_PRIMARY };
+    }
+  };
+  const renderDividerStyle = (status) => {
+    if (status === Status.Active) {
+      return { borderColor: theme.BORDER_PRIMARY };
+    } else if (status === Status.Inactive) {
+      return { borderColor: theme.BORDER_PRIMARY };
+    } else if (status === Status.Completed) {
+      return {
+        ...styles$1.completeStepDivider,
+        borderColor: theme.CONTENT_PRIMARY
+      };
+    } else {
+      return { borderColor: theme.CONTENT_SECONDRY };
+    }
+  };
+  return /* @__PURE__ */ React__default.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(
+      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(
+        CustomTypography,
+        {
+          text: item?.step,
+          variant: FontStyle.L2_REGULAR,
+          style: {
+            color: theme.CONTENT_PRIMARY
+          }
+        }
+      ), showStatus && item?.status === Status.Completed && /* @__PURE__ */ React__default.createElement(SvgCheckWhite, null)), 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(
+        CustomTypography,
+        {
+          text: item?.label,
+          variant: FontStyle.L3_REGULAR,
+          style: labelStyle
+        }
+      ))
+    );
+  }));
+};
+var index$1 = withThemeProvider(Stepper);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  sliderContainer: {
+    height: verticalScale(48),
+    borderRadius: moderateScale(25),
+    overflow: "hidden",
+    justifyContent: "center"
+  },
+  slider: {
+    height: "100%",
+    width: "100%",
+    position: "absolute"
+  },
+  button: {
+    height: verticalScale(40),
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: moderateScale(20),
+    margin: moderateScale(4)
+  },
+  buttonTextCOntainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+const { width } = Dimensions.get("window");
+const BUTTON_WIDTH = 40;
+const CustomSlideButton = ({ label, onComplete }) => {
+  const pan = useRef(new Animated.Value(0)).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (evt, gestureState) => {
+        return gestureState.dx > 0;
+      },
+      onPanResponderGrant: () => {
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        if (gestureState.dx < width - BUTTON_WIDTH) {
+          pan.setValue(gestureState.dx);
+        }
+      },
+      onPanResponderRelease: (evt, gestureState) => {
+        if (gestureState.dx > width - BUTTON_WIDTH - 100) {
+          onComplete && onComplete();
+          Animated.spring(pan, {
+            toValue: width - BUTTON_WIDTH - 10,
+            useNativeDriver: false
+          }).start();
+        } else {
+          Animated.spring(pan, {
+            toValue: 0,
+            useNativeDriver: false
+          }).start();
+        }
+      }
+    })
+  ).current;
+  const { theme } = useTheme();
+  return /* @__PURE__ */ React__default.createElement(
+    View,
+    {
+      style: {
+        ...styles.sliderContainer,
+        backgroundColor: theme.SURFACE_INVERTED
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(View, { style: styles.buttonTextCOntainer }, /* @__PURE__ */ React__default.createElement(
+      CustomTypography,
+      {
+        text: label,
+        variant: FontStyle.L1_REGULAR,
+        style: {
+          color: theme.CONTENT_INVERTED
+        }
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement(
+      Animated.View,
+      {
+        style: [styles.slider, { transform: [{ translateX: pan }] }],
+        ...panResponder.panHandlers
+      },
+      /* @__PURE__ */ React__default.createElement(
+        View,
+        {
+          style: {
+            ...styles.button,
+            backgroundColor: theme.SURFACE_PRIMARY,
+            width: BUTTON_WIDTH
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(SvgCaretRight, null)
+      )
+    )
+  );
+};
+var index = withThemeProvider(CustomSlideButton);
+
+const copyToClipboard = (textToCopy) => {
+  Clipboard.setString(textToCopy);
+};
+
+export { Accordion, Badge$1 as Badge, BottomDrawer, CustomButton$1 as Button, Cards, category as Category, Checkbox as CheckBox, ContactModel, CountryDropDown as CountryPicker, CustomDocumentPicker$1 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, CustomHeader, CustomIcon, CustomLoader, CustomProgressBar, CustomSearchBar, index as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_TEXT, DHRE_DEFAULT, DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, FeedbackForm, FileUpload, FontStyle, Line, NotificationBandge, index$2 as OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, TagsComponent as SingleSelectionTags, Star as StarRating, index$1 as Stepper, SwipableList, Tabs$1 as Tabs, Tags, CommonTextInput as TextInput, Theme, Toast, CustomSwitch as ToggleButton, Topic$1 as Topic, copyToClipboard, theme as default, horizontalScale, moderateScale, toastService, verticalScale };
+//# sourceMappingURL=index.mjs.map