dhre-ui-kit 3.0.0 → 3.0.1

package/lib/index.mjs

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState, useEffect, useRef, useCallback, useMemo, memo } from 'react';
 import { useSelector } from 'react-redux';
 import { Dimensions, StyleSheet, Text, Pressable, View, Platform, KeyboardAvoidingView, ActivityIndicator, TextInput, ScrollView, Animated, FlatList, Easing, TouchableOpacity, Modal as Modal$1, Alert, Linking, I18nManager, PanResponder, Image } from 'react-native';
-import Svg, { Defs, LinearGradient, Stop, RadialGradient, Rect, Circle } from 'react-native-svg';
+import Svg, { Defs, LinearGradient, Stop, RadialGradient, Rect, Circle, Svg as Svg$1, Path } from 'react-native-svg';
 import Modal from 'react-native-modal';
 import Clipboard from '@react-native-clipboard/clipboard';
 import LinearGradient$1 from 'react-native-linear-gradient';
@@ -186,6 +186,7 @@ var Theme = /* @__PURE__ */ ((Theme2) => {
   Theme2["STROKE_INFO"] = "STROKE_INFO";
   Theme2["STROKE_DISABLED_DARK"] = "STROKE_DISABLED_DARK";
   Theme2["STROKE_DISABLED_DARK2"] = "STROKE_DISABLED_DARK2";
+  Theme2["STROKE_ACTIVE"] = "STROKE_ACTIVE";
   return Theme2;
 })(Theme || {});
 
@@ -449,6 +450,14 @@ const DHRE_RED_ERROR = {
   TRANSPARENT_400_60: "rgba(235, 5, 66, 0.60)",
   TRANSPARENT_400_10: "rgba(235, 5, 66, 0.10)"
 };
+const DHRE_CONFIRMATION_ERROR_GRADIENT = {
+  light: ["#F0809E", "#FFFFFF"],
+  dark: ["#EB0542", "#000A28"]
+};
+const DHRE_CONFIRMATION_BASE_GRADIENT = {
+  light: ["rgba(165, 233, 255, 0)", "#52C5E8"],
+  dark: ["rgba(165, 233, 255, 0)", "#279DC1"]
+};
 
 const theme = {
   [Theme.SURFACE_PRIMARY]: {
@@ -529,7 +538,7 @@ const theme = {
   },
   [Theme.SURFACE_SUCCESS]: {
     light: "#89C798",
-    dark: "#347243"
+    dark: "#4EAB65"
   },
   [Theme.SURFACE_SUCCESS_TRANSPARENT]: {
     light: "rgba(137, 199, 152, 0.10)",
@@ -537,7 +546,7 @@ const theme = {
   },
   [Theme.SURFACE_INFO]: {
     light: "#52C5E8",
-    dark: "#07556C"
+    dark: "#279DC1"
   },
   [Theme.SURFACE_INFO_TRANSPARENT]: {
     light: "rgba(233, 248, 255, 0.35)",
@@ -552,8 +561,8 @@ const theme = {
     dark: "rgba(238, 170, 106, 0.60)"
   },
   [Theme.SURFACE_ERROR]: {
-    light: "#FFF2F5",
-    dark: "#9D032C"
+    light: "#F0809E",
+    dark: "#EB0542"
   },
   [Theme.SURFACE_ERROR_TRANSPARENT]: {
     light: "rgba(235, 5, 66, 0.10)",
@@ -568,8 +577,8 @@ const theme = {
     dark: "#BFC7DB"
   },
   [Theme.CONTENT_TERTIARY]: {
-    light: "#4D5F86",
-    dark: "#8994AF"
+    light: "#6F7681",
+    dark: "#9FA4AB"
   },
   [Theme.CONTENT_SECONDARY_TEXT]: {
     light: "#686868",
@@ -786,6 +795,11 @@ const theme = {
   [Theme.STROKE_DISABLED_DARK2]: {
     dark: DHRE_DEEP_SPACE_BLUE[800],
     light: DHRE_DEEP_SPACE_BLUE[200]
+  },
+  [Theme.STROKE_ACTIVE]: {
+    dark: "#009db3",
+    light: "#009db3"
+    // light-theme value pending DHDS Figma spec
   }
 };
 
@@ -817,64 +831,65 @@ const horizontalScale = (size) => width / guidelineBaseWidth * size;
 const verticalScale = (size) => height / guidelineBaseHeight * size;
 const moderateScale = (size, factor = 0.5) => size + (horizontalScale(size) - size) * factor;
 
-const createFontStyle = (fontFamily, fontSize, lineHeight) => ({
+const createFontStyle = (fontFamily, fontSize, lineHeight, fontWeight) => ({
   fontSize: moderateScale(fontSize),
   lineHeight: verticalScale(lineHeight),
-  fontFamily
+  fontFamily,
+  fontWeight
 });
 const InterBold = "Inter-Bold";
 const InterLight = "Inter-Light";
 const InterMedium = "Inter-Medium";
 const FONT_STYLES = {
-  [FontStyle.H1_BOLD]: createFontStyle(InterBold, 48, 56),
-  [FontStyle.H2_BOLD]: createFontStyle(InterBold, 40, 48),
-  [FontStyle.H3_BOLD]: createFontStyle(InterBold, 32, 40),
-  [FontStyle.H4_BOLD]: createFontStyle(InterBold, 24, 32),
-  [FontStyle.H5_BOLD]: createFontStyle(InterBold, 20, 28),
-  [FontStyle.H6_BOLD]: createFontStyle(InterBold, 16, 20),
-  [FontStyle.H7_BOLD]: createFontStyle(InterBold, 20, 28),
-  [FontStyle.H8_BOLD]: createFontStyle(InterBold, 18, 25.2),
-  [FontStyle.H1_MEDIUM]: createFontStyle(InterMedium, 48, 56),
-  [FontStyle.H2_MEDIUM]: createFontStyle(InterMedium, 40, 48),
-  [FontStyle.H3_MEDIUM]: createFontStyle(InterMedium, 32, 40),
-  [FontStyle.H4_MEDIUM]: createFontStyle(InterMedium, 24, 32),
-  [FontStyle.H5_MEDIUM]: createFontStyle(InterMedium, 20, 28),
-  [FontStyle.H6_MEDIUM]: createFontStyle(InterMedium, 16, 20),
-  [FontStyle.H7_MEDIUM]: createFontStyle(InterMedium, 20, 28),
-  [FontStyle.H8_MEDIUM]: createFontStyle(InterMedium, 18, 25.2),
-  [FontStyle.H1_LIGHT]: createFontStyle(InterLight, 48, 56),
-  [FontStyle.H2_LIGHT]: createFontStyle(InterLight, 40, 48),
-  [FontStyle.H3_LIGHT]: createFontStyle(InterLight, 32, 40),
-  [FontStyle.H4_LIGHT]: createFontStyle(InterLight, 24, 32),
-  [FontStyle.H5_LIGHT]: createFontStyle(InterLight, 20, 28),
-  [FontStyle.H6_LIGHT]: createFontStyle(InterLight, 16, 20),
-  [FontStyle.H7_LIGHT]: createFontStyle(InterLight, 20, 28),
-  [FontStyle.H8_LIGHT]: createFontStyle(InterLight, 18, 25.2),
-  [FontStyle.H1_LINK]: createFontStyle(InterLight, 48, 56),
-  [FontStyle.H2_LINK]: createFontStyle(InterLight, 40, 48),
-  [FontStyle.H3_LINK]: createFontStyle(InterLight, 32, 40),
-  [FontStyle.H4_LINK]: createFontStyle(InterLight, 24, 32),
-  [FontStyle.H5_LINK]: createFontStyle(InterLight, 20, 28),
-  [FontStyle.H6_LINK]: createFontStyle(InterLight, 16, 20),
-  [FontStyle.H7_LINK]: createFontStyle(InterLight, 20, 28),
-  [FontStyle.H8_LINK]: createFontStyle(InterLight, 18, 25.2),
+  [FontStyle.H1_BOLD]: createFontStyle(InterBold, 48, 56, "700"),
+  [FontStyle.H2_BOLD]: createFontStyle(InterBold, 40, 48, "700"),
+  [FontStyle.H3_BOLD]: createFontStyle(InterBold, 32, 40, "700"),
+  [FontStyle.H4_BOLD]: createFontStyle(InterBold, 24, 32, "700"),
+  [FontStyle.H5_BOLD]: createFontStyle(InterBold, 20, 28, "700"),
+  [FontStyle.H6_BOLD]: createFontStyle(InterBold, 16, 20, "700"),
+  [FontStyle.H7_BOLD]: createFontStyle(InterBold, 20, 28, "700"),
+  [FontStyle.H8_BOLD]: createFontStyle(InterBold, 18, 25.2, "700"),
+  [FontStyle.H1_MEDIUM]: createFontStyle(InterMedium, 48, 56, "500"),
+  [FontStyle.H2_MEDIUM]: createFontStyle(InterMedium, 40, 48, "500"),
+  [FontStyle.H3_MEDIUM]: createFontStyle(InterMedium, 32, 40, "500"),
+  [FontStyle.H4_MEDIUM]: createFontStyle(InterMedium, 24, 32, "500"),
+  [FontStyle.H5_MEDIUM]: createFontStyle(InterMedium, 20, 28, "500"),
+  [FontStyle.H6_MEDIUM]: createFontStyle(InterMedium, 16, 20, "500"),
+  [FontStyle.H7_MEDIUM]: createFontStyle(InterMedium, 20, 28, "500"),
+  [FontStyle.H8_MEDIUM]: createFontStyle(InterMedium, 18, 25.2, "500"),
+  [FontStyle.H1_LIGHT]: createFontStyle(InterLight, 48, 56, "300"),
+  [FontStyle.H2_LIGHT]: createFontStyle(InterLight, 40, 48, "300"),
+  [FontStyle.H3_LIGHT]: createFontStyle(InterLight, 32, 40, "300"),
+  [FontStyle.H4_LIGHT]: createFontStyle(InterLight, 24, 32, "300"),
+  [FontStyle.H5_LIGHT]: createFontStyle(InterLight, 20, 28, "300"),
+  [FontStyle.H6_LIGHT]: createFontStyle(InterLight, 16, 20, "300"),
+  [FontStyle.H7_LIGHT]: createFontStyle(InterLight, 20, 28, "300"),
+  [FontStyle.H8_LIGHT]: createFontStyle(InterLight, 18, 25.2, "300"),
+  [FontStyle.H1_LINK]: createFontStyle(InterLight, 48, 56, "300"),
+  [FontStyle.H2_LINK]: createFontStyle(InterLight, 40, 48, "300"),
+  [FontStyle.H3_LINK]: createFontStyle(InterLight, 32, 40, "300"),
+  [FontStyle.H4_LINK]: createFontStyle(InterLight, 24, 32, "300"),
+  [FontStyle.H5_LINK]: createFontStyle(InterLight, 20, 28, "300"),
+  [FontStyle.H6_LINK]: createFontStyle(InterLight, 16, 20, "500"),
+  [FontStyle.H7_LINK]: createFontStyle(InterLight, 20, 28, "500"),
+  [FontStyle.H8_LINK]: createFontStyle(InterLight, 18, 25.2, "500"),
   // Lifestyle body styles
-  [FontStyle.BODY1_BOLD]: createFontStyle(InterBold, 16, 20),
-  [FontStyle.BODY2_BOLD]: createFontStyle(InterBold, 14, 18),
-  [FontStyle.BODY3_BOLD]: createFontStyle(InterBold, 12, 16),
-  [FontStyle.BODY4_BOLD]: createFontStyle(InterBold, 11, 12),
-  [FontStyle.BODY1_MEDIUM]: createFontStyle(InterMedium, 16, 20),
-  [FontStyle.BODY2_MEDIUM]: createFontStyle(InterMedium, 14, 18),
-  [FontStyle.BODY3_MEDIUM]: createFontStyle(InterMedium, 12, 16),
-  [FontStyle.BODY4_MEDIUM]: createFontStyle(InterMedium, 11, 12),
-  [FontStyle.BODY1_LIGHT]: createFontStyle(InterLight, 16, 20),
-  [FontStyle.BODY2_LIGHT]: createFontStyle(InterLight, 14, 18),
-  [FontStyle.BODY3_LIGHT]: createFontStyle(InterLight, 12, 16),
-  [FontStyle.BODY4_LIGHT]: createFontStyle(InterLight, 11, 12),
-  [FontStyle.BODY1_LINK]: createFontStyle(InterLight, 16, 20),
-  [FontStyle.BODY2_LINK]: createFontStyle(InterLight, 14, 18),
-  [FontStyle.BODY3_LINK]: createFontStyle(InterLight, 12, 16),
-  [FontStyle.BODY4_LINK]: createFontStyle(InterLight, 11, 12)
+  [FontStyle.BODY1_BOLD]: createFontStyle(InterBold, 16, 20, "700"),
+  [FontStyle.BODY2_BOLD]: createFontStyle(InterBold, 14, 18, "700"),
+  [FontStyle.BODY3_BOLD]: createFontStyle(InterBold, 12, 16, "700"),
+  [FontStyle.BODY4_BOLD]: createFontStyle(InterBold, 11, 12, "700"),
+  [FontStyle.BODY1_MEDIUM]: createFontStyle(InterMedium, 16, 20, "500"),
+  [FontStyle.BODY2_MEDIUM]: createFontStyle(InterMedium, 14, 18, "500"),
+  [FontStyle.BODY3_MEDIUM]: createFontStyle(InterMedium, 12, 16, "500"),
+  [FontStyle.BODY4_MEDIUM]: createFontStyle(InterMedium, 11, 12, "500"),
+  [FontStyle.BODY1_LIGHT]: createFontStyle(InterLight, 16, 20, "300"),
+  [FontStyle.BODY2_LIGHT]: createFontStyle(InterLight, 14, 18, "300"),
+  [FontStyle.BODY3_LIGHT]: createFontStyle(InterLight, 12, 16, "300"),
+  [FontStyle.BODY4_LIGHT]: createFontStyle(InterLight, 11, 12, "300"),
+  [FontStyle.BODY1_LINK]: createFontStyle(InterLight, 16, 20, "500"),
+  [FontStyle.BODY2_LINK]: createFontStyle(InterLight, 14, 18, "500"),
+  [FontStyle.BODY3_LINK]: createFontStyle(InterLight, 12, 16, "500"),
+  [FontStyle.BODY4_LINK]: createFontStyle(InterLight, 11, 12, "500")
 };
 
 const CustomTypography = ({
@@ -2363,7 +2378,7 @@ const CustomTextInput = ({
 const CustomTooltip = (props) => {
   const { triggerElement, contentStyle } = props;
   return /* @__PURE__ */ React.createElement(Tooltip, { ...props, contentStyle: [contentStyle, {
-    borderRadius: 0
+    borderRadius: DHRE_PADDING.MD
   }] }, triggerElement);
 };
 
@@ -3151,12 +3166,13 @@ const Accordion = ({
   return /* @__PURE__ */ React.createElement(
     View,
     {
-      style: [{
-        ...styles$l.container,
-        borderBottomColor: theme.SURFACE_PRIMARY_TRANSPARENT,
-        ...containerStyle,
-        borderRadius: 0
-      }],
+      style: [
+        {
+          ...styles$l.container,
+          borderRadius: 0,
+          ...containerStyle
+        }
+      ],
       testID: testId
     },
     /* @__PURE__ */ React.createElement(
@@ -3184,16 +3200,22 @@ const Accordion = ({
       }) : null
     ),
     optionalElement ? optionalElement() : null,
-    isOpen && /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$l.content, slideAnimation && { height: cardHeight }] }, /* @__PURE__ */ React.createElement(
-      View,
+    isOpen && /* @__PURE__ */ React.createElement(
+      Animated.View,
       {
-        ref: contentRef,
-        onLayout: (event) => {
-          setContentHeight(event.nativeEvent.layout.height);
-        }
+        style: [styles$l.content, slideAnimation && { height: cardHeight }]
       },
-      children
-    ))
+      /* @__PURE__ */ React.createElement(
+        View,
+        {
+          ref: contentRef,
+          onLayout: (event) => {
+            setContentHeight(event.nativeEvent.layout.height);
+          }
+        },
+        children
+      )
+    )
   );
 };
 var Accordion$1 = withThemeProvider(Accordion);
@@ -3823,7 +3845,8 @@ const CustomIcon = ({
   titleStyle,
   type,
   size = "large",
-  labelPosition
+  labelPosition,
+  outlinedBackgroundColor
 }) => {
   const { theme } = useTheme();
   const sizeSpec = size ? ICON_SIZE_SPEC[size] : null;
@@ -3892,7 +3915,7 @@ const CustomIcon = ({
             {
               width: innerSize,
               height: innerSize,
-              backgroundColor: theme[Theme.SURFACE_PRIMARY],
+              backgroundColor: outlinedBackgroundColor ?? theme[Theme.SURFACE_PRIMARY],
               padding
             }
           ]
@@ -10632,25 +10655,75 @@ const styles$d = StyleSheet.create({
 var ContactModel = withThemeProvider(ContactModal);
 
 const styles$c = StyleSheet.create({
+  // Outer card: wraps Calendar (which includes the custom header via renderHeader)
+  // and provides the dark-blue background + rounded corners.
+  calendarCard: {
+    borderRadius: moderateScale(12),
+    padding: moderateScale(16),
+    overflow: "hidden"
+  },
+  // Rendered via Calendar's renderHeader prop — sits inside the card layout tree.
+  // flex: 1 is required so justifyContent: 'space-between' works across the full row.
+  calendarHeader: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingBottom: verticalScale(16),
+    borderBottomWidth: 1
+  },
+  monthText: {
+    fontSize: 14,
+    fontWeight: "300",
+    lineHeight: 18
+  },
+  arrowsContainer: {
+    flexDirection: "row",
+    gap: horizontalScale(24)
+  },
   applyButton: {
-    marginTop: verticalScale(50),
-    paddingVertical: verticalScale(14),
+    marginTop: verticalScale(16),
+    height: verticalScale(48),
+    minHeight: verticalScale(48),
+    paddingHorizontal: horizontalScale(24),
+    paddingVertical: verticalScale(12),
     justifyContent: "center",
     alignItems: "center",
-    borderRadius: 0
-  },
-  applyButtonText: {
-    ...FONT_STYLES.L1_REGULAR
+    borderRadius: moderateScale(100),
+    borderWidth: 1
   }
 });
 
 const DateRangePicker = (props) => {
-  const { onButtonPress, btnTitle = "Apply" } = props;
+  const {
+    onButtonPress,
+    btnTitle = "Apply",
+    style: _consumerStyle,
+    theme: _consumerTheme,
+    ...calendarProps
+  } = props;
   const [selectedRange, setSelectedRange] = useState({
     startDate: "",
     endDate: ""
   });
-  const { theme, mode } = useTheme();
+  const [currentMonth, setCurrentMonth] = useState(/* @__PURE__ */ new Date());
+  const { theme } = useTheme();
+  const prevMonth = () => setCurrentMonth((prev) => {
+    const d = new Date(prev);
+    d.setMonth(d.getMonth() - 1);
+    return d;
+  });
+  const nextMonth = () => setCurrentMonth((prev) => {
+    const d = new Date(prev);
+    d.setMonth(d.getMonth() + 1);
+    return d;
+  });
+  const monthKey = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;
+  const currentDateStr = currentMonth.toISOString().split("T")[0];
+  const monthLabel = currentMonth.toLocaleDateString("en-US", {
+    month: "long",
+    year: "numeric"
+  });
   const onDayPress = (day) => {
     const { dateString } = day;
     const { startDate, endDate } = selectedRange;
@@ -10673,65 +10746,168 @@ const DateRangePicker = (props) => {
       while (start < end) {
         start.setDate(start.getDate() + 1);
         markedDates[start.toISOString().split("T")[0]] = {
-          color: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
-          textColor: NAKHEEL_DEFAULT.NAKHEEL_TEXT_COLOR
+          color: theme.SURFACE_PRIMARY_TRANSPARENT,
+          textColor: theme.CONTENT_PRIMARY
         };
       }
     }
     if (startDate) {
       markedDates[startDate] = {
         startingDay: true,
-        textColor: theme.SURFACE_SECONDARY,
-        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
-          backgroundColor: theme.SURFACE_INVERTED
+        textColor: theme.CONTENT_INVERTED,
+        customContainerStyle: {
+          backgroundColor: theme.SURFACE_INVERTED,
+          borderWidth: 1,
+          borderColor: theme.NOTIFICATIONS_HIGHLIGHT,
+          borderRadius: 200,
+          width: moderateScale(36),
+          height: moderateScale(36),
+          alignItems: "center",
+          justifyContent: "center"
         }
       };
     }
     if (endDate) {
       markedDates[endDate] = {
         endingDay: true,
-        color: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
-        textColor: theme.SURFACE_SECONDARY,
-        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
-          backgroundColor: theme.SURFACE_INVERTED
+        color: theme.SURFACE_PRIMARY_TRANSPARENT,
+        textColor: theme.CONTENT_INVERTED,
+        customContainerStyle: {
+          backgroundColor: theme.SURFACE_INVERTED,
+          borderWidth: 1,
+          borderColor: theme.NOTIFICATIONS_HIGHLIGHT,
+          borderRadius: 200,
+          width: moderateScale(36),
+          height: moderateScale(36),
+          alignItems: "center",
+          justifyContent: "center"
         }
       };
       markedDates[startDate] = {
         startingDay: true,
-        color: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
-        textColor: theme.SURFACE_SECONDARY,
-        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
-          backgroundColor: theme.SURFACE_INVERTED
+        color: theme.SURFACE_PRIMARY_TRANSPARENT,
+        textColor: theme.CONTENT_INVERTED,
+        customContainerStyle: {
+          backgroundColor: theme.SURFACE_INVERTED,
+          borderWidth: 1,
+          borderColor: theme.NOTIFICATIONS_HIGHLIGHT,
+          borderRadius: 200,
+          width: moderateScale(36),
+          height: moderateScale(36),
+          alignItems: "center",
+          justifyContent: "center"
         }
       };
     }
     return markedDates;
   };
   const isButtonDisabled = !selectedRange.startDate || !selectedRange.endDate;
-  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
+  const renderCalendarHeader = () => /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles$c.calendarHeader,
+        { borderBottomColor: theme.STROKE_TERTIARY }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Text, { style: [styles$c.monthText, { color: theme.CONTENT_PRIMARY }] }, monthLabel),
+    /* @__PURE__ */ React.createElement(View, { style: styles$c.arrowsContainer }, /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: prevMonth,
+        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
+      },
+      /* @__PURE__ */ React.createElement(Svg$1, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
+        Path,
+        {
+          d: "M15 19.5L7.5 12L15 4.5",
+          stroke: theme.CONTENT_PRIMARY,
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ))
+    ), /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: nextMonth,
+        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
+      },
+      /* @__PURE__ */ React.createElement(Svg$1, { width: 16, height: 16, viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React.createElement(
+        Path,
+        {
+          d: "M6.75 3.375L12.375 9L6.75 14.625",
+          stroke: theme.CONTENT_PRIMARY,
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ))
+    ))
+  );
+  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(View, { style: [styles$c.calendarCard, { backgroundColor: theme.SURFACE_SECONDARY }] }, /* @__PURE__ */ React.createElement(
     Calendar,
     {
+      key: monthKey,
+      current: currentDateStr,
       markedDates: getMarkedDates(),
-      mode: "date",
       markingType: "period",
+      hideArrows: true,
+      renderHeader: renderCalendarHeader,
       theme: {
         calendarBackground: "transparent",
-        arrowColor: theme.CONTENT_PRIMARY,
-        monthTextColor: theme.CONTENT_PRIMARY,
-        dayTextColor: theme.CONTENT_SECONDRY,
-        todayTextColor: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
-        textDisabledColor: theme.CONTENT_DISABLE
-      },
-      style: {
-        backgroundColor: theme.SURFACE_SECONDARY,
-        color: theme.CONTENT_SECONDRY,
-        borderRadius: 0
+        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"
+          },
+          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,
-      ...props
+      ...calendarProps
     }
-  ), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(
     Button,
     {
       title: btnTitle,
@@ -10740,7 +10916,8 @@ const DateRangePicker = (props) => {
       },
       containerStyle: {
         ...styles$c.applyButton,
-        backgroundColor: theme.SURFACE_INVERTED
+        backgroundColor: theme.SURFACE_INVERTED,
+        borderColor: theme.NOTIFICATIONS_HIGHLIGHT
       },
       textStyle: { color: theme.CONTENT_INVERTED },
       disabled: isButtonDisabled
@@ -11382,7 +11559,7 @@ const CommonTextInput = (props) => {
   const containerBackground = isDisabled ? theme[Theme.SURFACE_PRIMARY] : theme[Theme.SURFACE_TERTIARY_TRANSPARENT];
   const inputTextColor = isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_PRIMARY];
   const placeholderColor = theme[Theme.CONTENT_SECONDRY];
-  const labelColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.CONTENT_TERTIARY] : isFocused ? theme[Theme.CONTENT_PRIMARY] : theme[Theme.CONTENT_TERTIARY];
+  const labelColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_PRIMARY];
   const helperColor = isError ? theme[Theme.ERROR] : isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_SECONDRY];
   const helperMessage = errorMessage || helperText;
   return /* @__PURE__ */ React.createElement(Pressable, { onPress: handlePress, style: styles$8.container }, /* @__PURE__ */ React.createElement(
@@ -11548,7 +11725,7 @@ const CustomDropdown = (props) => {
   const valueTextColor = disable ? theme.CONTENT_TERTIARY : hasValue ? theme.CONTENT_PRIMARY : theme.CONTENT_SECONDRY;
   const helperColor = isError ? theme.ERROR : theme.CONTENT_SECONDRY;
   const helperMessage = errorMessage || helperText;
-  const fieldBackground = theme.SURFACE_SECONDARY;
+  const fieldBackground = theme.SURFACE_TERTIARY_TRANSPARENT;
   const labelColor = theme.CONTENT_PRIMARY;
   const renderLabel = () => {
     if (value || isFocus) {
@@ -11559,8 +11736,8 @@ const CustomDropdown = (props) => {
             styles$7.label,
             FONT_STYLES[FontStyle.BODY2_LIGHT],
             {
-              backgroundColor: fieldBackground,
-              color: labelColor
+              color: labelColor,
+              backgroundColor: theme.SURFACE_PRIMARY
             },
             labelStyle,
             isFocus && (labelFocusStyle ?? { color: labelColor })
@@ -11643,7 +11820,7 @@ const CustomDropdown = (props) => {
       containerStyle: [
         {
           marginTop: verticalScale(5),
-          backgroundColor: fieldBackground,
+          backgroundColor: theme.SURFACE_SECONDARY,
           borderColor: theme.STROKE_TERTIARY,
           borderWidth: 1,
           borderRadius: DHRE_RADIUS_BASE.RADIUS_8
@@ -13076,21 +13253,32 @@ var index$1 = withThemeProvider(AppointmentCard);
 const styles$1 = StyleSheet.create({
   container: {
     flexDirection: "row",
-    justifyContent: "space-between",
     alignItems: "center",
-    paddingHorizontal: horizontalScale(24),
-    paddingVertical: verticalScale(16),
-    borderTopWidth: 1,
-    borderBottomWidth: 1
+    padding: moderateScale(12),
+    columnGap: horizontalScale(12)
+  },
+  imageWrapper: {
+    width: moderateScale(112),
+    height: moderateScale(112),
+    borderRadius: moderateScale(8),
+    overflow: "hidden"
+  },
+  brandBadge: {
+    position: "absolute",
+    top: moderateScale(8),
+    right: moderateScale(8),
+    // width: moderateScale(40),
+    // height: moderateScale(40),
+    // borderRadius: moderateScale(120),
+    overflow: "hidden",
+    // backgroundColor: '#FFFFFF',
+    alignItems: "center",
+    justifyContent: "center"
   },
   propertyInfo: {
     flex: 1,
-    rowGap: verticalScale(4)
-  },
-  arrowIconContainer: {
-    width: moderateScale(32),
-    height: moderateScale(32),
-    borderRadius: moderateScale(25)
+    justifyContent: "center",
+    rowGap: verticalScale(8)
   },
   propertyNumber: {
     flexDirection: "row",
@@ -13111,57 +13299,60 @@ const PropertyDetails = ({
   subTitleStyle,
   propertyNumberStyle,
   onRightIconPress,
-  titleStyle
+  titleStyle,
+  isSelected = false
 }) => {
   const { theme } = useTheme();
   return /* @__PURE__ */ React.createElement(
     View,
     {
-      style: {
-        ...styles$1.container,
-        backgroundColor: theme.SURFACE_SECONDARY,
-        borderColor: theme.BORDER_SEPERATOR_HEADER,
-        ...containerStyle,
-        ...{ borderRadius: 0 }
-      }
+      style: [
+        styles$1.container,
+        {
+          backgroundColor: theme.SURFACE_PRIMARY,
+          borderColor: isSelected ? theme.STROKE_ACTIVE : theme.STROKE_TERTIARY
+        },
+        isSelected && {
+          shadowColor: "rgba(0,157,179,0.1)",
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 1,
+          shadowRadius: 10,
+          elevation: 4
+        },
+        containerStyle
+      ]
     },
-    React.cloneElement(icon, {
-      width: moderateScale(87),
-      height: moderateScale(87),
-      borderRadius: 0
-    }),
-    /* @__PURE__ */ React.createElement(View, { style: styles$1.propertyInfo }, brandIcon, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles$1.imageWrapper }, React.cloneElement(icon, {
+      width: "100%",
+      height: "100%",
+      borderRadius: DHRE_RADIUS.MD
+    }), brandIcon && /* @__PURE__ */ React.createElement(View, { style: styles$1.brandBadge }, brandIcon)),
+    /* @__PURE__ */ React.createElement(View, { style: styles$1.propertyInfo }, propertyNumber && /* @__PURE__ */ React.createElement(View, { style: [styles$1.propertyNumber, propertyNumberStyle] }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        text: title,
-        variant: FontStyle.L2_REGULAR,
-        style: [{ color: theme.CONTENT_PRIMARY }, titleStyle]
+        text: propertyNumber,
+        variant: FontStyle.BODY3_LIGHT,
+        style: { color: theme.CONTENT_SECONDRY }
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), hintIcon), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: subTitle,
-        variant: FontStyle.L1_REGULAR,
+        variant: FontStyle.BODY4_LIGHT,
         style: [{ color: theme.CONTENT_PRIMARY }, subTitleStyle]
       }
-    ), propertyNumber && /* @__PURE__ */ React.createElement(View, { style: [styles$1.propertyNumber, propertyNumberStyle] }, /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        text: propertyNumber,
-        variant: FontStyle.L2_REGULAR,
-        style: {
-          color: theme.CONTENT_SECONDRY
-        }
+        text: title,
+        variant: FontStyle.BODY1_MEDIUM,
+        style: [{ color: theme.CONTENT_PRIMARY }, titleStyle]
       }
-    ), hintIcon)),
+    )),
     btnIcon && /* @__PURE__ */ React.createElement(
       CustomIcon$1,
       {
         icon: btnIcon,
-        containerStyle: {
-          ...styles$1.arrowIconContainer,
-          backgroundColor: theme.SURFACE_INVERTED
-        },
         onPress: onRightIconPress
       }
     )
@@ -13235,5 +13426,5 @@ const RadioButtonGroup = ({
   )));
 };
 
-export { Accordion$1 as Accordion, AnimationWithImperativeApi as AnimationLoitte, index$1 as AppointmentCard, Avatar$1 as Avatar, AvatarSize, Background$1 as Background, BackgroundVariant, Badge$1 as Badge, BottomDrawer$1 as BottomDrawer, Button, Cards, category as Category, CheckBox, Chip$1 as Chip, ContactModel, CountryDropDown as CountryPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon$1 as CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar$1 as CustomProgressBar, CustomSearchBar$1 as CustomSearchBar, index$2 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_AVATAR_SIZE, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_COMPONENT_HEIGHT, DHRE_CORE_BLUE, DHRE_CYAN_HIGHLIGHT, DHRE_DEEP_SPACE_BLUE, DHRE_DEFAULT, DHRE_ICON_SIZE, DHRE_IMAGE_SIZE, DHRE_INFO_BLUE, DHRE_ORANGE_WARNING, DHRE_PADDING, DHRE_PADDING_BASE, DHRE_RADIUS, DHRE_RADIUS_BASE, DHRE_RED_ERROR, DHRE_SPACING, DHRE_SPACING_BASE, DHRE_STROKE, DHRE_SUCCESS_GREEN, DHRE_WHITE, DateRangePicker$1 as DateRangePicker, DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, Line, Loader$1 as Loader, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index as PropertyDetails, RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$3 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, Textinput as TextInput, Theme, ToastWithProvider as Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { Accordion$1 as Accordion, AnimationWithImperativeApi as AnimationLoitte, index$1 as AppointmentCard, Avatar$1 as Avatar, AvatarSize, Background$1 as Background, BackgroundVariant, Badge$1 as Badge, BottomDrawer$1 as BottomDrawer, Button, Cards, category as Category, CheckBox, Chip$1 as Chip, ContactModel, CountryDropDown as CountryPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon$1 as CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar$1 as CustomProgressBar, CustomSearchBar$1 as CustomSearchBar, index$2 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_AVATAR_SIZE, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_COMPONENT_HEIGHT, DHRE_CONFIRMATION_BASE_GRADIENT, DHRE_CONFIRMATION_ERROR_GRADIENT, DHRE_CORE_BLUE, DHRE_CYAN_HIGHLIGHT, DHRE_DEEP_SPACE_BLUE, DHRE_DEFAULT, DHRE_ICON_SIZE, DHRE_IMAGE_SIZE, DHRE_INFO_BLUE, DHRE_ORANGE_WARNING, DHRE_PADDING, DHRE_PADDING_BASE, DHRE_RADIUS, DHRE_RADIUS_BASE, DHRE_RED_ERROR, DHRE_SPACING, DHRE_SPACING_BASE, DHRE_STROKE, DHRE_SUCCESS_GREEN, DHRE_WHITE, DateRangePicker$1 as DateRangePicker, DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, Line, Loader$1 as Loader, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index as PropertyDetails, RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$3 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, Textinput as TextInput, Theme, ToastWithProvider as Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
 //# sourceMappingURL=index.mjs.map