sag_components 2.0.0-beta331 → 2.0.0-beta333

package/dist/index.js

@@ -449,16 +449,21 @@ const CalendarInOpen = _ref => {
   }));
 };
 
-const Calendar = () => /*#__PURE__*/React__default["default"].createElement("svg", {
-  width: "11",
-  height: "12",
-  viewBox: "0 0 11 12",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React__default["default"].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__default["default"].createElement("svg", {
+    width: "11",
+    height: "12",
+    viewBox: "0 0 11 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].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 => {
@@ -10100,7 +10105,9 @@ const DatePickerFooter = styled__default["default"].div`
   margin-top: 10px;
 `;
 const ClearButton$1 = styled__default["default"].button`
-  color: #568202;
+  color: ${({
+  clearButtonColor
+}) => clearButtonColor || '#568202'};
   text-align: center;
   font-family: Poppins;
   font-size: 12px;
@@ -10150,19 +10157,27 @@ const DateCell$2 = styled__default["default"].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'];
@@ -10173,7 +10188,11 @@ const DatePicker = ({
   value,
   setValue,
   startDateValue,
-  endDateValue
+  endDateValue,
+  selectedColor,
+  hoverColor,
+  inRangeColor,
+  clearButtonColor
 }) => {
   const [startDate, setStartDate] = React$1.useState(null);
   const [endDate, setEndDate] = React$1.useState(null);
@@ -10244,12 +10263,15 @@ const DatePicker = ({
     }, /*#__PURE__*/React__default["default"].createElement(ChervronRightIcon, null)))), /*#__PURE__*/React__default["default"].createElement(DatePickerCalendar$2, {
       className: "DatePickerCalendar"
     }, daysOfWeek.map(day => /*#__PURE__*/React__default["default"].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__default["default"].createElement(DateCell$2, {
           key: date.toISOString(),
           className: "selected",
+          selectedColor: selectedColor,
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10257,6 +10279,8 @@ const DatePicker = ({
         return /*#__PURE__*/React__default["default"].createElement(DateCell$2, {
           key: date.toISOString(),
           className: "inrange",
+          inRangeColor: inRangeColor,
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10264,12 +10288,15 @@ const DatePicker = ({
         return /*#__PURE__*/React__default["default"].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__default["default"].createElement(DateCell$2, {
           key: date.toISOString(),
+          hoverColor: hoverColor,
           onClick: () => handleDateSelect(date)
         }, date.getDate());
       }
@@ -10277,6 +10304,7 @@ const DatePicker = ({
         key: date.toISOString()
       });
     })), /*#__PURE__*/React__default["default"].createElement(DatePickerFooter, null, /*#__PURE__*/React__default["default"].createElement(ClearButton$1, {
+      clearButtonColor: clearButtonColor,
       onClick: clearSelection
     }, "Clear")));
   };
@@ -10299,7 +10327,12 @@ const RangePicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    selectedValue
+    selectedValue,
+    selectedColor,
+    hoverColor,
+    inRangeColor,
+    clearButtonColor,
+    calendarIconColor
   } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
@@ -10415,9 +10448,11 @@ const RangePicker = _ref => {
     className: "CalendarDiv",
     onClick: toggleDatePicker
   }, isOpen === true ? /*#__PURE__*/React__default["default"].createElement(CalendarInOpen, {
-    className: "CalendarInOpen"
+    className: "CalendarInOpen",
+    fill: calendarIconColor
   }) : /*#__PURE__*/React__default["default"].createElement(Calendar, {
-    className: "Calendar"
+    className: "Calendar",
+    fill: calendarIconColor
   }))), /*#__PURE__*/React__default["default"].createElement(OptionsContainer$5, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
@@ -10429,7 +10464,11 @@ const RangePicker = _ref => {
     value: value,
     setValue: setValue,
     startDateValue: startDateValue,
-    endDateValue: endDateValue
+    endDateValue: endDateValue,
+    selectedColor: selectedColor,
+    hoverColor: hoverColor,
+    inRangeColor: inRangeColor,
+    clearButtonColor: clearButtonColor
   })));
 };
 RangePicker.propTypes = {
@@ -10446,7 +10485,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
@@ -10461,7 +10505,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 */