dhre-ui-kit 3.0.1 → 3.1.0

package/lib/index.js

@@ -223,6 +223,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 || {});
 
@@ -494,6 +496,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]: {
@@ -836,6 +902,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)"
   }
 };
 
@@ -940,13 +1014,13 @@ const CustomTypography = ({
     reactNative.Text,
     {
       testID,
-      style: [textStyle, styles$B.container, style],
+      style: [textStyle, styles$A.container, style],
       ...props
     },
     text
   );
 };
-const styles$B = reactNative.StyleSheet.create({
+const styles$A = reactNative.StyleSheet.create({
   container: { writingDirection: "auto", alignSelf: "flex-start" }
 });
 
@@ -985,7 +1059,7 @@ const commonStyles = reactNative.StyleSheet.create({
   }
 });
 
-const styles$A = reactNative.StyleSheet.create({
+const styles$z = reactNative.StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -1012,16 +1086,16 @@ const Badge = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
-      style: [styles$A.badge, commonStyles.centerRow, style],
+      style: [styles$z.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
     text && /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$A.text, textStyle],
+        style: [styles$z.text, textStyle],
         text
       }
     )
@@ -1189,7 +1263,7 @@ const chipStyles = reactNative.StyleSheet.create({
     justifyContent: "center",
     borderWidth: 1,
     borderRadius: DHRE_RADIUS.PILL,
-    gap: DHRE_SPACING.XS
+    gap: DHRE_PADDING.SM
   },
   sizeLarge: {
     height: DHRE_SPACING_BASE.SPACE_40,
@@ -1260,7 +1334,7 @@ const Chip = ({
     disabled
   );
   const contentColor = resolveContentColor(themeColors, selected, disabled);
-  const textVariant = size === "large" ? FontStyle.BODY2_LIGHT : FontStyle.BODY3_LIGHT;
+  const textVariant = size === "large" ? selected ? FontStyle.BODY2_MEDIUM : FontStyle.BODY2_LIGHT : selected ? FontStyle.BODY3_MEDIUM : FontStyle.BODY3_LIGHT;
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
@@ -1302,7 +1376,7 @@ var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
   return BackgroundVariant2;
 })(BackgroundVariant || {});
 
-const styles$z = reactNative.StyleSheet.create({
+const styles$y = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     overflow: "hidden"
@@ -1366,7 +1440,7 @@ const Background = ({
     reactNative.View,
     {
       testID,
-      style: [styles$z.container, { backgroundColor: config.base }, style]
+      style: [styles$y.container, { backgroundColor: config.base }, style]
     },
     /* @__PURE__ */ React__default["default"].createElement(
       Svg__default["default"],
@@ -1421,12 +1495,12 @@ const Background = ({
       ))),
       config.type === "linear" ? /* @__PURE__ */ React__default["default"].createElement(Svg.Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#bg)" }) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(Svg.Rect, { x: "0", y: "0", width: "100", height: "100", fill: config.base }), /* @__PURE__ */ React__default["default"].createElement(Svg.Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#glowLeft)" }), /* @__PURE__ */ React__default["default"].createElement(Svg.Rect, { x: "0", y: "0", width: "100", height: "100", fill: "url(#glowRight)" }))
     ),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.content, contentStyle] }, children)
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$y.content, contentStyle] }, children)
   );
 };
 var Background$1 = withThemeProvider(Background);
 
-const styles$y = reactNative.StyleSheet.create({
+const styles$x = reactNative.StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -1448,21 +1522,19 @@ const styles$y = reactNative.StyleSheet.create({
   },
   separator: {
     height: verticalScale(3),
-    width: horizontalScale(32),
+    width: DHRE_SPACING_BASE.SPACE_32,
     alignSelf: "center",
-    backgroundColor: "#A7A7A7",
     borderRadius: moderateScale(25)
   },
   headerContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginTop: verticalScale(24)
+    marginTop: DHRE_SPACING_BASE.SPACE_16
   },
-  title: { flex: 1, color: "#fff", textAlign: "left" },
+  title: { flex: 1, textAlign: "left" },
   leftIconStyle: { marginRight: 8 },
   rightTitle: {
-    color: "#fff",
     textAlign: "right",
     marginRight: DHRE_PADDING.LG
   },
@@ -1533,11 +1605,11 @@ const BottomDrawer = ({
         behavior: isIos() ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$y.mainContainer, style], testID }, /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$x.mainContainer, style], testID }, /* @__PURE__ */ React__default["default"].createElement(
         reactNative.View,
         {
           style: [
-            styles$y.modalContainer,
+            styles$x.modalContainer,
             { backgroundColor: theme.SURFACE_PRIMARY },
             modalContainerStyle
           ]
@@ -1547,35 +1619,51 @@ const BottomDrawer = ({
           {
             onPressOut: () => swipeDirection === "" && toggleModal()
           },
-          showSeparator && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$y.separator }),
-          /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$y.headerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$y.leftSideStyle }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
-            style: styles$y.leftIconStyle,
+          showSeparator && /* @__PURE__ */ React__default["default"].createElement(
+            reactNative.View,
+            {
+              style: [
+                styles$x.separator,
+                { backgroundColor: theme.STROKE_TERTIARY }
+              ]
+            }
+          ),
+          /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$x.headerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$x.leftSideStyle }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+            style: styles$x.leftIconStyle,
             onPressOut: onLeftIconPress
           }) : null, /* @__PURE__ */ React__default["default"].createElement(
             CustomTypography,
             {
               variant: titleVariant,
               text: title,
-              style: { ...styles$y.title, ...titleStyle }
+              style: {
+                ...styles$x.title,
+                color: theme.CONTENT_PRIMARY,
+                ...titleStyle
+              }
             }
           )), /* @__PURE__ */ React__default["default"].createElement(
             reactNative.View,
             {
-              style: rightTitle && rightTitle?.length > 0 ? styles$y.rightSideStyle : {}
+              style: rightTitle && rightTitle?.length > 0 ? styles$x.rightSideStyle : {}
             },
             rightTitle && rightTitle?.length > 0 ? /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPressOut: handleRightTitlePress }, /* @__PURE__ */ React__default["default"].createElement(
               CustomTypography,
               {
                 variant: rightTitleVariant,
                 text: rightTitle,
-                style: { ...styles$y.rightTitle, ...rightTitleStyle }
+                style: {
+                  ...styles$x.rightTitle,
+                  color: theme.CONTENT_PRIMARY,
+                  ...rightTitleStyle
+                }
               }
             )) : null,
             showRightIcon && rightIcon ? /* @__PURE__ */ React__default["default"].createElement(
               reactNative.Pressable,
               {
                 onPressOut: toggleModal,
-                style: styles$y.rightIconStyle
+                style: styles$x.rightIconStyle
               },
               React__default["default"].cloneElement(rightIcon, {
                 width: DHRE_SPACING.LG,
@@ -1592,7 +1680,7 @@ const BottomDrawer = ({
 };
 var BottomDrawer$1 = withThemeProvider(BottomDrawer);
 
-const styles$x = reactNative.StyleSheet.create({
+const styles$w = reactNative.StyleSheet.create({
   mainContainer: {
     marginHorizontal: horizontalScale(16)
   },
@@ -1878,7 +1966,7 @@ const CustomButton = ({
       text: title,
       variant: titleVariant ?? defaultTextVariant,
       textColor: effectiveTextColor,
-      style: [styles$x.buttonText, disabledHexStyle, textStyle]
+      style: [styles$w.buttonText, disabledHexStyle, textStyle]
     }
   ), rightIcon && React__default["default"].cloneElement(rightIcon, {
     width: iconSize,
@@ -1940,7 +2028,7 @@ const CustomButton = ({
 };
 var Button = withThemeProvider(CustomButton);
 
-const styles$w = reactNative.StyleSheet.create({
+const styles$v = reactNative.StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -2005,53 +2093,53 @@ const Cards = ({
   testID,
   onButtonPress
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$w.container }, topLeftTitle ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$w.topLeft }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$v.container }, topLeftTitle ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.topLeft }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P2regular",
-      style: styles$w.title,
+      style: styles$v.title,
       text: topLeftTitle
     }
   )) : null, title ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "H6bold",
-      style: styles$w.subTitleBelow,
+      style: styles$v.subTitleBelow,
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$w.subtitle,
+      style: styles$v.subtitle,
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$w.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.leftBottomView }, iconSource ? iconSource : null, iconTitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$w.subTitleLeftBelow,
+      style: styles$v.subTitleLeftBelow,
       text: iconTitle
     }
   ) : null), buttonShown ? /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Button-Press",
-      style: styles$w.button,
+      style: styles$v.button,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B2semiBold",
-        style: styles$w.buttonText,
+        style: styles$v.buttonText,
         text: buttonText
       }
     )
   ) : null);
 };
 
-const styles$v = reactNative.StyleSheet.create({
+const styles$u = reactNative.StyleSheet.create({
   directionStyle: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -2059,7 +2147,15 @@ const styles$v = reactNative.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
   }
 });
 
@@ -2093,12 +2189,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] = React.useState(isChecked || false);
@@ -2128,16 +2227,27 @@ const Checkbox = ({
     minWidth: size === "small" ? 20 : 24,
     minHeight: size === "small" ? 20 : 24
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: containerStyle }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$v.directionStyle }, hideCheckbox ? null : /* @__PURE__ */ React__default["default"].createElement(
+  const isFilledState = checked || isPartial;
+  const checkboxContainerDynamicStyle = {
+    backgroundColor: disable ? isFilledState ? theme[Theme.STROKE_DISABLED_SELECTED] : "transparent" : isFilledState ? theme[Theme.STROKE_ACTIVE] : "transparent",
+    borderColor: disable ? theme[Theme.CONTENT_DISABLE_DARK] : theme[Theme.STROKE_ACTIVE],
+    borderWidth: disable && isFilledState ? 0 : 1
+  };
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: containerStyle }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$u.directionStyle, checkBoxHeaderStyle] }, hideCheckbox ? null : /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Checkbox-Press",
       onPressIn: handlePress,
       disabled: disable,
-      style: [styles$v.checkboxContainer, iconContainerSizeStyle]
+      style: [
+        styles$u.checkboxContainer,
+        iconContainerSizeStyle,
+        checkboxContainerDynamicStyle,
+        checkboxStyle
+      ]
     },
-    React__default["default"].cloneElement(resolvedIcon)
-  ), /* @__PURE__ */ React__default["default"].createElement(
+    resolvedIcon ? React__default["default"].cloneElement(resolvedIcon) : null
+  ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$u.labelContainer }, labelIcon && React__default["default"].cloneElement(labelIcon, { width: 20, height: 20 }), /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: resolvedVariant,
@@ -2145,11 +2255,11 @@ const Checkbox = ({
       style: [labelColorStyle, titleStyle],
       onPressIn: onPress
     }
-  )));
+  ))));
 };
 var CheckBox = withThemeProvider(Checkbox);
 
-const styles$u = reactNative.StyleSheet.create({
+const styles$t = reactNative.StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTLIGHT
   },
@@ -2203,26 +2313,26 @@ const CustomDropdown$1 = ({
     CustomTypography,
     {
       variant: "P3regular",
-      style: styles$u.labelStyle,
+      style: styles$t.labelStyle,
       text: label
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: `${testId}-BTN`,
-      style: styles$u.dropDownStyle,
+      style: styles$t.dropDownStyle,
       onPress: () => setShowOptions(!showOptions)
     },
     iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$u.iconStyle
+      style: styles$t.iconStyle
     })),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P3regular",
-        style: styles$u.selectedValueStyle,
+        style: styles$t.selectedValueStyle,
         text: selectedValue ? selectedValue.label : placeholder
       }
     ),
@@ -2233,7 +2343,7 @@ const CustomDropdown$1 = ({
       width: moderateScale(24),
       height: moderateScale(24)
     }))
-  ), showOptions && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$u.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default["default"].createElement(
+  ), showOptions && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$t.optionContainer }, options?.map(({ id, value, label: label2 }) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       key: id,
@@ -2243,7 +2353,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
         }
@@ -2252,7 +2362,7 @@ const CustomDropdown$1 = ({
     iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(iconName, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$u.iconStyle
+      style: styles$t.iconStyle
     })),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
@@ -2267,7 +2377,7 @@ const CustomDropdown$1 = ({
   ))));
 };
 
-const styles$t = reactNative.StyleSheet.create({
+const styles$s = reactNative.StyleSheet.create({
   labelStyle: {
     color: DHRE_COLORS_TEXT.DH_TEXTDARK
   },
@@ -2349,18 +2459,18 @@ const CustomTextInput = ({
     CustomTypography,
     {
       variant: "P3medium",
-      style: [styles$t.labelStyle, disabled && styles$t.disableTextStyle],
+      style: [styles$s.labelStyle, disabled && styles$s.disableTextStyle],
       text: label
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
       style: [
-        styles$t.inputContainer,
-        isFocused && styles$t.inputFocused,
-        error && styles$t.inputError,
-        disabled && styles$t.disableInputStyle,
-        successMessage ? styles$t.inputSucess : {},
+        styles$s.inputContainer,
+        isFocused && styles$s.inputFocused,
+        error && styles$s.inputError,
+        disabled && styles$s.disableInputStyle,
+        successMessage ? styles$s.inputSucess : {},
         {
           height: multiline ? 120 : 48,
           alignItems: multiline ? "flex-start" : "center"
@@ -2370,7 +2480,7 @@ const CustomTextInput = ({
     isSearchBar && searchIcon && React__default["default"].cloneElement(searchIcon, {
       width: moderateScale(24),
       height: moderateScale(24),
-      style: styles$t.searchIconStyle
+      style: styles$s.searchIconStyle
     }),
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TextInput,
@@ -2378,7 +2488,7 @@ const CustomTextInput = ({
         ...props,
         onFocus,
         onBlur,
-        style: styles$t.input,
+        style: styles$s.input,
         placeholderTextColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
         editable: !disabled,
         value,
@@ -2418,7 +2528,7 @@ const CustomTooltip = (props) => {
   }] }, triggerElement);
 };
 
-const styles$s = reactNative.StyleSheet.create({
+const styles$r = reactNative.StyleSheet.create({
   container: {
     backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
     paddingHorizontal: horizontalScale(16),
@@ -2468,21 +2578,21 @@ const FileUpload = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
-      style: [styles$s.container, containerStyle],
+      style: [styles$r.container, containerStyle],
       testID: "file-upload-container"
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$s.content }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React__default["default"].cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React__default["default"].createElement(CustomTypography, { variant: "H8bold", style: styles$s.title, text: title }), /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$r.content }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [uploadImageStyling], testID: "file-upload-image" }, icon && React__default["default"].cloneElement(icon, { style: [iconStyle] })), /* @__PURE__ */ React__default["default"].createElement(CustomTypography, { variant: "H8bold", style: styles$r.title, text: title }), /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$s.description,
+        style: styles$r.description,
         text: `Drop files directly here or `
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "P4regular",
-        style: styles$s.browse,
+        style: styles$r.browse,
         text: btnText
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
@@ -2490,14 +2600,14 @@ const FileUpload = ({
       {
         testID: "file-upload-description",
         variant: "P4regular",
-        style: styles$s.description,
+        style: styles$r.description,
         text: ` from your device`
       }
     )),
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Pressable,
       {
-        style: styles$s.button,
+        style: styles$r.button,
         onPress: onUpload,
         testID: "file-upload-button"
       },
@@ -2505,7 +2615,7 @@ const FileUpload = ({
         CustomTypography,
         {
           variant: "B2semiBold",
-          style: styles$s.buttonText,
+          style: styles$r.buttonText,
           text: btnText
         }
       )
@@ -2517,7 +2627,7 @@ const PdfView = (props) => {
   return /* @__PURE__ */ React__default["default"].createElement(Pdf__default["default"], { ...props, trustAllCerts: false });
 };
 
-const styles$r = reactNative.StyleSheet.create({
+const styles$q = reactNative.StyleSheet.create({
   container: {
     padding: horizontalScale(20),
     marginHorizontal: horizontalScale(16),
@@ -2573,39 +2683,39 @@ const PopUp = ({
   leftButtonShown = false,
   rightButtonShown = false
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$r.container }, title ? /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID, style: styles$q.container }, title ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$r.subTitleBelow,
+      style: styles$q.subTitleBelow,
       variant: "H6semiBold",
       text: title
     }
   ) : null, subtitle ? /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$r.subtitle,
+      style: styles$q.subtitle,
       variant: "P3regular",
       text: subtitle
     }
-  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$r.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$q.buttonContainer }, leftButtonShown ? /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       testID: "Left-Button-Press",
-      style: styles$r.buttonLeft,
+      style: styles$q.buttonLeft,
       onPress: onButtonPress
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        style: styles$r.buttonLeftText,
+        style: styles$q.buttonLeftText,
         variant: "B2semiBold",
         text: buttonText
       }
     )
-  ) : null, rightButtonShown ? /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$r.button, onPress: onButtonPress }, /* @__PURE__ */ React__default["default"].createElement(
+  ) : null, rightButtonShown ? /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$q.button, onPress: onButtonPress }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
-      style: styles$r.buttonText,
+      style: styles$q.buttonText,
       variant: "B2semiBold",
       text: buttonText
     }
@@ -2661,7 +2771,7 @@ const LINE_COLOR_KEYS = {
   unfilledColor: "SURFACE_PRIMARY_TRANSPARENT"
 };
 
-const styles$q = reactNative.StyleSheet.create({
+const styles$p = reactNative.StyleSheet.create({
   lineContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -2723,7 +2833,7 @@ const CustomProgressBar = ({
   const effectiveLineFillColor = fillColor ?? theme[LINE_COLOR_KEYS.fillColor];
   const effectiveLineUnfilledColor = unfilledColor ?? theme[LINE_COLOR_KEYS.unfilledColor];
   const effectiveLineHeight = height ?? LINE_DEFAULTS.trackHeight;
-  const renderCircleCenter = () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$q.circleCenter }, /* @__PURE__ */ React__default["default"].createElement(
+  const renderCircleCenter = () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$p.circleCenter }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
       text: `${progress}%`,
@@ -2746,7 +2856,7 @@ const CustomProgressBar = ({
         return /* @__PURE__ */ React__default["default"].createElement(
           reactNative.View,
           {
-            style: [styles$q.lineContainer, isRTL && styles$q.lineContainerRTL],
+            style: [styles$p.lineContainer, isRTL && styles$p.lineContainerRTL],
             testID: "custom-progress-bar-line-wrapper"
           },
           /* @__PURE__ */ React__default["default"].createElement(
@@ -2795,7 +2905,7 @@ const CustomProgressBar = ({
 };
 var CustomProgressBar$1 = withThemeProvider(CustomProgressBar);
 
-const styles$p = reactNative.StyleSheet.create({
+const styles$o = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center"
@@ -2861,13 +2971,13 @@ const Star = ({
       emptyStarColor
     );
     stars.push(
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { key: i, style: [styles$p.star, starStyle] }, starType)
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { key: i, style: [styles$o.star, starStyle] }, starType)
     );
   }
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$p.container, testID: "star" }, stars);
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$o.container, testID: "star" }, stars);
 };
 
-var styles$o = reactNative.StyleSheet.create({
+var styles$n = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     gap: DHRE_PADDING.SM,
@@ -2923,12 +3033,12 @@ const Tabs = ({
       onSelectionChange(selectedTabs);
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$o.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$n.container, style] }, data?.map(({ id, title, isSelected }) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
       key: id,
       style: {
-        ...styles$o.button,
+        ...styles$n.button,
         backgroundColor: isSelected ? theme.SURFACE_INVERTED : theme.SURFACE_SECONDARY,
         borderColor: isSelected ? theme.SURFACE_INVERTED : theme.STROKE_TERTIARY
       },
@@ -2939,7 +3049,7 @@ const Tabs = ({
       {
         variant: FontStyle.BODY1_MEDIUM,
         style: {
-          ...styles$o.textStyle,
+          ...styles$n.textStyle,
           color: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_PRIMARY
         },
         text: title
@@ -2949,7 +3059,7 @@ const Tabs = ({
 };
 var Tabs$1 = withThemeProvider(Tabs);
 
-const styles$n = reactNative.StyleSheet.create({
+const styles$m = reactNative.StyleSheet.create({
   container: {
     width: "100%"
   },
@@ -3012,8 +3122,8 @@ const Tags = ({
     reactNative.ScrollView,
     {
       testID,
-      style: styles$n.container,
-      contentContainerStyle: styles$n.contentContainer,
+      style: styles$m.container,
+      contentContainerStyle: styles$m.contentContainer,
       horizontal: false
     },
     tags?.map((tag) => /* @__PURE__ */ React__default["default"].createElement(
@@ -3023,16 +3133,16 @@ const Tags = ({
         key: tag,
         onPress: () => toggleTag(tag),
         style: [
-          styles$n.tag,
+          styles$m.tag,
           tagStyles,
-          selectedTags.includes(tag) ? styles$n.selectedTag : styles$n.tagUnSelected
+          selectedTags.includes(tag) ? styles$m.selectedTag : styles$m.tagUnSelected
         ]
       },
       /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: selectedTags.includes(tag) ? "H9semiBold" : "P4regular",
-          style: selectedTags.includes(tag) ? styles$n.tagText : styles$n.tagUnselectedText,
+          style: selectedTags.includes(tag) ? styles$m.tagText : styles$m.tagUnselectedText,
           text: tag
         }
       ),
@@ -3048,7 +3158,7 @@ const Tags = ({
   );
 };
 
-const styles$m = reactNative.StyleSheet.create({
+const styles$l = reactNative.StyleSheet.create({
   container: {
     width: horizontalScale(70),
     height: verticalScale(25),
@@ -3113,26 +3223,26 @@ const CustomSwitch = ({
     reactNative.Pressable,
     {
       onPress: toggleSwitch,
-      style: [styles$m.container, { width }],
+      style: [styles$l.container, { width }],
       testID: "custom-switch"
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
       {
         style: [
-          styles$m.track,
+          styles$l.track,
           {
             backgroundColor: isOn ? DHRE_COLORS_ALERT.DH_SUCCESS_GREEN_ACCENT : DHRE_COLORS_TEXT.DH_TEXTDISABLED
           }
         ]
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$m.thumb, animatedStyle] }),
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$l.thumb, animatedStyle] }),
       type !== ToggleButtonType.SMALL && /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: "B3semiBold",
           style: [
-            styles$m.text,
+            styles$l.text,
             { textAlign: isOn ? TextDirectType.left : TextDirectType.right }
           ],
           text: isOn ? ToggleTextType.ON : ToggleTextType.OFF
@@ -3142,10 +3252,9 @@ const CustomSwitch = ({
   );
 };
 
-const styles$l = reactNative.StyleSheet.create({
+const styles$k = reactNative.StyleSheet.create({
   container: {
-    paddingVertical: DHRE_PADDING.LG,
-    borderBottomWidth: moderateScale(1)
+    paddingVertical: DHRE_PADDING.LG
   },
   header: {
     flexDirection: "row",
@@ -3204,7 +3313,7 @@ const Accordion = ({
     {
       style: [
         {
-          ...styles$l.container,
+          ...styles$k.container,
           borderRadius: 0,
           ...containerStyle
         }
@@ -3214,7 +3323,7 @@ const Accordion = ({
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Pressable,
       {
-        style: [styles$l.header, headerStyle, disabled && { opacity: 0.5 }],
+        style: [styles$k.header, headerStyle, disabled && { opacity: 0.5 }],
         onPressOut: !disabled ? onToggle : void 0
       },
       headerComponent ? headerComponent() : /* @__PURE__ */ React__default["default"].createElement(
@@ -3223,7 +3332,7 @@ const Accordion = ({
           variant: titleVariant,
           text: title,
           style: {
-            ...styles$l.title,
+            ...styles$k.title,
             color: theme.CONTENT_PRIMARY,
             ...titleStyle
           }
@@ -3232,14 +3341,14 @@ const Accordion = ({
       icon ? React__default["default"].cloneElement(icon, {
         width: DHRE_SPACING_BASE.SPACE_20,
         height: DHRE_SPACING_BASE.SPACE_20,
-        style: styles$l.iconStyle
+        style: styles$k.iconStyle
       }) : null
     ),
     optionalElement ? optionalElement() : null,
     isOpen && /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Animated.View,
       {
-        style: [styles$l.content, slideAnimation && { height: cardHeight }]
+        style: [styles$k.content, slideAnimation && { height: cardHeight }]
       },
       /* @__PURE__ */ React__default["default"].createElement(
         reactNative.View,
@@ -3256,7 +3365,7 @@ const Accordion = ({
 };
 var Accordion$1 = withThemeProvider(Accordion);
 
-const styles$k = reactNative.StyleSheet.create({
+const styles$j = reactNative.StyleSheet.create({
   container: {
     position: "absolute",
     alignSelf: "center",
@@ -3264,8 +3373,7 @@ const styles$k = reactNative.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,
@@ -3375,20 +3483,19 @@ const Toast = React__default["default"].forwardRef(
       reactNative.Animated.View,
       {
         style: [
-          styles$k.container,
-          { bottom },
+          styles$j.container,
           { backgroundColor: theme.SURFACE_TERTIARY }
         ],
         testID: "TOAST"
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.innerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: hideToast, style: styles$k.icon }, isSuccess ? sucessIcon : warning ? warningIcon : errorIcon), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.textContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.innerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: hideToast, style: styles$j.icon }, isSuccess ? sucessIcon : warning ? warningIcon : errorIcon), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.textContainer }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: "BODY2_LIGHT",
           text: message,
-          style: [styles$k.messageText, { color: theme.CONTENT_SECONDRY }]
+          style: [styles$j.messageText, { color: theme.CONTENT_SECONDRY }]
         }
-      ), subjectText && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.subContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      ), subjectText && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$j.subContainer }, /* @__PURE__ */ React__default["default"].createElement(
         Button,
         {
           title: subjectText,
@@ -3413,7 +3520,7 @@ const Toast = React__default["default"].forwardRef(
         reactNative.Animated.View,
         {
           style: [
-            styles$k.progressBar,
+            styles$j.progressBar,
             {
               width: progressAnim,
               backgroundColor: accentColor
@@ -3430,7 +3537,7 @@ const ToastWithProvider = React__default["default"].forwardRef(
 );
 ToastWithProvider.displayName = "Toast";
 
-const styles$j = reactNative.StyleSheet.create({
+const styles$i = reactNative.StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     justifyContent: "center",
@@ -3509,8 +3616,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],
@@ -3532,7 +3639,7 @@ const CustomSearchBar = ({
       React__default["default"].cloneElement(searchIcon, {
         width: DHRE_SPACING.LG,
         height: DHRE_SPACING.LG,
-        style: [styles$j.searchIconStyle, searchIconStyle]
+        style: [styles$i.searchIconStyle, searchIconStyle]
       })
     ),
     /* @__PURE__ */ React__default["default"].createElement(
@@ -3541,7 +3648,7 @@ const CustomSearchBar = ({
         ...props,
         testID: `${testID}-INPUT`,
         style: [
-          styles$j.input,
+          styles$i.input,
           { color: theme[Theme.CONTENT_PRIMARY] },
           inputStyle
         ],
@@ -3576,14 +3683,14 @@ const CustomSearchBar = ({
       React__default["default"].cloneElement(rightIcon, {
         // width: moderateScale(24),
         // height: moderateScale(24),
-        style: [styles$j.crossIconStyle, crossIconStyle]
+        style: [styles$i.crossIconStyle, crossIconStyle]
       })
     )
   );
 };
 var CustomSearchBar$1 = withThemeProvider(CustomSearchBar);
 
-const styles$i = reactNative.StyleSheet.create({
+const styles$h = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -3617,7 +3724,7 @@ const CustomHeader = ({
   rightIcons
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$i.container, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$i.pageTitleContainer }, leftIcon && /* @__PURE__ */ React__default["default"].createElement(HeaderIcon, { config: leftIcon }), /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.container, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.pageTitleContainer }, leftIcon && /* @__PURE__ */ React__default["default"].createElement(HeaderIcon, { config: leftIcon }), /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "BODY1_MEDIUM",
@@ -3627,11 +3734,11 @@ const CustomHeader = ({
   ), titleSuffixIcon && React__default["default"].cloneElement(titleSuffixIcon, {
     width: ICON_SIZE,
     height: ICON_SIZE
-  })), rightIcons && rightIcons.length > 0 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$i.iconsContainer }, rightIcons.map((config, index) => /* @__PURE__ */ React__default["default"].createElement(HeaderIcon, { key: index, config }))));
+  })), rightIcons && rightIcons.length > 0 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.iconsContainer }, rightIcons.map((config, index) => /* @__PURE__ */ React__default["default"].createElement(HeaderIcon, { key: index, config }))));
 };
 var CustomHeader$1 = withThemeProvider(CustomHeader);
 
-const styles$h = reactNative.StyleSheet.create({
+const styles$g = reactNative.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -3661,14 +3768,14 @@ const ActionButton = ({
   {
     testID,
     onPress,
-    style: [styles$h.actionButton, style]
+    style: [styles$g.actionButton, style]
   },
   icon,
   /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "L1_REGULAR",
-      style: [styles$h.titleStyle, titleStyle],
+      style: [styles$g.titleStyle, titleStyle],
       text: title
     }
   )
@@ -3709,7 +3816,7 @@ const SwipableList = (props) => {
       return id;
     });
   }, []);
-  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$h.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$g.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
     ActionButton,
     {
       icon: leftPrimaryActionIcon,
@@ -3736,7 +3843,7 @@ const SwipableList = (props) => {
       titleStyle
     }
   ));
-  const rightActionHandle = (item) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$h.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
+  const rightActionHandle = (item) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$g.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
     ActionButton,
     {
       icon: rightPrimaryActionIcon,
@@ -3750,7 +3857,7 @@ const SwipableList = (props) => {
       titleStyle
     }
   ));
-  const renderItem = ({ item }) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID: `${testId}-LIST`, style: styles$h.container }, /* @__PURE__ */ React__default["default"].createElement(
+  const renderItem = ({ item }) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID: `${testId}-LIST`, style: styles$g.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNativeGestureHandler.Swipeable,
     {
       ref: (ref) => swipeableRefs.current[item.id] = ref,
@@ -3776,7 +3883,7 @@ const SwipableList = (props) => {
         reactNative.View,
         {
           style: {
-            ...styles$h.seperator,
+            ...styles$g.seperator,
             backgroundColor: theme.BORDER_SEPRATOR
           }
         }
@@ -3786,7 +3893,15 @@ const SwipableList = (props) => {
 };
 var SwipableList$1 = withThemeProvider(SwipableList);
 
-const styles$g = reactNative.StyleSheet.create({
+const OUTLINED_GRADIENT_COLORS = [
+  DHRE_CYAN_HIGHLIGHT[300],
+  "#438CB1"
+];
+const OUTLINED_GRADIENT_START = { x: 0, y: 0 };
+const OUTLINED_GRADIENT_END = { x: 1, y: 1 };
+const OUTLINED_BORDER_WIDTH = 1;
+
+const styles$f = reactNative.StyleSheet.create({
   container: {
     justifyContent: "center",
     alignItems: "center"
@@ -3826,13 +3941,6 @@ const ICON_BLUR_TYPE_STYLE = reactNative.StyleSheet.create({
     overflow: "hidden"
   }
 });
-const OUTLINED_GRADIENT_COLORS = [
-  DHRE_CYAN_HIGHLIGHT[300],
-  "#438CB1"
-];
-const OUTLINED_GRADIENT_START = { x: 0, y: 0 };
-const OUTLINED_GRADIENT_END = { x: 1, y: 1 };
-const OUTLINED_BORDER_WIDTH = 1;
 const OUTLINED_BUTTON_STYLES = reactNative.StyleSheet.create({
   shell: {
     borderRadius: ICON_BUTTON_RADIUS,
@@ -3974,7 +4082,7 @@ const CustomIcon = ({
         return renderOutlinedButton();
     }
   };
-  const outerStyle = labelPosition ? [ICON_LABEL_POSITION_STYLES[labelPosition], containerStyle ?? {}] : [styles$g.container, containerStyle ?? {}];
+  const outerStyle = labelPosition ? [ICON_LABEL_POSITION_STYLES[labelPosition], containerStyle ?? {}] : [styles$f.container, containerStyle ?? {}];
   const resolvedTitleColor = type ? { color: theme[Theme.CONTENT_PRIMARY] } : void 0;
   const resolvedTitleVariant = titleVariant ?? ICON_TITLE_VARIANT_FOR_SIZE[size ?? "large"];
   return /* @__PURE__ */ React__default["default"].createElement(
@@ -3990,14 +4098,14 @@ const CustomIcon = ({
       {
         variant: resolvedTitleVariant,
         text: title,
-        style: [styles$g.title, resolvedTitleColor, titleStyle]
+        style: [styles$f.title, resolvedTitleColor, titleStyle]
       }
     )
   );
 };
 var CustomIcon$1 = withThemeProvider(CustomIcon);
 
-const createStyles$5 = (theme) => {
+const createStyles$6 = (theme) => {
   return reactNative.StyleSheet.create({
     container: {
       position: "absolute",
@@ -10198,7 +10306,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;
@@ -10238,7 +10346,7 @@ const CustomLoader = ({
 };
 var CustomLoader$1 = withThemeProvider(CustomLoader);
 
-const createStyles$4 = (scaledSize, color) => reactNative.StyleSheet.create({
+const createStyles$5 = (scaledSize, color) => reactNative.StyleSheet.create({
   // Full-screen absolute overlay — mirrors CustomLoader `container`
   container: {
     position: "absolute",
@@ -10360,7 +10468,7 @@ const LoaderContent = ({
   }, []);
   const color = theme[Theme.CONTENT_PRIMARY];
   const styles = React.useMemo(
-    () => createStyles$4(scaledSize, color),
+    () => createStyles$5(scaledSize, color),
     [scaledSize, color]
   );
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.container, containerStyle], testID }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.backdrop, backdropStyle] }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.box, boxStyle] }, /* @__PURE__ */ React__default["default"].createElement(
@@ -10424,14 +10532,14 @@ const HorizontalLine = ({ backgroundColor = "SURFACE_SECONDARY", style }) => {
     reactNative.View,
     {
       style: [
-        styles$f.line,
+        styles$e.line,
         { backgroundColor: theme[backgroundColor] },
         style
       ]
     }
   );
 };
-const styles$f = reactNative.StyleSheet.create({
+const styles$e = reactNative.StyleSheet.create({
   line: {
     height: 1,
     width: "100%"
@@ -10454,18 +10562,18 @@ const Topic = ({
     reactNative.TouchableOpacity,
     {
       style: [
-        styles$e.button,
+        styles$d.button,
         { backgroundColor: theme[Theme.SURFACE_SECONDARY] },
         containterStyle
       ],
       onPress
     },
-    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.rightIconContainer }, React__default["default"].cloneElement(rightIcon)),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.timeContainer }, time && /* @__PURE__ */ React__default["default"].createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.textContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$e.paymentView }, statusImage && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null, React__default["default"].cloneElement(statusImage)), subTitle && /* @__PURE__ */ React__default["default"].createElement(
+    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.rightIconContainer }, React__default["default"].cloneElement(rightIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.timeContainer }, time && /* @__PURE__ */ React__default["default"].createElement(CustomText$1, { text: time, variant: FontStyle.L2_REGULAR })),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.textContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.paymentView }, statusImage && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null, React__default["default"].cloneElement(statusImage)), subTitle && /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
-        style: [styles$e.subTitle, subTitleStyle],
+        style: [styles$d.subTitle, subTitleStyle],
         text: subTitle,
         variant: FontStyle.L2_REGULAR,
         textColor: Theme.CONTENT_PRIMARY
@@ -10480,7 +10588,7 @@ const Topic = ({
     ))
   );
 };
-const styles$e = reactNative.StyleSheet.create({
+const styles$d = reactNative.StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -10576,14 +10684,14 @@ const ContactModal = ({
   const renderEmailOptions = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$d.title,
+      style: styles$c.title,
       text: "Open email app",
       variant: "L2_REGULAR"
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$d.subtitle,
+      style: styles$c.subtitle,
       text: "Which app would you like to open?",
       variant: "L2_REGULAR"
     }
@@ -10591,33 +10699,33 @@ const ContactModal = ({
     reactNative.Pressable,
     {
       onPress: () => handleOptionPress(),
-      style: styles$d.optionButton
+      style: styles$c.optionButton
     },
     /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
-        style: styles$d.optionText,
+        style: styles$c.optionText,
         text: option,
         variant: "B3_BOLD"
       }
     )
   ))));
-  const renderContent = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handleCall, style: styles$d.optionButton }, /* @__PURE__ */ React__default["default"].createElement(
+  const renderContent = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.viewContainer }, isMailOpen ? renderEmailOptions() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handleCall, style: styles$c.optionButton }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$d.optionText,
+      style: styles$c.optionText,
       text: `Call ${phoneNumber}`,
       variant: "B3_BOLD"
     }
-  ))), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onClose, style: styles$d.cancelButton }, /* @__PURE__ */ React__default["default"].createElement(
+  ))), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onClose, style: styles$c.cancelButton }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
-      style: styles$d.cancelText,
+      style: styles$c.cancelText,
       text: "Cancel",
       variant: "B2_REGULAR"
     }
   )));
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.container }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Modal,
     {
       animationType: "slide",
@@ -10625,10 +10733,10 @@ const ContactModal = ({
       visible,
       onRequestClose: onClose
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.modalContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$d.modalContent }, renderContent()))
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.modalContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.modalContent }, renderContent()))
   ));
 };
-const styles$d = reactNative.StyleSheet.create({
+const styles$c = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
@@ -10690,7 +10798,7 @@ const styles$d = reactNative.StyleSheet.create({
 });
 var ContactModel = withThemeProvider(ContactModal);
 
-const styles$c = reactNative.StyleSheet.create({
+const styles$b = reactNative.StyleSheet.create({
   // Outer card: wraps Calendar (which includes the custom header via renderHeader)
   // and provides the dark-blue background + rounded corners.
   calendarCard: {
@@ -10842,12 +10950,12 @@ const DateRangePicker = (props) => {
     reactNative.View,
     {
       style: [
-        styles$c.calendarHeader,
+        styles$b.calendarHeader,
         { borderBottomColor: theme.STROKE_TERTIARY }
       ]
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$c.monthText, { color: theme.CONTENT_PRIMARY }] }, monthLabel),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$c.arrowsContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$b.monthText, { color: theme.CONTENT_PRIMARY }] }, monthLabel),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.arrowsContainer }, /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TouchableOpacity,
       {
         onPress: prevMonth,
@@ -10881,81 +10989,86 @@ const DateRangePicker = (props) => {
       ))
     ))
   );
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$c.calendarCard, { backgroundColor: theme.SURFACE_SECONDARY }] }, /* @__PURE__ */ React__default["default"].createElement(
-    reactNativeCalendars.Calendar,
-    {
-      key: monthKey,
-      current: currentDateStr,
-      markedDates: getMarkedDates(),
-      markingType: "period",
-      hideArrows: true,
-      renderHeader: renderCalendarHeader,
-      theme: {
-        calendarBackground: "transparent",
-        dayTextColor: theme.CONTENT_PRIMARY,
-        textDisabledColor: theme.CONTENT_DISABLE,
-        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__default["default"].createElement(reactNative.View, null, /* @__PURE__ */ React__default["default"].createElement(
+    reactNative.View,
+    {
+      style: [
+        styles$b.calendarCard,
+        { backgroundColor: theme.SURFACE_SECONDARY }
+      ]
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      reactNativeCalendars.Calendar,
+      {
+        key: monthKey,
+        current: currentDateStr,
+        markedDates: getMarkedDates(),
+        markingType: "period",
+        hideArrows: true,
+        renderHeader: renderCalendarHeader,
+        theme: {
+          calendarBackground: "transparent",
+          dayTextColor: theme.CONTENT_PRIMARY,
+          textDisabledColor: theme.CONTENT_DISABLE_DARK,
+          todayTextColor: theme.CONTENT_PRIMARY,
+          textSectionTitleColor: theme.CONTENT_SECONDRY,
+          textDayFontSize: 16,
+          textDayFontWeight: "500",
+          textDayHeaderFontSize: 11,
+          textDayHeaderFontWeight: "300",
+          // Reduce row gap from default 14px (7+7) to 4px (2+2) to match Figma.
+          weekVerticalMargin: 2,
+          // Remove the calendar body's default 5px horizontal padding so the date
+          // grid aligns flush with the custom renderHeader content.
+          "stylesheet.calendar.main": {
+            container: {
+              paddingLeft: 0,
+              paddingRight: 0,
+              backgroundColor: "transparent"
+            }
           },
-          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__default["default"].createElement(
+        },
+        style: { backgroundColor: "transparent", borderRadius: 0 },
+        onDayPress,
+        firstDay: 1,
+        ...calendarProps
+      }
+    )
+  ), /* @__PURE__ */ React__default["default"].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
     }
   ));
@@ -10979,20 +11092,20 @@ const OurOfficesButton = ({
     reactNative.TouchableOpacity,
     {
       style: [
-        styles$b.button,
+        styles$a.button,
         { backgroundColor: theme["SURFACE_SECONDARY"] },
         containerStyle
       ],
       onPress
     },
-    leftIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.iconContainer }, React__default["default"].cloneElement(leftIcon)),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.textContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    leftIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.iconContainer }, React__default["default"].cloneElement(leftIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.textContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
         text: title,
         variant: titleVariant,
         textColor: titleColor,
-        style: styles$b.textView
+        style: styles$a.textView
       }
     ), /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
@@ -11000,13 +11113,13 @@ const OurOfficesButton = ({
         text: description,
         variant: descriptionVariant,
         textColor: descriptionColor,
-        style: styles$b.flexWrap
+        style: styles$a.flexWrap
       }
     )),
-    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.rightIconContainer }, React__default["default"].cloneElement(rightIcon))
+    rightIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.rightIconContainer }, React__default["default"].cloneElement(rightIcon))
   );
 };
-const styles$b = reactNative.StyleSheet.create({
+const styles$a = reactNative.StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -11030,7 +11143,7 @@ const styles$b = reactNative.StyleSheet.create({
 });
 var OurOffices = withThemeProvider(OurOfficesButton);
 
-const styles$a = reactNative.StyleSheet.create({
+const styles$9 = reactNative.StyleSheet.create({
   iconContainer: {
     position: "relative",
     alignItems: "center"
@@ -11059,10 +11172,10 @@ const NotificationBandge = ({
   if (notificationCount <= 0) {
     return icon;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.iconContainer }, icon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$a.badge }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$a.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$9.iconContainer }, icon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$9.badge }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$9.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
 };
 
-const createStyles$3 = (theme) => {
+const createStyles$4 = (theme) => {
   return reactNative.StyleSheet.create({
     // ── ScrollableList ────────────────────────────────────────────
     container: {
@@ -11157,7 +11270,7 @@ const CategoryItem = React.memo(
     enableTextWrap
   }) => {
     const { theme } = useTheme();
-    const styles = React.useMemo(() => createStyles$3(theme), [theme]);
+    const styles = React.useMemo(() => createStyles$4(theme), [theme]);
     const handlePress = React.useCallback(
       () => onPress(item.name, item.value),
       [onPress, item.name, item.value]
@@ -11254,7 +11367,7 @@ const ScrollableList = ({
     data && data.length > 0 ? data[0].name : null
   );
   const { theme } = useTheme();
-  const styles = React.useMemo(() => createStyles$3(theme), [theme]);
+  const styles = React.useMemo(() => createStyles$4(theme), [theme]);
   const activeKey = activeTab ?? selectedItem;
   const handlePress = React.useCallback(
     (name, value) => {
@@ -11297,7 +11410,7 @@ const ScrollableList = ({
 };
 var category = withThemeProvider(ScrollableList);
 
-const createStyles$2 = (theme) => {
+const createStyles$3 = (theme) => {
   return reactNative.StyleSheet.create({
     container: {
       flex: 1,
@@ -11375,7 +11488,7 @@ const FeedbackForm = ({
   const isFilled = feedback.length > 0;
   const label = inputLabel ?? inputText;
   const { theme } = useTheme();
-  const styles = createStyles$2(theme);
+  const styles = createStyles$3(theme);
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.container }, /* @__PURE__ */ React__default["default"].createElement(
     CustomText$1,
     {
@@ -11460,7 +11573,7 @@ const CountryDropDown = ({
     setCallingCode(`+${country.callingCode[0]}`);
     getCountryCode(`+${country.callingCode[0]}`);
   };
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$9.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$9.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$8.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$8.countryPickerContainer, countryPickerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
     CountryPicker__default["default"],
     {
       withFilter: true,
@@ -11474,20 +11587,20 @@ const CountryDropDown = ({
     reactNative.Text,
     {
       onPress: () => setPickerVisible(true),
-      style: [styles$9.callingCode, callingCodeStyle]
+      style: [styles$8.callingCode, callingCodeStyle]
     },
     callingCode
-  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$9.flex }, (isFocused || value) && /* @__PURE__ */ React__default["default"].createElement(
+  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$8.flex }, (isFocused || value) && /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "L2_REGULAR",
       text: label ?? "",
-      style: styles$9.floatingLabel
+      style: styles$8.floatingLabel
     }
   ), /* @__PURE__ */ React__default["default"].createElement(
     reactNative.TextInput,
     {
-      style: [styles$9.input, inputStyle],
+      style: [styles$8.input, inputStyle],
       placeholder: !isFocused ? placeholder : "",
       keyboardType: "phone-pad",
       value,
@@ -11503,13 +11616,13 @@ const CountryDropDown = ({
       variant: "L2_REGULAR",
       text: errorMessage ?? "",
       style: {
-        ...styles$9.errorStyle,
+        ...styles$8.errorStyle,
         color: DHRE_DEFAULT.DH_SEMENTIC_ERROR
       }
     }
   ) : null);
 };
-const styles$9 = reactNative.StyleSheet.create({
+const styles$8 = reactNative.StyleSheet.create({
   flex: {
     flex: 1
   },
@@ -11570,6 +11683,7 @@ const CommonTextInput = (props) => {
     keyboardType = "default",
     placeholderText,
     inputStyle,
+    containerStyle,
     maxLength,
     errorMessage,
     helperText,
@@ -11598,7 +11712,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__default["default"].createElement(reactNative.Pressable, { onPress: handlePress, style: styles$8.container }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handlePress, style: [styles$7.container, containerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
     reactNativePaper.TextInput,
     {
       mode: "outlined",
@@ -11607,7 +11721,7 @@ const CommonTextInput = (props) => {
       spellCheck: false,
       autoCorrect: false,
       outlineStyle: {
-        ...styles$8.outlineStyle,
+        ...styles$7.outlineStyle,
         borderColor: currentBorderColor,
         borderWidth,
         backgroundColor: containerBackground
@@ -11629,7 +11743,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: {
@@ -11648,12 +11763,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"
@@ -11684,7 +11794,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"
@@ -11694,7 +11804,7 @@ const CommonTextInput = (props) => {
     helperMessage
   ) : null);
 };
-const styles$8 = reactNative.StyleSheet.create({
+const styles$7 = reactNative.StyleSheet.create({
   container: {
     justifyContent: "center"
   },
@@ -11769,7 +11879,7 @@ const CustomDropdown = (props) => {
         reactNative.Text,
         {
           style: [
-            styles$7.label,
+            styles$6.label,
             FONT_STYLES[FontStyle.BODY2_LIGHT],
             {
               color: labelColor,
@@ -11794,11 +11904,11 @@ const CustomDropdown = (props) => {
   };
   const renderItem = (item) => {
     const isSelected = item[valueField] === value;
-    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$7.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$6.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Text,
       {
         style: [
-          styles$7.itemText,
+          styles$6.itemText,
           FONT_STYLES[FontStyle.BODY2_LIGHT],
           { color: theme.CONTENT_PRIMARY },
           itemTextStyle,
@@ -11808,12 +11918,12 @@ const CustomDropdown = (props) => {
       item[labelField]
     ));
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$7.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React__default["default"].createElement(
     reactNativeElementDropdown.Dropdown,
     {
       ...props,
       style: [
-        styles$7.dropdown,
+        styles$6.dropdown,
         {
           borderColor: fieldBorderColor,
           borderWidth: fieldBorderWidth,
@@ -11823,18 +11933,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,
@@ -11864,7 +11974,7 @@ const CustomDropdown = (props) => {
         menuContainerStyle
       ],
       activeColor: activeColor ?? theme.SURFACE_SECONDARY,
-      itemContainerStyle: [styles$7.itemListStyle, itemContainerStyle],
+      itemContainerStyle: [styles$6.itemListStyle, itemContainerStyle],
       disable,
       autoScroll,
       dropdownPosition,
@@ -11877,7 +11987,7 @@ const CustomDropdown = (props) => {
     reactNative.Text,
     {
       style: [
-        styles$7.helperText,
+        styles$6.helperText,
         FONT_STYLES[FontStyle.BODY2_LIGHT],
         { color: helperColor }
       ]
@@ -11885,7 +11995,7 @@ const CustomDropdown = (props) => {
     helperMessage
   ) : null);
 };
-const styles$7 = reactNative.StyleSheet.create({
+const styles$6 = reactNative.StyleSheet.create({
   container: {
     marginVertical: verticalScale(4),
     direction: "ltr",
@@ -11932,7 +12042,7 @@ const styles$7 = reactNative.StyleSheet.create({
 });
 var DropDown = withThemeProvider(CustomDropdown);
 
-const styles$6 = reactNative.StyleSheet.create({
+const styles$5 = reactNative.StyleSheet.create({
   mainContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -11991,18 +12101,18 @@ const CustomSwitchBtn = ({
     {
       disabled,
       onPress: toggleSwitch,
-      style: { ...styles$6.mainContainer, ...containerStyle }
+      style: { ...styles$5.mainContainer, ...containerStyle }
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Animated.View,
       {
-        style: [styles$6.circle, { transform: [{ translateX }], ...circleStyle }]
+        style: [styles$5.circle, { transform: [{ translateX }], ...circleStyle }]
       }
     ),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        style: [styles$6.activeText, value ? inActiveTextStyle : activeTextStyle],
+        style: [styles$5.activeText, value ? inActiveTextStyle : activeTextStyle],
         text: activeText,
         variant: activeTextVariant
       }
@@ -12011,7 +12121,7 @@ const CustomSwitchBtn = ({
       CustomTypography,
       {
         style: [
-          styles$6.inActiveText,
+          styles$5.inActiveText,
           value ? activeTextStyle : inActiveTextStyle
         ],
         text: inActiveText,
@@ -12049,7 +12159,7 @@ class ToastService {
 }
 const toastService = new ToastService();
 
-const createStyles$1 = (theme) => reactNative.StyleSheet.create({
+const createStyles$2 = (theme) => reactNative.StyleSheet.create({
   listContainer: {
     paddingHorizontal: 10,
     alignItems: "center"
@@ -12091,7 +12201,7 @@ const TagsComponent = ({
   unselectedTagButton
 }) => {
   const { theme } = useTheme();
-  const styles = createStyles$1(theme);
+  const styles = createStyles$2(theme);
   const reorderedTags = () => {
     if (selectedTag) {
       return [
@@ -12141,7 +12251,7 @@ const TagsComponent = ({
 };
 var TagSingleSelection = withThemeProvider(TagsComponent);
 
-const styles$5 = reactNative.StyleSheet.create({
+const styles$4 = reactNative.StyleSheet.create({
   textInputContainer: {
     flexDirection: "row",
     gap: DHRE_PADDING.MD,
@@ -12324,12 +12434,12 @@ const OTPInput = React__default["default"].forwardRef(
           ...otpHeaderTextStyle
         }
       }
-    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
+    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$4.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TextInput,
       {
         key: index?.toString(),
         style: {
-          ...styles$5.textInputStyle,
+          ...styles$4.textInputStyle,
           color: !isEditable ? theme$1.CONTENT_DISABLE_DARK : otp.length === length ? theme$1.STROKE_PRIMARY : theme$1.CONTENT_PRIMARY,
           backgroundColor: !isEditable ? theme$1.SURFACE_PRIMARY : theme$1.SURFACE_TERTIARY_TRANSPARENT,
           borderColor: !isEditable ? theme$1.CONTENT_DISABLE_DARK : errorMessage || isInValidOtp && otp?.length === length ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : otp[index] ? theme$1.STROKE_PRIMARY : theme$1.CONTENT_SECONDRY,
@@ -12350,7 +12460,7 @@ const OTPInput = React__default["default"].forwardRef(
         selectionColor: theme$1.CONTENT_PRIMARY,
         editable: isEditable
       }
-    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerIconContainer }, errorMessage ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, errorIcon ? React__default["default"].cloneElement(errorIcon, {
+    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.timerContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.timerIconContainer }, errorMessage ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, errorIcon ? React__default["default"].cloneElement(errorIcon, {
       width: DHRE_SPACING_BASE.SPACE_20,
       height: DHRE_SPACING_BASE.SPACE_20
     }) : null, /* @__PURE__ */ React__default["default"].createElement(
@@ -12374,7 +12484,7 @@ const OTPInput = React__default["default"].forwardRef(
       reactNative.Pressable,
       {
         onPress: onClickResendOTP,
-        style: styles$5.resendOTPStyle,
+        style: styles$4.resendOTPStyle,
         disabled: disableResendButton() || !isResendOtpEnable
       },
       /* @__PURE__ */ React__default["default"].createElement(
@@ -12388,7 +12498,7 @@ const OTPInput = React__default["default"].forwardRef(
           }
         }
       )
-    )), errorMessageMaxReachCount ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    )), errorMessageMaxReachCount ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         text: errorMessageMaxReachCount,
@@ -12403,7 +12513,7 @@ const OTPInput = React__default["default"].forwardRef(
 );
 OTPInput.displayName = "OTPInput";
 
-const styles$4 = reactNative.StyleSheet.create({
+const styles$3 = reactNative.StyleSheet.create({
   stepperContainer: {
     flexDirection: "row",
     marginBottom: 24,
@@ -12497,27 +12607,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) => {
@@ -12527,25 +12637,25 @@ const Stepper = ({
       return { borderColor: theme.BORDER_PRIMARY };
     } else if (status === Status.Completed) {
       return {
-        ...styles$4.completeStepDivider,
+        ...styles$3.completeStepDivider,
         borderColor: theme.CONTENT_PRIMARY
       };
     } else {
       return { borderColor: theme.CONTENT_SECONDRY };
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$4.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$3.stepperContainer, ...containerStyle } }, data?.map((item, index) => {
     const stepCircleStyle = renderCircleStyle(item?.status);
     const dividerStyle = renderDividerStyle(item?.status);
     const labelStyle = renderLableStyle(item?.status);
-    const lastViewStyle = index === data?.length - 1 ? styles$4.lastStepWrapper : null;
+    const lastViewStyle = index === data?.length - 1 ? styles$3.lastStepWrapper : null;
     return /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
       {
         key: index?.toString(),
-        style: { ...styles$4.stepperWrapper, ...lastViewStyle }
+        style: { ...styles$3.stepperWrapper, ...lastViewStyle }
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.stepperSeparatorContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.stepperSeparatorContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...stepCircleStyle } }, showStepCount && /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: item?.step,
@@ -12554,8 +12664,8 @@ const Stepper = ({
             color: theme.CONTENT_PRIMARY
           }
         }
-      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$4.separator, ...dividerStyle } })),
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$4.lableContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$3.separator, ...dividerStyle } })),
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.lableContainer }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: item?.label,
@@ -12566,17 +12676,22 @@ const Stepper = ({
     );
   }));
 };
-var index$3 = withThemeProvider(Stepper);
+var index$4 = withThemeProvider(Stepper);
 
-const styles$3 = reactNative.StyleSheet.create({
+const styles$2 = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center"
   },
+  gradientShell: {
+    borderRadius: DHRE_RADIUS.PILL,
+    padding: OUTLINED_BORDER_WIDTH
+  },
   sliderContainer: {
-    height: verticalScale(48),
-    // borderRadius: moderateScale(25),
+    height: DHRE_COMPONENT_HEIGHT.BUTTON_MD - OUTLINED_BORDER_WIDTH * 2,
+    // pill shape — overflow:hidden clips all child content to the rounded boundary
+    borderRadius: DHRE_RADIUS.PILL,
     overflow: "hidden",
     justifyContent: "center"
   },
@@ -12587,11 +12702,13 @@ const styles$3 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   button: {
-    height: verticalScale(40),
+    height: DHRE_COMPONENT_HEIGHT.INPUT_SM,
     justifyContent: "center",
     alignItems: "center",
-    // borderRadius: moderateScale(20),
-    margin: 4
+    // circular thumb — consumer can override via sliderStyle prop
+    borderRadius: DHRE_RADIUS.PILL,
+    // 4px inset keeps thumb inside pill boundary (matches Figma left:4, top:4)
+    margin: DHRE_PADDING.XS
   },
   buttonTextContainer: {
     position: "absolute",
@@ -12601,11 +12718,10 @@ const styles$3 = reactNative.StyleSheet.create({
     top: 0,
     alignItems: "center",
     justifyContent: "center"
-    // borderRadius: 25,
   }
 });
 
-const BUTTON_WIDTH = 40;
+const DEFAULT_SIZE = 40;
 const CustomSlideButton = React__default["default"].forwardRef(
   ({
     label,
@@ -12615,17 +12731,21 @@ const CustomSlideButton = React__default["default"].forwardRef(
     textStyle,
     containerStyle,
     sliderStyle,
-    size = BUTTON_WIDTH,
+    size = DEFAULT_SIZE,
     sliderBackgroundColor = "#fff",
     sliderTextColor = "#000",
-    resetTimer = 2e3
+    resetTimer = 2e3,
+    isRTL = false,
+    completedContainerStyle
   }, ref) => {
+    const thumbOffset = verticalScale(size) + DHRE_PADDING.XS * 2;
     const value = React.useRef(0);
     const cardRef = React.useRef(null);
     const [translateX] = React.useState(new reactNative.Animated.Value(0));
     const sliderConteinerRef = React.useRef(null);
     const [color] = React.useState(new reactNative.Animated.Value(0));
     const [sliderBackgroundColorRef] = React.useState(new reactNative.Animated.Value(0));
+    const [isCompleted, setIsCompleted] = React.useState(false);
     React__default["default"].useImperativeHandle(ref, () => ({
       reset() {
         resetAll();
@@ -12636,15 +12756,18 @@ const CustomSlideButton = React__default["default"].forwardRef(
       if (cardRef.current) {
         cardRef.current.setNativeProps({
           style: { width }
-          // Change the width here
         });
         value.current = width;
         sliderConteinerRef?.current?.setNativeProps({
           style: { width }
         });
       }
+      if (isRTL) {
+        translateX.setValue(value.current - thumbOffset);
+      }
     };
     const resetAll = () => {
+      setIsCompleted(false);
       onReset?.();
       reactNative.Animated.timing(sliderBackgroundColorRef, {
         toValue: 0,
@@ -12661,7 +12784,7 @@ const CustomSlideButton = React__default["default"].forwardRef(
         // because we're animating the color, not layout
       }).start();
       reactNative.Animated.timing(translateX, {
-        toValue: 0,
+        toValue: isRTL ? value.current - thumbOffset : 0,
         useNativeDriver: false
       }).start();
     };
@@ -12672,39 +12795,73 @@ const CustomSlideButton = React__default["default"].forwardRef(
       },
       onPanResponderTerminationRequest: () => false,
       onPanResponderMove: (evt, gestureState) => {
-        if (gestureState.dx > 0 && gestureState.dx <= value?.current - BUTTON_WIDTH - 8) {
-          translateX.setValue(gestureState.dx);
-          const colorValue = gestureState.dx > value.current / 3 ? 1 : 0;
-          reactNative.Animated.timing(color, {
-            toValue: colorValue,
-            duration: 0,
-            // no transition time, immediate change
-            useNativeDriver: false
-            // because we're animating the color, not layout
-          }).start();
+        if (isRTL) {
+          if (gestureState.dx < 0 && gestureState.dx >= -(value.current - thumbOffset)) {
+            translateX.setValue(value.current - thumbOffset + gestureState.dx);
+            const colorValue = gestureState.dx < -(value.current / 3) ? 1 : 0;
+            reactNative.Animated.timing(color, {
+              toValue: colorValue,
+              duration: 0,
+              // no transition time, immediate change
+              useNativeDriver: false
+            }).start();
+          }
+        } else {
+          if (gestureState.dx > 0 && gestureState.dx <= value.current - thumbOffset) {
+            translateX.setValue(gestureState.dx);
+            const colorValue = gestureState.dx > value.current / 3 ? 1 : 0;
+            reactNative.Animated.timing(color, {
+              toValue: colorValue,
+              duration: 0,
+              // no transition time, immediate change
+              useNativeDriver: false
+            }).start();
+          }
         }
       },
       onPanResponderRelease: (e, gestureState) => {
-        if (gestureState.dx >= value.current * 0.8) {
-          reactNative.Animated.timing(translateX, {
-            toValue: value?.current - (BUTTON_WIDTH + 8),
-            // Slide to the end
-            duration: 300,
-            useNativeDriver: false
-          }).start();
-          reactNative.Animated.timing(sliderBackgroundColorRef, {
-            toValue: 1,
-            duration: 0,
-            // no transition time, immediate change
-            useNativeDriver: false
-            // because we're animating the color, not layout
-          }).start();
-          onComplete?.();
-          setTimeout(() => {
+        if (isRTL) {
+          if (gestureState.dx <= -(value.current * 0.8)) {
+            reactNative.Animated.timing(translateX, {
+              toValue: 0,
+              // snap to leftmost position (completed side for RTL)
+              duration: 300,
+              useNativeDriver: false
+            }).start();
+            reactNative.Animated.timing(sliderBackgroundColorRef, {
+              toValue: 1,
+              duration: 0,
+              useNativeDriver: false
+            }).start();
+            setIsCompleted(true);
+            onComplete?.();
+            setTimeout(() => {
+              resetAll();
+            }, resetTimer);
+          } else {
             resetAll();
-          }, resetTimer);
+          }
         } else {
-          resetAll();
+          if (gestureState.dx >= value.current * 0.8) {
+            reactNative.Animated.timing(translateX, {
+              toValue: value.current - thumbOffset,
+              // slide to the end
+              duration: 300,
+              useNativeDriver: false
+            }).start();
+            reactNative.Animated.timing(sliderBackgroundColorRef, {
+              toValue: 1,
+              duration: 0,
+              useNativeDriver: false
+            }).start();
+            setIsCompleted(true);
+            onComplete?.();
+            setTimeout(() => {
+              resetAll();
+            }, resetTimer);
+          } else {
+            resetAll();
+          }
         }
       },
       onPanResponderTerminate: () => {
@@ -12720,49 +12877,62 @@ const CustomSlideButton = React__default["default"].forwardRef(
       outputRange: [sliderBackgroundColor, "transparent"]
     });
     const { theme } = useTheme();
-    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: {
-      ...styles$3.sliderContainer,
-      backgroundColor: theme.SURFACE_INVERTED,
-      ...containerStyle
-    }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.Animated.View,
-      {
-        style: [styles$3.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
-        ref: sliderConteinerRef
-      }
-    ), /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.View,
-      {
-        style: styles$3.buttonTextContainer
-      },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.Text, { style: [{
-        alignSelf: "center",
-        ...textStyle
-      }, { color: textColor }] }, label)
-    ), /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.Animated.View,
+    return /* @__PURE__ */ React__default["default"].createElement(
+      LinearGradient__default["default"],
       {
-        style: [styles$3.slider, { transform: [{ translateX }] }],
-        ...panResponder.panHandlers
+        colors: OUTLINED_GRADIENT_COLORS,
+        start: OUTLINED_GRADIENT_START,
+        end: OUTLINED_GRADIENT_END,
+        style: styles$2.gradientShell
       },
       /* @__PURE__ */ React__default["default"].createElement(
         reactNative.View,
         {
-          style: {
-            ...styles$3.button,
-            backgroundColor: theme.SURFACE_PRIMARY,
-            width: verticalScale(size),
-            height: verticalScale(size),
-            // borderRadius: verticalScale(size / 2),
-            ...sliderStyle
-          }
+          style: [
+            styles$2.sliderContainer,
+            { backgroundColor: theme.SURFACE_INVERTED },
+            containerStyle,
+            isCompleted && { backgroundColor: theme.BUTTON_SUCCESS_FILL },
+            isCompleted ? completedContainerStyle : void 0
+          ],
+          onLayout: handleLayout,
+          ref: cardRef
         },
-        icon
+        /* @__PURE__ */ React__default["default"].createElement(
+          reactNative.Animated.View,
+          {
+            style: [styles$2.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
+            ref: sliderConteinerRef
+          }
+        ),
+        /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.Text, { style: [{ alignSelf: "center", ...textStyle }, { color: textColor }] }, label)),
+        /* @__PURE__ */ React__default["default"].createElement(
+          reactNative.Animated.View,
+          {
+            style: [styles$2.slider, { transform: [{ translateX }] }],
+            ...panResponder.panHandlers
+          },
+          /* @__PURE__ */ React__default["default"].createElement(
+            reactNative.View,
+            {
+              style: {
+                ...styles$2.button,
+                backgroundColor: theme.SURFACE_PRIMARY,
+                width: verticalScale(size),
+                height: verticalScale(size),
+                ...sliderStyle
+              }
+            },
+            icon
+          )
+        )
       )
-    ));
+    );
   }
 );
-var index$2 = withThemeProvider(CustomSlideButton);
+var index$3 = withThemeProvider(
+  CustomSlideButton
+);
 
 const DHRE_STROKE = {
   NONE: 0,
@@ -12822,7 +12992,7 @@ const AVATAR_SPEC = {
     ringInset: 6
   }
 };
-const createStyles = (size, theme) => {
+const createStyles$1 = (size, theme) => {
   const dimensions = AVATAR_SPEC[size];
   return reactNative.StyleSheet.create({
     container: {
@@ -12898,9 +13068,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":
@@ -13051,7 +13221,7 @@ const Avatar = (props) => {
 };
 var Avatar$1 = withThemeProvider(Avatar);
 
-const styles$2 = reactNative.StyleSheet.create({
+const styles$1 = reactNative.StyleSheet.create({
   accordionContainer: {
     gap: verticalScale(8),
     marginHorizontal: horizontalScale(24),
@@ -13156,13 +13326,13 @@ const AppointmentCard = ({
       isOpen,
       onToggle,
       containerStyle: {
-        ...styles$2.accordionStyle,
+        ...styles$1.accordionStyle,
         backgroundColor: theme.SURFACE_SECONDARY,
         borderColor: theme.BORDER_SEPERATOR_HEADER,
         borderBottomColor: theme.BORDER_SEPERATOR_HEADER
       },
-      headerStyle: styles$2.accordionHeader,
-      headerComponent: () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.accordionText }, /* @__PURE__ */ React__default["default"].createElement(
+      headerStyle: styles$1.accordionHeader,
+      headerComponent: () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.accordionText }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: headerTitle,
@@ -13183,18 +13353,18 @@ const AppointmentCard = ({
       reactNative.View,
       {
         style: [
-          styles$2.accordionDetails,
+          styles$1.accordionDetails,
           { borderTopColor: theme.BORDER_SEPERATOR_HEADER }
         ]
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.infoColumn, key: title2 }, /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.infoColumn, key: title2 }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: title2,
           variant: FontStyle.L3_REGULAR,
           style: { color: theme.CONTENT_SECONDRY }
         }
-      ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React__default["default"].createElement(
+      ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           text: value,
@@ -13209,7 +13379,7 @@ const AppointmentCard = ({
           text: directionText,
           variant: FontStyle.L2_REGULAR,
           style: [
-            styles$2.getDirectionsText,
+            styles$1.getDirectionsText,
             { color: theme.CONTENT_PRIMARY }
           ],
           onPress: onDirectionPress
@@ -13219,7 +13389,7 @@ const AppointmentCard = ({
         reactNative.View,
         {
           style: [
-            styles$2.infoContainer,
+            styles$1.infoContainer,
             {
               backgroundColor: theme.SURFACE_TERTIARY
             }
@@ -13239,7 +13409,7 @@ const AppointmentCard = ({
         reactNative.View,
         {
           style: [
-            styles$2.actionsContainer,
+            styles$1.actionsContainer,
             {
               borderTopColor: theme.BORDER_SEPERATOR_HEADER
             }
@@ -13251,7 +13421,7 @@ const AppointmentCard = ({
             text: viewText,
             variant: FontStyle.L2_REGULAR,
             style: [
-              styles$2.viewText,
+              styles$1.viewText,
               {
                 color: theme.CONTENT_PRIMARY
               }
@@ -13259,12 +13429,12 @@ const AppointmentCard = ({
             onPress: onViewDetailsPress
           }
         ),
-        /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.actionIcons }, /* @__PURE__ */ React__default["default"].createElement(
+        /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.actionIcons }, /* @__PURE__ */ React__default["default"].createElement(
           CustomIcon$1,
           {
             icon: deleteIcon,
             containerStyle: {
-              ...styles$2.iconContainer,
+              ...styles$1.iconContainer,
               backgroundColor: theme.SURFACE_INVERTED
             },
             onPress: onDeletePress
@@ -13274,7 +13444,7 @@ const AppointmentCard = ({
           {
             icon: editIcon,
             containerStyle: {
-              ...styles$2.iconContainer,
+              ...styles$1.iconContainer,
               backgroundColor: theme.SURFACE_INVERTED
             },
             onPress: onEditPress
@@ -13284,9 +13454,9 @@ const AppointmentCard = ({
     )
   );
 };
-var index$1 = withThemeProvider(AppointmentCard);
+var index$2 = withThemeProvider(AppointmentCard);
 
-const styles$1 = reactNative.StyleSheet.create({
+const styles = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -13343,7 +13513,7 @@ const PropertyDetails = ({
     reactNative.View,
     {
       style: [
-        styles$1.container,
+        styles.container,
         {
           backgroundColor: theme.SURFACE_PRIMARY,
           borderColor: isSelected ? theme.STROKE_ACTIVE : theme.STROKE_TERTIARY
@@ -13358,12 +13528,12 @@ const PropertyDetails = ({
         containerStyle
       ]
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.imageWrapper }, React__default["default"].cloneElement(icon, {
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.imageWrapper }, React__default["default"].cloneElement(icon, {
       width: "100%",
       height: "100%",
       borderRadius: DHRE_RADIUS.MD
-    }), brandIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.brandBadge }, brandIcon)),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.propertyInfo }, propertyNumber && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$1.propertyNumber, propertyNumberStyle] }, /* @__PURE__ */ React__default["default"].createElement(
+    }), brandIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.brandBadge }, brandIcon)),
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.propertyInfo }, propertyNumber && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.propertyNumber, propertyNumberStyle] }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         text: propertyNumber,
@@ -13394,31 +13564,45 @@ const PropertyDetails = ({
     )
   );
 };
-var index = withThemeProvider(PropertyDetails);
+var index$1 = withThemeProvider(PropertyDetails);
 
-const styles = reactNative.StyleSheet.create({
-  container: {
-    rowGap: verticalScale(12)
-  },
-  optionContainer: {
-    flexDirection: "row",
-    columnGap: horizontalScale(8),
-    alignItems: "center"
-  },
-  radioButton: {
-    width: moderateScale(16),
-    height: moderateScale(16),
-    borderRadius: moderateScale(10),
-    borderWidth: moderateScale(1.5),
-    borderColor: "#000"
-  },
-  radioButtonSelected: {
-    backgroundColor: "#000"
-  },
-  label: {
-    color: "#000"
-  }
-});
+const createStyles = (themeColors, size, radioColor) => {
+  const radioSize = size === "large" ? moderateScale(24) : moderateScale(20);
+  const dotSize = size === "large" ? moderateScale(12) : moderateScale(10);
+  const resolvedRadioColor = radioColor ?? themeColors[Theme.STROKE_ACTIVE];
+  return reactNative.StyleSheet.create({
+    container: {
+      rowGap: verticalScale(12)
+    },
+    optionContainer: {
+      flexDirection: "row",
+      columnGap: horizontalScale(8),
+      alignItems: "flex-start"
+    },
+    radioButton: {
+      width: radioSize,
+      height: radioSize,
+      borderRadius: moderateScale(100),
+      borderWidth: 1,
+      borderColor: resolvedRadioColor,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    radioButtonSelected: {
+      borderWidth: 2,
+      backgroundColor: themeColors[Theme.CONTENT_INVERTED]
+    },
+    radioButtonInnerDot: {
+      width: dotSize,
+      height: dotSize,
+      borderRadius: moderateScale(50),
+      backgroundColor: resolvedRadioColor
+    },
+    label: {
+      color: themeColors[Theme.CONTENT_PRIMARY]
+    }
+  });
+};
 
 const RadioButtonGroup = ({
   data,
@@ -13426,8 +13610,13 @@ const RadioButtonGroup = ({
   containerStyle,
   labelStyle,
   optionContainerStyle,
-  selectedValue
+  selectedValue,
+  size = "large",
+  fontVariant,
+  radioColor
 }) => {
+  const { theme } = useTheme();
+  const styles = createStyles(theme, size, radioColor);
   const [selectedOption, setSelectedOption] = React.useState(
     selectedValue ?? data[0]?.value
   );
@@ -13435,12 +13624,14 @@ const RadioButtonGroup = ({
     setSelectedOption(item.value);
     onSelect(item);
   };
+  const resolvedFontVariant = fontVariant ?? (size === "small" ? FontStyle.BODY2_MEDIUM : FontStyle.BODY1_MEDIUM);
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.container, containerStyle] }, data?.map((item) => /* @__PURE__ */ React__default["default"].createElement(
     reactNative.TouchableOpacity,
     {
       key: item.value,
       style: [styles.optionContainer, optionContainerStyle],
-      onPress: () => handleSelect(item)
+      onPress: () => handleSelect(item),
+      activeOpacity: 1
     },
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
@@ -13449,22 +13640,24 @@ const RadioButtonGroup = ({
           styles.radioButton,
           selectedOption === item.value && styles.radioButtonSelected
         ]
-      }
+      },
+      selectedOption === item.value && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.radioButtonInnerDot })
     ),
     /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
-        variant: FontStyle.L1_REGULAR,
+        variant: resolvedFontVariant,
         text: item.label,
         style: [styles.label, labelStyle]
       }
     )
   )));
 };
+var index = withThemeProvider(RadioButtonGroup);
 
 exports.Accordion = Accordion$1;
 exports.AnimationLoitte = AnimationWithImperativeApi;
-exports.AppointmentCard = index$1;
+exports.AppointmentCard = index$2;
 exports.Avatar = Avatar$1;
 exports.AvatarSize = AvatarSize;
 exports.Background = Background$1;
@@ -13484,7 +13677,7 @@ exports.CustomIcon = CustomIcon$1;
 exports.CustomLoader = CustomLoader$1;
 exports.CustomProgressBar = CustomProgressBar$1;
 exports.CustomSearchBar = CustomSearchBar$1;
-exports.CustomSlideButton = index$2;
+exports.CustomSlideButton = index$3;
 exports.CustomSwitchBtn = CustomSwitchBtn;
 exports.CustomText = CustomText$1;
 exports.CustomTextInput = CustomTextInput;
@@ -13523,6 +13716,9 @@ exports.FONT_STYLES = FONT_STYLES;
 exports.FeedbackForm = feedback;
 exports.FileUpload = FileUpload;
 exports.FontStyle = FontStyle;
+exports.GRADIENT_COLORS_ERROR = GRADIENT_COLORS_ERROR;
+exports.GRADIENT_COLORS_PENDING = GRADIENT_COLORS_PENDING;
+exports.GRADIENT_COLORS_SUCCESS = GRADIENT_COLORS_SUCCESS;
 exports.Line = Line;
 exports.Loader = Loader$1;
 exports.NAKHEEL_DEFAULT = NAKHEEL_DEFAULT;
@@ -13531,12 +13727,12 @@ exports.OTPInput = OTPInput;
 exports.OurOfficesButton = OurOffices;
 exports.PdfView = PdfView;
 exports.PopUp = PopUp;
-exports.PropertyDetails = index;
-exports.RadioButtonGroup = RadioButtonGroup;
+exports.PropertyDetails = index$1;
+exports.RadioButtonGroup = index;
 exports.ShapeType = ShapeType;
 exports.SingleSelectionTags = TagSingleSelection;
 exports.StarRating = Star;
-exports.Stepper = index$3;
+exports.Stepper = index$4;
 exports.SwipableList = SwipableList$1;
 exports.Tabs = Tabs$1;
 exports.Tags = Tags;