dhre-ui-kit 3.0.0 → 3.0.2

package/lib/index.js

@@ -222,6 +222,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 || {});
 
@@ -485,6 +487,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]: {
@@ -565,7 +575,7 @@ const theme = {
   },
   [Theme.SURFACE_SUCCESS]: {
     light: "#89C798",
-    dark: "#347243"
+    dark: "#4EAB65"
   },
   [Theme.SURFACE_SUCCESS_TRANSPARENT]: {
     light: "rgba(137, 199, 152, 0.10)",
@@ -573,7 +583,7 @@ const theme = {
   },
   [Theme.SURFACE_INFO]: {
     light: "#52C5E8",
-    dark: "#07556C"
+    dark: "#279DC1"
   },
   [Theme.SURFACE_INFO_TRANSPARENT]: {
     light: "rgba(233, 248, 255, 0.35)",
@@ -588,8 +598,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)",
@@ -604,8 +614,8 @@ const theme = {
     dark: "#BFC7DB"
   },
   [Theme.CONTENT_TERTIARY]: {
-    light: "#4D5F86",
-    dark: "#8994AF"
+    light: "#6F7681",
+    dark: "#9FA4AB"
   },
   [Theme.CONTENT_SECONDARY_TEXT]: {
     light: "#686868",
@@ -822,6 +832,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"
   }
 };
 
@@ -853,64 +872,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 = ({
@@ -925,13 +945,13 @@ const CustomTypography = ({
     reactNative.Text,
     {
       testID,
-      style: [textStyle, styles$B.container, style],
+      style: [textStyle, styles$A.container, style],
       ...props
     },
     text
   );
 };
-const styles$B = reactNative.StyleSheet.create({
+const styles$A = reactNative.StyleSheet.create({
   container: { writingDirection: "auto", alignSelf: "flex-start" }
 });
 
@@ -970,7 +990,7 @@ const commonStyles = reactNative.StyleSheet.create({
   }
 });
 
-const styles$A = reactNative.StyleSheet.create({
+const styles$z = reactNative.StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -997,16 +1017,16 @@ const Badge = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
-      style: [styles$A.badge, commonStyles.centerRow, style],
+      style: [styles$z.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
     text && /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$A.text, textStyle],
+        style: [styles$z.text, textStyle],
         text
       }
     )
@@ -1174,7 +1194,7 @@ const chipStyles = reactNative.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,
@@ -1245,7 +1265,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__default["default"].createElement(
     reactNative.Pressable,
     {
@@ -1287,7 +1307,7 @@ var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
   return BackgroundVariant2;
 })(BackgroundVariant || {});
 
-const styles$z = reactNative.StyleSheet.create({
+const styles$y = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     overflow: "hidden"
@@ -1351,7 +1371,7 @@ const Background = ({
     reactNative.View,
     {
       testID,
-      style: [styles$z.container, { backgroundColor: config.base }, style]
+      style: [styles$y.container, { backgroundColor: config.base }, style]
     },
     /* @__PURE__ */ React__default["default"].createElement(
       Svg__default["default"],
@@ -1406,12 +1426,12 @@ const Background = ({
       ))),
       config.type === "linear" ? /* @__PURE__ */ React__default["default"].createElement(Svg.Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#bg)" }) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(Svg.Rect, { x: "0", y: "0", width: "100", height: "100", fill: config.base }), /* @__PURE__ */ React__default["default"].createElement(Svg.Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#glowLeft)" }), /* @__PURE__ */ React__default["default"].createElement(Svg.Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#glowRight)" }))
     ),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.content, contentStyle] }, children)
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$y.content, contentStyle] }, children)
   );
 };
 var Background$1 = withThemeProvider(Background);
 
-const styles$y = reactNative.StyleSheet.create({
+const styles$x = reactNative.StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -1433,21 +1453,19 @@ const styles$y = reactNative.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
   },
@@ -1518,11 +1536,11 @@ const BottomDrawer = ({
         behavior: isIos() ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$y.mainContainer, style], testID }, /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$x.mainContainer, style], testID }, /* @__PURE__ */ React__default["default"].createElement(
         reactNative.View,
         {
           style: [
-            styles$y.modalContainer,
+            styles$x.modalContainer,
             { backgroundColor: theme.SURFACE_PRIMARY },
             modalContainerStyle
           ]
@@ -1532,35 +1550,51 @@ const BottomDrawer = ({
           {
             onPressOut: () => swipeDirection === "" && toggleModal()
           },
-          showSeparator && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$y.separator }),
-          /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$y.headerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$y.leftSideStyle }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
-            style: styles$y.leftIconStyle,
+          showSeparator && /* @__PURE__ */ React__default["default"].createElement(
+            reactNative.View,
+            {
+              style: [
+                styles$x.separator,
+                { backgroundColor: theme.STROKE_TERTIARY }
+              ]
+            }
+          ),
+          /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$x.headerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$x.leftSideStyle }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+            style: styles$x.leftIconStyle,
             onPressOut: onLeftIconPress
           }) : null, /* @__PURE__ */ React__default["default"].createElement(
             CustomTypography,
             {
               variant: titleVariant,
               text: title,
-              style: { ...styles$y.title, ...titleStyle }
+              style: {
+                ...styles$x.title,
+                color: theme.CONTENT_PRIMARY,
+                ...titleStyle
+              }
             }
           )), /* @__PURE__ */ React__default["default"].createElement(
             reactNative.View,
             {
-              style: rightTitle && rightTitle?.length > 0 ? styles$y.rightSideStyle : {}
+              style: rightTitle && rightTitle?.length > 0 ? styles$x.rightSideStyle : {}
             },
             rightTitle && rightTitle?.length > 0 ? /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPressOut: handleRightTitlePress }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(
               reactNative.Pressable,
               {
                 onPressOut: toggleModal,
-                style: styles$y.rightIconStyle
+                style: styles$x.rightIconStyle
               },
               React__default["default"].cloneElement(rightIcon, {
                 width: DHRE_SPACING.LG,
@@ -1577,7 +1611,7 @@ const BottomDrawer = ({
 };
 var BottomDrawer$1 = withThemeProvider(BottomDrawer);
 
-const styles$x = reactNative.StyleSheet.create({
+const styles$w = reactNative.StyleSheet.create({
   mainContainer: {
     marginHorizontal: horizontalScale(16)
   },
@@ -1863,7 +1897,7 @@ const CustomButton = ({
       text: title,
       variant: titleVariant ?? defaultTextVariant,
       textColor: effectiveTextColor,
-      style: [styles$x.buttonText, disabledHexStyle, textStyle]
+      style: [styles$w.buttonText, disabledHexStyle, textStyle]
     }
   ), rightIcon && React__default["default"].cloneElement(rightIcon, {
     width: iconSize,
@@ -1925,7 +1959,7 @@ const CustomButton = ({
 };
 var Button = withThemeProvider(CustomButton);
 
-const styles$w = reactNative.StyleSheet.create({
+const styles$v = reactNative.StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -1990,53 +2024,53 @@ const Cards = ({
   testID,
   onButtonPress
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$w.container }, topLeftTitle ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$w.topLeft }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$v.container }, topLeftTitle ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.topLeft }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P2regular",
-      style: styles$w.title,
+      style: styles$v.title,
       text: topLeftTitle
     }
   )) : null, title ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "H6bold",
-      style: styles$w.subTitleBelow,
+      style: styles$v.subTitleBelow,
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$w.subtitle,
+      style: styles$v.subtitle,
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$w.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$w.subTitleLeftBelow,
+      style: styles$v.subTitleLeftBelow,
       text: iconTitle
     }
   ) : null), buttonShown ? /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Button-Press",
-      style: styles$w.button,
+      style: styles$v.button,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B2semiBold",
-        style: styles$w.buttonText,
+        style: styles$v.buttonText,
         text: buttonText
       }
     )
   ) : null);
 };
 
-const styles$v = reactNative.StyleSheet.create({
+const styles$u = reactNative.StyleSheet.create({
   directionStyle: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -2044,7 +2078,10 @@ const styles$v = reactNative.StyleSheet.create({
   },
   checkboxContainer: {
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    borderRadius: DHRE_RADIUS.SM,
+    borderWidth: 1,
+    overflow: "hidden"
   }
 });
 
@@ -2078,10 +2115,11 @@ const Checkbox = ({
   partialIcon,
   partialDisabledIcon,
   isPartial = false,
-  size,
+  size = "small",
   titleVariant,
   titleStyle,
   containerStyle,
+  checkboxStyle,
   onPress,
   hideCheckbox = false
 }) => {
@@ -2113,15 +2151,21 @@ const Checkbox = ({
     minWidth: size === "small" ? 20 : 24,
     minHeight: size === "small" ? 20 : 24
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: containerStyle }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.directionStyle }, hideCheckbox ? null : /* @__PURE__ */ React__default["default"].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__default["default"].createElement(reactNative.View, { testID, style: containerStyle }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$u.directionStyle }, hideCheckbox ? null : /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Checkbox-Press",
       onPressIn: handlePress,
       disabled: disable,
-      style: [styles$v.checkboxContainer, iconContainerSizeStyle]
+      style: [styles$u.checkboxContainer, iconContainerSizeStyle, checkboxContainerDynamicStyle, checkboxStyle]
     },
-    React__default["default"].cloneElement(resolvedIcon)
+    resolvedIcon ? React__default["default"].cloneElement(resolvedIcon) : null
   ), /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
@@ -2134,7 +2178,7 @@ const Checkbox = ({
 };
 var CheckBox = withThemeProvider(Checkbox);
 
-const styles$u = reactNative.StyleSheet.create({
+const styles$t = reactNative.StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
   },
@@ -2188,26 +2232,26 @@ const CustomDropdown$1 = ({
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$u.labelStyle,
+      style: styles$t.labelStyle,
       text: label
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: `${testId}-BTN`,
-      style: styles$u.dropDownStyle,
+      style: styles$t.dropDownStyle,
       onPress: () => setShowOptions(!showOptions)
     },
     iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$u.iconStyle
+      style: styles$t.iconStyle
     })),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P3regular",
-        style: styles$u.selectedValueStyle,
+        style: styles$t.selectedValueStyle,
         text: selectedValue ? selectedValue.label : placeholder
       }
     ),
@@ -2218,7 +2262,7 @@ const CustomDropdown$1 = ({
       width: moderateScale(24),
       height: moderateScale(24)
     }))
-  ), showOptions && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$u.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default["default"].createElement(
+  ), showOptions && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$t.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       key: id,
@@ -2228,7 +2272,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
         }
@@ -2237,7 +2281,7 @@ const CustomDropdown$1 = ({
     iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$u.iconStyle
+      style: styles$t.iconStyle
     })),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
@@ -2252,7 +2296,7 @@ const CustomDropdown$1 = ({
   ))));
 };
 
-const styles$t = reactNative.StyleSheet.create({
+const styles$s = reactNative.StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTDARK
   },
@@ -2334,18 +2378,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__default["default"].createElement(
     reactNative.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"
@@ -2355,7 +2399,7 @@ const CustomTextInput = ({
     isSearchBar && searchIcon && React__default["default"].cloneElement(searchIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$t.searchIconStyle
+      style: styles$s.searchIconStyle
     }),
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TextInput,
@@ -2363,7 +2407,7 @@ const CustomTextInput = ({
         ...props,
         onFocus,
         onBlur,
-        style: styles$t.input,
+        style: styles$s.input,
         placeholderTextColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
         editable: !disabled,
         value,
@@ -2399,11 +2443,11 @@ const CustomTextInput = ({
 const CustomTooltip = (props) => {
   const { triggerElement, contentStyle } = props;
   return /* @__PURE__ */ React__default["default"].createElement(Tooltip__default["default"], { ...props, contentStyle: [contentStyle, {
-    borderRadius: 0
+    borderRadius: DHRE_PADDING.MD
   }] }, triggerElement);
 };
 
-const styles$s = reactNative.StyleSheet.create({
+const styles$r = reactNative.StyleSheet.create({
   container: {
     backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
     paddingHorizontal: horizontalScale(16),
@@ -2453,21 +2497,21 @@ const FileUpload = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
-      style: [styles$s.container, containerStyle],
+      style: [styles$r.container, containerStyle],
       testID: "file-upload-container"
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$s.content }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React__default["default"].cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React__default["default"].createElement(CustomTypography, { variant: "H8bold", style: styles$s.title, text: title }), /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$r.content }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React__default["default"].cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React__default["default"].createElement(CustomTypography, { variant: "H8bold", style: styles$r.title, text: title }), /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$s.description,
+        style: styles$r.description,
         text: `Drop files directly here or `
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$s.browse,
+        style: styles$r.browse,
         text: btnText
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
@@ -2475,14 +2519,14 @@ const FileUpload = ({
       {
         testID: "file-upload-description",
         variant: "P4regular",
-        style: styles$s.description,
+        style: styles$r.description,
         text: ` from your device`
       }
     )),
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Pressable,
       {
-        style: styles$s.button,
+        style: styles$r.button,
         onPress: onUpload,
         testID: "file-upload-button"
       },
@@ -2490,7 +2534,7 @@ const FileUpload = ({
         CustomTypography,
         {
           variant: "B2semiBold",
-          style: styles$s.buttonText,
+          style: styles$r.buttonText,
           text: btnText
         }
       )
@@ -2502,7 +2546,7 @@ const PdfView = (props) => {
   return /* @__PURE__ */ React__default["default"].createElement(Pdf__default["default"], { ...props, trustAllCerts: false });
 };
 
-const styles$r = reactNative.StyleSheet.create({
+const styles$q = reactNative.StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -2558,39 +2602,39 @@ const PopUp = ({
   leftButtonShown = false,
   rightButtonShown = false
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$r.container }, title ? /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$q.container }, title ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$r.subTitleBelow,
+      style: styles$q.subTitleBelow,
       variant: "H6semiBold",
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$r.subtitle,
+      style: styles$q.subtitle,
       variant: "P3regular",
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$r.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$q.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Left-Button-Press",
-      style: styles$r.buttonLeft,
+      style: styles$q.buttonLeft,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        style: styles$r.buttonLeftText,
+        style: styles$q.buttonLeftText,
         variant: "B2semiBold",
         text: buttonText
       }
     )
-  ) : null, rightButtonShown ? /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$r.button, onPress: onButtonPress }, /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, rightButtonShown ? /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$q.button, onPress: onButtonPress }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$r.buttonText,
+      style: styles$q.buttonText,
       variant: "B2semiBold",
       text: buttonText
     }
@@ -2646,7 +2690,7 @@ const LINE_COLOR_KEYS = {
   unfilledColor: "SURFACE_PRIMARY_TRANSPARENT"
 };
 
-const styles$q = reactNative.StyleSheet.create({
+const styles$p = reactNative.StyleSheet.create({
   lineContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -2708,7 +2752,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__default["default"].createElement(reactNative.View, { style: styles$q.circleCenter }, /* @__PURE__ */ React__default["default"].createElement(
+  const renderCircleCenter = () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$p.circleCenter }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
       text: `${progress}%`,
@@ -2731,7 +2775,7 @@ const CustomProgressBar = ({
         return /* @__PURE__ */ React__default["default"].createElement(
           reactNative.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__default["default"].createElement(
@@ -2780,7 +2824,7 @@ const CustomProgressBar = ({
 };
 var CustomProgressBar$1 = withThemeProvider(CustomProgressBar);
 
-const styles$p = reactNative.StyleSheet.create({
+const styles$o = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center"
@@ -2846,13 +2890,13 @@ const Star = ({
       emptyStarColor
     );
     stars.push(
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { key: i, style: [styles$p.star, starStyle] }, starType)
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { key: i, style: [styles$o.star, starStyle] }, starType)
     );
   }
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$p.container, testID: "star" }, stars);
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$o.container, testID: "star" }, stars);
 };
 
-var styles$o = reactNative.StyleSheet.create({
+var styles$n = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     gap: DHRE_PADDING.SM,
@@ -2908,12 +2952,12 @@ const Tabs = ({
       onSelectionChange(selectedTabs);
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$o.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$n.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.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
       },
@@ -2924,7 +2968,7 @@ const Tabs = ({
       {
         variant: FontStyle.BODY1_MEDIUM,
         style: {
-          ...styles$o.textStyle,
+          ...styles$n.textStyle,
           color: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_PRIMARY
         },
         text: title
@@ -2934,7 +2978,7 @@ const Tabs = ({
 };
 var Tabs$1 = withThemeProvider(Tabs);
 
-const styles$n = reactNative.StyleSheet.create({
+const styles$m = reactNative.StyleSheet.create({
   container: {
     width: "100%"
   },
@@ -2997,8 +3041,8 @@ const Tags = ({
     reactNative.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__default["default"].createElement(
@@ -3008,16 +3052,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__default["default"].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
         }
       ),
@@ -3033,7 +3077,7 @@ const Tags = ({
   );
 };
 
-const styles$m = reactNative.StyleSheet.create({
+const styles$l = reactNative.StyleSheet.create({
   container: {
     width: horizontalScale(70),
     height: verticalScale(25),
@@ -3098,26 +3142,26 @@ const CustomSwitch = ({
     reactNative.Pressable,
     {
       onPress: toggleSwitch,
-      style: [styles$m.container, { width }],
+      style: [styles$l.container, { width }],
       testID: "custom-switch"
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
       {
         style: [
-          styles$m.track,
+          styles$l.track,
           {
             backgroundColor: isOn ? DHRE_COLORS_ALERT.DH_SUCCESS_GREEN_ACCENT : DHRE_COLORS_TEXT.DH_TEXTDISABLED
           }
         ]
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$m.thumb, animatedStyle] }),
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$l.thumb, animatedStyle] }),
       type !== ToggleButtonType.SMALL && /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: "B3semiBold",
           style: [
-            styles$m.text,
+            styles$l.text,
             { textAlign: isOn ? TextDirectType.left : TextDirectType.right }
           ],
           text: isOn ? ToggleTextType.ON : ToggleTextType.OFF
@@ -3127,10 +3171,9 @@ const CustomSwitch = ({
   );
 };
 
-const styles$l = reactNative.StyleSheet.create({
+const styles$k = reactNative.StyleSheet.create({
   container: {
-    paddingVertical: DHRE_PADDING.LG,
-    borderBottomWidth: moderateScale(1)
+    paddingVertical: DHRE_PADDING.LG
   },
   header: {
     flexDirection: "row",
@@ -3187,18 +3230,19 @@ const Accordion = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
-      style: [{
-        ...styles$l.container,
-        borderBottomColor: theme.SURFACE_PRIMARY_TRANSPARENT,
-        ...containerStyle,
-        borderRadius: 0
-      }],
+      style: [
+        {
+          ...styles$k.container,
+          borderRadius: 0,
+          ...containerStyle
+        }
+      ],
       testID: testId
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.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__default["default"].createElement(
@@ -3207,7 +3251,7 @@ const Accordion = ({
           variant: titleVariant,
           text: title,
           style: {
-            ...styles$l.title,
+            ...styles$k.title,
             color: theme.CONTENT_PRIMARY,
             ...titleStyle
           }
@@ -3216,25 +3260,31 @@ const Accordion = ({
       icon ? React__default["default"].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__default["default"].createElement(reactNative.Animated.View, { style: [styles$l.content, slideAnimation && { height: cardHeight }] }, /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.View,
+    isOpen && /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.Animated.View,
       {
-        ref: contentRef,
-        onLayout: (event) => {
-          setContentHeight(event.nativeEvent.layout.height);
-        }
+        style: [styles$k.content, slideAnimation && { height: cardHeight }]
       },
-      children
-    ))
+      /* @__PURE__ */ React__default["default"].createElement(
+        reactNative.View,
+        {
+          ref: contentRef,
+          onLayout: (event) => {
+            setContentHeight(event.nativeEvent.layout.height);
+          }
+        },
+        children
+      )
+    )
   );
 };
 var Accordion$1 = withThemeProvider(Accordion);
 
-const styles$k = reactNative.StyleSheet.create({
+const styles$j = reactNative.StyleSheet.create({
   container: {
     position: "absolute",
     alignSelf: "center",
@@ -3353,20 +3403,20 @@ const Toast = React__default["default"].forwardRef(
       reactNative.Animated.View,
       {
         style: [
-          styles$k.container,
+          styles$j.container,
           { bottom },
           { backgroundColor: theme.SURFACE_TERTIARY }
         ],
         testID: "TOAST"
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.innerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: hideToast, style: styles$k.icon }, isSuccess ? sucessIcon : warning ? warningIcon : errorIcon), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.textContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.innerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: hideToast, style: styles$j.icon }, isSuccess ? sucessIcon : warning ? warningIcon : errorIcon), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.textContainer }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(reactNative.View, { style: styles$k.subContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      ), subjectText && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.subContainer }, /* @__PURE__ */ React__default["default"].createElement(
         Button,
         {
           title: subjectText,
@@ -3391,7 +3441,7 @@ const Toast = React__default["default"].forwardRef(
         reactNative.Animated.View,
         {
           style: [
-            styles$k.progressBar,
+            styles$j.progressBar,
             {
               width: progressAnim,
               backgroundColor: accentColor
@@ -3408,7 +3458,7 @@ const ToastWithProvider = React__default["default"].forwardRef(
 );
 ToastWithProvider.displayName = "Toast";
 
-const styles$j = reactNative.StyleSheet.create({
+const styles$i = reactNative.StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     justifyContent: "center",
@@ -3487,8 +3537,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],
@@ -3510,7 +3560,7 @@ const CustomSearchBar = ({
       React__default["default"].cloneElement(searchIcon, {
         width: DHRE_SPACING.LG,
         height: DHRE_SPACING.LG,
-        style: [styles$j.searchIconStyle, searchIconStyle]
+        style: [styles$i.searchIconStyle, searchIconStyle]
       })
     ),
     /* @__PURE__ */ React__default["default"].createElement(
@@ -3519,7 +3569,7 @@ const CustomSearchBar = ({
         ...props,
         testID: `${testID}-INPUT`,
         style: [
-          styles$j.input,
+          styles$i.input,
           { color: theme[Theme.CONTENT_PRIMARY] },
           inputStyle
         ],
@@ -3554,14 +3604,14 @@ const CustomSearchBar = ({
       React__default["default"].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 = reactNative.StyleSheet.create({
+const styles$h = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -3595,7 +3645,7 @@ const CustomHeader = ({
   rightIcons
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$i.container, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$i.pageTitleContainer }, leftIcon && /* @__PURE__ */ React__default["default"].createElement(HeaderIcon, { config: leftIcon }), /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.container, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.pageTitleContainer }, leftIcon && /* @__PURE__ */ React__default["default"].createElement(HeaderIcon, { config: leftIcon }), /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "BODY1_MEDIUM",
@@ -3605,11 +3655,11 @@ const CustomHeader = ({
   ), titleSuffixIcon && React__default["default"].cloneElement(titleSuffixIcon, {
     width: ICON_SIZE,
     height: ICON_SIZE
-  })), rightIcons && rightIcons.length > 0 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$i.iconsContainer }, rightIcons.map((config, index) => /* @__PURE__ */ React__default["default"].createElement(HeaderIcon, { key: index, config }))));
+  })), rightIcons && rightIcons.length > 0 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.iconsContainer }, rightIcons.map((config, index) => /* @__PURE__ */ React__default["default"].createElement(HeaderIcon, { key: index, config }))));
 };
 var CustomHeader$1 = withThemeProvider(CustomHeader);
 
-const styles$h = reactNative.StyleSheet.create({
+const styles$g = reactNative.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -3639,14 +3689,14 @@ const ActionButton = ({
   {
     testID,
     onPress,
-    style: [styles$h.actionButton, style]
+    style: [styles$g.actionButton, style]
   },
   icon,
   /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "L1_REGULAR",
-      style: [styles$h.titleStyle, titleStyle],
+      style: [styles$g.titleStyle, titleStyle],
       text: title
     }
   )
@@ -3687,7 +3737,7 @@ const SwipableList = (props) => {
       return id;
     });
   }, []);
-  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
     ActionButton,
     {
       icon: leftPrimaryActionIcon,
@@ -3714,7 +3764,7 @@ const SwipableList = (props) => {
       titleStyle
     }
   ));
-  const rightActionHandle = (item) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$h.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
+  const rightActionHandle = (item) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$g.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
     ActionButton,
     {
       icon: rightPrimaryActionIcon,
@@ -3728,7 +3778,7 @@ const SwipableList = (props) => {
       titleStyle
     }
   ));
-  const renderItem = ({ item }) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID: `${testId}-LIST`, style: styles$h.container }, /* @__PURE__ */ React__default["default"].createElement(
+  const renderItem = ({ item }) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID: `${testId}-LIST`, style: styles$g.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNativeGestureHandler.Swipeable,
     {
       ref: (ref) => swipeableRefs.current[item.id] = ref,
@@ -3754,7 +3804,7 @@ const SwipableList = (props) => {
         reactNative.View,
         {
           style: {
-            ...styles$h.seperator,
+            ...styles$g.seperator,
             backgroundColor: theme.BORDER_SEPRATOR
           }
         }
@@ -3764,7 +3814,15 @@ const SwipableList = (props) => {
 };
 var SwipableList$1 = withThemeProvider(SwipableList);
 
-const styles$g = reactNative.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 = reactNative.StyleSheet.create({
   container: {
     justifyContent: "center",
     alignItems: "center"
@@ -3804,13 +3862,6 @@ const ICON_BLUR_TYPE_STYLE = reactNative.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 = reactNative.StyleSheet.create({
   shell: {
     borderRadius: ICON_BUTTON_RADIUS,
@@ -3859,7 +3910,8 @@ const CustomIcon = ({
   titleStyle,
   type,
   size = "large",
-  labelPosition
+  labelPosition,
+  outlinedBackgroundColor
 }) => {
   const { theme } = useTheme();
   const sizeSpec = size ? ICON_SIZE_SPEC[size] : null;
@@ -3928,7 +3980,7 @@ const CustomIcon = ({
             {
               width: innerSize,
               height: innerSize,
-              backgroundColor: theme[Theme.SURFACE_PRIMARY],
+              backgroundColor: outlinedBackgroundColor ?? theme[Theme.SURFACE_PRIMARY],
               padding
             }
           ]
@@ -3951,7 +4003,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__default["default"].createElement(
@@ -3967,14 +4019,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 reactNative.StyleSheet.create({
     container: {
       position: "absolute",
@@ -10175,7 +10227,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;
@@ -10215,7 +10267,7 @@ const CustomLoader = ({
 };
 var CustomLoader$1 = withThemeProvider(CustomLoader);
 
-const createStyles$4 = (scaledSize, color) => reactNative.StyleSheet.create({
+const createStyles$5 = (scaledSize, color) => reactNative.StyleSheet.create({
   // Full-screen absolute overlay — mirrors CustomLoader `container`
   container: {
     position: "absolute",
@@ -10337,7 +10389,7 @@ const LoaderContent = ({
   }, []);
   const color = theme[Theme.CONTENT_PRIMARY];
   const styles = React.useMemo(
-    () => createStyles$4(scaledSize, color),
+    () => createStyles$5(scaledSize, color),
     [scaledSize, color]
   );
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.container, containerStyle], testID }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.backdrop, backdropStyle] }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.box, boxStyle] }, /* @__PURE__ */ React__default["default"].createElement(
@@ -10401,14 +10453,14 @@ const HorizontalLine = ({ backgroundColor = "SURFACE_SECONDARY", style }) => {
     reactNative.View,
     {
       style: [
-        styles$f.line,
+        styles$e.line,
         { backgroundColor: theme[backgroundColor] },
         style
       ]
     }
   );
 };
-const styles$f = reactNative.StyleSheet.create({
+const styles$e = reactNative.StyleSheet.create({
   line: {
     height: 1,
     width: "100%"
@@ -10431,18 +10483,18 @@ const Topic = ({
     reactNative.TouchableOpacity,
     {
       style: [
-        styles$e.button,
+        styles$d.button,
         { backgroundColor: theme[Theme.SURFACE_SECONDARY] },
         containterStyle
       ],
       onPress
     },
-    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.rightIconContainer }, React__default["default"].cloneElement(rightIcon)),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.timeContainer }, time && /* @__PURE__ */ React__default["default"].createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.textContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.paymentView }, statusImage && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null, React__default["default"].cloneElement(statusImage)), subTitle && /* @__PURE__ */ React__default["default"].createElement(
+    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.rightIconContainer }, React__default["default"].cloneElement(rightIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.timeContainer }, time && /* @__PURE__ */ React__default["default"].createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.textContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.paymentView }, statusImage && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null, React__default["default"].cloneElement(statusImage)), subTitle && /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
-        style: [styles$e.subTitle, subTitleStyle],
+        style: [styles$d.subTitle, subTitleStyle],
         text: subTitle,
         variant: FontStyle.L2_REGULAR,
         textColor: Theme.CONTENT_PRIMARY
@@ -10457,7 +10509,7 @@ const Topic = ({
     ))
   );
 };
-const styles$e = reactNative.StyleSheet.create({
+const styles$d = reactNative.StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -10553,14 +10605,14 @@ const ContactModal = ({
   const renderEmailOptions = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$d.title,
+      style: styles$c.title,
       text: "Open email app",
       variant: "L2_REGULAR"
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$d.subtitle,
+      style: styles$c.subtitle,
       text: "Which app would you like to open?",
       variant: "L2_REGULAR"
     }
@@ -10568,33 +10620,33 @@ const ContactModal = ({
     reactNative.Pressable,
     {
       onPress: () => handleOptionPress(),
-      style: styles$d.optionButton
+      style: styles$c.optionButton
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
-        style: styles$d.optionText,
+        style: styles$c.optionText,
         text: option,
         variant: "B3_BOLD"
       }
     )
   ))));
-  const renderContent = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handleCall, style: styles$d.optionButton }, /* @__PURE__ */ React__default["default"].createElement(
+  const renderContent = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handleCall, style: styles$c.optionButton }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$d.optionText,
+      style: styles$c.optionText,
       text: `Call ${phoneNumber}`,
       variant: "B3_BOLD"
     }
-  ))), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onClose, style: styles$d.cancelButton }, /* @__PURE__ */ React__default["default"].createElement(
+  ))), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onClose, style: styles$c.cancelButton }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$d.cancelText,
+      style: styles$c.cancelText,
       text: "Cancel",
       variant: "B2_REGULAR"
     }
   )));
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.container }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Modal,
     {
       animationType: "slide",
@@ -10602,10 +10654,10 @@ const ContactModal = ({
       visible,
       onRequestClose: onClose
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.modalContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.modalContent }, renderContent()))
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.modalContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.modalContent }, renderContent()))
   ));
 };
-const styles$d = reactNative.StyleSheet.create({
+const styles$c = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
@@ -10667,26 +10719,76 @@ const styles$d = reactNative.StyleSheet.create({
 });
 var ContactModel = withThemeProvider(ContactModal);
 
-const styles$c = reactNative.StyleSheet.create({
+const styles$b = reactNative.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] = React.useState({
     startDate: "",
     endDate: ""
   });
-  const { theme, mode } = useTheme();
+  const [currentMonth, setCurrentMonth] = React.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;
@@ -10709,64 +10811,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__default["default"].createElement(reactNative.View, null, /* @__PURE__ */ React__default["default"].createElement(
-    reactNativeCalendars.Calendar,
+  const renderCalendarHeader = () => /* @__PURE__ */ React__default["default"].createElement(
+    reactNative.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__default["default"].createElement(reactNative.Text, { style: [styles$b.monthText, { color: theme.CONTENT_PRIMARY }] }, monthLabel),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.arrowsContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.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__default["default"].createElement(Svg.Svg, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React__default["default"].createElement(
+        Svg.Path,
+        {
+          d: "M15 19.5L7.5 12L15 4.5",
+          stroke: theme.CONTENT_PRIMARY,
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ))
+    ), /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.TouchableOpacity,
+      {
+        onPress: nextMonth,
+        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
       },
-      onDayPress,
-      firstDay: 1,
-      ...props
-    }
+      /* @__PURE__ */ React__default["default"].createElement(Svg.Svg, { width: 16, height: 16, viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React__default["default"].createElement(
+        Svg.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__default["default"].createElement(reactNative.View, null, /* @__PURE__ */ React__default["default"].createElement(
+    reactNative.View,
+    {
+      style: [
+        styles$b.calendarCard,
+        { backgroundColor: theme.SURFACE_SECONDARY }
+      ]
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      reactNativeCalendars.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__default["default"].createElement(
     Button,
     {
@@ -10774,11 +10988,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
     }
   ));
@@ -10802,20 +11013,20 @@ const OurOfficesButton = ({
     reactNative.TouchableOpacity,
     {
       style: [
-        styles$b.button,
+        styles$a.button,
         { backgroundColor: theme["SURFACE_SECONDARY"] },
         containerStyle
       ],
       onPress
     },
-    leftIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.iconContainer }, React__default["default"].cloneElement(leftIcon)),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.textContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    leftIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.iconContainer }, React__default["default"].cloneElement(leftIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.textContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
         text: title,
         variant: titleVariant,
         textColor: titleColor,
-        style: styles$b.textView
+        style: styles$a.textView
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
@@ -10823,13 +11034,13 @@ const OurOfficesButton = ({
         text: description,
         variant: descriptionVariant,
         textColor: descriptionColor,
-        style: styles$b.flexWrap
+        style: styles$a.flexWrap
       }
     )),
-    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.rightIconContainer }, React__default["default"].cloneElement(rightIcon))
+    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.rightIconContainer }, React__default["default"].cloneElement(rightIcon))
   );
 };
-const styles$b = reactNative.StyleSheet.create({
+const styles$a = reactNative.StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -10853,7 +11064,7 @@ const styles$b = reactNative.StyleSheet.create({
 });
 var OurOffices = withThemeProvider(OurOfficesButton);
 
-const styles$a = reactNative.StyleSheet.create({
+const styles$9 = reactNative.StyleSheet.create({
   iconContainer: {
     position: "relative",
     alignItems: "center"
@@ -10882,10 +11093,10 @@ const NotificationBandge = ({
   if (notificationCount <= 0) {
     return icon;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.iconContainer }, icon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.badge }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$a.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$9.iconContainer }, icon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$9.badge }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$9.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
 };
 
-const createStyles$3 = (theme) => {
+const createStyles$4 = (theme) => {
   return reactNative.StyleSheet.create({
     // ── ScrollableList ────────────────────────────────────────────
     container: {
@@ -10980,7 +11191,7 @@ const CategoryItem = React.memo(
     enableTextWrap
   }) => {
     const { theme } = useTheme();
-    const styles = React.useMemo(() => createStyles$3(theme), [theme]);
+    const styles = React.useMemo(() => createStyles$4(theme), [theme]);
     const handlePress = React.useCallback(
       () => onPress(item.name, item.value),
       [onPress, item.name, item.value]
@@ -11077,7 +11288,7 @@ const ScrollableList = ({
     data && data.length > 0 ? data[0].name : null
   );
   const { theme } = useTheme();
-  const styles = React.useMemo(() => createStyles$3(theme), [theme]);
+  const styles = React.useMemo(() => createStyles$4(theme), [theme]);
   const activeKey = activeTab ?? selectedItem;
   const handlePress = React.useCallback(
     (name, value) => {
@@ -11120,7 +11331,7 @@ const ScrollableList = ({
 };
 var category = withThemeProvider(ScrollableList);
 
-const createStyles$2 = (theme) => {
+const createStyles$3 = (theme) => {
   return reactNative.StyleSheet.create({
     container: {
       flex: 1,
@@ -11198,7 +11409,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__default["default"].createElement(reactNative.View, { style: styles.container }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
@@ -11283,7 +11494,7 @@ const CountryDropDown = ({
     setCallingCode(`+${country.callingCode[0]}`);
     getCountryCode(`+${country.callingCode[0]}`);
   };
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$9.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$9.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$8.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$8.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
     CountryPicker__default["default"],
     {
       withFilter: true,
@@ -11297,20 +11508,20 @@ const CountryDropDown = ({
     reactNative.Text,
     {
       onPress: () => setPickerVisible(true),
-      style: [styles$9.callingCode, callingCodeStyle]
+      style: [styles$8.callingCode, callingCodeStyle]
     },
     callingCode
-  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$9.flex }, (isFocused || value) && /* @__PURE__ */ React__default["default"].createElement(
+  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$8.flex }, (isFocused || value) && /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
       text: label ?? "",
-      style: styles$9.floatingLabel
+      style: styles$8.floatingLabel
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.TextInput,
     {
-      style: [styles$9.input, inputStyle],
+      style: [styles$8.input, inputStyle],
       placeholder: !isFocused ? placeholder : "",
       keyboardType: "phone-pad",
       value,
@@ -11326,13 +11537,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 = reactNative.StyleSheet.create({
+const styles$8 = reactNative.StyleSheet.create({
   flex: {
     flex: 1
   },
@@ -11393,6 +11604,7 @@ const CommonTextInput = (props) => {
     keyboardType = "default",
     placeholderText,
     inputStyle,
+    containerStyle,
     maxLength,
     errorMessage,
     helperText,
@@ -11418,10 +11630,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__default["default"].createElement(reactNative.Pressable, { onPress: handlePress, style: styles$8.container }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handlePress, style: [styles$7.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
     reactNativePaper.TextInput,
     {
       mode: "outlined",
@@ -11430,7 +11642,7 @@ const CommonTextInput = (props) => {
       spellCheck: false,
       autoCorrect: false,
       outlineStyle: {
-        ...styles$8.outlineStyle,
+        ...styles$7.outlineStyle,
         borderColor: currentBorderColor,
         borderWidth,
         backgroundColor: containerBackground
@@ -11452,7 +11664,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: {
@@ -11471,12 +11684,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"
@@ -11507,7 +11715,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"
@@ -11517,7 +11725,7 @@ const CommonTextInput = (props) => {
     helperMessage
   ) : null);
 };
-const styles$8 = reactNative.StyleSheet.create({
+const styles$7 = reactNative.StyleSheet.create({
   container: {
     justifyContent: "center"
   },
@@ -11584,7 +11792,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) {
@@ -11592,11 +11800,11 @@ const CustomDropdown = (props) => {
         reactNative.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 })
@@ -11617,11 +11825,11 @@ const CustomDropdown = (props) => {
   };
   const renderItem = (item) => {
     const isSelected = item[valueField] === value;
-    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$7.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$6.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Text,
       {
         style: [
-          styles$7.itemText,
+          styles$6.itemText,
           FONT_STYLES[FontStyle.BODY2_LIGHT],
           { color: theme.CONTENT_PRIMARY },
           itemTextStyle,
@@ -11631,12 +11839,12 @@ const CustomDropdown = (props) => {
       item[labelField]
     ));
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$7.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default["default"].createElement(
     reactNativeElementDropdown.Dropdown,
     {
       ...props,
       style: [
-        styles$7.dropdown,
+        styles$6.dropdown,
         {
           borderColor: fieldBorderColor,
           borderWidth: fieldBorderWidth,
@@ -11646,18 +11854,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,
@@ -11679,7 +11887,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
@@ -11687,7 +11895,7 @@ const CustomDropdown = (props) => {
         menuContainerStyle
       ],
       activeColor: activeColor ?? theme.SURFACE_SECONDARY,
-      itemContainerStyle: [styles$7.itemListStyle, itemContainerStyle],
+      itemContainerStyle: [styles$6.itemListStyle, itemContainerStyle],
       disable,
       autoScroll,
       dropdownPosition,
@@ -11700,7 +11908,7 @@ const CustomDropdown = (props) => {
     reactNative.Text,
     {
       style: [
-        styles$7.helperText,
+        styles$6.helperText,
         FONT_STYLES[FontStyle.BODY2_LIGHT],
         { color: helperColor }
       ]
@@ -11708,7 +11916,7 @@ const CustomDropdown = (props) => {
     helperMessage
   ) : null);
 };
-const styles$7 = reactNative.StyleSheet.create({
+const styles$6 = reactNative.StyleSheet.create({
   container: {
     marginVertical: verticalScale(4),
     direction: "ltr",
@@ -11755,7 +11963,7 @@ const styles$7 = reactNative.StyleSheet.create({
 });
 var DropDown = withThemeProvider(CustomDropdown);
 
-const styles$6 = reactNative.StyleSheet.create({
+const styles$5 = reactNative.StyleSheet.create({
   mainContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -11814,18 +12022,18 @@ const CustomSwitchBtn = ({
     {
       disabled,
       onPress: toggleSwitch,
-      style: { ...styles$6.mainContainer, ...containerStyle }
+      style: { ...styles$5.mainContainer, ...containerStyle }
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Animated.View,
       {
-        style: [styles$6.circle, { transform: [{ translateX }], ...circleStyle }]
+        style: [styles$5.circle, { transform: [{ translateX }], ...circleStyle }]
       }
     ),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        style: [styles$6.activeText, value ? inActiveTextStyle : activeTextStyle],
+        style: [styles$5.activeText, value ? inActiveTextStyle : activeTextStyle],
         text: activeText,
         variant: activeTextVariant
       }
@@ -11834,7 +12042,7 @@ const CustomSwitchBtn = ({
       CustomTypography,
       {
         style: [
-          styles$6.inActiveText,
+          styles$5.inActiveText,
           value ? activeTextStyle : inActiveTextStyle
         ],
         text: inActiveText,
@@ -11872,7 +12080,7 @@ class ToastService {
 }
 const toastService = new ToastService();
 
-const createStyles$1 = (theme) => reactNative.StyleSheet.create({
+const createStyles$2 = (theme) => reactNative.StyleSheet.create({
   listContainer: {
     paddingHorizontal: 10,
     alignItems: "center"
@@ -11914,7 +12122,7 @@ const TagsComponent = ({
   unselectedTagButton
 }) => {
   const { theme } = useTheme();
-  const styles = createStyles$1(theme);
+  const styles = createStyles$2(theme);
   const reorderedTags = () => {
     if (selectedTag) {
       return [
@@ -11964,7 +12172,7 @@ const TagsComponent = ({
 };
 var TagSingleSelection = withThemeProvider(TagsComponent);
 
-const styles$5 = reactNative.StyleSheet.create({
+const styles$4 = reactNative.StyleSheet.create({
   textInputContainer: {
     flexDirection: "row",
     gap: DHRE_PADDING.MD,
@@ -12147,12 +12355,12 @@ const OTPInput = React__default["default"].forwardRef(
           ...otpHeaderTextStyle
         }
       }
-    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
+    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$4.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TextInput,
       {
         key: index?.toString(),
         style: {
-          ...styles$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,
@@ -12173,7 +12381,7 @@ const OTPInput = React__default["default"].forwardRef(
         selectionColor: theme$1.CONTENT_PRIMARY,
         editable: isEditable
       }
-    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerIconContainer }, errorMessage ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, errorIcon ? React__default["default"].cloneElement(errorIcon, {
+    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.timerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.timerIconContainer }, errorMessage ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, errorIcon ? React__default["default"].cloneElement(errorIcon, {
       width: DHRE_SPACING_BASE.SPACE_20,
       height: DHRE_SPACING_BASE.SPACE_20
     }) : null, /* @__PURE__ */ React__default["default"].createElement(
@@ -12197,7 +12405,7 @@ const OTPInput = React__default["default"].forwardRef(
       reactNative.Pressable,
       {
         onPress: onClickResendOTP,
-        style: styles$5.resendOTPStyle,
+        style: styles$4.resendOTPStyle,
         disabled: disableResendButton() || !isResendOtpEnable
       },
       /* @__PURE__ */ React__default["default"].createElement(
@@ -12211,7 +12419,7 @@ const OTPInput = React__default["default"].forwardRef(
           }
         }
       )
-    )), errorMessageMaxReachCount ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    )), errorMessageMaxReachCount ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         text: errorMessageMaxReachCount,
@@ -12226,7 +12434,7 @@ const OTPInput = React__default["default"].forwardRef(
 );
 OTPInput.displayName = "OTPInput";
 
-const styles$4 = reactNative.StyleSheet.create({
+const styles$3 = reactNative.StyleSheet.create({
   stepperContainer: {
     flexDirection: "row",
     marginBottom: 24,
@@ -12320,27 +12528,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) => {
@@ -12350,25 +12558,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__default["default"].createElement(reactNative.View, { style: { ...styles$4.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$3.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
     const stepCircleStyle = renderCircleStyle(item?.status);
     const dividerStyle = renderDividerStyle(item?.status);
     const labelStyle = renderLableStyle(item?.status);
-    const lastViewStyle = index === data?.length - 1 ? styles$4.lastStepWrapper : null;
+    const lastViewStyle = index === data?.length - 1 ? styles$3.lastStepWrapper : null;
     return /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
       {
         key: index?.toString(),
-        style: { ...styles$4.stepperWrapper, ...lastViewStyle }
+        style: { ...styles$3.stepperWrapper, ...lastViewStyle }
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.stepperSeparatorContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.stepperSeparatorContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: item?.step,
@@ -12377,8 +12585,8 @@ const Stepper = ({
             color: theme.CONTENT_PRIMARY
           }
         }
-      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$4.separator, ...dividerStyle } })),
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.lableContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$3.separator, ...dividerStyle } })),
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.lableContainer }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: item?.label,
@@ -12389,17 +12597,22 @@ const Stepper = ({
     );
   }));
 };
-var index$3 = withThemeProvider(Stepper);
+var index$4 = withThemeProvider(Stepper);
 
-const styles$3 = reactNative.StyleSheet.create({
+const styles$2 = reactNative.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"
   },
@@ -12410,11 +12623,13 @@ const styles$3 = reactNative.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",
@@ -12424,11 +12639,10 @@ const styles$3 = reactNative.StyleSheet.create({
     top: 0,
     alignItems: "center",
     justifyContent: "center"
-    // borderRadius: 25,
   }
 });
 
-const BUTTON_WIDTH = 40;
+const DEFAULT_SIZE = 40;
 const CustomSlideButton = React__default["default"].forwardRef(
   ({
     label,
@@ -12438,17 +12652,21 @@ const CustomSlideButton = React__default["default"].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 = React.useRef(0);
     const cardRef = React.useRef(null);
     const [translateX] = React.useState(new reactNative.Animated.Value(0));
     const sliderConteinerRef = React.useRef(null);
     const [color] = React.useState(new reactNative.Animated.Value(0));
     const [sliderBackgroundColorRef] = React.useState(new reactNative.Animated.Value(0));
+    const [isCompleted, setIsCompleted] = React.useState(false);
     React__default["default"].useImperativeHandle(ref, () => ({
       reset() {
         resetAll();
@@ -12459,15 +12677,18 @@ const CustomSlideButton = React__default["default"].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?.();
       reactNative.Animated.timing(sliderBackgroundColorRef, {
         toValue: 0,
@@ -12484,7 +12705,7 @@ const CustomSlideButton = React__default["default"].forwardRef(
         // because we're animating the color, not layout
       }).start();
       reactNative.Animated.timing(translateX, {
-        toValue: 0,
+        toValue: isRTL ? value.current - thumbOffset : 0,
         useNativeDriver: false
       }).start();
     };
@@ -12495,39 +12716,73 @@ const CustomSlideButton = React__default["default"].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;
-          reactNative.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;
+            reactNative.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;
+            reactNative.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) {
-          reactNative.Animated.timing(translateX, {
-            toValue: value?.current - (BUTTON_WIDTH + 8),
-            // Slide to the end
-            duration: 300,
-            useNativeDriver: false
-          }).start();
-          reactNative.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)) {
+            reactNative.Animated.timing(translateX, {
+              toValue: 0,
+              // snap to leftmost position (completed side for RTL)
+              duration: 300,
+              useNativeDriver: false
+            }).start();
+            reactNative.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) {
+            reactNative.Animated.timing(translateX, {
+              toValue: value.current - thumbOffset,
+              // slide to the end
+              duration: 300,
+              useNativeDriver: false
+            }).start();
+            reactNative.Animated.timing(sliderBackgroundColorRef, {
+              toValue: 1,
+              duration: 0,
+              useNativeDriver: false
+            }).start();
+            setIsCompleted(true);
+            onComplete?.();
+            setTimeout(() => {
+              resetAll();
+            }, resetTimer);
+          } else {
+            resetAll();
+          }
         }
       },
       onPanResponderTerminate: () => {
@@ -12543,49 +12798,62 @@ const CustomSlideButton = React__default["default"].forwardRef(
       outputRange: [sliderBackgroundColor, "transparent"]
     });
     const { theme } = useTheme();
-    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: {
-      ...styles$3.sliderContainer,
-      backgroundColor: theme.SURFACE_INVERTED,
-      ...containerStyle
-    }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.Animated.View,
-      {
-        style: [styles$3.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
-        ref: sliderConteinerRef
-      }
-    ), /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.View,
-      {
-        style: styles$3.buttonTextContainer
-      },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.Text, { style: [{
-        alignSelf: "center",
-        ...textStyle
-      }, { color: textColor }] }, label)
-    ), /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.Animated.View,
+    return /* @__PURE__ */ React__default["default"].createElement(
+      LinearGradient__default["default"],
       {
-        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__default["default"].createElement(
         reactNative.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__default["default"].createElement(
+          reactNative.Animated.View,
+          {
+            style: [styles$2.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
+            ref: sliderConteinerRef
+          }
+        ),
+        /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.Text, { style: [{ alignSelf: "center", ...textStyle }, { color: textColor }] }, label)),
+        /* @__PURE__ */ React__default["default"].createElement(
+          reactNative.Animated.View,
+          {
+            style: [styles$2.slider, { transform: [{ translateX }] }],
+            ...panResponder.panHandlers
+          },
+          /* @__PURE__ */ React__default["default"].createElement(
+            reactNative.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,
@@ -12645,7 +12913,7 @@ const AVATAR_SPEC = {
     ringInset: 6
   }
 };
-const createStyles = (size, theme) => {
+const createStyles$1 = (size, theme) => {
   const dimensions = AVATAR_SPEC[size];
   return reactNative.StyleSheet.create({
     container: {
@@ -12721,9 +12989,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":
@@ -12874,7 +13142,7 @@ const Avatar = (props) => {
 };
 var Avatar$1 = withThemeProvider(Avatar);
 
-const styles$2 = reactNative.StyleSheet.create({
+const styles$1 = reactNative.StyleSheet.create({
   accordionContainer: {
     gap: verticalScale(8),
     marginHorizontal: horizontalScale(24),
@@ -12979,13 +13247,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__default["default"].createElement(reactNative.View, { style: styles$2.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.accordionText }, /* @__PURE__ */ React__default["default"].createElement(
+      headerStyle: styles$1.accordionHeader,
+      headerComponent: () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.accordionText }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: headerTitle,
@@ -13006,18 +13274,18 @@ const AppointmentCard = ({
       reactNative.View,
       {
         style: [
-          styles$2.accordionDetails,
+          styles$1.accordionDetails,
           { borderTopColor: theme.BORDER_SEPERATOR_HEADER }
         ]
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.infoColumn, key: title2 }, /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.infoColumn, key: title2 }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: title2,
           variant: FontStyle.L3_REGULAR,
           style: { color: theme.CONTENT_SECONDRY }
         }
-      ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React__default["default"].createElement(
+      ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: value,
@@ -13032,7 +13300,7 @@ const AppointmentCard = ({
           text: directionText,
           variant: FontStyle.L2_REGULAR,
           style: [
-            styles$2.getDirectionsText,
+            styles$1.getDirectionsText,
             { color: theme.CONTENT_PRIMARY }
           ],
           onPress: onDirectionPress
@@ -13042,7 +13310,7 @@ const AppointmentCard = ({
         reactNative.View,
         {
           style: [
-            styles$2.infoContainer,
+            styles$1.infoContainer,
             {
               backgroundColor: theme.SURFACE_TERTIARY
             }
@@ -13062,7 +13330,7 @@ const AppointmentCard = ({
         reactNative.View,
         {
           style: [
-            styles$2.actionsContainer,
+            styles$1.actionsContainer,
             {
               borderTopColor: theme.BORDER_SEPERATOR_HEADER
             }
@@ -13074,7 +13342,7 @@ const AppointmentCard = ({
             text: viewText,
             variant: FontStyle.L2_REGULAR,
             style: [
-              styles$2.viewText,
+              styles$1.viewText,
               {
                 color: theme.CONTENT_PRIMARY
               }
@@ -13082,12 +13350,12 @@ const AppointmentCard = ({
             onPress: onViewDetailsPress
           }
         ),
-        /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.actionIcons }, /* @__PURE__ */ React__default["default"].createElement(
+        /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.actionIcons }, /* @__PURE__ */ React__default["default"].createElement(
           CustomIcon$1,
           {
             icon: deleteIcon,
             containerStyle: {
-              ...styles$2.iconContainer,
+              ...styles$1.iconContainer,
               backgroundColor: theme.SURFACE_INVERTED
             },
             onPress: onDeletePress
@@ -13097,7 +13365,7 @@ const AppointmentCard = ({
           {
             icon: editIcon,
             containerStyle: {
-              ...styles$2.iconContainer,
+              ...styles$1.iconContainer,
               backgroundColor: theme.SURFACE_INVERTED
             },
             onPress: onEditPress
@@ -13107,26 +13375,37 @@ const AppointmentCard = ({
     )
   );
 };
-var index$1 = withThemeProvider(AppointmentCard);
+var index$2 = withThemeProvider(AppointmentCard);
 
-const styles$1 = reactNative.StyleSheet.create({
+const styles = reactNative.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",
@@ -13147,87 +13426,104 @@ const PropertyDetails = ({
   subTitleStyle,
   propertyNumberStyle,
   onRightIconPress,
-  titleStyle
+  titleStyle,
+  isSelected = false
 }) => {
   const { theme } = useTheme();
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.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__default["default"].cloneElement(icon, {
-      width: moderateScale(87),
-      height: moderateScale(87),
-      borderRadius: 0
-    }),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.propertyInfo }, brandIcon, /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.imageWrapper }, React__default["default"].cloneElement(icon, {
+      width: "100%",
+      height: "100%",
+      borderRadius: DHRE_RADIUS.MD
+    }), brandIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.brandBadge }, brandIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.propertyInfo }, propertyNumber && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.propertyNumber, propertyNumberStyle] }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(
+    ), hintIcon), /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         text: subTitle,
-        variant: FontStyle.L1_REGULAR,
+        variant: FontStyle.BODY4_LIGHT,
         style: [{ color: theme.CONTENT_PRIMARY }, subTitleStyle]
       }
-    ), propertyNumber && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$1.propertyNumber, propertyNumberStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+    ), /* @__PURE__ */ React__default["default"].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__default["default"].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 = reactNative.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 reactNative.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,
@@ -13235,8 +13531,13 @@ const RadioButtonGroup = ({
   containerStyle,
   labelStyle,
   optionContainerStyle,
-  selectedValue
+  selectedValue,
+  size = "large",
+  fontVariant,
+  radioColor
 }) => {
+  const { theme } = useTheme();
+  const styles = createStyles(theme, size, radioColor);
   const [selectedOption, setSelectedOption] = React.useState(
     selectedValue ?? data[0]?.value
   );
@@ -13244,12 +13545,14 @@ const RadioButtonGroup = ({
     setSelectedOption(item.value);
     onSelect(item);
   };
+  const resolvedFontVariant = fontVariant ?? (size === "small" ? FontStyle.BODY2_MEDIUM : FontStyle.BODY1_MEDIUM);
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.container, containerStyle] }, data?.map((item) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.TouchableOpacity,
     {
       key: item.value,
       style: [styles.optionContainer, optionContainerStyle],
-      onPress: () => handleSelect(item)
+      onPress: () => handleSelect(item),
+      activeOpacity: 1
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
@@ -13258,22 +13561,24 @@ const RadioButtonGroup = ({
           styles.radioButton,
           selectedOption === item.value && styles.radioButtonSelected
         ]
-      }
+      },
+      selectedOption === item.value && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.radioButtonInnerDot })
     ),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        variant: FontStyle.L1_REGULAR,
+        variant: resolvedFontVariant,
         text: item.label,
         style: [styles.label, labelStyle]
       }
     )
   )));
 };
+var index = withThemeProvider(RadioButtonGroup);
 
 exports.Accordion = Accordion$1;
 exports.AnimationLoitte = AnimationWithImperativeApi;
-exports.AppointmentCard = index$1;
+exports.AppointmentCard = index$2;
 exports.Avatar = Avatar$1;
 exports.AvatarSize = AvatarSize;
 exports.Background = Background$1;
@@ -13293,7 +13598,7 @@ exports.CustomIcon = CustomIcon$1;
 exports.CustomLoader = CustomLoader$1;
 exports.CustomProgressBar = CustomProgressBar$1;
 exports.CustomSearchBar = CustomSearchBar$1;
-exports.CustomSlideButton = index$2;
+exports.CustomSlideButton = index$3;
 exports.CustomSwitchBtn = CustomSwitchBtn;
 exports.CustomText = CustomText$1;
 exports.CustomTextInput = CustomTextInput;
@@ -13306,6 +13611,8 @@ exports.DHRE_COLORS_PRIMARY = DHRE_COLORS_PRIMARY;
 exports.DHRE_COLORS_SECONDARY = DHRE_COLORS_SECONDARY;
 exports.DHRE_COLORS_TEXT = DHRE_COLORS_TEXT;
 exports.DHRE_COMPONENT_HEIGHT = DHRE_COMPONENT_HEIGHT;
+exports.DHRE_CONFIRMATION_BASE_GRADIENT = DHRE_CONFIRMATION_BASE_GRADIENT;
+exports.DHRE_CONFIRMATION_ERROR_GRADIENT = DHRE_CONFIRMATION_ERROR_GRADIENT;
 exports.DHRE_CORE_BLUE = DHRE_CORE_BLUE;
 exports.DHRE_CYAN_HIGHLIGHT = DHRE_CYAN_HIGHLIGHT;
 exports.DHRE_DEEP_SPACE_BLUE = DHRE_DEEP_SPACE_BLUE;
@@ -13338,12 +13645,12 @@ exports.OTPInput = OTPInput;
 exports.OurOfficesButton = OurOffices;
 exports.PdfView = PdfView;
 exports.PopUp = PopUp;
-exports.PropertyDetails = index;
-exports.RadioButtonGroup = RadioButtonGroup;
+exports.PropertyDetails = index$1;
+exports.RadioButtonGroup = index;
 exports.ShapeType = ShapeType;
 exports.SingleSelectionTags = TagSingleSelection;
 exports.StarRating = Star;
-exports.Stepper = index$3;
+exports.Stepper = index$4;
 exports.SwipableList = SwipableList$1;
 exports.Tabs = Tabs$1;
 exports.Tags = Tags;