sag_components 2.0.0-beta331 → 2.0.0-beta332

package/dist/index.esm.js

@@ -10090,7 +10090,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 +10142,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 +10173,11 @@ const DatePicker = ({
   value,
   setValue,
   startDateValue,
-  endDateValue
+  endDateValue,
+  selectedColor,
+  hoverColor,
+  inRangeColor,
+  clearButtonColor
 }) => {
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
@@ -10234,12 +10248,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 +10264,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 +10273,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 +10289,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 +10312,11 @@ const RangePicker = _ref => {
     borderColor,
     borderColorFocus,
     textColor,
-    selectedValue
+    selectedValue,
+    selectedColor,
+    hoverColor,
+    inRangeColor,
+    clearButtonColor
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -10419,7 +10446,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 +10467,11 @@ 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
 };
 
 // Adding defaultProps
@@ -10451,7 +10486,11 @@ RangePicker.defaultProps = {
   borderColorFocus: '#000000',
   textColor: '#000000',
   // Default textColor prop value
-  selectedValue: ''
+  selectedValue: '',
+  selectedColor: '#229e38',
+  hoverColor: '#f4faf5',
+  inRangeColor: '#effef2',
+  clearButtonColor: '#568202'
 };
 
 /* eslint-disable no-nested-ternary */
@@ -10714,23 +10753,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11172,22 +11212,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24306,23 +24347,24 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  optionHoverColor = '#edf6ff',
-  selectedOptionColor = "#C7E4FF",
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    optionHoverColor = '#edf6ff',
+    selectedOptionColor = "#C7E4FF",
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24780,26 +24822,27 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  error,
-  errorMessage,
-  labelColor,
-  optionHoverColor = '#edf6ff',
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  dropdownHeight
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    labelColor,
+    optionHoverColor = '#edf6ff',
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    dropdownHeight
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -36350,9 +36393,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -59464,25 +59507,28 @@ const LinkText = styled.span`
 `;
 
 // OkCircleIcon.jsx
-const OkCircleIcon = ({
-  width = '40',
-  height = '40',
-  color = '#519595'
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 40 40",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.createElement("rect", {
-  width: "40",
-  height: "40",
-  rx: "20",
-  fill: color
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M20.0176 12.6875C17.3809 12.6875 14.9902 14.0938 13.6543 16.3438C12.3535 18.6289 12.3535 21.4062 13.6543 23.6562C14.9902 25.9414 17.3809 27.3125 20.0176 27.3125C22.6191 27.3125 25.0098 25.9414 26.3457 23.6562C27.6465 21.4062 27.6465 18.6289 26.3457 16.3438C25.0098 14.0938 22.6191 12.6875 20.0176 12.6875ZM20.0176 29C16.7832 29 13.8301 27.3125 12.2129 24.5C10.5957 21.7227 10.5957 18.3125 12.2129 15.5C13.8301 12.7227 16.7832 11 20.0176 11C23.2168 11 26.1699 12.7227 27.7871 15.5C29.4043 18.3125 29.4043 21.7227 27.7871 24.5C26.1699 27.3125 23.2168 29 20.0176 29ZM23.9902 18.3477L19.4902 22.8477C19.1387 23.1992 18.6113 23.1992 18.2949 22.8477L16.0449 20.5977C15.6934 20.2812 15.6934 19.7539 16.0449 19.4375C16.3613 19.0859 16.8887 19.0859 17.2402 19.4375L18.8926 21.0898L22.7949 17.1875C23.1113 16.8359 23.6387 16.8359 23.9902 17.1875C24.3066 17.5039 24.3066 18.0312 23.9902 18.3477Z",
-  fill: "white"
-}));
+const OkCircleIcon = _ref => {
+  let {
+    width = '40',
+    height = '40',
+    color = '#519595'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("rect", {
+    width: "40",
+    height: "40",
+    rx: "20",
+    fill: color
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M20.0176 12.6875C17.3809 12.6875 14.9902 14.0938 13.6543 16.3438C12.3535 18.6289 12.3535 21.4062 13.6543 23.6562C14.9902 25.9414 17.3809 27.3125 20.0176 27.3125C22.6191 27.3125 25.0098 25.9414 26.3457 23.6562C27.6465 21.4062 27.6465 18.6289 26.3457 16.3438C25.0098 14.0938 22.6191 12.6875 20.0176 12.6875ZM20.0176 29C16.7832 29 13.8301 27.3125 12.2129 24.5C10.5957 21.7227 10.5957 18.3125 12.2129 15.5C13.8301 12.7227 16.7832 11 20.0176 11C23.2168 11 26.1699 12.7227 27.7871 15.5C29.4043 18.3125 29.4043 21.7227 27.7871 24.5C26.1699 27.3125 23.2168 29 20.0176 29ZM23.9902 18.3477L19.4902 22.8477C19.1387 23.1992 18.6113 23.1992 18.2949 22.8477L16.0449 20.5977C15.6934 20.2812 15.6934 19.7539 16.0449 19.4375C16.3613 19.0859 16.8887 19.0859 17.2402 19.4375L18.8926 21.0898L22.7949 17.1875C23.1113 16.8359 23.6387 16.8359 23.9902 17.1875C24.3066 17.5039 24.3066 18.0312 23.9902 18.3477Z",
+    fill: "white"
+  }));
+};
 
 // ToasterMessageBox.jsx
 const ToasterMessageBox = _ref => {