dhre-ui-kit 3.2.0 → 3.4.0

package/lib/index.mjs

@@ -4,11 +4,11 @@ import { Dimensions, StyleSheet, Text, Pressable, View, Platform, KeyboardAvoidi
 import Svg, { Defs, LinearGradient, Stop, RadialGradient, Rect, Circle, Svg as Svg$1, Path } from 'react-native-svg';
 import Modal from 'react-native-modal';
 import Clipboard from '@react-native-clipboard/clipboard';
-import LinearGradient$1 from 'react-native-linear-gradient';
 import Tooltip from 'react-native-walkthrough-tooltip';
 import Pdf from 'react-native-pdf';
 import * as Progress from 'react-native-progress';
 import { Swipeable } from 'react-native-gesture-handler';
+import LinearGradient$1 from 'react-native-linear-gradient';
 import LottieView from 'lottie-react-native';
 import DeviceInfo from 'react-native-device-info';
 import { Calendar } from 'react-native-calendars';
@@ -117,6 +117,7 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["SURFACE_DISABLE"] = "SURFACE_DISABLE";
   Theme2["SURFACE_DISABLE_DARK"] = "SURFACE_DISABLE_DARK";
   Theme2["SURFACE_DISABLE_LIGHT"] = "SURFACE_DISABLE_LIGHT";
+  Theme2["SURFACE_DISABLE_SELECTED"] = "SURFACE_DISABLE_SELECTED";
   Theme2["SURFACE_INVERTED"] = "SURFACE_INVERTED";
   Theme2["SURFACE_INVERTED_TRANSPARENT"] = "SURFACE_INVERTED_TRANSPARENT";
   Theme2["SURFACE_DROP_SHADOW"] = "SURFACE_DROP_SHADOW";
@@ -129,6 +130,8 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["SURFACE_WARNING_TRANSPARENT"] = "SURFACE_WARNING_TRANSPARENT";
   Theme2["SURFACE_ERROR"] = "SURFACE_ERROR";
   Theme2["SURFACE_ERROR_TRANSPARENT"] = "SURFACE_ERROR_TRANSPARENT";
+  Theme2["SURFACE_HIGHLIGHT"] = "SURFACE_HIGHLIGHT";
+  Theme2["SURFACE_POPOVER_HIGHLIGHT"] = "SURFACE_POPOVER_HIGHLIGHT";
   Theme2["CONTENT_PRIMARY"] = "CONTENT_PRIMARY";
   Theme2["CONTENT_SECONDRY"] = "CONTENT_SECONDRY";
   Theme2["CONTENT_TERTIARY"] = "CONTENT_TERTIARY";
@@ -136,6 +139,8 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["CONTENT_DISABLE_DARK"] = "CONTENT_DISABLE_DARK";
   Theme2["CONTENT_DISABLE_LIGHT"] = "CONTENT_DISABLE_LIGHT";
   Theme2["CONTENT_INVERTED"] = "CONTENT_INVERTED";
+  Theme2["CONTENT_HIGHLIGHT"] = "CONTENT_HIGHLIGHT";
+  Theme2["CONTENT_ARROW_HIGHLIGHT"] = "CONTENT_ARROW_HIGHLIGHT";
   Theme2["CONTENT_STATIC"] = "CONTENT_STATIC";
   Theme2["CONTENT_PRIMARY_STATIC"] = "CONTENT_PRIMARY_STATIC";
   Theme2["CONTENT_SECONDRY_STATIC"] = "CONTENT_SECONDRY_STATIC";
@@ -172,6 +177,13 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["BUTTON_DISABLED_FILL"] = "BUTTON_DISABLED_FILL";
   Theme2["BUTTON_DISABLED_FILL_2"] = "BUTTON_DISABLED_FILL_2";
   Theme2["BUTTON_SUCCESS_FILL"] = "BUTTON_SUCCESS_FILL";
+  Theme2["BUTTON_TERTIARY_DEFAULT_FILL"] = "BUTTON_TERTIARY_DEFAULT_FILL";
+  Theme2["BUTTON_TERTIARY_HOVER_FILL"] = "BUTTON_TERTIARY_HOVER_FILL";
+  Theme2["BUTTON_TERTIARY_DISABLED_FILL"] = "BUTTON_TERTIARY_DISABLED_FILL";
+  Theme2["BUTTON_SECONDARY_DEFAULT_STROKE"] = "BUTTON_SECONDARY_DEFAULT_STROKE";
+  Theme2["BUTTON_SECONDARY_DISABLED_STROKE"] = "BUTTON_SECONDARY_DISABLED_STROKE";
+  Theme2["BUTTON_QUATERNARY_DEFAULT_STROKE"] = "BUTTON_QUATERNARY_DEFAULT_STROKE";
+  Theme2["BUTTON_QUATERNARY_DISABLED_STROKE"] = "BUTTON_QUATERNARY_DISABLED_STROKE";
   Theme2["NOTIFICATIONS_INFO"] = "NOTIFICATIONS_INFO";
   Theme2["NOTIFICATIONS_HIGHLIGHT"] = "NOTIFICATIONS_HIGHLIGHT";
   Theme2["BLUR_20"] = "BLUR_20";
@@ -184,11 +196,19 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["STROKE_SUCCESS"] = "STROKE_SUCCESS";
   Theme2["STROKE_WARNING"] = "STROKE_WARNING";
   Theme2["STROKE_INFO"] = "STROKE_INFO";
+  Theme2["STROKE_DISABLED_LIGHT"] = "STROKE_DISABLED_LIGHT";
   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";
+  Theme2["SHADOW_5"] = "SHADOW_5";
+  Theme2["SHADOW_20"] = "SHADOW_20";
+  Theme2["SHADOW_25"] = "SHADOW_25";
+  Theme2["SHADOW_HOVER_10"] = "SHADOW_HOVER_10";
+  Theme2["SHADOW_HOVER_20"] = "SHADOW_HOVER_20";
+  Theme2["SHADOW_HOVER_40"] = "SHADOW_HOVER_40";
+  Theme2["SHADOW_SOFT_LIGHTEST"] = "SHADOW_SOFT_LIGHTEST";
   return Theme2;
 })(Theme || {});
 
@@ -379,19 +399,22 @@ const DHRE_COLORS_TEXT = {
   DH_SOFT_GRAY: "#EEEEEE80"
 };
 const DHRE_DEEP_SPACE_BLUE = {
-  950: "#000A28",
-  900: "#18213B",
-  800: "#0E2350",
-  700: "#334671",
-  600: "#4D5F86",
-  500: "#6A7897",
-  400: "#8994AF",
-  300: "#BFC7DB",
-  200: "#D8DDEA",
-  100: "#F5F8FF",
-  DSP_900_TRANSPERANT_20: "rgba(0, 10, 40, 0.20)",
-  DSP_900_TRANSPERANT_10: "rgba(0, 10, 40, 0.10)",
-  DSP_900_TRANSPERANT_30: "rgba(0, 10, 40, 0.30)"
+  950: "#0F1B2D",
+  900: "#203041",
+  800: "#3F4957",
+  700: "#575F6C",
+  600: "#6F7681",
+  500: "#878D96",
+  400: "#9FA4AB",
+  300: "#B7BBC0",
+  200: "#CFD1D5",
+  100: "#E9E9E9",
+  50: "#F3F4F4",
+  // Base rgb (39, 50, 66) = Deep Space Blue - Supporting/900. The 30% step has no
+  // corresponding DHDS export entry; extrapolated from the 10%/20% steps that do.
+  DSP_900_TRANSPERANT_10: "rgba(39, 50, 66, 0.10)",
+  DSP_900_TRANSPERANT_20: "rgba(39, 50, 66, 0.20)",
+  DSP_900_TRANSPERANT_30: "rgba(39, 50, 66, 0.30)"
 };
 const DHRE_CORE_BLUE = {
   400: "#15214B",
@@ -401,6 +424,12 @@ const DHRE_CORE_BLUE = {
   50: "#E3E9FC",
   TRANSPARENT_60: "rgba(0, 30, 140, 0.60)"
 };
+const DHRE_CORE_TEAL = {
+  500: "#003F48",
+  400: "#077280",
+  300: "#009DB3",
+  100: "#9ADFE8"
+};
 const DHRE_CYAN_HIGHLIGHT = {
   600: "#0072B5",
   500: "#009FD4",
@@ -418,49 +447,50 @@ const DHRE_WHITE = {
   TRANSPARENT_10: "rgba(255, 255, 255, 0.10)"
 };
 const DHRE_INFO_BLUE = {
-  400: "#07556C",
-  300: "#279DC1",
-  200: "#52C5E8",
-  100: "#C1EAFC",
-  50: "#E9F8FF",
-  TRANSPARENT_35: "rgba(233, 248, 255, 0.35)",
-  TRASNPARENT: "rgba(233, 248, 255, 0.10)"
+  400: "#0081AD",
+  300: "#00B4E0",
+  200: "#4DCBE9",
+  100: "#99E1F3",
+  50: "#E5F7FC",
+  TRANSPARENT_35: "rgba(229, 247, 252, 0.35)",
+  TRASNPARENT: "rgba(229, 247, 252, 0.10)"
 };
 const DHRE_SUCCESS_GREEN = {
-  400: "#347243",
-  300: "#4EAB65",
-  200: "#89C798",
-  100: "#C4E3CC",
+  400: "#00A882",
+  300: "#23DBB5",
+  200: "#80EFD8",
+  100: "#A7F1E1",
   50: "#EBF7EE",
-  TRANSPARENT_50: "rgba(137, 199, 152, 0.50)",
-  TRANSPARENT_10: "rgba(137, 199, 152, 0.10)",
-  TRANSPARENT_30: "rgba(137, 199, 152, 0.30)"
+  TRANSPARENT_50: "rgba(0, 168, 130, 0.50)",
+  TRANSPARENT_10: "rgba(0, 168, 130, 0.10)",
+  TRANSPARENT_30: "rgba(0, 168, 130, 0.30)"
 };
 const DHRE_ORANGE_WARNING = {
-  400: "#A4560E",
+  400: "#D26C0E",
   300: "#EB8425",
-  200: "#EEAA6A",
-  100: "#FFE0C3",
+  200: "#F1A966",
+  100: "#F7CEA8",
   50: "#FFF4EA",
-  TRANSPARENT_60: "#rgba(238, 170, 106, 0.60)",
-  TRANSPARENT_10: "rgba(238, 170, 106, 0.10)"
+  TRANSPARENT_60: "rgba(241, 169, 102, 0.60)",
+  TRANSPARENT_10: "rgba(241, 169, 102, 0.10)"
 };
 const DHRE_RED_ERROR = {
-  400: "#9D032C",
-  300: "#EB0542",
-  200: "#F0809E",
-  100: "#FCE1E8",
+  400: "#8E0000",
+  300: "#DB2348",
+  200: "#F67F97",
+  150: "#F1A7B6",
+  100: "#FEBDCA",
   50: "#FFF2F5",
-  TRANSPARENT_400_60: "rgba(235, 5, 66, 0.60)",
-  TRANSPARENT_400_10: "rgba(235, 5, 66, 0.10)"
+  TRANSPARENT_400_60: "rgba(219, 35, 72, 0.60)",
+  TRANSPARENT_400_10: "rgba(219, 35, 72, 0.10)"
 };
 const DHRE_CONFIRMATION_ERROR_GRADIENT = {
-  light: ["#F0809E", "#FFFFFF"],
-  dark: ["#EB0542", "#000A28"]
+  light: ["#F67F97", "#FFFFFF"],
+  dark: ["#F67F97", "#0F1B2D"]
 };
 const DHRE_CONFIRMATION_BASE_GRADIENT = {
-  light: ["rgba(165, 233, 255, 0)", "#52C5E8"],
-  dark: ["rgba(165, 233, 255, 0)", "#279DC1"]
+  light: ["rgba(0, 180, 224, 0)", "#00B4E0"],
+  dark: ["rgba(0, 180, 224, 0)", "#00B4E0"]
 };
 const GRADIENT_COLORS_SUCCESS = {
   light: [
@@ -530,39 +560,39 @@ const GRADIENT_COLORS_PENDING = {
 const theme = {
   [Theme.SURFACE_PRIMARY]: {
     light: "#FFFFFF",
-    dark: "#000A28"
+    dark: "#0F1B2D"
   },
   [Theme.SURFACE_PRIMARY_NAKHEEL]: {
     light: "#E3D6BF",
     dark: "#000000"
   },
   [Theme.SURFACE_PRIMARY_CARDS]: {
-    light: "#F5F8FF",
-    dark: "#18213B"
+    light: "#F3F4F4",
+    dark: "#203041"
   },
   [Theme.SURFACE_PRIMARY_TRANSPARENT]: {
-    light: "rgba(0, 10, 40, 0.10)",
+    light: "rgba(39, 50, 66, 0.10)",
     dark: "rgba(255, 255, 255, 0.10)"
   },
   [Theme.SURFACE_SECONDARY]: {
-    light: "#F5F8FF",
-    dark: "#0E2350"
+    light: "#E9E9E9",
+    dark: "#3F4957"
   },
   [Theme.SURFACE_SECONDARY_NAKHEEL]: {
     light: "#F8F7F6",
     dark: "#00263A"
   },
   [Theme.SURFACE_SECONDARY_TRANSPARENT]: {
-    light: "rgba(0, 10, 40, 0.10)",
-    dark: "rgba(0, 10, 40, 0.10)"
+    light: "rgba(154, 223, 232, 0.05)",
+    dark: "rgba(39, 50, 66, 0.10)"
   },
   [Theme.SURFACE_TERTIARY]: {
-    light: "#D8DDEA",
-    dark: "#334671"
+    light: "#CFD1D5",
+    dark: "#575F6C"
   },
   [Theme.SURFACE_TERTIARY_TRANSPARENT]: {
-    light: "rgba(60, 172, 252, 0.10)",
-    dark: "rgba(60, 172, 252, 0.10)"
+    light: "rgba(0, 157, 179, 0.10)",
+    dark: "rgba(0, 157, 179, 0.05)"
   },
   [Theme.SURFACE_STATIC]: {
     light: "#FFFFFF",
@@ -580,16 +610,20 @@ const theme = {
     light: "#E1E1E1",
     dark: "#A7A7A7"
   },
+  [Theme.SURFACE_DISABLE_SELECTED]: {
+    light: "#9ADFE8",
+    dark: "#003F48"
+  },
   [Theme.SURFACE_DISABLE_DARK]: {
-    light: "#334671",
-    dark: "#8994AF"
+    light: "#CFD1D5",
+    dark: "#575F6C"
   },
   [Theme.SURFACE_DISABLE_LIGHT]: {
-    light: "#BFC7DB",
-    dark: "#334671"
+    light: "#6F7681",
+    dark: "#CFD1D5"
   },
   [Theme.SURFACE_INVERTED]: {
-    light: "#000A28",
+    light: "#0F1B2D",
     dark: "#FFFFFF"
   },
   [Theme.SURFACE_INVERTED_TRANSPARENT]: {
@@ -601,51 +635,59 @@ const theme = {
     dark: "#373737"
   },
   [Theme.SURFACE_BLUR]: {
-    light: "rgba(233, 248, 255, 0.35)",
+    light: "rgba(229, 247, 252, 0.50)",
     dark: "rgba(0, 0, 0, 0.50)"
   },
   [Theme.SURFACE_SUCCESS]: {
-    light: "#89C798",
-    dark: "#4EAB65"
+    light: "#23DBB5",
+    dark: "#23DBB5"
   },
   [Theme.SURFACE_SUCCESS_TRANSPARENT]: {
-    light: "rgba(137, 199, 152, 0.10)",
-    dark: "rgba(137, 199, 152, 0.50)"
+    light: "rgba(0, 168, 130, 0.10)",
+    dark: "rgba(0, 168, 130, 0.20)"
   },
   [Theme.SURFACE_INFO]: {
-    light: "#52C5E8",
-    dark: "#279DC1"
+    light: "#00B4E0",
+    dark: "#00B4E0"
   },
   [Theme.SURFACE_INFO_TRANSPARENT]: {
-    light: "rgba(233, 248, 255, 0.35)",
-    dark: "rgba(233, 248, 255, 0.10)"
+    light: "rgba(229, 247, 252, 0.50)",
+    dark: "rgba(229, 247, 252, 0.10)"
   },
   [Theme.SURFACE_WARNING]: {
-    light: "#FFF4EA",
-    dark: "#A4560E"
+    light: "#EB8425",
+    dark: "#EB8425"
   },
   [Theme.SURFACE_WARNING_TRANSPARENT]: {
-    light: "rgba(238, 170, 106, 0.10)",
-    dark: "rgba(238, 170, 106, 0.60)"
+    light: "rgba(241, 169, 102, 0.20)",
+    dark: "rgba(241, 169, 102, 0.20)"
   },
   [Theme.SURFACE_ERROR]: {
-    light: "#F0809E",
-    dark: "#EB0542"
+    light: "#F67F97",
+    dark: "#F67F97"
   },
   [Theme.SURFACE_ERROR_TRANSPARENT]: {
-    light: "rgba(235, 5, 66, 0.10)",
-    dark: "rgba(235, 5, 66, 0.60)"
+    light: "rgba(219, 35, 72, 0.10)",
+    dark: "rgba(219, 35, 72, 0.10)"
+  },
+  [Theme.SURFACE_HIGHLIGHT]: {
+    light: "#009DB3",
+    dark: "#009DB3"
+  },
+  [Theme.SURFACE_POPOVER_HIGHLIGHT]: {
+    light: "#009DB3",
+    dark: "#009DB3"
   },
   [Theme.CONTENT_PRIMARY]: {
-    light: "#000A28",
+    light: "#0F1B2D",
     dark: "#FFFFFF"
   },
   [Theme.CONTENT_SECONDRY]: {
-    light: "#0E2350",
-    dark: "#BFC7DB"
+    light: "#3F4957",
+    dark: "#CFD1D5"
   },
   [Theme.CONTENT_TERTIARY]: {
-    light: "#6F7681",
+    light: "#575F6C",
     dark: "#9FA4AB"
   },
   [Theme.CONTENT_SECONDARY_TEXT]: {
@@ -661,16 +703,24 @@ const theme = {
     dark: "#686868"
   },
   [Theme.CONTENT_DISABLE_DARK]: {
-    light: "#6A7897",
-    dark: "#6A7897"
+    light: "#B7BBC0",
+    dark: "#878D96"
   },
   [Theme.CONTENT_DISABLE_LIGHT]: {
-    light: "#BFC7DB",
-    dark: "#BFC7DB"
+    light: "#878D96",
+    dark: "#B7BBC0"
   },
   [Theme.CONTENT_INVERTED]: {
     light: "#FFFFFF",
-    dark: "#000A28"
+    dark: "#0F1B2D"
+  },
+  [Theme.CONTENT_HIGHLIGHT]: {
+    light: "#009DB3",
+    dark: "#009DB3"
+  },
+  [Theme.CONTENT_ARROW_HIGHLIGHT]: {
+    light: "#80EFD8",
+    dark: "#80EFD8"
   },
   [Theme.CONTENT_STATIC]: {
     light: "#FFFFFF",
@@ -725,40 +775,40 @@ const theme = {
     dark: "#19394A"
   },
   [Theme.WARNING]: {
-    light: "#EB8425",
-    dark: "#EEAA6A"
+    light: "#D26C0E",
+    dark: "#EB8425"
   },
   [Theme.WARNING_EMPHASIS]: {
-    light: "#A4560E",
-    dark: "#FFE0C3"
+    light: "#9A4401",
+    dark: "#F7CEA8"
   },
   [Theme.SUCCESS]: {
-    light: "#4EAB65",
-    dark: "#89C798"
+    light: "#018869",
+    dark: "#80EFD8"
   },
   [Theme.SUCCESS_EMPHASIS]: {
-    light: "#347243",
-    dark: "#C4E3CC"
+    light: "#01513F",
+    dark: "#A7F1E1"
   },
   [Theme.INFO]: {
-    light: "#279DC1",
-    dark: "#52C5E8"
+    light: "#0081AD",
+    dark: "#00B4E0"
   },
   [Theme.INFO_EMPHASIS]: {
-    light: "#07556C",
-    dark: "#C1EAFC"
+    light: "#03526D",
+    dark: "#99E1F3"
   },
   [Theme.ERROR]: {
-    light: "#EB0542",
-    dark: "#F0809E"
+    light: "#DB2348",
+    dark: "#F67F97"
   },
   [Theme.ERROR_EMPHASIS]: {
-    light: "#9D032C",
-    dark: "#FCE1E8"
+    light: "#8E0000",
+    dark: "#FEBDCA"
   },
   [Theme.LINK]: {
-    light: "#25C6FB",
-    dark: "#2CD8FD"
+    light: "#0F1B2D",
+    dark: "#FFFFFF"
   },
   [Theme.LINK_INVERTED]: {
     light: "#0072B5",
@@ -781,40 +831,68 @@ const theme = {
     dark: "#C2C2C2"
   },
   [Theme.BUTTON_DEFAULT_FILL]: {
-    light: "#000A28",
+    light: "#0F1B2D",
     dark: "#FFFFFF"
   },
   [Theme.BUTTON_HOVER_FILL]: {
-    light: "#0E2350",
-    dark: "#D8DDEA"
+    light: "#3F4957",
+    dark: "#CFD1D5"
   },
   [Theme.BUTTON_HOVER_FILL_SECONDARY]: {
-    light: "#BFC7DB",
-    dark: "#0E2350"
+    light: "#F3F4F4",
+    dark: "#203041"
   },
   [Theme.BUTTON_INVRTED_FILL]: {
     light: "#FFFFFF",
-    dark: "#000A28"
+    dark: "#0F1B2D"
   },
   [Theme.BUTTON_DISABLED_FILL]: {
-    light: "#BFC7DB",
-    dark: "#D8DDEA"
+    light: "#203041",
+    dark: "#F3F4F4"
   },
   [Theme.BUTTON_DISABLED_FILL_2]: {
     light: "#8994AF",
     dark: "#BFC7DB"
   },
   [Theme.BUTTON_SUCCESS_FILL]: {
-    light: "#4EAB65",
-    dark: "#4EAB65"
+    light: "#23DBB5",
+    dark: "#23DBB5"
+  },
+  [Theme.BUTTON_TERTIARY_DEFAULT_FILL]: {
+    light: "#009DB3",
+    dark: "#009DB3"
+  },
+  [Theme.BUTTON_TERTIARY_HOVER_FILL]: {
+    light: "#077280",
+    dark: "#077280"
+  },
+  [Theme.BUTTON_TERTIARY_DISABLED_FILL]: {
+    light: "#9ADFE8",
+    dark: "#003F48"
+  },
+  [Theme.BUTTON_SECONDARY_DEFAULT_STROKE]: {
+    light: "#0F1B2D",
+    dark: "#FFFFFF"
+  },
+  [Theme.BUTTON_SECONDARY_DISABLED_STROKE]: {
+    light: "#CFD1D5",
+    dark: "#878D96"
+  },
+  [Theme.BUTTON_QUATERNARY_DEFAULT_STROKE]: {
+    light: "#009DB3",
+    dark: "#009DB3"
+  },
+  [Theme.BUTTON_QUATERNARY_DISABLED_STROKE]: {
+    light: "#9ADFE8",
+    dark: "#003F48"
   },
   [Theme.NOTIFICATIONS_INFO]: {
-    light: "rgba(0, 10, 40, 0.20)",
+    light: "rgba(39, 50, 66, 0.20)",
     dark: "rgba(255, 255, 255, 0.30)"
   },
   [Theme.NOTIFICATIONS_HIGHLIGHT]: {
-    light: "#0072B5",
-    dark: "#2CD8FD"
+    light: "#23DBB5",
+    dark: "#80EFD8"
   },
   [Theme.BLUR_20]: {
     light: "rgba(255, 255, 255, 0.20)",
@@ -825,7 +903,7 @@ const theme = {
     dark: "rgba(0, 0, 0, 0.25)"
   },
   [Theme.STROKE_PRIMARY]: {
-    dark: DHRE_DEEP_SPACE_BLUE[100],
+    dark: "#FFFFFF",
     light: DHRE_DEEP_SPACE_BLUE[950]
   },
   [Theme.STROKE_SECONDARY]: {
@@ -833,12 +911,12 @@ const theme = {
     light: DHRE_DEEP_SPACE_BLUE[400]
   },
   [Theme.STROKE_TERTIARY]: {
-    dark: "#334671",
-    light: "#BFC7DB"
+    dark: DHRE_DEEP_SPACE_BLUE[700],
+    light: DHRE_DEEP_SPACE_BLUE[300]
   },
   [Theme.STROKE_INVERTED]: {
     dark: DHRE_DEEP_SPACE_BLUE[950],
-    light: DHRE_DEEP_SPACE_BLUE[300]
+    light: "#FFFFFF"
   },
   [Theme.STROKE_ERROR]: {
     dark: DHRE_RED_ERROR[200],
@@ -856,26 +934,59 @@ const theme = {
     dark: DHRE_ORANGE_WARNING[200],
     light: DHRE_ORANGE_WARNING[300]
   },
+  [Theme.STROKE_DISABLED_LIGHT]: {
+    dark: DHRE_DEEP_SPACE_BLUE[400],
+    light: DHRE_DEEP_SPACE_BLUE[600]
+  },
   [Theme.STROKE_DISABLED_DARK]: {
     dark: DHRE_DEEP_SPACE_BLUE[700],
-    light: DHRE_DEEP_SPACE_BLUE[500]
+    light: DHRE_DEEP_SPACE_BLUE[300]
   },
   [Theme.STROKE_DISABLED_DARK2]: {
     dark: DHRE_DEEP_SPACE_BLUE[800],
     light: DHRE_DEEP_SPACE_BLUE[200]
   },
   [Theme.STROKE_ACTIVE]: {
-    dark: "#009db3",
-    light: "#009db3"
-    // light-theme value pending DHDS Figma spec
+    dark: "#009DB3",
+    light: "#009DB3"
   },
   [Theme.STROKE_DISABLED_SELECTED]: {
-    dark: "#003f48",
+    dark: "#003F48",
     light: "#9ADFE8"
   },
   [Theme.SHADOW_10]: {
     dark: "rgba(255, 255, 255, 0.20)",
     light: "rgba(0, 0, 0, 0.10)"
+  },
+  [Theme.SHADOW_5]: {
+    dark: "rgba(255, 255, 255, 0.05)",
+    light: "rgba(0, 0, 0, 0.05)"
+  },
+  [Theme.SHADOW_20]: {
+    dark: "rgba(255, 255, 255, 0.20)",
+    light: "rgba(0, 0, 0, 0.20)"
+  },
+  [Theme.SHADOW_25]: {
+    dark: "rgba(255, 255, 255, 0.25)",
+    light: "rgba(0, 0, 0, 0.25)"
+  },
+  [Theme.SHADOW_HOVER_10]: {
+    dark: "rgba(0, 157, 179, 0.10)",
+    light: "rgba(88, 195, 209, 0.10)"
+  },
+  [Theme.SHADOW_HOVER_20]: {
+    dark: "rgba(0, 157, 179, 0.20)",
+    light: "rgba(88, 195, 209, 0.20)"
+  },
+  [Theme.SHADOW_HOVER_40]: {
+    dark: "rgba(0, 157, 179, 0.40)",
+    light: "rgba(88, 195, 209, 0.40)"
+  },
+  // Figma: effects/dh-shadow/5, "Shadow/Soft/Lightest" (dropdown/menu surfaces).
+  [Theme.SHADOW_SOFT_LIGHTEST]: {
+    dark: "rgba(255, 255, 255, 0.05)",
+    light: "rgba(0, 10, 40, 0.05)"
+    // light-theme value pending DHDS Figma spec
   }
 };
 
@@ -1222,12 +1333,22 @@ const DHRE_IMAGE_SIZE = {
   CARD_MD: moderateScale(200)
 };
 
+const DHRE_STROKE = {
+  NONE: 0,
+  THIN: 1,
+  // default dividers, input borders
+  MEDIUM: 2,
+  // focused state, selected borders
+  THICK: 4
+  // emphasis borders, active indicators
+};
+
 const chipStyles = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    borderWidth: 1,
+    borderWidth: DHRE_STROKE.THIN,
     borderRadius: DHRE_RADIUS.PILL,
     gap: DHRE_PADDING.SM
   },
@@ -1258,24 +1379,26 @@ const getSizeStyle = (size) => size === "large" ? chipStyles.sizeLarge : chipSty
 function resolveContainerColors(themeColors, selected, disabled) {
   if (disabled) {
     return {
-      backgroundColor: selected ? themeColors[Theme.SURFACE_TERTIARY_TRANSPARENT] : themeColors[Theme.SURFACE_PRIMARY_TRANSPARENT],
-      borderColor: themeColors[Theme.CONTENT_DISABLE_DARK]
+      backgroundColor: selected ? themeColors[Theme.SURFACE_DISABLE_SELECTED] : themeColors[Theme.SURFACE_PRIMARY_CARDS],
+      borderColor: themeColors[Theme.CONTENT_TERTIARY]
     };
   }
   if (selected) {
     return {
-      backgroundColor: themeColors[Theme.SURFACE_INVERTED],
-      borderColor: themeColors[Theme.STROKE_SECONDARY]
+      backgroundColor: themeColors[Theme.SURFACE_HIGHLIGHT],
+      borderColor: "transparent"
     };
   }
   return {
-    backgroundColor: themeColors[Theme.SURFACE_SECONDARY],
-    borderColor: themeColors[Theme.STROKE_TERTIARY]
+    backgroundColor: themeColors[Theme.SURFACE_PRIMARY],
+    borderColor: themeColors[Theme.STROKE_PRIMARY]
   };
 }
 function resolveContentColor(themeColors, selected, disabled) {
-  if (disabled) return themeColors[Theme.CONTENT_DISABLE_DARK];
-  if (selected) return themeColors[Theme.CONTENT_INVERTED];
+  if (disabled) {
+    return selected ? themeColors[Theme.CONTENT_DISABLE_LIGHT] : themeColors[Theme.CONTENT_DISABLE_DARK];
+  }
+  if (selected) return themeColors[Theme.CONTENT_STATIC];
   return themeColors[Theme.CONTENT_PRIMARY];
 }
 const Chip = ({
@@ -1717,7 +1840,7 @@ const styles$w = StyleSheet.create({
     alignSelf: "center"
   }
 });
-const BUTTON_COLORS = {
+({
   // Backgrounds (legacy — no longer used by Button.tsx; resolved via theme)
   /** @deprecated resolved via Theme.BUTTON_DEFAULT_FILL in Button.tsx */
   PRIMARY_DEFAULT_BG: DHRE_COLORS_TEXT.DH_WHITE,
@@ -1740,19 +1863,14 @@ const BUTTON_COLORS = {
   /** @deprecated resolved via Theme.STROKE_DISABLED_DARK in Button.tsx */
   DISABLED_TEXT: DHRE_DEEP_SPACE_BLUE[500],
   // #6A7897 (dark mode)
-  // Borders — gradient tokens are STATIC (same in light and dark per DHDS spec)
-  /** --DH-Gradient/Stroke/Primary-button start → cyan */
-  GRADIENT_BORDER_START: DHRE_CYAN_HIGHLIGHT[300],
-  // #2CD8FD
-  /** --DH-Gradient/Stroke/Primary-button end → blue */
-  GRADIENT_BORDER_END: "#3590E1",
+  // Borders
   /** @deprecated resolved via Theme.BORDER_INVERTED in Button.tsx */
   SECONDARY_BORDER: DHRE_COLORS_TEXT.DH_WHITE,
   // #FFFFFF (dark mode)
   /** @deprecated resolved via Theme.STROKE_DISABLED_DARK in Button.tsx */
   DISABLED_BORDER: DHRE_DEEP_SPACE_BLUE[500]
   // #6A7897 (dark mode)
-};
+});
 const pressableBase = {
   flexDirection: "row",
   alignItems: "center",
@@ -1761,7 +1879,6 @@ const pressableBase = {
   overflow: "hidden"
 };
 const BUTTON_SIZE_STYLES = StyleSheet.create({
-  // ── Large ──────────────────────────────────────────────────────────────────
   largePressable: {
     ...pressableBase,
     minHeight: verticalScale(48),
@@ -1769,13 +1886,6 @@ const BUTTON_SIZE_STYLES = StyleSheet.create({
     paddingVertical: verticalScale(12),
     gap: moderateScale(8)
   },
-  largeGradientWrapper: {
-    borderRadius: DHRE_RADIUS.PILL,
-    padding: 1,
-    overflow: "hidden",
-    height: verticalScale(48) + 2
-  },
-  // ── Medium ─────────────────────────────────────────────────────────────────
   mediumPressable: {
     ...pressableBase,
     minHeight: verticalScale(40),
@@ -1783,25 +1893,12 @@ const BUTTON_SIZE_STYLES = StyleSheet.create({
     paddingVertical: verticalScale(8),
     gap: moderateScale(8)
   },
-  mediumGradientWrapper: {
-    borderRadius: DHRE_RADIUS.PILL,
-    padding: 1,
-    overflow: "hidden",
-    height: verticalScale(40) + 2
-  },
-  // ── Small ──────────────────────────────────────────────────────────────────
   smallPressable: {
     ...pressableBase,
     minHeight: verticalScale(32),
     paddingHorizontal: moderateScale(20),
     paddingVertical: verticalScale(8),
     gap: moderateScale(8)
-  },
-  smallGradientWrapper: {
-    borderRadius: DHRE_RADIUS.PILL,
-    padding: 1,
-    overflow: "hidden",
-    height: verticalScale(32) + 2
   }
 });
 const LINK_SIZE_STYLES = StyleSheet.create({
@@ -1831,28 +1928,23 @@ const LINK_TEXT_VARIANT_MAP = {
   // 12 px / 16 px lh
 };
 const SIZE_STYLE_MAP = {
-  large: {
-    pressable: BUTTON_SIZE_STYLES.largePressable,
-    gradientWrapper: BUTTON_SIZE_STYLES.largeGradientWrapper
-  },
-  medium: {
-    pressable: BUTTON_SIZE_STYLES.mediumPressable,
-    gradientWrapper: BUTTON_SIZE_STYLES.mediumGradientWrapper
-  },
-  small: {
-    pressable: BUTTON_SIZE_STYLES.smallPressable,
-    gradientWrapper: BUTTON_SIZE_STYLES.smallGradientWrapper
-  }
+  large: BUTTON_SIZE_STYLES.largePressable,
+  medium: BUTTON_SIZE_STYLES.mediumPressable,
+  small: BUTTON_SIZE_STYLES.smallPressable
 };
 function resolveTextThemeKey(variant, disabled) {
   if (disabled) {
-    return Theme.STROKE_DISABLED_DARK;
+    return variant === "tertiary" || variant === "quaternary" ? Theme.CONTENT_DISABLE_DARK : Theme.STROKE_DISABLED_DARK;
   }
   switch (variant) {
     case "primary":
       return Theme.CONTENT_INVERTED;
     case "secondary":
       return Theme.CONTENT_PRIMARY;
+    case "tertiary":
+      return Theme.CONTENT_STATIC;
+    case "quaternary":
+      return Theme.CONTENT_PRIMARY;
     case "link":
       return Theme.LINK;
     default:
@@ -1862,9 +1954,7 @@ function resolveTextThemeKey(variant, disabled) {
 function buildPlainContainerStyle(variant, disabled, disabledColor, theme) {
   if (variant === "primary") {
     return {
-      backgroundColor: disabledColor ?? theme[Theme.BUTTON_DISABLED_FILL],
-      borderWidth: 1,
-      borderColor: theme[Theme.STROKE_DISABLED_DARK]
+      backgroundColor: disabled ? disabledColor ?? theme[Theme.BUTTON_DISABLED_FILL] : theme[Theme.BUTTON_DEFAULT_FILL]
     };
   }
   if (variant === "secondary") {
@@ -1878,6 +1968,18 @@ function buildPlainContainerStyle(variant, disabled, disabledColor, theme) {
       borderColor: theme[Theme.BORDER_INVERTED]
     };
   }
+  if (variant === "tertiary") {
+    return {
+      backgroundColor: disabled ? disabledColor ?? theme[Theme.BUTTON_TERTIARY_DISABLED_FILL] : theme[Theme.BUTTON_TERTIARY_DEFAULT_FILL]
+    };
+  }
+  if (variant === "quaternary") {
+    return {
+      backgroundColor: "transparent",
+      borderWidth: 1,
+      borderColor: disabled ? theme[Theme.BUTTON_QUATERNARY_DISABLED_STROKE] : theme[Theme.BUTTON_QUATERNARY_DEFAULT_STROKE]
+    };
+  }
   return {};
 }
 function resolveSpinnerColor(variant, theme) {
@@ -1886,6 +1988,10 @@ function resolveSpinnerColor(variant, theme) {
       return theme[Theme.CONTENT_INVERTED];
     case "secondary":
       return theme[Theme.CONTENT_PRIMARY];
+    case "tertiary":
+      return theme[Theme.CONTENT_STATIC];
+    case "quaternary":
+      return theme[Theme.CONTENT_PRIMARY];
     case "link":
       return theme[Theme.LINK];
     default:
@@ -1913,11 +2019,10 @@ const CustomButton = ({
   size = "large"
 }) => {
   const { theme } = useTheme();
-  const isPrimary = variant === "primary";
   const isLink = variant === "link";
   const spinnerColor = loaderColor ?? resolveSpinnerColor(variant, theme);
   const iconSize = isLink && size === "small" ? moderateScale(16) : moderateScale(20);
-  const { pressable: pressableStyle, gradientWrapper: gradientWrapperStyle } = SIZE_STYLE_MAP[size];
+  const pressableStyle = SIZE_STYLE_MAP[size];
   const defaultTextVariant = isLink ? LINK_TEXT_VARIANT_MAP[size] : size === "small" ? FontStyle.BODY2_LIGHT : FontStyle.BODY2_MEDIUM;
   const textThemeKey = resolveTextThemeKey(variant, disabled);
   const effectiveTextColor = titleColor ?? textThemeKey;
@@ -1939,32 +2044,6 @@ const CustomButton = ({
     height: iconSize,
     style: rightIconStyle
   }));
-  if (isPrimary && !disabled) {
-    return /* @__PURE__ */ React.createElement(View, { style: [gradientWrapperStyle, containerStyle] }, /* @__PURE__ */ React.createElement(
-      LinearGradient$1,
-      {
-        colors: [
-          BUTTON_COLORS.GRADIENT_BORDER_START,
-          BUTTON_COLORS.GRADIENT_BORDER_END
-        ],
-        start: { x: 0.5, y: 0 },
-        end: { x: 0.5, y: 1 },
-        style: StyleSheet.absoluteFillObject
-      }
-    ), /* @__PURE__ */ React.createElement(
-      Pressable,
-      {
-        testID,
-        style: [
-          pressableStyle,
-          { flex: 1, backgroundColor: theme[Theme.BUTTON_DEFAULT_FILL] }
-        ],
-        onPress,
-        disabled: isLoading
-      },
-      buttonContent
-    ));
-  }
   if (isLink) {
     return /* @__PURE__ */ React.createElement(
       Pressable,
@@ -3005,8 +3084,8 @@ const Tabs = ({
       key: id,
       style: {
         ...styles$n.button,
-        backgroundColor: isSelected ? theme.SURFACE_INVERTED : theme.SURFACE_SECONDARY,
-        borderColor: isSelected ? theme.SURFACE_INVERTED : theme.STROKE_TERTIARY
+        backgroundColor: isSelected ? theme.SURFACE_HIGHLIGHT : theme.SURFACE_PRIMARY,
+        borderColor: isSelected ? theme.SURFACE_HIGHLIGHT : theme.STROKE_PRIMARY
       },
       onPress: () => handlePress(id)
     },
@@ -3016,7 +3095,7 @@ const Tabs = ({
         variant: FontStyle.BODY1_MEDIUM,
         style: {
           ...styles$n.textStyle,
-          color: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_PRIMARY
+          color: isSelected ? theme.CONTENT_STATIC : theme.CONTENT_PRIMARY
         },
         text: title
       }
@@ -3684,6 +3763,7 @@ const ICON_SIZE = DHRE_SPACING.LG;
 const HeaderIcon = ({ config }) => /* @__PURE__ */ React.createElement(Pressable, { onPress: config.onPress, testID: config.testId }, React.cloneElement(config.icon, { width: ICON_SIZE, height: ICON_SIZE }));
 const CustomHeader = ({
   title,
+  titleColor,
   testId = "CUSTOM-HEADER",
   leftIcon,
   titleSuffixIcon,
@@ -3695,7 +3775,7 @@ const CustomHeader = ({
     {
       variant: "BODY1_MEDIUM",
       text: title,
-      style: { color: theme.CONTENT_PRIMARY }
+      style: { color: titleColor ?? theme.CONTENT_PRIMARY }
     }
   ), titleSuffixIcon && React.cloneElement(titleSuffixIcon, {
     width: ICON_SIZE,
@@ -3873,6 +3953,12 @@ const TAG_SUCCESS_GRADIENT_COLORS = [
 const TAG_SUCCESS_GRADIENT_BASE_COLOR = DHRE_DEEP_SPACE_BLUE[900];
 const TAG_SUCCESS_GRADIENT_START = { x: 0, y: 0 };
 const TAG_SUCCESS_GRADIENT_END = { x: 1, y: 0 };
+const ERROR_GRADIENT_COLORS = [
+  DHRE_RED_ERROR[200],
+  DHRE_RED_ERROR[150]
+];
+const ERROR_GRADIENT_START = { x: 0, y: 0 };
+const ERROR_GRADIENT_END = { x: 0, y: 1 };
 
 const styles$f = StyleSheet.create({
   container: {
@@ -10799,15 +10885,7 @@ const styles$b = StyleSheet.create({
     gap: horizontalScale(24)
   },
   applyButton: {
-    marginTop: verticalScale(16),
-    height: verticalScale(48),
-    minHeight: verticalScale(48),
-    paddingHorizontal: horizontalScale(24),
-    paddingVertical: verticalScale(12),
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: moderateScale(100),
-    borderWidth: 1
+    marginTop: verticalScale(16)
   }
 });
 
@@ -10871,11 +10949,9 @@ const DateRangePicker = (props) => {
     if (startDate) {
       markedDates[startDate] = {
         startingDay: true,
-        textColor: theme.CONTENT_INVERTED,
+        textColor: theme.CONTENT_PRIMARY,
         customContainerStyle: {
-          backgroundColor: theme.SURFACE_INVERTED,
-          borderWidth: 1,
-          borderColor: theme.NOTIFICATIONS_HIGHLIGHT,
+          backgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           borderRadius: 200,
           width: moderateScale(36),
           height: moderateScale(36),
@@ -10888,11 +10964,9 @@ const DateRangePicker = (props) => {
       markedDates[endDate] = {
         endingDay: true,
         color: theme.SURFACE_PRIMARY_TRANSPARENT,
-        textColor: theme.CONTENT_INVERTED,
+        textColor: theme.CONTENT_PRIMARY,
         customContainerStyle: {
-          backgroundColor: theme.SURFACE_INVERTED,
-          borderWidth: 1,
-          borderColor: theme.NOTIFICATIONS_HIGHLIGHT,
+          backgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           borderRadius: 200,
           width: moderateScale(36),
           height: moderateScale(36),
@@ -10903,11 +10977,9 @@ const DateRangePicker = (props) => {
       markedDates[startDate] = {
         startingDay: true,
         color: theme.SURFACE_PRIMARY_TRANSPARENT,
-        textColor: theme.CONTENT_INVERTED,
+        textColor: theme.CONTENT_PRIMARY,
         customContainerStyle: {
-          backgroundColor: theme.SURFACE_INVERTED,
-          borderWidth: 1,
-          borderColor: theme.NOTIFICATIONS_HIGHLIGHT,
+          backgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           borderRadius: 200,
           width: moderateScale(36),
           height: moderateScale(36),
@@ -10965,10 +11037,7 @@ const DateRangePicker = (props) => {
   return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
     View,
     {
-      style: [
-        styles$b.calendarCard,
-        { backgroundColor: theme.SURFACE_SECONDARY }
-      ]
+      style: [styles$b.calendarCard, { backgroundColor: theme.SURFACE_PRIMARY }]
     },
     /* @__PURE__ */ React.createElement(
       Calendar,
@@ -10984,7 +11053,8 @@ const DateRangePicker = (props) => {
           dayTextColor: theme.CONTENT_PRIMARY,
           textDisabledColor: theme.CONTENT_DISABLE_DARK,
           todayTextColor: theme.CONTENT_PRIMARY,
-          textSectionTitleColor: theme.CONTENT_SECONDRY,
+          todayBackgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
+          textSectionTitleColor: theme.CONTENT_DISABLE_LIGHT,
           textDayFontSize: 16,
           textDayFontWeight: "500",
           textDayHeaderFontSize: 11,
@@ -11023,7 +11093,7 @@ const DateRangePicker = (props) => {
               textTransform: "uppercase",
               fontSize: 11,
               fontWeight: "300",
-              color: theme.CONTENT_SECONDRY
+              color: theme.CONTENT_DISABLE_LIGHT
             }
           }
         },
@@ -11677,9 +11747,8 @@ const CommonTextInput = (props) => {
   const isDisabled = !editable;
   const isError = !!(errorMessage?.length || onlyErrorBorderLabel);
   const hasValue = !!value?.length;
-  const currentBorderColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.STROKE_TERTIARY] : isFocused || hasValue && !disableBorder ? theme[Theme.STROKE_PRIMARY] : theme[Theme.STROKE_SECONDARY];
+  const currentBorderColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.STROKE_TERTIARY] : isFocused || hasValue && !disableBorder ? theme[Theme.STROKE_ACTIVE] : theme[Theme.STROKE_SECONDARY];
   const borderWidth = isFocused && !isDisabled ? 2 : 1;
-  const containerBackground = isDisabled ? theme[Theme.SURFACE_PRIMARY] : theme[Theme.SURFACE_TERTIARY_TRANSPARENT];
   const inputTextColor = isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_PRIMARY];
   const placeholderColor = theme[Theme.CONTENT_SECONDRY];
   const labelColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_PRIMARY];
@@ -11697,7 +11766,7 @@ const CommonTextInput = (props) => {
         ...styles$7.outlineStyle,
         borderColor: currentBorderColor,
         borderWidth,
-        backgroundColor: containerBackground
+        backgroundColor: theme[Theme.SURFACE_PRIMARY]
       },
       label,
       value,
@@ -11839,12 +11908,12 @@ const CustomDropdown = (props) => {
   const [isFocus, setIsFocus] = useState(false);
   const hasValue = Boolean(value && value.length > 0);
   const isError = Boolean(errorMessage && errorMessage.length > 0);
-  const fieldBorderColor = disable ? theme.STROKE_TERTIARY : isError ? theme.STROKE_ERROR : isFocus || hasValue ? theme.STROKE_PRIMARY : theme.STROKE_TERTIARY;
+  const fieldBorderColor = disable ? theme.STROKE_TERTIARY : isError ? theme.STROKE_ERROR : isFocus || hasValue ? theme.STROKE_ACTIVE : theme.STROKE_TERTIARY;
   const fieldBorderWidth = isFocus ? 2 : 1;
   const valueTextColor = disable ? theme.CONTENT_TERTIARY : hasValue ? theme.CONTENT_PRIMARY : theme.CONTENT_SECONDRY;
   const helperColor = isError ? theme.ERROR : theme.CONTENT_SECONDRY;
   const helperMessage = errorMessage || helperText;
-  const fieldBackground = theme.SURFACE_TERTIARY_TRANSPARENT;
+  const fieldBackground = theme.SURFACE_PRIMARY;
   const labelColor = theme.CONTENT_PRIMARY;
   const renderLabel = () => {
     if (value || isFocus) {
@@ -11877,19 +11946,34 @@ const CustomDropdown = (props) => {
   };
   const renderItem = (item) => {
     const isSelected = item[valueField] === value;
-    return /* @__PURE__ */ React.createElement(View, { style: [styles$6.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React.createElement(
-      Text,
+    return /* @__PURE__ */ React.createElement(
+      View,
       {
         style: [
-          styles$6.itemText,
-          FONT_STYLES[FontStyle.BODY2_LIGHT],
-          { color: theme.CONTENT_PRIMARY },
-          itemTextStyle,
-          isSelected && selectedItemTextStyle
+          styles$6.itemContainer,
+          isSelected && {
+            backgroundColor: theme.SURFACE_INVERTED,
+            borderRadius: DHRE_RADIUS_BASE.RADIUS_8
+          },
+          itemContainerStyle
         ]
       },
-      item[labelField]
-    ));
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [
+            styles$6.itemText,
+            FONT_STYLES[FontStyle.BODY1_MEDIUM],
+            {
+              color: isSelected ? theme.CONTENT_INVERTED : theme.CONTENT_PRIMARY
+            },
+            itemTextStyle,
+            isSelected && selectedItemTextStyle
+          ]
+        },
+        item[labelField]
+      )
+    );
   };
   return /* @__PURE__ */ React.createElement(View, { style: [styles$6.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
     Dropdown,
@@ -11942,7 +12026,13 @@ const CustomDropdown = (props) => {
           backgroundColor: theme.SURFACE_SECONDARY,
           borderColor: theme.STROKE_TERTIARY,
           borderWidth: 1,
-          borderRadius: DHRE_RADIUS_BASE.RADIUS_8
+          borderRadius: DHRE_RADIUS_BASE.RADIUS_8,
+          padding: DHRE_PADDING_BASE.PADDING_16,
+          shadowColor: theme.SHADOW_SOFT_LIGHTEST,
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 1,
+          shadowRadius: 10,
+          elevation: 4
         },
         menuContainerStyle
       ],
@@ -12003,8 +12093,10 @@ const styles$6 = StyleSheet.create({
     maxHeight: verticalScale(150)
   },
   itemContainer: {
+    minHeight: verticalScale(48),
     paddingVertical: verticalScale(8),
-    paddingHorizontal: horizontalScale(12)
+    paddingHorizontal: horizontalScale(16),
+    justifyContent: "center"
   },
   itemText: {},
   helperText: {
@@ -12146,18 +12238,17 @@ const createStyles$2 = (theme) => StyleSheet.create({
     marginHorizontal: 8
   },
   selectedTagButton: {
-    backgroundColor: theme.SURFACE_INVERTED,
-    borderColor: theme.STROKE_SECONDARY,
-    borderWidth: 1
+    backgroundColor: theme.SURFACE_HIGHLIGHT,
+    borderWidth: 0
   },
   unselectedTagButton: {
-    backgroundColor: theme.SURFACE_SECONDARY,
-    borderColor: theme.STROKE_TERTIARY,
+    backgroundColor: theme.SURFACE_PRIMARY,
+    borderColor: theme.STROKE_PRIMARY,
     borderWidth: 1
   },
   closeButton: {
     marginLeft: 10,
-    color: theme.CONTENT_INVERTED,
+    color: theme.CONTENT_STATIC,
     alignSelf: "center"
   },
   circleViewAlignment: {
@@ -12196,7 +12287,7 @@ const TagsComponent = ({
     /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
-        textColor: selectedTag === item?.name ? Theme.CONTENT_INVERTED : Theme.CONTENT_PRIMARY,
+        textColor: selectedTag === item?.name ? Theme.CONTENT_STATIC : Theme.CONTENT_PRIMARY,
         variant: FontStyle.BODY3_LIGHT,
         text: item?.name
       }
@@ -12907,16 +12998,6 @@ var index$3 = withThemeProvider(
   CustomSlideButton
 );
 
-const DHRE_STROKE = {
-  NONE: 0,
-  THIN: 1,
-  // default dividers, input borders
-  MEDIUM: 2,
-  // focused state, selected borders
-  THICK: 4
-  // emphasis borders, active indicators
-};
-
 var AvatarSize = /* @__PURE__ */ ((AvatarSize2) => {
   AvatarSize2["SMALL"] = "small";
   AvatarSize2["MEDIUM"] = "medium";
@@ -13028,7 +13109,7 @@ const createStyles$1 = (size, theme) => {
       paddingHorizontal: size === AvatarSize.LARGE ? 24 : 12,
       borderRadius: 200,
       borderWidth: 2,
-      borderColor: theme.STROKE_INVERTED,
+      borderColor: theme.STROKE_DISABLED_LIGHT,
       backgroundColor: theme.SURFACE_PRIMARY_CARDS,
       justifyContent: "center",
       alignItems: "center"
@@ -13586,7 +13667,8 @@ const RadioButtonGroup = ({
   selectedValue,
   size = "large",
   fontVariant,
-  radioColor
+  radioColor,
+  disabled = false
 }) => {
   const { theme } = useTheme();
   const styles = createStyles(theme, size, radioColor);
@@ -13602,6 +13684,7 @@ const RadioButtonGroup = ({
     TouchableOpacity,
     {
       key: item.value,
+      disabled,
       style: [styles.optionContainer, optionContainerStyle],
       onPress: () => handleSelect(item),
       activeOpacity: 1
@@ -13628,5 +13711,5 @@ const RadioButtonGroup = ({
 };
 var index = withThemeProvider(RadioButtonGroup);
 
-export { Accordion$1 as Accordion, AnimationWithImperativeApi as AnimationLoitte, index$2 as AppointmentCard, Avatar$1 as Avatar, AvatarSize, Background$1 as Background, BackgroundVariant, Badge$1 as Badge, BottomDrawer$1 as BottomDrawer, Button, Cards, category as Category, CheckBox, Chip$1 as Chip, ContactModel, CountryDropDown as CountryPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon$1 as CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar$1 as CustomProgressBar, CustomSearchBar$1 as CustomSearchBar, index$3 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_AVATAR_SIZE, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_COMPONENT_HEIGHT, DHRE_CONFIRMATION_BASE_GRADIENT, DHRE_CONFIRMATION_ERROR_GRADIENT, DHRE_CORE_BLUE, DHRE_CYAN_HIGHLIGHT, DHRE_DEEP_SPACE_BLUE, DHRE_DEFAULT, DHRE_ICON_SIZE, DHRE_IMAGE_SIZE, DHRE_INFO_BLUE, DHRE_ORANGE_WARNING, DHRE_PADDING, DHRE_PADDING_BASE, DHRE_RADIUS, DHRE_RADIUS_BASE, DHRE_RED_ERROR, DHRE_SPACING, DHRE_SPACING_BASE, DHRE_STROKE, DHRE_SUCCESS_GREEN, DHRE_WHITE, DateRangePicker$1 as DateRangePicker, DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, GRADIENT_COLORS_ERROR, GRADIENT_COLORS_PENDING, GRADIENT_COLORS_SUCCESS, Line, Loader$1 as Loader, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, OUTLINED_BORDER_WIDTH, OUTLINED_GRADIENT_COLORS, OUTLINED_GRADIENT_END, OUTLINED_GRADIENT_START, OurOffices as OurOfficesButton, PdfView, PopUp, index$1 as PropertyDetails, index as RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$4 as Stepper, SwipableList$1 as SwipableList, TAG_SUCCESS_GRADIENT_BASE_COLOR, TAG_SUCCESS_GRADIENT_COLORS, TAG_SUCCESS_GRADIENT_END, TAG_SUCCESS_GRADIENT_START, Tabs$1 as Tabs, Tags, TextDirectType, Textinput as TextInput, Theme, ToastWithProvider as Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { Accordion$1 as Accordion, AnimationWithImperativeApi as AnimationLoitte, index$2 as AppointmentCard, Avatar$1 as Avatar, AvatarSize, Background$1 as Background, BackgroundVariant, Badge$1 as Badge, BottomDrawer$1 as BottomDrawer, Button, Cards, category as Category, CheckBox, Chip$1 as Chip, ContactModel, CountryDropDown as CountryPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon$1 as CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar$1 as CustomProgressBar, CustomSearchBar$1 as CustomSearchBar, index$3 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_AVATAR_SIZE, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_COMPONENT_HEIGHT, DHRE_CONFIRMATION_BASE_GRADIENT, DHRE_CONFIRMATION_ERROR_GRADIENT, DHRE_CORE_BLUE, DHRE_CORE_TEAL, DHRE_CYAN_HIGHLIGHT, DHRE_DEEP_SPACE_BLUE, DHRE_DEFAULT, DHRE_ICON_SIZE, DHRE_IMAGE_SIZE, DHRE_INFO_BLUE, DHRE_ORANGE_WARNING, DHRE_PADDING, DHRE_PADDING_BASE, DHRE_RADIUS, DHRE_RADIUS_BASE, DHRE_RED_ERROR, DHRE_SPACING, DHRE_SPACING_BASE, DHRE_STROKE, DHRE_SUCCESS_GREEN, DHRE_WHITE, DateRangePicker$1 as DateRangePicker, DropDown, ERROR_GRADIENT_COLORS, ERROR_GRADIENT_END, ERROR_GRADIENT_START, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, GRADIENT_COLORS_ERROR, GRADIENT_COLORS_PENDING, GRADIENT_COLORS_SUCCESS, Line, Loader$1 as Loader, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, OUTLINED_BORDER_WIDTH, OUTLINED_GRADIENT_COLORS, OUTLINED_GRADIENT_END, OUTLINED_GRADIENT_START, OurOffices as OurOfficesButton, PdfView, PopUp, index$1 as PropertyDetails, index as RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$4 as Stepper, SwipableList$1 as SwipableList, TAG_SUCCESS_GRADIENT_BASE_COLOR, TAG_SUCCESS_GRADIENT_COLORS, TAG_SUCCESS_GRADIENT_END, TAG_SUCCESS_GRADIENT_START, Tabs$1 as Tabs, Tags, TextDirectType, Textinput as TextInput, Theme, ToastWithProvider as Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
 //# sourceMappingURL=index.mjs.map