sag_components 2.0.0-beta26 → 2.0.0-beta28

package/dist/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var React$1 = require('react');
 var recharts = require('recharts');
 var Skeleton = require('react-loading-skeleton');
 var framerMotion = require('framer-motion');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
 var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2157,7 +2157,7 @@ var f = "undefined" != typeof process && void 0 !== process.env && (process.env.
         console.error = function (t) {
           for (var n = [], r = 1; r < arguments.length; r++) n[r - 1] = arguments[r];
           E.test(t) ? (a = !1, N.delete(s)) : i.apply(void 0, __spreadArray([t], n, !1));
-        }, React.useRef(), a && !N.has(s) && (console.warn(s), N.add(s));
+        }, React$1.useRef(), a && !N.has(s) && (console.warn(s), N.add(s));
       } catch (e) {
         E.test(e.message) && N.delete(s);
       } finally {
@@ -2577,7 +2577,7 @@ var Me = new ke(),
   });
   $e.Consumer;
 function Ge() {
-  return React.useContext($e);
+  return React$1.useContext($e);
 }
 var qe = function () {
     function e(e, t) {
@@ -2716,7 +2716,7 @@ function it(e, o, s) {
         f = React__default["default"].useContext(et),
         m = Ge(),
         y = e.shouldForwardProp || m.shouldForwardProp;
-      "production" !== process.env.NODE_ENV && React.useDebugValue(d);
+      "production" !== process.env.NODE_ENV && React$1.useDebugValue(d);
       var v = I(o, f, c) || C,
         g = function (e, n, r) {
           for (var o, s = __assign(__assign({}, n), {
@@ -2734,11 +2734,11 @@ function it(e, o, s) {
       var E = function (e, t) {
         var n = Ge(),
           r = e.generateAndInjectStyles(t, n.styleSheet, n.stylis);
-        return "production" !== process.env.NODE_ENV && React.useDebugValue(r), r;
+        return "production" !== process.env.NODE_ENV && React$1.useDebugValue(r), r;
       }(a, g);
       "production" !== process.env.NODE_ENV && e.warnTooManyClasses && e.warnTooManyClasses(E);
       var N = ie(p, d);
-      return E && (N += " " + E), g.className && (N += " " + g.className), w[L(S) && !A.has(S) ? "class" : "className"] = N, s && (w.ref = s), /*#__PURE__*/React.createElement(S, w);
+      return E && (N += " " + E), g.className && (N += " " + g.className), w[L(S) && !A.has(S) ? "class" : "className"] = N, s && (w.ref = s), /*#__PURE__*/React$1.createElement(S, w);
     }(D, e, o);
   }
   O.displayName = y;
@@ -3159,8 +3159,8 @@ const Button = _ref => {
     rightIcon = 'none',
     isSubmitButton = false
   } = _ref;
-  const [clicked, setClicked] = React.useState(false);
-  const [hover, setHover] = React.useState(false);
+  const [clicked, setClicked] = React$1.useState(false);
+  const [hover, setHover] = React$1.useState(false);
   const handleSubmitButtonOnClick = () => {
     setClicked(true);
     onClick(`SubmitButtonOnClick: ${text}`);
@@ -3887,7 +3887,7 @@ const Tooltip$1 = props => {
     topFactor
   } = props;
   let timeout;
-  const [active, setActive] = React.useState(false);
+  const [active, setActive] = React$1.useState(false);
   const showTip = () => {
     timeout = setTimeout(() => {
       setActive(true);
@@ -4071,7 +4071,7 @@ const PieChart = props => {
     textAfterValue,
     noDataText
   } = props;
-  const DoughnutChartContainerRef = React.useRef();
+  const DoughnutChartContainerRef = React$1.useRef();
   const dotCutTrenty = row => {
     if (!row || !row.value) return null;
     let valueNew = 0;
@@ -4527,8 +4527,8 @@ const BannersDropdown = props => {
     banners,
     onClick
   } = props;
-  const [processedBanners, setProcessedBanners] = React.useState([]);
-  React.useEffect(() => {
+  const [processedBanners, setProcessedBanners] = React$1.useState([]);
+  React$1.useEffect(() => {
     const formatedBanners = banners?.map(banner => {
       if (banner.name === 'StopAndShop') {
         return {
@@ -4569,16 +4569,16 @@ const BannersDropdown = props => {
     });
     setProcessedBanners(formatedBanners);
   }, []);
-  const [toggled, setToggled] = React.useState(false);
-  const [bannerButtonText, setBannerButtonText] = React.useState('All Banners');
-  const [bannerButtonArrow, setBannerButtonArrow] = React.useState('#2D8DE7');
+  const [toggled, setToggled] = React$1.useState(false);
+  const [bannerButtonText, setBannerButtonText] = React$1.useState('All Banners');
+  const [bannerButtonArrow, setBannerButtonArrow] = React$1.useState('#2D8DE7');
   const choosenBanners = index => {
     const updatedBanners = [...processedBanners];
     updatedBanners[index].checked = !updatedBanners[index].checked;
     setProcessedBanners(updatedBanners);
     onClick(updatedBanners);
   };
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const selectedBanners = processedBanners.filter(banner => !banner.checked);
     if (selectedBanners.length < 1) {
       setBannerButtonText('All Banners');
@@ -4742,18 +4742,19 @@ const InfoIcon = _ref => {
   }));
 };
 
-const LinkButton = ({
-  text = '',
-  type = 'primary',
-  size = 'small',
-  height = '',
-  width = '',
-  disabled = false,
-  textColor = '',
-  onClick,
-  leftIcon = 'none',
-  rightIcon = 'none'
-}) => {
+const LinkButton = _ref => {
+  let {
+    text = '',
+    type = 'primary',
+    size = 'small',
+    height = '',
+    width = '',
+    disabled = false,
+    textColor = '',
+    onClick,
+    leftIcon = 'none',
+    rightIcon = 'none'
+  } = _ref;
   // const {
   //   text,
   //   type,
@@ -4768,7 +4769,7 @@ const LinkButton = ({
   //   className,
   // } = props;
 
-  const [clicked, setClicked] = React.useState(false);
+  const [clicked, setClicked] = React$1.useState(false);
   const handleLinkButtonClick = () => {
     setClicked(true);
     onClick(text);
@@ -4960,8 +4961,8 @@ const EventDetailsCard = props => {
     onBannersDropdownClick,
     disableViewDetailsButton
   } = props;
-  const [processedBanners, setProcessedBanners] = React.useState([]);
-  React.useEffect(() => {
+  const [processedBanners, setProcessedBanners] = React$1.useState([]);
+  React$1.useEffect(() => {
     const formatedBanners = banners.map(banner => {
       if (banner === 'StopAndShop') {
         return {
@@ -5154,20 +5155,20 @@ const LinnerDataBox = props => {
     className,
     customDataFormat
   } = props;
-  return /*#__PURE__*/React__default["default"].createElement(LinnerContainer$1, {
+  return /*#__PURE__*/React.createElement(LinnerContainer$1, {
     className: className,
     backgroundColor: backgroundColor,
     width: width || "100%",
     height: height || "200px",
     customDataFormat: customDataFormat
-  }, data.map((item, index) => /*#__PURE__*/React__default["default"].createElement(DataBoxWrap, {
+  }, data.map((item, index) => /*#__PURE__*/React.createElement(DataBoxWrap, {
     key: `${item.title}`,
     width: `${100 / data.length}%`
-  }, /*#__PURE__*/React__default["default"].createElement(DataBox$1, null, item.title && /*#__PURE__*/React__default["default"].createElement(DataBoxTitle$1, {
+  }, /*#__PURE__*/React.createElement(DataBox$1, null, item.title && /*#__PURE__*/React.createElement(DataBoxTitle$1, {
     className: "DataBoxTitle"
-  }, item.title), /*#__PURE__*/React__default["default"].createElement(DataBoxContent, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== "null" && item.value !== "undefined" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, item.sign && /*#__PURE__*/React__default["default"].createElement(DataBoxContentSign, null, item.sign), customDataFormat ? /*#__PURE__*/React__default["default"].createElement(DataBoxContentValue, {
+  }, item.title), /*#__PURE__*/React.createElement(DataBoxContent, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== "null" && item.value !== "undefined" ? /*#__PURE__*/React.createElement(React.Fragment, null, item.sign && /*#__PURE__*/React.createElement(DataBoxContentSign, null, item.sign), customDataFormat ? /*#__PURE__*/React.createElement(DataBoxContentValue, {
     className: "DataBoxValue"
-  }, "".concat(formattedValue(item.value), getFormattedUnits(item.value))) : /*#__PURE__*/React__default["default"].createElement(DataBoxContentValue, null, "".concat(getFormattedValue(item.value), getFormattedUnits(item.value)))) : /*#__PURE__*/React__default["default"].createElement(DataBoxContentNoValue, null, "No Data")), item.extraInfo.map(extraInfoItem => /*#__PURE__*/React__default["default"].createElement(DataBoxExtraInfoCell, null, extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/React__default["default"].createElement(DataBoxExtraInfoCellValue, null, "".concat("$", getFormattedValue(extraInfoItem.value), getFormattedUnits(extraInfoItem.value))), extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/React__default["default"].createElement(DataBoxExtraInfoCellTitle, null, extraInfoItem.title)))), index < data.length - 1 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "".concat(formattedValue(item.value), getFormattedUnits(item.value))) : /*#__PURE__*/React.createElement(DataBoxContentValue, null, "".concat(getFormattedValue(item.value), getFormattedUnits(item.value)))) : /*#__PURE__*/React.createElement(DataBoxContentNoValue, null, "No Data")), item.extraInfo.map(extraInfoItem => /*#__PURE__*/React.createElement(DataBoxExtraInfoCell, null, extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/React.createElement(DataBoxExtraInfoCellValue, null, "".concat("$", getFormattedValue(extraInfoItem.value), getFormattedUnits(extraInfoItem.value))), extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/React.createElement(DataBoxExtraInfoCellTitle, null, extraInfoItem.title)))), index < data.length - 1 && /*#__PURE__*/React.createElement("div", {
     className: "vertival-line",
     style: {
       width: "1px",
@@ -5195,7 +5196,7 @@ LinnerDataBox.propTypes = {
 };
 LinnerDataBox.defaultProps = {
   className: "",
-  width: "100%",
+  width: "auto",
   height: "auto",
   data: [],
   backgroundColor: "#FFFFFF",
@@ -5592,7 +5593,7 @@ const SagIconButton = props => {
     onButtonClick,
     className
   } = props;
-  const [activeState, setActiveState] = React.useState(openState);
+  const [activeState, setActiveState] = React$1.useState(openState);
   const onClickHandler = event => {
     onButtonClick(event);
     setActiveState(prevState => !prevState);
@@ -5922,12 +5923,12 @@ const TabMenu = props => {
     onTopButtonClick,
     tabs
   } = props;
-  const [activeTab, setActiveTab] = React.useState(currentTab);
+  const [activeTab, setActiveTab] = React$1.useState(currentTab);
   const handleTabChange = index => {
     onTabChange(index);
     setActiveTab(index);
   };
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     setActiveTab(currentTab);
   }, [currentTab]);
   return /*#__PURE__*/React__default["default"].createElement(TabMenuContainer, {
@@ -10914,14 +10915,14 @@ const DropdownSingleNew = ({
   orderBy,
   elementType
 }) => {
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [showOptions, setShowOptions] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState("");
-  const [selectedOptions, setSelectedOptions] = React.useState([]);
-  const [hoverInputContainer, setHoverInputContainer] = React.useState(false);
-  const [hoverOptionsContainer, setHoverOptionsContainer] = React.useState(false);
-  const inputRef = React.useRef(null);
-  const containerRef = React.useRef(null);
+  const [isFocused, setIsFocused] = React$1.useState(false);
+  const [showOptions, setShowOptions] = React$1.useState(false);
+  const [inputValue, setInputValue] = React$1.useState("");
+  const [selectedOptions, setSelectedOptions] = React$1.useState([]);
+  const [hoverInputContainer, setHoverInputContainer] = React$1.useState(false);
+  const [hoverOptionsContainer, setHoverOptionsContainer] = React$1.useState(false);
+  const inputRef = React$1.useRef(null);
+  const containerRef = React$1.useRef(null);
   let filteredOptions = options?.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
   switch (orderBy) {
     case "asc":
@@ -10939,17 +10940,17 @@ const DropdownSingleNew = ({
       }
       break;
   }
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
     }
   }, [selectedValue]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (isFocused && inputRef?.current) {
       inputRef?.current?.focus();
     }
   }, [isFocused]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setShowOptions(false);
@@ -11412,14 +11413,14 @@ const DropdownMultiNew = ({
   orderBy,
   elementType
 }) => {
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [showOptions, setShowOptions] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState("");
-  const [selectedOptions, setSelectedOptions] = React.useState([]);
-  const [hoverInputContainer, setHoverInputContainer] = React.useState(false);
-  const [hoverOptionsContainer, setHoverOptionsContainer] = React.useState(false);
-  const inputRef = React.useRef(null);
-  const containerRef = React.useRef(null);
+  const [isFocused, setIsFocused] = React$1.useState(false);
+  const [showOptions, setShowOptions] = React$1.useState(false);
+  const [inputValue, setInputValue] = React$1.useState("");
+  const [selectedOptions, setSelectedOptions] = React$1.useState([]);
+  const [hoverInputContainer, setHoverInputContainer] = React$1.useState(false);
+  const [hoverOptionsContainer, setHoverOptionsContainer] = React$1.useState(false);
+  const inputRef = React$1.useRef(null);
+  const containerRef = React$1.useRef(null);
   let filteredOptions = options?.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
   switch (orderBy) {
     case "asc":
@@ -11437,17 +11438,17 @@ const DropdownMultiNew = ({
       }
       break;
   }
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
     }
   }, [selectedValue]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (isFocused && inputRef?.current) {
       inputRef?.current?.focus();
     }
   }, [isFocused]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setShowOptions(false);
@@ -11700,67 +11701,70 @@ const DropdownMain = dt.div`
 `;
 
 /* eslint-disable react/prop-types */
-const DropdownNew = ({
-  isMulti,
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  checkBoxColor,
-  xIconShow,
-  showLabelOnTop,
-  orderBy,
-  elementType
-}) => /*#__PURE__*/React__default["default"].createElement(DropdownMain, {
-  className: "DropdownMain",
-  width: width
-}, isMulti ? /*#__PURE__*/React__default["default"].createElement(DropdownMultiNew, {
-  className: "DropdownMultiNew",
-  placeHolder: placeHolder,
-  label: label,
-  labelEmptyValue: labelEmptyValue,
-  labelColor: labelColor,
-  checkBoxColor: checkBoxColor,
-  required: required,
-  options: options,
-  width: width,
-  disabled: disabled,
-  error: error,
-  errorMessage: errorMessage,
-  selectedValue: selectedValue,
-  xIconShow: xIconShow,
-  onChange: onChange,
-  showLabelOnTop: showLabelOnTop,
-  orderBy: orderBy,
-  elementType: elementType
-}) : /*#__PURE__*/React__default["default"].createElement(DropdownSingleNew, {
-  className: "DropdownSingleNew",
-  placeHolder: placeHolder,
-  label: label,
-  labelEmptyValue: labelEmptyValue,
-  labelColor: labelColor,
-  checkBoxColor: checkBoxColor,
-  required: required,
-  options: options,
-  width: width,
-  disabled: disabled,
-  error: error,
-  errorMessage: errorMessage,
-  selectedValue: selectedValue,
-  xIconShow: xIconShow,
-  onChange: onChange,
-  showLabelOnTop: showLabelOnTop,
-  orderBy: orderBy,
-  elementType: elementType
-}));
+const DropdownNew = _ref => {
+  let {
+    isMulti,
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    checkBoxColor,
+    xIconShow,
+    showLabelOnTop,
+    orderBy,
+    elementType
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement(DropdownMain, {
+    className: "DropdownMain",
+    width: width
+  }, isMulti ? /*#__PURE__*/React__default["default"].createElement(DropdownMultiNew, {
+    className: "DropdownMultiNew",
+    placeHolder: placeHolder,
+    label: label,
+    labelEmptyValue: labelEmptyValue,
+    labelColor: labelColor,
+    checkBoxColor: checkBoxColor,
+    required: required,
+    options: options,
+    width: width,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    selectedValue: selectedValue,
+    xIconShow: xIconShow,
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
+  }) : /*#__PURE__*/React__default["default"].createElement(DropdownSingleNew, {
+    className: "DropdownSingleNew",
+    placeHolder: placeHolder,
+    label: label,
+    labelEmptyValue: labelEmptyValue,
+    labelColor: labelColor,
+    checkBoxColor: checkBoxColor,
+    required: required,
+    options: options,
+    width: width,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    selectedValue: selectedValue,
+    xIconShow: xIconShow,
+    onChange: onChange,
+    showLabelOnTop: showLabelOnTop,
+    orderBy: orderBy,
+    elementType: elementType
+  }));
+};
 DropdownNew.propTypes = {
   placeHolder: PropTypes.string,
   label: PropTypes.string,
@@ -12062,10 +12066,10 @@ const DatePicker = ({
   startDateValue,
   endDateValue
 }) => {
-  const [startDate, setStartDate] = React.useState(null);
-  const [endDate, setEndDate] = React.useState(null);
-  const [currentStartDate, setCurrentStartDate] = React.useState(new Date());
-  const [currentEndDate, setCurrentEndDate] = React.useState(null);
+  const [startDate, setStartDate] = React$1.useState(null);
+  const [endDate, setEndDate] = React$1.useState(null);
+  const [currentStartDate, setCurrentStartDate] = React$1.useState(new Date());
+  const [currentEndDate, setCurrentEndDate] = React$1.useState(null);
   const handleDateSelect = date => {
     if (!startDate) {
       setStartDate(date);
@@ -12090,7 +12094,7 @@ const DatePicker = ({
     setCurrentStartDate(nextDate);
     setCurrentEndDate(null);
   };
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (value === '' || value === undefined) {
       setStartDate(null);
       setEndDate(null);
@@ -12174,30 +12178,31 @@ const DatePicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const RangePicker = ({
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [value, setValue] = React.useState(''); // Added value state
-  const [startDateValue, setStartDateValue] = React.useState(null); // Added value state
-  const [endDateValue, setEndDateValue] = React.useState(null); // Added value state
-
-  const [hoverInputContainer, setHoverInputContainer] = React.useState(false);
-  const [hoverOptionsContainer, setHoverOptionsContainer] = React.useState(false);
-  const inputRef = React.useRef(null);
-  React.useEffect(() => {
+const RangePicker = _ref => {
+  let {
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
+  const [isFocused, setIsFocused] = React$1.useState(false);
+  const [isOpen, setIsOpen] = React$1.useState(false);
+  const [value, setValue] = React$1.useState(''); // Added value state
+  const [startDateValue, setStartDateValue] = React$1.useState(null); // Added value state
+  const [endDateValue, setEndDateValue] = React$1.useState(null); // Added value state
+
+  const [hoverInputContainer, setHoverInputContainer] = React$1.useState(false);
+  const [hoverOptionsContainer, setHoverOptionsContainer] = React$1.useState(false);
+  const inputRef = React$1.useRef(null);
+  React$1.useEffect(() => {
     const handleClickOutside = event => {
       if (inputRef.current && !inputRef.current.contains(event.target)) {
         setIsFocused(false);
@@ -12212,7 +12217,7 @@ const RangePicker = ({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (selectedValue && selectedValue.includes('-')) {
       const dateArray = selectedValue.split('-');
       const startDate = new Date(dateArray[0]);
@@ -12222,7 +12227,7 @@ const RangePicker = ({
       setValue(selectedValue);
     }
   }, [selectedValue]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setIsOpen(false);
@@ -12550,8 +12555,8 @@ const QuarterPopupPicker = ({
   startDateValue,
   availableQuarters
 }) => {
-  const [selectedQuarter, setSelectedQuarter] = React.useState(null);
-  const [currentStartDate, setCurrentStartDate] = React.useState(new Date(new Date().getFullYear(), 0, 1));
+  const [selectedQuarter, setSelectedQuarter] = React$1.useState(null);
+  const [currentStartDate, setCurrentStartDate] = React$1.useState(new Date(new Date().getFullYear(), 0, 1));
   const handleDateSelect = date => {
     setSelectedQuarter(date);
     onChangeDate(`${date}-${currentStartDate.getFullYear()}`);
@@ -12569,7 +12574,7 @@ const QuarterPopupPicker = ({
   //   setCurrentStartDate(nextDate);
   // };
 
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (value === '' || value === undefined) {
       setSelectedQuarter(null);
     } else {
@@ -12619,30 +12624,31 @@ 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
-}) => {
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [value, setValue] = React.useState('');
-  const [startDateValue, setStartDateValue] = React.useState(null);
-  const [hoverInputContainer, setHoverInputContainer] = React.useState(false);
-  const [hoverOptionsContainer, setHoverOptionsContainer] = React.useState(false);
-  const inputRef = React.useRef(null);
-  React.useEffect(() => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
+  const [isFocused, setIsFocused] = React$1.useState(false);
+  const [isOpen, setIsOpen] = React$1.useState(false);
+  const [value, setValue] = React$1.useState('');
+  const [startDateValue, setStartDateValue] = React$1.useState(null);
+  const [hoverInputContainer, setHoverInputContainer] = React$1.useState(false);
+  const [hoverOptionsContainer, setHoverOptionsContainer] = React$1.useState(false);
+  const inputRef = React$1.useRef(null);
+  React$1.useEffect(() => {
     const handleClickOutside = event => {
       if (inputRef.current && !inputRef.current.contains(event.target)) {
         setIsFocused(false);
@@ -12657,7 +12663,7 @@ const QuarterPicker = ({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (selectedValue && selectedValue.includes('-')) {
       const dateArray = selectedValue.split('-');
       const startDate = new Date(dateArray[0]);
@@ -12665,7 +12671,7 @@ const QuarterPicker = ({
       setValue(selectedValue);
     }
   }, [selectedValue]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setIsOpen(false);
@@ -12978,13 +12984,13 @@ const MonthPopupPicker = ({
   startDateValue,
   availableMonths
 }) => {
-  const [selectedMonth, setSelectedMonth] = React.useState(null);
-  const [currentStartDate, setCurrentStartDate] = React.useState(new Date(new Date().getFullYear(), 0, 1));
+  const [selectedMonth, setSelectedMonth] = React$1.useState(null);
+  const [currentStartDate, setCurrentStartDate] = React$1.useState(new Date(new Date().getFullYear(), 0, 1));
   const handleDateSelect = date => {
     setSelectedMonth(date);
     onChangeDate(date);
   };
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (value === '' || value === undefined) {
       setSelectedMonth(null);
     } else {
@@ -13073,29 +13079,30 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue
-}) => {
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [value, setValue] = React.useState('');
-  const [startDateValue, setStartDateValue] = React.useState(null);
-  const [hoverInputContainer, setHoverInputContainer] = React.useState(false);
-  const [hoverOptionsContainer, setHoverOptionsContainer] = React.useState(false);
-  const inputRef = React.useRef(null);
-  React.useEffect(() => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue
+  } = _ref;
+  const [isFocused, setIsFocused] = React$1.useState(false);
+  const [isOpen, setIsOpen] = React$1.useState(false);
+  const [value, setValue] = React$1.useState('');
+  const [startDateValue, setStartDateValue] = React$1.useState(null);
+  const [hoverInputContainer, setHoverInputContainer] = React$1.useState(false);
+  const [hoverOptionsContainer, setHoverOptionsContainer] = React$1.useState(false);
+  const inputRef = React$1.useRef(null);
+  React$1.useEffect(() => {
     const handleClickOutside = event => {
       if (inputRef.current && !inputRef.current.contains(event.target)) {
         setIsFocused(false);
@@ -13110,14 +13117,14 @@ const MonthPicker = ({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (selectedValue && selectedValue.includes(' | ')) {
       setStartDateValue(selectedValue);
       // setValue(`${moment(selectedValue).format('MMMM | YYYY')}`);
       setValue(selectedValue);
     }
   }, [selectedValue]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setIsOpen(false);
@@ -13343,17 +13350,17 @@ const FilterPanel = props => {
     showShadow,
     tooltipTextGoButton
   } = props;
-  const [FieldsDataState, setFieldsDataState] = React.useState(fieldsData);
-  const [Reset, setReset] = React.useState(false);
-  const [FieldsContainerWidth, setFieldsContainerWidth] = React.useState(0);
-  const AllFieldsContainerRef = React.useRef();
-  React.useEffect(() => {
+  const [FieldsDataState, setFieldsDataState] = React$1.useState(fieldsData);
+  const [Reset, setReset] = React$1.useState(false);
+  const [FieldsContainerWidth, setFieldsContainerWidth] = React$1.useState(0);
+  const AllFieldsContainerRef = React$1.useRef();
+  React$1.useEffect(() => {
     const {
       offsetWidth
     } = AllFieldsContainerRef.current;
     setFieldsContainerWidth(offsetWidth - 2);
   }, [width]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (useExternalFilterState) {
       setFieldsDataState(fieldsData);
     } else {
@@ -14350,8 +14357,8 @@ const ReportTable = props => {
     onSortChangeCallback,
     onSortReset
   } = props;
-  const [FormattedTableData, setFormattedTableData] = React.useState(tableData);
-  React.useState(false);
+  const [FormattedTableData, setFormattedTableData] = React$1.useState(tableData);
+  React$1.useState(false);
   const getPaginatedRows = () => {
     return FormattedTableData.rowsValues;
   };
@@ -14364,7 +14371,7 @@ const ReportTable = props => {
     const totalRecords = totalTableResults;
     return `Showing ${startRecord}-${endRecord} of ${totalRecords}`;
   };
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (!tableData || !tableData.columnsHeadings || !tableData.rowsValues) {
       return;
     }
@@ -14500,8 +14507,8 @@ const ReportTable = props => {
     }
     return topFactor;
   };
-  const [activeSortState, setActiveSortState] = React.useState({});
-  React.useEffect(() => {
+  const [activeSortState, setActiveSortState] = React$1.useState({});
+  React$1.useEffect(() => {
     if (activeSortState) {
       Object.entries(activeSortState).forEach(_ref => {
         let [key, value] = _ref;
@@ -15265,7 +15272,7 @@ const BannerEventBoxList = props => {
     bannerWidth,
     showDraft
   } = props;
-  const [IsItemOpen, setIsItemOpen] = React.useState(false);
+  const [IsItemOpen, setIsItemOpen] = React$1.useState(false);
   const handleToggle = () => {
     if (disableToggle) return;
     setIsItemOpen(!IsItemOpen);
@@ -15466,7 +15473,7 @@ const DialogOverlay = props => {
     onDialogClose,
     className
   } = props;
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const modal = document.querySelector('dialog');
     modal.showModal();
   }, []);
@@ -25908,10 +25915,10 @@ const CollapseHeader = props => {
     buttonText,
     disabled
   } = props;
-  const [retailersDataState, setRetailersDataState] = React.useState(null);
-  const [viewCreativeListBoxOpenedState, setViewCreativeListBoxOpenedState] = React.useState(false);
-  const viewCreativeContainerRef = React.useRef(null);
-  React.useEffect(() => {
+  const [retailersDataState, setRetailersDataState] = React$1.useState(null);
+  const [viewCreativeListBoxOpenedState, setViewCreativeListBoxOpenedState] = React$1.useState(false);
+  const viewCreativeContainerRef = React$1.useRef(null);
+  React$1.useEffect(() => {
     let newData = [];
     if (viewCreativeRetailersData && viewCreativeRetailersData.length > 0) {
       newData = viewCreativeRetailersData?.map(item => ({
@@ -26273,29 +26280,30 @@ const DeleteIcon = dt.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [showOptions, setShowOptions] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState("");
-  const [selectedOptions, setSelectedOptions] = React.useState([]);
-  const [hoverInputContainer, setHoverInputContainer] = React.useState(false);
-  const [hoverOptionsContainer, setHoverOptionsContainer] = React.useState(false);
-  const inputRef = React.useRef(null);
-  const containerRef = React.useRef(null);
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
+  const [isFocused, setIsFocused] = React$1.useState(false);
+  const [showOptions, setShowOptions] = React$1.useState(false);
+  const [inputValue, setInputValue] = React$1.useState("");
+  const [selectedOptions, setSelectedOptions] = React$1.useState([]);
+  const [hoverInputContainer, setHoverInputContainer] = React$1.useState(false);
+  const [hoverOptionsContainer, setHoverOptionsContainer] = React$1.useState(false);
+  const inputRef = React$1.useRef(null);
+  const containerRef = React$1.useRef(null);
   const highlightText = (text, highlight) => {
     if (!highlight) return text;
     const lowerText = text.toLowerCase();
@@ -26320,17 +26328,17 @@ const QuickFilterDropdownSingle = ({
     return parts;
   };
   const filteredoptions = options?.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
     }
   }, [selectedValue]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (isFocused && inputRef?.current) {
       inputRef?.current?.focus();
     }
   }, [isFocused]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setShowOptions(false);
@@ -26685,43 +26693,44 @@ const IconContainer$1 = dt.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [showOptions, setShowOptions] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState('');
-  const [selectedOptions, setSelectedOptions] = React.useState([]);
-  const [hoverInputContainer, setHoverInputContainer] = React.useState(false);
-  const [hoverOptionsContainer, setHoverOptionsContainer] = React.useState(false);
-  const inputRef = React.useRef(null);
-  const containerRef = React.useRef(null);
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
+  const [isFocused, setIsFocused] = React$1.useState(false);
+  const [showOptions, setShowOptions] = React$1.useState(false);
+  const [inputValue, setInputValue] = React$1.useState('');
+  const [selectedOptions, setSelectedOptions] = React$1.useState([]);
+  const [hoverInputContainer, setHoverInputContainer] = React$1.useState(false);
+  const [hoverOptionsContainer, setHoverOptionsContainer] = React$1.useState(false);
+  const inputRef = React$1.useRef(null);
+  const containerRef = React$1.useRef(null);
   const filteredoptions = options?.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
     }
   }, [selectedValue]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (isFocused && inputRef?.current) {
       inputRef?.current?.focus();
     }
   }, [isFocused]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setShowOptions(false);
@@ -27306,11 +27315,11 @@ const OneColumnContainer = props => {
     onBannerClick,
     columnTitle
   } = props;
-  const [hover, setHover] = React.useState(false);
-  const [offsetWidth, setOffsetWidth] = React.useState(200);
-  const nodeRef = React.useRef(null);
-  const anotherRef = React.useRef(null);
-  React.useEffect(() => {
+  const [hover, setHover] = React$1.useState(false);
+  const [offsetWidth, setOffsetWidth] = React$1.useState(200);
+  const nodeRef = React$1.useRef(null);
+  const anotherRef = React$1.useRef(null);
+  React$1.useEffect(() => {
     setOffsetWidth(anotherRef?.current?.offsetWidth);
   }, [anotherRef]);
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer, {
@@ -27839,7 +27848,7 @@ const BarChartsByWeeks = props => {
   // const [BarChartContainerWidth, setBarChartContainerWidth] = useState(0);
   // const [BarChartContainerHeight, setBarChartContainerHeight] = useState(0);
 
-  const controlsContainerRef = React.useRef();
+  const controlsContainerRef = React$1.useRef();
 
   // useEffect(() => {
   //   const { offsetWidth } = controlsContainerRef.current;
@@ -28312,9 +28321,9 @@ const TotalDoughnutChart = props => {
     noDataText,
     textAfterValue
   } = props;
-  const [DoughnutChartRadius, setDoughnutChartRadius] = React.useState(0);
-  const [zoomResolution, setZoomResolution] = React.useState(1);
-  const DoughnutChartContainerRef = React.useRef();
+  const [DoughnutChartRadius, setDoughnutChartRadius] = React$1.useState(0);
+  const [zoomResolution, setZoomResolution] = React$1.useState(1);
+  const DoughnutChartContainerRef = React$1.useRef();
   const dotCutTrenty = row => {
     if (!row || !row.value) return null;
     let valueNew = 0;
@@ -28325,7 +28334,7 @@ const TotalDoughnutChart = props => {
     }
     return dotCut ? getFormattedValue(valueNew) : getNumberWithCommas(valueNew);
   };
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const handleResize = () => {
       setZoomResolution(window.devicePixelRatio);
     };
@@ -28341,7 +28350,7 @@ const TotalDoughnutChart = props => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     const MIN_RADIUS = 45;
     if (!DoughnutChartContainerRef) return;
     const {
@@ -28736,8 +28745,8 @@ const TotalHorizontalCharts = props => {
     hideTitle
   } = props;
   const barBackgrounds = chartsData.map(bg => bg.color);
-  const topHeader = React.useRef();
-  const wrapper = React.useRef();
+  const topHeader = React$1.useRef();
+  const wrapper = React$1.useRef();
   const BAR_HEIGHT = 40; // Height of each bar including padding
   const CHART_PADDING = 40; // Total padding for chart (top + bottom)
 
@@ -28756,8 +28765,8 @@ const TotalHorizontalCharts = props => {
     // 2. Height needed for specified number of bars
     return Math.min(chartsData.length * BAR_HEIGHT + CHART_PADDING, visibleBarsHeight + CHART_PADDING);
   };
-  const [showLegendTooltip, setShowLegendTooltip] = React.useState(false);
-  const [tooltipText, setTooltipText] = React.useState({
+  const [showLegendTooltip, setShowLegendTooltip] = React$1.useState(false);
+  const [tooltipText, setTooltipText] = React$1.useState({
     content: '',
     clientX: 0,
     clientY: 0
@@ -29261,10 +29270,10 @@ const PopupCharts = props => {
     subtitleTextColor,
     onCloseClick
   } = props;
-  const [IsPopupChartsOpen, setIsPopupChartsOpen] = React.useState(isPopupChartsOpen);
-  const divRef = React.useRef(null);
-  const [divHeight, setDivHeight] = React.useState(0);
-  React.useEffect(() => {
+  const [IsPopupChartsOpen, setIsPopupChartsOpen] = React$1.useState(isPopupChartsOpen);
+  const divRef = React$1.useRef(null);
+  const [divHeight, setDivHeight] = React$1.useState(0);
+  React$1.useEffect(() => {
     if (divRef.current) {
       const {
         top,
@@ -29274,7 +29283,7 @@ const PopupCharts = props => {
       setDivHeight(newHeight);
     }
   }, [height]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     setIsPopupChartsOpen(isPopupChartsOpen);
   }, [isPopupChartsOpen]);
   const closePopupCharts = e => {
@@ -29734,12 +29743,12 @@ const Heatmap = props => {
     lowLimit,
     barHeight
   } = props;
-  const [refreshRequired, setRefreshRequired] = React.useState(false);
-  const [tooltip, setTooltip] = React.useState(null);
-  const [barHeightState, setBarHeightState] = React.useState(barHeight);
-  const barRefs = React.useRef([]); // Array to store refs for each bar
-  const barsContainerRef = React.useRef(null);
-  const [tooltipPosition, setTooltipPosition] = React.useState({
+  const [refreshRequired, setRefreshRequired] = React$1.useState(false);
+  const [tooltip, setTooltip] = React$1.useState(null);
+  const [barHeightState, setBarHeightState] = React$1.useState(barHeight);
+  const barRefs = React$1.useRef([]); // Array to store refs for each bar
+  const barsContainerRef = React$1.useRef(null);
+  const [tooltipPosition, setTooltipPosition] = React$1.useState({
     x: 0,
     y: 0
   });
@@ -29749,12 +29758,12 @@ const Heatmap = props => {
 
   // Calculate the total value of all bars
   const totalValue = filteredData.reduce((sum, item) => sum + item.value, 0);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     setRefreshRequired(!refreshRequired);
   }, [data]);
 
   // Reset tooltip when height changes
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     setBarHeightState(barHeight);
     setTooltip(null);
   }, [barHeight]);
@@ -29975,7 +29984,7 @@ const IconButton = props => {
     onClick,
     onCancelClick
   } = props;
-  const [progress, setProgress] = React.useState(0);
+  const [progress, setProgress] = React$1.useState(0);
   let interval;
   const incrementProgress = () => {
     if (showProcess && progress <= 90) {
@@ -29993,7 +30002,7 @@ const IconButton = props => {
       clearInterval(interval);
     }
   };
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     incrementProgress();
   }, [showProcess]);
   const getIcon = icon => {
@@ -30351,7 +30360,7 @@ const BarChart = props => {
     showCurrentCampaignStyle,
     isPercent
   } = props;
-  const controlsContainerRef = React.useRef();
+  const controlsContainerRef = React$1.useRef();
   const areAllDatesEmpty = () => {
     if (!barChartData || barChartData?.length === 0) return true;
     return barChartData?.every(item => !item.date);