dhre-ui-kit 3.0.0 → 3.0.2

package/lib/index.mjs

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState, useEffect, useRef, useCallback, useMemo, memo } from 'react';
 import { useSelector } from 'react-redux';
 import { Dimensions, StyleSheet, Text, Pressable, View, Platform, KeyboardAvoidingView, ActivityIndicator, TextInput, ScrollView, Animated, FlatList, Easing, TouchableOpacity, Modal as Modal$1, Alert, Linking, I18nManager, PanResponder, Image } from 'react-native';
-import Svg, { Defs, LinearGradient, Stop, RadialGradient, Rect, Circle } from 'react-native-svg';
+import Svg, { Defs, LinearGradient, Stop, RadialGradient, Rect, Circle, Svg as Svg$1, Path } from 'react-native-svg';
 import Modal from 'react-native-modal';
 import Clipboard from '@react-native-clipboard/clipboard';
 import LinearGradient$1 from 'react-native-linear-gradient';
@@ -186,6 +186,8 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["STROKE_INFO"] = "STROKE_INFO";
   Theme2["STROKE_DISABLED_DARK"] = "STROKE_DISABLED_DARK";
   Theme2["STROKE_DISABLED_DARK2"] = "STROKE_DISABLED_DARK2";
+  Theme2["STROKE_ACTIVE"] = "STROKE_ACTIVE";
+  Theme2["STROKE_DISABLED_SELECTED"] = "STROKE_DISABLED_SELECTED";
   return Theme2;
 })(Theme || {});
 
@@ -449,6 +451,14 @@ const DHRE_RED_ERROR = {
   TRANSPARENT_400_60: "rgba(235, 5, 66, 0.60)",
   TRANSPARENT_400_10: "rgba(235, 5, 66, 0.10)"
 };
+const DHRE_CONFIRMATION_ERROR_GRADIENT = {
+  light: ["#F0809E", "#FFFFFF"],
+  dark: ["#EB0542", "#000A28"]
+};
+const DHRE_CONFIRMATION_BASE_GRADIENT = {
+  light: ["rgba(165, 233, 255, 0)", "#52C5E8"],
+  dark: ["rgba(165, 233, 255, 0)", "#279DC1"]
+};
 
 const theme = {
   [Theme.SURFACE_PRIMARY]: {
@@ -529,7 +539,7 @@ const theme = {
   },
   [Theme.SURFACE_SUCCESS]: {
     light: "#89C798",
-    dark: "#347243"
+    dark: "#4EAB65"
   },
   [Theme.SURFACE_SUCCESS_TRANSPARENT]: {
     light: "rgba(137, 199, 152, 0.10)",
@@ -537,7 +547,7 @@ const theme = {
   },
   [Theme.SURFACE_INFO]: {
     light: "#52C5E8",
-    dark: "#07556C"
+    dark: "#279DC1"
   },
   [Theme.SURFACE_INFO_TRANSPARENT]: {
     light: "rgba(233, 248, 255, 0.35)",
@@ -552,8 +562,8 @@ const theme = {
     dark: "rgba(238, 170, 106, 0.60)"
   },
   [Theme.SURFACE_ERROR]: {
-    light: "#FFF2F5",
-    dark: "#9D032C"
+    light: "#F0809E",
+    dark: "#EB0542"
   },
   [Theme.SURFACE_ERROR_TRANSPARENT]: {
     light: "rgba(235, 5, 66, 0.10)",
@@ -568,8 +578,8 @@ const theme = {
     dark: "#BFC7DB"
   },
   [Theme.CONTENT_TERTIARY]: {
-    light: "#4D5F86",
-    dark: "#8994AF"
+    light: "#6F7681",
+    dark: "#9FA4AB"
   },
   [Theme.CONTENT_SECONDARY_TEXT]: {
     light: "#686868",
@@ -786,6 +796,15 @@ const theme = {
   [Theme.STROKE_DISABLED_DARK2]: {
     dark: DHRE_DEEP_SPACE_BLUE[800],
     light: DHRE_DEEP_SPACE_BLUE[200]
+  },
+  [Theme.STROKE_ACTIVE]: {
+    dark: "#009db3",
+    light: "#009db3"
+    // light-theme value pending DHDS Figma spec
+  },
+  [Theme.STROKE_DISABLED_SELECTED]: {
+    dark: "#003f48",
+    light: "#9ADFE8"
   }
 };
 
@@ -817,64 +836,65 @@ const horizontalScale = (size) => width / guidelineBaseWidth * size;
 const verticalScale = (size) => height / guidelineBaseHeight * size;
 const moderateScale = (size, factor = 0.5) => size + (horizontalScale(size) - size) * factor;
 
-const createFontStyle = (fontFamily, fontSize, lineHeight) => ({
+const createFontStyle = (fontFamily, fontSize, lineHeight, fontWeight) => ({
   fontSize: moderateScale(fontSize),
   lineHeight: verticalScale(lineHeight),
-  fontFamily
+  fontFamily,
+  fontWeight
 });
 const InterBold = "Inter-Bold";
 const InterLight = "Inter-Light";
 const InterMedium = "Inter-Medium";
 const FONT_STYLES = {
-  [FontStyle.H1_BOLD]: createFontStyle(InterBold, 48, 56),
-  [FontStyle.H2_BOLD]: createFontStyle(InterBold, 40, 48),
-  [FontStyle.H3_BOLD]: createFontStyle(InterBold, 32, 40),
-  [FontStyle.H4_BOLD]: createFontStyle(InterBold, 24, 32),
-  [FontStyle.H5_BOLD]: createFontStyle(InterBold, 20, 28),
-  [FontStyle.H6_BOLD]: createFontStyle(InterBold, 16, 20),
-  [FontStyle.H7_BOLD]: createFontStyle(InterBold, 20, 28),
-  [FontStyle.H8_BOLD]: createFontStyle(InterBold, 18, 25.2),
-  [FontStyle.H1_MEDIUM]: createFontStyle(InterMedium, 48, 56),
-  [FontStyle.H2_MEDIUM]: createFontStyle(InterMedium, 40, 48),
-  [FontStyle.H3_MEDIUM]: createFontStyle(InterMedium, 32, 40),
-  [FontStyle.H4_MEDIUM]: createFontStyle(InterMedium, 24, 32),
-  [FontStyle.H5_MEDIUM]: createFontStyle(InterMedium, 20, 28),
-  [FontStyle.H6_MEDIUM]: createFontStyle(InterMedium, 16, 20),
-  [FontStyle.H7_MEDIUM]: createFontStyle(InterMedium, 20, 28),
-  [FontStyle.H8_MEDIUM]: createFontStyle(InterMedium, 18, 25.2),
-  [FontStyle.H1_LIGHT]: createFontStyle(InterLight, 48, 56),
-  [FontStyle.H2_LIGHT]: createFontStyle(InterLight, 40, 48),
-  [FontStyle.H3_LIGHT]: createFontStyle(InterLight, 32, 40),
-  [FontStyle.H4_LIGHT]: createFontStyle(InterLight, 24, 32),
-  [FontStyle.H5_LIGHT]: createFontStyle(InterLight, 20, 28),
-  [FontStyle.H6_LIGHT]: createFontStyle(InterLight, 16, 20),
-  [FontStyle.H7_LIGHT]: createFontStyle(InterLight, 20, 28),
-  [FontStyle.H8_LIGHT]: createFontStyle(InterLight, 18, 25.2),
-  [FontStyle.H1_LINK]: createFontStyle(InterLight, 48, 56),
-  [FontStyle.H2_LINK]: createFontStyle(InterLight, 40, 48),
-  [FontStyle.H3_LINK]: createFontStyle(InterLight, 32, 40),
-  [FontStyle.H4_LINK]: createFontStyle(InterLight, 24, 32),
-  [FontStyle.H5_LINK]: createFontStyle(InterLight, 20, 28),
-  [FontStyle.H6_LINK]: createFontStyle(InterLight, 16, 20),
-  [FontStyle.H7_LINK]: createFontStyle(InterLight, 20, 28),
-  [FontStyle.H8_LINK]: createFontStyle(InterLight, 18, 25.2),
+  [FontStyle.H1_BOLD]: createFontStyle(InterBold, 48, 56, "700"),
+  [FontStyle.H2_BOLD]: createFontStyle(InterBold, 40, 48, "700"),
+  [FontStyle.H3_BOLD]: createFontStyle(InterBold, 32, 40, "700"),
+  [FontStyle.H4_BOLD]: createFontStyle(InterBold, 24, 32, "700"),
+  [FontStyle.H5_BOLD]: createFontStyle(InterBold, 20, 28, "700"),
+  [FontStyle.H6_BOLD]: createFontStyle(InterBold, 16, 20, "700"),
+  [FontStyle.H7_BOLD]: createFontStyle(InterBold, 20, 28, "700"),
+  [FontStyle.H8_BOLD]: createFontStyle(InterBold, 18, 25.2, "700"),
+  [FontStyle.H1_MEDIUM]: createFontStyle(InterMedium, 48, 56, "500"),
+  [FontStyle.H2_MEDIUM]: createFontStyle(InterMedium, 40, 48, "500"),
+  [FontStyle.H3_MEDIUM]: createFontStyle(InterMedium, 32, 40, "500"),
+  [FontStyle.H4_MEDIUM]: createFontStyle(InterMedium, 24, 32, "500"),
+  [FontStyle.H5_MEDIUM]: createFontStyle(InterMedium, 20, 28, "500"),
+  [FontStyle.H6_MEDIUM]: createFontStyle(InterMedium, 16, 20, "500"),
+  [FontStyle.H7_MEDIUM]: createFontStyle(InterMedium, 20, 28, "500"),
+  [FontStyle.H8_MEDIUM]: createFontStyle(InterMedium, 18, 25.2, "500"),
+  [FontStyle.H1_LIGHT]: createFontStyle(InterLight, 48, 56, "300"),
+  [FontStyle.H2_LIGHT]: createFontStyle(InterLight, 40, 48, "300"),
+  [FontStyle.H3_LIGHT]: createFontStyle(InterLight, 32, 40, "300"),
+  [FontStyle.H4_LIGHT]: createFontStyle(InterLight, 24, 32, "300"),
+  [FontStyle.H5_LIGHT]: createFontStyle(InterLight, 20, 28, "300"),
+  [FontStyle.H6_LIGHT]: createFontStyle(InterLight, 16, 20, "300"),
+  [FontStyle.H7_LIGHT]: createFontStyle(InterLight, 20, 28, "300"),
+  [FontStyle.H8_LIGHT]: createFontStyle(InterLight, 18, 25.2, "300"),
+  [FontStyle.H1_LINK]: createFontStyle(InterLight, 48, 56, "300"),
+  [FontStyle.H2_LINK]: createFontStyle(InterLight, 40, 48, "300"),
+  [FontStyle.H3_LINK]: createFontStyle(InterLight, 32, 40, "300"),
+  [FontStyle.H4_LINK]: createFontStyle(InterLight, 24, 32, "300"),
+  [FontStyle.H5_LINK]: createFontStyle(InterLight, 20, 28, "300"),
+  [FontStyle.H6_LINK]: createFontStyle(InterLight, 16, 20, "500"),
+  [FontStyle.H7_LINK]: createFontStyle(InterLight, 20, 28, "500"),
+  [FontStyle.H8_LINK]: createFontStyle(InterLight, 18, 25.2, "500"),
   // Lifestyle body styles
-  [FontStyle.BODY1_BOLD]: createFontStyle(InterBold, 16, 20),
-  [FontStyle.BODY2_BOLD]: createFontStyle(InterBold, 14, 18),
-  [FontStyle.BODY3_BOLD]: createFontStyle(InterBold, 12, 16),
-  [FontStyle.BODY4_BOLD]: createFontStyle(InterBold, 11, 12),
-  [FontStyle.BODY1_MEDIUM]: createFontStyle(InterMedium, 16, 20),
-  [FontStyle.BODY2_MEDIUM]: createFontStyle(InterMedium, 14, 18),
-  [FontStyle.BODY3_MEDIUM]: createFontStyle(InterMedium, 12, 16),
-  [FontStyle.BODY4_MEDIUM]: createFontStyle(InterMedium, 11, 12),
-  [FontStyle.BODY1_LIGHT]: createFontStyle(InterLight, 16, 20),
-  [FontStyle.BODY2_LIGHT]: createFontStyle(InterLight, 14, 18),
-  [FontStyle.BODY3_LIGHT]: createFontStyle(InterLight, 12, 16),
-  [FontStyle.BODY4_LIGHT]: createFontStyle(InterLight, 11, 12),
-  [FontStyle.BODY1_LINK]: createFontStyle(InterLight, 16, 20),
-  [FontStyle.BODY2_LINK]: createFontStyle(InterLight, 14, 18),
-  [FontStyle.BODY3_LINK]: createFontStyle(InterLight, 12, 16),
-  [FontStyle.BODY4_LINK]: createFontStyle(InterLight, 11, 12)
+  [FontStyle.BODY1_BOLD]: createFontStyle(InterBold, 16, 20, "700"),
+  [FontStyle.BODY2_BOLD]: createFontStyle(InterBold, 14, 18, "700"),
+  [FontStyle.BODY3_BOLD]: createFontStyle(InterBold, 12, 16, "700"),
+  [FontStyle.BODY4_BOLD]: createFontStyle(InterBold, 11, 12, "700"),
+  [FontStyle.BODY1_MEDIUM]: createFontStyle(InterMedium, 16, 20, "500"),
+  [FontStyle.BODY2_MEDIUM]: createFontStyle(InterMedium, 14, 18, "500"),
+  [FontStyle.BODY3_MEDIUM]: createFontStyle(InterMedium, 12, 16, "500"),
+  [FontStyle.BODY4_MEDIUM]: createFontStyle(InterMedium, 11, 12, "500"),
+  [FontStyle.BODY1_LIGHT]: createFontStyle(InterLight, 16, 20, "300"),
+  [FontStyle.BODY2_LIGHT]: createFontStyle(InterLight, 14, 18, "300"),
+  [FontStyle.BODY3_LIGHT]: createFontStyle(InterLight, 12, 16, "300"),
+  [FontStyle.BODY4_LIGHT]: createFontStyle(InterLight, 11, 12, "300"),
+  [FontStyle.BODY1_LINK]: createFontStyle(InterLight, 16, 20, "500"),
+  [FontStyle.BODY2_LINK]: createFontStyle(InterLight, 14, 18, "500"),
+  [FontStyle.BODY3_LINK]: createFontStyle(InterLight, 12, 16, "500"),
+  [FontStyle.BODY4_LINK]: createFontStyle(InterLight, 11, 12, "500")
 };
 
 const CustomTypography = ({
@@ -889,13 +909,13 @@ const CustomTypography = ({
     Text,
     {
       testID,
-      style: [textStyle, styles$B.container, style],
+      style: [textStyle, styles$A.container, style],
       ...props
     },
     text
   );
 };
-const styles$B = StyleSheet.create({
+const styles$A = StyleSheet.create({
   container: { writingDirection: "auto", alignSelf: "flex-start" }
 });
 
@@ -934,7 +954,7 @@ const commonStyles = StyleSheet.create({
   }
 });
 
-const styles$A = StyleSheet.create({
+const styles$z = StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -961,16 +981,16 @@ const Badge = ({
   return /* @__PURE__ */ React.createElement(
     Pressable,
     {
-      style: [styles$A.badge, commonStyles.centerRow, style],
+      style: [styles$z.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React.createElement(View, { style: [styles$A.icon, iconStyle] }, React.cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React.createElement(View, { style: [styles$z.icon, iconStyle] }, React.cloneElement(iconName)),
     text && /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$A.text, textStyle],
+        style: [styles$z.text, textStyle],
         text
       }
     )
@@ -1138,7 +1158,7 @@ const chipStyles = StyleSheet.create({
     justifyContent: "center",
     borderWidth: 1,
     borderRadius: DHRE_RADIUS.PILL,
-    gap: DHRE_SPACING.XS
+    gap: DHRE_PADDING.SM
   },
   sizeLarge: {
     height: DHRE_SPACING_BASE.SPACE_40,
@@ -1209,7 +1229,7 @@ const Chip = ({
     disabled
   );
   const contentColor = resolveContentColor(themeColors, selected, disabled);
-  const textVariant = size === "large" ? FontStyle.BODY2_LIGHT : FontStyle.BODY3_LIGHT;
+  const textVariant = size === "large" ? selected ? FontStyle.BODY2_MEDIUM : FontStyle.BODY2_LIGHT : selected ? FontStyle.BODY3_MEDIUM : FontStyle.BODY3_LIGHT;
   return /* @__PURE__ */ React.createElement(
     Pressable,
     {
@@ -1251,7 +1271,7 @@ var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
   return BackgroundVariant2;
 })(BackgroundVariant || {});
 
-const styles$z = StyleSheet.create({
+const styles$y = StyleSheet.create({
   container: {
     flex: 1,
     overflow: "hidden"
@@ -1315,7 +1335,7 @@ const Background = ({
     View,
     {
       testID,
-      style: [styles$z.container, { backgroundColor: config.base }, style]
+      style: [styles$y.container, { backgroundColor: config.base }, style]
     },
     /* @__PURE__ */ React.createElement(
       Svg,
@@ -1370,12 +1390,12 @@ const Background = ({
       ))),
       config.type === "linear" ? /* @__PURE__ */ React.createElement(Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#bg)" }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Rect, { x: "0", y: "0", width: "100", height: "100", fill: config.base }), /* @__PURE__ */ React.createElement(Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#glowLeft)" }), /* @__PURE__ */ React.createElement(Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#glowRight)" }))
     ),
-    /* @__PURE__ */ React.createElement(View, { style: [styles$z.content, contentStyle] }, children)
+    /* @__PURE__ */ React.createElement(View, { style: [styles$y.content, contentStyle] }, children)
   );
 };
 var Background$1 = withThemeProvider(Background);
 
-const styles$y = StyleSheet.create({
+const styles$x = StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -1397,21 +1417,19 @@ const styles$y = StyleSheet.create({
   },
   separator: {
     height: verticalScale(3),
-    width: horizontalScale(32),
+    width: DHRE_SPACING_BASE.SPACE_32,
     alignSelf: "center",
-    backgroundColor: "#A7A7A7",
     borderRadius: moderateScale(25)
   },
   headerContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginTop: verticalScale(24)
+    marginTop: DHRE_SPACING_BASE.SPACE_16
   },
-  title: { flex: 1, color: "#fff", textAlign: "left" },
+  title: { flex: 1, textAlign: "left" },
   leftIconStyle: { marginRight: 8 },
   rightTitle: {
-    color: "#fff",
     textAlign: "right",
     marginRight: DHRE_PADDING.LG
   },
@@ -1482,11 +1500,11 @@ const BottomDrawer = ({
         behavior: isIos() ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React.createElement(View, { style: [styles$y.mainContainer, style], testID }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: [styles$x.mainContainer, style], testID }, /* @__PURE__ */ React.createElement(
         View,
         {
           style: [
-            styles$y.modalContainer,
+            styles$x.modalContainer,
             { backgroundColor: theme.SURFACE_PRIMARY },
             modalContainerStyle
           ]
@@ -1496,35 +1514,51 @@ const BottomDrawer = ({
           {
             onPressOut: () => swipeDirection === "" && toggleModal()
           },
-          showSeparator && /* @__PURE__ */ React.createElement(View, { style: styles$y.separator }),
-          /* @__PURE__ */ React.createElement(View, { style: styles$y.headerContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$y.leftSideStyle }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
-            style: styles$y.leftIconStyle,
+          showSeparator && /* @__PURE__ */ React.createElement(
+            View,
+            {
+              style: [
+                styles$x.separator,
+                { backgroundColor: theme.STROKE_TERTIARY }
+              ]
+            }
+          ),
+          /* @__PURE__ */ React.createElement(View, { style: styles$x.headerContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$x.leftSideStyle }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
+            style: styles$x.leftIconStyle,
             onPressOut: onLeftIconPress
           }) : null, /* @__PURE__ */ React.createElement(
             CustomTypography,
             {
               variant: titleVariant,
               text: title,
-              style: { ...styles$y.title, ...titleStyle }
+              style: {
+                ...styles$x.title,
+                color: theme.CONTENT_PRIMARY,
+                ...titleStyle
+              }
             }
           )), /* @__PURE__ */ React.createElement(
             View,
             {
-              style: rightTitle && rightTitle?.length > 0 ? styles$y.rightSideStyle : {}
+              style: rightTitle && rightTitle?.length > 0 ? styles$x.rightSideStyle : {}
             },
             rightTitle && rightTitle?.length > 0 ? /* @__PURE__ */ React.createElement(Pressable, { onPressOut: handleRightTitlePress }, /* @__PURE__ */ React.createElement(
               CustomTypography,
               {
                 variant: rightTitleVariant,
                 text: rightTitle,
-                style: { ...styles$y.rightTitle, ...rightTitleStyle }
+                style: {
+                  ...styles$x.rightTitle,
+                  color: theme.CONTENT_PRIMARY,
+                  ...rightTitleStyle
+                }
               }
             )) : null,
             showRightIcon && rightIcon ? /* @__PURE__ */ React.createElement(
               Pressable,
               {
                 onPressOut: toggleModal,
-                style: styles$y.rightIconStyle
+                style: styles$x.rightIconStyle
               },
               React.cloneElement(rightIcon, {
                 width: DHRE_SPACING.LG,
@@ -1541,7 +1575,7 @@ const BottomDrawer = ({
 };
 var BottomDrawer$1 = withThemeProvider(BottomDrawer);
 
-const styles$x = StyleSheet.create({
+const styles$w = StyleSheet.create({
   mainContainer: {
     marginHorizontal: horizontalScale(16)
   },
@@ -1827,7 +1861,7 @@ const CustomButton = ({
       text: title,
       variant: titleVariant ?? defaultTextVariant,
       textColor: effectiveTextColor,
-      style: [styles$x.buttonText, disabledHexStyle, textStyle]
+      style: [styles$w.buttonText, disabledHexStyle, textStyle]
     }
   ), rightIcon && React.cloneElement(rightIcon, {
     width: iconSize,
@@ -1889,7 +1923,7 @@ const CustomButton = ({
 };
 var Button = withThemeProvider(CustomButton);
 
-const styles$w = StyleSheet.create({
+const styles$v = StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -1954,53 +1988,53 @@ const Cards = ({
   testID,
   onButtonPress
 }) => {
-  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$w.container }, topLeftTitle ? /* @__PURE__ */ React.createElement(View, { style: styles$w.topLeft }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$v.container }, topLeftTitle ? /* @__PURE__ */ React.createElement(View, { style: styles$v.topLeft }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P2regular",
-      style: styles$w.title,
+      style: styles$v.title,
       text: topLeftTitle
     }
   )) : null, title ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "H6bold",
-      style: styles$w.subTitleBelow,
+      style: styles$v.subTitleBelow,
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$w.subtitle,
+      style: styles$v.subtitle,
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$w.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React.createElement(
+  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$v.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$w.subTitleLeftBelow,
+      style: styles$v.subTitleLeftBelow,
       text: iconTitle
     }
   ) : null), buttonShown ? /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Button-Press",
-      style: styles$w.button,
+      style: styles$v.button,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "B2semiBold",
-        style: styles$w.buttonText,
+        style: styles$v.buttonText,
         text: buttonText
       }
     )
   ) : null);
 };
 
-const styles$v = StyleSheet.create({
+const styles$u = StyleSheet.create({
   directionStyle: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -2008,7 +2042,10 @@ const styles$v = StyleSheet.create({
   },
   checkboxContainer: {
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    borderRadius: DHRE_RADIUS.SM,
+    borderWidth: 1,
+    overflow: "hidden"
   }
 });
 
@@ -2042,10 +2079,11 @@ const Checkbox = ({
   partialIcon,
   partialDisabledIcon,
   isPartial = false,
-  size,
+  size = "small",
   titleVariant,
   titleStyle,
   containerStyle,
+  checkboxStyle,
   onPress,
   hideCheckbox = false
 }) => {
@@ -2077,15 +2115,21 @@ const Checkbox = ({
     minWidth: size === "small" ? 20 : 24,
     minHeight: size === "small" ? 20 : 24
   };
-  return /* @__PURE__ */ React.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React.createElement(View, { style: styles$v.directionStyle }, hideCheckbox ? null : /* @__PURE__ */ React.createElement(
+  const isFilledState = checked || isPartial;
+  const checkboxContainerDynamicStyle = {
+    backgroundColor: disable ? isFilledState ? theme[Theme.STROKE_DISABLED_SELECTED] : "transparent" : isFilledState ? theme[Theme.STROKE_ACTIVE] : "transparent",
+    borderColor: disable ? theme[Theme.CONTENT_DISABLE_DARK] : theme[Theme.STROKE_ACTIVE],
+    borderWidth: disable && isFilledState ? 0 : 1
+  };
+  return /* @__PURE__ */ React.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React.createElement(View, { style: styles$u.directionStyle }, hideCheckbox ? null : /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Checkbox-Press",
       onPressIn: handlePress,
       disabled: disable,
-      style: [styles$v.checkboxContainer, iconContainerSizeStyle]
+      style: [styles$u.checkboxContainer, iconContainerSizeStyle, checkboxContainerDynamicStyle, checkboxStyle]
     },
-    React.cloneElement(resolvedIcon)
+    resolvedIcon ? React.cloneElement(resolvedIcon) : null
   ), /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
@@ -2098,7 +2142,7 @@ const Checkbox = ({
 };
 var CheckBox = withThemeProvider(Checkbox);
 
-const styles$u = StyleSheet.create({
+const styles$t = StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
   },
@@ -2152,26 +2196,26 @@ const CustomDropdown$1 = ({
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$u.labelStyle,
+      style: styles$t.labelStyle,
       text: label
     }
   ), /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: `${testId}-BTN`,
-      style: styles$u.dropDownStyle,
+      style: styles$t.dropDownStyle,
       onPress: () => setShowOptions(!showOptions)
     },
     iconName && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$u.iconStyle
+      style: styles$t.iconStyle
     })),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P3regular",
-        style: styles$u.selectedValueStyle,
+        style: styles$t.selectedValueStyle,
         text: selectedValue ? selectedValue.label : placeholder
       }
     ),
@@ -2182,7 +2226,7 @@ const CustomDropdown$1 = ({
       width: moderateScale(24),
       height: moderateScale(24)
     }))
-  ), showOptions && /* @__PURE__ */ React.createElement(View, { style: styles$u.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React.createElement(
+  ), showOptions && /* @__PURE__ */ React.createElement(View, { style: styles$t.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React.createElement(
     Pressable,
     {
       key: id,
@@ -2192,7 +2236,7 @@ const CustomDropdown$1 = ({
         oneSelect({ id, value, label: label2 });
       },
       style: [
-        styles$u.item,
+        styles$t.item,
         {
           backgroundColor: id === selectedValue?.id ? DHRE_COLORS_BG.DH_GREY1 : DHRE_COLORS_TEXT.DH_WHITE
         }
@@ -2201,7 +2245,7 @@ const CustomDropdown$1 = ({
     iconName && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$u.iconStyle
+      style: styles$t.iconStyle
     })),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
@@ -2216,7 +2260,7 @@ const CustomDropdown$1 = ({
   ))));
 };
 
-const styles$t = StyleSheet.create({
+const styles$s = StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTDARK
   },
@@ -2298,18 +2342,18 @@ const CustomTextInput = ({
     CustomTypography,
     {
       variant: "P3medium",
-      style: [styles$t.labelStyle, disabled && styles$t.disableTextStyle],
+      style: [styles$s.labelStyle, disabled && styles$s.disableTextStyle],
       text: label
     }
   ), /* @__PURE__ */ React.createElement(
     View,
     {
       style: [
-        styles$t.inputContainer,
-        isFocused && styles$t.inputFocused,
-        error && styles$t.inputError,
-        disabled && styles$t.disableInputStyle,
-        successMessage ? styles$t.inputSucess : {},
+        styles$s.inputContainer,
+        isFocused && styles$s.inputFocused,
+        error && styles$s.inputError,
+        disabled && styles$s.disableInputStyle,
+        successMessage ? styles$s.inputSucess : {},
         {
           height: multiline ? 120 : 48,
           alignItems: multiline ? "flex-start" : "center"
@@ -2319,7 +2363,7 @@ const CustomTextInput = ({
     isSearchBar && searchIcon && React.cloneElement(searchIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$t.searchIconStyle
+      style: styles$s.searchIconStyle
     }),
     /* @__PURE__ */ React.createElement(
       TextInput,
@@ -2327,7 +2371,7 @@ const CustomTextInput = ({
         ...props,
         onFocus,
         onBlur,
-        style: styles$t.input,
+        style: styles$s.input,
         placeholderTextColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
         editable: !disabled,
         value,
@@ -2363,11 +2407,11 @@ const CustomTextInput = ({
 const CustomTooltip = (props) => {
   const { triggerElement, contentStyle } = props;
   return /* @__PURE__ */ React.createElement(Tooltip, { ...props, contentStyle: [contentStyle, {
-    borderRadius: 0
+    borderRadius: DHRE_PADDING.MD
   }] }, triggerElement);
 };
 
-const styles$s = StyleSheet.create({
+const styles$r = StyleSheet.create({
   container: {
     backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
     paddingHorizontal: horizontalScale(16),
@@ -2417,21 +2461,21 @@ const FileUpload = ({
   return /* @__PURE__ */ React.createElement(
     View,
     {
-      style: [styles$s.container, containerStyle],
+      style: [styles$r.container, containerStyle],
       testID: "file-upload-container"
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$s.content }, /* @__PURE__ */ React.createElement(View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React.cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React.createElement(CustomTypography, { variant: "H8bold", style: styles$s.title, text: title }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles$r.content }, /* @__PURE__ */ React.createElement(View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React.cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React.createElement(CustomTypography, { variant: "H8bold", style: styles$r.title, text: title }), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$s.description,
+        style: styles$r.description,
         text: `Drop files directly here or `
       }
     ), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$s.browse,
+        style: styles$r.browse,
         text: btnText
       }
     ), /* @__PURE__ */ React.createElement(
@@ -2439,14 +2483,14 @@ const FileUpload = ({
       {
         testID: "file-upload-description",
         variant: "P4regular",
-        style: styles$s.description,
+        style: styles$r.description,
         text: ` from your device`
       }
     )),
     /* @__PURE__ */ React.createElement(
       Pressable,
       {
-        style: styles$s.button,
+        style: styles$r.button,
         onPress: onUpload,
         testID: "file-upload-button"
       },
@@ -2454,7 +2498,7 @@ const FileUpload = ({
         CustomTypography,
         {
           variant: "B2semiBold",
-          style: styles$s.buttonText,
+          style: styles$r.buttonText,
           text: btnText
         }
       )
@@ -2466,7 +2510,7 @@ const PdfView = (props) => {
   return /* @__PURE__ */ React.createElement(Pdf, { ...props, trustAllCerts: false });
 };
 
-const styles$r = StyleSheet.create({
+const styles$q = StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -2522,39 +2566,39 @@ const PopUp = ({
   leftButtonShown = false,
   rightButtonShown = false
 }) => {
-  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$r.container }, title ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$q.container }, title ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
-      style: styles$r.subTitleBelow,
+      style: styles$q.subTitleBelow,
       variant: "H6semiBold",
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
-      style: styles$r.subtitle,
+      style: styles$q.subtitle,
       variant: "P3regular",
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$r.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React.createElement(
+  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$q.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Left-Button-Press",
-      style: styles$r.buttonLeft,
+      style: styles$q.buttonLeft,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        style: styles$r.buttonLeftText,
+        style: styles$q.buttonLeftText,
         variant: "B2semiBold",
         text: buttonText
       }
     )
-  ) : null, rightButtonShown ? /* @__PURE__ */ React.createElement(Pressable, { style: styles$r.button, onPress: onButtonPress }, /* @__PURE__ */ React.createElement(
+  ) : null, rightButtonShown ? /* @__PURE__ */ React.createElement(Pressable, { style: styles$q.button, onPress: onButtonPress }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
-      style: styles$r.buttonText,
+      style: styles$q.buttonText,
       variant: "B2semiBold",
       text: buttonText
     }
@@ -2610,7 +2654,7 @@ const LINE_COLOR_KEYS = {
   unfilledColor: "SURFACE_PRIMARY_TRANSPARENT"
 };
 
-const styles$q = StyleSheet.create({
+const styles$p = StyleSheet.create({
   lineContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -2672,7 +2716,7 @@ const CustomProgressBar = ({
   const effectiveLineFillColor = fillColor ?? theme[LINE_COLOR_KEYS.fillColor];
   const effectiveLineUnfilledColor = unfilledColor ?? theme[LINE_COLOR_KEYS.unfilledColor];
   const effectiveLineHeight = height ?? LINE_DEFAULTS.trackHeight;
-  const renderCircleCenter = () => /* @__PURE__ */ React.createElement(View, { style: styles$q.circleCenter }, /* @__PURE__ */ React.createElement(
+  const renderCircleCenter = () => /* @__PURE__ */ React.createElement(View, { style: styles$p.circleCenter }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
       text: `${progress}%`,
@@ -2695,7 +2739,7 @@ const CustomProgressBar = ({
         return /* @__PURE__ */ React.createElement(
           View,
           {
-            style: [styles$q.lineContainer, isRTL && styles$q.lineContainerRTL],
+            style: [styles$p.lineContainer, isRTL && styles$p.lineContainerRTL],
             testID: "custom-progress-bar-line-wrapper"
           },
           /* @__PURE__ */ React.createElement(
@@ -2744,7 +2788,7 @@ const CustomProgressBar = ({
 };
 var CustomProgressBar$1 = withThemeProvider(CustomProgressBar);
 
-const styles$p = StyleSheet.create({
+const styles$o = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center"
@@ -2810,13 +2854,13 @@ const Star = ({
       emptyStarColor
     );
     stars.push(
-      /* @__PURE__ */ React.createElement(View, { key: i, style: [styles$p.star, starStyle] }, starType)
+      /* @__PURE__ */ React.createElement(View, { key: i, style: [styles$o.star, starStyle] }, starType)
     );
   }
-  return /* @__PURE__ */ React.createElement(View, { style: styles$p.container, testID: "star" }, stars);
+  return /* @__PURE__ */ React.createElement(View, { style: styles$o.container, testID: "star" }, stars);
 };
 
-var styles$o = StyleSheet.create({
+var styles$n = StyleSheet.create({
   container: {
     flexDirection: "row",
     gap: DHRE_PADDING.SM,
@@ -2872,12 +2916,12 @@ const Tabs = ({
       onSelectionChange(selectedTabs);
     }
   };
-  return /* @__PURE__ */ React.createElement(View, { style: [styles$o.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: [styles$n.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React.createElement(
     Pressable,
     {
       key: id,
       style: {
-        ...styles$o.button,
+        ...styles$n.button,
         backgroundColor: isSelected ? theme.SURFACE_INVERTED : theme.SURFACE_SECONDARY,
         borderColor: isSelected ? theme.SURFACE_INVERTED : theme.STROKE_TERTIARY
       },
@@ -2888,7 +2932,7 @@ const Tabs = ({
       {
         variant: FontStyle.BODY1_MEDIUM,
         style: {
-          ...styles$o.textStyle,
+          ...styles$n.textStyle,
           color: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_PRIMARY
         },
         text: title
@@ -2898,7 +2942,7 @@ const Tabs = ({
 };
 var Tabs$1 = withThemeProvider(Tabs);
 
-const styles$n = StyleSheet.create({
+const styles$m = StyleSheet.create({
   container: {
     width: "100%"
   },
@@ -2961,8 +3005,8 @@ const Tags = ({
     ScrollView,
     {
       testID,
-      style: styles$n.container,
-      contentContainerStyle: styles$n.contentContainer,
+      style: styles$m.container,
+      contentContainerStyle: styles$m.contentContainer,
       horizontal: false
     },
     tags?.map((tag) => /* @__PURE__ */ React.createElement(
@@ -2972,16 +3016,16 @@ const Tags = ({
         key: tag,
         onPress: () => toggleTag(tag),
         style: [
-          styles$n.tag,
+          styles$m.tag,
           tagStyles,
-          selectedTags.includes(tag) ? styles$n.selectedTag : styles$n.tagUnSelected
+          selectedTags.includes(tag) ? styles$m.selectedTag : styles$m.tagUnSelected
         ]
       },
       /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: selectedTags.includes(tag) ? "H9semiBold" : "P4regular",
-          style: selectedTags.includes(tag) ? styles$n.tagText : styles$n.tagUnselectedText,
+          style: selectedTags.includes(tag) ? styles$m.tagText : styles$m.tagUnselectedText,
           text: tag
         }
       ),
@@ -2997,7 +3041,7 @@ const Tags = ({
   );
 };
 
-const styles$m = StyleSheet.create({
+const styles$l = StyleSheet.create({
   container: {
     width: horizontalScale(70),
     height: verticalScale(25),
@@ -3062,26 +3106,26 @@ const CustomSwitch = ({
     Pressable,
     {
       onPress: toggleSwitch,
-      style: [styles$m.container, { width }],
+      style: [styles$l.container, { width }],
       testID: "custom-switch"
     },
     /* @__PURE__ */ React.createElement(
       View,
       {
         style: [
-          styles$m.track,
+          styles$l.track,
           {
             backgroundColor: isOn ? DHRE_COLORS_ALERT.DH_SUCCESS_GREEN_ACCENT : DHRE_COLORS_TEXT.DH_TEXTDISABLED
           }
         ]
       },
-      /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$m.thumb, animatedStyle] }),
+      /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$l.thumb, animatedStyle] }),
       type !== ToggleButtonType.SMALL && /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: "B3semiBold",
           style: [
-            styles$m.text,
+            styles$l.text,
             { textAlign: isOn ? TextDirectType.left : TextDirectType.right }
           ],
           text: isOn ? ToggleTextType.ON : ToggleTextType.OFF
@@ -3091,10 +3135,9 @@ const CustomSwitch = ({
   );
 };
 
-const styles$l = StyleSheet.create({
+const styles$k = StyleSheet.create({
   container: {
-    paddingVertical: DHRE_PADDING.LG,
-    borderBottomWidth: moderateScale(1)
+    paddingVertical: DHRE_PADDING.LG
   },
   header: {
     flexDirection: "row",
@@ -3151,18 +3194,19 @@ const Accordion = ({
   return /* @__PURE__ */ React.createElement(
     View,
     {
-      style: [{
-        ...styles$l.container,
-        borderBottomColor: theme.SURFACE_PRIMARY_TRANSPARENT,
-        ...containerStyle,
-        borderRadius: 0
-      }],
+      style: [
+        {
+          ...styles$k.container,
+          borderRadius: 0,
+          ...containerStyle
+        }
+      ],
       testID: testId
     },
     /* @__PURE__ */ React.createElement(
       Pressable,
       {
-        style: [styles$l.header, headerStyle, disabled && { opacity: 0.5 }],
+        style: [styles$k.header, headerStyle, disabled && { opacity: 0.5 }],
         onPressOut: !disabled ? onToggle : void 0
       },
       headerComponent ? headerComponent() : /* @__PURE__ */ React.createElement(
@@ -3171,7 +3215,7 @@ const Accordion = ({
           variant: titleVariant,
           text: title,
           style: {
-            ...styles$l.title,
+            ...styles$k.title,
             color: theme.CONTENT_PRIMARY,
             ...titleStyle
           }
@@ -3180,25 +3224,31 @@ const Accordion = ({
       icon ? React.cloneElement(icon, {
         width: DHRE_SPACING_BASE.SPACE_20,
         height: DHRE_SPACING_BASE.SPACE_20,
-        style: styles$l.iconStyle
+        style: styles$k.iconStyle
       }) : null
     ),
     optionalElement ? optionalElement() : null,
-    isOpen && /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$l.content, slideAnimation && { height: cardHeight }] }, /* @__PURE__ */ React.createElement(
-      View,
+    isOpen && /* @__PURE__ */ React.createElement(
+      Animated.View,
       {
-        ref: contentRef,
-        onLayout: (event) => {
-          setContentHeight(event.nativeEvent.layout.height);
-        }
+        style: [styles$k.content, slideAnimation && { height: cardHeight }]
       },
-      children
-    ))
+      /* @__PURE__ */ React.createElement(
+        View,
+        {
+          ref: contentRef,
+          onLayout: (event) => {
+            setContentHeight(event.nativeEvent.layout.height);
+          }
+        },
+        children
+      )
+    )
   );
 };
 var Accordion$1 = withThemeProvider(Accordion);
 
-const styles$k = StyleSheet.create({
+const styles$j = StyleSheet.create({
   container: {
     position: "absolute",
     alignSelf: "center",
@@ -3317,20 +3367,20 @@ const Toast = React.forwardRef(
       Animated.View,
       {
         style: [
-          styles$k.container,
+          styles$j.container,
           { bottom },
           { backgroundColor: theme.SURFACE_TERTIARY }
         ],
         testID: "TOAST"
       },
-      /* @__PURE__ */ React.createElement(View, { style: styles$k.toastContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$k.innerContainer }, /* @__PURE__ */ React.createElement(Pressable, { onPress: hideToast, style: styles$k.icon }, isSuccess ? sucessIcon : warning ? warningIcon : errorIcon), /* @__PURE__ */ React.createElement(View, { style: styles$k.textContainer }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: styles$j.toastContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$j.innerContainer }, /* @__PURE__ */ React.createElement(Pressable, { onPress: hideToast, style: styles$j.icon }, isSuccess ? sucessIcon : warning ? warningIcon : errorIcon), /* @__PURE__ */ React.createElement(View, { style: styles$j.textContainer }, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: "BODY2_LIGHT",
           text: message,
-          style: [styles$k.messageText, { color: theme.CONTENT_SECONDRY }]
+          style: [styles$j.messageText, { color: theme.CONTENT_SECONDRY }]
         }
-      ), subjectText && /* @__PURE__ */ React.createElement(View, { style: styles$k.subContainer }, /* @__PURE__ */ React.createElement(
+      ), subjectText && /* @__PURE__ */ React.createElement(View, { style: styles$j.subContainer }, /* @__PURE__ */ React.createElement(
         Button,
         {
           title: subjectText,
@@ -3355,7 +3405,7 @@ const Toast = React.forwardRef(
         Animated.View,
         {
           style: [
-            styles$k.progressBar,
+            styles$j.progressBar,
             {
               width: progressAnim,
               backgroundColor: accentColor
@@ -3372,7 +3422,7 @@ const ToastWithProvider = React.forwardRef(
 );
 ToastWithProvider.displayName = "Toast";
 
-const styles$j = StyleSheet.create({
+const styles$i = StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     justifyContent: "center",
@@ -3451,8 +3501,8 @@ const CustomSearchBar = ({
     {
       testID,
       style: [
-        styles$j.inputContainer,
-        size === "small" ? styles$j.inputContainerSmall : styles$j.inputContainerLarge,
+        styles$i.inputContainer,
+        size === "small" ? styles$i.inputContainerSmall : styles$i.inputContainerLarge,
         {
           ...height !== void 0 && { height: verticalScale(height) },
           backgroundColor: disabled ? theme[Theme.SURFACE_PRIMARY] : theme[Theme.SURFACE_PRIMARY_TRANSPARENT],
@@ -3474,7 +3524,7 @@ const CustomSearchBar = ({
       React.cloneElement(searchIcon, {
         width: DHRE_SPACING.LG,
         height: DHRE_SPACING.LG,
-        style: [styles$j.searchIconStyle, searchIconStyle]
+        style: [styles$i.searchIconStyle, searchIconStyle]
       })
     ),
     /* @__PURE__ */ React.createElement(
@@ -3483,7 +3533,7 @@ const CustomSearchBar = ({
         ...props,
         testID: `${testID}-INPUT`,
         style: [
-          styles$j.input,
+          styles$i.input,
           { color: theme[Theme.CONTENT_PRIMARY] },
           inputStyle
         ],
@@ -3518,14 +3568,14 @@ const CustomSearchBar = ({
       React.cloneElement(rightIcon, {
         // width: moderateScale(24),
         // height: moderateScale(24),
-        style: [styles$j.crossIconStyle, crossIconStyle]
+        style: [styles$i.crossIconStyle, crossIconStyle]
       })
     )
   );
 };
 var CustomSearchBar$1 = withThemeProvider(CustomSearchBar);
 
-const styles$i = StyleSheet.create({
+const styles$h = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -3559,7 +3609,7 @@ const CustomHeader = ({
   rightIcons
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(View, { style: styles$i.container, testID: testId }, /* @__PURE__ */ React.createElement(View, { style: styles$i.pageTitleContainer }, leftIcon && /* @__PURE__ */ React.createElement(HeaderIcon, { config: leftIcon }), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: styles$h.container, testID: testId }, /* @__PURE__ */ React.createElement(View, { style: styles$h.pageTitleContainer }, leftIcon && /* @__PURE__ */ React.createElement(HeaderIcon, { config: leftIcon }), /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "BODY1_MEDIUM",
@@ -3569,11 +3619,11 @@ const CustomHeader = ({
   ), titleSuffixIcon && React.cloneElement(titleSuffixIcon, {
     width: ICON_SIZE,
     height: ICON_SIZE
-  })), rightIcons && rightIcons.length > 0 && /* @__PURE__ */ React.createElement(View, { style: styles$i.iconsContainer }, rightIcons.map((config, index) => /* @__PURE__ */ React.createElement(HeaderIcon, { key: index, config }))));
+  })), rightIcons && rightIcons.length > 0 && /* @__PURE__ */ React.createElement(View, { style: styles$h.iconsContainer }, rightIcons.map((config, index) => /* @__PURE__ */ React.createElement(HeaderIcon, { key: index, config }))));
 };
 var CustomHeader$1 = withThemeProvider(CustomHeader);
 
-const styles$h = StyleSheet.create({
+const styles$g = StyleSheet.create({
   container: {
     flex: 1
   },
@@ -3603,14 +3653,14 @@ const ActionButton = ({
   {
     testID,
     onPress,
-    style: [styles$h.actionButton, style]
+    style: [styles$g.actionButton, style]
   },
   icon,
   /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "L1_REGULAR",
-      style: [styles$h.titleStyle, titleStyle],
+      style: [styles$g.titleStyle, titleStyle],
       text: title
     }
   )
@@ -3651,7 +3701,7 @@ const SwipableList = (props) => {
       return id;
     });
   }, []);
-  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React.createElement(View, { style: styles$h.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React.createElement(
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React.createElement(View, { style: styles$g.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React.createElement(
     ActionButton,
     {
       icon: leftPrimaryActionIcon,
@@ -3678,7 +3728,7 @@ const SwipableList = (props) => {
       titleStyle
     }
   ));
-  const rightActionHandle = (item) => /* @__PURE__ */ React.createElement(View, { style: [styles$h.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React.createElement(
+  const rightActionHandle = (item) => /* @__PURE__ */ React.createElement(View, { style: [styles$g.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React.createElement(
     ActionButton,
     {
       icon: rightPrimaryActionIcon,
@@ -3692,7 +3742,7 @@ const SwipableList = (props) => {
       titleStyle
     }
   ));
-  const renderItem = ({ item }) => /* @__PURE__ */ React.createElement(View, { testID: `${testId}-LIST`, style: styles$h.container }, /* @__PURE__ */ React.createElement(
+  const renderItem = ({ item }) => /* @__PURE__ */ React.createElement(View, { testID: `${testId}-LIST`, style: styles$g.container }, /* @__PURE__ */ React.createElement(
     Swipeable,
     {
       ref: (ref) => swipeableRefs.current[item.id] = ref,
@@ -3718,7 +3768,7 @@ const SwipableList = (props) => {
         View,
         {
           style: {
-            ...styles$h.seperator,
+            ...styles$g.seperator,
             backgroundColor: theme.BORDER_SEPRATOR
           }
         }
@@ -3728,7 +3778,15 @@ const SwipableList = (props) => {
 };
 var SwipableList$1 = withThemeProvider(SwipableList);
 
-const styles$g = StyleSheet.create({
+const OUTLINED_GRADIENT_COLORS = [
+  DHRE_CYAN_HIGHLIGHT[300],
+  "#438CB1"
+];
+const OUTLINED_GRADIENT_START = { x: 0, y: 0 };
+const OUTLINED_GRADIENT_END = { x: 1, y: 1 };
+const OUTLINED_BORDER_WIDTH = 1;
+
+const styles$f = StyleSheet.create({
   container: {
     justifyContent: "center",
     alignItems: "center"
@@ -3768,13 +3826,6 @@ const ICON_BLUR_TYPE_STYLE = StyleSheet.create({
     overflow: "hidden"
   }
 });
-const OUTLINED_GRADIENT_COLORS = [
-  DHRE_CYAN_HIGHLIGHT[300],
-  "#438CB1"
-];
-const OUTLINED_GRADIENT_START = { x: 0, y: 0 };
-const OUTLINED_GRADIENT_END = { x: 1, y: 1 };
-const OUTLINED_BORDER_WIDTH = 1;
 const OUTLINED_BUTTON_STYLES = StyleSheet.create({
   shell: {
     borderRadius: ICON_BUTTON_RADIUS,
@@ -3823,7 +3874,8 @@ const CustomIcon = ({
   titleStyle,
   type,
   size = "large",
-  labelPosition
+  labelPosition,
+  outlinedBackgroundColor
 }) => {
   const { theme } = useTheme();
   const sizeSpec = size ? ICON_SIZE_SPEC[size] : null;
@@ -3892,7 +3944,7 @@ const CustomIcon = ({
             {
               width: innerSize,
               height: innerSize,
-              backgroundColor: theme[Theme.SURFACE_PRIMARY],
+              backgroundColor: outlinedBackgroundColor ?? theme[Theme.SURFACE_PRIMARY],
               padding
             }
           ]
@@ -3915,7 +3967,7 @@ const CustomIcon = ({
         return renderOutlinedButton();
     }
   };
-  const outerStyle = labelPosition ? [ICON_LABEL_POSITION_STYLES[labelPosition], containerStyle ?? {}] : [styles$g.container, containerStyle ?? {}];
+  const outerStyle = labelPosition ? [ICON_LABEL_POSITION_STYLES[labelPosition], containerStyle ?? {}] : [styles$f.container, containerStyle ?? {}];
   const resolvedTitleColor = type ? { color: theme[Theme.CONTENT_PRIMARY] } : void 0;
   const resolvedTitleVariant = titleVariant ?? ICON_TITLE_VARIANT_FOR_SIZE[size ?? "large"];
   return /* @__PURE__ */ React.createElement(
@@ -3931,14 +3983,14 @@ const CustomIcon = ({
       {
         variant: resolvedTitleVariant,
         text: title,
-        style: [styles$g.title, resolvedTitleColor, titleStyle]
+        style: [styles$f.title, resolvedTitleColor, titleStyle]
       }
     )
   );
 };
 var CustomIcon$1 = withThemeProvider(CustomIcon);
 
-const createStyles$5 = (theme) => {
+const createStyles$6 = (theme) => {
   return StyleSheet.create({
     container: {
       position: "absolute",
@@ -10139,7 +10191,7 @@ const CustomLoader = ({
   customeBox
 }) => {
   const { theme, mode } = useTheme();
-  const styles = createStyles$5(theme);
+  const styles = createStyles$6(theme);
   const isDP = brandName === "DP";
   const isNakheel = brandName === "Nakheel";
   if (!loading) return null;
@@ -10179,7 +10231,7 @@ const CustomLoader = ({
 };
 var CustomLoader$1 = withThemeProvider(CustomLoader);
 
-const createStyles$4 = (scaledSize, color) => StyleSheet.create({
+const createStyles$5 = (scaledSize, color) => StyleSheet.create({
   // Full-screen absolute overlay — mirrors CustomLoader `container`
   container: {
     position: "absolute",
@@ -10301,7 +10353,7 @@ const LoaderContent = ({
   }, []);
   const color = theme[Theme.CONTENT_PRIMARY];
   const styles = useMemo(
-    () => createStyles$4(scaledSize, color),
+    () => createStyles$5(scaledSize, color),
     [scaledSize, color]
   );
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle], testID }, /* @__PURE__ */ React.createElement(View, { style: [styles.backdrop, backdropStyle] }, /* @__PURE__ */ React.createElement(View, { style: [styles.box, boxStyle] }, /* @__PURE__ */ React.createElement(
@@ -10365,14 +10417,14 @@ const HorizontalLine = ({ backgroundColor = "SURFACE_SECONDARY", style }) => {
     View,
     {
       style: [
-        styles$f.line,
+        styles$e.line,
         { backgroundColor: theme[backgroundColor] },
         style
       ]
     }
   );
 };
-const styles$f = StyleSheet.create({
+const styles$e = StyleSheet.create({
   line: {
     height: 1,
     width: "100%"
@@ -10395,18 +10447,18 @@ const Topic = ({
     TouchableOpacity,
     {
       style: [
-        styles$e.button,
+        styles$d.button,
         { backgroundColor: theme[Theme.SURFACE_SECONDARY] },
         containterStyle
       ],
       onPress
     },
-    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$e.rightIconContainer }, React.cloneElement(rightIcon)),
-    /* @__PURE__ */ React.createElement(View, { style: styles$e.timeContainer }, time && /* @__PURE__ */ React.createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
-    /* @__PURE__ */ React.createElement(View, { style: styles$e.textContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$e.paymentView }, statusImage && /* @__PURE__ */ React.createElement(View, null, React.cloneElement(statusImage)), subTitle && /* @__PURE__ */ React.createElement(
+    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$d.rightIconContainer }, React.cloneElement(rightIcon)),
+    /* @__PURE__ */ React.createElement(View, { style: styles$d.timeContainer }, time && /* @__PURE__ */ React.createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
+    /* @__PURE__ */ React.createElement(View, { style: styles$d.textContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$d.paymentView }, statusImage && /* @__PURE__ */ React.createElement(View, null, React.cloneElement(statusImage)), subTitle && /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
-        style: [styles$e.subTitle, subTitleStyle],
+        style: [styles$d.subTitle, subTitleStyle],
         text: subTitle,
         variant: FontStyle.L2_REGULAR,
         textColor: Theme.CONTENT_PRIMARY
@@ -10421,7 +10473,7 @@ const Topic = ({
     ))
   );
 };
-const styles$e = StyleSheet.create({
+const styles$d = StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -10517,14 +10569,14 @@ const ContactModal = ({
   const renderEmailOptions = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
-      style: styles$d.title,
+      style: styles$c.title,
       text: "Open email app",
       variant: "L2_REGULAR"
     }
   ), /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
-      style: styles$d.subtitle,
+      style: styles$c.subtitle,
       text: "Which app would you like to open?",
       variant: "L2_REGULAR"
     }
@@ -10532,33 +10584,33 @@ const ContactModal = ({
     Pressable,
     {
       onPress: () => handleOptionPress(),
-      style: styles$d.optionButton
+      style: styles$c.optionButton
     },
     /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
-        style: styles$d.optionText,
+        style: styles$c.optionText,
         text: option,
         variant: "B3_BOLD"
       }
     )
   ))));
-  const renderContent = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$d.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React.createElement(Pressable, { onPress: handleCall, style: styles$d.optionButton }, /* @__PURE__ */ React.createElement(
+  const renderContent = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$c.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React.createElement(Pressable, { onPress: handleCall, style: styles$c.optionButton }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
-      style: styles$d.optionText,
+      style: styles$c.optionText,
       text: `Call ${phoneNumber}`,
       variant: "B3_BOLD"
     }
-  ))), /* @__PURE__ */ React.createElement(Pressable, { onPress: onClose, style: styles$d.cancelButton }, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement(Pressable, { onPress: onClose, style: styles$c.cancelButton }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
-      style: styles$d.cancelText,
+      style: styles$c.cancelText,
       text: "Cancel",
       variant: "B2_REGULAR"
     }
   )));
-  return /* @__PURE__ */ React.createElement(View, { style: styles$d.container }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: styles$c.container }, /* @__PURE__ */ React.createElement(
     Modal$1,
     {
       animationType: "slide",
@@ -10566,10 +10618,10 @@ const ContactModal = ({
       visible,
       onRequestClose: onClose
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$d.modalContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$d.modalContent }, renderContent()))
+    /* @__PURE__ */ React.createElement(View, { style: styles$c.modalContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$c.modalContent }, renderContent()))
   ));
 };
-const styles$d = StyleSheet.create({
+const styles$c = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
@@ -10631,26 +10683,76 @@ const styles$d = StyleSheet.create({
 });
 var ContactModel = withThemeProvider(ContactModal);
 
-const styles$c = StyleSheet.create({
+const styles$b = StyleSheet.create({
+  // Outer card: wraps Calendar (which includes the custom header via renderHeader)
+  // and provides the dark-blue background + rounded corners.
+  calendarCard: {
+    borderRadius: moderateScale(12),
+    padding: moderateScale(16),
+    overflow: "hidden"
+  },
+  // Rendered via Calendar's renderHeader prop — sits inside the card layout tree.
+  // flex: 1 is required so justifyContent: 'space-between' works across the full row.
+  calendarHeader: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingBottom: verticalScale(16),
+    borderBottomWidth: 1
+  },
+  monthText: {
+    fontSize: 14,
+    fontWeight: "300",
+    lineHeight: 18
+  },
+  arrowsContainer: {
+    flexDirection: "row",
+    gap: horizontalScale(24)
+  },
   applyButton: {
-    marginTop: verticalScale(50),
-    paddingVertical: verticalScale(14),
+    marginTop: verticalScale(16),
+    height: verticalScale(48),
+    minHeight: verticalScale(48),
+    paddingHorizontal: horizontalScale(24),
+    paddingVertical: verticalScale(12),
     justifyContent: "center",
     alignItems: "center",
-    borderRadius: 0
-  },
-  applyButtonText: {
-    ...FONT_STYLES.L1_REGULAR
+    borderRadius: moderateScale(100),
+    borderWidth: 1
   }
 });
 
 const DateRangePicker = (props) => {
-  const { onButtonPress, btnTitle = "Apply" } = props;
+  const {
+    onButtonPress,
+    btnTitle = "Apply",
+    style: _consumerStyle,
+    theme: _consumerTheme,
+    ...calendarProps
+  } = props;
   const [selectedRange, setSelectedRange] = useState({
     startDate: "",
     endDate: ""
   });
-  const { theme, mode } = useTheme();
+  const [currentMonth, setCurrentMonth] = useState(/* @__PURE__ */ new Date());
+  const { theme } = useTheme();
+  const prevMonth = () => setCurrentMonth((prev) => {
+    const d = new Date(prev);
+    d.setMonth(d.getMonth() - 1);
+    return d;
+  });
+  const nextMonth = () => setCurrentMonth((prev) => {
+    const d = new Date(prev);
+    d.setMonth(d.getMonth() + 1);
+    return d;
+  });
+  const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;
+  const currentDateStr = currentMonth.toISOString().split("T")[0];
+  const monthLabel = currentMonth.toLocaleDateString("en-US", {
+    month: "long",
+    year: "numeric"
+  });
   const onDayPress = (day) => {
     const { dateString } = day;
     const { startDate, endDate } = selectedRange;
@@ -10673,64 +10775,176 @@ const DateRangePicker = (props) => {
       while (start < end) {
         start.setDate(start.getDate() + 1);
         markedDates[start.toISOString().split("T")[0]] = {
-          color: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
-          textColor: NAKHEEL_DEFAULT.NAKHEEL_TEXT_COLOR
+          color: theme.SURFACE_PRIMARY_TRANSPARENT,
+          textColor: theme.CONTENT_PRIMARY
         };
       }
     }
     if (startDate) {
       markedDates[startDate] = {
         startingDay: true,
-        textColor: theme.SURFACE_SECONDARY,
-        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
-          backgroundColor: theme.SURFACE_INVERTED
+        textColor: theme.CONTENT_INVERTED,
+        customContainerStyle: {
+          backgroundColor: theme.SURFACE_INVERTED,
+          borderWidth: 1,
+          borderColor: theme.NOTIFICATIONS_HIGHLIGHT,
+          borderRadius: 200,
+          width: moderateScale(36),
+          height: moderateScale(36),
+          alignItems: "center",
+          justifyContent: "center"
         }
       };
     }
     if (endDate) {
       markedDates[endDate] = {
         endingDay: true,
-        color: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
-        textColor: theme.SURFACE_SECONDARY,
-        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
-          backgroundColor: theme.SURFACE_INVERTED
+        color: theme.SURFACE_PRIMARY_TRANSPARENT,
+        textColor: theme.CONTENT_INVERTED,
+        customContainerStyle: {
+          backgroundColor: theme.SURFACE_INVERTED,
+          borderWidth: 1,
+          borderColor: theme.NOTIFICATIONS_HIGHLIGHT,
+          borderRadius: 200,
+          width: moderateScale(36),
+          height: moderateScale(36),
+          alignItems: "center",
+          justifyContent: "center"
         }
       };
       markedDates[startDate] = {
         startingDay: true,
-        color: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
-        textColor: theme.SURFACE_SECONDARY,
-        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
-          backgroundColor: theme.SURFACE_INVERTED
+        color: theme.SURFACE_PRIMARY_TRANSPARENT,
+        textColor: theme.CONTENT_INVERTED,
+        customContainerStyle: {
+          backgroundColor: theme.SURFACE_INVERTED,
+          borderWidth: 1,
+          borderColor: theme.NOTIFICATIONS_HIGHLIGHT,
+          borderRadius: 200,
+          width: moderateScale(36),
+          height: moderateScale(36),
+          alignItems: "center",
+          justifyContent: "center"
         }
       };
     }
     return markedDates;
   };
   const isButtonDisabled = !selectedRange.startDate || !selectedRange.endDate;
-  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
-    Calendar,
+  const renderCalendarHeader = () => /* @__PURE__ */ React.createElement(
+    View,
     {
-      markedDates: getMarkedDates(),
-      mode: "date",
-      markingType: "period",
-      theme: {
-        calendarBackground: "transparent",
-        arrowColor: theme.CONTENT_PRIMARY,
-        monthTextColor: theme.CONTENT_PRIMARY,
-        dayTextColor: theme.CONTENT_SECONDRY,
-        todayTextColor: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
-        textDisabledColor: theme.CONTENT_DISABLE
+      style: [
+        styles$b.calendarHeader,
+        { borderBottomColor: theme.STROKE_TERTIARY }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Text, { style: [styles$b.monthText, { color: theme.CONTENT_PRIMARY }] }, monthLabel),
+    /* @__PURE__ */ React.createElement(View, { style: styles$b.arrowsContainer }, /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: prevMonth,
+        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
       },
-      style: {
-        backgroundColor: theme.SURFACE_SECONDARY,
-        color: theme.CONTENT_SECONDRY,
-        borderRadius: 0
+      /* @__PURE__ */ React.createElement(Svg$1, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
+        Path,
+        {
+          d: "M15 19.5L7.5 12L15 4.5",
+          stroke: theme.CONTENT_PRIMARY,
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ))
+    ), /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: nextMonth,
+        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
       },
-      onDayPress,
-      firstDay: 1,
-      ...props
-    }
+      /* @__PURE__ */ React.createElement(Svg$1, { width: 16, height: 16, viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React.createElement(
+        Path,
+        {
+          d: "M6.75 3.375L12.375 9L6.75 14.625",
+          stroke: theme.CONTENT_PRIMARY,
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ))
+    ))
+  );
+  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles$b.calendarCard,
+        { backgroundColor: theme.SURFACE_SECONDARY }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      Calendar,
+      {
+        key: monthKey,
+        current: currentDateStr,
+        markedDates: getMarkedDates(),
+        markingType: "period",
+        hideArrows: true,
+        renderHeader: renderCalendarHeader,
+        theme: {
+          calendarBackground: "transparent",
+          dayTextColor: theme.CONTENT_PRIMARY,
+          textDisabledColor: theme.CONTENT_DISABLE_DARK,
+          todayTextColor: theme.CONTENT_PRIMARY,
+          textSectionTitleColor: theme.CONTENT_SECONDRY,
+          textDayFontSize: 16,
+          textDayFontWeight: "500",
+          textDayHeaderFontSize: 11,
+          textDayHeaderFontWeight: "300",
+          // Reduce row gap from default 14px (7+7) to 4px (2+2) to match Figma.
+          weekVerticalMargin: 2,
+          // Remove the calendar body's default 5px horizontal padding so the date
+          // grid aligns flush with the custom renderHeader content.
+          "stylesheet.calendar.main": {
+            container: {
+              paddingLeft: 0,
+              paddingRight: 0,
+              backgroundColor: "transparent"
+            }
+          },
+          // Strip Calendar header container's default padding/margin, zero the
+          // day-names row top margin, and apply uppercase + correct sizing to
+          // each day abbreviation label.
+          "stylesheet.calendar.header": {
+            header: {
+              paddingLeft: 0,
+              paddingRight: 0,
+              marginTop: 0,
+              marginBottom: 0
+            },
+            week: {
+              marginTop: 8,
+              flexDirection: "row",
+              justifyContent: "space-around"
+            },
+            dayHeader: {
+              marginTop: 2,
+              marginBottom: 7,
+              width: 32,
+              textAlign: "center",
+              textTransform: "uppercase",
+              fontSize: 11,
+              fontWeight: "300",
+              color: theme.CONTENT_SECONDRY
+            }
+          }
+        },
+        style: { backgroundColor: "transparent", borderRadius: 0 },
+        onDayPress,
+        firstDay: 1,
+        ...calendarProps
+      }
+    )
   ), /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -10738,11 +10952,8 @@ const DateRangePicker = (props) => {
       onPress: () => {
         onButtonPress(selectedRange?.startDate, selectedRange?.endDate);
       },
-      containerStyle: {
-        ...styles$c.applyButton,
-        backgroundColor: theme.SURFACE_INVERTED
-      },
-      textStyle: { color: theme.CONTENT_INVERTED },
+      variant: "primary",
+      size: "large",
       disabled: isButtonDisabled
     }
   ));
@@ -10766,20 +10977,20 @@ const OurOfficesButton = ({
     TouchableOpacity,
     {
       style: [
-        styles$b.button,
+        styles$a.button,
         { backgroundColor: theme["SURFACE_SECONDARY"] },
         containerStyle
       ],
       onPress
     },
-    leftIcon && /* @__PURE__ */ React.createElement(View, { style: styles$b.iconContainer }, React.cloneElement(leftIcon)),
-    /* @__PURE__ */ React.createElement(View, { style: styles$b.textContainer }, /* @__PURE__ */ React.createElement(
+    leftIcon && /* @__PURE__ */ React.createElement(View, { style: styles$a.iconContainer }, React.cloneElement(leftIcon)),
+    /* @__PURE__ */ React.createElement(View, { style: styles$a.textContainer }, /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         text: title,
         variant: titleVariant,
         textColor: titleColor,
-        style: styles$b.textView
+        style: styles$a.textView
       }
     ), /* @__PURE__ */ React.createElement(
       CustomText$1,
@@ -10787,13 +10998,13 @@ const OurOfficesButton = ({
         text: description,
         variant: descriptionVariant,
         textColor: descriptionColor,
-        style: styles$b.flexWrap
+        style: styles$a.flexWrap
       }
     )),
-    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$b.rightIconContainer }, React.cloneElement(rightIcon))
+    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$a.rightIconContainer }, React.cloneElement(rightIcon))
   );
 };
-const styles$b = StyleSheet.create({
+const styles$a = StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -10817,7 +11028,7 @@ const styles$b = StyleSheet.create({
 });
 var OurOffices = withThemeProvider(OurOfficesButton);
 
-const styles$a = StyleSheet.create({
+const styles$9 = StyleSheet.create({
   iconContainer: {
     position: "relative",
     alignItems: "center"
@@ -10846,10 +11057,10 @@ const NotificationBandge = ({
   if (notificationCount <= 0) {
     return icon;
   }
-  return /* @__PURE__ */ React.createElement(View, { style: styles$a.iconContainer }, icon, /* @__PURE__ */ React.createElement(View, { style: styles$a.badge }, /* @__PURE__ */ React.createElement(Text, { style: [styles$a.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
+  return /* @__PURE__ */ React.createElement(View, { style: styles$9.iconContainer }, icon, /* @__PURE__ */ React.createElement(View, { style: styles$9.badge }, /* @__PURE__ */ React.createElement(Text, { style: [styles$9.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
 };
 
-const createStyles$3 = (theme) => {
+const createStyles$4 = (theme) => {
   return StyleSheet.create({
     // ── ScrollableList ────────────────────────────────────────────
     container: {
@@ -10944,7 +11155,7 @@ const CategoryItem = memo(
     enableTextWrap
   }) => {
     const { theme } = useTheme();
-    const styles = useMemo(() => createStyles$3(theme), [theme]);
+    const styles = useMemo(() => createStyles$4(theme), [theme]);
     const handlePress = useCallback(
       () => onPress(item.name, item.value),
       [onPress, item.name, item.value]
@@ -11041,7 +11252,7 @@ const ScrollableList = ({
     data && data.length > 0 ? data[0].name : null
   );
   const { theme } = useTheme();
-  const styles = useMemo(() => createStyles$3(theme), [theme]);
+  const styles = useMemo(() => createStyles$4(theme), [theme]);
   const activeKey = activeTab ?? selectedItem;
   const handlePress = useCallback(
     (name, value) => {
@@ -11084,7 +11295,7 @@ const ScrollableList = ({
 };
 var category = withThemeProvider(ScrollableList);
 
-const createStyles$2 = (theme) => {
+const createStyles$3 = (theme) => {
   return StyleSheet.create({
     container: {
       flex: 1,
@@ -11162,7 +11373,7 @@ const FeedbackForm = ({
   const isFilled = feedback.length > 0;
   const label = inputLabel ?? inputText;
   const { theme } = useTheme();
-  const styles = createStyles$2(theme);
+  const styles = createStyles$3(theme);
   return /* @__PURE__ */ React.createElement(View, { style: styles.container }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
@@ -11247,7 +11458,7 @@ const CountryDropDown = ({
     setCallingCode(`+${country.callingCode[0]}`);
     getCountryCode(`+${country.callingCode[0]}`);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: [styles$9.container, containerStyle] }, /* @__PURE__ */ React.createElement(View, { style: [styles$9.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: [styles$8.container, containerStyle] }, /* @__PURE__ */ React.createElement(View, { style: [styles$8.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React.createElement(
     CountryPicker,
     {
       withFilter: true,
@@ -11261,20 +11472,20 @@ const CountryDropDown = ({
     Text,
     {
       onPress: () => setPickerVisible(true),
-      style: [styles$9.callingCode, callingCodeStyle]
+      style: [styles$8.callingCode, callingCodeStyle]
     },
     callingCode
-  )), /* @__PURE__ */ React.createElement(View, { style: styles$9.flex }, (isFocused || value) && /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(View, { style: styles$8.flex }, (isFocused || value) && /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
       text: label ?? "",
-      style: styles$9.floatingLabel
+      style: styles$8.floatingLabel
     }
   ), /* @__PURE__ */ React.createElement(
     TextInput,
     {
-      style: [styles$9.input, inputStyle],
+      style: [styles$8.input, inputStyle],
       placeholder: !isFocused ? placeholder : "",
       keyboardType: "phone-pad",
       value,
@@ -11290,13 +11501,13 @@ const CountryDropDown = ({
       variant: "L2_REGULAR",
       text: errorMessage ?? "",
       style: {
-        ...styles$9.errorStyle,
+        ...styles$8.errorStyle,
         color: DHRE_DEFAULT.DH_SEMENTIC_ERROR
       }
     }
   ) : null);
 };
-const styles$9 = StyleSheet.create({
+const styles$8 = StyleSheet.create({
   flex: {
     flex: 1
   },
@@ -11357,6 +11568,7 @@ const CommonTextInput = (props) => {
     keyboardType = "default",
     placeholderText,
     inputStyle,
+    containerStyle,
     maxLength,
     errorMessage,
     helperText,
@@ -11382,10 +11594,10 @@ const CommonTextInput = (props) => {
   const containerBackground = isDisabled ? theme[Theme.SURFACE_PRIMARY] : theme[Theme.SURFACE_TERTIARY_TRANSPARENT];
   const inputTextColor = isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_PRIMARY];
   const placeholderColor = theme[Theme.CONTENT_SECONDRY];
-  const labelColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.CONTENT_TERTIARY] : isFocused ? theme[Theme.CONTENT_PRIMARY] : theme[Theme.CONTENT_TERTIARY];
+  const labelColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_PRIMARY];
   const helperColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_SECONDRY];
   const helperMessage = errorMessage || helperText;
-  return /* @__PURE__ */ React.createElement(Pressable, { onPress: handlePress, style: styles$8.container }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Pressable, { onPress: handlePress, style: [styles$7.container, containerStyle] }, /* @__PURE__ */ React.createElement(
     TextInput$1,
     {
       mode: "outlined",
@@ -11394,7 +11606,7 @@ const CommonTextInput = (props) => {
       spellCheck: false,
       autoCorrect: false,
       outlineStyle: {
-        ...styles$8.outlineStyle,
+        ...styles$7.outlineStyle,
         borderColor: currentBorderColor,
         borderWidth,
         backgroundColor: containerBackground
@@ -11416,7 +11628,8 @@ const CommonTextInput = (props) => {
           primary: labelColor,
           // error drives the error indicator colour
           error: isError ? theme[Theme.ERROR] : labelColor,
-          // background behind the floating label — must be solid to cut through the border
+          // background behind the floating label pill — must be opaque and match the
+          // parent surface; defaults to SURFACE_PRIMARY (standard screen background)
           background: theme[Theme.SURFACE_PRIMARY]
         },
         fonts: {
@@ -11435,12 +11648,7 @@ const CommonTextInput = (props) => {
           }
         }
       },
-      style: [
-        styles$8.input,
-        inputStyle,
-        multiline && styles$8.multilineInput,
-        { backgroundColor: containerBackground }
-      ],
+      style: [styles$7.input, inputStyle, multiline && styles$7.multilineInput],
       contentStyle: {
         fontFamily: InterLight,
         textAlign: isRTL ? "right" : "left"
@@ -11471,7 +11679,7 @@ const CommonTextInput = (props) => {
     {
       style: [
         FONT_STYLES[isDisabled ? FontStyle.BODY2_MEDIUM : FontStyle.BODY2_LIGHT],
-        styles$8.helperStyle,
+        styles$7.helperStyle,
         {
           color: helperColor,
           textAlign: isRTL ? "right" : "left"
@@ -11481,7 +11689,7 @@ const CommonTextInput = (props) => {
     helperMessage
   ) : null);
 };
-const styles$8 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   container: {
     justifyContent: "center"
   },
@@ -11548,7 +11756,7 @@ const CustomDropdown = (props) => {
   const valueTextColor = disable ? theme.CONTENT_TERTIARY : hasValue ? theme.CONTENT_PRIMARY : theme.CONTENT_SECONDRY;
   const helperColor = isError ? theme.ERROR : theme.CONTENT_SECONDRY;
   const helperMessage = errorMessage || helperText;
-  const fieldBackground = theme.SURFACE_SECONDARY;
+  const fieldBackground = theme.SURFACE_TERTIARY_TRANSPARENT;
   const labelColor = theme.CONTENT_PRIMARY;
   const renderLabel = () => {
     if (value || isFocus) {
@@ -11556,11 +11764,11 @@ const CustomDropdown = (props) => {
         Text,
         {
           style: [
-            styles$7.label,
+            styles$6.label,
             FONT_STYLES[FontStyle.BODY2_LIGHT],
             {
-              backgroundColor: fieldBackground,
-              color: labelColor
+              color: labelColor,
+              backgroundColor: theme.SURFACE_PRIMARY
             },
             labelStyle,
             isFocus && (labelFocusStyle ?? { color: labelColor })
@@ -11581,11 +11789,11 @@ const CustomDropdown = (props) => {
   };
   const renderItem = (item) => {
     const isSelected = item[valueField] === value;
-    return /* @__PURE__ */ React.createElement(View, { style: [styles$7.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(View, { style: [styles$6.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React.createElement(
       Text,
       {
         style: [
-          styles$7.itemText,
+          styles$6.itemText,
           FONT_STYLES[FontStyle.BODY2_LIGHT],
           { color: theme.CONTENT_PRIMARY },
           itemTextStyle,
@@ -11595,12 +11803,12 @@ const CustomDropdown = (props) => {
       item[labelField]
     ));
   };
-  return /* @__PURE__ */ React.createElement(View, { style: [styles$7.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
     Dropdown,
     {
       ...props,
       style: [
-        styles$7.dropdown,
+        styles$6.dropdown,
         {
           borderColor: fieldBorderColor,
           borderWidth: fieldBorderWidth,
@@ -11610,18 +11818,18 @@ const CustomDropdown = (props) => {
         isFocus && dropdownFocusStyle
       ],
       placeholderStyle: [
-        styles$7.placeholderStyle,
+        styles$6.placeholderStyle,
         FONT_STYLES[FontStyle.BODY2_LIGHT],
         { color: theme.CONTENT_SECONDRY },
         placeholderStyle
       ],
       selectedTextStyle: [
-        styles$7.selectedTextStyle,
+        styles$6.selectedTextStyle,
         FONT_STYLES[FontStyle.BODY2_LIGHT],
         { color: valueTextColor },
         selectedTextStyle
       ],
-      iconStyle: [styles$7.iconStyle, iconStyle],
+      iconStyle: [styles$6.iconStyle, iconStyle],
       data: data ?? [],
       labelField,
       valueField,
@@ -11643,7 +11851,7 @@ const CustomDropdown = (props) => {
       containerStyle: [
         {
           marginTop: verticalScale(5),
-          backgroundColor: fieldBackground,
+          backgroundColor: theme.SURFACE_SECONDARY,
           borderColor: theme.STROKE_TERTIARY,
           borderWidth: 1,
           borderRadius: DHRE_RADIUS_BASE.RADIUS_8
@@ -11651,7 +11859,7 @@ const CustomDropdown = (props) => {
         menuContainerStyle
       ],
       activeColor: activeColor ?? theme.SURFACE_SECONDARY,
-      itemContainerStyle: [styles$7.itemListStyle, itemContainerStyle],
+      itemContainerStyle: [styles$6.itemListStyle, itemContainerStyle],
       disable,
       autoScroll,
       dropdownPosition,
@@ -11664,7 +11872,7 @@ const CustomDropdown = (props) => {
     Text,
     {
       style: [
-        styles$7.helperText,
+        styles$6.helperText,
         FONT_STYLES[FontStyle.BODY2_LIGHT],
         { color: helperColor }
       ]
@@ -11672,7 +11880,7 @@ const CustomDropdown = (props) => {
     helperMessage
   ) : null);
 };
-const styles$7 = StyleSheet.create({
+const styles$6 = StyleSheet.create({
   container: {
     marginVertical: verticalScale(4),
     direction: "ltr",
@@ -11719,7 +11927,7 @@ const styles$7 = StyleSheet.create({
 });
 var DropDown = withThemeProvider(CustomDropdown);
 
-const styles$6 = StyleSheet.create({
+const styles$5 = StyleSheet.create({
   mainContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -11778,18 +11986,18 @@ const CustomSwitchBtn = ({
     {
       disabled,
       onPress: toggleSwitch,
-      style: { ...styles$6.mainContainer, ...containerStyle }
+      style: { ...styles$5.mainContainer, ...containerStyle }
     },
     /* @__PURE__ */ React.createElement(
       Animated.View,
       {
-        style: [styles$6.circle, { transform: [{ translateX }], ...circleStyle }]
+        style: [styles$5.circle, { transform: [{ translateX }], ...circleStyle }]
       }
     ),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        style: [styles$6.activeText, value ? inActiveTextStyle : activeTextStyle],
+        style: [styles$5.activeText, value ? inActiveTextStyle : activeTextStyle],
         text: activeText,
         variant: activeTextVariant
       }
@@ -11798,7 +12006,7 @@ const CustomSwitchBtn = ({
       CustomTypography,
       {
         style: [
-          styles$6.inActiveText,
+          styles$5.inActiveText,
           value ? activeTextStyle : inActiveTextStyle
         ],
         text: inActiveText,
@@ -11836,7 +12044,7 @@ class ToastService {
 }
 const toastService = new ToastService();
 
-const createStyles$1 = (theme) => StyleSheet.create({
+const createStyles$2 = (theme) => StyleSheet.create({
   listContainer: {
     paddingHorizontal: 10,
     alignItems: "center"
@@ -11878,7 +12086,7 @@ const TagsComponent = ({
   unselectedTagButton
 }) => {
   const { theme } = useTheme();
-  const styles = createStyles$1(theme);
+  const styles = createStyles$2(theme);
   const reorderedTags = () => {
     if (selectedTag) {
       return [
@@ -11928,7 +12136,7 @@ const TagsComponent = ({
 };
 var TagSingleSelection = withThemeProvider(TagsComponent);
 
-const styles$5 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   textInputContainer: {
     flexDirection: "row",
     gap: DHRE_PADDING.MD,
@@ -12111,12 +12319,12 @@ const OTPInput = React.forwardRef(
           ...otpHeaderTextStyle
         }
       }
-    ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$4.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
       TextInput,
       {
         key: index?.toString(),
         style: {
-          ...styles$5.textInputStyle,
+          ...styles$4.textInputStyle,
           color: !isEditable ? theme$1.CONTENT_DISABLE_DARK : otp.length === length ? theme$1.STROKE_PRIMARY : theme$1.CONTENT_PRIMARY,
           backgroundColor: !isEditable ? theme$1.SURFACE_PRIMARY : theme$1.SURFACE_TERTIARY_TRANSPARENT,
           borderColor: !isEditable ? theme$1.CONTENT_DISABLE_DARK : errorMessage || isInValidOtp && otp?.length === length ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : otp[index] ? theme$1.STROKE_PRIMARY : theme$1.CONTENT_SECONDRY,
@@ -12137,7 +12345,7 @@ const OTPInput = React.forwardRef(
         selectionColor: theme$1.CONTENT_PRIMARY,
         editable: isEditable
       }
-    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$5.timerIconContainer }, errorMessage ? /* @__PURE__ */ React.createElement(React.Fragment, null, errorIcon ? React.cloneElement(errorIcon, {
+    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React.createElement(View, { style: styles$4.timerContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$4.timerIconContainer }, errorMessage ? /* @__PURE__ */ React.createElement(React.Fragment, null, errorIcon ? React.cloneElement(errorIcon, {
       width: DHRE_SPACING_BASE.SPACE_20,
       height: DHRE_SPACING_BASE.SPACE_20
     }) : null, /* @__PURE__ */ React.createElement(
@@ -12161,7 +12369,7 @@ const OTPInput = React.forwardRef(
       Pressable,
       {
         onPress: onClickResendOTP,
-        style: styles$5.resendOTPStyle,
+        style: styles$4.resendOTPStyle,
         disabled: disableResendButton() || !isResendOtpEnable
       },
       /* @__PURE__ */ React.createElement(
@@ -12175,7 +12383,7 @@ const OTPInput = React.forwardRef(
           }
         }
       )
-    )), errorMessageMaxReachCount ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
+    )), errorMessageMaxReachCount ? /* @__PURE__ */ React.createElement(View, { style: styles$4.resendOtpContainer }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: errorMessageMaxReachCount,
@@ -12190,7 +12398,7 @@ const OTPInput = React.forwardRef(
 );
 OTPInput.displayName = "OTPInput";
 
-const styles$4 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
   stepperContainer: {
     flexDirection: "row",
     marginBottom: 24,
@@ -12284,27 +12492,27 @@ const Stepper = ({
   const { theme } = useTheme();
   const renderCircleStyle = (status) => {
     if (status === Status.Active) {
-      return { ...styles$4.activeStepCircle, borderColor: theme.CONTENT_PRIMARY };
+      return { ...styles$3.activeStepCircle, borderColor: theme.CONTENT_PRIMARY };
     } else if (status === Status.Inactive) {
       return {
-        ...styles$4.inactiveStepCircle,
+        ...styles$3.inactiveStepCircle,
         borderColor: theme.CONTENT_SECONDRY
       };
     } else if (status === Status.Completed) {
-      return { ...styles$4.completeStepCircle, backgroundColor: theme.SUCCESS };
+      return { ...styles$3.completeStepCircle, backgroundColor: theme.SUCCESS };
     } else {
-      return { ...styles$4.stepCountCircle, borderColor: theme.BORDER_PRIMARY };
+      return { ...styles$3.stepCountCircle, borderColor: theme.BORDER_PRIMARY };
     }
   };
   const renderLableStyle = (status) => {
     if (status === Status.Active) {
-      return { ...styles$4.activeStepLabel, color: theme.CONTENT_PRIMARY };
+      return { ...styles$3.activeStepLabel, color: theme.CONTENT_PRIMARY };
     } else if (status === Status.Inactive) {
-      return { ...styles$4.inactiveStepLabel, color: theme.CONTENT_SECONDRY };
+      return { ...styles$3.inactiveStepLabel, color: theme.CONTENT_SECONDRY };
     } else if (status === Status.Completed) {
-      return { ...styles$4.completeStepLabel, color: theme.CONTENT_PRIMARY };
+      return { ...styles$3.completeStepLabel, color: theme.CONTENT_PRIMARY };
     } else {
-      return { ...styles$4.countStepLabel, color: theme.CONTENT_PRIMARY };
+      return { ...styles$3.countStepLabel, color: theme.CONTENT_PRIMARY };
     }
   };
   const renderDividerStyle = (status) => {
@@ -12314,25 +12522,25 @@ const Stepper = ({
       return { borderColor: theme.BORDER_PRIMARY };
     } else if (status === Status.Completed) {
       return {
-        ...styles$4.completeStepDivider,
+        ...styles$3.completeStepDivider,
         borderColor: theme.CONTENT_PRIMARY
       };
     } else {
       return { borderColor: theme.CONTENT_SECONDRY };
     }
   };
-  return /* @__PURE__ */ React.createElement(View, { style: { ...styles$4.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
+  return /* @__PURE__ */ React.createElement(View, { style: { ...styles$3.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
     const stepCircleStyle = renderCircleStyle(item?.status);
     const dividerStyle = renderDividerStyle(item?.status);
     const labelStyle = renderLableStyle(item?.status);
-    const lastViewStyle = index === data?.length - 1 ? styles$4.lastStepWrapper : null;
+    const lastViewStyle = index === data?.length - 1 ? styles$3.lastStepWrapper : null;
     return /* @__PURE__ */ React.createElement(
       View,
       {
         key: index?.toString(),
-        style: { ...styles$4.stepperWrapper, ...lastViewStyle }
+        style: { ...styles$3.stepperWrapper, ...lastViewStyle }
       },
-      /* @__PURE__ */ React.createElement(View, { style: styles$4.stepperSeparatorContainer }, /* @__PURE__ */ React.createElement(View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: styles$3.stepperSeparatorContainer }, /* @__PURE__ */ React.createElement(View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: item?.step,
@@ -12341,8 +12549,8 @@ const Stepper = ({
             color: theme.CONTENT_PRIMARY
           }
         }
-      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React.createElement(View, { style: { ...styles$4.separator, ...dividerStyle } })),
-      /* @__PURE__ */ React.createElement(View, { style: styles$4.lableContainer }, /* @__PURE__ */ React.createElement(
+      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React.createElement(View, { style: { ...styles$3.separator, ...dividerStyle } })),
+      /* @__PURE__ */ React.createElement(View, { style: styles$3.lableContainer }, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: item?.label,
@@ -12353,17 +12561,22 @@ const Stepper = ({
     );
   }));
 };
-var index$3 = withThemeProvider(Stepper);
+var index$4 = withThemeProvider(Stepper);
 
-const styles$3 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center"
   },
+  gradientShell: {
+    borderRadius: DHRE_RADIUS.PILL,
+    padding: OUTLINED_BORDER_WIDTH
+  },
   sliderContainer: {
-    height: verticalScale(48),
-    // borderRadius: moderateScale(25),
+    height: DHRE_COMPONENT_HEIGHT.BUTTON_MD - OUTLINED_BORDER_WIDTH * 2,
+    // pill shape — overflow:hidden clips all child content to the rounded boundary
+    borderRadius: DHRE_RADIUS.PILL,
     overflow: "hidden",
     justifyContent: "center"
   },
@@ -12374,11 +12587,13 @@ const styles$3 = StyleSheet.create({
     justifyContent: "center"
   },
   button: {
-    height: verticalScale(40),
+    height: DHRE_COMPONENT_HEIGHT.INPUT_SM,
     justifyContent: "center",
     alignItems: "center",
-    // borderRadius: moderateScale(20),
-    margin: 4
+    // circular thumb — consumer can override via sliderStyle prop
+    borderRadius: DHRE_RADIUS.PILL,
+    // 4px inset keeps thumb inside pill boundary (matches Figma left:4, top:4)
+    margin: DHRE_PADDING.XS
   },
   buttonTextContainer: {
     position: "absolute",
@@ -12388,11 +12603,10 @@ const styles$3 = StyleSheet.create({
     top: 0,
     alignItems: "center",
     justifyContent: "center"
-    // borderRadius: 25,
   }
 });
 
-const BUTTON_WIDTH = 40;
+const DEFAULT_SIZE = 40;
 const CustomSlideButton = React.forwardRef(
   ({
     label,
@@ -12402,17 +12616,21 @@ const CustomSlideButton = React.forwardRef(
     textStyle,
     containerStyle,
     sliderStyle,
-    size = BUTTON_WIDTH,
+    size = DEFAULT_SIZE,
     sliderBackgroundColor = "#fff",
     sliderTextColor = "#000",
-    resetTimer = 2e3
+    resetTimer = 2e3,
+    isRTL = false,
+    completedContainerStyle
   }, ref) => {
+    const thumbOffset = verticalScale(size) + DHRE_PADDING.XS * 2;
     const value = useRef(0);
     const cardRef = useRef(null);
     const [translateX] = useState(new Animated.Value(0));
     const sliderConteinerRef = useRef(null);
     const [color] = useState(new Animated.Value(0));
     const [sliderBackgroundColorRef] = useState(new Animated.Value(0));
+    const [isCompleted, setIsCompleted] = useState(false);
     React.useImperativeHandle(ref, () => ({
       reset() {
         resetAll();
@@ -12423,15 +12641,18 @@ const CustomSlideButton = React.forwardRef(
       if (cardRef.current) {
         cardRef.current.setNativeProps({
           style: { width }
-          // Change the width here
         });
         value.current = width;
         sliderConteinerRef?.current?.setNativeProps({
           style: { width }
         });
       }
+      if (isRTL) {
+        translateX.setValue(value.current - thumbOffset);
+      }
     };
     const resetAll = () => {
+      setIsCompleted(false);
       onReset?.();
       Animated.timing(sliderBackgroundColorRef, {
         toValue: 0,
@@ -12448,7 +12669,7 @@ const CustomSlideButton = React.forwardRef(
         // because we're animating the color, not layout
       }).start();
       Animated.timing(translateX, {
-        toValue: 0,
+        toValue: isRTL ? value.current - thumbOffset : 0,
         useNativeDriver: false
       }).start();
     };
@@ -12459,39 +12680,73 @@ const CustomSlideButton = React.forwardRef(
       },
       onPanResponderTerminationRequest: () => false,
       onPanResponderMove: (evt, gestureState) => {
-        if (gestureState.dx > 0 && gestureState.dx <= value?.current - BUTTON_WIDTH - 8) {
-          translateX.setValue(gestureState.dx);
-          const colorValue = gestureState.dx > value.current / 3 ? 1 : 0;
-          Animated.timing(color, {
-            toValue: colorValue,
-            duration: 0,
-            // no transition time, immediate change
-            useNativeDriver: false
-            // because we're animating the color, not layout
-          }).start();
+        if (isRTL) {
+          if (gestureState.dx < 0 && gestureState.dx >= -(value.current - thumbOffset)) {
+            translateX.setValue(value.current - thumbOffset + gestureState.dx);
+            const colorValue = gestureState.dx < -(value.current / 3) ? 1 : 0;
+            Animated.timing(color, {
+              toValue: colorValue,
+              duration: 0,
+              // no transition time, immediate change
+              useNativeDriver: false
+            }).start();
+          }
+        } else {
+          if (gestureState.dx > 0 && gestureState.dx <= value.current - thumbOffset) {
+            translateX.setValue(gestureState.dx);
+            const colorValue = gestureState.dx > value.current / 3 ? 1 : 0;
+            Animated.timing(color, {
+              toValue: colorValue,
+              duration: 0,
+              // no transition time, immediate change
+              useNativeDriver: false
+            }).start();
+          }
         }
       },
       onPanResponderRelease: (e, gestureState) => {
-        if (gestureState.dx >= value.current * 0.8) {
-          Animated.timing(translateX, {
-            toValue: value?.current - (BUTTON_WIDTH + 8),
-            // Slide to the end
-            duration: 300,
-            useNativeDriver: false
-          }).start();
-          Animated.timing(sliderBackgroundColorRef, {
-            toValue: 1,
-            duration: 0,
-            // no transition time, immediate change
-            useNativeDriver: false
-            // because we're animating the color, not layout
-          }).start();
-          onComplete?.();
-          setTimeout(() => {
+        if (isRTL) {
+          if (gestureState.dx <= -(value.current * 0.8)) {
+            Animated.timing(translateX, {
+              toValue: 0,
+              // snap to leftmost position (completed side for RTL)
+              duration: 300,
+              useNativeDriver: false
+            }).start();
+            Animated.timing(sliderBackgroundColorRef, {
+              toValue: 1,
+              duration: 0,
+              useNativeDriver: false
+            }).start();
+            setIsCompleted(true);
+            onComplete?.();
+            setTimeout(() => {
+              resetAll();
+            }, resetTimer);
+          } else {
             resetAll();
-          }, resetTimer);
+          }
         } else {
-          resetAll();
+          if (gestureState.dx >= value.current * 0.8) {
+            Animated.timing(translateX, {
+              toValue: value.current - thumbOffset,
+              // slide to the end
+              duration: 300,
+              useNativeDriver: false
+            }).start();
+            Animated.timing(sliderBackgroundColorRef, {
+              toValue: 1,
+              duration: 0,
+              useNativeDriver: false
+            }).start();
+            setIsCompleted(true);
+            onComplete?.();
+            setTimeout(() => {
+              resetAll();
+            }, resetTimer);
+          } else {
+            resetAll();
+          }
         }
       },
       onPanResponderTerminate: () => {
@@ -12507,49 +12762,62 @@ const CustomSlideButton = React.forwardRef(
       outputRange: [sliderBackgroundColor, "transparent"]
     });
     const { theme } = useTheme();
-    return /* @__PURE__ */ React.createElement(View, { style: {
-      ...styles$3.sliderContainer,
-      backgroundColor: theme.SURFACE_INVERTED,
-      ...containerStyle
-    }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React.createElement(
-      Animated.View,
-      {
-        style: [styles$3.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
-        ref: sliderConteinerRef
-      }
-    ), /* @__PURE__ */ React.createElement(
-      View,
-      {
-        style: styles$3.buttonTextContainer
-      },
-      /* @__PURE__ */ React.createElement(Animated.Text, { style: [{
-        alignSelf: "center",
-        ...textStyle
-      }, { color: textColor }] }, label)
-    ), /* @__PURE__ */ React.createElement(
-      Animated.View,
+    return /* @__PURE__ */ React.createElement(
+      LinearGradient$1,
       {
-        style: [styles$3.slider, { transform: [{ translateX }] }],
-        ...panResponder.panHandlers
+        colors: OUTLINED_GRADIENT_COLORS,
+        start: OUTLINED_GRADIENT_START,
+        end: OUTLINED_GRADIENT_END,
+        style: styles$2.gradientShell
       },
       /* @__PURE__ */ React.createElement(
         View,
         {
-          style: {
-            ...styles$3.button,
-            backgroundColor: theme.SURFACE_PRIMARY,
-            width: verticalScale(size),
-            height: verticalScale(size),
-            // borderRadius: verticalScale(size / 2),
-            ...sliderStyle
-          }
+          style: [
+            styles$2.sliderContainer,
+            { backgroundColor: theme.SURFACE_INVERTED },
+            containerStyle,
+            isCompleted && { backgroundColor: theme.BUTTON_SUCCESS_FILL },
+            isCompleted ? completedContainerStyle : void 0
+          ],
+          onLayout: handleLayout,
+          ref: cardRef
         },
-        icon
+        /* @__PURE__ */ React.createElement(
+          Animated.View,
+          {
+            style: [styles$2.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
+            ref: sliderConteinerRef
+          }
+        ),
+        /* @__PURE__ */ React.createElement(View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React.createElement(Animated.Text, { style: [{ alignSelf: "center", ...textStyle }, { color: textColor }] }, label)),
+        /* @__PURE__ */ React.createElement(
+          Animated.View,
+          {
+            style: [styles$2.slider, { transform: [{ translateX }] }],
+            ...panResponder.panHandlers
+          },
+          /* @__PURE__ */ React.createElement(
+            View,
+            {
+              style: {
+                ...styles$2.button,
+                backgroundColor: theme.SURFACE_PRIMARY,
+                width: verticalScale(size),
+                height: verticalScale(size),
+                ...sliderStyle
+              }
+            },
+            icon
+          )
+        )
       )
-    ));
+    );
   }
 );
-var index$2 = withThemeProvider(CustomSlideButton);
+var index$3 = withThemeProvider(
+  CustomSlideButton
+);
 
 const DHRE_STROKE = {
   NONE: 0,
@@ -12609,7 +12877,7 @@ const AVATAR_SPEC = {
     ringInset: 6
   }
 };
-const createStyles = (size, theme) => {
+const createStyles$1 = (size, theme) => {
   const dimensions = AVATAR_SPEC[size];
   return StyleSheet.create({
     container: {
@@ -12685,9 +12953,9 @@ const createStyles = (size, theme) => {
     }
   });
 };
-const smallStyles = (theme) => createStyles(AvatarSize.SMALL, theme);
-const mediumStyles = (theme) => createStyles(AvatarSize.MEDIUM, theme);
-const largeStyles = (theme) => createStyles(AvatarSize.LARGE, theme);
+const smallStyles = (theme) => createStyles$1(AvatarSize.SMALL, theme);
+const mediumStyles = (theme) => createStyles$1(AvatarSize.MEDIUM, theme);
+const largeStyles = (theme) => createStyles$1(AvatarSize.LARGE, theme);
 const getStylesBySize = (size, theme) => {
   switch (size) {
     case "small":
@@ -12838,7 +13106,7 @@ const Avatar = (props) => {
 };
 var Avatar$1 = withThemeProvider(Avatar);
 
-const styles$2 = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   accordionContainer: {
     gap: verticalScale(8),
     marginHorizontal: horizontalScale(24),
@@ -12943,13 +13211,13 @@ const AppointmentCard = ({
       isOpen,
       onToggle,
       containerStyle: {
-        ...styles$2.accordionStyle,
+        ...styles$1.accordionStyle,
         backgroundColor: theme.SURFACE_SECONDARY,
         borderColor: theme.BORDER_SEPERATOR_HEADER,
         borderBottomColor: theme.BORDER_SEPERATOR_HEADER
       },
-      headerStyle: styles$2.accordionHeader,
-      headerComponent: () => /* @__PURE__ */ React.createElement(View, { style: styles$2.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React.createElement(View, { style: styles$2.accordionText }, /* @__PURE__ */ React.createElement(
+      headerStyle: styles$1.accordionHeader,
+      headerComponent: () => /* @__PURE__ */ React.createElement(View, { style: styles$1.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React.createElement(View, { style: styles$1.accordionText }, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: headerTitle,
@@ -12970,18 +13238,18 @@ const AppointmentCard = ({
       View,
       {
         style: [
-          styles$2.accordionDetails,
+          styles$1.accordionDetails,
           { borderTopColor: theme.BORDER_SEPERATOR_HEADER }
         ]
       },
-      /* @__PURE__ */ React.createElement(View, { style: styles$2.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React.createElement(View, { style: styles$2.infoColumn, key: title2 }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: styles$1.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React.createElement(View, { style: styles$1.infoColumn, key: title2 }, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: title2,
           variant: FontStyle.L3_REGULAR,
           style: { color: theme.CONTENT_SECONDRY }
         }
-      ), /* @__PURE__ */ React.createElement(View, { style: styles$2.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React.createElement(View, { style: styles$1.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: value,
@@ -12996,7 +13264,7 @@ const AppointmentCard = ({
           text: directionText,
           variant: FontStyle.L2_REGULAR,
           style: [
-            styles$2.getDirectionsText,
+            styles$1.getDirectionsText,
             { color: theme.CONTENT_PRIMARY }
           ],
           onPress: onDirectionPress
@@ -13006,7 +13274,7 @@ const AppointmentCard = ({
         View,
         {
           style: [
-            styles$2.infoContainer,
+            styles$1.infoContainer,
             {
               backgroundColor: theme.SURFACE_TERTIARY
             }
@@ -13026,7 +13294,7 @@ const AppointmentCard = ({
         View,
         {
           style: [
-            styles$2.actionsContainer,
+            styles$1.actionsContainer,
             {
               borderTopColor: theme.BORDER_SEPERATOR_HEADER
             }
@@ -13038,7 +13306,7 @@ const AppointmentCard = ({
             text: viewText,
             variant: FontStyle.L2_REGULAR,
             style: [
-              styles$2.viewText,
+              styles$1.viewText,
               {
                 color: theme.CONTENT_PRIMARY
               }
@@ -13046,12 +13314,12 @@ const AppointmentCard = ({
             onPress: onViewDetailsPress
           }
         ),
-        /* @__PURE__ */ React.createElement(View, { style: styles$2.actionIcons }, /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(View, { style: styles$1.actionIcons }, /* @__PURE__ */ React.createElement(
           CustomIcon$1,
           {
             icon: deleteIcon,
             containerStyle: {
-              ...styles$2.iconContainer,
+              ...styles$1.iconContainer,
               backgroundColor: theme.SURFACE_INVERTED
             },
             onPress: onDeletePress
@@ -13061,7 +13329,7 @@ const AppointmentCard = ({
           {
             icon: editIcon,
             containerStyle: {
-              ...styles$2.iconContainer,
+              ...styles$1.iconContainer,
               backgroundColor: theme.SURFACE_INVERTED
             },
             onPress: onEditPress
@@ -13071,26 +13339,37 @@ const AppointmentCard = ({
     )
   );
 };
-var index$1 = withThemeProvider(AppointmentCard);
+var index$2 = withThemeProvider(AppointmentCard);
 
-const styles$1 = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
-    justifyContent: "space-between",
     alignItems: "center",
-    paddingHorizontal: horizontalScale(24),
-    paddingVertical: verticalScale(16),
-    borderTopWidth: 1,
-    borderBottomWidth: 1
+    padding: moderateScale(12),
+    columnGap: horizontalScale(12)
+  },
+  imageWrapper: {
+    width: moderateScale(112),
+    height: moderateScale(112),
+    borderRadius: moderateScale(8),
+    overflow: "hidden"
+  },
+  brandBadge: {
+    position: "absolute",
+    top: moderateScale(8),
+    right: moderateScale(8),
+    // width: moderateScale(40),
+    // height: moderateScale(40),
+    // borderRadius: moderateScale(120),
+    overflow: "hidden",
+    // backgroundColor: '#FFFFFF',
+    alignItems: "center",
+    justifyContent: "center"
   },
   propertyInfo: {
     flex: 1,
-    rowGap: verticalScale(4)
-  },
-  arrowIconContainer: {
-    width: moderateScale(32),
-    height: moderateScale(32),
-    borderRadius: moderateScale(25)
+    justifyContent: "center",
+    rowGap: verticalScale(8)
   },
   propertyNumber: {
     flexDirection: "row",
@@ -13111,87 +13390,104 @@ const PropertyDetails = ({
   subTitleStyle,
   propertyNumberStyle,
   onRightIconPress,
-  titleStyle
+  titleStyle,
+  isSelected = false
 }) => {
   const { theme } = useTheme();
   return /* @__PURE__ */ React.createElement(
     View,
     {
-      style: {
-        ...styles$1.container,
-        backgroundColor: theme.SURFACE_SECONDARY,
-        borderColor: theme.BORDER_SEPERATOR_HEADER,
-        ...containerStyle,
-        ...{ borderRadius: 0 }
-      }
+      style: [
+        styles.container,
+        {
+          backgroundColor: theme.SURFACE_PRIMARY,
+          borderColor: isSelected ? theme.STROKE_ACTIVE : theme.STROKE_TERTIARY
+        },
+        isSelected && {
+          shadowColor: "rgba(0,157,179,0.1)",
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 1,
+          shadowRadius: 10,
+          elevation: 4
+        },
+        containerStyle
+      ]
     },
-    React.cloneElement(icon, {
-      width: moderateScale(87),
-      height: moderateScale(87),
-      borderRadius: 0
-    }),
-    /* @__PURE__ */ React.createElement(View, { style: styles$1.propertyInfo }, brandIcon, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles.imageWrapper }, React.cloneElement(icon, {
+      width: "100%",
+      height: "100%",
+      borderRadius: DHRE_RADIUS.MD
+    }), brandIcon && /* @__PURE__ */ React.createElement(View, { style: styles.brandBadge }, brandIcon)),
+    /* @__PURE__ */ React.createElement(View, { style: styles.propertyInfo }, propertyNumber && /* @__PURE__ */ React.createElement(View, { style: [styles.propertyNumber, propertyNumberStyle] }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        text: title,
-        variant: FontStyle.L2_REGULAR,
-        style: [{ color: theme.CONTENT_PRIMARY }, titleStyle]
+        text: propertyNumber,
+        variant: FontStyle.BODY3_LIGHT,
+        style: { color: theme.CONTENT_SECONDRY }
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), hintIcon), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: subTitle,
-        variant: FontStyle.L1_REGULAR,
+        variant: FontStyle.BODY4_LIGHT,
         style: [{ color: theme.CONTENT_PRIMARY }, subTitleStyle]
       }
-    ), propertyNumber && /* @__PURE__ */ React.createElement(View, { style: [styles$1.propertyNumber, propertyNumberStyle] }, /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        text: propertyNumber,
-        variant: FontStyle.L2_REGULAR,
-        style: {
-          color: theme.CONTENT_SECONDRY
-        }
+        text: title,
+        variant: FontStyle.BODY1_MEDIUM,
+        style: [{ color: theme.CONTENT_PRIMARY }, titleStyle]
       }
-    ), hintIcon)),
+    )),
     btnIcon && /* @__PURE__ */ React.createElement(
       CustomIcon$1,
       {
         icon: btnIcon,
-        containerStyle: {
-          ...styles$1.arrowIconContainer,
-          backgroundColor: theme.SURFACE_INVERTED
-        },
         onPress: onRightIconPress
       }
     )
   );
 };
-var index = withThemeProvider(PropertyDetails);
+var index$1 = withThemeProvider(PropertyDetails);
 
-const styles = StyleSheet.create({
-  container: {
-    rowGap: verticalScale(12)
-  },
-  optionContainer: {
-    flexDirection: "row",
-    columnGap: horizontalScale(8),
-    alignItems: "center"
-  },
-  radioButton: {
-    width: moderateScale(16),
-    height: moderateScale(16),
-    borderRadius: moderateScale(10),
-    borderWidth: moderateScale(1.5),
-    borderColor: "#000"
-  },
-  radioButtonSelected: {
-    backgroundColor: "#000"
-  },
-  label: {
-    color: "#000"
-  }
-});
+const createStyles = (themeColors, size, radioColor) => {
+  const radioSize = size === "large" ? moderateScale(24) : moderateScale(20);
+  const dotSize = size === "large" ? moderateScale(12) : moderateScale(10);
+  const resolvedRadioColor = radioColor ?? themeColors[Theme.STROKE_ACTIVE];
+  return StyleSheet.create({
+    container: {
+      rowGap: verticalScale(12)
+    },
+    optionContainer: {
+      flexDirection: "row",
+      columnGap: horizontalScale(8),
+      alignItems: "flex-start"
+    },
+    radioButton: {
+      width: radioSize,
+      height: radioSize,
+      borderRadius: moderateScale(100),
+      borderWidth: 1,
+      borderColor: resolvedRadioColor,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    radioButtonSelected: {
+      borderWidth: 2,
+      backgroundColor: themeColors[Theme.CONTENT_INVERTED]
+    },
+    radioButtonInnerDot: {
+      width: dotSize,
+      height: dotSize,
+      borderRadius: moderateScale(50),
+      backgroundColor: resolvedRadioColor
+    },
+    label: {
+      color: themeColors[Theme.CONTENT_PRIMARY]
+    }
+  });
+};
 
 const RadioButtonGroup = ({
   data,
@@ -13199,8 +13495,13 @@ const RadioButtonGroup = ({
   containerStyle,
   labelStyle,
   optionContainerStyle,
-  selectedValue
+  selectedValue,
+  size = "large",
+  fontVariant,
+  radioColor
 }) => {
+  const { theme } = useTheme();
+  const styles = createStyles(theme, size, radioColor);
   const [selectedOption, setSelectedOption] = useState(
     selectedValue ?? data[0]?.value
   );
@@ -13208,12 +13509,14 @@ const RadioButtonGroup = ({
     setSelectedOption(item.value);
     onSelect(item);
   };
+  const resolvedFontVariant = fontVariant ?? (size === "small" ? FontStyle.BODY2_MEDIUM : FontStyle.BODY1_MEDIUM);
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle] }, data?.map((item) => /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
       key: item.value,
       style: [styles.optionContainer, optionContainerStyle],
-      onPress: () => handleSelect(item)
+      onPress: () => handleSelect(item),
+      activeOpacity: 1
     },
     /* @__PURE__ */ React.createElement(
       View,
@@ -13222,18 +13525,20 @@ const RadioButtonGroup = ({
           styles.radioButton,
           selectedOption === item.value && styles.radioButtonSelected
         ]
-      }
+      },
+      selectedOption === item.value && /* @__PURE__ */ React.createElement(View, { style: styles.radioButtonInnerDot })
     ),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        variant: FontStyle.L1_REGULAR,
+        variant: resolvedFontVariant,
         text: item.label,
         style: [styles.label, labelStyle]
       }
     )
   )));
 };
+var index = withThemeProvider(RadioButtonGroup);
 
-export { Accordion$1 as Accordion, AnimationWithImperativeApi as AnimationLoitte, index$1 as AppointmentCard, Avatar$1 as Avatar, AvatarSize, Background$1 as Background, BackgroundVariant, Badge$1 as Badge, BottomDrawer$1 as BottomDrawer, Button, Cards, category as Category, CheckBox, Chip$1 as Chip, ContactModel, CountryDropDown as CountryPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon$1 as CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar$1 as CustomProgressBar, CustomSearchBar$1 as CustomSearchBar, index$2 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_AVATAR_SIZE, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_COMPONENT_HEIGHT, DHRE_CORE_BLUE, DHRE_CYAN_HIGHLIGHT, DHRE_DEEP_SPACE_BLUE, DHRE_DEFAULT, DHRE_ICON_SIZE, DHRE_IMAGE_SIZE, DHRE_INFO_BLUE, DHRE_ORANGE_WARNING, DHRE_PADDING, DHRE_PADDING_BASE, DHRE_RADIUS, DHRE_RADIUS_BASE, DHRE_RED_ERROR, DHRE_SPACING, DHRE_SPACING_BASE, DHRE_STROKE, DHRE_SUCCESS_GREEN, DHRE_WHITE, DateRangePicker$1 as DateRangePicker, DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, Line, Loader$1 as Loader, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index as PropertyDetails, RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$3 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, Textinput as TextInput, Theme, ToastWithProvider as Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { Accordion$1 as Accordion, AnimationWithImperativeApi as AnimationLoitte, index$2 as AppointmentCard, Avatar$1 as Avatar, AvatarSize, Background$1 as Background, BackgroundVariant, Badge$1 as Badge, BottomDrawer$1 as BottomDrawer, Button, Cards, category as Category, CheckBox, Chip$1 as Chip, ContactModel, CountryDropDown as CountryPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon$1 as CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar$1 as CustomProgressBar, CustomSearchBar$1 as CustomSearchBar, index$3 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_AVATAR_SIZE, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_COMPONENT_HEIGHT, DHRE_CONFIRMATION_BASE_GRADIENT, DHRE_CONFIRMATION_ERROR_GRADIENT, DHRE_CORE_BLUE, DHRE_CYAN_HIGHLIGHT, DHRE_DEEP_SPACE_BLUE, DHRE_DEFAULT, DHRE_ICON_SIZE, DHRE_IMAGE_SIZE, DHRE_INFO_BLUE, DHRE_ORANGE_WARNING, DHRE_PADDING, DHRE_PADDING_BASE, DHRE_RADIUS, DHRE_RADIUS_BASE, DHRE_RED_ERROR, DHRE_SPACING, DHRE_SPACING_BASE, DHRE_STROKE, DHRE_SUCCESS_GREEN, DHRE_WHITE, DateRangePicker$1 as DateRangePicker, DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, Line, Loader$1 as Loader, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index$1 as PropertyDetails, index as RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$4 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, Textinput as TextInput, Theme, ToastWithProvider as Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
 //# sourceMappingURL=index.mjs.map