dhre-ui-kit 3.5.0 → 3.7.0

package/lib/index.mjs

@@ -1977,7 +1977,7 @@ function buildPlainContainerStyle(variant, disabled, disabledColor, theme) {
   }
   if (variant === "quaternary") {
     return {
-      backgroundColor: "transparent",
+      backgroundColor: theme[Theme.BUTTON_INVRTED_FILL],
       borderWidth: 1,
       borderColor: disabled ? theme[Theme.BUTTON_QUATERNARY_DISABLED_STROKE] : theme[Theme.BUTTON_QUATERNARY_DEFAULT_STROKE]
     };
@@ -3777,7 +3777,7 @@ const CustomHeader = ({
     {
       variant: "BODY1_MEDIUM",
       text: title,
-      style: { color: titleColor ?? theme.CONTENT_PRIMARY["dark"] }
+      style: { color: titleColor ?? theme.CONTENT_PRIMARY }
     }
   ), titleSuffixIcon && React.cloneElement(titleSuffixIcon, {
     width: ICON_SIZE,
@@ -10943,15 +10943,15 @@ const DateRangePicker = (props) => {
       while (start < end) {
         start.setDate(start.getDate() + 1);
         markedDates[start.toISOString().split("T")[0]] = {
-          color: theme.SURFACE_PRIMARY_TRANSPARENT,
-          textColor: theme.CONTENT_PRIMARY
+          color: theme.SURFACE_SECONDARY_TRANSPARENT,
+          textColor: theme.CONTENT_INVERTED
         };
       }
     }
     if (startDate) {
       markedDates[startDate] = {
         startingDay: true,
-        textColor: theme.CONTENT_PRIMARY,
+        textColor: theme.CONTENT_INVERTED,
         customContainerStyle: {
           backgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           borderRadius: 200,
@@ -10965,8 +10965,8 @@ const DateRangePicker = (props) => {
     if (endDate) {
       markedDates[endDate] = {
         endingDay: true,
-        color: theme.SURFACE_PRIMARY_TRANSPARENT,
-        textColor: theme.CONTENT_PRIMARY,
+        color: theme.SURFACE_SECONDARY_TRANSPARENT,
+        textColor: theme.CONTENT_INVERTED,
         customContainerStyle: {
           backgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           borderRadius: 200,
@@ -10978,8 +10978,8 @@ const DateRangePicker = (props) => {
       };
       markedDates[startDate] = {
         startingDay: true,
-        color: theme.SURFACE_PRIMARY_TRANSPARENT,
-        textColor: theme.CONTENT_PRIMARY,
+        color: theme.SURFACE_SECONDARY_TRANSPARENT,
+        textColor: theme.CONTENT_INVERTED,
         customContainerStyle: {
           backgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           borderRadius: 200,
@@ -10998,10 +10998,10 @@ const DateRangePicker = (props) => {
     {
       style: [
         styles$b.calendarHeader,
-        { borderBottomColor: theme.STROKE_TERTIARY }
+        { borderBottomColor: theme.STROKE_SECONDARY }
       ]
     },
-    /* @__PURE__ */ React.createElement(Text, { style: [styles$b.monthText, { color: theme.CONTENT_PRIMARY }] }, monthLabel),
+    /* @__PURE__ */ React.createElement(Text, { style: [styles$b.monthText, { color: theme.CONTENT_INVERTED }] }, monthLabel),
     /* @__PURE__ */ React.createElement(View, { style: styles$b.arrowsContainer }, /* @__PURE__ */ React.createElement(
       TouchableOpacity,
       {
@@ -11012,7 +11012,7 @@ const DateRangePicker = (props) => {
         Path,
         {
           d: "M15 19.5L7.5 12L15 4.5",
-          stroke: theme.CONTENT_PRIMARY,
+          stroke: theme.CONTENT_INVERTED,
           strokeWidth: 1.5,
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -11028,7 +11028,7 @@ const DateRangePicker = (props) => {
         Path,
         {
           d: "M6.75 3.375L12.375 9L6.75 14.625",
-          stroke: theme.CONTENT_PRIMARY,
+          stroke: theme.CONTENT_INVERTED,
           strokeWidth: 1.5,
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -11039,7 +11039,10 @@ const DateRangePicker = (props) => {
   return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
     View,
     {
-      style: [styles$b.calendarCard, { backgroundColor: theme.SURFACE_PRIMARY }]
+      style: [
+        styles$b.calendarCard,
+        { backgroundColor: theme.SURFACE_INVERTED }
+      ]
     },
     /* @__PURE__ */ React.createElement(
       Calendar,
@@ -11052,9 +11055,9 @@ const DateRangePicker = (props) => {
         renderHeader: renderCalendarHeader,
         theme: {
           calendarBackground: "transparent",
-          dayTextColor: theme.CONTENT_PRIMARY,
+          dayTextColor: theme.CONTENT_INVERTED,
           textDisabledColor: theme.CONTENT_DISABLE_DARK,
-          todayTextColor: theme.CONTENT_PRIMARY,
+          todayTextColor: theme.CONTENT_INVERTED,
           todayBackgroundColor: theme.CONTENT_ARROW_HIGHLIGHT,
           textSectionTitleColor: theme.CONTENT_DISABLE_LIGHT,
           textDayFontSize: 16,
@@ -11108,11 +11111,12 @@ const DateRangePicker = (props) => {
   ), /* @__PURE__ */ React.createElement(
     Button,
     {
+      containerStyle: styles$b.applyButton,
       title: btnTitle,
       onPress: () => {
         onButtonPress(selectedRange?.startDate, selectedRange?.endDate);
       },
-      variant: "primary",
+      variant: "tertiary",
       size: "large",
       disabled: isButtonDisabled
     }
@@ -11740,7 +11744,8 @@ const CommonTextInput = (props) => {
     onRightIconPress,
     onlyErrorBorderLabel,
     disableBorder = false,
-    forceRTL
+    forceRTL,
+    borderColor: borderColorOverride
   } = props;
   const [isFocused, setIsFocused] = useState(false);
   const handleFocus = () => setIsFocused(true);
@@ -11749,7 +11754,7 @@ 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_ACTIVE] : theme[Theme.STROKE_SECONDARY];
+  const currentBorderColor = borderColorOverride ?? (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 inputTextColor = isDisabled ? theme[Theme.CONTENT_TERTIARY] : theme[Theme.CONTENT_PRIMARY];
   const placeholderColor = theme[Theme.CONTENT_SECONDRY];