dhre-ui-kit 3.0.1 → 3.1.0

package/lib/index.mjs

@@ -187,6 +187,8 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   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";
+  Theme2["SHADOW_10"] = "SHADOW_10";
   return Theme2;
 })(Theme || {});
 
@@ -458,6 +460,70 @@ const DHRE_CONFIRMATION_BASE_GRADIENT = {
   light: ["rgba(165, 233, 255, 0)", "#52C5E8"],
   dark: ["rgba(165, 233, 255, 0)", "#279DC1"]
 };
+const GRADIENT_COLORS_SUCCESS = {
+  light: [
+    "#89C798",
+    "#FFFFFF",
+    "#A5E9FF",
+    "#52C5E8",
+    "#0B214A",
+    "#355D7A"
+  ],
+  // NEED TO UPDATE GRADIENT COLORS
+  dark: [
+    "#24584B",
+    "#123D46",
+    "#00113A",
+    "#000A28",
+    "#0B214A",
+    "#355D7A"
+  ]
+};
+const GRADIENT_COLORS_ERROR = {
+  light: [
+    "#F0809E",
+    "#FFFFFF",
+    "#A5E9FF",
+    "#52C5E8",
+    "#0B214A",
+    "#355D7A"
+  ],
+  // NEED TO UPDATE GRADIENT COLORS
+  dark: [
+    "#EB0542",
+    // 0%
+    "#780835",
+    // ~2% 
+    "#00113A",
+    // 28%
+    "#000A28",
+    // 45%    
+    "#0B214A",
+    // 88%
+    "#355D7A"
+    // 100%
+  ]
+};
+const GRADIENT_COLORS_PENDING = {
+  light: ["#E9F8FF", "#52C5E8"],
+  // NEED TO UPDATE GRADIENT COLORS
+  dark: [
+    "#EB0542",
+    // 0%
+    "#780835",
+    // ~2% 
+    "#00113A",
+    // 28%
+    "#000A28",
+    // 45%
+    "#000A28",
+    // 72%
+    "#0B214A",
+    // 88%
+    "#355D7A"
+    // 100%
+  ]
+};
 
 const theme = {
   [Theme.SURFACE_PRIMARY]: {
@@ -800,6 +866,14 @@ const theme = {
     dark: "#009db3",
     light: "#009db3"
     // light-theme value pending DHDS Figma spec
+  },
+  [Theme.STROKE_DISABLED_SELECTED]: {
+    dark: "#003f48",
+    light: "#9ADFE8"
+  },
+  [Theme.SHADOW_10]: {
+    dark: "rgba(255, 255, 255, 0.20)",
+    light: "rgba(0, 0, 0, 0.10)"
   }
 };
 
@@ -904,13 +978,13 @@ const CustomTypography = ({
     Text,
     {
       testID,
-      style: [textStyle, styles$B.container, style],
+      style: [textStyle, styles$A.container, style],
       ...props
     },
     text
   );
 };
-const styles$B = StyleSheet.create({
+const styles$A = StyleSheet.create({
   container: { writingDirection: "auto", alignSelf: "flex-start" }
 });
 
@@ -949,7 +1023,7 @@ const commonStyles = StyleSheet.create({
   }
 });
 
-const styles$A = StyleSheet.create({
+const styles$z = StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -976,16 +1050,16 @@ const Badge = ({
   return /* @__PURE__ */ React.createElement(
     Pressable,
     {
-      style: [styles$A.badge, commonStyles.centerRow, style],
+      style: [styles$z.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React.createElement(View, { style: [styles$A.icon, iconStyle] }, React.cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React.createElement(View, { style: [styles$z.icon, iconStyle] }, React.cloneElement(iconName)),
     text && /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$A.text, textStyle],
+        style: [styles$z.text, textStyle],
         text
       }
     )
@@ -1153,7 +1227,7 @@ const chipStyles = StyleSheet.create({
     justifyContent: "center",
     borderWidth: 1,
     borderRadius: DHRE_RADIUS.PILL,
-    gap: DHRE_SPACING.XS
+    gap: DHRE_PADDING.SM
   },
   sizeLarge: {
     height: DHRE_SPACING_BASE.SPACE_40,
@@ -1224,7 +1298,7 @@ const Chip = ({
     disabled
   );
   const contentColor = resolveContentColor(themeColors, selected, disabled);
-  const textVariant = size === "large" ? FontStyle.BODY2_LIGHT : FontStyle.BODY3_LIGHT;
+  const textVariant = size === "large" ? selected ? FontStyle.BODY2_MEDIUM : FontStyle.BODY2_LIGHT : selected ? FontStyle.BODY3_MEDIUM : FontStyle.BODY3_LIGHT;
   return /* @__PURE__ */ React.createElement(
     Pressable,
     {
@@ -1266,7 +1340,7 @@ var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
   return BackgroundVariant2;
 })(BackgroundVariant || {});
 
-const styles$z = StyleSheet.create({
+const styles$y = StyleSheet.create({
   container: {
     flex: 1,
     overflow: "hidden"
@@ -1330,7 +1404,7 @@ const Background = ({
     View,
     {
       testID,
-      style: [styles$z.container, { backgroundColor: config.base }, style]
+      style: [styles$y.container, { backgroundColor: config.base }, style]
     },
     /* @__PURE__ */ React.createElement(
       Svg,
@@ -1385,12 +1459,12 @@ const Background = ({
       ))),
       config.type === "linear" ? /* @__PURE__ */ React.createElement(Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#bg)" }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Rect, { x: "0", y: "0", width: "100", height: "100", fill: config.base }), /* @__PURE__ */ React.createElement(Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#glowLeft)" }), /* @__PURE__ */ React.createElement(Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#glowRight)" }))
     ),
-    /* @__PURE__ */ React.createElement(View, { style: [styles$z.content, contentStyle] }, children)
+    /* @__PURE__ */ React.createElement(View, { style: [styles$y.content, contentStyle] }, children)
   );
 };
 var Background$1 = withThemeProvider(Background);
 
-const styles$y = StyleSheet.create({
+const styles$x = StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -1412,21 +1486,19 @@ const styles$y = StyleSheet.create({
   },
   separator: {
     height: verticalScale(3),
-    width: horizontalScale(32),
+    width: DHRE_SPACING_BASE.SPACE_32,
     alignSelf: "center",
-    backgroundColor: "#A7A7A7",
     borderRadius: moderateScale(25)
   },
   headerContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginTop: verticalScale(24)
+    marginTop: DHRE_SPACING_BASE.SPACE_16
   },
-  title: { flex: 1, color: "#fff", textAlign: "left" },
+  title: { flex: 1, textAlign: "left" },
   leftIconStyle: { marginRight: 8 },
   rightTitle: {
-    color: "#fff",
     textAlign: "right",
     marginRight: DHRE_PADDING.LG
   },
@@ -1497,11 +1569,11 @@ const BottomDrawer = ({
         behavior: isIos() ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React.createElement(View, { style: [styles$y.mainContainer, style], testID }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: [styles$x.mainContainer, style], testID }, /* @__PURE__ */ React.createElement(
         View,
         {
           style: [
-            styles$y.modalContainer,
+            styles$x.modalContainer,
             { backgroundColor: theme.SURFACE_PRIMARY },
             modalContainerStyle
           ]
@@ -1511,35 +1583,51 @@ const BottomDrawer = ({
           {
             onPressOut: () => swipeDirection === "" && toggleModal()
           },
-          showSeparator && /* @__PURE__ */ React.createElement(View, { style: styles$y.separator }),
-          /* @__PURE__ */ React.createElement(View, { style: styles$y.headerContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$y.leftSideStyle }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
-            style: styles$y.leftIconStyle,
+          showSeparator && /* @__PURE__ */ React.createElement(
+            View,
+            {
+              style: [
+                styles$x.separator,
+                { backgroundColor: theme.STROKE_TERTIARY }
+              ]
+            }
+          ),
+          /* @__PURE__ */ React.createElement(View, { style: styles$x.headerContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$x.leftSideStyle }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
+            style: styles$x.leftIconStyle,
             onPressOut: onLeftIconPress
           }) : null, /* @__PURE__ */ React.createElement(
             CustomTypography,
             {
               variant: titleVariant,
               text: title,
-              style: { ...styles$y.title, ...titleStyle }
+              style: {
+                ...styles$x.title,
+                color: theme.CONTENT_PRIMARY,
+                ...titleStyle
+              }
             }
           )), /* @__PURE__ */ React.createElement(
             View,
             {
-              style: rightTitle && rightTitle?.length > 0 ? styles$y.rightSideStyle : {}
+              style: rightTitle && rightTitle?.length > 0 ? styles$x.rightSideStyle : {}
             },
             rightTitle && rightTitle?.length > 0 ? /* @__PURE__ */ React.createElement(Pressable, { onPressOut: handleRightTitlePress }, /* @__PURE__ */ React.createElement(
               CustomTypography,
               {
                 variant: rightTitleVariant,
                 text: rightTitle,
-                style: { ...styles$y.rightTitle, ...rightTitleStyle }
+                style: {
+                  ...styles$x.rightTitle,
+                  color: theme.CONTENT_PRIMARY,
+                  ...rightTitleStyle
+                }
               }
             )) : null,
             showRightIcon && rightIcon ? /* @__PURE__ */ React.createElement(
               Pressable,
               {
                 onPressOut: toggleModal,
-                style: styles$y.rightIconStyle
+                style: styles$x.rightIconStyle
               },
               React.cloneElement(rightIcon, {
                 width: DHRE_SPACING.LG,
@@ -1556,7 +1644,7 @@ const BottomDrawer = ({
 };
 var BottomDrawer$1 = withThemeProvider(BottomDrawer);
 
-const styles$x = StyleSheet.create({
+const styles$w = StyleSheet.create({
   mainContainer: {
     marginHorizontal: horizontalScale(16)
   },
@@ -1842,7 +1930,7 @@ const CustomButton = ({
       text: title,
       variant: titleVariant ?? defaultTextVariant,
       textColor: effectiveTextColor,
-      style: [styles$x.buttonText, disabledHexStyle, textStyle]
+      style: [styles$w.buttonText, disabledHexStyle, textStyle]
     }
   ), rightIcon && React.cloneElement(rightIcon, {
     width: iconSize,
@@ -1904,7 +1992,7 @@ const CustomButton = ({
 };
 var Button = withThemeProvider(CustomButton);
 
-const styles$w = StyleSheet.create({
+const styles$v = StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -1969,53 +2057,53 @@ const Cards = ({
   testID,
   onButtonPress
 }) => {
-  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$w.container }, topLeftTitle ? /* @__PURE__ */ React.createElement(View, { style: styles$w.topLeft }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$v.container }, topLeftTitle ? /* @__PURE__ */ React.createElement(View, { style: styles$v.topLeft }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P2regular",
-      style: styles$w.title,
+      style: styles$v.title,
       text: topLeftTitle
     }
   )) : null, title ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "H6bold",
-      style: styles$w.subTitleBelow,
+      style: styles$v.subTitleBelow,
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$w.subtitle,
+      style: styles$v.subtitle,
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$w.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React.createElement(
+  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$v.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$w.subTitleLeftBelow,
+      style: styles$v.subTitleLeftBelow,
       text: iconTitle
     }
   ) : null), buttonShown ? /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Button-Press",
-      style: styles$w.button,
+      style: styles$v.button,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "B2semiBold",
-        style: styles$w.buttonText,
+        style: styles$v.buttonText,
         text: buttonText
       }
     )
   ) : null);
 };
 
-const styles$v = StyleSheet.create({
+const styles$u = StyleSheet.create({
   directionStyle: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -2023,7 +2111,15 @@ const styles$v = StyleSheet.create({
   },
   checkboxContainer: {
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    borderRadius: DHRE_RADIUS.SM,
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  labelContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: DHRE_PADDING.SM
   }
 });
 
@@ -2057,12 +2153,15 @@ const Checkbox = ({
   partialIcon,
   partialDisabledIcon,
   isPartial = false,
-  size,
+  size = "small",
   titleVariant,
   titleStyle,
   containerStyle,
+  checkBoxHeaderStyle,
+  checkboxStyle,
   onPress,
-  hideCheckbox = false
+  hideCheckbox = false,
+  labelIcon
 }) => {
   const { theme } = useTheme();
   const [checked, setChecked] = useState(isChecked || false);
@@ -2092,16 +2191,27 @@ const Checkbox = ({
     minWidth: size === "small" ? 20 : 24,
     minHeight: size === "small" ? 20 : 24
   };
-  return /* @__PURE__ */ React.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React.createElement(View, { style: styles$v.directionStyle }, hideCheckbox ? null : /* @__PURE__ */ React.createElement(
+  const isFilledState = checked || isPartial;
+  const checkboxContainerDynamicStyle = {
+    backgroundColor: disable ? isFilledState ? theme[Theme.STROKE_DISABLED_SELECTED] : "transparent" : isFilledState ? theme[Theme.STROKE_ACTIVE] : "transparent",
+    borderColor: disable ? theme[Theme.CONTENT_DISABLE_DARK] : theme[Theme.STROKE_ACTIVE],
+    borderWidth: disable && isFilledState ? 0 : 1
+  };
+  return /* @__PURE__ */ React.createElement(View, { testID, style: containerStyle }, /* @__PURE__ */ React.createElement(View, { style: [styles$u.directionStyle, checkBoxHeaderStyle] }, hideCheckbox ? null : /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Checkbox-Press",
       onPressIn: handlePress,
       disabled: disable,
-      style: [styles$v.checkboxContainer, iconContainerSizeStyle]
+      style: [
+        styles$u.checkboxContainer,
+        iconContainerSizeStyle,
+        checkboxContainerDynamicStyle,
+        checkboxStyle
+      ]
     },
-    React.cloneElement(resolvedIcon)
-  ), /* @__PURE__ */ React.createElement(
+    resolvedIcon ? React.cloneElement(resolvedIcon) : null
+  ), /* @__PURE__ */ React.createElement(View, { style: styles$u.labelContainer }, labelIcon && React.cloneElement(labelIcon, { width: 20, height: 20 }), /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: resolvedVariant,
@@ -2109,11 +2219,11 @@ const Checkbox = ({
       style: [labelColorStyle, titleStyle],
       onPressIn: onPress
     }
-  )));
+  ))));
 };
 var CheckBox = withThemeProvider(Checkbox);
 
-const styles$u = StyleSheet.create({
+const styles$t = StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
   },
@@ -2167,26 +2277,26 @@ const CustomDropdown$1 = ({
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$u.labelStyle,
+      style: styles$t.labelStyle,
       text: label
     }
   ), /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: `${testId}-BTN`,
-      style: styles$u.dropDownStyle,
+      style: styles$t.dropDownStyle,
       onPress: () => setShowOptions(!showOptions)
     },
     iconName && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$u.iconStyle
+      style: styles$t.iconStyle
     })),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P3regular",
-        style: styles$u.selectedValueStyle,
+        style: styles$t.selectedValueStyle,
         text: selectedValue ? selectedValue.label : placeholder
       }
     ),
@@ -2197,7 +2307,7 @@ const CustomDropdown$1 = ({
       width: moderateScale(24),
       height: moderateScale(24)
     }))
-  ), showOptions && /* @__PURE__ */ React.createElement(View, { style: styles$u.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React.createElement(
+  ), showOptions && /* @__PURE__ */ React.createElement(View, { style: styles$t.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React.createElement(
     Pressable,
     {
       key: id,
@@ -2207,7 +2317,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
         }
@@ -2216,7 +2326,7 @@ const CustomDropdown$1 = ({
     iconName && /* @__PURE__ */ React.createElement(View, { style: iconStyle }, React.cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$u.iconStyle
+      style: styles$t.iconStyle
     })),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
@@ -2231,7 +2341,7 @@ const CustomDropdown$1 = ({
   ))));
 };
 
-const styles$t = StyleSheet.create({
+const styles$s = StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTDARK
   },
@@ -2313,18 +2423,18 @@ const CustomTextInput = ({
     CustomTypography,
     {
       variant: "P3medium",
-      style: [styles$t.labelStyle, disabled && styles$t.disableTextStyle],
+      style: [styles$s.labelStyle, disabled && styles$s.disableTextStyle],
       text: label
     }
   ), /* @__PURE__ */ React.createElement(
     View,
     {
       style: [
-        styles$t.inputContainer,
-        isFocused && styles$t.inputFocused,
-        error && styles$t.inputError,
-        disabled && styles$t.disableInputStyle,
-        successMessage ? styles$t.inputSucess : {},
+        styles$s.inputContainer,
+        isFocused && styles$s.inputFocused,
+        error && styles$s.inputError,
+        disabled && styles$s.disableInputStyle,
+        successMessage ? styles$s.inputSucess : {},
         {
           height: multiline ? 120 : 48,
           alignItems: multiline ? "flex-start" : "center"
@@ -2334,7 +2444,7 @@ const CustomTextInput = ({
     isSearchBar && searchIcon && React.cloneElement(searchIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$t.searchIconStyle
+      style: styles$s.searchIconStyle
     }),
     /* @__PURE__ */ React.createElement(
       TextInput,
@@ -2342,7 +2452,7 @@ const CustomTextInput = ({
         ...props,
         onFocus,
         onBlur,
-        style: styles$t.input,
+        style: styles$s.input,
         placeholderTextColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
         editable: !disabled,
         value,
@@ -2382,7 +2492,7 @@ const CustomTooltip = (props) => {
   }] }, triggerElement);
 };
 
-const styles$s = StyleSheet.create({
+const styles$r = StyleSheet.create({
   container: {
     backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
     paddingHorizontal: horizontalScale(16),
@@ -2432,21 +2542,21 @@ const FileUpload = ({
   return /* @__PURE__ */ React.createElement(
     View,
     {
-      style: [styles$s.container, containerStyle],
+      style: [styles$r.container, containerStyle],
       testID: "file-upload-container"
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$s.content }, /* @__PURE__ */ React.createElement(View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React.cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React.createElement(CustomTypography, { variant: "H8bold", style: styles$s.title, text: title }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles$r.content }, /* @__PURE__ */ React.createElement(View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React.cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React.createElement(CustomTypography, { variant: "H8bold", style: styles$r.title, text: title }), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$s.description,
+        style: styles$r.description,
         text: `Drop files directly here or `
       }
     ), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$s.browse,
+        style: styles$r.browse,
         text: btnText
       }
     ), /* @__PURE__ */ React.createElement(
@@ -2454,14 +2564,14 @@ const FileUpload = ({
       {
         testID: "file-upload-description",
         variant: "P4regular",
-        style: styles$s.description,
+        style: styles$r.description,
         text: ` from your device`
       }
     )),
     /* @__PURE__ */ React.createElement(
       Pressable,
       {
-        style: styles$s.button,
+        style: styles$r.button,
         onPress: onUpload,
         testID: "file-upload-button"
       },
@@ -2469,7 +2579,7 @@ const FileUpload = ({
         CustomTypography,
         {
           variant: "B2semiBold",
-          style: styles$s.buttonText,
+          style: styles$r.buttonText,
           text: btnText
         }
       )
@@ -2481,7 +2591,7 @@ const PdfView = (props) => {
   return /* @__PURE__ */ React.createElement(Pdf, { ...props, trustAllCerts: false });
 };
 
-const styles$r = StyleSheet.create({
+const styles$q = StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -2537,39 +2647,39 @@ const PopUp = ({
   leftButtonShown = false,
   rightButtonShown = false
 }) => {
-  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$r.container }, title ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { testID, style: styles$q.container }, title ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
-      style: styles$r.subTitleBelow,
+      style: styles$q.subTitleBelow,
       variant: "H6semiBold",
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
-      style: styles$r.subtitle,
+      style: styles$q.subtitle,
       variant: "P3regular",
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$r.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React.createElement(
+  ) : null, /* @__PURE__ */ React.createElement(View, { style: styles$q.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React.createElement(
     Pressable,
     {
       testID: "Left-Button-Press",
-      style: styles$r.buttonLeft,
+      style: styles$q.buttonLeft,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        style: styles$r.buttonLeftText,
+        style: styles$q.buttonLeftText,
         variant: "B2semiBold",
         text: buttonText
       }
     )
-  ) : null, rightButtonShown ? /* @__PURE__ */ React.createElement(Pressable, { style: styles$r.button, onPress: onButtonPress }, /* @__PURE__ */ React.createElement(
+  ) : null, rightButtonShown ? /* @__PURE__ */ React.createElement(Pressable, { style: styles$q.button, onPress: onButtonPress }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
-      style: styles$r.buttonText,
+      style: styles$q.buttonText,
       variant: "B2semiBold",
       text: buttonText
     }
@@ -2625,7 +2735,7 @@ const LINE_COLOR_KEYS = {
   unfilledColor: "SURFACE_PRIMARY_TRANSPARENT"
 };
 
-const styles$q = StyleSheet.create({
+const styles$p = StyleSheet.create({
   lineContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -2687,7 +2797,7 @@ const CustomProgressBar = ({
   const effectiveLineFillColor = fillColor ?? theme[LINE_COLOR_KEYS.fillColor];
   const effectiveLineUnfilledColor = unfilledColor ?? theme[LINE_COLOR_KEYS.unfilledColor];
   const effectiveLineHeight = height ?? LINE_DEFAULTS.trackHeight;
-  const renderCircleCenter = () => /* @__PURE__ */ React.createElement(View, { style: styles$q.circleCenter }, /* @__PURE__ */ React.createElement(
+  const renderCircleCenter = () => /* @__PURE__ */ React.createElement(View, { style: styles$p.circleCenter }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
       text: `${progress}%`,
@@ -2710,7 +2820,7 @@ const CustomProgressBar = ({
         return /* @__PURE__ */ React.createElement(
           View,
           {
-            style: [styles$q.lineContainer, isRTL && styles$q.lineContainerRTL],
+            style: [styles$p.lineContainer, isRTL && styles$p.lineContainerRTL],
             testID: "custom-progress-bar-line-wrapper"
           },
           /* @__PURE__ */ React.createElement(
@@ -2759,7 +2869,7 @@ const CustomProgressBar = ({
 };
 var CustomProgressBar$1 = withThemeProvider(CustomProgressBar);
 
-const styles$p = StyleSheet.create({
+const styles$o = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center"
@@ -2825,13 +2935,13 @@ const Star = ({
       emptyStarColor
     );
     stars.push(
-      /* @__PURE__ */ React.createElement(View, { key: i, style: [styles$p.star, starStyle] }, starType)
+      /* @__PURE__ */ React.createElement(View, { key: i, style: [styles$o.star, starStyle] }, starType)
     );
   }
-  return /* @__PURE__ */ React.createElement(View, { style: styles$p.container, testID: "star" }, stars);
+  return /* @__PURE__ */ React.createElement(View, { style: styles$o.container, testID: "star" }, stars);
 };
 
-var styles$o = StyleSheet.create({
+var styles$n = StyleSheet.create({
   container: {
     flexDirection: "row",
     gap: DHRE_PADDING.SM,
@@ -2887,12 +2997,12 @@ const Tabs = ({
       onSelectionChange(selectedTabs);
     }
   };
-  return /* @__PURE__ */ React.createElement(View, { style: [styles$o.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: [styles$n.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React.createElement(
     Pressable,
     {
       key: id,
       style: {
-        ...styles$o.button,
+        ...styles$n.button,
         backgroundColor: isSelected ? theme.SURFACE_INVERTED : theme.SURFACE_SECONDARY,
         borderColor: isSelected ? theme.SURFACE_INVERTED : theme.STROKE_TERTIARY
       },
@@ -2903,7 +3013,7 @@ const Tabs = ({
       {
         variant: FontStyle.BODY1_MEDIUM,
         style: {
-          ...styles$o.textStyle,
+          ...styles$n.textStyle,
           color: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_PRIMARY
         },
         text: title
@@ -2913,7 +3023,7 @@ const Tabs = ({
 };
 var Tabs$1 = withThemeProvider(Tabs);
 
-const styles$n = StyleSheet.create({
+const styles$m = StyleSheet.create({
   container: {
     width: "100%"
   },
@@ -2976,8 +3086,8 @@ const Tags = ({
     ScrollView,
     {
       testID,
-      style: styles$n.container,
-      contentContainerStyle: styles$n.contentContainer,
+      style: styles$m.container,
+      contentContainerStyle: styles$m.contentContainer,
       horizontal: false
     },
     tags?.map((tag) => /* @__PURE__ */ React.createElement(
@@ -2987,16 +3097,16 @@ const Tags = ({
         key: tag,
         onPress: () => toggleTag(tag),
         style: [
-          styles$n.tag,
+          styles$m.tag,
           tagStyles,
-          selectedTags.includes(tag) ? styles$n.selectedTag : styles$n.tagUnSelected
+          selectedTags.includes(tag) ? styles$m.selectedTag : styles$m.tagUnSelected
         ]
       },
       /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: selectedTags.includes(tag) ? "H9semiBold" : "P4regular",
-          style: selectedTags.includes(tag) ? styles$n.tagText : styles$n.tagUnselectedText,
+          style: selectedTags.includes(tag) ? styles$m.tagText : styles$m.tagUnselectedText,
           text: tag
         }
       ),
@@ -3012,7 +3122,7 @@ const Tags = ({
   );
 };
 
-const styles$m = StyleSheet.create({
+const styles$l = StyleSheet.create({
   container: {
     width: horizontalScale(70),
     height: verticalScale(25),
@@ -3077,26 +3187,26 @@ const CustomSwitch = ({
     Pressable,
     {
       onPress: toggleSwitch,
-      style: [styles$m.container, { width }],
+      style: [styles$l.container, { width }],
       testID: "custom-switch"
     },
     /* @__PURE__ */ React.createElement(
       View,
       {
         style: [
-          styles$m.track,
+          styles$l.track,
           {
             backgroundColor: isOn ? DHRE_COLORS_ALERT.DH_SUCCESS_GREEN_ACCENT : DHRE_COLORS_TEXT.DH_TEXTDISABLED
           }
         ]
       },
-      /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$m.thumb, animatedStyle] }),
+      /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$l.thumb, animatedStyle] }),
       type !== ToggleButtonType.SMALL && /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: "B3semiBold",
           style: [
-            styles$m.text,
+            styles$l.text,
             { textAlign: isOn ? TextDirectType.left : TextDirectType.right }
           ],
           text: isOn ? ToggleTextType.ON : ToggleTextType.OFF
@@ -3106,10 +3216,9 @@ const CustomSwitch = ({
   );
 };
 
-const styles$l = StyleSheet.create({
+const styles$k = StyleSheet.create({
   container: {
-    paddingVertical: DHRE_PADDING.LG,
-    borderBottomWidth: moderateScale(1)
+    paddingVertical: DHRE_PADDING.LG
   },
   header: {
     flexDirection: "row",
@@ -3168,7 +3277,7 @@ const Accordion = ({
     {
       style: [
         {
-          ...styles$l.container,
+          ...styles$k.container,
           borderRadius: 0,
           ...containerStyle
         }
@@ -3178,7 +3287,7 @@ const Accordion = ({
     /* @__PURE__ */ React.createElement(
       Pressable,
       {
-        style: [styles$l.header, headerStyle, disabled && { opacity: 0.5 }],
+        style: [styles$k.header, headerStyle, disabled && { opacity: 0.5 }],
         onPressOut: !disabled ? onToggle : void 0
       },
       headerComponent ? headerComponent() : /* @__PURE__ */ React.createElement(
@@ -3187,7 +3296,7 @@ const Accordion = ({
           variant: titleVariant,
           text: title,
           style: {
-            ...styles$l.title,
+            ...styles$k.title,
             color: theme.CONTENT_PRIMARY,
             ...titleStyle
           }
@@ -3196,14 +3305,14 @@ const Accordion = ({
       icon ? React.cloneElement(icon, {
         width: DHRE_SPACING_BASE.SPACE_20,
         height: DHRE_SPACING_BASE.SPACE_20,
-        style: styles$l.iconStyle
+        style: styles$k.iconStyle
       }) : null
     ),
     optionalElement ? optionalElement() : null,
     isOpen && /* @__PURE__ */ React.createElement(
       Animated.View,
       {
-        style: [styles$l.content, slideAnimation && { height: cardHeight }]
+        style: [styles$k.content, slideAnimation && { height: cardHeight }]
       },
       /* @__PURE__ */ React.createElement(
         View,
@@ -3220,7 +3329,7 @@ const Accordion = ({
 };
 var Accordion$1 = withThemeProvider(Accordion);
 
-const styles$k = StyleSheet.create({
+const styles$j = StyleSheet.create({
   container: {
     position: "absolute",
     alignSelf: "center",
@@ -3228,8 +3337,7 @@ const styles$k = StyleSheet.create({
     top: DHRE_SPACING.XXL,
     borderRadius: DHRE_RADIUS.MD,
     overflow: "hidden",
-    minHeight: DHRE_SPACING.XXL,
-    height: DHRE_SPACING.XXL
+    minHeight: DHRE_SPACING.XXL
   },
   toastContainer: {
     paddingVertical: DHRE_PADDING.LG,
@@ -3339,20 +3447,19 @@ const Toast = React.forwardRef(
       Animated.View,
       {
         style: [
-          styles$k.container,
-          { bottom },
+          styles$j.container,
           { backgroundColor: theme.SURFACE_TERTIARY }
         ],
         testID: "TOAST"
       },
-      /* @__PURE__ */ React.createElement(View, { style: styles$k.toastContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$k.innerContainer }, /* @__PURE__ */ React.createElement(Pressable, { onPress: hideToast, style: styles$k.icon }, isSuccess ? sucessIcon : warning ? warningIcon : errorIcon), /* @__PURE__ */ React.createElement(View, { style: styles$k.textContainer }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: styles$j.toastContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$j.innerContainer }, /* @__PURE__ */ React.createElement(Pressable, { onPress: hideToast, style: styles$j.icon }, isSuccess ? sucessIcon : warning ? warningIcon : errorIcon), /* @__PURE__ */ React.createElement(View, { style: styles$j.textContainer }, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           variant: "BODY2_LIGHT",
           text: message,
-          style: [styles$k.messageText, { color: theme.CONTENT_SECONDRY }]
+          style: [styles$j.messageText, { color: theme.CONTENT_SECONDRY }]
         }
-      ), subjectText && /* @__PURE__ */ React.createElement(View, { style: styles$k.subContainer }, /* @__PURE__ */ React.createElement(
+      ), subjectText && /* @__PURE__ */ React.createElement(View, { style: styles$j.subContainer }, /* @__PURE__ */ React.createElement(
         Button,
         {
           title: subjectText,
@@ -3377,7 +3484,7 @@ const Toast = React.forwardRef(
         Animated.View,
         {
           style: [
-            styles$k.progressBar,
+            styles$j.progressBar,
             {
               width: progressAnim,
               backgroundColor: accentColor
@@ -3394,7 +3501,7 @@ const ToastWithProvider = React.forwardRef(
 );
 ToastWithProvider.displayName = "Toast";
 
-const styles$j = StyleSheet.create({
+const styles$i = StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     justifyContent: "center",
@@ -3473,8 +3580,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],
@@ -3496,7 +3603,7 @@ const CustomSearchBar = ({
       React.cloneElement(searchIcon, {
         width: DHRE_SPACING.LG,
         height: DHRE_SPACING.LG,
-        style: [styles$j.searchIconStyle, searchIconStyle]
+        style: [styles$i.searchIconStyle, searchIconStyle]
       })
     ),
     /* @__PURE__ */ React.createElement(
@@ -3505,7 +3612,7 @@ const CustomSearchBar = ({
         ...props,
         testID: `${testID}-INPUT`,
         style: [
-          styles$j.input,
+          styles$i.input,
           { color: theme[Theme.CONTENT_PRIMARY] },
           inputStyle
         ],
@@ -3540,14 +3647,14 @@ const CustomSearchBar = ({
       React.cloneElement(rightIcon, {
         // width: moderateScale(24),
         // height: moderateScale(24),
-        style: [styles$j.crossIconStyle, crossIconStyle]
+        style: [styles$i.crossIconStyle, crossIconStyle]
       })
     )
   );
 };
 var CustomSearchBar$1 = withThemeProvider(CustomSearchBar);
 
-const styles$i = StyleSheet.create({
+const styles$h = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -3581,7 +3688,7 @@ const CustomHeader = ({
   rightIcons
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(View, { style: styles$i.container, testID: testId }, /* @__PURE__ */ React.createElement(View, { style: styles$i.pageTitleContainer }, leftIcon && /* @__PURE__ */ React.createElement(HeaderIcon, { config: leftIcon }), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: styles$h.container, testID: testId }, /* @__PURE__ */ React.createElement(View, { style: styles$h.pageTitleContainer }, leftIcon && /* @__PURE__ */ React.createElement(HeaderIcon, { config: leftIcon }), /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "BODY1_MEDIUM",
@@ -3591,11 +3698,11 @@ const CustomHeader = ({
   ), titleSuffixIcon && React.cloneElement(titleSuffixIcon, {
     width: ICON_SIZE,
     height: ICON_SIZE
-  })), rightIcons && rightIcons.length > 0 && /* @__PURE__ */ React.createElement(View, { style: styles$i.iconsContainer }, rightIcons.map((config, index) => /* @__PURE__ */ React.createElement(HeaderIcon, { key: index, config }))));
+  })), rightIcons && rightIcons.length > 0 && /* @__PURE__ */ React.createElement(View, { style: styles$h.iconsContainer }, rightIcons.map((config, index) => /* @__PURE__ */ React.createElement(HeaderIcon, { key: index, config }))));
 };
 var CustomHeader$1 = withThemeProvider(CustomHeader);
 
-const styles$h = StyleSheet.create({
+const styles$g = StyleSheet.create({
   container: {
     flex: 1
   },
@@ -3625,14 +3732,14 @@ const ActionButton = ({
   {
     testID,
     onPress,
-    style: [styles$h.actionButton, style]
+    style: [styles$g.actionButton, style]
   },
   icon,
   /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "L1_REGULAR",
-      style: [styles$h.titleStyle, titleStyle],
+      style: [styles$g.titleStyle, titleStyle],
       text: title
     }
   )
@@ -3673,7 +3780,7 @@ const SwipableList = (props) => {
       return id;
     });
   }, []);
-  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React.createElement(View, { style: styles$h.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React.createElement(
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React.createElement(View, { style: styles$g.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React.createElement(
     ActionButton,
     {
       icon: leftPrimaryActionIcon,
@@ -3700,7 +3807,7 @@ const SwipableList = (props) => {
       titleStyle
     }
   ));
-  const rightActionHandle = (item) => /* @__PURE__ */ React.createElement(View, { style: [styles$h.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React.createElement(
+  const rightActionHandle = (item) => /* @__PURE__ */ React.createElement(View, { style: [styles$g.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React.createElement(
     ActionButton,
     {
       icon: rightPrimaryActionIcon,
@@ -3714,7 +3821,7 @@ const SwipableList = (props) => {
       titleStyle
     }
   ));
-  const renderItem = ({ item }) => /* @__PURE__ */ React.createElement(View, { testID: `${testId}-LIST`, style: styles$h.container }, /* @__PURE__ */ React.createElement(
+  const renderItem = ({ item }) => /* @__PURE__ */ React.createElement(View, { testID: `${testId}-LIST`, style: styles$g.container }, /* @__PURE__ */ React.createElement(
     Swipeable,
     {
       ref: (ref) => swipeableRefs.current[item.id] = ref,
@@ -3740,7 +3847,7 @@ const SwipableList = (props) => {
         View,
         {
           style: {
-            ...styles$h.seperator,
+            ...styles$g.seperator,
             backgroundColor: theme.BORDER_SEPRATOR
           }
         }
@@ -3750,7 +3857,15 @@ const SwipableList = (props) => {
 };
 var SwipableList$1 = withThemeProvider(SwipableList);
 
-const styles$g = StyleSheet.create({
+const OUTLINED_GRADIENT_COLORS = [
+  DHRE_CYAN_HIGHLIGHT[300],
+  "#438CB1"
+];
+const OUTLINED_GRADIENT_START = { x: 0, y: 0 };
+const OUTLINED_GRADIENT_END = { x: 1, y: 1 };
+const OUTLINED_BORDER_WIDTH = 1;
+
+const styles$f = StyleSheet.create({
   container: {
     justifyContent: "center",
     alignItems: "center"
@@ -3790,13 +3905,6 @@ const ICON_BLUR_TYPE_STYLE = StyleSheet.create({
     overflow: "hidden"
   }
 });
-const OUTLINED_GRADIENT_COLORS = [
-  DHRE_CYAN_HIGHLIGHT[300],
-  "#438CB1"
-];
-const OUTLINED_GRADIENT_START = { x: 0, y: 0 };
-const OUTLINED_GRADIENT_END = { x: 1, y: 1 };
-const OUTLINED_BORDER_WIDTH = 1;
 const OUTLINED_BUTTON_STYLES = StyleSheet.create({
   shell: {
     borderRadius: ICON_BUTTON_RADIUS,
@@ -3938,7 +4046,7 @@ const CustomIcon = ({
         return renderOutlinedButton();
     }
   };
-  const outerStyle = labelPosition ? [ICON_LABEL_POSITION_STYLES[labelPosition], containerStyle ?? {}] : [styles$g.container, containerStyle ?? {}];
+  const outerStyle = labelPosition ? [ICON_LABEL_POSITION_STYLES[labelPosition], containerStyle ?? {}] : [styles$f.container, containerStyle ?? {}];
   const resolvedTitleColor = type ? { color: theme[Theme.CONTENT_PRIMARY] } : void 0;
   const resolvedTitleVariant = titleVariant ?? ICON_TITLE_VARIANT_FOR_SIZE[size ?? "large"];
   return /* @__PURE__ */ React.createElement(
@@ -3954,14 +4062,14 @@ const CustomIcon = ({
       {
         variant: resolvedTitleVariant,
         text: title,
-        style: [styles$g.title, resolvedTitleColor, titleStyle]
+        style: [styles$f.title, resolvedTitleColor, titleStyle]
       }
     )
   );
 };
 var CustomIcon$1 = withThemeProvider(CustomIcon);
 
-const createStyles$5 = (theme) => {
+const createStyles$6 = (theme) => {
   return StyleSheet.create({
     container: {
       position: "absolute",
@@ -10162,7 +10270,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;
@@ -10202,7 +10310,7 @@ const CustomLoader = ({
 };
 var CustomLoader$1 = withThemeProvider(CustomLoader);
 
-const createStyles$4 = (scaledSize, color) => StyleSheet.create({
+const createStyles$5 = (scaledSize, color) => StyleSheet.create({
   // Full-screen absolute overlay — mirrors CustomLoader `container`
   container: {
     position: "absolute",
@@ -10324,7 +10432,7 @@ const LoaderContent = ({
   }, []);
   const color = theme[Theme.CONTENT_PRIMARY];
   const styles = useMemo(
-    () => createStyles$4(scaledSize, color),
+    () => createStyles$5(scaledSize, color),
     [scaledSize, color]
   );
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle], testID }, /* @__PURE__ */ React.createElement(View, { style: [styles.backdrop, backdropStyle] }, /* @__PURE__ */ React.createElement(View, { style: [styles.box, boxStyle] }, /* @__PURE__ */ React.createElement(
@@ -10388,14 +10496,14 @@ const HorizontalLine = ({ backgroundColor = "SURFACE_SECONDARY", style }) => {
     View,
     {
       style: [
-        styles$f.line,
+        styles$e.line,
         { backgroundColor: theme[backgroundColor] },
         style
       ]
     }
   );
 };
-const styles$f = StyleSheet.create({
+const styles$e = StyleSheet.create({
   line: {
     height: 1,
     width: "100%"
@@ -10418,18 +10526,18 @@ const Topic = ({
     TouchableOpacity,
     {
       style: [
-        styles$e.button,
+        styles$d.button,
         { backgroundColor: theme[Theme.SURFACE_SECONDARY] },
         containterStyle
       ],
       onPress
     },
-    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$e.rightIconContainer }, React.cloneElement(rightIcon)),
-    /* @__PURE__ */ React.createElement(View, { style: styles$e.timeContainer }, time && /* @__PURE__ */ React.createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
-    /* @__PURE__ */ React.createElement(View, { style: styles$e.textContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$e.paymentView }, statusImage && /* @__PURE__ */ React.createElement(View, null, React.cloneElement(statusImage)), subTitle && /* @__PURE__ */ React.createElement(
+    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$d.rightIconContainer }, React.cloneElement(rightIcon)),
+    /* @__PURE__ */ React.createElement(View, { style: styles$d.timeContainer }, time && /* @__PURE__ */ React.createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
+    /* @__PURE__ */ React.createElement(View, { style: styles$d.textContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$d.paymentView }, statusImage && /* @__PURE__ */ React.createElement(View, null, React.cloneElement(statusImage)), subTitle && /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
-        style: [styles$e.subTitle, subTitleStyle],
+        style: [styles$d.subTitle, subTitleStyle],
         text: subTitle,
         variant: FontStyle.L2_REGULAR,
         textColor: Theme.CONTENT_PRIMARY
@@ -10444,7 +10552,7 @@ const Topic = ({
     ))
   );
 };
-const styles$e = StyleSheet.create({
+const styles$d = StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -10540,14 +10648,14 @@ const ContactModal = ({
   const renderEmailOptions = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
-      style: styles$d.title,
+      style: styles$c.title,
       text: "Open email app",
       variant: "L2_REGULAR"
     }
   ), /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
-      style: styles$d.subtitle,
+      style: styles$c.subtitle,
       text: "Which app would you like to open?",
       variant: "L2_REGULAR"
     }
@@ -10555,33 +10663,33 @@ const ContactModal = ({
     Pressable,
     {
       onPress: () => handleOptionPress(),
-      style: styles$d.optionButton
+      style: styles$c.optionButton
     },
     /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
-        style: styles$d.optionText,
+        style: styles$c.optionText,
         text: option,
         variant: "B3_BOLD"
       }
     )
   ))));
-  const renderContent = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$d.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React.createElement(Pressable, { onPress: handleCall, style: styles$d.optionButton }, /* @__PURE__ */ React.createElement(
+  const renderContent = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$c.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React.createElement(Pressable, { onPress: handleCall, style: styles$c.optionButton }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
-      style: styles$d.optionText,
+      style: styles$c.optionText,
       text: `Call ${phoneNumber}`,
       variant: "B3_BOLD"
     }
-  ))), /* @__PURE__ */ React.createElement(Pressable, { onPress: onClose, style: styles$d.cancelButton }, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement(Pressable, { onPress: onClose, style: styles$c.cancelButton }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
-      style: styles$d.cancelText,
+      style: styles$c.cancelText,
       text: "Cancel",
       variant: "B2_REGULAR"
     }
   )));
-  return /* @__PURE__ */ React.createElement(View, { style: styles$d.container }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: styles$c.container }, /* @__PURE__ */ React.createElement(
     Modal$1,
     {
       animationType: "slide",
@@ -10589,10 +10697,10 @@ const ContactModal = ({
       visible,
       onRequestClose: onClose
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$d.modalContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$d.modalContent }, renderContent()))
+    /* @__PURE__ */ React.createElement(View, { style: styles$c.modalContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$c.modalContent }, renderContent()))
   ));
 };
-const styles$d = StyleSheet.create({
+const styles$c = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
@@ -10654,7 +10762,7 @@ const styles$d = StyleSheet.create({
 });
 var ContactModel = withThemeProvider(ContactModal);
 
-const styles$c = StyleSheet.create({
+const styles$b = StyleSheet.create({
   // Outer card: wraps Calendar (which includes the custom header via renderHeader)
   // and provides the dark-blue background + rounded corners.
   calendarCard: {
@@ -10806,12 +10914,12 @@ const DateRangePicker = (props) => {
     View,
     {
       style: [
-        styles$c.calendarHeader,
+        styles$b.calendarHeader,
         { borderBottomColor: theme.STROKE_TERTIARY }
       ]
     },
-    /* @__PURE__ */ React.createElement(Text, { style: [styles$c.monthText, { color: theme.CONTENT_PRIMARY }] }, monthLabel),
-    /* @__PURE__ */ React.createElement(View, { style: styles$c.arrowsContainer }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Text, { style: [styles$b.monthText, { color: theme.CONTENT_PRIMARY }] }, monthLabel),
+    /* @__PURE__ */ React.createElement(View, { style: styles$b.arrowsContainer }, /* @__PURE__ */ React.createElement(
       TouchableOpacity,
       {
         onPress: prevMonth,
@@ -10845,81 +10953,86 @@ const DateRangePicker = (props) => {
       ))
     ))
   );
-  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(View, { style: [styles$c.calendarCard, { backgroundColor: theme.SURFACE_SECONDARY }] }, /* @__PURE__ */ React.createElement(
-    Calendar,
-    {
-      key: monthKey,
-      current: currentDateStr,
-      markedDates: getMarkedDates(),
-      markingType: "period",
-      hideArrows: true,
-      renderHeader: renderCalendarHeader,
-      theme: {
-        calendarBackground: "transparent",
-        dayTextColor: theme.CONTENT_PRIMARY,
-        textDisabledColor: theme.CONTENT_DISABLE,
-        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"
+  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles$b.calendarCard,
+        { backgroundColor: theme.SURFACE_SECONDARY }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      Calendar,
+      {
+        key: monthKey,
+        current: currentDateStr,
+        markedDates: getMarkedDates(),
+        markingType: "period",
+        hideArrows: true,
+        renderHeader: renderCalendarHeader,
+        theme: {
+          calendarBackground: "transparent",
+          dayTextColor: theme.CONTENT_PRIMARY,
+          textDisabledColor: theme.CONTENT_DISABLE_DARK,
+          todayTextColor: theme.CONTENT_PRIMARY,
+          textSectionTitleColor: theme.CONTENT_SECONDRY,
+          textDayFontSize: 16,
+          textDayFontWeight: "500",
+          textDayHeaderFontSize: 11,
+          textDayHeaderFontWeight: "300",
+          // Reduce row gap from default 14px (7+7) to 4px (2+2) to match Figma.
+          weekVerticalMargin: 2,
+          // Remove the calendar body's default 5px horizontal padding so the date
+          // grid aligns flush with the custom renderHeader content.
+          "stylesheet.calendar.main": {
+            container: {
+              paddingLeft: 0,
+              paddingRight: 0,
+              backgroundColor: "transparent"
+            }
           },
-          dayHeader: {
-            marginTop: 2,
-            marginBottom: 7,
-            width: 32,
-            textAlign: "center",
-            textTransform: "uppercase",
-            fontSize: 11,
-            fontWeight: "300",
-            color: theme.CONTENT_SECONDRY
+          // Strip Calendar header container's default padding/margin, zero the
+          // day-names row top margin, and apply uppercase + correct sizing to
+          // each day abbreviation label.
+          "stylesheet.calendar.header": {
+            header: {
+              paddingLeft: 0,
+              paddingRight: 0,
+              marginTop: 0,
+              marginBottom: 0
+            },
+            week: {
+              marginTop: 8,
+              flexDirection: "row",
+              justifyContent: "space-around"
+            },
+            dayHeader: {
+              marginTop: 2,
+              marginBottom: 7,
+              width: 32,
+              textAlign: "center",
+              textTransform: "uppercase",
+              fontSize: 11,
+              fontWeight: "300",
+              color: theme.CONTENT_SECONDRY
+            }
           }
-        }
-      },
-      style: { backgroundColor: "transparent", borderRadius: 0 },
-      onDayPress,
-      firstDay: 1,
-      ...calendarProps
-    }
-  )), /* @__PURE__ */ React.createElement(
+        },
+        style: { backgroundColor: "transparent", borderRadius: 0 },
+        onDayPress,
+        firstDay: 1,
+        ...calendarProps
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(
     Button,
     {
       title: btnTitle,
       onPress: () => {
         onButtonPress(selectedRange?.startDate, selectedRange?.endDate);
       },
-      containerStyle: {
-        ...styles$c.applyButton,
-        backgroundColor: theme.SURFACE_INVERTED,
-        borderColor: theme.NOTIFICATIONS_HIGHLIGHT
-      },
-      textStyle: { color: theme.CONTENT_INVERTED },
+      variant: "primary",
+      size: "large",
       disabled: isButtonDisabled
     }
   ));
@@ -10943,20 +11056,20 @@ const OurOfficesButton = ({
     TouchableOpacity,
     {
       style: [
-        styles$b.button,
+        styles$a.button,
         { backgroundColor: theme["SURFACE_SECONDARY"] },
         containerStyle
       ],
       onPress
     },
-    leftIcon && /* @__PURE__ */ React.createElement(View, { style: styles$b.iconContainer }, React.cloneElement(leftIcon)),
-    /* @__PURE__ */ React.createElement(View, { style: styles$b.textContainer }, /* @__PURE__ */ React.createElement(
+    leftIcon && /* @__PURE__ */ React.createElement(View, { style: styles$a.iconContainer }, React.cloneElement(leftIcon)),
+    /* @__PURE__ */ React.createElement(View, { style: styles$a.textContainer }, /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
         text: title,
         variant: titleVariant,
         textColor: titleColor,
-        style: styles$b.textView
+        style: styles$a.textView
       }
     ), /* @__PURE__ */ React.createElement(
       CustomText$1,
@@ -10964,13 +11077,13 @@ const OurOfficesButton = ({
         text: description,
         variant: descriptionVariant,
         textColor: descriptionColor,
-        style: styles$b.flexWrap
+        style: styles$a.flexWrap
       }
     )),
-    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$b.rightIconContainer }, React.cloneElement(rightIcon))
+    rightIcon && /* @__PURE__ */ React.createElement(View, { style: styles$a.rightIconContainer }, React.cloneElement(rightIcon))
   );
 };
-const styles$b = StyleSheet.create({
+const styles$a = StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -10994,7 +11107,7 @@ const styles$b = StyleSheet.create({
 });
 var OurOffices = withThemeProvider(OurOfficesButton);
 
-const styles$a = StyleSheet.create({
+const styles$9 = StyleSheet.create({
   iconContainer: {
     position: "relative",
     alignItems: "center"
@@ -11023,10 +11136,10 @@ const NotificationBandge = ({
   if (notificationCount <= 0) {
     return icon;
   }
-  return /* @__PURE__ */ React.createElement(View, { style: styles$a.iconContainer }, icon, /* @__PURE__ */ React.createElement(View, { style: styles$a.badge }, /* @__PURE__ */ React.createElement(Text, { style: [styles$a.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
+  return /* @__PURE__ */ React.createElement(View, { style: styles$9.iconContainer }, icon, /* @__PURE__ */ React.createElement(View, { style: styles$9.badge }, /* @__PURE__ */ React.createElement(Text, { style: [styles$9.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
 };
 
-const createStyles$3 = (theme) => {
+const createStyles$4 = (theme) => {
   return StyleSheet.create({
     // ── ScrollableList ────────────────────────────────────────────
     container: {
@@ -11121,7 +11234,7 @@ const CategoryItem = memo(
     enableTextWrap
   }) => {
     const { theme } = useTheme();
-    const styles = useMemo(() => createStyles$3(theme), [theme]);
+    const styles = useMemo(() => createStyles$4(theme), [theme]);
     const handlePress = useCallback(
       () => onPress(item.name, item.value),
       [onPress, item.name, item.value]
@@ -11218,7 +11331,7 @@ const ScrollableList = ({
     data && data.length > 0 ? data[0].name : null
   );
   const { theme } = useTheme();
-  const styles = useMemo(() => createStyles$3(theme), [theme]);
+  const styles = useMemo(() => createStyles$4(theme), [theme]);
   const activeKey = activeTab ?? selectedItem;
   const handlePress = useCallback(
     (name, value) => {
@@ -11261,7 +11374,7 @@ const ScrollableList = ({
 };
 var category = withThemeProvider(ScrollableList);
 
-const createStyles$2 = (theme) => {
+const createStyles$3 = (theme) => {
   return StyleSheet.create({
     container: {
       flex: 1,
@@ -11339,7 +11452,7 @@ const FeedbackForm = ({
   const isFilled = feedback.length > 0;
   const label = inputLabel ?? inputText;
   const { theme } = useTheme();
-  const styles = createStyles$2(theme);
+  const styles = createStyles$3(theme);
   return /* @__PURE__ */ React.createElement(View, { style: styles.container }, /* @__PURE__ */ React.createElement(
     CustomText$1,
     {
@@ -11424,7 +11537,7 @@ const CountryDropDown = ({
     setCallingCode(`+${country.callingCode[0]}`);
     getCountryCode(`+${country.callingCode[0]}`);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: [styles$9.container, containerStyle] }, /* @__PURE__ */ React.createElement(View, { style: [styles$9.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: [styles$8.container, containerStyle] }, /* @__PURE__ */ React.createElement(View, { style: [styles$8.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React.createElement(
     CountryPicker,
     {
       withFilter: true,
@@ -11438,20 +11551,20 @@ const CountryDropDown = ({
     Text,
     {
       onPress: () => setPickerVisible(true),
-      style: [styles$9.callingCode, callingCodeStyle]
+      style: [styles$8.callingCode, callingCodeStyle]
     },
     callingCode
-  )), /* @__PURE__ */ React.createElement(View, { style: styles$9.flex }, (isFocused || value) && /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(View, { style: styles$8.flex }, (isFocused || value) && /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
       text: label ?? "",
-      style: styles$9.floatingLabel
+      style: styles$8.floatingLabel
     }
   ), /* @__PURE__ */ React.createElement(
     TextInput,
     {
-      style: [styles$9.input, inputStyle],
+      style: [styles$8.input, inputStyle],
       placeholder: !isFocused ? placeholder : "",
       keyboardType: "phone-pad",
       value,
@@ -11467,13 +11580,13 @@ const CountryDropDown = ({
       variant: "L2_REGULAR",
       text: errorMessage ?? "",
       style: {
-        ...styles$9.errorStyle,
+        ...styles$8.errorStyle,
         color: DHRE_DEFAULT.DH_SEMENTIC_ERROR
       }
     }
   ) : null);
 };
-const styles$9 = StyleSheet.create({
+const styles$8 = StyleSheet.create({
   flex: {
     flex: 1
   },
@@ -11534,6 +11647,7 @@ const CommonTextInput = (props) => {
     keyboardType = "default",
     placeholderText,
     inputStyle,
+    containerStyle,
     maxLength,
     errorMessage,
     helperText,
@@ -11562,7 +11676,7 @@ const CommonTextInput = (props) => {
   const labelColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_PRIMARY];
   const helperColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_SECONDRY];
   const helperMessage = errorMessage || helperText;
-  return /* @__PURE__ */ React.createElement(Pressable, { onPress: handlePress, style: styles$8.container }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Pressable, { onPress: handlePress, style: [styles$7.container, containerStyle] }, /* @__PURE__ */ React.createElement(
     TextInput$1,
     {
       mode: "outlined",
@@ -11571,7 +11685,7 @@ const CommonTextInput = (props) => {
       spellCheck: false,
       autoCorrect: false,
       outlineStyle: {
-        ...styles$8.outlineStyle,
+        ...styles$7.outlineStyle,
         borderColor: currentBorderColor,
         borderWidth,
         backgroundColor: containerBackground
@@ -11593,7 +11707,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: {
@@ -11612,12 +11727,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"
@@ -11648,7 +11758,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"
@@ -11658,7 +11768,7 @@ const CommonTextInput = (props) => {
     helperMessage
   ) : null);
 };
-const styles$8 = StyleSheet.create({
+const styles$7 = StyleSheet.create({
   container: {
     justifyContent: "center"
   },
@@ -11733,7 +11843,7 @@ const CustomDropdown = (props) => {
         Text,
         {
           style: [
-            styles$7.label,
+            styles$6.label,
             FONT_STYLES[FontStyle.BODY2_LIGHT],
             {
               color: labelColor,
@@ -11758,11 +11868,11 @@ const CustomDropdown = (props) => {
   };
   const renderItem = (item) => {
     const isSelected = item[valueField] === value;
-    return /* @__PURE__ */ React.createElement(View, { style: [styles$7.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(View, { style: [styles$6.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React.createElement(
       Text,
       {
         style: [
-          styles$7.itemText,
+          styles$6.itemText,
           FONT_STYLES[FontStyle.BODY2_LIGHT],
           { color: theme.CONTENT_PRIMARY },
           itemTextStyle,
@@ -11772,12 +11882,12 @@ const CustomDropdown = (props) => {
       item[labelField]
     ));
   };
-  return /* @__PURE__ */ React.createElement(View, { style: [styles$7.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
     Dropdown,
     {
       ...props,
       style: [
-        styles$7.dropdown,
+        styles$6.dropdown,
         {
           borderColor: fieldBorderColor,
           borderWidth: fieldBorderWidth,
@@ -11787,18 +11897,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,
@@ -11828,7 +11938,7 @@ const CustomDropdown = (props) => {
         menuContainerStyle
       ],
       activeColor: activeColor ?? theme.SURFACE_SECONDARY,
-      itemContainerStyle: [styles$7.itemListStyle, itemContainerStyle],
+      itemContainerStyle: [styles$6.itemListStyle, itemContainerStyle],
       disable,
       autoScroll,
       dropdownPosition,
@@ -11841,7 +11951,7 @@ const CustomDropdown = (props) => {
     Text,
     {
       style: [
-        styles$7.helperText,
+        styles$6.helperText,
         FONT_STYLES[FontStyle.BODY2_LIGHT],
         { color: helperColor }
       ]
@@ -11849,7 +11959,7 @@ const CustomDropdown = (props) => {
     helperMessage
   ) : null);
 };
-const styles$7 = StyleSheet.create({
+const styles$6 = StyleSheet.create({
   container: {
     marginVertical: verticalScale(4),
     direction: "ltr",
@@ -11896,7 +12006,7 @@ const styles$7 = StyleSheet.create({
 });
 var DropDown = withThemeProvider(CustomDropdown);
 
-const styles$6 = StyleSheet.create({
+const styles$5 = StyleSheet.create({
   mainContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -11955,18 +12065,18 @@ const CustomSwitchBtn = ({
     {
       disabled,
       onPress: toggleSwitch,
-      style: { ...styles$6.mainContainer, ...containerStyle }
+      style: { ...styles$5.mainContainer, ...containerStyle }
     },
     /* @__PURE__ */ React.createElement(
       Animated.View,
       {
-        style: [styles$6.circle, { transform: [{ translateX }], ...circleStyle }]
+        style: [styles$5.circle, { transform: [{ translateX }], ...circleStyle }]
       }
     ),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        style: [styles$6.activeText, value ? inActiveTextStyle : activeTextStyle],
+        style: [styles$5.activeText, value ? inActiveTextStyle : activeTextStyle],
         text: activeText,
         variant: activeTextVariant
       }
@@ -11975,7 +12085,7 @@ const CustomSwitchBtn = ({
       CustomTypography,
       {
         style: [
-          styles$6.inActiveText,
+          styles$5.inActiveText,
           value ? activeTextStyle : inActiveTextStyle
         ],
         text: inActiveText,
@@ -12013,7 +12123,7 @@ class ToastService {
 }
 const toastService = new ToastService();
 
-const createStyles$1 = (theme) => StyleSheet.create({
+const createStyles$2 = (theme) => StyleSheet.create({
   listContainer: {
     paddingHorizontal: 10,
     alignItems: "center"
@@ -12055,7 +12165,7 @@ const TagsComponent = ({
   unselectedTagButton
 }) => {
   const { theme } = useTheme();
-  const styles = createStyles$1(theme);
+  const styles = createStyles$2(theme);
   const reorderedTags = () => {
     if (selectedTag) {
       return [
@@ -12105,7 +12215,7 @@ const TagsComponent = ({
 };
 var TagSingleSelection = withThemeProvider(TagsComponent);
 
-const styles$5 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
   textInputContainer: {
     flexDirection: "row",
     gap: DHRE_PADDING.MD,
@@ -12288,12 +12398,12 @@ const OTPInput = React.forwardRef(
           ...otpHeaderTextStyle
         }
       }
-    ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$4.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
       TextInput,
       {
         key: index?.toString(),
         style: {
-          ...styles$5.textInputStyle,
+          ...styles$4.textInputStyle,
           color: !isEditable ? theme$1.CONTENT_DISABLE_DARK : otp.length === length ? theme$1.STROKE_PRIMARY : theme$1.CONTENT_PRIMARY,
           backgroundColor: !isEditable ? theme$1.SURFACE_PRIMARY : theme$1.SURFACE_TERTIARY_TRANSPARENT,
           borderColor: !isEditable ? theme$1.CONTENT_DISABLE_DARK : errorMessage || isInValidOtp && otp?.length === length ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : otp[index] ? theme$1.STROKE_PRIMARY : theme$1.CONTENT_SECONDRY,
@@ -12314,7 +12424,7 @@ const OTPInput = React.forwardRef(
         selectionColor: theme$1.CONTENT_PRIMARY,
         editable: isEditable
       }
-    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$5.timerIconContainer }, errorMessage ? /* @__PURE__ */ React.createElement(React.Fragment, null, errorIcon ? React.cloneElement(errorIcon, {
+    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React.createElement(View, { style: styles$4.timerContainer }, /* @__PURE__ */ React.createElement(View, { style: styles$4.timerIconContainer }, errorMessage ? /* @__PURE__ */ React.createElement(React.Fragment, null, errorIcon ? React.cloneElement(errorIcon, {
       width: DHRE_SPACING_BASE.SPACE_20,
       height: DHRE_SPACING_BASE.SPACE_20
     }) : null, /* @__PURE__ */ React.createElement(
@@ -12338,7 +12448,7 @@ const OTPInput = React.forwardRef(
       Pressable,
       {
         onPress: onClickResendOTP,
-        style: styles$5.resendOTPStyle,
+        style: styles$4.resendOTPStyle,
         disabled: disableResendButton() || !isResendOtpEnable
       },
       /* @__PURE__ */ React.createElement(
@@ -12352,7 +12462,7 @@ const OTPInput = React.forwardRef(
           }
         }
       )
-    )), errorMessageMaxReachCount ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
+    )), errorMessageMaxReachCount ? /* @__PURE__ */ React.createElement(View, { style: styles$4.resendOtpContainer }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: errorMessageMaxReachCount,
@@ -12367,7 +12477,7 @@ const OTPInput = React.forwardRef(
 );
 OTPInput.displayName = "OTPInput";
 
-const styles$4 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
   stepperContainer: {
     flexDirection: "row",
     marginBottom: 24,
@@ -12461,27 +12571,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) => {
@@ -12491,25 +12601,25 @@ const Stepper = ({
       return { borderColor: theme.BORDER_PRIMARY };
     } else if (status === Status.Completed) {
       return {
-        ...styles$4.completeStepDivider,
+        ...styles$3.completeStepDivider,
         borderColor: theme.CONTENT_PRIMARY
       };
     } else {
       return { borderColor: theme.CONTENT_SECONDRY };
     }
   };
-  return /* @__PURE__ */ React.createElement(View, { style: { ...styles$4.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
+  return /* @__PURE__ */ React.createElement(View, { style: { ...styles$3.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
     const stepCircleStyle = renderCircleStyle(item?.status);
     const dividerStyle = renderDividerStyle(item?.status);
     const labelStyle = renderLableStyle(item?.status);
-    const lastViewStyle = index === data?.length - 1 ? styles$4.lastStepWrapper : null;
+    const lastViewStyle = index === data?.length - 1 ? styles$3.lastStepWrapper : null;
     return /* @__PURE__ */ React.createElement(
       View,
       {
         key: index?.toString(),
-        style: { ...styles$4.stepperWrapper, ...lastViewStyle }
+        style: { ...styles$3.stepperWrapper, ...lastViewStyle }
       },
-      /* @__PURE__ */ React.createElement(View, { style: styles$4.stepperSeparatorContainer }, /* @__PURE__ */ React.createElement(View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: styles$3.stepperSeparatorContainer }, /* @__PURE__ */ React.createElement(View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: item?.step,
@@ -12518,8 +12628,8 @@ const Stepper = ({
             color: theme.CONTENT_PRIMARY
           }
         }
-      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React.createElement(View, { style: { ...styles$4.separator, ...dividerStyle } })),
-      /* @__PURE__ */ React.createElement(View, { style: styles$4.lableContainer }, /* @__PURE__ */ React.createElement(
+      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React.createElement(View, { style: { ...styles$3.separator, ...dividerStyle } })),
+      /* @__PURE__ */ React.createElement(View, { style: styles$3.lableContainer }, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: item?.label,
@@ -12530,17 +12640,22 @@ const Stepper = ({
     );
   }));
 };
-var index$3 = withThemeProvider(Stepper);
+var index$4 = withThemeProvider(Stepper);
 
-const styles$3 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center"
   },
+  gradientShell: {
+    borderRadius: DHRE_RADIUS.PILL,
+    padding: OUTLINED_BORDER_WIDTH
+  },
   sliderContainer: {
-    height: verticalScale(48),
-    // borderRadius: moderateScale(25),
+    height: DHRE_COMPONENT_HEIGHT.BUTTON_MD - OUTLINED_BORDER_WIDTH * 2,
+    // pill shape — overflow:hidden clips all child content to the rounded boundary
+    borderRadius: DHRE_RADIUS.PILL,
     overflow: "hidden",
     justifyContent: "center"
   },
@@ -12551,11 +12666,13 @@ const styles$3 = StyleSheet.create({
     justifyContent: "center"
   },
   button: {
-    height: verticalScale(40),
+    height: DHRE_COMPONENT_HEIGHT.INPUT_SM,
     justifyContent: "center",
     alignItems: "center",
-    // borderRadius: moderateScale(20),
-    margin: 4
+    // circular thumb — consumer can override via sliderStyle prop
+    borderRadius: DHRE_RADIUS.PILL,
+    // 4px inset keeps thumb inside pill boundary (matches Figma left:4, top:4)
+    margin: DHRE_PADDING.XS
   },
   buttonTextContainer: {
     position: "absolute",
@@ -12565,11 +12682,10 @@ const styles$3 = StyleSheet.create({
     top: 0,
     alignItems: "center",
     justifyContent: "center"
-    // borderRadius: 25,
   }
 });
 
-const BUTTON_WIDTH = 40;
+const DEFAULT_SIZE = 40;
 const CustomSlideButton = React.forwardRef(
   ({
     label,
@@ -12579,17 +12695,21 @@ const CustomSlideButton = React.forwardRef(
     textStyle,
     containerStyle,
     sliderStyle,
-    size = BUTTON_WIDTH,
+    size = DEFAULT_SIZE,
     sliderBackgroundColor = "#fff",
     sliderTextColor = "#000",
-    resetTimer = 2e3
+    resetTimer = 2e3,
+    isRTL = false,
+    completedContainerStyle
   }, ref) => {
+    const thumbOffset = verticalScale(size) + DHRE_PADDING.XS * 2;
     const value = useRef(0);
     const cardRef = useRef(null);
     const [translateX] = useState(new Animated.Value(0));
     const sliderConteinerRef = useRef(null);
     const [color] = useState(new Animated.Value(0));
     const [sliderBackgroundColorRef] = useState(new Animated.Value(0));
+    const [isCompleted, setIsCompleted] = useState(false);
     React.useImperativeHandle(ref, () => ({
       reset() {
         resetAll();
@@ -12600,15 +12720,18 @@ const CustomSlideButton = React.forwardRef(
       if (cardRef.current) {
         cardRef.current.setNativeProps({
           style: { width }
-          // Change the width here
         });
         value.current = width;
         sliderConteinerRef?.current?.setNativeProps({
           style: { width }
         });
       }
+      if (isRTL) {
+        translateX.setValue(value.current - thumbOffset);
+      }
     };
     const resetAll = () => {
+      setIsCompleted(false);
       onReset?.();
       Animated.timing(sliderBackgroundColorRef, {
         toValue: 0,
@@ -12625,7 +12748,7 @@ const CustomSlideButton = React.forwardRef(
         // because we're animating the color, not layout
       }).start();
       Animated.timing(translateX, {
-        toValue: 0,
+        toValue: isRTL ? value.current - thumbOffset : 0,
         useNativeDriver: false
       }).start();
     };
@@ -12636,39 +12759,73 @@ const CustomSlideButton = React.forwardRef(
       },
       onPanResponderTerminationRequest: () => false,
       onPanResponderMove: (evt, gestureState) => {
-        if (gestureState.dx > 0 && gestureState.dx <= value?.current - BUTTON_WIDTH - 8) {
-          translateX.setValue(gestureState.dx);
-          const colorValue = gestureState.dx > value.current / 3 ? 1 : 0;
-          Animated.timing(color, {
-            toValue: colorValue,
-            duration: 0,
-            // no transition time, immediate change
-            useNativeDriver: false
-            // because we're animating the color, not layout
-          }).start();
+        if (isRTL) {
+          if (gestureState.dx < 0 && gestureState.dx >= -(value.current - thumbOffset)) {
+            translateX.setValue(value.current - thumbOffset + gestureState.dx);
+            const colorValue = gestureState.dx < -(value.current / 3) ? 1 : 0;
+            Animated.timing(color, {
+              toValue: colorValue,
+              duration: 0,
+              // no transition time, immediate change
+              useNativeDriver: false
+            }).start();
+          }
+        } else {
+          if (gestureState.dx > 0 && gestureState.dx <= value.current - thumbOffset) {
+            translateX.setValue(gestureState.dx);
+            const colorValue = gestureState.dx > value.current / 3 ? 1 : 0;
+            Animated.timing(color, {
+              toValue: colorValue,
+              duration: 0,
+              // no transition time, immediate change
+              useNativeDriver: false
+            }).start();
+          }
         }
       },
       onPanResponderRelease: (e, gestureState) => {
-        if (gestureState.dx >= value.current * 0.8) {
-          Animated.timing(translateX, {
-            toValue: value?.current - (BUTTON_WIDTH + 8),
-            // Slide to the end
-            duration: 300,
-            useNativeDriver: false
-          }).start();
-          Animated.timing(sliderBackgroundColorRef, {
-            toValue: 1,
-            duration: 0,
-            // no transition time, immediate change
-            useNativeDriver: false
-            // because we're animating the color, not layout
-          }).start();
-          onComplete?.();
-          setTimeout(() => {
+        if (isRTL) {
+          if (gestureState.dx <= -(value.current * 0.8)) {
+            Animated.timing(translateX, {
+              toValue: 0,
+              // snap to leftmost position (completed side for RTL)
+              duration: 300,
+              useNativeDriver: false
+            }).start();
+            Animated.timing(sliderBackgroundColorRef, {
+              toValue: 1,
+              duration: 0,
+              useNativeDriver: false
+            }).start();
+            setIsCompleted(true);
+            onComplete?.();
+            setTimeout(() => {
+              resetAll();
+            }, resetTimer);
+          } else {
             resetAll();
-          }, resetTimer);
+          }
         } else {
-          resetAll();
+          if (gestureState.dx >= value.current * 0.8) {
+            Animated.timing(translateX, {
+              toValue: value.current - thumbOffset,
+              // slide to the end
+              duration: 300,
+              useNativeDriver: false
+            }).start();
+            Animated.timing(sliderBackgroundColorRef, {
+              toValue: 1,
+              duration: 0,
+              useNativeDriver: false
+            }).start();
+            setIsCompleted(true);
+            onComplete?.();
+            setTimeout(() => {
+              resetAll();
+            }, resetTimer);
+          } else {
+            resetAll();
+          }
         }
       },
       onPanResponderTerminate: () => {
@@ -12684,49 +12841,62 @@ const CustomSlideButton = React.forwardRef(
       outputRange: [sliderBackgroundColor, "transparent"]
     });
     const { theme } = useTheme();
-    return /* @__PURE__ */ React.createElement(View, { style: {
-      ...styles$3.sliderContainer,
-      backgroundColor: theme.SURFACE_INVERTED,
-      ...containerStyle
-    }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React.createElement(
-      Animated.View,
-      {
-        style: [styles$3.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
-        ref: sliderConteinerRef
-      }
-    ), /* @__PURE__ */ React.createElement(
-      View,
-      {
-        style: styles$3.buttonTextContainer
-      },
-      /* @__PURE__ */ React.createElement(Animated.Text, { style: [{
-        alignSelf: "center",
-        ...textStyle
-      }, { color: textColor }] }, label)
-    ), /* @__PURE__ */ React.createElement(
-      Animated.View,
+    return /* @__PURE__ */ React.createElement(
+      LinearGradient$1,
       {
-        style: [styles$3.slider, { transform: [{ translateX }] }],
-        ...panResponder.panHandlers
+        colors: OUTLINED_GRADIENT_COLORS,
+        start: OUTLINED_GRADIENT_START,
+        end: OUTLINED_GRADIENT_END,
+        style: styles$2.gradientShell
       },
       /* @__PURE__ */ React.createElement(
         View,
         {
-          style: {
-            ...styles$3.button,
-            backgroundColor: theme.SURFACE_PRIMARY,
-            width: verticalScale(size),
-            height: verticalScale(size),
-            // borderRadius: verticalScale(size / 2),
-            ...sliderStyle
-          }
+          style: [
+            styles$2.sliderContainer,
+            { backgroundColor: theme.SURFACE_INVERTED },
+            containerStyle,
+            isCompleted && { backgroundColor: theme.BUTTON_SUCCESS_FILL },
+            isCompleted ? completedContainerStyle : void 0
+          ],
+          onLayout: handleLayout,
+          ref: cardRef
         },
-        icon
+        /* @__PURE__ */ React.createElement(
+          Animated.View,
+          {
+            style: [styles$2.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
+            ref: sliderConteinerRef
+          }
+        ),
+        /* @__PURE__ */ React.createElement(View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React.createElement(Animated.Text, { style: [{ alignSelf: "center", ...textStyle }, { color: textColor }] }, label)),
+        /* @__PURE__ */ React.createElement(
+          Animated.View,
+          {
+            style: [styles$2.slider, { transform: [{ translateX }] }],
+            ...panResponder.panHandlers
+          },
+          /* @__PURE__ */ React.createElement(
+            View,
+            {
+              style: {
+                ...styles$2.button,
+                backgroundColor: theme.SURFACE_PRIMARY,
+                width: verticalScale(size),
+                height: verticalScale(size),
+                ...sliderStyle
+              }
+            },
+            icon
+          )
+        )
       )
-    ));
+    );
   }
 );
-var index$2 = withThemeProvider(CustomSlideButton);
+var index$3 = withThemeProvider(
+  CustomSlideButton
+);
 
 const DHRE_STROKE = {
   NONE: 0,
@@ -12786,7 +12956,7 @@ const AVATAR_SPEC = {
     ringInset: 6
   }
 };
-const createStyles = (size, theme) => {
+const createStyles$1 = (size, theme) => {
   const dimensions = AVATAR_SPEC[size];
   return StyleSheet.create({
     container: {
@@ -12862,9 +13032,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":
@@ -13015,7 +13185,7 @@ const Avatar = (props) => {
 };
 var Avatar$1 = withThemeProvider(Avatar);
 
-const styles$2 = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   accordionContainer: {
     gap: verticalScale(8),
     marginHorizontal: horizontalScale(24),
@@ -13120,13 +13290,13 @@ const AppointmentCard = ({
       isOpen,
       onToggle,
       containerStyle: {
-        ...styles$2.accordionStyle,
+        ...styles$1.accordionStyle,
         backgroundColor: theme.SURFACE_SECONDARY,
         borderColor: theme.BORDER_SEPERATOR_HEADER,
         borderBottomColor: theme.BORDER_SEPERATOR_HEADER
       },
-      headerStyle: styles$2.accordionHeader,
-      headerComponent: () => /* @__PURE__ */ React.createElement(View, { style: styles$2.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React.createElement(View, { style: styles$2.accordionText }, /* @__PURE__ */ React.createElement(
+      headerStyle: styles$1.accordionHeader,
+      headerComponent: () => /* @__PURE__ */ React.createElement(View, { style: styles$1.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React.createElement(View, { style: styles$1.accordionText }, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: headerTitle,
@@ -13147,18 +13317,18 @@ const AppointmentCard = ({
       View,
       {
         style: [
-          styles$2.accordionDetails,
+          styles$1.accordionDetails,
           { borderTopColor: theme.BORDER_SEPERATOR_HEADER }
         ]
       },
-      /* @__PURE__ */ React.createElement(View, { style: styles$2.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React.createElement(View, { style: styles$2.infoColumn, key: title2 }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(View, { style: styles$1.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React.createElement(View, { style: styles$1.infoColumn, key: title2 }, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: title2,
           variant: FontStyle.L3_REGULAR,
           style: { color: theme.CONTENT_SECONDRY }
         }
-      ), /* @__PURE__ */ React.createElement(View, { style: styles$2.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React.createElement(View, { style: styles$1.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React.createElement(
         CustomTypography,
         {
           text: value,
@@ -13173,7 +13343,7 @@ const AppointmentCard = ({
           text: directionText,
           variant: FontStyle.L2_REGULAR,
           style: [
-            styles$2.getDirectionsText,
+            styles$1.getDirectionsText,
             { color: theme.CONTENT_PRIMARY }
           ],
           onPress: onDirectionPress
@@ -13183,7 +13353,7 @@ const AppointmentCard = ({
         View,
         {
           style: [
-            styles$2.infoContainer,
+            styles$1.infoContainer,
             {
               backgroundColor: theme.SURFACE_TERTIARY
             }
@@ -13203,7 +13373,7 @@ const AppointmentCard = ({
         View,
         {
           style: [
-            styles$2.actionsContainer,
+            styles$1.actionsContainer,
             {
               borderTopColor: theme.BORDER_SEPERATOR_HEADER
             }
@@ -13215,7 +13385,7 @@ const AppointmentCard = ({
             text: viewText,
             variant: FontStyle.L2_REGULAR,
             style: [
-              styles$2.viewText,
+              styles$1.viewText,
               {
                 color: theme.CONTENT_PRIMARY
               }
@@ -13223,12 +13393,12 @@ const AppointmentCard = ({
             onPress: onViewDetailsPress
           }
         ),
-        /* @__PURE__ */ React.createElement(View, { style: styles$2.actionIcons }, /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(View, { style: styles$1.actionIcons }, /* @__PURE__ */ React.createElement(
           CustomIcon$1,
           {
             icon: deleteIcon,
             containerStyle: {
-              ...styles$2.iconContainer,
+              ...styles$1.iconContainer,
               backgroundColor: theme.SURFACE_INVERTED
             },
             onPress: onDeletePress
@@ -13238,7 +13408,7 @@ const AppointmentCard = ({
           {
             icon: editIcon,
             containerStyle: {
-              ...styles$2.iconContainer,
+              ...styles$1.iconContainer,
               backgroundColor: theme.SURFACE_INVERTED
             },
             onPress: onEditPress
@@ -13248,9 +13418,9 @@ const AppointmentCard = ({
     )
   );
 };
-var index$1 = withThemeProvider(AppointmentCard);
+var index$2 = withThemeProvider(AppointmentCard);
 
-const styles$1 = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -13307,7 +13477,7 @@ const PropertyDetails = ({
     View,
     {
       style: [
-        styles$1.container,
+        styles.container,
         {
           backgroundColor: theme.SURFACE_PRIMARY,
           borderColor: isSelected ? theme.STROKE_ACTIVE : theme.STROKE_TERTIARY
@@ -13322,12 +13492,12 @@ const PropertyDetails = ({
         containerStyle
       ]
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles$1.imageWrapper }, React.cloneElement(icon, {
+    /* @__PURE__ */ React.createElement(View, { style: styles.imageWrapper }, React.cloneElement(icon, {
       width: "100%",
       height: "100%",
       borderRadius: DHRE_RADIUS.MD
-    }), brandIcon && /* @__PURE__ */ React.createElement(View, { style: styles$1.brandBadge }, brandIcon)),
-    /* @__PURE__ */ React.createElement(View, { style: styles$1.propertyInfo }, propertyNumber && /* @__PURE__ */ React.createElement(View, { style: [styles$1.propertyNumber, propertyNumberStyle] }, /* @__PURE__ */ React.createElement(
+    }), brandIcon && /* @__PURE__ */ React.createElement(View, { style: styles.brandBadge }, brandIcon)),
+    /* @__PURE__ */ React.createElement(View, { style: styles.propertyInfo }, propertyNumber && /* @__PURE__ */ React.createElement(View, { style: [styles.propertyNumber, propertyNumberStyle] }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: propertyNumber,
@@ -13358,31 +13528,45 @@ const PropertyDetails = ({
     )
   );
 };
-var index = withThemeProvider(PropertyDetails);
+var index$1 = withThemeProvider(PropertyDetails);
 
-const styles = StyleSheet.create({
-  container: {
-    rowGap: verticalScale(12)
-  },
-  optionContainer: {
-    flexDirection: "row",
-    columnGap: horizontalScale(8),
-    alignItems: "center"
-  },
-  radioButton: {
-    width: moderateScale(16),
-    height: moderateScale(16),
-    borderRadius: moderateScale(10),
-    borderWidth: moderateScale(1.5),
-    borderColor: "#000"
-  },
-  radioButtonSelected: {
-    backgroundColor: "#000"
-  },
-  label: {
-    color: "#000"
-  }
-});
+const createStyles = (themeColors, size, radioColor) => {
+  const radioSize = size === "large" ? moderateScale(24) : moderateScale(20);
+  const dotSize = size === "large" ? moderateScale(12) : moderateScale(10);
+  const resolvedRadioColor = radioColor ?? themeColors[Theme.STROKE_ACTIVE];
+  return StyleSheet.create({
+    container: {
+      rowGap: verticalScale(12)
+    },
+    optionContainer: {
+      flexDirection: "row",
+      columnGap: horizontalScale(8),
+      alignItems: "flex-start"
+    },
+    radioButton: {
+      width: radioSize,
+      height: radioSize,
+      borderRadius: moderateScale(100),
+      borderWidth: 1,
+      borderColor: resolvedRadioColor,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    radioButtonSelected: {
+      borderWidth: 2,
+      backgroundColor: themeColors[Theme.CONTENT_INVERTED]
+    },
+    radioButtonInnerDot: {
+      width: dotSize,
+      height: dotSize,
+      borderRadius: moderateScale(50),
+      backgroundColor: resolvedRadioColor
+    },
+    label: {
+      color: themeColors[Theme.CONTENT_PRIMARY]
+    }
+  });
+};
 
 const RadioButtonGroup = ({
   data,
@@ -13390,8 +13574,13 @@ const RadioButtonGroup = ({
   containerStyle,
   labelStyle,
   optionContainerStyle,
-  selectedValue
+  selectedValue,
+  size = "large",
+  fontVariant,
+  radioColor
 }) => {
+  const { theme } = useTheme();
+  const styles = createStyles(theme, size, radioColor);
   const [selectedOption, setSelectedOption] = useState(
     selectedValue ?? data[0]?.value
   );
@@ -13399,12 +13588,14 @@ const RadioButtonGroup = ({
     setSelectedOption(item.value);
     onSelect(item);
   };
+  const resolvedFontVariant = fontVariant ?? (size === "small" ? FontStyle.BODY2_MEDIUM : FontStyle.BODY1_MEDIUM);
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle] }, data?.map((item) => /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
       key: item.value,
       style: [styles.optionContainer, optionContainerStyle],
-      onPress: () => handleSelect(item)
+      onPress: () => handleSelect(item),
+      activeOpacity: 1
     },
     /* @__PURE__ */ React.createElement(
       View,
@@ -13413,18 +13604,20 @@ const RadioButtonGroup = ({
           styles.radioButton,
           selectedOption === item.value && styles.radioButtonSelected
         ]
-      }
+      },
+      selectedOption === item.value && /* @__PURE__ */ React.createElement(View, { style: styles.radioButtonInnerDot })
     ),
     /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        variant: FontStyle.L1_REGULAR,
+        variant: resolvedFontVariant,
         text: item.label,
         style: [styles.label, labelStyle]
       }
     )
   )));
 };
+var index = withThemeProvider(RadioButtonGroup);
 
-export { Accordion$1 as Accordion, AnimationWithImperativeApi as AnimationLoitte, index$1 as AppointmentCard, Avatar$1 as Avatar, AvatarSize, Background$1 as Background, BackgroundVariant, Badge$1 as Badge, BottomDrawer$1 as BottomDrawer, Button, Cards, category as Category, CheckBox, Chip$1 as Chip, ContactModel, CountryDropDown as CountryPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon$1 as CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar$1 as CustomProgressBar, CustomSearchBar$1 as CustomSearchBar, index$2 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_AVATAR_SIZE, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_COMPONENT_HEIGHT, DHRE_CONFIRMATION_BASE_GRADIENT, DHRE_CONFIRMATION_ERROR_GRADIENT, DHRE_CORE_BLUE, DHRE_CYAN_HIGHLIGHT, DHRE_DEEP_SPACE_BLUE, DHRE_DEFAULT, DHRE_ICON_SIZE, DHRE_IMAGE_SIZE, DHRE_INFO_BLUE, DHRE_ORANGE_WARNING, DHRE_PADDING, DHRE_PADDING_BASE, DHRE_RADIUS, DHRE_RADIUS_BASE, DHRE_RED_ERROR, DHRE_SPACING, DHRE_SPACING_BASE, DHRE_STROKE, DHRE_SUCCESS_GREEN, DHRE_WHITE, DateRangePicker$1 as DateRangePicker, DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, Line, Loader$1 as Loader, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index as PropertyDetails, RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$3 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, Textinput as TextInput, Theme, ToastWithProvider as Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { Accordion$1 as Accordion, AnimationWithImperativeApi as AnimationLoitte, index$2 as AppointmentCard, Avatar$1 as Avatar, AvatarSize, Background$1 as Background, BackgroundVariant, Badge$1 as Badge, BottomDrawer$1 as BottomDrawer, Button, Cards, category as Category, CheckBox, Chip$1 as Chip, ContactModel, CountryDropDown as CountryPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon$1 as CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar$1 as CustomProgressBar, CustomSearchBar$1 as CustomSearchBar, index$3 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_AVATAR_SIZE, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_COMPONENT_HEIGHT, DHRE_CONFIRMATION_BASE_GRADIENT, DHRE_CONFIRMATION_ERROR_GRADIENT, DHRE_CORE_BLUE, DHRE_CYAN_HIGHLIGHT, DHRE_DEEP_SPACE_BLUE, DHRE_DEFAULT, DHRE_ICON_SIZE, DHRE_IMAGE_SIZE, DHRE_INFO_BLUE, DHRE_ORANGE_WARNING, DHRE_PADDING, DHRE_PADDING_BASE, DHRE_RADIUS, DHRE_RADIUS_BASE, DHRE_RED_ERROR, DHRE_SPACING, DHRE_SPACING_BASE, DHRE_STROKE, DHRE_SUCCESS_GREEN, DHRE_WHITE, DateRangePicker$1 as DateRangePicker, DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, GRADIENT_COLORS_ERROR, GRADIENT_COLORS_PENDING, GRADIENT_COLORS_SUCCESS, Line, Loader$1 as Loader, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index$1 as PropertyDetails, index as RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$4 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, Textinput as TextInput, Theme, ToastWithProvider as Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
 //# sourceMappingURL=index.mjs.map