sag_components 2.0.0-beta24 → 2.0.0-beta26

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React$1, { useRef, useDebugValue, createElement, useContext, useState, useEffect } from 'react';
+import React, { useRef, useDebugValue, createElement, useContext, useState, useEffect } from 'react';
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$2, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, Brush } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -2561,7 +2561,7 @@ function Fe(e) {
 }
 var Me = new ke(),
   ze = Fe(),
-  $e = /*#__PURE__*/React$1.createContext({
+  $e = /*#__PURE__*/React.createContext({
     shouldForwardProp: void 0,
     styleSheet: Me,
     stylis: ze
@@ -2662,7 +2662,7 @@ var Ke = z(v),
       return r;
     }, e;
   }(),
-  et = /*#__PURE__*/React$1.createContext(void 0);
+  et = /*#__PURE__*/React.createContext(void 0);
   et.Consumer;
 var ot = {},
   st = new Set();
@@ -2704,7 +2704,7 @@ function it(e, o, s) {
         p = e.foldedComponentIds,
         d = e.styledComponentId,
         h = e.target,
-        f = React$1.useContext(et),
+        f = React.useContext(et),
         m = Ge(),
         y = e.shouldForwardProp || m.shouldForwardProp;
       "production" !== process.env.NODE_ENV && useDebugValue(d);
@@ -2733,7 +2733,7 @@ function it(e, o, s) {
     }(D, e, o);
   }
   O.displayName = y;
-  var D = /*#__PURE__*/React$1.forwardRef(O);
+  var D = /*#__PURE__*/React.forwardRef(O);
   return D.attrs = S, D.componentStyle = N, D.displayName = y, D.shouldForwardProp = w, D.foldedComponentIds = i ? ie(a.foldedComponentIds, a.styledComponentId) : "", D.styledComponentId = g, D.target = i ? a.target : e, Object.defineProperty(D, "defaultProps", {
     get: function () {
       return this._foldedDefaultProps;
@@ -3176,89 +3176,89 @@ const Button = _ref => {
     const color = disabled ? newDisabledTextColor : newEnabledTextColor;
     switch (icon.toLowerCase()) {
       case 'arrow':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "ArrowRightIcon"
-        }, /*#__PURE__*/React$1.createElement(ButtonArrowRight, {
+        }, /*#__PURE__*/React.createElement(ButtonArrowRight, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'filter':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "FilterIcon"
-        }, /*#__PURE__*/React$1.createElement(FilterIcon, {
+        }, /*#__PURE__*/React.createElement(FilterIcon, {
           height: "150px",
           width: iconWidth,
           color: color
         }));
       case 'options':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "OptionsIcon"
-        }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
+        }, /*#__PURE__*/React.createElement(OptionsIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'download':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "DownloadIcon"
-        }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
+        }, /*#__PURE__*/React.createElement(DownloadIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'document':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "DocumentIcon"
-        }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
+        }, /*#__PURE__*/React.createElement(DocumentIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'fly':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "FlyIcon"
-        }, /*#__PURE__*/React$1.createElement(FlyIcon, {
+        }, /*#__PURE__*/React.createElement(FlyIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'bell':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "BellIcon"
-        }, /*#__PURE__*/React$1.createElement(BellIcon, {
+        }, /*#__PURE__*/React.createElement(BellIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "MaintenanceIcon"
-        }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
+        }, /*#__PURE__*/React.createElement(MaintenanceIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'exit':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "ExitIcon"
-        }, /*#__PURE__*/React$1.createElement(ExitIcon, {
+        }, /*#__PURE__*/React.createElement(ExitIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'eye':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "EyeIcon"
-        }, /*#__PURE__*/React$1.createElement(EyeIcon, {
+        }, /*#__PURE__*/React.createElement(EyeIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'reselect':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        return /*#__PURE__*/React.createElement(IconWrapper$1, {
           className: "ReselectIcon"
-        }, /*#__PURE__*/React$1.createElement(ReselectIcon, {
+        }, /*#__PURE__*/React.createElement(ReselectIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
@@ -3275,11 +3275,11 @@ const Button = _ref => {
     if (!rightIcon || rightIcon === 'none') return '';
     return getIcon(rightIcon);
   };
-  return /*#__PURE__*/React$1.createElement(ButtonContainer, {
+  return /*#__PURE__*/React.createElement(ButtonContainer, {
     className: "ButtonContainer",
     width: width || null,
     height: height || (size === 'small' ? '33px' : '45px')
-  }, isSubmitButton ? /*#__PURE__*/React$1.createElement(InputCommit, {
+  }, isSubmitButton ? /*#__PURE__*/React.createElement(InputCommit, {
     className: clicked ? 'InputCommit-clicked' : 'InputCommit',
     value: text,
     type: "submit",
@@ -3297,7 +3297,7 @@ const Button = _ref => {
     disabled_border_color: disabledBorderColor || '#E3E4E5',
     padding: size === 'small' ? '0 16px' : '0 20px',
     onClick: !disabled ? handleSubmitButtonOnClick : null
-  }) : /*#__PURE__*/React$1.createElement(ButtonItem, {
+  }) : /*#__PURE__*/React.createElement(ButtonItem, {
     className: clicked ? 'ButtonItem-clicked' : 'ButtonItem',
     onMouseEnter: () => setHover(true),
     onMouseLeave: () => setHover(false),
@@ -3315,7 +3315,7 @@ const Button = _ref => {
     disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
     disabled_border_color: disabledBorderColor || '#E3E4E5',
     padding: size === 'small' ? '0 16px' : '0 20px'
-  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$6, {
+  }, getLeftIcon(), /*#__PURE__*/React.createElement(Label$6, {
     className: "Label",
     disabled: disabled
   }, text), getRightIcon()));
@@ -3555,13 +3555,13 @@ const NoDataFoundMessage = props => {
   const {
     noDataText
   } = props;
-  return /*#__PURE__*/React$1.createElement(NoDataFoundContainer, {
+  return /*#__PURE__*/React.createElement(NoDataFoundContainer, {
     id: "NoDataFoundContainer"
-  }, /*#__PURE__*/React$1.createElement(NoDataFoundIcon, {
+  }, /*#__PURE__*/React.createElement(NoDataFoundIcon, {
     id: "NoDataFoundIcon"
-  }), /*#__PURE__*/React$1.createElement(NoDataFoundTitle, {
+  }), /*#__PURE__*/React.createElement(NoDataFoundTitle, {
     id: "NoDataFoundTitle"
-  }, "No Data"), /*#__PURE__*/React$1.createElement(NoDataFoundText, {
+  }, "No Data"), /*#__PURE__*/React.createElement(NoDataFoundText, {
     id: "NoDataFoundText"
   }, noDataText));
 };
@@ -3888,10 +3888,10 @@ const Tooltip$1 = props => {
     clearInterval(timeout);
     setActive(false);
   };
-  return /*#__PURE__*/React$1.createElement(TooltipContainer$2, null, /*#__PURE__*/React$1.createElement(TooltipWrapper$2, {
+  return /*#__PURE__*/React.createElement(TooltipContainer$2, null, /*#__PURE__*/React.createElement(TooltipWrapper$2, {
     onMouseEnter: showTip,
     onMouseLeave: hideTip
-  }, children, active && /*#__PURE__*/React$1.createElement(TooltipTip$1, {
+  }, children, active && /*#__PURE__*/React.createElement(TooltipTip$1, {
     className: `controls ${direction || 'top'}`,
     topFactor: topFactor
   }, content)));
@@ -4040,6 +4040,7 @@ Benchmark.defaultProps = {
   tooltipDirection: 'bottom'
 };
 
+/* eslint-disable no-shadow */
 const PieChart = props => {
   const {
     className,
@@ -4522,35 +4523,35 @@ const BannersDropdown = props => {
     const formatedBanners = banners?.map(banner => {
       if (banner.name === 'StopAndShop') {
         return {
-          icon: /*#__PURE__*/React$1.createElement(StopAndShopNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(StopAndShopNewIcon, null),
           name: 'Stop&Shop',
           checked: banner.checked
         };
       }
       if (banner.name === 'FoodLion') {
         return {
-          icon: /*#__PURE__*/React$1.createElement(FoodLionNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(FoodLionNewIcon, null),
           name: 'Food lion',
           checked: banner.checked
         };
       }
       if (banner.name === 'GiantFood') {
         return {
-          icon: /*#__PURE__*/React$1.createElement(GiantFoodNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(GiantFoodNewIcon, null),
           name: 'Giant Food',
           checked: banner.checked
         };
       }
       if (banner.name === 'TheGiantCompany') {
         return {
-          icon: /*#__PURE__*/React$1.createElement(TheGiantCompanyIcon$1, null),
+          icon: /*#__PURE__*/React.createElement(TheGiantCompanyIcon$1, null),
           name: 'The Giant Company',
           checked: banner.checked
         };
       }
       if (banner.name === 'Hannaford') {
         return {
-          icon: /*#__PURE__*/React$1.createElement(HannafordNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(HannafordNewIcon, null),
           name: 'Hannaford',
           checked: banner.checked
         };
@@ -4578,22 +4579,22 @@ const BannersDropdown = props => {
       setBannerButtonArrow('#757575');
     }
   }, [processedBanners]);
-  return /*#__PURE__*/React$1.createElement(MainContainer$6, null, /*#__PURE__*/React$1.createElement(ToggleBannersWrapper, null, /*#__PURE__*/React$1.createElement(ToggleBanners, {
+  return /*#__PURE__*/React.createElement(MainContainer$6, null, /*#__PURE__*/React.createElement(ToggleBannersWrapper, null, /*#__PURE__*/React.createElement(ToggleBanners, {
     className: bannerButtonText === 'Partial' ? 'partial' : '',
     onClick: () => setToggled(!toggled)
-  }, /*#__PURE__*/React$1.createElement("span", null, bannerButtonText), /*#__PURE__*/React$1.createElement(ArrowWrap, {
+  }, /*#__PURE__*/React.createElement("span", null, bannerButtonText), /*#__PURE__*/React.createElement(ArrowWrap, {
     className: toggled ? 'opened' : 'closed'
-  }, /*#__PURE__*/React$1.createElement(ComboBoxArrowUpIcon, {
+  }, /*#__PURE__*/React.createElement(ComboBoxArrowUpIcon, {
     color: bannerButtonArrow
-  }))), toggled && /*#__PURE__*/React$1.createElement(ToggledDropdown, null, /*#__PURE__*/React$1.createElement(ToggledDropdownTitle, null, "Participating Banners"), /*#__PURE__*/React$1.createElement(ToggledDropdownList, null, processedBanners.map((banner, index) =>
+  }))), toggled && /*#__PURE__*/React.createElement(ToggledDropdown, null, /*#__PURE__*/React.createElement(ToggledDropdownTitle, null, "Participating Banners"), /*#__PURE__*/React.createElement(ToggledDropdownList, null, processedBanners.map((banner, index) =>
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-  React$1.createElement("li", {
+  React.createElement("li", {
     // eslint-disable-next-line react/no-array-index-key
     key: index,
     className: !banner.checked ? 'unchecked' : '',
     onClick: () => choosenBanners(index)
-  }, /*#__PURE__*/React$1.createElement(IconWrap, null, banner.icon), "|", /*#__PURE__*/React$1.createElement("span", null, banner.name)))))));
+  }, /*#__PURE__*/React.createElement(IconWrap, null, banner.icon), "|", /*#__PURE__*/React.createElement("span", null, banner.name)))))));
 };
 BannersDropdown.propTypes = {
   banners: PropTypes.arrayOf(propTypesExports.string),
@@ -4732,19 +4733,18 @@ const InfoIcon = _ref => {
   }));
 };
 
-const LinkButton = _ref => {
-  let {
-    text = '',
-    type = 'primary',
-    size = 'small',
-    height = '',
-    width = '',
-    disabled = false,
-    textColor = '',
-    onClick,
-    leftIcon = 'none',
-    rightIcon = 'none'
-  } = _ref;
+const LinkButton = ({
+  text = '',
+  type = 'primary',
+  size = 'small',
+  height = '',
+  width = '',
+  disabled = false,
+  textColor = '',
+  onClick,
+  leftIcon = 'none',
+  rightIcon = 'none'
+}) => {
   // const {
   //   text,
   //   type,
@@ -4774,105 +4774,105 @@ const LinkButton = _ref => {
     const color = disabled ? '#B1B1B1' : newTextColor;
     switch (icon.toLowerCase()) {
       case 'filter':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "FilterIcon"
-        }, /*#__PURE__*/React$1.createElement(FilterIcon, {
+        }, /*#__PURE__*/React.createElement(FilterIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'options':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "OptionsIcon"
-        }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
+        }, /*#__PURE__*/React.createElement(OptionsIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'download':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "DownloadIcon"
-        }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
+        }, /*#__PURE__*/React.createElement(DownloadIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'document':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "DocumentIcon"
-        }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
+        }, /*#__PURE__*/React.createElement(DocumentIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'fly':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "FlyIcon"
-        }, /*#__PURE__*/React$1.createElement(FlyIcon, {
+        }, /*#__PURE__*/React.createElement(FlyIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'bell':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "BellIcon"
-        }, /*#__PURE__*/React$1.createElement(BellIcon, {
+        }, /*#__PURE__*/React.createElement(BellIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "MaintenanceIcon"
-        }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
+        }, /*#__PURE__*/React.createElement(MaintenanceIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'exit':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "ExitIcon"
-        }, /*#__PURE__*/React$1.createElement(ExitIcon, {
+        }, /*#__PURE__*/React.createElement(ExitIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'eye':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "EyeIcon"
-        }, /*#__PURE__*/React$1.createElement(EyeIcon, {
+        }, /*#__PURE__*/React.createElement(EyeIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'arrowdown':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "ArrowDownIcon"
-        }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+        }, /*#__PURE__*/React.createElement(MenuItemOpenIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'arrowright':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "ArrowRightIcon"
-        }, /*#__PURE__*/React$1.createElement(MenuItemRightIcon, {
+        }, /*#__PURE__*/React.createElement(MenuItemRightIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
       case 'select':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "SelectRightIcon"
-        }, /*#__PURE__*/React$1.createElement(ArrowSelectIcon, {
+        }, /*#__PURE__*/React.createElement(ArrowSelectIcon, {
           height: "16px",
           width: "16px",
           color: color
         }));
       case 'info':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React.createElement(IconWrapper, {
           className: "InfoIcon"
-        }, /*#__PURE__*/React$1.createElement(InfoIcon, {
+        }, /*#__PURE__*/React.createElement(InfoIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
@@ -4889,11 +4889,11 @@ const LinkButton = _ref => {
     if (!rightIcon || rightIcon === 'none') return '';
     return getIcon(rightIcon);
   };
-  return /*#__PURE__*/React$1.createElement(LinkButtonContainer, {
+  return /*#__PURE__*/React.createElement(LinkButtonContainer, {
     className: "LinkButtonContainer",
     width: width || null,
     height: height || '20px'
-  }, /*#__PURE__*/React$1.createElement(LinkButtonItem, {
+  }, /*#__PURE__*/React.createElement(LinkButtonItem, {
     className: clicked ? 'LinkButtonItem-clicked' : 'LinkButtonItem',
     onClick: !disabled ? handleLinkButtonClick : null,
     width: width || null,
@@ -4901,7 +4901,7 @@ const LinkButton = _ref => {
     disabled: disabled,
     text_color: textColor || (type === 'secondary' ? '#212121' : '#229E38'),
     font_size: size === 'small' ? '14px' : '16px'
-  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$5, {
+  }, getLeftIcon(), /*#__PURE__*/React.createElement(Label$5, {
     className: "Label",
     disabled: disabled,
     font_size: size === 'small' ? '14px' : '16px'
@@ -4956,35 +4956,35 @@ const EventDetailsCard = props => {
     const formatedBanners = banners.map(banner => {
       if (banner === 'StopAndShop') {
         return {
-          icon: /*#__PURE__*/React$1.createElement(StopAndShopNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(StopAndShopNewIcon, null),
           name: 'Stop&Shop',
           checked: true
         };
       }
       if (banner === 'FoodLion') {
         return {
-          icon: /*#__PURE__*/React$1.createElement(FoodLionNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(FoodLionNewIcon, null),
           name: 'Food lion',
           checked: false
         };
       }
       if (banner === 'GiantFood') {
         return {
-          icon: /*#__PURE__*/React$1.createElement(GiantFoodNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(GiantFoodNewIcon, null),
           name: 'Giant Food',
           checked: true
         };
       }
       if (banner === 'TheGiantCompany') {
         return {
-          icon: /*#__PURE__*/React$1.createElement(TheGiantCompanyIcon$1, null),
+          icon: /*#__PURE__*/React.createElement(TheGiantCompanyIcon$1, null),
           name: 'The Giant Company',
           checked: true
         };
       }
       if (banner === 'Hannaford') {
         return {
-          icon: /*#__PURE__*/React$1.createElement(HannafordNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(HannafordNewIcon, null),
           name: 'Hannaford',
           checked: false
         };
@@ -4996,11 +4996,11 @@ const EventDetailsCard = props => {
   const viewButtonClick = e => {
     onViewButtonClick(e);
   };
-  return /*#__PURE__*/React$1.createElement(MainContainer$7, {
+  return /*#__PURE__*/React.createElement(MainContainer$7, {
     className: className,
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(TitleWrapper$1, null, /*#__PURE__*/React$1.createElement(CardTitle$1, null, title), displayBannersDropdown && /*#__PURE__*/React$1.createElement(BannersDropdown, {
+  }, /*#__PURE__*/React.createElement(TitleWrapper$1, null, /*#__PURE__*/React.createElement(CardTitle$1, null, title), displayBannersDropdown && /*#__PURE__*/React.createElement(BannersDropdown, {
     banners: [{
       checked: true,
       name: 'StopAndShop'
@@ -5022,9 +5022,9 @@ const EventDetailsCard = props => {
         banners
       });
     }
-  })), /*#__PURE__*/React$1.createElement(MainCard, null, /*#__PURE__*/React$1.createElement(List, null, count > 0 && /*#__PURE__*/React$1.createElement("li", null, count, ' ', "products in variety"), data.map((item, index) => /*#__PURE__*/React$1.createElement("li", {
+  })), /*#__PURE__*/React.createElement(MainCard, null, /*#__PURE__*/React.createElement(List, null, count > 0 && /*#__PURE__*/React.createElement("li", null, count, ' ', "products in variety"), data.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
-  }, /*#__PURE__*/React$1.createElement("span", null, item.label, ":"), ' ', item.value))), /*#__PURE__*/React$1.createElement(LinkButtonContainer$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
+  }, /*#__PURE__*/React.createElement("span", null, item.label, ":"), ' ', item.value))), /*#__PURE__*/React.createElement(LinkButtonContainer$1, null, /*#__PURE__*/React.createElement(LinkButton, {
     text: buttonText,
     rightIcon: "select",
     size: "small",
@@ -5145,20 +5145,20 @@ const LinnerDataBox = props => {
     className,
     customDataFormat
   } = props;
-  return /*#__PURE__*/React$1.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$1.createElement(DataBoxWrap, {
+  }, data.map((item, index) => /*#__PURE__*/React.createElement(DataBoxWrap, {
     key: `${item.title}`,
     width: `${100 / data.length}%`
-  }, /*#__PURE__*/React$1.createElement(DataBox$1, null, item.title && /*#__PURE__*/React$1.createElement(DataBoxTitle$1, {
+  }, /*#__PURE__*/React.createElement(DataBox$1, null, item.title && /*#__PURE__*/React.createElement(DataBoxTitle$1, {
     className: "DataBoxTitle"
-  }, item.title), /*#__PURE__*/React$1.createElement(DataBoxContent, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== "null" && item.value !== "undefined" ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, item.sign && /*#__PURE__*/React$1.createElement(DataBoxContentSign, null, item.sign), customDataFormat ? /*#__PURE__*/React$1.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$1.createElement(DataBoxContentValue, null, "".concat(getFormattedValue(item.value), getFormattedUnits(item.value)))) : /*#__PURE__*/React$1.createElement(DataBoxContentNoValue, null, "No Data")), item.extraInfo.map(extraInfoItem => /*#__PURE__*/React$1.createElement(DataBoxExtraInfoCell, null, extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/React$1.createElement(DataBoxExtraInfoCellValue, null, "".concat("$", getFormattedValue(extraInfoItem.value), getFormattedUnits(extraInfoItem.value))), extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/React$1.createElement(DataBoxExtraInfoCellTitle, null, extraInfoItem.title)))), index < data.length - 1 && /*#__PURE__*/React$1.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",
@@ -5451,74 +5451,74 @@ const MarketShareDescription = props => {
     dotCut
   } = props;
   const displayField = dataItem => {
-    const content = /*#__PURE__*/React$1.createElement(FieldTitleAndValueSubContainer, {
+    const content = /*#__PURE__*/React.createElement(FieldTitleAndValueSubContainer, {
       className: "FieldTitleAndValueSubContainer"
-    }, /*#__PURE__*/React$1.createElement(FieldTitle, {
+    }, /*#__PURE__*/React.createElement(FieldTitle, {
       className: "FieldTitle"
-    }, dataItem.label), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
+    }, dataItem.label), /*#__PURE__*/React.createElement(FormattedValue$3, {
       className: "FormattedValue"
-    }, /*#__PURE__*/React$1.createElement(TextBeforeAndAfterValue$1, {
+    }, /*#__PURE__*/React.createElement(TextBeforeAndAfterValue$1, {
       className: "TextBeforeAndAfterValue"
-    }, dataItem.textBefore), dotCut ? getFormattedValue(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? dataItem.value?.toFixed(2) : dataItem.value) : getNumberWithCommas(dataItem.value), dotCut ? getFormattedUnits(dataItem.value) : '', /*#__PURE__*/React$1.createElement(TextBeforeAndAfterValue$1, null, dataItem.textAfter)));
+    }, dataItem.textBefore), dotCut ? getFormattedValue(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? dataItem.value?.toFixed(2) : dataItem.value) : getNumberWithCommas(dataItem.value), dotCut ? getFormattedUnits(dataItem.value) : '', /*#__PURE__*/React.createElement(TextBeforeAndAfterValue$1, null, dataItem.textAfter)));
     return content;
   };
   const dispalyRowFields = data => {
     if (!data && !data.length > 0) return '';
-    const content = /*#__PURE__*/React$1.createElement(FieldsContainer$1, {
+    const content = /*#__PURE__*/React.createElement(FieldsContainer$1, {
       className: "FieldsContainer",
       height: "160px"
-    }, data?.map((item, index) => /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(OneFieldsContainer, {
+    }, data?.map((item, index) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OneFieldsContainer, {
       className: "OneFieldsContainer",
       padding: index === 0 ? '0px' : '0 0 0 40px'
-    }, displayField(item)), data?.length !== index + 1 ? /*#__PURE__*/React$1.createElement(ColumnLineSeporatorContainer, {
+    }, displayField(item)), data?.length !== index + 1 ? /*#__PURE__*/React.createElement(ColumnLineSeporatorContainer, {
       className: "ColumnLineSeporatorContainer_vertical"
-    }, /*#__PURE__*/React$1.createElement(ColumnLineSeporator, {
+    }, /*#__PURE__*/React.createElement(ColumnLineSeporator, {
       className: "ColumnLineSeporator"
     })) : '')));
     return content;
   };
   const displayRows = () => {
     if (!marketShareData || marketShareData?.length === 0) return '';
-    const content = /*#__PURE__*/React$1.createElement(AllRowsContainer, {
+    const content = /*#__PURE__*/React.createElement(AllRowsContainer, {
       className: "AllRowsContainer"
-    }, marketShareData.map((item, index) => /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(OneRowContainer, {
+    }, marketShareData.map((item, index) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OneRowContainer, {
       className: "OneRowContainer"
-    }, /*#__PURE__*/React$1.createElement(RowTitle, {
+    }, /*#__PURE__*/React.createElement(RowTitle, {
       className: "RowTitle"
-    }, /*#__PURE__*/React$1.createElement(InfoTextLabel$1, {
+    }, /*#__PURE__*/React.createElement(InfoTextLabel$1, {
       className: "InfoTextLabel",
       dangerouslySetInnerHTML: {
         __html: item.rowTitle
       }
-    }), item.showBanner && /*#__PURE__*/React$1.createElement(OutBanner$2, {
+    }), item.showBanner && /*#__PURE__*/React.createElement(OutBanner$2, {
       className: "OutBanner",
       onClick: () => onBannerClick({
         eventName: 'onBannerClick',
         rowName: item.name
       })
-    }, /*#__PURE__*/React$1.createElement(ExportIcon, {
+    }, /*#__PURE__*/React.createElement(ExportIcon, {
       color: "#212121"
-    }), "View By Banner")), dispalyRowFields(item.fieldsArray), /*#__PURE__*/React$1.createElement(InfoTextContainer$1, {
+    }), "View By Banner")), dispalyRowFields(item.fieldsArray), /*#__PURE__*/React.createElement(InfoTextContainer$1, {
       className: "InfoTextContainer"
-    }, item.rowFooter && item.rowFooter?.length > 0 ? /*#__PURE__*/React$1.createElement(IconContainer$5, {
+    }, item.rowFooter && item.rowFooter?.length > 0 ? /*#__PURE__*/React.createElement(IconContainer$5, {
       className: "IconContainer"
-    }, /*#__PURE__*/React$1.createElement(LampIcon, {
+    }, /*#__PURE__*/React.createElement(LampIcon, {
       width: "23px",
       height: "19px",
       fill: iconColor
-    })) : '', /*#__PURE__*/React$1.createElement(InfoTextLabel$1, {
+    })) : '', /*#__PURE__*/React.createElement(InfoTextLabel$1, {
       className: "InfoTextLabel",
       dangerouslySetInnerHTML: {
         __html: item.rowFooter
       }
-    }))), marketShareData?.length !== index + 1 ? /*#__PURE__*/React$1.createElement(ColumnLineSeporatorContainer, {
+    }))), marketShareData?.length !== index + 1 ? /*#__PURE__*/React.createElement(ColumnLineSeporatorContainer, {
       className: "ColumnLineSeporatorContainer_horizontal"
-    }, /*#__PURE__*/React$1.createElement(ColumnLineSeporator, {
+    }, /*#__PURE__*/React.createElement(ColumnLineSeporator, {
       className: "ColumnLineSeporator"
     })) : '')));
     return content;
   };
-  return /*#__PURE__*/React$1.createElement(MainContainer$5, {
+  return /*#__PURE__*/React.createElement(MainContainer$5, {
     className: "MainContainer",
     height: height,
     width: width
@@ -5591,68 +5591,68 @@ const SagIconButton = props => {
   const getIcon = icon => {
     switch (icon.toLowerCase()) {
       case 'filter':
-        return /*#__PURE__*/React$1.createElement(FilterIcon, {
+        return /*#__PURE__*/React.createElement(FilterIcon, {
           height: iconHeight,
           width: iconWidth,
           color: activeState ? activeColor : color
         });
       case 'options':
-        return /*#__PURE__*/React$1.createElement(OptionsIcon, {
+        return /*#__PURE__*/React.createElement(OptionsIcon, {
           height: iconHeight,
           width: iconWidth,
           color: activeState ? activeColor : color
         });
       case 'download':
-        return /*#__PURE__*/React$1.createElement(DownloadIcon, {
+        return /*#__PURE__*/React.createElement(DownloadIcon, {
           height: iconHeight,
           width: iconWidth,
           color: activeState ? activeColor : color
         });
       case 'document':
-        return /*#__PURE__*/React$1.createElement(DocumentIcon, {
+        return /*#__PURE__*/React.createElement(DocumentIcon, {
           height: iconHeight,
           width: iconWidth,
           color: activeState ? activeColor : color
         });
       case 'fly':
-        return /*#__PURE__*/React$1.createElement(FlyIcon, {
+        return /*#__PURE__*/React.createElement(FlyIcon, {
           height: iconHeight,
           width: iconWidth,
           color: activeState ? activeColor : color
         });
       case 'bell':
-        return /*#__PURE__*/React$1.createElement(BellIcon, {
+        return /*#__PURE__*/React.createElement(BellIcon, {
           height: iconHeight,
           width: iconWidth,
           color: activeState ? activeColor : color
         });
       case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
+        return /*#__PURE__*/React.createElement(MaintenanceIcon, {
           height: iconHeight,
           width: iconWidth,
           color: activeState ? activeColor : color
         });
       case 'exit':
-        return /*#__PURE__*/React$1.createElement(ExitIcon, {
+        return /*#__PURE__*/React.createElement(ExitIcon, {
           height: iconHeight,
           width: iconWidth,
           color: activeState ? activeColor : color
         });
       case 'eye':
-        return /*#__PURE__*/React$1.createElement(EyeIcon, {
+        return /*#__PURE__*/React.createElement(EyeIcon, {
           height: iconHeight,
           width: iconWidth,
           color: activeState ? activeColor : color
         });
       default:
-        return /*#__PURE__*/React$1.createElement(EyeIcon, {
+        return /*#__PURE__*/React.createElement(EyeIcon, {
           height: iconHeight,
           width: iconWidth,
           color: activeState ? activeColor : color
         });
     }
   };
-  return /*#__PURE__*/React$1.createElement(SagIconButtonWrapper, {
+  return /*#__PURE__*/React.createElement(SagIconButtonWrapper, {
     className: className,
     height: height,
     color: activeState ? activeColor : color,
@@ -5661,7 +5661,7 @@ const SagIconButton = props => {
     onClick: event => {
       onClickHandler(event);
     }
-  }, getIcon(iconName), buttonText && /*#__PURE__*/React$1.createElement(SpanText$1, null, buttonText));
+  }, getIcon(iconName), buttonText && /*#__PURE__*/React.createElement(SpanText$1, null, buttonText));
 };
 SagIconButton.propTypes = {
   className: PropTypes.string,
@@ -5749,15 +5749,15 @@ const SearchInput = props => {
   const handleInputChange = e => {
     onTyping(e);
   };
-  return /*#__PURE__*/React$1.createElement(TextFieldContainer, {
+  return /*#__PURE__*/React.createElement(TextFieldContainer, {
     className: className,
     width: width
-  }, /*#__PURE__*/React$1.createElement(TextFieldInput, {
+  }, /*#__PURE__*/React.createElement(TextFieldInput, {
     type: "search",
     height: height,
     placeholder: placeholder,
     onChange: handleInputChange
-  }), /*#__PURE__*/React$1.createElement(SearchIcon, null));
+  }), /*#__PURE__*/React.createElement(SearchIcon, null));
 };
 SearchInput.propTypes = {
   placeholder: PropTypes.string,
@@ -5921,55 +5921,55 @@ const TabMenu = props => {
   useEffect(() => {
     setActiveTab(currentTab);
   }, [currentTab]);
-  return /*#__PURE__*/React$1.createElement(TabMenuContainer, {
+  return /*#__PURE__*/React.createElement(TabMenuContainer, {
     className: className
-  }, /*#__PURE__*/React$1.createElement(TopRow, null, showFilterButton && /*#__PURE__*/React$1.createElement(SagIconButtonWrap, {
+  }, /*#__PURE__*/React.createElement(TopRow, null, showFilterButton && /*#__PURE__*/React.createElement(SagIconButtonWrap, {
     id: "filterButton",
     iconName: "Filter",
     buttonText: "",
     openState: panelIsOpen,
     activeColor: activeColor,
     onButtonClick: onFilterButtonClick
-  }), headlineInsteadTabs ? /*#__PURE__*/React$1.createElement(Headline$1, null, headlineText) : /*#__PURE__*/React$1.createElement(Nav, {
+  }), headlineInsteadTabs ? /*#__PURE__*/React.createElement(Headline$1, null, headlineText) : /*#__PURE__*/React.createElement(Nav, {
     className: "Nav"
-  }, /*#__PURE__*/React$1.createElement(Tabs, {
+  }, /*#__PURE__*/React.createElement(Tabs, {
     className: "Tabs"
-  }, tabs.length > 1 ? tabs.map((tab, index) => /*#__PURE__*/React$1.createElement(Tab, {
+  }, tabs.length > 1 ? tabs.map((tab, index) => /*#__PURE__*/React.createElement(Tab, {
     key: tab.title.replace(/\s/g, ''),
     isActive: index === activeTab,
     className: `tab ${index === activeTab ? 'active' : ''}`,
     color: color,
     onClick: () => handleTabChange(index)
-  }, tab.title)) : /*#__PURE__*/React$1.createElement(Tab, {
+  }, tab.title)) : /*#__PURE__*/React.createElement(Tab, {
     isActive: activeTab === 0,
     className: `tab ${activeTab === 0 ? 'active' : ''}`,
     color: color,
     onClick: () => handleTabChange(0)
-  }, tabs[0].title), /*#__PURE__*/React$1.createElement(PresentationSlider, {
+  }, tabs[0].title), /*#__PURE__*/React.createElement(PresentationSlider, {
     className: "PresentationSlider",
     activeTab: activeTab,
     color: color,
     width: `${100 / tabs.length}%`,
     role: "presentation"
-  }))), setTopRightButton && /*#__PURE__*/React$1.createElement(Button, {
+  }))), setTopRightButton && /*#__PURE__*/React.createElement(Button, {
     text: rightButtonText,
     rightIcon: rightButtonIcon,
     size: "small",
     disabled: disabledButton,
     onClick: () => onTopButtonClick()
-  })), showActions && /*#__PURE__*/React$1.createElement(ActionsWrapper, {
+  })), showActions && /*#__PURE__*/React.createElement(ActionsWrapper, {
     className: "ActionsWrapper"
-  }, showLabel && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Label$4, {
+  }, showLabel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label$4, {
     className: "Label"
-  }, /*#__PURE__*/React$1.createElement("span", null, "Platform: "), "Total"), /*#__PURE__*/React$1.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", null, "Platform: "), "Total"), /*#__PURE__*/React.createElement("span", {
     className: "separator"
-  }, "|")), children || '', showViewOptionsButton && /*#__PURE__*/React$1.createElement(SagIconButton, {
+  }, "|")), children || '', showViewOptionsButton && /*#__PURE__*/React.createElement(SagIconButton, {
     iconName: "ViewIndicator",
     buttonText: "View Indicator"
-  }), showSearchInput && /*#__PURE__*/React$1.createElement(SearchInputWrap, {
+  }), showSearchInput && /*#__PURE__*/React.createElement(SearchInputWrap, {
     width: inputWidth,
     onTyping: e => onSearchFieldTyping(e)
-  })), /*#__PURE__*/React$1.createElement(Body, {
+  })), /*#__PURE__*/React.createElement(Body, {
     id: "tabsBody",
     setBackground: setBackground
   }, tabs[activeTab] && tabs[activeTab].content));
@@ -6029,7 +6029,7 @@ TabMenu.defaultProps = {
   onTopButtonClick: () => {},
   tabs: [{
     title: 'Overview',
-    content: /*#__PURE__*/React$1.createElement(MarketShareDescription, {
+    content: /*#__PURE__*/React.createElement(MarketShareDescription, {
       marketShareData: [{
         name: 'pringlesHarvestBlend',
         rowTitle: 'Pringles Harvest Blend',
@@ -11019,7 +11019,7 @@ const DropdownSingleNew = ({
       return "";
     }
     if (required) {
-      return /*#__PURE__*/React$1.createElement("span", {
+      return /*#__PURE__*/React.createElement("span", {
         style: {
           color: "red"
         }
@@ -11027,25 +11027,25 @@ const DropdownSingleNew = ({
     }
     return "";
   };
-  return /*#__PURE__*/React$1.createElement(DropdownWrapper$2, {
+  return /*#__PURE__*/React.createElement(DropdownWrapper$2, {
     className: "DropdownWrapper",
     width: width,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(InputContainer$6, {
+  }, /*#__PURE__*/React.createElement(InputContainer$6, {
     className: "InputContainer",
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     isFocused: isFocused
-  }, /*#__PURE__*/React$1.createElement(InputSubContainer$3, {
+  }, /*#__PURE__*/React.createElement(InputSubContainer$3, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$3, {
+  }, /*#__PURE__*/React.createElement(Label$3, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -11055,7 +11055,7 @@ const DropdownSingleNew = ({
     errorMessage: errorMessage,
     onClick: handleLabelClick,
     showLabelOnTop: showLabelOnTop
-  }, getLabel(), getRequired()), /*#__PURE__*/React$1.createElement(StyledInput$6, {
+  }, getLabel(), getRequired()), /*#__PURE__*/React.createElement(StyledInput$6, {
     className: "StyledInput",
     ref: inputRef,
     value: selectedOptions && selectedOptions?.length > 0 ? selectedOptions[0].label : inputValue && inputValue?.length > 0 ? inputValue[0].label : "",
@@ -11065,37 +11065,37 @@ const DropdownSingleNew = ({
     placeholder: isFocused ? filteredOptions.length <= 5 ? "Select Option…" : "Type To Search" : "",
     error: error,
     isFocused: isFocused
-  })), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$4, {
+  })), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React.createElement(IconContainer$4, {
     className: "IconContainer",
     onClick: handleClearClick
-  }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+  }, /*#__PURE__*/React.createElement(CloseXIcon, {
     width: "12px",
     height: "12px",
     fill: "#B1B1B1"
-  })), /*#__PURE__*/React$1.createElement(IconContainer$4, {
+  })), /*#__PURE__*/React.createElement(IconContainer$4, {
     className: "IconContainer",
     onClick: handleOpenCloseMenuClick
-  }, showOptions ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
+  }, showOptions ? /*#__PURE__*/React.createElement(MenuItemUpIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }) : /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+  }) : /*#__PURE__*/React.createElement(MenuItemOpenIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$3, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$6, {
+  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React.createElement(ErrorMessage$3, null, errorMessage), /*#__PURE__*/React.createElement(OptionsContainer$6, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
     showoptions: showOptions,
     disabled: disabled,
     filteredoptions: filteredOptions
-  }, /*#__PURE__*/React$1.createElement(OptionsSubContainer$3, {
+  }, /*#__PURE__*/React.createElement(OptionsSubContainer$3, {
     className: "OptionsSubContainer",
     showoptions: showOptions,
     disabled: disabled,
     filteredoptions: filteredOptions
-  }, filteredOptions.map(option => /*#__PURE__*/React$1.createElement(OptionItem$3, {
+  }, filteredOptions.map(option => /*#__PURE__*/React.createElement(OptionItem$3, {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
@@ -11500,9 +11500,9 @@ const DropdownMultiNew = ({
     });
   };
   const displaySelectedOptions = () => {
-    const content = /*#__PURE__*/React$1.createElement(SelectedOptionsContainer$1, {
+    const content = /*#__PURE__*/React.createElement(SelectedOptionsContainer$1, {
       className: "SelectedOptionsContainer"
-    }, selectedOptions?.map((option, index) => index < 2 ? /*#__PURE__*/React$1.createElement(SelectedOptionItem$1, {
+    }, selectedOptions?.map((option, index) => index < 2 ? /*#__PURE__*/React.createElement(SelectedOptionItem$1, {
       className: "SelectedOptionItem",
       key: option.value,
       onClick: () => {
@@ -11512,11 +11512,11 @@ const DropdownMultiNew = ({
           inputRef?.current?.focus();
         }
       }
-    }, option.label && option.label?.length > 10 ? `${option.label?.substring(0, 10)}...  ` : `${option.label}  `, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+    }, option.label && option.label?.length > 10 ? `${option.label?.substring(0, 10)}...  ` : `${option.label}  `, /*#__PURE__*/React.createElement(CloseXIcon, {
       width: "8px",
       height: "8px",
       fill: "#212121"
-    })) : " "), selectedOptions.length > 2 ? /*#__PURE__*/React$1.createElement(SelectedOptionItem$1, {
+    })) : " "), selectedOptions.length > 2 ? /*#__PURE__*/React.createElement(SelectedOptionItem$1, {
       className: "SelectedOptionItem"
     }, selectedOptions.length - 2, "+") : "");
     return content;
@@ -11538,7 +11538,7 @@ const DropdownMultiNew = ({
       return "";
     }
     if (required) {
-      return /*#__PURE__*/React$1.createElement("span", {
+      return /*#__PURE__*/React.createElement("span", {
         style: {
           color: "red"
         }
@@ -11546,25 +11546,25 @@ const DropdownMultiNew = ({
     }
     return "";
   };
-  return /*#__PURE__*/React$1.createElement(DropdownWrapper$1, {
+  return /*#__PURE__*/React.createElement(DropdownWrapper$1, {
     className: "DropdownWrapper",
     width: width,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(InputContainer$5, {
+  }, /*#__PURE__*/React.createElement(InputContainer$5, {
     className: "InputContainer",
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     isFocused: isFocused
-  }, /*#__PURE__*/React$1.createElement(InputSubContainer$2, {
+  }, /*#__PURE__*/React.createElement(InputSubContainer$2, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$2, {
+  }, /*#__PURE__*/React.createElement(Label$2, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -11574,7 +11574,7 @@ const DropdownMultiNew = ({
     errorMessage: errorMessage,
     onClick: handleLabelClick,
     showLabelOnTop: showLabelOnTop
-  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput$5, {
+  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React.createElement(StyledInput$5, {
     className: "StyledInput",
     ref: inputRef,
     value: inputValue,
@@ -11586,48 +11586,48 @@ const DropdownMultiNew = ({
     placeholder: isFocused ? filteredOptions.length <= 5 ? "Select Option…" : "Type To Search" : "",
     error: error,
     isFocused: isFocused
-  }) : " "), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$3, {
+  }) : " "), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React.createElement(IconContainer$3, {
     className: "IconContainer",
     onClick: handleClearClick
-  }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+  }, /*#__PURE__*/React.createElement(CloseXIcon, {
     width: "12px",
     height: "12px",
     fill: "#B1B1B1"
-  })), /*#__PURE__*/React$1.createElement(IconContainer$3, {
+  })), /*#__PURE__*/React.createElement(IconContainer$3, {
     className: "IconContainer",
     onClick: handleOpenCloseMenuClick
-  }, showOptions ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
+  }, showOptions ? /*#__PURE__*/React.createElement(MenuItemUpIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }) : /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+  }) : /*#__PURE__*/React.createElement(MenuItemOpenIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$2, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$5, {
+  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React.createElement(ErrorMessage$2, null, errorMessage), /*#__PURE__*/React.createElement(OptionsContainer$5, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
     showoptions: showOptions,
     disabled: disabled,
     filteredoptions: filteredOptions
-  }, /*#__PURE__*/React$1.createElement(OptionsSubContainer$2, {
+  }, /*#__PURE__*/React.createElement(OptionsSubContainer$2, {
     className: "OptionsSubContainer",
     showoptions: showOptions,
     disabled: disabled,
     filteredoptions: filteredOptions
-  }, filteredOptions.map(option => /*#__PURE__*/React$1.createElement(OptionItem$2, {
+  }, filteredOptions.map(option => /*#__PURE__*/React.createElement(OptionItem$2, {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
     selected: isDropdowned(option)
-  }, " ", /*#__PURE__*/React$1.createElement(IconContainer$3, {
+  }, " ", /*#__PURE__*/React.createElement(IconContainer$3, {
     className: "IconContainer"
-  }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/React$1.createElement(CheckBoxCheckedIcon, {
+  }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/React.createElement(CheckBoxCheckedIcon, {
     width: "14px",
     height: "14px",
     color: disabled ? "#888" : checkBoxColor
-  }) : /*#__PURE__*/React$1.createElement(CheckBoxNotCheckedIcon, {
+  }) : /*#__PURE__*/React.createElement(CheckBoxNotCheckedIcon, {
     width: "14px",
     height: "14px",
     color: disabled ? "#888" : "#212121"
@@ -11691,70 +11691,67 @@ const DropdownMain = dt.div`
 `;
 
 /* eslint-disable react/prop-types */
-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$1.createElement(DropdownMain, {
-    className: "DropdownMain",
-    width: width
-  }, isMulti ? /*#__PURE__*/React$1.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$1.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 = ({
+  isMulti,
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  checkBoxColor,
+  xIconShow,
+  showLabelOnTop,
+  orderBy,
+  elementType
+}) => /*#__PURE__*/React.createElement(DropdownMain, {
+  className: "DropdownMain",
+  width: width
+}, isMulti ? /*#__PURE__*/React.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.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,
@@ -12168,21 +12165,20 @@ const DatePicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const RangePicker = _ref => {
-  let {
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue
-  } = _ref;
+const RangePicker = ({
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState(''); // Added value state
@@ -12252,12 +12248,12 @@ const RangePicker = _ref => {
   const handleBlur = () => {
     setIsFocused(false);
   };
-  return /*#__PURE__*/React$1.createElement(RangePickerContainer, {
+  return /*#__PURE__*/React.createElement(RangePickerContainer, {
     className: "RangePickerContainer",
     onClick: handleFocus,
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(InputContainer$4, {
+  }, /*#__PURE__*/React.createElement(InputContainer$4, {
     className: "InputContainer",
     isFocused: isFocused,
     hasValue: value,
@@ -12267,7 +12263,7 @@ const RangePicker = _ref => {
     borderColorFocus: borderColorFocus,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(StyledLabel$2, {
+  }, /*#__PURE__*/React.createElement(StyledLabel$2, {
     className: "StyledLabel",
     onClick: handleFocus,
     isFocused: isFocused,
@@ -12276,7 +12272,7 @@ const RangePicker = _ref => {
     textColor: textColor,
     borderColor: borderColor,
     borderColorFocus: borderColorFocus
-  }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$2, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$4, {
+  }, label, required && /*#__PURE__*/React.createElement(RequiredIndicator$2, null, "*")), /*#__PURE__*/React.createElement(StyledInput$4, {
     className: "StyledInput",
     ref: inputRef,
     value: value,
@@ -12292,18 +12288,18 @@ const RangePicker = _ref => {
     textColor: textColor,
     borderColor: borderColor,
     borderColorFocus: borderColorFocus
-  }), /*#__PURE__*/React$1.createElement(CalendarDiv$2, {
+  }), /*#__PURE__*/React.createElement(CalendarDiv$2, {
     className: "CalendarDiv",
     onClick: toggleDatePicker
-  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, {
+  }, isOpen === true ? /*#__PURE__*/React.createElement(CalendarInOpen, {
     className: "CalendarInOpen"
-  }) : /*#__PURE__*/React$1.createElement(Calendar, {
+  }) : /*#__PURE__*/React.createElement(Calendar, {
     className: "Calendar"
-  }))), /*#__PURE__*/React$1.createElement(OptionsContainer$4, {
+  }))), /*#__PURE__*/React.createElement(OptionsContainer$4, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false)
-  }, /*#__PURE__*/React$1.createElement(DatePicker, {
+  }, /*#__PURE__*/React.createElement(DatePicker, {
     className: "DatePicker",
     isOpen: isOpen,
     onChangeDate: onChangeDate,
@@ -12441,6 +12437,10 @@ const OptionsContainer$3 = dt.div`
   padding-top: 8px;
 `;
 
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+// import ChervronRightIcon from './icons/ChervronRightIcon';
+// import ChervronLeftIcon from './icons/ChervronLeftIcon';
+
 // Styled components for the date picker
 const DatePickerContainer$2 = dt.div`
   position: relative;
@@ -12610,23 +12610,22 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -12689,12 +12688,12 @@ const QuarterPicker = _ref => {
   const handleBlur = () => {
     setIsFocused(false);
   };
-  return /*#__PURE__*/React$1.createElement(QuarterPickerContainer, {
+  return /*#__PURE__*/React.createElement(QuarterPickerContainer, {
     className: "QuarterPickerContainer",
     onClick: handleFocus,
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(InputContainer$3, {
+  }, /*#__PURE__*/React.createElement(InputContainer$3, {
     className: "InputContainer",
     isFocused: isFocused,
     hasValue: value,
@@ -12704,7 +12703,7 @@ const QuarterPicker = _ref => {
     borderColorFocus: borderColorFocus,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(StyledLabel$1, {
+  }, /*#__PURE__*/React.createElement(StyledLabel$1, {
     className: "StyledLabel",
     onClick: handleFocus,
     isFocused: isFocused,
@@ -12713,7 +12712,7 @@ const QuarterPicker = _ref => {
     textColor: textColor,
     borderColor: borderColor,
     borderColorFocus: borderColorFocus
-  }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$1, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$3, {
+  }, label, required && /*#__PURE__*/React.createElement(RequiredIndicator$1, null, "*")), /*#__PURE__*/React.createElement(StyledInput$3, {
     className: "StyledInput",
     ref: inputRef,
     value: value,
@@ -12729,15 +12728,15 @@ const QuarterPicker = _ref => {
     disabled: disabled,
     borderColor: borderColor,
     textColor: textColor
-  }), /*#__PURE__*/React$1.createElement(CalendarDiv$1, {
+  }), /*#__PURE__*/React.createElement(CalendarDiv$1, {
     className: "CalendarDiv",
     width: width,
     onClick: toggleDatePicker
-  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), /*#__PURE__*/React$1.createElement(OptionsContainer$3, {
+  }, isOpen === true ? /*#__PURE__*/React.createElement(CalendarInOpen, null) : /*#__PURE__*/React.createElement(Calendar, null))), /*#__PURE__*/React.createElement(OptionsContainer$3, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false)
-  }, /*#__PURE__*/React$1.createElement(QuarterPopupPicker, {
+  }, /*#__PURE__*/React.createElement(QuarterPopupPicker, {
     className: "QuarterPopupPicker",
     isOpen: isOpen,
     onChangeDate: onChangeDate,
@@ -12871,6 +12870,8 @@ const OptionsContainer$2 = dt.div`
   padding-top: 8px;
 `;
 
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 // Styled components for the date picker
 const DatePickerContainer$1 = dt.div`
   position: relative;
@@ -13063,22 +13064,21 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -13140,12 +13140,12 @@ const MonthPicker = _ref => {
   const handleBlur = () => {
     setIsFocused(false);
   };
-  return /*#__PURE__*/React$1.createElement(MonthPickerContainer, {
+  return /*#__PURE__*/React.createElement(MonthPickerContainer, {
     className: "MonthPickerContainer",
     onClick: handleFocus,
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(InputContainer$2, {
+  }, /*#__PURE__*/React.createElement(InputContainer$2, {
     className: "InputContainer",
     isFocused: isFocused,
     hasValue: value,
@@ -13155,7 +13155,7 @@ const MonthPicker = _ref => {
     borderColorFocus: borderColorFocus,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(StyledLabel, {
+  }, /*#__PURE__*/React.createElement(StyledLabel, {
     className: "StyledLabel",
     onClick: handleFocus,
     isFocused: isFocused,
@@ -13164,7 +13164,7 @@ const MonthPicker = _ref => {
     textColor: textColor,
     borderColor: borderColor,
     borderColorFocus: borderColorFocus
-  }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$2, {
+  }, label, required && /*#__PURE__*/React.createElement(RequiredIndicator, null, "*")), /*#__PURE__*/React.createElement(StyledInput$2, {
     className: "StyledInput",
     ref: inputRef,
     value: value,
@@ -13180,15 +13180,15 @@ const MonthPicker = _ref => {
     disabled: disabled,
     borderColor: borderColor,
     textColor: textColor
-  }), /*#__PURE__*/React$1.createElement(CalendarDiv, {
+  }), /*#__PURE__*/React.createElement(CalendarDiv, {
     className: "CalendarDiv",
     width: width,
     onClick: toggleDatePicker
-  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), /*#__PURE__*/React$1.createElement(OptionsContainer$2, {
+  }, isOpen === true ? /*#__PURE__*/React.createElement(CalendarInOpen, null) : /*#__PURE__*/React.createElement(Calendar, null))), /*#__PURE__*/React.createElement(OptionsContainer$2, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false)
-  }, /*#__PURE__*/React$1.createElement(MonthPopupPicker, {
+  }, /*#__PURE__*/React.createElement(MonthPopupPicker, {
     className: "MonthPopupPicker",
     isOpen: isOpen,
     onChangeDate: onChangeDate,
@@ -13466,8 +13466,8 @@ const FilterPanel = props => {
       fieldsData: newFieldsDataState
     });
   };
-  const getTooltipTextDates = () => /*#__PURE__*/React$1.createElement(TooltipTextContainer, null, /*#__PURE__*/React$1.createElement(TooltipText, null, "Dates can be selected"), /*#__PURE__*/React$1.createElement(TooltipText, null, "only after selecting"), /*#__PURE__*/React$1.createElement(TooltipText, null, "period types"));
-  const getTooltipTextGoButton = () => /*#__PURE__*/React$1.createElement(TooltipTextContainer, null, /*#__PURE__*/React$1.createElement(TooltipText, null, tooltipTextGoButton));
+  const getTooltipTextDates = () => /*#__PURE__*/React.createElement(TooltipTextContainer, null, /*#__PURE__*/React.createElement(TooltipText, null, "Dates can be selected"), /*#__PURE__*/React.createElement(TooltipText, null, "only after selecting"), /*#__PURE__*/React.createElement(TooltipText, null, "period types"));
+  const getTooltipTextGoButton = () => /*#__PURE__*/React.createElement(TooltipTextContainer, null, /*#__PURE__*/React.createElement(TooltipText, null, tooltipTextGoButton));
   const getYearsArray = () => {
     const currentYear = moment().year();
     const previousYear = moment().subtract(1, 'years').year();
@@ -13512,9 +13512,9 @@ const FilterPanel = props => {
     }
     switch (currentValue) {
       case 'daterange':
-        content = /*#__PURE__*/React$1.createElement(DatePickerContainer, {
+        content = /*#__PURE__*/React.createElement(DatePickerContainer, {
           className: "DatePickerContainer"
-        }, /*#__PURE__*/React$1.createElement(RangePicker, {
+        }, /*#__PURE__*/React.createElement(RangePicker, {
           className: "RangePicker",
           name: ''.concat(item.name, '_Date'),
           borderColor: "#E7E7E7",
@@ -13549,7 +13549,7 @@ const FilterPanel = props => {
         }));
         break;
       case 'month':
-        content = /*#__PURE__*/React$1.createElement(MonthPicker, {
+        content = /*#__PURE__*/React.createElement(MonthPicker, {
           availableMonths: availableMonths,
           name: ''.concat(item.name, '_Month'),
           borderColor: "#E7E7E7",
@@ -13584,7 +13584,7 @@ const FilterPanel = props => {
         });
         break;
       case 'quarter':
-        content = /*#__PURE__*/React$1.createElement(QuarterPicker, {
+        content = /*#__PURE__*/React.createElement(QuarterPicker, {
           availableQuarters: availableQuarters,
           className: "QuarterPicker",
           name: ''.concat(item.name, '_Quarter'),
@@ -13620,7 +13620,7 @@ const FilterPanel = props => {
         });
         break;
       case 'year':
-        content = /*#__PURE__*/React$1.createElement(DropdownNew, {
+        content = /*#__PURE__*/React.createElement(DropdownNew, {
           className: "Dropdown_Year",
           name: ''.concat(item.name, '_Year'),
           key: item.reset,
@@ -13645,16 +13645,16 @@ const FilterPanel = props => {
         });
         break;
       default:
-        content = /*#__PURE__*/React$1.createElement(Tooltip$1, {
+        content = /*#__PURE__*/React.createElement(Tooltip$1, {
           className: "Tooltip",
           content: getTooltipTextDates(),
           direction: "top",
           topFactor: -1.8
-        }, /*#__PURE__*/React$1.createElement(PeriodPickerEmptyContainer, {
+        }, /*#__PURE__*/React.createElement(PeriodPickerEmptyContainer, {
           className: "PeriodPickerEmptyContainer",
           width: FieldsContainerWidth ? `${FieldsContainerWidth?.toString()}px` : undefined,
           height: "50px"
-        }, /*#__PURE__*/React$1.createElement(PeriodPickerEmptyText, {
+        }, /*#__PURE__*/React.createElement(PeriodPickerEmptyText, {
           className: "PeriodPickerEmptyText"
         }, "Select Dates")));
     }
@@ -13664,7 +13664,7 @@ const FilterPanel = props => {
     let content;
     switch (item.inputType) {
       case 'dropdown':
-        content = /*#__PURE__*/React$1.createElement(DropdownNew, {
+        content = /*#__PURE__*/React.createElement(DropdownNew, {
           className: "Dropdown_Single",
           name: item.name,
           key: item.reset,
@@ -13688,7 +13688,7 @@ const FilterPanel = props => {
         });
         break;
       case 'dropdownMulti':
-        content = /*#__PURE__*/React$1.createElement(DropdownNew, {
+        content = /*#__PURE__*/React.createElement(DropdownNew, {
           className: "Dropdown_Multi",
           name: item.name,
           key: item.reset,
@@ -13712,9 +13712,9 @@ const FilterPanel = props => {
         });
         break;
       case 'datepicker':
-        content = /*#__PURE__*/React$1.createElement(DatePickerContainer, {
+        content = /*#__PURE__*/React.createElement(DatePickerContainer, {
           className: "DatePickerContainer"
-        }, /*#__PURE__*/React$1.createElement(RangePicker, {
+        }, /*#__PURE__*/React.createElement(RangePicker, {
           className: "RangePicker",
           borderColor: borderColor,
           borderRadius: "12px",
@@ -13746,9 +13746,9 @@ const FilterPanel = props => {
         }));
         break;
       case 'periodpicker':
-        content = /*#__PURE__*/React$1.createElement(PeriodPickerContainer, {
+        content = /*#__PURE__*/React.createElement(PeriodPickerContainer, {
           className: "PeriodPickerContainer"
-        }, /*#__PURE__*/React$1.createElement(DropdownNew, {
+        }, /*#__PURE__*/React.createElement(DropdownNew, {
           className: "Dropdown_PeriodPicker",
           name: item.name,
           key: item.reset,
@@ -13779,21 +13779,21 @@ const FilterPanel = props => {
     if (!data || data.length === 0) {
       return '';
     }
-    return /*#__PURE__*/React$1.createElement(FieldsContainer, {
+    return /*#__PURE__*/React.createElement(FieldsContainer, {
       className: "FieldsContainer"
-    }, data?.map(item => /*#__PURE__*/React$1.createElement(FieldContainer, {
+    }, data?.map(item => /*#__PURE__*/React.createElement(FieldContainer, {
       className: "FieldContainer"
     }, displayField(item))));
   };
   const displayGoButton = () => {
     let content;
     if (tooltipTextGoButton) {
-      content = /*#__PURE__*/React$1.createElement(Tooltip$1, {
+      content = /*#__PURE__*/React.createElement(Tooltip$1, {
         className: "Tooltip",
         content: getTooltipTextGoButton(),
         direction: "top",
         topFactor: -0.9
-      }, /*#__PURE__*/React$1.createElement(Button, {
+      }, /*#__PURE__*/React.createElement(Button, {
         text: "Go",
         type: "primary",
         size: "medium",
@@ -13821,7 +13821,7 @@ const FilterPanel = props => {
         })
       }));
     } else {
-      content = /*#__PURE__*/React$1.createElement(Button, {
+      content = /*#__PURE__*/React.createElement(Button, {
         text: "Go",
         type: "primary",
         size: "medium",
@@ -13851,17 +13851,17 @@ const FilterPanel = props => {
     }
     return content;
   };
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$7, {
+  return /*#__PURE__*/React.createElement(ControlsContainer$7, {
     className: className,
     height: height,
     width: width,
     showShadow: showShadow
-  }, /*#__PURE__*/React$1.createElement(AllFieldsContainer, {
+  }, /*#__PURE__*/React.createElement(AllFieldsContainer, {
     className: "AllFieldsContainer",
     ref: AllFieldsContainerRef
-  }, displayFields(FieldsDataState)), /*#__PURE__*/React$1.createElement(ButtonsContainer, {
+  }, displayFields(FieldsDataState)), /*#__PURE__*/React.createElement(ButtonsContainer, {
     className: "ButtonsContainer"
-  }, displayGoButton(), /*#__PURE__*/React$1.createElement(Button, {
+  }, displayGoButton(), /*#__PURE__*/React.createElement(Button, {
     text: "Reset",
     size: "medium",
     type: "secondary",
@@ -14413,7 +14413,7 @@ const ReportTable = props => {
     } = rest2;
     onSelectRowClick(rest3);
   };
-  const displaySelectButton = rowData => /*#__PURE__*/React$1.createElement(LinkButton, {
+  const displaySelectButton = rowData => /*#__PURE__*/React.createElement(LinkButton, {
     disabled: disableSelectButtons,
     onClick: e => handleSelectButtonRowClick(rowData),
     rightIcon: buttonIconName,
@@ -14463,7 +14463,7 @@ const ReportTable = props => {
     }
     return colNumber;
   };
-  const getTooltipText = value => /*#__PURE__*/React$1.createElement(TooltipWrapper$1, null, value);
+  const getTooltipText = value => /*#__PURE__*/React.createElement(TooltipWrapper$1, null, value);
   const truncateString = (str, maxLength) => {
     let val = str.length > maxLength ? str.slice(0, maxLength) + "..." : str;
     return val;
@@ -14514,17 +14514,17 @@ const ReportTable = props => {
       return newState;
     });
   };
-  return /*#__PURE__*/React$1.createElement(ReportTableWrapper, null, /*#__PURE__*/React$1.createElement(TableWrapper, {
+  return /*#__PURE__*/React.createElement(ReportTableWrapper, null, /*#__PURE__*/React.createElement(TableWrapper, {
     width: width,
     height: height,
     className: className,
     maxColumnsNumber: getMaxColnumber(),
     columnsNumber: columnsNumber
-  }, /*#__PURE__*/React$1.createElement(Table, {
+  }, /*#__PURE__*/React.createElement(Table, {
     tableWidthSize: tableWidthSize
-  }, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement(Tr, null, tableData.columnsHeadings.map((headline, index) => /*#__PURE__*/React$1.createElement(Th, {
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement(Tr, null, tableData.columnsHeadings.map((headline, index) => /*#__PURE__*/React.createElement(Th, {
     key: index
-  }, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("span", null, headline.label), headline.sortable && /*#__PURE__*/React$1.createElement("button", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, headline.label), headline.sortable && /*#__PURE__*/React.createElement("button", {
     style: {
       border: "none",
       background: "none",
@@ -14532,39 +14532,39 @@ const ReportTable = props => {
       padding: "0"
     },
     onClick: () => handleButtonClick(headline.key)
-  }, /*#__PURE__*/React$1.createElement(SortIcon, {
+  }, /*#__PURE__*/React.createElement(SortIcon, {
     width: "16px",
     height: "16px",
     fillUpperArrow: activeSortState[headline.key] === "asc" ? "#229E38" : "#D0D0D0",
     fillLowerArrow: activeSortState[headline.key] === "desc" ? "#229E38" : "#D0D0D0"
-  }))))))), /*#__PURE__*/React$1.createElement("tbody", null, getPaginatedRows().map((rowData, index) => /*#__PURE__*/React$1.createElement(Tr, {
+  }))))))), /*#__PURE__*/React.createElement("tbody", null, getPaginatedRows().map((rowData, index) => /*#__PURE__*/React.createElement(Tr, {
     className: "row",
     key: index,
     enableHover: enableHover,
     selectHoverColor: selectHoverColor,
     useColorLinearGradient: useColorLinearGradient
-  }, Object.values(rowData).map((value, dataIndex) => value === "checkbox" ? /*#__PURE__*/React$1.createElement(Td, {
+  }, Object.values(rowData).map((value, dataIndex) => value === "checkbox" ? /*#__PURE__*/React.createElement(Td, {
     className: "checkbox",
     key: index
-  }) : value === "button" ? /*#__PURE__*/React$1.createElement(Td, {
+  }) : value === "button" ? /*#__PURE__*/React.createElement(Td, {
     className: "button",
     key: index
-  }, displaySelectButton(rowData)) : /*#__PURE__*/React$1.createElement(Td, {
+  }, displaySelectButton(rowData)) : /*#__PURE__*/React.createElement(Td, {
     className: "cell",
     key: dataIndex
-  }, value && value.length > 30 ? /*#__PURE__*/React$1.createElement(Tooltip$1, {
+  }, value && value.length > 30 ? /*#__PURE__*/React.createElement(Tooltip$1, {
     content: getTooltipText(value),
     direction: "top",
     topFactor: value !== null ? -getTopFactor(Math.ceil(value.length / 50)) : -getTopFactor(1)
-  }, truncateString(value, 30)) : value ? truncateString(value, 30) : "N/A", " "))))))), /*#__PURE__*/React$1.createElement(PaginationWrapper, null, enablePagination && /*#__PURE__*/React$1.createElement(RecordDisplay, null, getRecordRangeDisplay()), enablePagination && /*#__PURE__*/React$1.createElement(PaginationContainer, null, totalPages > 0 && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("span", {
+  }, truncateString(value, 30)) : value ? truncateString(value, 30) : "N/A", " "))))))), /*#__PURE__*/React.createElement(PaginationWrapper, null, enablePagination && /*#__PURE__*/React.createElement(RecordDisplay, null, getRecordRangeDisplay()), enablePagination && /*#__PURE__*/React.createElement(PaginationContainer, null, totalPages > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: `arrow ${currentPage === 1 ? "disabled" : ""}`,
     onClick: () => currentPage > 1 && handlePageChange(currentPage - 1)
-  }, /*#__PURE__*/React$1.createElement(ChevronLeftIcon, {
+  }, /*#__PURE__*/React.createElement(ChevronLeftIcon, {
     disabled: currentPage === 1
   })), (() => {
     const pages = [];
     const range = 2;
-    pages.push(/*#__PURE__*/React$1.createElement("span", {
+    pages.push(/*#__PURE__*/React.createElement("span", {
       key: 1,
       className: `page-number ${currentPage === 1 ? "active" : ""}`,
       onClick: () => handlePageChange(1)
@@ -14574,7 +14574,7 @@ const ReportTable = props => {
     }
     if (totalPages <= 10) {
       for (let i = 2; i <= totalPages; i++) {
-        pages.push(/*#__PURE__*/React$1.createElement("span", {
+        pages.push(/*#__PURE__*/React.createElement("span", {
           key: i,
           className: `page-number ${currentPage === i ? "active" : ""}`,
           onClick: () => handlePageChange(i)
@@ -14593,38 +14593,38 @@ const ReportTable = props => {
       end = totalPages - 1;
     }
     if (start > 2) {
-      pages.push(/*#__PURE__*/React$1.createElement("span", {
+      pages.push(/*#__PURE__*/React.createElement("span", {
         key: "ellipsis-start"
       }, "..."));
     }
     for (let i = start; i <= end; i++) {
-      pages.push(/*#__PURE__*/React$1.createElement("span", {
+      pages.push(/*#__PURE__*/React.createElement("span", {
         key: i,
         className: `page-number ${currentPage === i ? "active" : ""}`,
         onClick: () => handlePageChange(i)
       }, i));
     }
     if (end < totalPages - 1) {
-      pages.push(/*#__PURE__*/React$1.createElement("span", {
+      pages.push(/*#__PURE__*/React.createElement("span", {
         key: "ellipsis-end"
       }, "..."));
     }
-    pages.push(/*#__PURE__*/React$1.createElement("span", {
+    pages.push(/*#__PURE__*/React.createElement("span", {
       key: totalPages,
       className: `page-number ${currentPage === totalPages ? "active" : ""}`,
       onClick: () => handlePageChange(totalPages)
     }, totalPages));
     return pages;
-  })(), /*#__PURE__*/React$1.createElement("span", {
+  })(), /*#__PURE__*/React.createElement("span", {
     className: `arrow ${currentPage === totalPages ? "disabled" : ""}`,
     onClick: () => currentPage < totalPages && handlePageChange(currentPage + 1)
-  }, /*#__PURE__*/React$1.createElement(ChevronRightIcon, {
+  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
     disabled: currentPage === totalPages
-  }))))), isLoading && enablePagination && /*#__PURE__*/React$1.createElement(LoaderWrapper$1, {
+  }))))), isLoading && enablePagination && /*#__PURE__*/React.createElement(LoaderWrapper$1, {
     id: "LoaderWrapper"
-  }, /*#__PURE__*/React$1.createElement(Loader$1, null)), !disableInfo ? /*#__PURE__*/React$1.createElement(InfoBlock, null, /*#__PURE__*/React$1.createElement(InfoIcon, {
+  }, /*#__PURE__*/React.createElement(Loader$1, null)), !disableInfo ? /*#__PURE__*/React.createElement(InfoBlock, null, /*#__PURE__*/React.createElement(InfoIcon, {
     color: "#1B30AA"
-  }), /*#__PURE__*/React$1.createElement(InfoText, null, "Download table to get the full data")) : "");
+  }), /*#__PURE__*/React.createElement(InfoText, null, "Download table to get the full data")) : "");
 };
 ReportTable.propTypes = {
   buttonText: PropTypes.string,
@@ -14766,14 +14766,14 @@ const EventListItem = props => {
       event
     });
   };
-  return /*#__PURE__*/React$1.createElement(EventListItemControlsContainer, {
+  return /*#__PURE__*/React.createElement(EventListItemControlsContainer, {
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(Period, {
+  }, /*#__PURE__*/React.createElement(Period, {
     className: "Period"
-  }, period), /*#__PURE__*/React$1.createElement(EventName, {
+  }, period), /*#__PURE__*/React.createElement(EventName, {
     className: "EventName"
-  }, eventName), /*#__PURE__*/React$1.createElement(SelectButtonContainer, null, /*#__PURE__*/React$1.createElement(LinkButton, {
+  }, eventName), /*#__PURE__*/React.createElement(SelectButtonContainer, null, /*#__PURE__*/React.createElement(LinkButton, {
     size: "medium",
     text: "Select",
     rightIcon: "Select",
@@ -14841,11 +14841,11 @@ const EventList = props => {
   } = props;
   const displayEventsItems = () => {
     if (eventsData && eventsData.length > 0) {
-      return /*#__PURE__*/React$1.createElement(EventItemsContainer, {
+      return /*#__PURE__*/React.createElement(EventItemsContainer, {
         id: "EventItemsContainer"
-      }, eventsData?.map(item => /*#__PURE__*/React$1.createElement(OneEventItemContainer, {
+      }, eventsData?.map(item => /*#__PURE__*/React.createElement(OneEventItemContainer, {
         id: "OneEventItemContainer"
-      }, /*#__PURE__*/React$1.createElement(EventListItem, {
+      }, /*#__PURE__*/React.createElement(EventListItem, {
         height: itemHeight,
         width: width / 3,
         eventName: item.eventName,
@@ -14861,11 +14861,11 @@ const EventList = props => {
   };
 
   //= ======================================== MAIN RETURN ====================================
-  return /*#__PURE__*/React$1.createElement(MainContainer$4, {
+  return /*#__PURE__*/React.createElement(MainContainer$4, {
     id: "MainContainer",
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(PanelContainer$1, {
+  }, /*#__PURE__*/React.createElement(PanelContainer$1, {
     id: "PanelContainer"
   }, displayEventsItems()));
   //= ======================================== MAIN RETURN END====================================
@@ -15159,27 +15159,27 @@ const BannerEventBox = props => {
     switch (banner) {
       case "Stop&Shop":
         return {
-          icon: /*#__PURE__*/React$1.createElement(StopAndShopNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(StopAndShopNewIcon, null),
           name: "Stop&Shop"
         };
       case "Food Lion":
         return {
-          icon: /*#__PURE__*/React$1.createElement(FoodLionNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(FoodLionNewIcon, null),
           name: "Food Lion"
         };
       case "Giant Food":
         return {
-          icon: /*#__PURE__*/React$1.createElement(GiantFoodNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(GiantFoodNewIcon, null),
           name: "Giant Food"
         };
       case "The Giant Company":
         return {
-          icon: /*#__PURE__*/React$1.createElement(TheGiantCompanyIcon$1, null),
+          icon: /*#__PURE__*/React.createElement(TheGiantCompanyIcon$1, null),
           name: "The Giant Company"
         };
       case "Hannaford":
         return {
-          icon: /*#__PURE__*/React$1.createElement(HannafordNewIcon, null),
+          icon: /*#__PURE__*/React.createElement(HannafordNewIcon, null),
           name: "Hannaford"
         };
       default:
@@ -15189,18 +15189,18 @@ const BannerEventBox = props => {
   const onInfoClickHandler = event => {
     onInfoClick(event);
   };
-  return /*#__PURE__*/React$1.createElement(MainContainer$2, {
+  return /*#__PURE__*/React.createElement(MainContainer$2, {
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(TitleWrapper, null, formatedBanners().icon, "|", /*#__PURE__*/React$1.createElement(CardTitle, null, formatedBanners().name)), /*#__PURE__*/React$1.createElement(Block, null, /*#__PURE__*/React$1.createElement(Headline, null, "Event Description"), /*#__PURE__*/React$1.createElement(Text, null, description)), /*#__PURE__*/React$1.createElement(Block, null, /*#__PURE__*/React$1.createElement(Headline, null, "Event Dates:"), /*#__PURE__*/React$1.createElement(Text, null, dates.join(" - "))), /*#__PURE__*/React$1.createElement(ButtonWrap, null, /*#__PURE__*/React$1.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(TitleWrapper, null, formatedBanners().icon, "|", /*#__PURE__*/React.createElement(CardTitle, null, formatedBanners().name)), /*#__PURE__*/React.createElement(Block, null, /*#__PURE__*/React.createElement(Headline, null, "Event Description"), /*#__PURE__*/React.createElement(Text, null, description)), /*#__PURE__*/React.createElement(Block, null, /*#__PURE__*/React.createElement(Headline, null, "Event Dates:"), /*#__PURE__*/React.createElement(Text, null, dates.join(" - "))), /*#__PURE__*/React.createElement(ButtonWrap, null, /*#__PURE__*/React.createElement(Button, {
     leftIcon: "Eye",
     onClick: () => onInfoClickHandler(banner),
     text: buttonText,
     type: "secondary",
     disabled: disabled
-  })), /*#__PURE__*/React$1.createElement(DetailsWrapper, null, data?.map((item, index) => item && /*#__PURE__*/React$1.createElement(React$1.Fragment, {
+  })), /*#__PURE__*/React.createElement(DetailsWrapper, null, data?.map((item, index) => item && /*#__PURE__*/React.createElement(React.Fragment, {
     key: item.name
-  }, /*#__PURE__*/React$1.createElement(KeyBlock, null, /*#__PURE__*/React$1.createElement(Key, null, item.name), /*#__PURE__*/React$1.createElement("br", null), /*#__PURE__*/React$1.createElement(Count, null, item.items)), index !== data.length - 1 && /*#__PURE__*/React$1.createElement(Seperator, null)))));
+  }, /*#__PURE__*/React.createElement(KeyBlock, null, /*#__PURE__*/React.createElement(Key, null, item.name), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Count, null, item.items)), index !== data.length - 1 && /*#__PURE__*/React.createElement(Seperator, null)))));
 };
 BannerEventBox.propTypes = {
   width: PropTypes.string,
@@ -15264,45 +15264,45 @@ const BannerEventBoxList = props => {
   const bannersIcon = () => {
     switch (retailer) {
       case 'StopAndShop':
-        return /*#__PURE__*/React$1.createElement(StopAndShopNewIcon, null);
+        return /*#__PURE__*/React.createElement(StopAndShopNewIcon, null);
       case 'FoodLion':
-        return /*#__PURE__*/React$1.createElement(FoodLionNewIcon, null);
+        return /*#__PURE__*/React.createElement(FoodLionNewIcon, null);
       case 'GiantFood':
-        return /*#__PURE__*/React$1.createElement(GiantFoodNewIcon, null);
+        return /*#__PURE__*/React.createElement(GiantFoodNewIcon, null);
       case 'TheGiantCompany':
-        return /*#__PURE__*/React$1.createElement(TheGiantCompanyIcon$1, null);
+        return /*#__PURE__*/React.createElement(TheGiantCompanyIcon$1, null);
       case 'Hannaford':
-        return /*#__PURE__*/React$1.createElement(HannafordNewIcon, null);
+        return /*#__PURE__*/React.createElement(HannafordNewIcon, null);
       default:
         return null;
     }
   };
-  return /*#__PURE__*/React$1.createElement(CollapseMenuItemMainContainer, {
+  return /*#__PURE__*/React.createElement(CollapseMenuItemMainContainer, {
     className: className
-  }, /*#__PURE__*/React$1.createElement(CollapseMenuItemContainer, {
+  }, /*#__PURE__*/React.createElement(CollapseMenuItemContainer, {
     onClick: () => handleToggle()
-  }, showLoader ? /*#__PURE__*/React$1.createElement(LoaderWrapper, {
+  }, showLoader ? /*#__PURE__*/React.createElement(LoaderWrapper, {
     id: "LoaderWrapper"
-  }, /*#__PURE__*/React$1.createElement("span", null, "Processing Data"), /*#__PURE__*/React$1.createElement(Loader, null)) : /*#__PURE__*/React$1.createElement(MainDetails, null, !cardsContent && /*#__PURE__*/React$1.createElement(BannerIcon, null, bannersIcon()), showEventDetails ? /*#__PURE__*/React$1.createElement(SubDetails, null, eventName, ' ', eventName !== '' && eventType !== '' && /*#__PURE__*/React$1.createElement(ProductName, null, "|"), ' ', eventType, count && /*#__PURE__*/React$1.createElement(ProductName, null, ': ', count, ' ', count > 1 ? 'Products' : 'Product')) : ' '), /*#__PURE__*/React$1.createElement(ToggleContainer, null, IsItemOpen ? /*#__PURE__*/React$1.createElement(LinkButton, {
+  }, /*#__PURE__*/React.createElement("span", null, "Processing Data"), /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(MainDetails, null, !cardsContent && /*#__PURE__*/React.createElement(BannerIcon, null, bannersIcon()), showEventDetails ? /*#__PURE__*/React.createElement(SubDetails, null, eventName, ' ', eventName !== '' && eventType !== '' && /*#__PURE__*/React.createElement(ProductName, null, "|"), ' ', eventType, count && /*#__PURE__*/React.createElement(ProductName, null, ': ', count, ' ', count > 1 ? 'Products' : 'Product')) : ' '), /*#__PURE__*/React.createElement(ToggleContainer, null, IsItemOpen ? /*#__PURE__*/React.createElement(LinkButton, {
     disabled: disableToggle,
     text: linkText,
     leftIcon: "info",
     rightIcon: "arrowdown",
     textColor: toggleColor,
     color: toggleColor
-  }) : /*#__PURE__*/React$1.createElement(LinkButton, {
+  }) : /*#__PURE__*/React.createElement(LinkButton, {
     disabled: disableToggle,
     text: linkText,
     leftIcon: "info",
     rightIcon: "arrowright",
     textColor: toggleColor,
     color: toggleColor
-  }))), IsItemOpen && /*#__PURE__*/React$1.createElement(CollapseMenuItemContentContainer, {
+  }))), IsItemOpen && /*#__PURE__*/React.createElement(CollapseMenuItemContentContainer, {
     id: "CollapseMenuItemContentContainer"
-  }, cardsContent ? /*#__PURE__*/React$1.createElement(MainContainer$3, {
+  }, cardsContent ? /*#__PURE__*/React.createElement(MainContainer$3, {
     width: width,
     height: height
-  }, data.map(item => /*#__PURE__*/React$1.createElement(BannerEventBox, {
+  }, data.map(item => /*#__PURE__*/React.createElement(BannerEventBox, {
     key: item?.banner,
     height: "auto",
     width: bannerWidth,
@@ -15313,7 +15313,7 @@ const BannerEventBoxList = props => {
     onInfoClick: () => retailerFile(item?.banner),
     disabled: item?.disabled,
     buttonText: item.buttonText
-  })), showDraft && /*#__PURE__*/React$1.createElement(DraftTag$1, null, "DRAFT")) : children));
+  })), showDraft && /*#__PURE__*/React.createElement(DraftTag$1, null, "DRAFT")) : children));
 };
 BannerEventBoxList.propTypes = {
   className: PropTypes.string,
@@ -15466,14 +15466,14 @@ const DialogOverlay = props => {
     modal.close();
     onDialogClose();
   };
-  return /*#__PURE__*/React$1.createElement(ModalWrapper, {
+  return /*#__PURE__*/React.createElement(ModalWrapper, {
     className: className
-  }, /*#__PURE__*/React$1.createElement(Modal, null, /*#__PURE__*/React$1.createElement(ModalHeader, null, /*#__PURE__*/React$1.createElement(ModalTitle, null, title), /*#__PURE__*/React$1.createElement(ModalClose, {
+  }, /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, title), /*#__PURE__*/React.createElement(ModalClose, {
     type: "button",
     onClick: closeModal
-  }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+  }, /*#__PURE__*/React.createElement(CloseXIcon, {
     fill: "white"
-  }))), /*#__PURE__*/React$1.createElement(ModalBody, {
+  }))), /*#__PURE__*/React.createElement(ModalBody, {
     id: "modalBody"
   }, children)));
 };
@@ -25918,44 +25918,44 @@ const CollapseHeader = props => {
   const getRetailerIcon = retailerName => {
     switch (retailerName) {
       case "Food Lion":
-        return /*#__PURE__*/React$1.createElement(RetailerIconContainer, {
+        return /*#__PURE__*/React.createElement(RetailerIconContainer, {
           id: "RetailerIconContainer"
-        }, /*#__PURE__*/React$1.createElement(FoodLionIcon, {
+        }, /*#__PURE__*/React.createElement(FoodLionIcon, {
           width: "90",
           height: "20"
         }), "\xA0");
       case "Hannaford":
-        return /*#__PURE__*/React$1.createElement(RetailerIconContainer, {
+        return /*#__PURE__*/React.createElement(RetailerIconContainer, {
           id: "RetailerIconContainer"
-        }, /*#__PURE__*/React$1.createElement(HannafordIcon, {
+        }, /*#__PURE__*/React.createElement(HannafordIcon, {
           width: "90",
           height: "20"
         }), "\xA0");
       case "Giant Food":
-        return /*#__PURE__*/React$1.createElement(RetailerIconContainer, {
+        return /*#__PURE__*/React.createElement(RetailerIconContainer, {
           id: "RetailerIconContainer"
-        }, /*#__PURE__*/React$1.createElement(GiantFoodIcon, {
+        }, /*#__PURE__*/React.createElement(GiantFoodIcon, {
           width: "60",
           height: "20"
         }), "\xA0");
       case "The Giant Company":
-        return /*#__PURE__*/React$1.createElement(RetailerIconContainer, {
+        return /*#__PURE__*/React.createElement(RetailerIconContainer, {
           id: "RetailerIconContainer"
-        }, /*#__PURE__*/React$1.createElement(TheGiantCompanyIcon, {
+        }, /*#__PURE__*/React.createElement(TheGiantCompanyIcon, {
           width: "60",
           height: "20"
         }), "\xA0");
       case "Stop&Shop":
-        return /*#__PURE__*/React$1.createElement(RetailerIconContainer, {
+        return /*#__PURE__*/React.createElement(RetailerIconContainer, {
           id: "RetailerIconContainer"
-        }, /*#__PURE__*/React$1.createElement(StopAndShopIcon, {
+        }, /*#__PURE__*/React.createElement(StopAndShopIcon, {
           width: "90",
           height: "20"
         }), "\xA0");
       default:
-        return /*#__PURE__*/React$1.createElement(RetailerIconContainer, {
+        return /*#__PURE__*/React.createElement(RetailerIconContainer, {
           id: "RetailerIconContainer"
-        }, retailerName, retailerName && /*#__PURE__*/React$1.createElement(FieldsDelimiter, {
+        }, retailerName, retailerName && /*#__PURE__*/React.createElement(FieldsDelimiter, {
           className: "FieldsDelimiter"
         }, " | "));
     }
@@ -25981,28 +25981,28 @@ const CollapseHeader = props => {
     } = viewCreativeContainerRef.current;
     return (offsetTop + 33).toString().concat("", "px");
   };
-  return /*#__PURE__*/React$1.createElement(MainContainer$1, {
+  return /*#__PURE__*/React.createElement(MainContainer$1, {
     id: "CollapseHeader",
     className: className,
     height: height,
     width: width,
     textcolor: textcolor
-  }, /*#__PURE__*/React$1.createElement(PanelContainer, {
+  }, /*#__PURE__*/React.createElement(PanelContainer, {
     id: "PanelContainer"
-  }, /*#__PURE__*/React$1.createElement(EventNameAndViewCreativeContainer, {
+  }, /*#__PURE__*/React.createElement(EventNameAndViewCreativeContainer, {
     id: "EventNameAndViewCreativeContainer"
-  }, /*#__PURE__*/React$1.createElement(EventNameViewCreativeSubContainer, {
+  }, /*#__PURE__*/React.createElement(EventNameViewCreativeSubContainer, {
     id: "EventNameViewCreativeSubContainer"
-  }, /*#__PURE__*/React$1.createElement(ViewCreativeButtonAndListBoxContainer, {
+  }, /*#__PURE__*/React.createElement(ViewCreativeButtonAndListBoxContainer, {
     id: "ViewCreativeButtonAndListBoxContainer"
-  }, showViewCreativeButton && /*#__PURE__*/React$1.createElement(Button, {
+  }, showViewCreativeButton && /*#__PURE__*/React.createElement(Button, {
     leftIcon: "Eye",
     onClick: viewCreativeOnClickHandler,
     text: buttonText,
     type: "secondary",
     disabled: disabled,
     size: "small"
-  }), viewCreativeListBoxOpenedState && /*#__PURE__*/React$1.createElement(ViewCreativeListBoxContainer, {
+  }), viewCreativeListBoxOpenedState && /*#__PURE__*/React.createElement(ViewCreativeListBoxContainer, {
     id: "ViewCreativeListBoxContainer",
     top: getViewCreativeContainerTop(),
     left: getViewCreativeContainerLeft(),
@@ -26011,59 +26011,59 @@ const CollapseHeader = props => {
     onMouseLeave: () => {
       setViewCreativeListBoxOpenedState(false);
     }
-  }))), showDraft && /*#__PURE__*/React$1.createElement(DraftTag, null, "DRAFT")), /*#__PURE__*/React$1.createElement(FilterValuesContainer, {
+  }))), showDraft && /*#__PURE__*/React.createElement(DraftTag, null, "DRAFT")), /*#__PURE__*/React.createElement(FilterValuesContainer, {
     id: "FilterValuesContainer"
-  }, showRetailerIcon && /*#__PURE__*/React$1.createElement(Retailer, {
+  }, showRetailerIcon && /*#__PURE__*/React.createElement(Retailer, {
     id: "Retailer"
-  }, getRetailerIcon(data.retailer)), /*#__PURE__*/React$1.createElement(FilterValue, {
+  }, getRetailerIcon(data.retailer)), /*#__PURE__*/React.createElement(FilterValue, {
     className: "FilterValue"
-  }, data.eventType), data.externalEventDescription && data.externalEventDescription !== "" && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(FieldsDelimiter, {
+  }, data.eventType), data.externalEventDescription && data.externalEventDescription !== "" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldsDelimiter, {
     className: "FieldsDelimiter"
-  }, " ", "|", " "), /*#__PURE__*/React$1.createElement(FilterValue, {
+  }, " ", "|", " "), /*#__PURE__*/React.createElement(FilterValue, {
     className: "FilterValue"
-  }, data.externalEventDescription)), data.externalEventID && data.externalEventID !== "" && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(FieldsDelimiter, {
+  }, data.externalEventDescription)), data.externalEventID && data.externalEventID !== "" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldsDelimiter, {
     className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/React$1.createElement(FilterValue, {
+  }, " | "), /*#__PURE__*/React.createElement(FilterValue, {
     className: "FilterValue"
-  }, data.externalEventID)), data.storeType && data.storeType !== "" && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(FieldsDelimiter, {
+  }, data.externalEventID)), data.storeType && data.storeType !== "" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldsDelimiter, {
     className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/React$1.createElement(FilterValue, {
+  }, " | "), /*#__PURE__*/React.createElement(FilterValue, {
     className: "FilterValue"
-  }, data.storeType)), data.category && data.category !== "" && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(FieldsDelimiter, {
+  }, data.storeType)), data.category && data.category !== "" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldsDelimiter, {
     className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/React$1.createElement(FilterValue, {
+  }, " | "), /*#__PURE__*/React.createElement(FilterValue, {
     className: "FilterValue"
-  }, data.category)), data.supplier && data.supplier !== "" && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(FieldsDelimiter, {
+  }, data.category)), data.supplier && data.supplier !== "" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldsDelimiter, {
     className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/React$1.createElement(FilterValue, {
+  }, " | "), /*#__PURE__*/React.createElement(FilterValue, {
     className: "FilterValue"
-  }, data.supplier)), data.brand && data.brand !== "" && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(FieldsDelimiter, {
+  }, data.supplier)), data.brand && data.brand !== "" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldsDelimiter, {
     className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/React$1.createElement(FilterValue, {
+  }, " | "), /*#__PURE__*/React.createElement(FilterValue, {
     className: "FilterValue"
-  }, data.brand))), /*#__PURE__*/React$1.createElement(FilterValuesContainer, null, /*#__PURE__*/React$1.createElement(ObjectiesContainer, {
+  }, data.brand))), /*#__PURE__*/React.createElement(FilterValuesContainer, null, /*#__PURE__*/React.createElement(ObjectiesContainer, {
     id: "ObjectiesContainer",
     showPeriodIcon: showPeriodIcon
-  }, /*#__PURE__*/React$1.createElement(ObjectivesDescription, {
+  }, /*#__PURE__*/React.createElement(ObjectivesDescription, {
     id: "ObjectivesDescription"
-  }, /*#__PURE__*/React$1.createElement(ObjectivesTitle, {
+  }, /*#__PURE__*/React.createElement(ObjectivesTitle, {
     id: "ObjectivesTitle"
-  }, data?.eventDescription?.length > 0 ? descriptionTitle : ""), data.eventDescription))), /*#__PURE__*/React$1.createElement(ObjectiesAndPeriodsContainer, {
+  }, data?.eventDescription?.length > 0 ? descriptionTitle : ""), data.eventDescription))), /*#__PURE__*/React.createElement(ObjectiesAndPeriodsContainer, {
     id: "ObjectiesAndPeriodsContainer"
-  }, /*#__PURE__*/React$1.createElement(ObjectiesContainer, {
+  }, /*#__PURE__*/React.createElement(ObjectiesContainer, {
     id: "ObjectiesContainer",
     showPeriodIcon: showPeriodIcon
-  }, /*#__PURE__*/React$1.createElement(ObjectivesDescription, {
+  }, /*#__PURE__*/React.createElement(ObjectivesDescription, {
     id: "ObjectivesDescription"
-  }, /*#__PURE__*/React$1.createElement(ObjectivesTitle, {
+  }, /*#__PURE__*/React.createElement(ObjectivesTitle, {
     id: "ObjectivesTitle"
-  }, data?.objectivesDescription?.length > 0 ? "Objectives:  " : ""), data.objectivesDescription)), showPeriodIcon && /*#__PURE__*/React$1.createElement(PeriodsContainer, {
+  }, data?.objectivesDescription?.length > 0 ? "Objectives:  " : ""), data.objectivesDescription)), showPeriodIcon && /*#__PURE__*/React.createElement(PeriodsContainer, {
     id: "PeriodsContainer"
-  }, /*#__PURE__*/React$1.createElement(SubLineContainer, {
+  }, /*#__PURE__*/React.createElement(SubLineContainer, {
     id: "SubLineContainer"
-  }, data?.eventDatesValue?.length > 0 ? /*#__PURE__*/React$1.createElement(PeriodLabel, {
+  }, data?.eventDatesValue?.length > 0 ? /*#__PURE__*/React.createElement(PeriodLabel, {
     id: "PeriodLabel"
-  }, datesTitle, " ") : "", data?.eventDatesValue?.length > 0 ? /*#__PURE__*/React$1.createElement(PeriodValue, {
+  }, datesTitle, " ") : "", data?.eventDatesValue?.length > 0 ? /*#__PURE__*/React.createElement(PeriodValue, {
     id: "PeriodValue"
   }, data.eventDatesValue) : "")))));
 };
@@ -26264,22 +26264,21 @@ const DeleteIcon = dt.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -26299,7 +26298,7 @@ const QuickFilterDropdownSingle = _ref => {
       if (index !== lastIndex) {
         parts.push(text.slice(lastIndex, index));
       }
-      parts.push(/*#__PURE__*/React$1.createElement("span", {
+      parts.push(/*#__PURE__*/React.createElement("span", {
         key: index,
         className: "highlight"
       }, text.slice(index, index + highlight.length)));
@@ -26384,25 +26383,25 @@ const QuickFilterDropdownSingle = _ref => {
       newValue: []
     });
   };
-  return /*#__PURE__*/React$1.createElement(QuickFilterInput, {
+  return /*#__PURE__*/React.createElement(QuickFilterInput, {
     width: width,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(InputContainer$1, {
+  }, /*#__PURE__*/React.createElement(InputContainer$1, {
     className: "InputContainer",
     labelColor: labelColor,
     hoverColor: hoverColor,
     disabled: disabled,
     error: error,
     isFocused: isFocused
-  }, /*#__PURE__*/React$1.createElement(InputSubContainer$1, {
+  }, /*#__PURE__*/React.createElement(InputSubContainer$1, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$1, {
+  }, /*#__PURE__*/React.createElement(Label$1, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -26412,7 +26411,7 @@ const QuickFilterDropdownSingle = _ref => {
     errorMessage: errorMessage,
     onClick: handleLabelClick,
     showLabelOnTop: showLabelOnTop
-  }, label), /*#__PURE__*/React$1.createElement(StyledInput$1, {
+  }, label), /*#__PURE__*/React.createElement(StyledInput$1, {
     className: "StyledInput",
     ref: inputRef,
     value: selectedOptions && selectedOptions?.length > 0 ? selectedOptions[0].label : inputValue && inputValue?.length > 0 ? inputValue[0].label : "",
@@ -26422,37 +26421,37 @@ const QuickFilterDropdownSingle = _ref => {
     placeholder: placeHolder,
     error: error,
     isFocused: isFocused
-  })), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(DeleteIcon, {
+  })), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React.createElement(DeleteIcon, {
     className: "IconContainer",
     onClick: handleClearClick
-  }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+  }, /*#__PURE__*/React.createElement(CloseXIcon, {
     width: "12px",
     height: "12px",
     fill: "#B1B1B1"
-  })), /*#__PURE__*/React$1.createElement(IconContainer$2, {
+  })), /*#__PURE__*/React.createElement(IconContainer$2, {
     className: "IconContainer",
     onClick: handleOpenCloseMenuClick
-  }, showOptions ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
+  }, showOptions ? /*#__PURE__*/React.createElement(MenuItemUpIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }) : /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+  }) : /*#__PURE__*/React.createElement(MenuItemOpenIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$1, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$1, {
+  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React.createElement(ErrorMessage$1, null, errorMessage), /*#__PURE__*/React.createElement(OptionsContainer$1, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
     showoptions: showOptions,
     disabled: disabled,
     filteredoptions: filteredoptions
-  }, /*#__PURE__*/React$1.createElement(OptionsSubContainer$1, {
+  }, /*#__PURE__*/React.createElement(OptionsSubContainer$1, {
     className: "OptionsSubContainer",
     showoptions: showOptions,
     disabled: disabled,
     filteredoptions: filteredoptions
-  }, filteredoptions.map(option => /*#__PURE__*/React$1.createElement(OptionItem$1, {
+  }, filteredoptions.map(option => /*#__PURE__*/React.createElement(OptionItem$1, {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
@@ -26677,24 +26676,23 @@ const IconContainer$1 = dt.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -26737,7 +26735,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
       if (index !== lastIndex) {
         parts.push(text.slice(lastIndex, index));
       }
-      parts.push(/*#__PURE__*/React$1.createElement("span", {
+      parts.push(/*#__PURE__*/React.createElement("span", {
         key: index,
         className: "highlight"
       }, text.slice(index, index + highlight.length)));
@@ -26804,9 +26802,9 @@ const QuickFilterDropdownMultiSelection = _ref => {
     });
   };
   const displaySelectedOptions = () => {
-    const content = /*#__PURE__*/React$1.createElement(SelectedOptionsContainer, {
+    const content = /*#__PURE__*/React.createElement(SelectedOptionsContainer, {
       className: "SelectedOptionsContainer"
-    }, selectedOptions?.map((option, index) => index < 2 ? /*#__PURE__*/React$1.createElement(SelectedOptionItem, {
+    }, selectedOptions?.map((option, index) => index < 2 ? /*#__PURE__*/React.createElement(SelectedOptionItem, {
       className: "SelectedOptionItem",
       key: option.value,
       onClick: () => {
@@ -26816,11 +26814,11 @@ const QuickFilterDropdownMultiSelection = _ref => {
           inputRef?.current?.focus();
         }
       }
-    }, option.label && option.label?.length > 10 ? `${option.label?.substring(0, 10)}...  ` : `${option.label}  `, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+    }, option.label && option.label?.length > 10 ? `${option.label?.substring(0, 10)}...  ` : `${option.label}  `, /*#__PURE__*/React.createElement(CloseXIcon, {
       width: "8px",
       height: "8px",
       fill: "#212121"
-    })) : ' '), selectedOptions.length > 2 ? /*#__PURE__*/React$1.createElement(SelectedOptionItem, {
+    })) : ' '), selectedOptions.length > 2 ? /*#__PURE__*/React.createElement(SelectedOptionItem, {
       className: "SelectedOptionItem"
     }, selectedOptions.length - 2, "+") : '');
     return content;
@@ -26842,7 +26840,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
       return '';
     }
     if (required) {
-      return /*#__PURE__*/React$1.createElement("span", {
+      return /*#__PURE__*/React.createElement("span", {
         style: {
           color: 'red'
         }
@@ -26850,25 +26848,25 @@ const QuickFilterDropdownMultiSelection = _ref => {
     }
     return '';
   };
-  return /*#__PURE__*/React$1.createElement(DropdownWrapper, {
+  return /*#__PURE__*/React.createElement(DropdownWrapper, {
     className: "DropdownWrapper",
     width: width,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(InputContainer, {
+  }, /*#__PURE__*/React.createElement(InputContainer, {
     className: "InputContainer",
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     isFocused: isFocused
-  }, /*#__PURE__*/React$1.createElement(InputSubContainer, {
+  }, /*#__PURE__*/React.createElement(InputSubContainer, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label, {
+  }, /*#__PURE__*/React.createElement(Label, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -26878,7 +26876,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
     errorMessage: errorMessage,
     onClick: handleLabelClick,
     showLabelOnTop: showLabelOnTop
-  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput, {
+  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React.createElement(StyledInput, {
     className: "StyledInput",
     ref: inputRef,
     value: inputValue,
@@ -26890,48 +26888,48 @@ const QuickFilterDropdownMultiSelection = _ref => {
     placeholder: isFocused ? placeHolder || 'Type to search...' : '',
     error: error,
     isFocused: isFocused
-  }) : ' '), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$1, {
+  }) : ' '), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React.createElement(IconContainer$1, {
     className: "IconContainer",
     onClick: handleClearClick
-  }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+  }, /*#__PURE__*/React.createElement(CloseXIcon, {
     width: "12px",
     height: "12px",
     fill: "#B1B1B1"
-  })), /*#__PURE__*/React$1.createElement(IconContainer$1, {
+  })), /*#__PURE__*/React.createElement(IconContainer$1, {
     className: "IconContainer",
     onClick: handleOpenCloseMenuClick
-  }, showOptions ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
+  }, showOptions ? /*#__PURE__*/React.createElement(MenuItemUpIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }) : /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+  }) : /*#__PURE__*/React.createElement(MenuItemOpenIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer, {
+  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React.createElement(ErrorMessage, null, errorMessage), /*#__PURE__*/React.createElement(OptionsContainer, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
     showoptions: showOptions,
     disabled: disabled,
     filteredoptions: filteredoptions
-  }, /*#__PURE__*/React$1.createElement(OptionsSubContainer, {
+  }, /*#__PURE__*/React.createElement(OptionsSubContainer, {
     className: "OptionsSubContainer",
     showoptions: showOptions,
     disabled: disabled,
     filteredoptions: filteredoptions
-  }, filteredoptions.map(option => /*#__PURE__*/React$1.createElement(OptionItem, {
+  }, filteredoptions.map(option => /*#__PURE__*/React.createElement(OptionItem, {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
     selected: isDropdowned(option)
-  }, highlightText(option.label, inputValue), /*#__PURE__*/React$1.createElement(IconContainer$1, {
+  }, highlightText(option.label, inputValue), /*#__PURE__*/React.createElement(IconContainer$1, {
     className: "IconContainer"
-  }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/React$1.createElement(CheckBoxCheckedIcon, {
+  }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/React.createElement(CheckBoxCheckedIcon, {
     width: "14px",
     height: "14px",
     color: disabled ? '#888' : checkBoxColor
-  }) : /*#__PURE__*/React$1.createElement(CheckBoxNotCheckedIcon, {
+  }) : /*#__PURE__*/React.createElement(CheckBoxNotCheckedIcon, {
     width: "14px",
     height: "14px",
     color: disabled ? '#888' : '#212121'
@@ -27042,42 +27040,48 @@ const QuickFilter = _ref => {
     xIconShow: xIconShow
   }));
 };
-QuickFilter.propTypes = {
-  hoverColor: PropTypes.string,
-  multipleSelection: PropTypes.bool,
-  disabled: PropTypes.bool,
-  error: PropTypes.bool,
-  errorMessage: PropTypes.string,
-  label: PropTypes.string,
-  labelColor: PropTypes.string,
-  placeHolder: PropTypes.string,
-  width: PropTypes.string,
-  checkBoxColor: PropTypes.string,
-  onChange: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.string
-  })),
-  selectedValue: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.string
-  }))
-};
-QuickFilter.defaultProps = {
-  hoverColor: "#066768",
-  multipleSelection: false,
-  disabled: false,
-  error: false,
-  errorMessage: "",
-  label: "Unit Type:",
-  labelColor: "#066768",
-  placeHolder: "Select From List",
-  width: "auto",
-  checkBoxColor: "#229E38",
-  onChange: () => {},
-  options: [],
-  selectedValue: []
-};
+
+// QuickFilter.propTypes = {
+//   hoverColor: PropTypes.string,
+//   multipleSelection: PropTypes.bool,
+//   disabled: PropTypes.bool,
+//   error: PropTypes.bool,
+//   errorMessage: PropTypes.string,
+//   label: PropTypes.string,
+//   labelColor: PropTypes.string,
+//   placeHolder: PropTypes.string,
+//   width: PropTypes.string,
+//   checkBoxColor: PropTypes.string,
+//   onChange: PropTypes.func,
+//   options: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       id: PropTypes.string,
+//       label: PropTypes.string,
+//     })
+//   ),
+//   selectedValue: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       id: PropTypes.string,
+//       label: PropTypes.string,
+//     })
+//   ),
+// };
+
+// QuickFilter.defaultProps = {
+//   hoverColor: "#066768",
+//   multipleSelection: false,
+//   disabled: false,
+//   error: false,
+//   errorMessage: "",
+//   label: "Unit Type:",
+//   labelColor: "#066768",
+//   placeHolder: "Select From List",
+//   width: "auto",
+//   checkBoxColor: "#229E38",
+//   onChange: () => {},
+//   options: [],
+//   selectedValue: [],
+// };
 
 var classnames = {exports: {}};
 
@@ -27300,54 +27304,54 @@ const OneColumnContainer = props => {
   useEffect(() => {
     setOffsetWidth(anotherRef?.current?.offsetWidth);
   }, [anotherRef]);
-  return /*#__PURE__*/React$1.createElement(StyledContainer, {
+  return /*#__PURE__*/React.createElement(StyledContainer, {
     className: classNames('OneColumnContainer', itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
     width: width,
     height: height,
     overflow: overflow
-  }, /*#__PURE__*/React$1.createElement(OneColumnContainerMainDiv, {
+  }, /*#__PURE__*/React.createElement(OneColumnContainerMainDiv, {
     className: "OneColumnContainerMainDiv",
     width: width,
     height: height,
     display: display,
     gridTemplateColumns: gridTemplateColumns,
     ref: nodeRef
-  }, !isLoading && columnTitle && !hover && /*#__PURE__*/React$1.createElement(ColumnTitle, {
+  }, !isLoading && columnTitle && !hover && /*#__PURE__*/React.createElement(ColumnTitle, {
     className: "ColumnTitle"
-  }, columnTitle), !isLoading && showViewByBannerButton && !hover && /*#__PURE__*/React$1.createElement(BannerContainer, {
+  }, columnTitle), !isLoading && showViewByBannerButton && !hover && /*#__PURE__*/React.createElement(BannerContainer, {
     className: "BannerContainer",
     right: disableInfo ? '20px' : '45px'
-  }, /*#__PURE__*/React$1.createElement(OutBanner$1, {
+  }, /*#__PURE__*/React.createElement(OutBanner$1, {
     className: "OutBanner",
     onClick: () => onBannerClick({
       eventName: 'onBannerClick'
     })
-  }, /*#__PURE__*/React$1.createElement(ExportIcon, null), "By Banner")), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(IconContainer, {
+  }, /*#__PURE__*/React.createElement(ExportIcon, null), "By Banner")), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconContainer, {
     className: "IconContainer",
     onMouseEnter: () => setHover(true),
     onMouseLeave: () => setHover(false)
-  }, /*#__PURE__*/React$1.createElement(InfoIcon, null)), hover && /*#__PURE__*/React$1.createElement(InfoTextContainer, {
+  }, /*#__PURE__*/React.createElement(InfoIcon, null)), hover && /*#__PURE__*/React.createElement(InfoTextContainer, {
     className: "InfoTextContainer"
-  }, infoTitle && /*#__PURE__*/React$1.createElement(InfoTitleLabel, {
+  }, infoTitle && /*#__PURE__*/React.createElement(InfoTitleLabel, {
     className: "InfoTitleLabel",
     dangerouslySetInnerHTML: {
       __html: infoTitle
     }
-  }), /*#__PURE__*/React$1.createElement(InfoTextLabel, {
+  }), /*#__PURE__*/React.createElement(InfoTextLabel, {
     className: "InfoTextLabel",
     dangerouslySetInnerHTML: {
       __html: infoText
     }
-  }))), isLoading && /*#__PURE__*/React$1.createElement(LoadingDiv, {
+  }))), isLoading && /*#__PURE__*/React.createElement(LoadingDiv, {
     className: "loadingDiv"
-  }, /*#__PURE__*/React$1.createElement(SkeletonTheme, {
+  }, /*#__PURE__*/React.createElement(SkeletonTheme, {
     baseColor: "#EAEAEA"
-  }, /*#__PURE__*/React$1.createElement(Skeleton, {
+  }, /*#__PURE__*/React.createElement(Skeleton, {
     enableAnimation: true,
     width: (offsetWidth ?? 200) * 0.76,
     height: 45,
     containerClassName: "avatar-skeleton"
-  }), /*#__PURE__*/React$1.createElement(Skeleton, {
+  }), /*#__PURE__*/React.createElement(Skeleton, {
     enableAnimation: true,
     count: 4,
     width: (offsetWidth ?? 200) * 0.76,
@@ -27355,6 +27359,46 @@ const OneColumnContainer = props => {
     containerClassName: "avatar-skeleton"
   })))));
 };
+OneColumnContainer.propTypes = {
+  children: PropTypes.string,
+  display: PropTypes.string,
+  isLoading: PropTypes.bool,
+  gridTemplateColumns: PropTypes.string,
+  itemClass: PropTypes.string,
+  divStyle: PropTypes.string,
+  overStyle: PropTypes.string,
+  draggingStyle: PropTypes.string,
+  droppedStyle: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  overflow: PropTypes.string,
+  infoTitle: PropTypes.string,
+  infoText: PropTypes.string,
+  disableInfo: PropTypes.bool,
+  showViewByBannerButton: PropTypes.bool,
+  onBannerClick: PropTypes.func,
+  columnTitle: PropTypes.string
+};
+OneColumnContainer.defaultProps = {
+  children: '',
+  display: 'block',
+  isLoading: '',
+  gridTemplateColumns: '',
+  itemClass: '',
+  divStyle: '',
+  overStyle: '',
+  draggingStyle: '',
+  droppedStyle: '',
+  width: '300px',
+  height: '300px',
+  overflow: 'hidden',
+  infoTitle: '',
+  infoText: '',
+  disableInfo: false,
+  showViewByBannerButton: false,
+  onBannerClick: () => {},
+  columnTitle: ''
+};
 
 const scrollableStyles$3 = `
   overflow-y: auto;
@@ -27455,30 +27499,30 @@ const FormattedValue$2 = props => {
     textcolor,
     isPercent
   } = props;
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$6, {
+  return /*#__PURE__*/React.createElement(ControlsContainer$6, {
     className: className || 'FormattedValue_ControlsContainer',
     height: height,
     width: width,
     textcolor: textcolor
-  }, /*#__PURE__*/React$1.createElement(Controls$4, {
+  }, /*#__PURE__*/React.createElement(Controls$4, {
     className: "Controls",
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer$3, {
+  }, /*#__PURE__*/React.createElement(TitleAndValueContainer$3, {
     className: "TitleAndValueContainer"
-  }, title ? /*#__PURE__*/React$1.createElement(Title$9, {
+  }, title ? /*#__PURE__*/React.createElement(Title$9, {
     className: "Title",
     width: width
-  }, title) : '', showTopValue && /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$1, {
+  }, title) : '', showTopValue && /*#__PURE__*/React.createElement(CurrencySignAndFormattedValueContainer$1, {
     className: "CurrencySignAndFormattedValueContainer"
-  }, /*#__PURE__*/React$1.createElement(FormattedValueText, {
+  }, /*#__PURE__*/React.createElement(FormattedValueText, {
     className: "FormattedValueText",
     width: width
-  }, /*#__PURE__*/React$1.createElement(CurrencySignOrPercent, {
+  }, /*#__PURE__*/React.createElement(CurrencySignOrPercent, {
     className: "CurrencySignOrPercent"
-  }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '', /*#__PURE__*/React$1.createElement(CurrencySignOrPercent, {
+  }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '', /*#__PURE__*/React.createElement(CurrencySignOrPercent, {
     className: "CurrencySignOrPercent"
-  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React$1.createElement(Title$9, {
+  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React.createElement(Title$9, {
     className: "Title",
     width: width
   }, subtitle) : '')));
@@ -27692,9 +27736,9 @@ const LegendColorRectangle$1 = dt.div`
 `;
 
 /* eslint-disable no-nested-ternary */
-const ICON_TYPE_SQUARE$1 = 'Square';
-const ICON_TYPE_LEGEND_UNION_ICON$1 = 'LegendUnionIcon';
-const ICON_TYPE_LEGEND_LINE_ICON$1 = 'LegendLineIcon';
+const ICON_TYPE_SQUARE$2 = 'Square';
+const ICON_TYPE_LEGEND_UNION_ICON$2 = 'LegendUnionIcon';
+const ICON_TYPE_LEGEND_LINE_ICON$2 = 'LegendLineIcon';
 const PerformanceAnalyticsLegend = props => {
   const {
     className,
@@ -27702,26 +27746,26 @@ const PerformanceAnalyticsLegend = props => {
     width,
     height
   } = props;
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$4, {
+  return /*#__PURE__*/React.createElement(ControlsContainer$4, {
     className: className,
     height: height,
     width: width
-  }, legendData?.length > 0 ? /*#__PURE__*/React$1.createElement(Controls$2, {
+  }, legendData?.length > 0 ? /*#__PURE__*/React.createElement(Controls$2, {
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(LegendDataContainer, {
+  }, /*#__PURE__*/React.createElement(LegendDataContainer, {
     id: "LegendDataContainer"
-  }, legendData?.map((item, i) => /*#__PURE__*/React$1.createElement(TitleAndIconContainer, {
+  }, legendData?.map((item, i) => /*#__PURE__*/React.createElement(TitleAndIconContainer, {
     key: `${item.title + i}`
-  }, item.iconType === ICON_TYPE_SQUARE$1 ? /*#__PURE__*/React$1.createElement(LegendColorRectangle$1, {
+  }, item.iconType === ICON_TYPE_SQUARE$2 ? /*#__PURE__*/React.createElement(LegendColorRectangle$1, {
     color: item.iconColor
-  }) : item.iconType === ICON_TYPE_LEGEND_UNION_ICON$1 ? /*#__PURE__*/React$1.createElement(LegendUnionIcon, {
+  }) : item.iconType === ICON_TYPE_LEGEND_UNION_ICON$2 ? /*#__PURE__*/React.createElement(LegendUnionIcon, {
     width: 30,
     height: 30,
     color: item.iconColor
-  }) : item.iconType === ICON_TYPE_LEGEND_LINE_ICON$1 ? /*#__PURE__*/React$1.createElement(LegendLineIcon, {
+  }) : item.iconType === ICON_TYPE_LEGEND_LINE_ICON$2 ? /*#__PURE__*/React.createElement(LegendLineIcon, {
     color: item.iconColor
-  }) : '', /*#__PURE__*/React$1.createElement(Title$7, {
+  }) : '', /*#__PURE__*/React.createElement(Title$7, {
     id: "Title",
     width: width
   }, item.title))))) : '');
@@ -27732,7 +27776,7 @@ PerformanceAnalyticsLegend.propTypes = {
   height: PropTypes.string,
   legendData: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string.isRequired,
-    iconType: PropTypes.oneOf([ICON_TYPE_SQUARE$1, ICON_TYPE_LEGEND_UNION_ICON$1, ICON_TYPE_LEGEND_LINE_ICON$1]).isRequired,
+    iconType: PropTypes.oneOf([ICON_TYPE_SQUARE$2, ICON_TYPE_LEGEND_UNION_ICON$2, ICON_TYPE_LEGEND_LINE_ICON$2]).isRequired,
     iconColor: PropTypes.string.isRequired
   }))
 };
@@ -27742,15 +27786,15 @@ PerformanceAnalyticsLegend.defaultProps = {
   height: '',
   legendData: [{
     title: '',
-    iconType: ICON_TYPE_SQUARE$1,
+    iconType: ICON_TYPE_SQUARE$2,
     iconColor: '#1F7677'
   }]
 };
 
 /* eslint-disable no-nested-ternary */
-const ICON_TYPE_SQUARE = 'Square';
-const ICON_TYPE_LEGEND_UNION_ICON = 'LegendUnionIcon';
-const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
+const ICON_TYPE_SQUARE$1 = 'Square';
+const ICON_TYPE_LEGEND_UNION_ICON$1 = 'LegendUnionIcon';
+const ICON_TYPE_LEGEND_LINE_ICON$1 = 'LegendLineIcon';
 const BarChartsByWeeks = props => {
   const {
     className,
@@ -27839,9 +27883,9 @@ const BarChartsByWeeks = props => {
     let currentTooltipSecondValue = 0;
     if (payload[0].payload?.value) currentTooltipValue = payload[0].payload?.value;
     if (payload[0].payload?.secondValue) currentTooltipSecondValue = payload[0].payload?.secondValue;
-    return /*#__PURE__*/React$1.createElement(TooltipDiv$2, null, /*#__PURE__*/React$1.createElement(TooltipTitle$1, null, `${isTitleOriganal ? '' : 'Week: '}${week}`), /*#__PURE__*/React$1.createElement(TooltipLabel$2, null, `${tooltipTitle}             
+    return /*#__PURE__*/React.createElement(TooltipDiv$2, null, /*#__PURE__*/React.createElement(TooltipTitle$1, null, `${isTitleOriganal ? '' : 'Week: '}${week}`), /*#__PURE__*/React.createElement(TooltipLabel$2, null, `${tooltipTitle}             
             ${displayFormattedValue(currentTooltipValue)}                                       
-          `), currentTooltipSecondValue ? /*#__PURE__*/React$1.createElement(TooltipLabel$2, null, `${tooltipSecondTitle}                        
+          `), currentTooltipSecondValue ? /*#__PURE__*/React.createElement(TooltipLabel$2, null, `${tooltipSecondTitle}                        
             ${displayFormattedValue(currentTooltipSecondValue)}                       
           `) : '');
   };
@@ -27855,7 +27899,7 @@ const BarChartsByWeeks = props => {
   };
   const displayEventWeeksElements = () => {
     if (!barChartData || barChartData.length === 0) return '';
-    return /*#__PURE__*/React$1.createElement(EventWeeksLegendDataElementsContainer, null, getWeek()?.map(item => /*#__PURE__*/React$1.createElement(EventWeeksLegendDataElement, {
+    return /*#__PURE__*/React.createElement(EventWeeksLegendDataElementsContainer, null, getWeek()?.map(item => /*#__PURE__*/React.createElement(EventWeeksLegendDataElement, {
       color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : '',
       textColor: item.title >= startWeekRange && item.title <= endWeekRange ? '#212121' : '#B1B1B1',
       fontWeight: item.title >= startWeekRange && item.title <= endWeekRange ? 600 : 400,
@@ -27863,7 +27907,7 @@ const BarChartsByWeeks = props => {
       borderRightRadius: endWeekRange && item?.title?.toString() === endWeekRange?.toString() ? '12px' : '0px'
     }, item.titleWeek)));
   };
-  const displayEventWeeksLegendData = () => /*#__PURE__*/React$1.createElement(EventWeeksLegendMainContainer, {
+  const displayEventWeeksLegendData = () => /*#__PURE__*/React.createElement(EventWeeksLegendMainContainer, {
     className: "EventWeeksLegendMainContainer"
   }, displayEventWeeksElements());
   const getControlsHeight = () => {
@@ -27889,14 +27933,14 @@ const BarChartsByWeeks = props => {
     }
     return `${newHeight}px`;
   };
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$5, {
+  return /*#__PURE__*/React.createElement(ControlsContainer$5, {
     className: className,
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React$1.createElement(Controls$3, {
+  }, /*#__PURE__*/React.createElement(Controls$3, {
     height: getControlsHeight()
-  }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$8, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$2, {
+  }, showTitle && /*#__PURE__*/React.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React.createElement(Title$8, null, title), /*#__PURE__*/React.createElement(FormattedValue$2, {
     title: headerValueTopTitle,
     subtitle: headerValueBottomTitle,
     showTopValue: showHeaderTopValue,
@@ -27904,10 +27948,10 @@ const BarChartsByWeeks = props => {
     currencyType: HeaderValueCurrencyType,
     isPercent: HeaderValueIsPercent,
     dotCut: true
-  })), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  })), /*#__PURE__*/React.createElement(ResponsiveContainer, {
     width: "100%",
     height: "100%"
-  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
+  }, /*#__PURE__*/React.createElement(BarChart$1, {
     width: width,
     height: height,
     data: formmatedData,
@@ -27917,14 +27961,14 @@ const BarChartsByWeeks = props => {
       bottom: 0,
       left: -5
     }
-  }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
+  }, /*#__PURE__*/React.createElement(CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
-  }), /*#__PURE__*/React$1.createElement(XAxis, {
+  }), /*#__PURE__*/React.createElement(XAxis, {
     dataKey: "title",
     tick: false,
     tickLine: false
-  }), /*#__PURE__*/React$1.createElement(YAxis, {
+  }), /*#__PURE__*/React.createElement(YAxis, {
     tickCount: yAxisCounter,
     interval: interval || 'preserveEnd',
     domain: [0, 'auto'],
@@ -27936,28 +27980,28 @@ const BarChartsByWeeks = props => {
     fontSize: "12px",
     tickLine: false,
     tickFormatter: value => `${displayFormattedValue(value)}`
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
-    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null), !showTwoBars ? /*#__PURE__*/React$1.createElement(Bar, {
+  }), /*#__PURE__*/React.createElement(Tooltip$2, {
+    content: /*#__PURE__*/React.createElement(CustomTooltip, null)
+  }), /*#__PURE__*/React.createElement(Tooltip$2, null), !showTwoBars ? /*#__PURE__*/React.createElement(Bar, {
     dataKey: "value",
     name: "title",
     maxBarSize: 30,
     radius: [4, 4, 0, 0],
     fill: barChartColor
-  }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Bar, {
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bar, {
     dataKey: "value",
     name: "title",
     maxBarSize: 30,
     stackId: "a",
     fill: barChartColor
-  }), /*#__PURE__*/React$1.createElement(Bar, {
+  }), /*#__PURE__*/React.createElement(Bar, {
     dataKey: "secondValue",
     name: "title",
     maxBarSize: 30,
     radius: [4, 4, 0, 0],
     stackId: "a",
     fill: barChartSecondColor
-  })))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/React$1.createElement(LegendWrapper, null, /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+  })))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/React.createElement(LegendWrapper, null, /*#__PURE__*/React.createElement(PerformanceAnalyticsLegend, {
     legendData: legendData
   }))));
 };
@@ -27991,7 +28035,7 @@ BarChartsByWeeks.propTypes = {
   showLegend: PropTypes.bool,
   legendData: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string.isRequired,
-    iconType: PropTypes.oneOf([ICON_TYPE_SQUARE, ICON_TYPE_LEGEND_UNION_ICON, ICON_TYPE_LEGEND_LINE_ICON]).isRequired,
+    iconType: PropTypes.oneOf([ICON_TYPE_SQUARE$1, ICON_TYPE_LEGEND_UNION_ICON$1, ICON_TYPE_LEGEND_LINE_ICON$1]).isRequired,
     iconColor: PropTypes.string.isRequired
   })),
   showTwoBars: PropTypes.bool,
@@ -28055,11 +28099,11 @@ BarChartsByWeeks.defaultProps = {
   isTitleOriganal: false,
   legendData: [{
     title: 'Sales',
-    iconType: ICON_TYPE_SQUARE,
+    iconType: ICON_TYPE_SQUARE$1,
     iconColor: '#90CE9C'
   }, {
     title: 'Category Average',
-    iconType: ICON_TYPE_LEGEND_LINE_ICON,
+    iconType: ICON_TYPE_LEGEND_LINE_ICON$1,
     iconColor: '#C906FD'
   }],
   showTwoBars: false,
@@ -28304,45 +28348,45 @@ const TotalDoughnutChart = props => {
     }
     setDoughnutChartRadius(radius);
   }, [height, width, DoughnutChartContainerRef?.current?.clientWidth, DoughnutChartContainerRef?.current?.clientHeight, zoomResolution]);
-  const displayLegendValue = row => /*#__PURE__*/React$1.createElement(LegendFormattedValue, {
+  const displayLegendValue = row => /*#__PURE__*/React.createElement(LegendFormattedValue, {
     style: {
       fontWeight: itemsBoldedValues ? '700' : '500'
     }
-  }, !isPercent && row.value && currencySign ? getCurrencySign(currencyType, row.value) : '', !isPercent && row.value !== undefined && row.value !== null ? dotCutTrenty(row) : !isPercent && 'No Data', !isPercent && row.value && dotCut ? getFormattedUnits(row.value) : '', !isPercent && row.value && itemsPercentagesValueAside && /*#__PURE__*/React$1.createElement("span", {
+  }, !isPercent && row.value && currencySign ? getCurrencySign(currencyType, row.value) : '', !isPercent && row.value !== undefined && row.value !== null ? dotCutTrenty(row) : !isPercent && 'No Data', !isPercent && row.value && dotCut ? getFormattedUnits(row.value) : '', !isPercent && row.value && itemsPercentagesValueAside && /*#__PURE__*/React.createElement("span", {
     style: {
       fontWeight: itemsBoldedValues ? '700' : '400'
     }
   }, ' (', `${Math.round(row.value / value * 100)}%)`), isPercent && row.value && `${row.value.toFixed(1)}%`);
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$3, {
+  return /*#__PURE__*/React.createElement(ControlsContainer$3, {
     className: className,
     height: height,
     width: width,
     textcolor: textcolor
-  }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
+  }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/React.createElement(NoDataFoundMessage, {
     className: "NoDataFoundMessage",
     noDataText: noDataText
-  }) : /*#__PURE__*/React$1.createElement(Controls$1, {
+  }) : /*#__PURE__*/React.createElement(Controls$1, {
     className: "Controls",
     height: height,
     width: width
-  }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$1, {
+  }, !hideTitleAndValue && /*#__PURE__*/React.createElement(TitleAndValueContainer$1, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$6, {
+  }, /*#__PURE__*/React.createElement(Title$6, {
     className: "Title"
-  }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer, {
+  }, title), /*#__PURE__*/React.createElement(CurrencySignAndFormattedValueContainer, {
     className: "CurrencySignAndFormattedValueContainer"
-  }, /*#__PURE__*/React$1.createElement(FormattedValue$1, {
+  }, /*#__PURE__*/React.createElement(FormattedValue$1, {
     className: "FormattedValue",
     width: width
-  }, /*#__PURE__*/React$1.createElement(CurrencySign$1, {
+  }, /*#__PURE__*/React.createElement(CurrencySign$1, {
     className: "CurrencySign"
-  }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : ''), textAfterValue ? /*#__PURE__*/React$1.createElement(TextAfterValue, {
+  }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : ''), textAfterValue ? /*#__PURE__*/React.createElement(TextAfterValue, {
     className: "TextAfterValue"
-  }, textAfterValue) : '', addingBenchmark && /*#__PURE__*/React$1.createElement(Benchmark, null))), /*#__PURE__*/React$1.createElement(DoughnutChartAndLegendContainer, null, /*#__PURE__*/React$1.createElement(DoughnutChartContainer, {
+  }, textAfterValue) : '', addingBenchmark && /*#__PURE__*/React.createElement(Benchmark, null))), /*#__PURE__*/React.createElement(DoughnutChartAndLegendContainer, null, /*#__PURE__*/React.createElement(DoughnutChartContainer, {
     width: width,
     height: height,
     ref: DoughnutChartContainerRef
-  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(PieChart$1, null, /*#__PURE__*/React$1.createElement(Pie, {
+  }, /*#__PURE__*/React.createElement(ResponsiveContainer, null, /*#__PURE__*/React.createElement(PieChart$1, null, /*#__PURE__*/React.createElement(Pie, {
     fill: "#8884d8",
     dataKey: "value",
     blendStroke: true,
@@ -28350,19 +28394,19 @@ const TotalDoughnutChart = props => {
     data: legendData,
     outerRadius: DoughnutChartRadius - 4,
     innerRadius: DoughnutChartRadius - DoughnutChartRadius / 3
-  }, legendData.map(row => /*#__PURE__*/React$1.createElement(Cell, {
+  }, legendData.map(row => /*#__PURE__*/React.createElement(Cell, {
     key: `cell-${row.name}`,
     fill: row.color
-  }))), /*#__PURE__*/React$1.createElement(Tooltip$2, {
-    content: /*#__PURE__*/React$1.createElement(CustomTooltip, {
+  }))), /*#__PURE__*/React.createElement(Tooltip$2, {
+    content: /*#__PURE__*/React.createElement(CustomTooltip, {
       value: value,
       isPercent: isPercent
     })
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null)))), /*#__PURE__*/React$1.createElement(LegendContainer$1, null, legendData.map(row => /*#__PURE__*/React$1.createElement(LegendControlsContainer, {
+  }), /*#__PURE__*/React.createElement(Tooltip$2, null)))), /*#__PURE__*/React.createElement(LegendContainer$1, null, legendData.map(row => /*#__PURE__*/React.createElement(LegendControlsContainer, {
     key: row.name
-  }, /*#__PURE__*/React$1.createElement(LegendColorRectangle, {
+  }, /*#__PURE__*/React.createElement(LegendColorRectangle, {
     color: row.color
-  }), /*#__PURE__*/React$1.createElement(LegendTitleAndFormatedValueContainer, null, /*#__PURE__*/React$1.createElement(LegendTitle, {
+  }), /*#__PURE__*/React.createElement(LegendTitleAndFormatedValueContainer, null, /*#__PURE__*/React.createElement(LegendTitle, {
     style: {
       flexDirection: itemsValuesSeparateLine ? 'column' : 'row',
       alignItems: itemsValuesSeparateLine ? 'baseline' : 'center'
@@ -28422,7 +28466,7 @@ function CustomTooltip(_ref) {
   if (active && payload && payload.length) {
     // eslint-disable-next-line no-nested-ternary
     const percent = value && value !== 0 && !isPercent ? (payload[0].value / value * 100).toFixed(1) : value && isPercent ? payload[0].value.toFixed(1) : 0;
-    return /*#__PURE__*/React$1.createElement(TooltipDiv$1, null, /*#__PURE__*/React$1.createElement(TooltipLabel$1, null, `${payload[0].name} ${percent}%`));
+    return /*#__PURE__*/React.createElement(TooltipDiv$1, null, /*#__PURE__*/React.createElement(TooltipLabel$1, null, `${payload[0].name} ${percent}%`));
   }
 }
 CustomTooltip.propTypes = {
@@ -28548,11 +28592,11 @@ const Tooltip = props => {
     direction,
     content
   } = props;
-  return /*#__PURE__*/React$1.createElement(TooltipContainer$1, {
+  return /*#__PURE__*/React.createElement(TooltipContainer$1, {
     className: className,
     top: `${top}px`,
     left: `${left}px`
-  }, /*#__PURE__*/React$1.createElement(TooltipWrapper, null, /*#__PURE__*/React$1.createElement(TooltipTip, {
+  }, /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(TooltipTip, {
     className: `controls ${direction || 'top'}`
   }, content)));
 };
@@ -28709,7 +28753,7 @@ const TotalHorizontalCharts = props => {
     clientX: 0,
     clientY: 0
   });
-  const CustomizedLabel = props => showPercentAsideValue ? /*#__PURE__*/React$1.createElement("text", {
+  const CustomizedLabel = props => showPercentAsideValue ? /*#__PURE__*/React.createElement("text", {
     x: props.x + (props.width <= 0 ? -12 : props.width) + 56,
     y: props.y + 4,
     dy: props.height / 2,
@@ -28718,9 +28762,9 @@ const TotalHorizontalCharts = props => {
     fontSize: 12,
     fontWeight: 500,
     textAnchor: "middle"
-  }, ''.concat(getFormattedValue(props.value), getFormattedUnits(props.value)), /*#__PURE__*/React$1.createElement("tspan", {
+  }, ''.concat(getFormattedValue(props.value), getFormattedUnits(props.value)), /*#__PURE__*/React.createElement("tspan", {
     fontWeight: 400
-  }, ` (${(props.value / value * 100).toFixed(0)}%)`)) : /*#__PURE__*/React$1.createElement("text", {
+  }, ` (${(props.value / value * 100).toFixed(0)}%)`)) : /*#__PURE__*/React.createElement("text", {
     x: props.x + (props.width <= 0 ? -12 : props.width) + 40,
     y: props.y + 4,
     dy: props.height / 2,
@@ -28758,10 +28802,10 @@ const TotalHorizontalCharts = props => {
     if (chartsData && chartsData.length > 0 && payload) {
       const chartsDataLabel = chartsData.filter(item => item.name === payload.value);
       if (chartsDataLabel && chartsDataLabel.length > 0) {
-        return /*#__PURE__*/React$1.createElement("g", {
+        return /*#__PURE__*/React.createElement("g", {
           onMouseEnter: () => handleMouseEnter(payload.value),
           onMouseLeave: handleMouseLeave
-        }, /*#__PURE__*/React$1.createElement("text", {
+        }, /*#__PURE__*/React.createElement("text", {
           style: {
             whiteSpace: 'nowrap'
           },
@@ -28781,24 +28825,24 @@ const TotalHorizontalCharts = props => {
     }
     return null;
   };
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$2, {
+  return /*#__PURE__*/React.createElement(ControlsContainer$2, {
     ref: wrapper,
     height: height,
     width: width,
     textColor: textColor,
     scroller: chartsData.length > showScrollerBarsCount ? 'auto' : 'hidden',
     className: className
-  }, chartsData?.length > 0 ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React$1.createElement(CardHeader, {
+  }, chartsData?.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React.createElement(CardHeader, {
     ref: topHeader,
     className: "CardHeader"
-  }, !hideTitle ? /*#__PURE__*/React$1.createElement(Title$5, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
+  }, !hideTitle ? /*#__PURE__*/React.createElement(Title$5, null, title) : '', !hideTotalValue ? /*#__PURE__*/React.createElement(TotalValue, {
     className: "TotalValue"
-  }, currencySign && /*#__PURE__*/React$1.createElement(CurrencySign, {
+  }, currencySign && /*#__PURE__*/React.createElement(CurrencySign, {
     className: "CurrencySign"
-  }, getCurrencySign(currencyType, value)), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '') : '') : '', /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, getCurrencySign(currencyType, value)), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '') : '') : '', /*#__PURE__*/React.createElement(ResponsiveContainer, {
     width: "100%",
     height: calculateChartHeight()
-  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
+  }, /*#__PURE__*/React.createElement(BarChart$1, {
     layout: "vertical",
     data: chartsData,
     margin: {
@@ -28807,13 +28851,13 @@ const TotalHorizontalCharts = props => {
       bottom: 20,
       left: 10
     }
-  }, /*#__PURE__*/React$1.createElement(XAxis, {
+  }, /*#__PURE__*/React.createElement(XAxis, {
     type: "number",
     domain: [0, dataMax => dataMax * rightGap]
     // allowDataOverflow={false}
     ,
     hide: true
-  }), /*#__PURE__*/React$1.createElement(YAxis, {
+  }), /*#__PURE__*/React.createElement(YAxis, {
     dataKey: "name",
     type: "category",
     width: labelLimitedLetters * 10,
@@ -28822,22 +28866,22 @@ const TotalHorizontalCharts = props => {
     interval: 0,
     allowDataOverflow: true,
     tick: CustomizedTickBarChart
-  }), /*#__PURE__*/React$1.createElement(Bar, {
+  }), /*#__PURE__*/React.createElement(Bar, {
     dataKey: "value",
     barSize: 20,
     fill: "#8884d8",
     barCategoryGap: 10,
     barGap: 5
-  }, /*#__PURE__*/React$1.createElement(LabelList, {
+  }, /*#__PURE__*/React.createElement(LabelList, {
     dataKey: "value",
     content: CustomizedLabel
   }), chartsData.map((entry, index) =>
   /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
-  React$1.createElement(Cell, {
+  React.createElement(Cell, {
     key: `cell-${index}`,
     fill: barBackgrounds[index % 20]
-  }))), showLegendTooltip && /*#__PURE__*/React$1.createElement(Tooltip, {
+  }))), showLegendTooltip && /*#__PURE__*/React.createElement(Tooltip, {
     direction: "top",
     content: tooltipText.content,
     top: tooltipText.clientY,
@@ -28845,7 +28889,7 @@ const TotalHorizontalCharts = props => {
     style: {
       pointerEvents: 'none'
     }
-  })))) : /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
+  })))) : /*#__PURE__*/React.createElement(NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };
@@ -29030,35 +29074,35 @@ const SalesAndROI = props => {
     }
     return newTextBefore;
   };
-  const displayItem = dataItem => /*#__PURE__*/React$1.createElement(ItemContainer, {
+  const displayItem = dataItem => /*#__PURE__*/React.createElement(ItemContainer, {
     id: "ItemContainer"
-  }, /*#__PURE__*/React$1.createElement(ItemTitle, {
+  }, /*#__PURE__*/React.createElement(ItemTitle, {
     id: "ItemTitle"
-  }, dataItem.name), /*#__PURE__*/React$1.createElement(FormattedValue, {
+  }, dataItem.name), /*#__PURE__*/React.createElement(FormattedValue, {
     id: "FormattedValue"
-  }, /*#__PURE__*/React$1.createElement(TextBeforeAndAfterValue, {
+  }, /*#__PURE__*/React.createElement(TextBeforeAndAfterValue, {
     id: "TextBeforeAndAfterValue"
-  }, getTextBefore(dataItem)), dotCut ? getFormattedValue(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? dataItem.value?.toFixed(2) : dataItem.value) : getNumberWithCommas(dataItem.value), dotCut ? getFormattedUnits(dataItem.value) : '', /*#__PURE__*/React$1.createElement(TextBeforeAndAfterValue, null, dataItem.textAfter)));
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$1, {
+  }, getTextBefore(dataItem)), dotCut ? getFormattedValue(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? dataItem.value?.toFixed(2) : dataItem.value) : getNumberWithCommas(dataItem.value), dotCut ? getFormattedUnits(dataItem.value) : '', /*#__PURE__*/React.createElement(TextBeforeAndAfterValue, null, dataItem.textAfter)));
+  return /*#__PURE__*/React.createElement(ControlsContainer$1, {
     id: "ControlsContainer",
     height: height,
     width: width,
     textColor: textColor,
     showBorderShadow: showBorderShadow
-  }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer, {
+  }, /*#__PURE__*/React.createElement(TitleAndValueContainer, {
     id: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$4, {
+  }, /*#__PURE__*/React.createElement(Title$4, {
     id: "Title"
-  }, title), showBanner && /*#__PURE__*/React$1.createElement(OutBanner, {
+  }, title), showBanner && /*#__PURE__*/React.createElement(OutBanner, {
     id: "OutBanner",
     onClick: () => onBannerClick({
       eventName: 'onBannerClick'
     })
-  }, /*#__PURE__*/React$1.createElement(ExportIcon, {
+  }, /*#__PURE__*/React.createElement(ExportIcon, {
     color: textColor
-  }), "View By Banner")), salesData?.length > 0 ? /*#__PURE__*/React$1.createElement(ItemsContainer, {
+  }), "View By Banner")), salesData?.length > 0 ? /*#__PURE__*/React.createElement(ItemsContainer, {
     id: "ItemsContainer"
-  }, salesData?.map(dataItem => displayItem(dataItem))) : /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
+  }, salesData?.map(dataItem => displayItem(dataItem))) : /*#__PURE__*/React.createElement(NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };
@@ -29231,20 +29275,20 @@ const PopupCharts = props => {
   const displayRetailerIcon = retailer => {
     switch (retailer) {
       case 'Food Lion':
-        return /*#__PURE__*/React$1.createElement(FoodLionNewIcon, null);
+        return /*#__PURE__*/React.createElement(FoodLionNewIcon, null);
       case 'Hannaford':
-        return /*#__PURE__*/React$1.createElement(HannafordNewIcon, null);
+        return /*#__PURE__*/React.createElement(HannafordNewIcon, null);
       case 'Stop&Shop':
-        return /*#__PURE__*/React$1.createElement(StopAndShopNewIcon, null);
+        return /*#__PURE__*/React.createElement(StopAndShopNewIcon, null);
       case 'The Giant Company':
-        return /*#__PURE__*/React$1.createElement(TheGiantCompanyIcon$1, null);
+        return /*#__PURE__*/React.createElement(TheGiantCompanyIcon$1, null);
       case 'Giant Food':
-        return /*#__PURE__*/React$1.createElement(GiantFoodNewIcon, null);
+        return /*#__PURE__*/React.createElement(GiantFoodNewIcon, null);
       default:
         return '';
     }
   };
-  const displayDoughnutChart = rowsData => /*#__PURE__*/React$1.createElement(TotalDoughnutChart, {
+  const displayDoughnutChart = rowsData => /*#__PURE__*/React.createElement(TotalDoughnutChart, {
     currencySign: true,
     dotCut: true,
     legendData: rowsData?.legendData,
@@ -29256,7 +29300,7 @@ const PopupCharts = props => {
     itemsValuesSeparateLine: false,
     isPercent: true
   });
-  const displayBarChartsByWeeks = (rowsData, showTwoBars) => /*#__PURE__*/React$1.createElement(BarChartsByWeeks, {
+  const displayBarChartsByWeeks = (rowsData, showTwoBars) => /*#__PURE__*/React.createElement(BarChartsByWeeks, {
     showTwoBars: showTwoBars,
     headerValueTopTitle: rowsData?.headerValueTopTitle,
     headerValue: rowsData?.headerValue,
@@ -29277,7 +29321,7 @@ const PopupCharts = props => {
     xselectedColor: rowsData?.xselectedColor,
     isPercentValue: rowsData?.isPercentValue
   });
-  const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/React$1.createElement(TotalHorizontalCharts, {
+  const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/React.createElement(TotalHorizontalCharts, {
     currencySign: true,
     dotCut: true,
     chartsData: rowsData?.chartsData,
@@ -29289,7 +29333,7 @@ const PopupCharts = props => {
     width: "100%"
   });
   const displayMarketShareDescription = rowsData => {
-    const content = /*#__PURE__*/React$1.createElement(MarketShareDescription, {
+    const content = /*#__PURE__*/React.createElement(MarketShareDescription, {
       marketShareData: rowsData?.marketShareData,
       height: "240px",
       width: "100%",
@@ -29298,7 +29342,7 @@ const PopupCharts = props => {
     return content;
   };
   const displaySalesAndROI = rowsData => {
-    const content = /*#__PURE__*/React$1.createElement(SalesAndROI, {
+    const content = /*#__PURE__*/React.createElement(SalesAndROI, {
       title: rowsData?.title,
       dotCut: rowsData?.dotCut,
       currencySign: rowsData?.currencySign,
@@ -29337,38 +29381,38 @@ const PopupCharts = props => {
         content = '';
         break;
     }
-    return /*#__PURE__*/React$1.createElement("div", null, content);
+    return /*#__PURE__*/React.createElement("div", null, content);
   };
-  const displayChartItem = item => /*#__PURE__*/React$1.createElement(ChartItemMainContainer, {
+  const displayChartItem = item => /*#__PURE__*/React.createElement(ChartItemMainContainer, {
     id: "ChartItemMainContainer"
-  }, /*#__PURE__*/React$1.createElement(ChartItemContainer, {
+  }, /*#__PURE__*/React.createElement(ChartItemContainer, {
     id: "ChartItemContainer",
     style: {
       cursor: 'pointer'
     }
-  }, /*#__PURE__*/React$1.createElement(ChartItemIconContainer, {
+  }, /*#__PURE__*/React.createElement(ChartItemIconContainer, {
     id: "ChartItemIconContainer"
-  }, displayRetailerIcon(item.title)), /*#__PURE__*/React$1.createElement(ChartItemTitle, {
+  }, displayRetailerIcon(item.title)), /*#__PURE__*/React.createElement(ChartItemTitle, {
     id: "ChartItemTitle",
     subtitleTextColor: subtitleTextColor
-  }, item.title)), /*#__PURE__*/React$1.createElement(ChartContentContainer, {
+  }, item.title)), /*#__PURE__*/React.createElement(ChartContentContainer, {
     id: "ChartContentContainer"
   }, displayChart(item)));
-  return /*#__PURE__*/React$1.createElement(MainContainer, {
+  return /*#__PURE__*/React.createElement(MainContainer, {
     id: "MainContainer"
-  }, IsPopupChartsOpen && /*#__PURE__*/React$1.createElement(ModalOverlay, {
+  }, IsPopupChartsOpen && /*#__PURE__*/React.createElement(ModalOverlay, {
     id: "ModalOverlay",
     className: "modal-overlay"
-  }, /*#__PURE__*/React$1.createElement(ModalContent, {
+  }, /*#__PURE__*/React.createElement(ModalContent, {
     id: "ModalContent",
     ref: divRef,
     className: "modal-content",
     height: height,
     width: width,
     onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/React$1.createElement(TitleContainer$1, null, /*#__PURE__*/React$1.createElement(Title$3, null, title), /*#__PURE__*/React$1.createElement(CloseXIconContainer, {
+  }, /*#__PURE__*/React.createElement(TitleContainer$1, null, /*#__PURE__*/React.createElement(Title$3, null, title), /*#__PURE__*/React.createElement(CloseXIconContainer, {
     onClick: e => closePopupCharts(e)
-  }, /*#__PURE__*/React$1.createElement(CloseXIcon, null))), /*#__PURE__*/React$1.createElement(ChartsContainer, {
+  }, /*#__PURE__*/React.createElement(CloseXIcon, null))), /*#__PURE__*/React.createElement(ChartsContainer, {
     id: "ChartsContainer",
     maxHeight: divHeight ? (divHeight - 110).toString().concat('', 'px') : null,
     height: popupChartsItemsData?.length < 4 ? '45%' : '100%'
@@ -29492,13 +29536,13 @@ const TopToggleList = props => {
     width,
     height
   } = props;
-  return /*#__PURE__*/React$1.createElement(TopToggleListMainContainer, {
+  return /*#__PURE__*/React.createElement(TopToggleListMainContainer, {
     width: width
-  }, /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ListContainer, {
+  }, /*#__PURE__*/React.createElement(Title$2, null, title), /*#__PURE__*/React.createElement(ListContainer, {
     height: height
-  }, list.map(item => /*#__PURE__*/React$1.createElement(ListItem, {
+  }, list.map(item => /*#__PURE__*/React.createElement(ListItem, {
     key: item.value
-  }, /*#__PURE__*/React$1.createElement(Item, null, item.label)))));
+  }, /*#__PURE__*/React.createElement(Item, null, item.label)))));
 };
 TopToggleList.propTypes = {
   width: PropTypes.string,
@@ -29711,30 +29755,30 @@ const Heatmap = props => {
     if (tooltip && tooltipPosition && tooltip.label === `${item.label} - ${Math.round(item.value / totalValue * 100)}%`) {
       const top = `${tooltipPosition.y}px`;
       const left = `${tooltipPosition.x}px`;
-      return /*#__PURE__*/React$1.createElement(TooltipContainer, {
+      return /*#__PURE__*/React.createElement(TooltipContainer, {
         className: "TooltipContainer",
         top: top,
         left: left
-      }, item.label, ' ', "-", ' ', /*#__PURE__*/React$1.createElement("span", null, Math.round(item.value / totalValue * 100), "%"));
+      }, item.label, ' ', "-", ' ', /*#__PURE__*/React.createElement("span", null, Math.round(item.value / totalValue * 100), "%"));
     }
     return null;
   };
 
   // Function to render the bars and BarsContainer
-  const renderBars = () => /*#__PURE__*/React$1.createElement(BarsContainer, {
+  const renderBars = () => /*#__PURE__*/React.createElement(BarsContainer, {
     ref: barsContainerRef,
     className: "BarsContainer",
     height: barHeightState
   }, filteredData.map((item, index) => {
     const barWidth = item.value / totalValue * 100;
-    return /*#__PURE__*/React$1.createElement(BarWrapper, {
+    return /*#__PURE__*/React.createElement(BarWrapper, {
       className: "BarWrapper"
       // eslint-disable-next-line react/no-array-index-key
       ,
       key: index,
       width: `${barWidth}%`,
       height: barHeightState
-    }, /*#__PURE__*/React$1.createElement(AnimatePresence, null, /*#__PURE__*/React$1.createElement(BarContainer, {
+    }, /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(BarContainer, {
       ref: el => {
         barRefs.current[index] = el;
       } // Attach ref
@@ -29800,38 +29844,38 @@ const Heatmap = props => {
           }
         }
       }
-    }, /*#__PURE__*/React$1.createElement(BarLabel, {
+    }, /*#__PURE__*/React.createElement(BarLabel, {
       className: "BarLabel"
     }, Math.round(item.value / totalValue * 100), "%"), renderTooltip(item))));
   }));
 
   // Function to render the Legend Area
-  const renderLegend = () => /*#__PURE__*/React$1.createElement(LegendContainer, {
+  const renderLegend = () => /*#__PURE__*/React.createElement(LegendContainer, {
     className: "LegendContainer"
   }, filteredData.map((item, index) =>
   /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
-  React$1.createElement(LegendItem, {
+  React.createElement(LegendItem, {
     className: "LegendItem",
     key: index
-  }, /*#__PURE__*/React$1.createElement(LegendColorBox, {
+  }, /*#__PURE__*/React.createElement(LegendColorBox, {
     className: "LegendColorBox",
     style: {
       backgroundColor: item.color
     }
-  }), /*#__PURE__*/React$1.createElement(LegendLabel, {
+  }), /*#__PURE__*/React.createElement(LegendLabel, {
     className: "LegendLabel"
   }, item.label))));
-  return /*#__PURE__*/React$1.createElement(HeatmapContainer, {
+  return /*#__PURE__*/React.createElement(HeatmapContainer, {
     className: "HeatmapContainer"
-  }, !data || data.length === 0 ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
+  }, !data || data.length === 0 ? /*#__PURE__*/React.createElement(NoDataFoundMessage, {
     className: "NoDataFoundMessage",
     noDataText: ""
-  }) : /*#__PURE__*/React$1.createElement(HeatmapWrapper, {
+  }) : /*#__PURE__*/React.createElement(HeatmapWrapper, {
     className: "HeatmapWrapper"
-  }, /*#__PURE__*/React$1.createElement(TitleContainer, {
+  }, /*#__PURE__*/React.createElement(TitleContainer, {
     className: "TitleContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$1, {
+  }, /*#__PURE__*/React.createElement(Title$1, {
     className: "Title"
   }, title)), refreshRequired && renderBars(), !refreshRequired && renderBars(), renderLegend()));
 };
@@ -29946,43 +29990,43 @@ const IconButton = props => {
   const getIcon = icon => {
     switch (icon) {
       case 'download':
-        return /*#__PURE__*/React$1.createElement(DownloadIcon, {
+        return /*#__PURE__*/React.createElement(DownloadIcon, {
           height: iconHeight,
           width: iconWidth,
           color: contentColor
         });
       case 'document':
-        return /*#__PURE__*/React$1.createElement(DocumentIcon, {
+        return /*#__PURE__*/React.createElement(DocumentIcon, {
           height: iconHeight,
           width: iconWidth,
           color: contentColor
         });
       case 'fly':
-        return /*#__PURE__*/React$1.createElement(FlyIcon, {
+        return /*#__PURE__*/React.createElement(FlyIcon, {
           height: iconHeight,
           width: iconWidth,
           color: contentColor
         });
       case 'bell':
-        return /*#__PURE__*/React$1.createElement(BellIcon, {
+        return /*#__PURE__*/React.createElement(BellIcon, {
           height: iconHeight,
           width: iconWidth,
           color: contentColor
         });
       case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
+        return /*#__PURE__*/React.createElement(MaintenanceIcon, {
           height: iconHeight,
           width: iconWidth,
           color: contentColor
         });
       case 'exit':
-        return /*#__PURE__*/React$1.createElement(ExitIcon, {
+        return /*#__PURE__*/React.createElement(ExitIcon, {
           height: iconHeight,
           width: iconWidth,
           color: contentColor
         });
       case 'eye':
-        return /*#__PURE__*/React$1.createElement(EyeIcon, {
+        return /*#__PURE__*/React.createElement(EyeIcon, {
           height: iconHeight,
           width: iconWidth,
           color: contentColor
@@ -29997,9 +30041,9 @@ const IconButton = props => {
   const onCancelClickHandler = event => {
     onCancelClick(event);
   };
-  return /*#__PURE__*/React$1.createElement(ButtonWrapper, {
+  return /*#__PURE__*/React.createElement(ButtonWrapper, {
     id: "ButtonWrapper"
-  }, /*#__PURE__*/React$1.createElement(IconButtonContainer, {
+  }, /*#__PURE__*/React.createElement(IconButtonContainer, {
     download: true,
     href: fileLink,
     backgroundColor: disabled ? '#E3E4E5' : backgroundColor,
@@ -30011,7 +30055,7 @@ const IconButton = props => {
     onClick: event => {
       onClickHandler(event);
     }
-  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/React$1.createElement(SpanText, null, buttonText)), showProcess && /*#__PURE__*/React$1.createElement(CancelClick, {
+  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/React.createElement(SpanText, null, buttonText)), showProcess && /*#__PURE__*/React.createElement(CancelClick, {
     onClick: event => onCancelClickHandler(event)
   }, "Click here to cancel"));
 };
@@ -30161,34 +30205,34 @@ const DoublePanelDataRow = props => {
       return '-';
     }
     if (arrowSign === 'up') {
-      return /*#__PURE__*/React$1.createElement(PercentageChange, {
+      return /*#__PURE__*/React.createElement(PercentageChange, {
         color: "#5FCC70",
         value: 34 // TODO: when ready, replace with actual value
-      }, /*#__PURE__*/React$1.createElement(ArrowUpIcon, {
+      }, /*#__PURE__*/React.createElement(ArrowUpIcon, {
         width: 12,
         height: 12
       }), ' ', "(+34K)");
     }
-    return /*#__PURE__*/React$1.createElement(PercentageChange, {
+    return /*#__PURE__*/React.createElement(PercentageChange, {
       color: "#D23630",
       value: 66 // TODO: when ready, replace with actual value
-    }, /*#__PURE__*/React$1.createElement(ArrowDownIcon, {
+    }, /*#__PURE__*/React.createElement(ArrowDownIcon, {
       width: 12,
       height: 12
     }), ' ', "(-12K)");
   };
-  return /*#__PURE__*/React$1.createElement(LinnerContainer, {
+  return /*#__PURE__*/React.createElement(LinnerContainer, {
     className: className,
     backgroundColor: backgroundColor,
     width: width,
     height: height
-  }, data.map(item => /*#__PURE__*/React$1.createElement(DataBox, {
+  }, data.map(item => /*#__PURE__*/React.createElement(DataBox, {
     className: "data-box-item"
-  }, item.title && /*#__PURE__*/React$1.createElement(DataBoxTitle, {
+  }, item.title && /*#__PURE__*/React.createElement(DataBoxTitle, {
     className: "DataBoxTitle"
-  }, item.title), /*#__PURE__*/React$1.createElement(CellItem, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== 'null' && item.value !== 'undefined' ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, item.sign && /*#__PURE__*/React$1.createElement(CellItemValueSign, null, item.sign), customDataFormat ? /*#__PURE__*/React$1.createElement(BigValue, {
+  }, item.title), /*#__PURE__*/React.createElement(CellItem, 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(CellItemValueSign, null, item.sign), customDataFormat ? /*#__PURE__*/React.createElement(BigValue, {
     className: "DataBoxValue"
-  }, ''.concat(formattedValue(item.value), getFormattedUnits(item.value)), item.isPercent && /*#__PURE__*/React$1.createElement(CellItemValueSign, null, "%")) : /*#__PURE__*/React$1.createElement(BigValue, null, ''.concat(getFormattedValue(item.value), getFormattedUnits(item.value)), item.isPercent && /*#__PURE__*/React$1.createElement(CellItemValueSign, null, "%")), showPercentChange && getArrowSign(item.value >= 0 ? 'up' : 'down')) : /*#__PURE__*/React$1.createElement(CellItemNoValue, null, "N/A")), /*#__PURE__*/React$1.createElement(ValueChange, null))));
+  }, ''.concat(formattedValue(item.value), getFormattedUnits(item.value)), item.isPercent && /*#__PURE__*/React.createElement(CellItemValueSign, null, "%")) : /*#__PURE__*/React.createElement(BigValue, null, ''.concat(getFormattedValue(item.value), getFormattedUnits(item.value)), item.isPercent && /*#__PURE__*/React.createElement(CellItemValueSign, null, "%")), showPercentChange && getArrowSign(item.value >= 0 ? 'up' : 'down')) : /*#__PURE__*/React.createElement(CellItemNoValue, null, "N/A")), /*#__PURE__*/React.createElement(ValueChange, null))));
 };
 
 // DoublePanelDataRow.propTypes = {
@@ -30271,6 +30315,9 @@ const LabelText = dt.tspan`
 `;
 
 /* eslint-disable react/prop-types */
+const ICON_TYPE_SQUARE = 'Square';
+const ICON_TYPE_LEGEND_UNION_ICON = 'LegendUnionIcon';
+const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
 
 /* BarCharts */
 const BarChart = props => {
@@ -30324,7 +30371,7 @@ const BarChart = props => {
     if (!active || !payload || payload?.length === 0) return null;
     let currentTooltipValue = 0;
     if (payload[0].payload?.value) currentTooltipValue = payload[0].payload?.value;
-    return /*#__PURE__*/React$1.createElement(TooltipDiv, null, /*#__PURE__*/React$1.createElement(TooltipTitle, null, `${label}`), /*#__PURE__*/React$1.createElement(TooltipLabel, null, `${displayFormattedValue(currentTooltipValue, !!showCurrentCampaignStyle)}`));
+    return /*#__PURE__*/React.createElement(TooltipDiv, null, /*#__PURE__*/React.createElement(TooltipTitle, null, `${label}`), /*#__PURE__*/React.createElement(TooltipLabel, null, `${displayFormattedValue(currentTooltipValue, !!showCurrentCampaignStyle)}`));
   };
   const CustomizedTickBarChart = props => {
     const {
@@ -30335,9 +30382,9 @@ const BarChart = props => {
     if (barChartData && barChartData.length > 0 && payload) {
       const retailerData = barChartData.filter(item => item.title === payload.value);
       if (retailerData && retailerData.length > 0) {
-        return /*#__PURE__*/React$1.createElement("g", {
+        return /*#__PURE__*/React.createElement("g", {
           transform: `translate(${x},${y})`
-        }, showCurrentCampaignStyle && retailerData[0].isCurrent && /*#__PURE__*/React$1.createElement("rect", {
+        }, showCurrentCampaignStyle && retailerData[0].isCurrent && /*#__PURE__*/React.createElement("rect", {
           x: -56 // Adjust this to position the background properly
           ,
           y: 5 // Adjust this for vertical alignment with your text
@@ -30348,12 +30395,12 @@ const BarChart = props => {
           ,
           fill: currentBarColor || '#90CE9C',
           rx: 12
-        }), /*#__PURE__*/React$1.createElement("text", {
+        }), /*#__PURE__*/React.createElement("text", {
           x: 0,
           y: 0,
           dy: 16,
           fill: "#212121"
-        }, /*#__PURE__*/React$1.createElement(LabelBoldText, {
+        }, /*#__PURE__*/React.createElement(LabelBoldText, {
           textAnchor: "middle",
           x: 0,
           dy: showCurrentCampaignStyle ? 20 : 50,
@@ -30374,7 +30421,7 @@ const BarChart = props => {
             return `${payload.value}`;
           }
           return payload?.value;
-        })()), /*#__PURE__*/React$1.createElement(LabelText, {
+        })()), /*#__PURE__*/React.createElement(LabelText, {
           textAnchor: "middle",
           x: "0",
           dy: "30",
@@ -30393,7 +30440,7 @@ const BarChart = props => {
       stroke,
       value
     } = props;
-    return /*#__PURE__*/React$1.createElement("text", {
+    return /*#__PURE__*/React.createElement("text", {
       x: x + 30,
       y: y,
       dy: -8,
@@ -30402,15 +30449,15 @@ const BarChart = props => {
       textAnchor: "middle"
     }, displayFormattedValue(value));
   };
-  return /*#__PURE__*/React$1.createElement(ControlsContainer, {
+  return /*#__PURE__*/React.createElement(ControlsContainer, {
     className: className,
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React$1.createElement(Controls, null, /*#__PURE__*/React$1.createElement(Title, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, /*#__PURE__*/React.createElement(Controls, null, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(ResponsiveContainer, {
     width: "100%",
     height: 400
-  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
+  }, /*#__PURE__*/React.createElement(BarChart$1, {
     width: width,
     height: height,
     data: barChartData,
@@ -30420,10 +30467,10 @@ const BarChart = props => {
       bottom: 0,
       left: -5
     }
-  }, showCurrentCampaignStyle && /*#__PURE__*/React$1.createElement(CartesianGrid, {
+  }, showCurrentCampaignStyle && /*#__PURE__*/React.createElement(CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
-  }), showCurrentCampaignStyle && /*#__PURE__*/React$1.createElement(YAxis, {
+  }), showCurrentCampaignStyle && /*#__PURE__*/React.createElement(YAxis, {
     tickCount: 10,
     interval: "preserveEnd",
     domain: [0, 'auto'],
@@ -30435,11 +30482,11 @@ const BarChart = props => {
     fontSize: "12px",
     tickLine: false,
     tickFormatter: value => `${displayFormattedValue(value)}`
-  }), showReferenceLine && /*#__PURE__*/React$1.createElement(ReferenceLine, {
+  }), showReferenceLine && /*#__PURE__*/React.createElement(ReferenceLine, {
     y: referenceLinePoint,
     stroke: referenceLineColor,
     strokeDasharray: referenceLineDashed
-  }), /*#__PURE__*/React$1.createElement(XAxis, {
+  }), /*#__PURE__*/React.createElement(XAxis, {
     dataKey: "title",
     tick: CustomizedTickBarChart,
     tickLine: false,
@@ -30447,95 +30494,97 @@ const BarChart = props => {
     stroke: "#D0D0D0",
     domain: [0, 'auto'],
     interval: 0
-  }), /*#__PURE__*/React$1.createElement(Brush, {
+  }), /*#__PURE__*/React.createElement(Brush, {
     dataKey: "name",
     height: 30,
     stroke: "#8884d8"
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
-    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null), /*#__PURE__*/React$1.createElement(Bar, {
+  }), /*#__PURE__*/React.createElement(Tooltip$2, {
+    content: /*#__PURE__*/React.createElement(CustomTooltip, null)
+  }), /*#__PURE__*/React.createElement(Tooltip$2, null), /*#__PURE__*/React.createElement(Bar, {
     dataKey: "value",
     fill: barChartColor,
     minPointSize: 5,
     barSize: barSize ?? 60,
     radius: [5, 5, 0, 0]
-  }, /*#__PURE__*/React$1.createElement(LabelList, {
+  }, /*#__PURE__*/React.createElement(LabelList, {
     dataKey: "value",
     content: CustomizedLabel
-  })))), showLegend && /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+  })))), showLegend && /*#__PURE__*/React.createElement(PerformanceAnalyticsLegend, {
     legendData: legendData
   })));
 };
-
-// BarChart.propTypes = {
-//   title: PropTypes.string,
-//   barChartData: PropTypes.arrayOf(
-//     PropTypes.shape({
-//       title: PropTypes.string,
-//       date: PropTypes.string,
-//       value: PropTypes.number,
-//     }),
-//   ),
-//   width: PropTypes.string,
-//   height: PropTypes.string,
-//   barSize: PropTypes.number,
-//   barFontSizeValue: PropTypes.string,
-//   barChartColor: PropTypes.string,
-//   showDollarSign: PropTypes.bool,
-//   isDollar: PropTypes.bool,
-//   showLegend: PropTypes.bool,
-//   legendData: PropTypes.arrayOf(
-//     PropTypes.shape({
-//       title: PropTypes.string.isRequired,
-//       iconType: PropTypes.oneOf([
-//         ICON_TYPE_SQUARE,
-//         ICON_TYPE_LEGEND_UNION_ICON,
-//         ICON_TYPE_LEGEND_LINE_ICON,
-//       ]).isRequired,
-//       iconColor: PropTypes.string.isRequired,
-//     }),
-//   ),
-//   showReferenceLine: PropTypes.bool,
-//   referenceLinePoint: PropTypes.number,
-//   referenceLineColor: PropTypes.string,
-//   referenceLineDashed: PropTypes.string,
-//   showCurrentCampaignStyle: PropTypes.bool,
-//   currentBarColor: PropTypes.string,
-//   isPercent: PropTypes.bool,
-// };
-
-// BarChart.defaultProps = {
-//   title: 'String',
-//   barChartData: [
-//     { title: 'Food Lion', date: '15.01.24-31.01.24', value: 542366 },
-//     { title: 'Hannaford', date: '15.01.24-31.01.24', value: 699511 },
-//     { title: 'The Giant Company', date: '15.01.24-31.01.24', value: 403092 },
-//     { title: 'Giant Food', date: '15.01.24-31.01.24', value: 396184 },
-//     { title: 'Stop&Shop', date: '15.01.24-31.01.24', value: 415317 },
-//   ],
-//   width: '100%',
-//   height: '100%',
-//   barSize: 60,
-//   barFontSizeValue: '0.6em',
-//   barChartColor: '#BD9EFF',
-//   showDollarSign: true,
-//   isDollar: true,
-//   showLegend: true,
-//   legendData: [
-//     {
-//       title: 'Incremental Sales',
-//       iconType: ICON_TYPE_SQUARE,
-//       iconColor: '#BD9EFF',
-//     },
-//   ],
-//   showReferenceLine: false,
-//   referenceLinePoint: 0,
-//   referenceLineColor: '#212121',
-//   referenceLineDashed: '5',
-//   showCurrentCampaignStyle: false,
-//   currentBarColor: '#90CE9C',
-//   isPercent: false,
-// };
+BarChart.propTypes = {
+  title: PropTypes.string,
+  barChartData: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    date: PropTypes.string,
+    value: PropTypes.number
+  })),
+  width: PropTypes.string,
+  height: PropTypes.string,
+  barSize: PropTypes.number,
+  barFontSizeValue: PropTypes.string,
+  barChartColor: PropTypes.string,
+  showDollarSign: PropTypes.bool,
+  isDollar: PropTypes.bool,
+  showLegend: PropTypes.bool,
+  legendData: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    iconType: PropTypes.oneOf([ICON_TYPE_SQUARE, ICON_TYPE_LEGEND_UNION_ICON, ICON_TYPE_LEGEND_LINE_ICON]).isRequired,
+    iconColor: PropTypes.string.isRequired
+  })),
+  showReferenceLine: PropTypes.bool,
+  referenceLinePoint: PropTypes.number,
+  referenceLineColor: PropTypes.string,
+  referenceLineDashed: PropTypes.string,
+  showCurrentCampaignStyle: PropTypes.bool,
+  currentBarColor: PropTypes.string,
+  isPercent: PropTypes.bool
+};
+BarChart.defaultProps = {
+  title: 'String',
+  barChartData: [{
+    title: 'Food Lion',
+    date: '15.01.24-31.01.24',
+    value: 542366
+  }, {
+    title: 'Hannaford',
+    date: '15.01.24-31.01.24',
+    value: 699511
+  }, {
+    title: 'The Giant Company',
+    date: '15.01.24-31.01.24',
+    value: 403092
+  }, {
+    title: 'Giant Food',
+    date: '15.01.24-31.01.24',
+    value: 396184
+  }, {
+    title: 'Stop&Shop',
+    date: '15.01.24-31.01.24',
+    value: 415317
+  }],
+  width: '100%',
+  height: '100%',
+  barSize: 60,
+  barFontSizeValue: '0.6em',
+  barChartColor: '#BD9EFF',
+  showDollarSign: true,
+  isDollar: true,
+  showLegend: true,
+  legendData: [{
+    title: 'Incremental Sales',
+    iconType: ICON_TYPE_SQUARE,
+    iconColor: '#BD9EFF'
+  }],
+  showReferenceLine: false,
+  referenceLinePoint: 0,
+  referenceLineColor: '#212121',
+  referenceLineDashed: '5',
+  showCurrentCampaignStyle: false,
+  currentBarColor: '#90CE9C',
+  isPercent: false
+};
 
 export { BannerEventBoxList, BarChart, BarChartsByWeeks, Button, CollapseHeader, DialogOverlay, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PieChart, PopupCharts, QuickFilter, ReportTable, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts };
 //# sourceMappingURL=index.esm.js.map