sag_components 2.0.0-beta331 → 2.0.0-beta333

package/dist/index.d.ts

@@ -1670,7 +1670,7 @@ declare function QuickFilterCards({ data, onCardToggle, width, CardsContainerCla
     CardsContainerClassName?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function RangePicker({ label, onChange, borderRadius, required, width, height, placeholder, disabled, borderColor, borderColorFocus, textColor, selectedValue, }: {
+declare function RangePicker({ label, onChange, borderRadius, required, width, height, placeholder, disabled, borderColor, borderColorFocus, textColor, selectedValue, selectedColor, hoverColor, inRangeColor, clearButtonColor, calendarIconColor, }: {
     label: any;
     onChange: any;
     borderRadius: any;
@@ -1683,6 +1683,11 @@ declare function RangePicker({ label, onChange, borderRadius, required, width, h
     borderColorFocus: any;
     textColor: any;
     selectedValue: any;
+    selectedColor: any;
+    hoverColor: any;
+    inRangeColor: any;
+    clearButtonColor: any;
+    calendarIconColor: any;
 }): react_jsx_runtime.JSX.Element;
 declare namespace RangePicker {
     namespace propTypes {
@@ -1698,6 +1703,11 @@ declare namespace RangePicker {
         const borderColorFocus: PropTypes.Requireable<string>;
         const textColor: PropTypes.Requireable<string>;
         const selectedValue: PropTypes.Requireable<string>;
+        const selectedColor: PropTypes.Requireable<string>;
+        const hoverColor: PropTypes.Requireable<string>;
+        const inRangeColor: PropTypes.Requireable<string>;
+        const clearButtonColor: PropTypes.Requireable<string>;
+        const calendarIconColor: PropTypes.Requireable<string>;
     }
     namespace defaultProps {
         const required_1: boolean;
@@ -1718,6 +1728,16 @@ declare namespace RangePicker {
         export { textColor_1 as textColor };
         const selectedValue_1: string;
         export { selectedValue_1 as selectedValue };
+        const selectedColor_1: string;
+        export { selectedColor_1 as selectedColor };
+        const hoverColor_1: string;
+        export { hoverColor_1 as hoverColor };
+        const inRangeColor_1: string;
+        export { inRangeColor_1 as inRangeColor };
+        const clearButtonColor_1: string;
+        export { clearButtonColor_1 as clearButtonColor };
+        const calendarIconColor_1: string;
+        export { calendarIconColor_1 as calendarIconColor };
     }
 }
 

package/dist/index.esm.js

@@ -439,16 +439,21 @@ const CalendarInOpen = _ref => {
   }));
 };
 
-const Calendar = () => /*#__PURE__*/React$1.createElement("svg", {
-  width: "11",
-  height: "12",
-  viewBox: "0 0 11 12",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.createElement("path", {
-  d: "M2.625 0C2.8125 0 3 0.1875 3 0.375V1.5H7.5V0.375C7.5 0.1875 7.66406 0 7.875 0C8.0625 0 8.25 0.1875 8.25 0.375V1.5H9C9.82031 1.5 10.5 2.17969 10.5 3V3.75V4.5V10.5C10.5 11.3438 9.82031 12 9 12H1.5C0.65625 12 0 11.3438 0 10.5V4.5V3.75V3C0 2.17969 0.65625 1.5 1.5 1.5H2.25V0.375C2.25 0.1875 2.41406 0 2.625 0ZM9.75 4.5H0.75V10.5C0.75 10.9219 1.07812 11.25 1.5 11.25H9C9.39844 11.25 9.75 10.9219 9.75 10.5V4.5ZM9 2.25H1.5C1.07812 2.25 0.75 2.60156 0.75 3V3.75H9.75V3C9.75 2.60156 9.39844 2.25 9 2.25Z",
-  fill: "#568202"
-}));
+const Calendar = _ref => {
+  let {
+    fill = '#568202'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: "11",
+    height: "12",
+    viewBox: "0 0 11 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M2.625 0C2.8125 0 3 0.1875 3 0.375V1.5H7.5V0.375C7.5 0.1875 7.66406 0 7.875 0C8.0625 0 8.25 0.1875 8.25 0.375V1.5H9C9.82031 1.5 10.5 2.17969 10.5 3V3.75V4.5V10.5C10.5 11.3438 9.82031 12 9 12H1.5C0.65625 12 0 11.3438 0 10.5V4.5V3.75V3C0 2.17969 0.65625 1.5 1.5 1.5H2.25V0.375C2.25 0.1875 2.41406 0 2.625 0ZM9.75 4.5H0.75V10.5C0.75 10.9219 1.07812 11.25 1.5 11.25H9C9.39844 11.25 9.75 10.9219 9.75 10.5V4.5ZM9 2.25H1.5C1.07812 2.25 0.75 2.60156 0.75 3V3.75H9.75V3C9.75 2.60156 9.39844 2.25 9 2.25Z",
+    fill: fill
+  }));
+};
 
 // eslint-disable-next-line react/prop-types
 const ErrorIcon = _ref => {
@@ -10090,7 +10095,9 @@ const DatePickerFooter = styled.div`
   margin-top: 10px;
 `;
 const ClearButton$1 = styled.button`
-  color: #568202;
+  color: ${({
+  clearButtonColor
+}) => clearButtonColor || '#568202'};
   text-align: center;
   font-family: Poppins;
   font-size: 12px;
@@ -10140,19 +10147,27 @@ const DateCell$2 = styled.div`
   transition: background-color 0.3s ease;
 
   &:hover {
-    background: #f4faf5;
+    background: ${({
+  hoverColor
+}) => hoverColor || '#f4faf5'};
   }
 
   &.selected {
-    background-color: #229e38;
+    background-color: ${({
+  selectedColor
+}) => selectedColor || '#229e38'};
     color: #fff;
   }
   &.startselected {
-    border: 1px solid #229e38;
+    border: 1px solid ${({
+  selectedColor
+}) => selectedColor || '#229e38'};
   }
   &.inrange {
     border-radius: 0px;
-    background-color: #effef2;
+    background-color: ${({
+  inRangeColor
+}) => inRangeColor || '#effef2'};
   }
 `;
 const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
@@ -10163,7 +10178,11 @@ const DatePicker = ({
   value,
   setValue,
   startDateValue,
-  endDateValue
+  endDateValue,
+  selectedColor,
+  hoverColor,
+  inRangeColor,
+  clearButtonColor
 }) => {
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
@@ -10234,12 +10253,15 @@ const DatePicker = ({
     }, /*#__PURE__*/React$1.createElement(ChervronRightIcon, null)))), /*#__PURE__*/React$1.createElement(DatePickerCalendar$2, {
       className: "DatePickerCalendar"
     }, daysOfWeek.map(day => /*#__PURE__*/React$1.createElement(DateCell$2, {
-      key: day
+      key: day,
+      hoverColor: hoverColor
     }, day)), dates.map(date => {
       if (startDate && endDate && (date.getTime() === startDate.getTime() || date.getTime() === endDate.getTime())) {
         return /*#__PURE__*/React$1.createElement(DateCell$2, {
           key: date.toISOString(),
           className: "selected",
+          selectedColor: selectedColor,
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10247,6 +10269,8 @@ const DatePicker = ({
         return /*#__PURE__*/React$1.createElement(DateCell$2, {
           key: date.toISOString(),
           className: "inrange",
+          inRangeColor: inRangeColor,
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10254,12 +10278,15 @@ const DatePicker = ({
         return /*#__PURE__*/React$1.createElement(DateCell$2, {
           key: date.toISOString(),
           className: "startselected",
+          selectedColor: selectedColor,
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
       if (date.getMonth() === currentDate.getMonth()) {
         return /*#__PURE__*/React$1.createElement(DateCell$2, {
           key: date.toISOString(),
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10267,6 +10294,7 @@ const DatePicker = ({
         key: date.toISOString()
       });
     })), /*#__PURE__*/React$1.createElement(DatePickerFooter, null, /*#__PURE__*/React$1.createElement(ClearButton$1, {
+      clearButtonColor: clearButtonColor,
       onClick: clearSelection
     }, "Clear")));
   };
@@ -10289,7 +10317,12 @@ const RangePicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    selectedValue
+    selectedValue,
+    selectedColor,
+    hoverColor,
+    inRangeColor,
+    clearButtonColor,
+    calendarIconColor
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -10405,9 +10438,11 @@ const RangePicker = _ref => {
     className: "CalendarDiv",
     onClick: toggleDatePicker
   }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, {
-    className: "CalendarInOpen"
+    className: "CalendarInOpen",
+    fill: calendarIconColor
   }) : /*#__PURE__*/React$1.createElement(Calendar, {
-    className: "Calendar"
+    className: "Calendar",
+    fill: calendarIconColor
   }))), /*#__PURE__*/React$1.createElement(OptionsContainer$5, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
@@ -10419,7 +10454,11 @@ const RangePicker = _ref => {
     value: value,
     setValue: setValue,
     startDateValue: startDateValue,
-    endDateValue: endDateValue
+    endDateValue: endDateValue,
+    selectedColor: selectedColor,
+    hoverColor: hoverColor,
+    inRangeColor: inRangeColor,
+    clearButtonColor: clearButtonColor
   })));
 };
 RangePicker.propTypes = {
@@ -10436,7 +10475,12 @@ RangePicker.propTypes = {
   borderColorFocus: PropTypes.string,
   textColor: PropTypes.string,
   // Added textColor prop
-  selectedValue: PropTypes.string
+  selectedValue: PropTypes.string,
+  selectedColor: PropTypes.string,
+  hoverColor: PropTypes.string,
+  inRangeColor: PropTypes.string,
+  clearButtonColor: PropTypes.string,
+  calendarIconColor: PropTypes.string
 };
 
 // Adding defaultProps
@@ -10451,7 +10495,12 @@ RangePicker.defaultProps = {
   borderColorFocus: '#000000',
   textColor: '#000000',
   // Default textColor prop value
-  selectedValue: ''
+  selectedValue: '',
+  selectedColor: '#229e38',
+  hoverColor: '#f4faf5',
+  inRangeColor: '#effef2',
+  clearButtonColor: '#568202',
+  calendarIconColor: '#568202'
 };
 
 /* eslint-disable no-nested-ternary */