sag_components 2.0.0-beta28 → 2.0.0-beta29

package/dist/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React$1 = require('react');
+var React = 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$1);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 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$1.useRef(), a && !N.has(s) && (console.warn(s), N.add(s));
+        }, React.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$1.useContext($e);
+  return React.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$1.useDebugValue(d);
+      "production" !== process.env.NODE_ENV && React.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$1.useDebugValue(r), r;
+        return "production" !== process.env.NODE_ENV && React.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$1.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.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$1.useState(false);
-  const [hover, setHover] = React$1.useState(false);
+  const [clicked, setClicked] = React.useState(false);
+  const [hover, setHover] = React.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$1.useState(false);
+  const [active, setActive] = React.useState(false);
   const showTip = () => {
     timeout = setTimeout(() => {
       setActive(true);
@@ -4071,7 +4071,7 @@ const PieChart = props => {
     textAfterValue,
     noDataText
   } = props;
-  const DoughnutChartContainerRef = React$1.useRef();
+  const DoughnutChartContainerRef = React.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$1.useState([]);
-  React$1.useEffect(() => {
+  const [processedBanners, setProcessedBanners] = React.useState([]);
+  React.useEffect(() => {
     const formatedBanners = banners?.map(banner => {
       if (banner.name === 'StopAndShop') {
         return {
@@ -4569,16 +4569,16 @@ const BannersDropdown = props => {
     });
     setProcessedBanners(formatedBanners);
   }, []);
-  const [toggled, setToggled] = React$1.useState(false);
-  const [bannerButtonText, setBannerButtonText] = React$1.useState('All Banners');
-  const [bannerButtonArrow, setBannerButtonArrow] = React$1.useState('#2D8DE7');
+  const [toggled, setToggled] = React.useState(false);
+  const [bannerButtonText, setBannerButtonText] = React.useState('All Banners');
+  const [bannerButtonArrow, setBannerButtonArrow] = React.useState('#2D8DE7');
   const choosenBanners = index => {
     const updatedBanners = [...processedBanners];
     updatedBanners[index].checked = !updatedBanners[index].checked;
     setProcessedBanners(updatedBanners);
     onClick(updatedBanners);
   };
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const selectedBanners = processedBanners.filter(banner => !banner.checked);
     if (selectedBanners.length < 1) {
       setBannerButtonText('All Banners');
@@ -4769,7 +4769,7 @@ const LinkButton = _ref => {
   //   className,
   // } = props;
 
-  const [clicked, setClicked] = React$1.useState(false);
+  const [clicked, setClicked] = React.useState(false);
   const handleLinkButtonClick = () => {
     setClicked(true);
     onClick(text);
@@ -4961,8 +4961,8 @@ const EventDetailsCard = props => {
     onBannersDropdownClick,
     disableViewDetailsButton
   } = props;
-  const [processedBanners, setProcessedBanners] = React$1.useState([]);
-  React$1.useEffect(() => {
+  const [processedBanners, setProcessedBanners] = React.useState([]);
+  React.useEffect(() => {
     const formatedBanners = banners.map(banner => {
       if (banner === 'StopAndShop') {
         return {
@@ -5155,20 +5155,20 @@ const LinnerDataBox = props => {
     className,
     customDataFormat
   } = props;
-  return /*#__PURE__*/React.createElement(LinnerContainer$1, {
+  return /*#__PURE__*/React__default["default"].createElement(LinnerContainer$1, {
     className: className,
     backgroundColor: backgroundColor,
     width: width || "100%",
     height: height || "200px",
     customDataFormat: customDataFormat
-  }, data.map((item, index) => /*#__PURE__*/React.createElement(DataBoxWrap, {
+  }, data.map((item, index) => /*#__PURE__*/React__default["default"].createElement(DataBoxWrap, {
     key: `${item.title}`,
     width: `${100 / data.length}%`
-  }, /*#__PURE__*/React.createElement(DataBox$1, null, item.title && /*#__PURE__*/React.createElement(DataBoxTitle$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(DataBox$1, null, item.title && /*#__PURE__*/React__default["default"].createElement(DataBoxTitle$1, {
     className: "DataBoxTitle"
-  }, 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, {
+  }, 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, {
     className: "DataBoxValue"
-  }, "".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", {
+  }, "".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", {
     className: "vertival-line",
     style: {
       width: "1px",
@@ -5593,7 +5593,7 @@ const SagIconButton = props => {
     onButtonClick,
     className
   } = props;
-  const [activeState, setActiveState] = React$1.useState(openState);
+  const [activeState, setActiveState] = React.useState(openState);
   const onClickHandler = event => {
     onButtonClick(event);
     setActiveState(prevState => !prevState);
@@ -5923,12 +5923,12 @@ const TabMenu = props => {
     onTopButtonClick,
     tabs
   } = props;
-  const [activeTab, setActiveTab] = React$1.useState(currentTab);
+  const [activeTab, setActiveTab] = React.useState(currentTab);
   const handleTabChange = index => {
     onTabChange(index);
     setActiveTab(index);
   };
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     setActiveTab(currentTab);
   }, [currentTab]);
   return /*#__PURE__*/React__default["default"].createElement(TabMenuContainer, {
@@ -10915,14 +10915,14 @@ const DropdownSingleNew = ({
   orderBy,
   elementType
 }) => {
-  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 [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);
   let filteredOptions = options?.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
   switch (orderBy) {
     case "asc":
@@ -10940,17 +10940,17 @@ const DropdownSingleNew = ({
       }
       break;
   }
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
     }
   }, [selectedValue]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (isFocused && inputRef?.current) {
       inputRef?.current?.focus();
     }
   }, [isFocused]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setShowOptions(false);
@@ -11413,14 +11413,14 @@ const DropdownMultiNew = ({
   orderBy,
   elementType
 }) => {
-  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 [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);
   let filteredOptions = options?.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
   switch (orderBy) {
     case "asc":
@@ -11438,17 +11438,17 @@ const DropdownMultiNew = ({
       }
       break;
   }
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
     }
   }, [selectedValue]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (isFocused && inputRef?.current) {
       inputRef?.current?.focus();
     }
   }, [isFocused]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setShowOptions(false);
@@ -12066,10 +12066,10 @@ const DatePicker = ({
   startDateValue,
   endDateValue
 }) => {
-  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 [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 handleDateSelect = date => {
     if (!startDate) {
       setStartDate(date);
@@ -12094,7 +12094,7 @@ const DatePicker = ({
     setCurrentStartDate(nextDate);
     setCurrentEndDate(null);
   };
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (value === '' || value === undefined) {
       setStartDate(null);
       setEndDate(null);
@@ -12193,16 +12193,16 @@ const RangePicker = _ref => {
     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 [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 handleClickOutside = event => {
       if (inputRef.current && !inputRef.current.contains(event.target)) {
         setIsFocused(false);
@@ -12217,7 +12217,7 @@ const RangePicker = _ref => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (selectedValue && selectedValue.includes('-')) {
       const dateArray = selectedValue.split('-');
       const startDate = new Date(dateArray[0]);
@@ -12227,7 +12227,7 @@ const RangePicker = _ref => {
       setValue(selectedValue);
     }
   }, [selectedValue]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setIsOpen(false);
@@ -12555,8 +12555,8 @@ const QuarterPopupPicker = ({
   startDateValue,
   availableQuarters
 }) => {
-  const [selectedQuarter, setSelectedQuarter] = React$1.useState(null);
-  const [currentStartDate, setCurrentStartDate] = React$1.useState(new Date(new Date().getFullYear(), 0, 1));
+  const [selectedQuarter, setSelectedQuarter] = React.useState(null);
+  const [currentStartDate, setCurrentStartDate] = React.useState(new Date(new Date().getFullYear(), 0, 1));
   const handleDateSelect = date => {
     setSelectedQuarter(date);
     onChangeDate(`${date}-${currentStartDate.getFullYear()}`);
@@ -12574,7 +12574,7 @@ const QuarterPopupPicker = ({
   //   setCurrentStartDate(nextDate);
   // };
 
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (value === '' || value === undefined) {
       setSelectedQuarter(null);
     } else {
@@ -12641,14 +12641,14 @@ const QuarterPicker = _ref => {
     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 [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 handleClickOutside = event => {
       if (inputRef.current && !inputRef.current.contains(event.target)) {
         setIsFocused(false);
@@ -12663,7 +12663,7 @@ const QuarterPicker = _ref => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (selectedValue && selectedValue.includes('-')) {
       const dateArray = selectedValue.split('-');
       const startDate = new Date(dateArray[0]);
@@ -12671,7 +12671,7 @@ const QuarterPicker = _ref => {
       setValue(selectedValue);
     }
   }, [selectedValue]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setIsOpen(false);
@@ -12984,13 +12984,13 @@ const MonthPopupPicker = ({
   startDateValue,
   availableMonths
 }) => {
-  const [selectedMonth, setSelectedMonth] = React$1.useState(null);
-  const [currentStartDate, setCurrentStartDate] = React$1.useState(new Date(new Date().getFullYear(), 0, 1));
+  const [selectedMonth, setSelectedMonth] = React.useState(null);
+  const [currentStartDate, setCurrentStartDate] = React.useState(new Date(new Date().getFullYear(), 0, 1));
   const handleDateSelect = date => {
     setSelectedMonth(date);
     onChangeDate(date);
   };
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (value === '' || value === undefined) {
       setSelectedMonth(null);
     } else {
@@ -13095,14 +13095,14 @@ const MonthPicker = _ref => {
     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 [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 handleClickOutside = event => {
       if (inputRef.current && !inputRef.current.contains(event.target)) {
         setIsFocused(false);
@@ -13117,14 +13117,14 @@ const MonthPicker = _ref => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (selectedValue && selectedValue.includes(' | ')) {
       setStartDateValue(selectedValue);
       // setValue(`${moment(selectedValue).format('MMMM | YYYY')}`);
       setValue(selectedValue);
     }
   }, [selectedValue]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setIsOpen(false);
@@ -13350,17 +13350,17 @@ const FilterPanel = props => {
     showShadow,
     tooltipTextGoButton
   } = props;
-  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 [FieldsDataState, setFieldsDataState] = React.useState(fieldsData);
+  const [Reset, setReset] = React.useState(false);
+  const [FieldsContainerWidth, setFieldsContainerWidth] = React.useState(0);
+  const AllFieldsContainerRef = React.useRef();
+  React.useEffect(() => {
     const {
       offsetWidth
     } = AllFieldsContainerRef.current;
     setFieldsContainerWidth(offsetWidth - 2);
   }, [width]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (useExternalFilterState) {
       setFieldsDataState(fieldsData);
     } else {
@@ -14357,8 +14357,8 @@ const ReportTable = props => {
     onSortChangeCallback,
     onSortReset
   } = props;
-  const [FormattedTableData, setFormattedTableData] = React$1.useState(tableData);
-  React$1.useState(false);
+  const [FormattedTableData, setFormattedTableData] = React.useState(tableData);
+  React.useState(false);
   const getPaginatedRows = () => {
     return FormattedTableData.rowsValues;
   };
@@ -14371,7 +14371,7 @@ const ReportTable = props => {
     const totalRecords = totalTableResults;
     return `Showing ${startRecord}-${endRecord} of ${totalRecords}`;
   };
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (!tableData || !tableData.columnsHeadings || !tableData.rowsValues) {
       return;
     }
@@ -14507,8 +14507,8 @@ const ReportTable = props => {
     }
     return topFactor;
   };
-  const [activeSortState, setActiveSortState] = React$1.useState({});
-  React$1.useEffect(() => {
+  const [activeSortState, setActiveSortState] = React.useState({});
+  React.useEffect(() => {
     if (activeSortState) {
       Object.entries(activeSortState).forEach(_ref => {
         let [key, value] = _ref;
@@ -15272,7 +15272,7 @@ const BannerEventBoxList = props => {
     bannerWidth,
     showDraft
   } = props;
-  const [IsItemOpen, setIsItemOpen] = React$1.useState(false);
+  const [IsItemOpen, setIsItemOpen] = React.useState(false);
   const handleToggle = () => {
     if (disableToggle) return;
     setIsItemOpen(!IsItemOpen);
@@ -15473,7 +15473,7 @@ const DialogOverlay = props => {
     onDialogClose,
     className
   } = props;
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const modal = document.querySelector('dialog');
     modal.showModal();
   }, []);
@@ -25915,10 +25915,10 @@ const CollapseHeader = props => {
     buttonText,
     disabled
   } = props;
-  const [retailersDataState, setRetailersDataState] = React$1.useState(null);
-  const [viewCreativeListBoxOpenedState, setViewCreativeListBoxOpenedState] = React$1.useState(false);
-  const viewCreativeContainerRef = React$1.useRef(null);
-  React$1.useEffect(() => {
+  const [retailersDataState, setRetailersDataState] = React.useState(null);
+  const [viewCreativeListBoxOpenedState, setViewCreativeListBoxOpenedState] = React.useState(false);
+  const viewCreativeContainerRef = React.useRef(null);
+  React.useEffect(() => {
     let newData = [];
     if (viewCreativeRetailersData && viewCreativeRetailersData.length > 0) {
       newData = viewCreativeRetailersData?.map(item => ({
@@ -26296,14 +26296,14 @@ const QuickFilterDropdownSingle = _ref => {
     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 [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 highlightText = (text, highlight) => {
     if (!highlight) return text;
     const lowerText = text.toLowerCase();
@@ -26328,17 +26328,17 @@ const QuickFilterDropdownSingle = _ref => {
     return parts;
   };
   const filteredoptions = options?.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
     }
   }, [selectedValue]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (isFocused && inputRef?.current) {
       inputRef?.current?.focus();
     }
   }, [isFocused]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setShowOptions(false);
@@ -26711,26 +26711,26 @@ const QuickFilterDropdownMultiSelection = _ref => {
     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 [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 filteredoptions = options?.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
     }
   }, [selectedValue]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (isFocused && inputRef?.current) {
       inputRef?.current?.focus();
     }
   }, [isFocused]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (!hoverInputContainer && !hoverOptionsContainer) {
       setIsFocused(false);
       setShowOptions(false);
@@ -27315,11 +27315,11 @@ const OneColumnContainer = props => {
     onBannerClick,
     columnTitle
   } = props;
-  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(() => {
+  const [hover, setHover] = React.useState(false);
+  const [offsetWidth, setOffsetWidth] = React.useState(200);
+  const nodeRef = React.useRef(null);
+  const anotherRef = React.useRef(null);
+  React.useEffect(() => {
     setOffsetWidth(anotherRef?.current?.offsetWidth);
   }, [anotherRef]);
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer, {
@@ -27848,7 +27848,7 @@ const BarChartsByWeeks = props => {
   // const [BarChartContainerWidth, setBarChartContainerWidth] = useState(0);
   // const [BarChartContainerHeight, setBarChartContainerHeight] = useState(0);
 
-  const controlsContainerRef = React$1.useRef();
+  const controlsContainerRef = React.useRef();
 
   // useEffect(() => {
   //   const { offsetWidth } = controlsContainerRef.current;
@@ -28321,9 +28321,9 @@ const TotalDoughnutChart = props => {
     noDataText,
     textAfterValue
   } = props;
-  const [DoughnutChartRadius, setDoughnutChartRadius] = React$1.useState(0);
-  const [zoomResolution, setZoomResolution] = React$1.useState(1);
-  const DoughnutChartContainerRef = React$1.useRef();
+  const [DoughnutChartRadius, setDoughnutChartRadius] = React.useState(0);
+  const [zoomResolution, setZoomResolution] = React.useState(1);
+  const DoughnutChartContainerRef = React.useRef();
   const dotCutTrenty = row => {
     if (!row || !row.value) return null;
     let valueNew = 0;
@@ -28334,7 +28334,7 @@ const TotalDoughnutChart = props => {
     }
     return dotCut ? getFormattedValue(valueNew) : getNumberWithCommas(valueNew);
   };
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const handleResize = () => {
       setZoomResolution(window.devicePixelRatio);
     };
@@ -28350,7 +28350,7 @@ const TotalDoughnutChart = props => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const MIN_RADIUS = 45;
     if (!DoughnutChartContainerRef) return;
     const {
@@ -28745,8 +28745,8 @@ const TotalHorizontalCharts = props => {
     hideTitle
   } = props;
   const barBackgrounds = chartsData.map(bg => bg.color);
-  const topHeader = React$1.useRef();
-  const wrapper = React$1.useRef();
+  const topHeader = React.useRef();
+  const wrapper = React.useRef();
   const BAR_HEIGHT = 40; // Height of each bar including padding
   const CHART_PADDING = 40; // Total padding for chart (top + bottom)
 
@@ -28765,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$1.useState(false);
-  const [tooltipText, setTooltipText] = React$1.useState({
+  const [showLegendTooltip, setShowLegendTooltip] = React.useState(false);
+  const [tooltipText, setTooltipText] = React.useState({
     content: '',
     clientX: 0,
     clientY: 0
@@ -29270,10 +29270,10 @@ const PopupCharts = props => {
     subtitleTextColor,
     onCloseClick
   } = props;
-  const [IsPopupChartsOpen, setIsPopupChartsOpen] = React$1.useState(isPopupChartsOpen);
-  const divRef = React$1.useRef(null);
-  const [divHeight, setDivHeight] = React$1.useState(0);
-  React$1.useEffect(() => {
+  const [IsPopupChartsOpen, setIsPopupChartsOpen] = React.useState(isPopupChartsOpen);
+  const divRef = React.useRef(null);
+  const [divHeight, setDivHeight] = React.useState(0);
+  React.useEffect(() => {
     if (divRef.current) {
       const {
         top,
@@ -29283,7 +29283,7 @@ const PopupCharts = props => {
       setDivHeight(newHeight);
     }
   }, [height]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     setIsPopupChartsOpen(isPopupChartsOpen);
   }, [isPopupChartsOpen]);
   const closePopupCharts = e => {
@@ -29743,12 +29743,12 @@ const Heatmap = props => {
     lowLimit,
     barHeight
   } = props;
-  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({
+  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({
     x: 0,
     y: 0
   });
@@ -29758,12 +29758,12 @@ const Heatmap = props => {
 
   // Calculate the total value of all bars
   const totalValue = filteredData.reduce((sum, item) => sum + item.value, 0);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     setRefreshRequired(!refreshRequired);
   }, [data]);
 
   // Reset tooltip when height changes
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     setBarHeightState(barHeight);
     setTooltip(null);
   }, [barHeight]);
@@ -29984,7 +29984,7 @@ const IconButton = props => {
     onClick,
     onCancelClick
   } = props;
-  const [progress, setProgress] = React$1.useState(0);
+  const [progress, setProgress] = React.useState(0);
   let interval;
   const incrementProgress = () => {
     if (showProcess && progress <= 90) {
@@ -30002,7 +30002,7 @@ const IconButton = props => {
       clearInterval(interval);
     }
   };
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     incrementProgress();
   }, [showProcess]);
   const getIcon = icon => {
@@ -30360,7 +30360,7 @@ const BarChart = props => {
     showCurrentCampaignStyle,
     isPercent
   } = props;
-  const controlsContainerRef = React$1.useRef();
+  const controlsContainerRef = React.useRef();
   const areAllDatesEmpty = () => {
     if (!barChartData || barChartData?.length === 0) return true;
     return barChartData?.every(item => !item.date);