sag_components 2.0.0-beta2 → 2.0.0-beta4

package/dist/index.js

@@ -39532,7 +39532,7 @@ generateCategoricalChart({
 /**
  * @fileOverview Bar Chart
  */
-var BarChart = generateCategoricalChart({
+var BarChart$1 = generateCategoricalChart({
   chartName: 'BarChart',
   GraphicalChild: Bar,
   defaultTooltipEventType: 'axis',
@@ -43172,7 +43172,7 @@ const scrollableStyles$a = `
     border-radius: 5px;
   }
 `;
-const ControlsContainer$8 = dt.div`
+const ControlsContainer$9 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   font-style: normal;
@@ -43191,7 +43191,7 @@ const ControlsContainer$8 = dt.div`
     box-sizing: border-box;
   }
 `;
-const Controls$5 = dt.div`
+const Controls$6 = dt.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -43222,7 +43222,7 @@ const TitleAndValueContainer$4 = dt.div`
   flex-direction: column;
   padding: 0 20px;
 `;
-const Title$9 = dt.h4`
+const Title$a = dt.h4`
   font-weight: 400;
   font-size: 18px;
   margin: 0 0 8px;
@@ -43302,7 +43302,7 @@ const LegendFormattedValue$1 = dt.span`
   white-space: nowrap;
 `;
 
-const ControlsContainer$7 = dt.div`
+const ControlsContainer$8 = dt.div`
   display: flex;
   position: relative;
   margin: 0px 0 0px;
@@ -43315,7 +43315,7 @@ const ControlsContainer$7 = dt.div`
   //border: 1px solid red;
   align-items: center;
 `;
-const Controls$4 = dt.div`
+const Controls$5 = dt.div`
   position: relative;
   border-radius: 100px;
   width: ${props => props.width.toString().concat('', 'px')};
@@ -43563,7 +43563,7 @@ const Benchmark = props => {
     return width * (benchmarkValue / totalValue);
   };
   const getTooltipText = () => /*#__PURE__*/React__default["default"].createElement("h4", null, tooltipLabel, tooltipLabel ? ': ' : '', getFormattedValue(benchmarkValue)?.toString(), getFormattedUnits(benchmarkValue)?.toString());
-  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$7, {
+  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$8, {
     id: "ControlsContainer",
     height: height,
     width: width
@@ -43571,7 +43571,7 @@ const Benchmark = props => {
     id: "Tooltip",
     content: getTooltipText(),
     direction: tooltipDirection
-  }, /*#__PURE__*/React__default["default"].createElement(Controls$4, {
+  }, /*#__PURE__*/React__default["default"].createElement(Controls$5, {
     id: "ControlsBenchmark",
     height: height,
     width: width
@@ -43688,7 +43688,7 @@ const PieChart = props => {
     }
     return null;
   };
-  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$8, {
+  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$9, {
     className: className,
     height: height,
     width: width,
@@ -43696,13 +43696,13 @@ const PieChart = props => {
   }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/React__default["default"].createElement(NoDataFoundMessage, {
     className: "NoDataFoundMessage",
     noDataText: noDataText
-  }) : /*#__PURE__*/React__default["default"].createElement(Controls$5, {
+  }) : /*#__PURE__*/React__default["default"].createElement(Controls$6, {
     className: "Controls",
     height: height,
     width: width
   }, !hideTitleAndValue && /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer$4, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React__default["default"].createElement(Title$9, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$a, {
     className: "Title"
   }, title), /*#__PURE__*/React__default["default"].createElement(CurrencySignAndFormattedValueContainer$2, {
     className: "CurrencySignAndFormattedValueContainer"
@@ -44658,7 +44658,7 @@ EventDetailsCard.defaultProps = {
   disableViewDetailsButton: false
 };
 
-const LinnerContainer = dt.div`
+const LinnerContainer$1 = dt.div`
   font-family: "Poppins", sans-serif;
   display: flex;
   justify-content: space-between;
@@ -44675,11 +44675,11 @@ const DataBoxWrap = dt.div`
   width: ${props => props.width};
   height: 100%;
 `;
-const DataBox = dt.div`
+const DataBox$1 = dt.div`
   color: #212121;
   font-weight: 400;
 `;
-const DataBoxTitle = dt.span`
+const DataBoxTitle$1 = dt.span`
   font-size: 18px;
   font-weight: 500;
 `;
@@ -44729,7 +44729,7 @@ const LinnerDataBox = props => {
     className,
     customDataFormat
   } = props;
-  return /*#__PURE__*/React__default["default"].createElement(LinnerContainer, {
+  return /*#__PURE__*/React__default["default"].createElement(LinnerContainer$1, {
     className: className,
     backgroundColor: backgroundColor,
     width: width || "100%",
@@ -44738,7 +44738,7 @@ const LinnerDataBox = props => {
   }, data.map((item, index) => /*#__PURE__*/React__default["default"].createElement(DataBoxWrap, {
     key: `${item.title}`,
     width: `${100 / data.length}%`
-  }, /*#__PURE__*/React__default["default"].createElement(DataBox, null, item.title && /*#__PURE__*/React__default["default"].createElement(DataBoxTitle, {
+  }, /*#__PURE__*/React__default["default"].createElement(DataBox$1, null, item.title && /*#__PURE__*/React__default["default"].createElement(DataBoxTitle$1, {
     className: "DataBoxTitle"
   }, item.title), /*#__PURE__*/React__default["default"].createElement(DataBoxContent, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== "null" && item.value !== "undefined" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, item.sign && /*#__PURE__*/React__default["default"].createElement(DataBoxContentSign, null, item.sign), customDataFormat ? /*#__PURE__*/React__default["default"].createElement(DataBoxContentValue, {
     className: "DataBoxValue"
@@ -45149,7 +45149,7 @@ const SagIconButtonWrapper = dt.button`
     box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
   }
 `;
-const SpanText = dt.span`
+const SpanText$1 = dt.span`
 `;
 
 const SagIconButton = props => {
@@ -45245,7 +45245,7 @@ const SagIconButton = props => {
     onClick: event => {
       onClickHandler(event);
     }
-  }, getIcon(iconName), buttonText && /*#__PURE__*/React__default["default"].createElement(SpanText, null, buttonText));
+  }, getIcon(iconName), buttonText && /*#__PURE__*/React__default["default"].createElement(SpanText$1, null, buttonText));
 };
 SagIconButton.propTypes = {
   className: PropTypes.string,
@@ -52821,7 +52821,7 @@ MonthPicker.defaultProps = {
   selectedValue: ''
 };
 
-const ControlsContainer$6 = dt.div`
+const ControlsContainer$7 = dt.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -53441,7 +53441,7 @@ const FilterPanel = props => {
     }
     return content;
   };
-  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$6, {
+  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$7, {
     className: className,
     height: height,
     width: width,
@@ -53474,9 +53474,20 @@ FilterPanel.propTypes = {
   availableMonths: PropTypes.arrayOf(PropTypes.string),
   availableYears: PropTypes.arrayOf(PropTypes.string),
   fieldsData: PropTypes.arrayOf(PropTypes.shape({
+    disabled: PropTypes.bool,
+    required: PropTypes.bool,
+    inputType: PropTypes.string,
+    placeHolder: PropTypes.string,
+    xIconShow: PropTypes.bool,
+    label: PropTypes.string,
+    labelEmptyValue: PropTypes.string,
     name: PropTypes.string,
     value: PropTypes.number,
-    color: PropTypes.string
+    color: PropTypes.string,
+    dropdownOptions: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string
+    }))
   })),
   width: PropTypes.string,
   height: PropTypes.string,
@@ -67109,7 +67120,7 @@ const scrollableStyles$3 = `
     border-radius: 5px;
   }
 `;
-const ControlsContainer$5 = dt.div`
+const ControlsContainer$6 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   font-style: normal;
@@ -67128,7 +67139,7 @@ const ControlsContainer$5 = dt.div`
     box-sizing: border-box;
   }
 `;
-const Controls$3 = dt.div`
+const Controls$4 = dt.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -67139,7 +67150,7 @@ const TitleAndValueContainer$3 = dt.div`
   display: flex;
   flex-direction: column; 
 `;
-const Title$8 = dt.h4`
+const Title$9 = dt.h4`
   font-weight: 400;
   font-size: 20px;
   margin: 0;
@@ -67191,18 +67202,18 @@ const FormattedValue$2 = props => {
     textcolor,
     isPercent
   } = props;
-  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$5, {
+  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$6, {
     className: className || 'FormattedValue_ControlsContainer',
     height: height,
     width: width,
     textcolor: textcolor
-  }, /*#__PURE__*/React__default["default"].createElement(Controls$3, {
+  }, /*#__PURE__*/React__default["default"].createElement(Controls$4, {
     className: "Controls",
     height: height,
     width: width
   }, /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer$3, {
     className: "TitleAndValueContainer"
-  }, title ? /*#__PURE__*/React__default["default"].createElement(Title$8, {
+  }, title ? /*#__PURE__*/React__default["default"].createElement(Title$9, {
     className: "Title",
     width: width
   }, title) : '', showTopValue && /*#__PURE__*/React__default["default"].createElement(CurrencySignAndFormattedValueContainer$1, {
@@ -67214,7 +67225,7 @@ const FormattedValue$2 = props => {
     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__default["default"].createElement(CurrencySignOrPercent, {
     className: "CurrencySignOrPercent"
-  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React__default["default"].createElement(Title$8, {
+  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React__default["default"].createElement(Title$9, {
     className: "Title",
     width: width
   }, subtitle) : '')));
@@ -67248,7 +67259,7 @@ FormattedValue$2.defaultProps = {
   isPercent: false
 };
 
-const ControlsContainer$4 = dt.div`
+const ControlsContainer$5 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   color: #212121;
@@ -67256,27 +67267,27 @@ const ControlsContainer$4 = dt.div`
   height: ${props => props.height};
   min-width: 250px;
 `;
-const Controls$2 = dt.div`
+const Controls$3 = dt.div`
   height: 100%;
   width: 100%;
   background: white;
   display: flex;
   flex-direction: column;
 `;
-const TooltipDiv$1 = dt.div`
+const TooltipDiv$2 = dt.div`
   border-radius: 5px;
   padding: 8px 12px;
   background: white;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
   margin: 0;
 `;
-const TooltipLabel$1 = dt.div`
+const TooltipLabel$2 = dt.div`
   color: #212121;
   font-size: 14px;
   font-weight: 400;
   width: fit-content;
 `;
-const TooltipTitle = dt.div`
+const TooltipTitle$1 = dt.div`
   color: #212121;
   font-size: 14px;
   font-weight: 600;
@@ -67284,7 +67295,7 @@ const TooltipTitle = dt.div`
 const TitleAndValueContainer$2 = dt.div`
   padding: 0 1rem;
 `;
-const Title$7 = dt.h5`
+const Title$8 = dt.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -67371,7 +67382,7 @@ const LegendLineIcon = ({
   fill: color
 }));
 
-const ControlsContainer$3 = dt.div`
+const ControlsContainer$4 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   font-size: ${props => props.rootFont};
@@ -67383,7 +67394,7 @@ const ControlsContainer$3 = dt.div`
     box-sizing: border-box;
   }
 `;
-const Controls$1 = dt.div`
+const Controls$2 = dt.div`
   display: flex;
   gap: 20px;
   flex-direction: column;
@@ -67407,7 +67418,7 @@ const TitleAndIconContainer = dt.div`
   display: flex;
   align-items: center;
 `;
-const Title$6 = dt.h4`
+const Title$7 = dt.h4`
   font-weight: 400;
   font-size: 14px;
   line-height: 27px;
@@ -67428,9 +67439,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,
@@ -67438,26 +67449,26 @@ const PerformanceAnalyticsLegend = props => {
     width,
     height
   } = props;
-  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$3, {
+  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$4, {
     className: className,
     height: height,
     width: width
-  }, legendData?.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Controls$1, {
+  }, legendData?.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Controls$2, {
     height: height,
     width: width
   }, /*#__PURE__*/React__default["default"].createElement(LegendDataContainer, {
     id: "LegendDataContainer"
   }, legendData?.map((item, i) => /*#__PURE__*/React__default["default"].createElement(TitleAndIconContainer, {
     key: `${item.title + i}`
-  }, item.iconType === ICON_TYPE_SQUARE$1 ? /*#__PURE__*/React__default["default"].createElement(LegendColorRectangle$1, {
+  }, item.iconType === ICON_TYPE_SQUARE$2 ? /*#__PURE__*/React__default["default"].createElement(LegendColorRectangle$1, {
     color: item.iconColor
-  }) : item.iconType === ICON_TYPE_LEGEND_UNION_ICON$1 ? /*#__PURE__*/React__default["default"].createElement(LegendUnionIcon, {
+  }) : item.iconType === ICON_TYPE_LEGEND_UNION_ICON$2 ? /*#__PURE__*/React__default["default"].createElement(LegendUnionIcon, {
     width: 30,
     height: 30,
     color: item.iconColor
-  }) : item.iconType === ICON_TYPE_LEGEND_LINE_ICON$1 ? /*#__PURE__*/React__default["default"].createElement(LegendLineIcon, {
+  }) : item.iconType === ICON_TYPE_LEGEND_LINE_ICON$2 ? /*#__PURE__*/React__default["default"].createElement(LegendLineIcon, {
     color: item.iconColor
-  }) : '', /*#__PURE__*/React__default["default"].createElement(Title$6, {
+  }) : '', /*#__PURE__*/React__default["default"].createElement(Title$7, {
     id: "Title",
     width: width
   }, item.title))))) : '');
@@ -67468,7 +67479,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
   }))
 };
@@ -67478,15 +67489,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,
@@ -67575,9 +67586,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__default["default"].createElement(TooltipDiv$1, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle, null, `${isTitleOriganal ? '' : 'Week: '}${week}`), /*#__PURE__*/React__default["default"].createElement(TooltipLabel$1, null, `${tooltipTitle}             
+    return /*#__PURE__*/React__default["default"].createElement(TooltipDiv$2, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle$1, null, `${isTitleOriganal ? '' : 'Week: '}${week}`), /*#__PURE__*/React__default["default"].createElement(TooltipLabel$2, null, `${tooltipTitle}             
             ${displayFormattedValue(currentTooltipValue)}                                       
-          `), currentTooltipSecondValue ? /*#__PURE__*/React__default["default"].createElement(TooltipLabel$1, null, `${tooltipSecondTitle}                        
+          `), currentTooltipSecondValue ? /*#__PURE__*/React__default["default"].createElement(TooltipLabel$2, null, `${tooltipSecondTitle}                        
             ${displayFormattedValue(currentTooltipSecondValue)}                       
           `) : '');
   };
@@ -67625,14 +67636,14 @@ const BarChartsByWeeks = props => {
     }
     return `${newHeight}px`;
   };
-  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$4, {
+  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$5, {
     className: className,
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React__default["default"].createElement(Controls$2, {
+  }, /*#__PURE__*/React__default["default"].createElement(Controls$3, {
     height: getControlsHeight()
-  }, showTitle && /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Title$7, null, title), /*#__PURE__*/React__default["default"].createElement(FormattedValue$2, {
+  }, showTitle && /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Title$8, null, title), /*#__PURE__*/React__default["default"].createElement(FormattedValue$2, {
     title: headerValueTopTitle,
     subtitle: headerValueBottomTitle,
     showTopValue: showHeaderTopValue,
@@ -67643,7 +67654,7 @@ const BarChartsByWeeks = props => {
   })), /*#__PURE__*/React__default["default"].createElement(ResponsiveContainer, {
     width: "100%",
     height: "100%"
-  }, /*#__PURE__*/React__default["default"].createElement(BarChart, {
+  }, /*#__PURE__*/React__default["default"].createElement(BarChart$1, {
     width: width,
     height: height,
     data: formmatedData,
@@ -67727,7 +67738,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,
@@ -67791,11 +67802,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,
@@ -67820,7 +67831,7 @@ const scrollableStyles$2 = `
     border-radius: 5px;
   }
 `;
-const ControlsContainer$2 = dt.div`
+const ControlsContainer$3 = dt.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   font-style: normal;
@@ -67839,7 +67850,7 @@ const ControlsContainer$2 = dt.div`
     box-sizing: border-box;
   }
 `;
-const Controls = dt.div`
+const Controls$1 = dt.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -67847,7 +67858,7 @@ const Controls = dt.div`
   background: white;
   border-radius: 12px;  
 `;
-const TooltipDiv = dt.div`
+const TooltipDiv$1 = dt.div`
   display: flex;
   background: white;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
@@ -67855,7 +67866,7 @@ const TooltipDiv = dt.div`
   padding: 6px 10px;
   margin: 0;
 `;
-const TooltipLabel = dt.p`
+const TooltipLabel$1 = dt.p`
   color: #212121;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
@@ -67870,7 +67881,7 @@ const TitleAndValueContainer$1 = dt.div`
   flex-direction: column;
   padding: 0 20px;
 `;
-const Title$5 = dt.h4`
+const Title$6 = dt.h4`
   font-weight: 500;
   font-size: 1rem;
   margin: 0;
@@ -68049,7 +68060,7 @@ const TotalDoughnutChart = props => {
       fontWeight: itemsBoldedValues ? '700' : '400'
     }
   }, ' (', `${Math.round(row.value / value * 100)}%)`), isPercent && row.value && `${row.value.toFixed(1)}%`);
-  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$2, {
+  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$3, {
     className: className,
     height: height,
     width: width,
@@ -68057,13 +68068,13 @@ const TotalDoughnutChart = props => {
   }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/React__default["default"].createElement(NoDataFoundMessage, {
     className: "NoDataFoundMessage",
     noDataText: noDataText
-  }) : /*#__PURE__*/React__default["default"].createElement(Controls, {
+  }) : /*#__PURE__*/React__default["default"].createElement(Controls$1, {
     className: "Controls",
     height: height,
     width: width
   }, !hideTitleAndValue && /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer$1, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React__default["default"].createElement(Title$5, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$6, {
     className: "Title"
   }, title), /*#__PURE__*/React__default["default"].createElement(CurrencySignAndFormattedValueContainer, {
     className: "CurrencySignAndFormattedValueContainer"
@@ -68158,7 +68169,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__default["default"].createElement(TooltipDiv, null, /*#__PURE__*/React__default["default"].createElement(TooltipLabel, null, `${payload[0].name} ${percent}%`));
+    return /*#__PURE__*/React__default["default"].createElement(TooltipDiv$1, null, /*#__PURE__*/React__default["default"].createElement(TooltipLabel$1, null, `${payload[0].name} ${percent}%`));
   }
 }
 CustomTooltip.propTypes = {
@@ -68307,7 +68318,7 @@ Tooltip.defaultProps = {
   content: ''
 };
 
-const ControlsContainer$1 = dt.div`
+const ControlsContainer$2 = dt.div`
   font-family: "Poppins", sans-serif;
   background-color: white;
   color: ${props => props.textColor};
@@ -68370,7 +68381,7 @@ const TotalValue = dt.div`
     font-size: 20px;
   }
 `;
-const Title$4 = dt.h4`
+const Title$5 = dt.h4`
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
@@ -68517,7 +68528,7 @@ const TotalHorizontalCharts = props => {
     }
     return null;
   };
-  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$1, {
+  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$2, {
     ref: wrapper,
     height: height,
     width: width,
@@ -68527,14 +68538,14 @@ const TotalHorizontalCharts = props => {
   }, chartsData?.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React__default["default"].createElement(CardHeader, {
     ref: topHeader,
     className: "CardHeader"
-  }, !hideTitle ? /*#__PURE__*/React__default["default"].createElement(Title$4, null, title) : '', !hideTotalValue ? /*#__PURE__*/React__default["default"].createElement(TotalValue, {
+  }, !hideTitle ? /*#__PURE__*/React__default["default"].createElement(Title$5, null, title) : '', !hideTotalValue ? /*#__PURE__*/React__default["default"].createElement(TotalValue, {
     className: "TotalValue"
   }, currencySign && /*#__PURE__*/React__default["default"].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__default["default"].createElement(ResponsiveContainer, {
     width: "100%",
     height: calculateChartHeight()
-  }, /*#__PURE__*/React__default["default"].createElement(BarChart, {
+  }, /*#__PURE__*/React__default["default"].createElement(BarChart$1, {
     layout: "vertical",
     data: chartsData,
     margin: {
@@ -68636,7 +68647,7 @@ TotalHorizontalCharts.defaultProps = {
   hideTitle: false
 };
 
-const ControlsContainer = dt.div`
+const ControlsContainer$1 = dt.div`
   // position: relative;
   display: flex;
   flex-direction: column;
@@ -68667,7 +68678,7 @@ const ItemContainer = dt.div`
   flex-direction: column;
   flex-wrap: wrap;
 `;
-const Title$3 = dt.h4`
+const Title$4 = dt.h4`
   font-size: 18px;
   font-weight: 500;
   margin: 0;
@@ -68775,7 +68786,7 @@ const SalesAndROI = props => {
   }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(TextBeforeAndAfterValue, null, dataItem.textAfter)));
-  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer, {
+  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer$1, {
     id: "ControlsContainer",
     height: height,
     width: width,
@@ -68783,7 +68794,7 @@ const SalesAndROI = props => {
     showBorderShadow: showBorderShadow
   }, /*#__PURE__*/React__default["default"].createElement(TitleAndValueContainer, {
     id: "TitleAndValueContainer"
-  }, /*#__PURE__*/React__default["default"].createElement(Title$3, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$4, {
     id: "Title"
   }, title), showBanner && /*#__PURE__*/React__default["default"].createElement(OutBanner, {
     id: "OutBanner",
@@ -68882,7 +68893,7 @@ const TitleContainer$1 = dt.div`
   margin: 0;
   border-bottom: 1px solid #b1b1b1;
 `;
-const Title$2 = dt.p`
+const Title$3 = dt.p`
   font-weight: 400;
   font-size: 24px;
   margin: 0;
@@ -69102,7 +69113,7 @@ const PopupCharts = props => {
     height: height,
     width: width,
     onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/React__default["default"].createElement(TitleContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Title$2, null, title), /*#__PURE__*/React__default["default"].createElement(CloseXIconContainer, {
+  }, /*#__PURE__*/React__default["default"].createElement(TitleContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Title$3, null, title), /*#__PURE__*/React__default["default"].createElement(CloseXIconContainer, {
     onClick: e => closePopupCharts(e)
   }, /*#__PURE__*/React__default["default"].createElement(CloseXIcon, null))), /*#__PURE__*/React__default["default"].createElement(ChartsContainer, {
     id: "ChartsContainer",
@@ -69200,7 +69211,7 @@ const TopToggleListMainContainer = dt.div`
     padding: 0 24px;
     width: ${props => props.width};
 `;
-const Title$1 = dt.h4`
+const Title$2 = dt.h4`
     font-size: 14px;
     font-weight: 600;
     margin: 20px 0 12px;
@@ -69230,7 +69241,7 @@ const TopToggleList = props => {
   } = props;
   return /*#__PURE__*/React__default["default"].createElement(TopToggleListMainContainer, {
     width: width
-  }, /*#__PURE__*/React__default["default"].createElement(Title$1, null, title), /*#__PURE__*/React__default["default"].createElement(ListContainer, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$2, null, title), /*#__PURE__*/React__default["default"].createElement(ListContainer, {
     height: height
   }, list.map(item => /*#__PURE__*/React__default["default"].createElement(ListItem, {
     key: item.value
@@ -80685,7 +80696,7 @@ const TitleContainer = dt.div`
   justify-content: flex-start; 
   margin: 0 0 10px 0; 
 `;
-const Title = dt.h3`
+const Title$1 = dt.h3`
   user-select: none;
   text-align: left;
   margin: 0;
@@ -80960,7 +80971,7 @@ const Heatmap = props => {
     className: "HeatmapWrapper"
   }, /*#__PURE__*/React__default["default"].createElement(TitleContainer, {
     className: "TitleContainer"
-  }, /*#__PURE__*/React__default["default"].createElement(Title, {
+  }, /*#__PURE__*/React__default["default"].createElement(Title$1, {
     className: "Title"
   }, title)), refreshRequired && renderBars(), !refreshRequired && renderBars(), renderLegend()));
 };
@@ -80975,15 +80986,711 @@ Heatmap.propTypes = {
   barHeight: PropTypes.string.isRequired
 };
 
+const ButtonWrapper = dt.div`
+  width: fit-content;
+  text-align: center;
+`;
+const IconButtonContainer = dt.a`
+  font-size: 14px;
+  font-weight: 400;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 20px;
+  text-decoration: none;
+  color: ${props => props.color};
+  border-radius: ${props => props.borderRadius};
+  border: 1px solid ${props => props.borderColor.toString()};
+  background: ${props => props.backgroundColor.toString()};
+  position: relative;
+  transition: all .3s;
+  ${props => props.inProgress && lt`
+      pointer-events: none;
+      &:after {
+        content: 'In progress';
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-wrap: nowrap;
+        position: absolute;
+        background: linear-gradient(
+          to right,
+          #5FCC70 ${props.progress}%,
+          #B1B1B1 ${props.progress + 1}%,
+          #B1B1B1 100%
+        );
+        width: 100%;
+        height: 100%;
+        border-radius: ${props => props.borderRadius};
+        border-width: 0;
+        z-index: 9;
+      }
+    `}
+  &:hover, &:focus {
+    cursor: pointer;
+    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
+  }
+`;
+const SpanText = dt.span`
+`;
+const CancelClick = dt.span`
+  display: inherit;
+  font-family: "Lato", sans-serif;;
+  font-size: 14px;
+  color: #568202;
+  cursor: pointer;
+  margin-top: 5px;
+`;
+
+/* IconButton */
+const IconButton = props => {
+  const {
+    // downloadStatus,
+    // fileName,
+    fileLink,
+    showProcess,
+    contentColor,
+    buttonText,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    iconName,
+    iconWidth,
+    iconHeight,
+    disabled,
+    onClick,
+    onCancelClick
+  } = props;
+  const [progress, setProgress] = React.useState(0);
+  let interval;
+  const incrementProgress = () => {
+    if (showProcess && progress <= 90) {
+      interval = setInterval(() => {
+        setProgress(prevProgress => {
+          const newProgress = prevProgress + 2;
+          if (newProgress >= 90) {
+            clearInterval(interval);
+          }
+          return newProgress;
+        });
+      }, 500);
+    } else {
+      setProgress(0);
+      clearInterval(interval);
+    }
+  };
+  React.useEffect(() => {
+    incrementProgress();
+  }, [showProcess]);
+  const getIcon = icon => {
+    switch (icon) {
+      case 'download':
+        return /*#__PURE__*/React__default["default"].createElement(DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: contentColor
+        });
+      case 'document':
+        return /*#__PURE__*/React__default["default"].createElement(DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: contentColor
+        });
+      case 'fly':
+        return /*#__PURE__*/React__default["default"].createElement(FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: contentColor
+        });
+      case 'bell':
+        return /*#__PURE__*/React__default["default"].createElement(BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: contentColor
+        });
+      case 'maintenance':
+        return /*#__PURE__*/React__default["default"].createElement(MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: contentColor
+        });
+      case 'exit':
+        return /*#__PURE__*/React__default["default"].createElement(ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: contentColor
+        });
+      case 'eye':
+        return /*#__PURE__*/React__default["default"].createElement(EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: contentColor
+        });
+      default:
+        return '';
+    }
+  };
+  const onClickHandler = event => {
+    onClick(event);
+  };
+  const onCancelClickHandler = event => {
+    onCancelClick(event);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, {
+    id: "ButtonWrapper"
+  }, /*#__PURE__*/React__default["default"].createElement(IconButtonContainer, {
+    download: true,
+    href: fileLink,
+    backgroundColor: disabled ? '#E3E4E5' : backgroundColor,
+    borderColor: disabled ? '#B1B1B1' : borderColor,
+    borderRadius: borderRadius,
+    color: disabled ? '#B1B1B1' : contentColor,
+    inProgress: showProcess,
+    progress: progress,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/React__default["default"].createElement(SpanText, null, buttonText)), showProcess && /*#__PURE__*/React__default["default"].createElement(CancelClick, {
+    onClick: event => onCancelClickHandler(event)
+  }, "Click here to cancel"));
+};
+IconButton.propTypes = {
+  // downloadStatus: PropTypes.string,
+  // fileName: PropTypes.string,
+  fileLink: PropTypes.string,
+  showProcess: PropTypes.bool,
+  buttonText: PropTypes.string,
+  iconName: PropTypes.string,
+  contentColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  borderRadius: PropTypes.string,
+  iconHeight: PropTypes.number,
+  iconWidth: PropTypes.number,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  onCancelClick: PropTypes.func
+};
+IconButton.defaultProps = {
+  // downloadStatus: '',
+  // fileName: '',
+  fileLink: '',
+  showProcess: false,
+  buttonText: '',
+  iconName: 'eye',
+  contentColor: '#212121',
+  backgroundColor: '#FFFFFF',
+  borderColor: '#B1B1B1',
+  borderRadius: '12px',
+  iconHeight: 18,
+  iconWidth: 18,
+  disabled: false,
+  onClick: () => {},
+  onCancelClick: () => {}
+};
+
+const LinnerContainer = dt.div`
+  font-family: "Poppins", sans-serif;
+  display: grid;
+  gap: 48px 0;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: auto auto;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  background-color: ${props => props.backgroundColor};
+  padding: 50px 20px 20px;
+  box-sizing: border-box;
+`;
+const DataBox = dt.div`
+  height: 100%;
+  padding: 0 40px;
+  border-left: 1px solid #d0d0d0;
+  &:nth-child(1),
+  &:nth-child(6) {
+    border-left: none;
+    padding-left: 0;
+  }
+  &:nth-child(5),
+  &:nth-child(10) {
+    padding-right: 0;
+  }
+`;
+const CellItem = dt.div`
+  display: flex;
+  align-items: center;
+`;
+const DataBoxTitle = dt.span`
+  font-size: 18px;
+  display: block;
+  margin: 0 0 12px;
+`;
+const BigValue = dt.span`
+  font-size: 40px;
+  font-weight: 500;
+  margin-right: 5px;
+`;
+const CellItemValueSign = dt.span`
+  font-size: 16px;
+  font-weight: 400;
+`;
+const ValueChange = dt.span`
+  font-size: 16px;
+  font-weight: 400;
+`;
+const CellItemNoValue = dt.span`
+  font-size: 40px;
+  font-weight: 500;
+`;
+const PercentageChange = dt.div`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: ${props => props.color};
+`;
+
+const ArrowUpIcon = _ref => {
+  let {
+    clicked,
+    width = '8',
+    height = '9'
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 8 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M4.47065 0.188348C4.21033 -0.0627825 3.78758 -0.0627825 3.52727 0.188348L0.195236 3.40281C-0.0650787 3.65394 -0.0650787 4.06178 0.195236 4.31291C0.455551 4.56404 0.878303 4.56404 1.13862 4.31291L3.33359 2.19337V8.35711C3.33359 8.71271 3.63139 9 4 9C4.36861 9 4.66641 8.71271 4.66641 8.35711V2.19337L6.86138 4.3109C7.1217 4.56203 7.54445 4.56203 7.80476 4.3109C8.06508 4.05977 8.06508 3.65193 7.80476 3.4008L4.47273 0.186338L4.47065 0.188348Z",
+    fill: "#5FCC70"
+  }));
+};
+
+const ArrowDownIcon = _ref => {
+  let {
+    clicked,
+    width = '8',
+    height = '9'
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 8 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M3.52935 8.81165C3.78967 9.06278 4.21242 9.06278 4.47273 8.81165L7.80476 5.59719C8.06508 5.34606 8.06508 4.93822 7.80476 4.68709C7.54445 4.43596 7.1217 4.43596 6.86138 4.68709L4.66641 6.80663L4.66641 0.642893C4.66641 0.287292 4.36861 -4.08657e-07 4 -4.40881e-07C3.63139 -4.73106e-07 3.33359 0.287292 3.33359 0.642893L3.33359 6.80663L1.13862 4.6891C0.878303 4.43797 0.455551 4.43797 0.195236 4.6891C-0.0650787 4.94023 -0.0650787 5.34807 0.195236 5.5992L3.52727 8.81366L3.52935 8.81165Z",
+    fill: "#F00021"
+  }));
+};
+
+/* eslint-disable no-restricted-globals */
+const DoublePanelDataRow = props => {
+  const {
+    width,
+    height,
+    data,
+    backgroundColor,
+    className,
+    customDataFormat,
+    showPercentChange
+  } = props;
+  const getArrowSign = arrowSign => {
+    if (!arrowSign) {
+      return '-';
+    }
+    if (arrowSign === 'up') {
+      return /*#__PURE__*/React__default["default"].createElement(PercentageChange, {
+        color: "#5FCC70",
+        value: 34 // TODO: when ready, replace with actual value
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowUpIcon, {
+        width: 12,
+        height: 12
+      }), ' ', "(+34K)");
+    }
+    return /*#__PURE__*/React__default["default"].createElement(PercentageChange, {
+      color: "#D23630",
+      value: 66 // TODO: when ready, replace with actual value
+    }, /*#__PURE__*/React__default["default"].createElement(ArrowDownIcon, {
+      width: 12,
+      height: 12
+    }), ' ', "(-12K)");
+  };
+  return /*#__PURE__*/React__default["default"].createElement(LinnerContainer, {
+    className: className,
+    backgroundColor: backgroundColor,
+    width: width,
+    height: height,
+    customDataFormat: customDataFormat
+  }, data.map(item => /*#__PURE__*/React__default["default"].createElement(DataBox, {
+    className: "data-box-item"
+  }, item.title && /*#__PURE__*/React__default["default"].createElement(DataBoxTitle, {
+    className: "DataBoxTitle"
+  }, item.title), /*#__PURE__*/React__default["default"].createElement(CellItem, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== 'null' && item.value !== 'undefined' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, item.sign && /*#__PURE__*/React__default["default"].createElement(CellItemValueSign, null, item.sign), customDataFormat ? /*#__PURE__*/React__default["default"].createElement(BigValue, {
+    className: "DataBoxValue"
+  }, ''.concat(formattedValue(item.value), getFormattedUnits(item.value)), item.isPercent && /*#__PURE__*/React__default["default"].createElement(CellItemValueSign, null, "%")) : /*#__PURE__*/React__default["default"].createElement(BigValue, null, ''.concat(getFormattedValue(item.value), getFormattedUnits(item.value)), item.isPercent && /*#__PURE__*/React__default["default"].createElement(CellItemValueSign, null, "%")), showPercentChange && getArrowSign(item.value >= 0 ? 'up' : 'down')) : /*#__PURE__*/React__default["default"].createElement(CellItemNoValue, null, "N/A")), /*#__PURE__*/React__default["default"].createElement(ValueChange, null))));
+};
+DoublePanelDataRow.propTypes = {
+  className: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    value: PropTypes.number,
+    sign: PropTypes.string
+  })),
+  backgroundColor: PropTypes.string,
+  customDataFormat: PropTypes.bool,
+  showPercentChange: PropTypes.bool
+};
+DoublePanelDataRow.defaultProps = {
+  className: '',
+  width: '100%',
+  height: 'auto',
+  data: [],
+  backgroundColor: '#FFFFFF',
+  customDataFormat: false,
+  showPercentChange: false
+};
+
+const ControlsContainer = dt.div`
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  color: #212121;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  min-width: 250px;
+`;
+const Controls = dt.div`
+  height: 100%;
+  width: 100%;
+  background: white;
+  display: flex;
+  flex-direction: column;
+`;
+const TooltipDiv = dt.div`
+  border-radius: 5px;
+  padding: 8px 12px;
+  background: white;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
+  margin: 0;
+`;
+const TooltipLabel = dt.div`
+  color: #212121;
+  font-size: 14px;
+  font-weight: 400;
+  width: fit-content;
+`;
+const TooltipTitle = dt.div`
+  color: #212121;
+  font-size: 14px;
+  font-weight: 600;
+`;
+const Title = dt.h5`
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 20px;
+  margin: 0 0 30px;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+    margin: 0 0 20px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
+`;
+const LabelBoldText = dt.tspan`
+  font-size: 0.7em;
+`;
+const LabelText = dt.tspan`
+  font-size: 0.6em;
+`;
+
+/* 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 => {
+  const {
+    className,
+    title,
+    barChartData,
+    barSize,
+    barFontSizeValue,
+    isDollar,
+    width,
+    height,
+    barChartColor,
+    currentBarColor,
+    showLegend,
+    legendData,
+    showDollarSign,
+    showReferenceLine,
+    referenceLinePoint,
+    referenceLineColor,
+    referenceLineDashed,
+    showCurrentCampaignStyle,
+    isPercent
+  } = props;
+  const controlsContainerRef = React.useRef();
+  const areAllDatesEmpty = () => {
+    if (!barChartData || barChartData?.length === 0) return true;
+    return barChartData?.every(item => !item.date);
+  };
+  const displayFormattedValue = function (value) {
+    let showFullNumber = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (value === undefined || value === null) return '';
+    let formattedValue = '';
+    if (isPercent) {
+      formattedValue = ''.concat(value.toFixed(1), '%');
+    } else if (isDollar) {
+      formattedValue = ''.concat(showDollarSign ? '$' : '', !showFullNumber ? getFormattedValue(value) : getNumberWithCommas(Number.isInteger(value) ? value : value.toFixed(1)), !showFullNumber ? getFormattedUnits(value) : '');
+    } else {
+      formattedValue = ''.concat(!showFullNumber ? getFormattedValue(value) : getNumberWithCommas(Number.isInteger(value) ? value : value.toFixed(1)), !showFullNumber ? getFormattedUnits(value) : '');
+    }
+    return formattedValue;
+  };
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const CustomTooltip = tooltipData => {
+    const {
+      active,
+      payload,
+      label
+    } = tooltipData;
+    if (!active || !payload || payload?.length === 0) return null;
+    let currentTooltipValue = 0;
+    if (payload[0].payload?.value) currentTooltipValue = payload[0].payload?.value;
+    return /*#__PURE__*/React__default["default"].createElement(TooltipDiv, null, /*#__PURE__*/React__default["default"].createElement(TooltipTitle, null, `${label}`), /*#__PURE__*/React__default["default"].createElement(TooltipLabel, null, `${displayFormattedValue(currentTooltipValue, !!showCurrentCampaignStyle)}`));
+  };
+  const CustomizedTickBarChart = props => {
+    const {
+      x,
+      y,
+      payload
+    } = props;
+    if (barChartData && barChartData.length > 0 && payload) {
+      const retailerData = barChartData.filter(item => item.title === payload.value);
+      if (retailerData && retailerData.length > 0) {
+        return /*#__PURE__*/React__default["default"].createElement("g", {
+          transform: `translate(${x},${y})`
+        }, showCurrentCampaignStyle && retailerData[0].isCurrent && /*#__PURE__*/React__default["default"].createElement("rect", {
+          x: -56 // Adjust this to position the background properly
+          ,
+          y: 5 // Adjust this for vertical alignment with your text
+          ,
+          width: 112 // Adjust width based on the text length
+          ,
+          height: 22 // Adjust height based on font size
+          ,
+          fill: currentBarColor || '#90CE9C',
+          rx: 12
+        }), /*#__PURE__*/React__default["default"].createElement("text", {
+          x: 0,
+          y: 0,
+          dy: 16,
+          fill: "#212121"
+        }, /*#__PURE__*/React__default["default"].createElement(LabelBoldText, {
+          textAnchor: "middle",
+          x: 0,
+          dy: showCurrentCampaignStyle ? 20 : 50,
+          fontSize: showCurrentCampaignStyle ? 12 : 16,
+          fontWeight: showCurrentCampaignStyle ? 500 : 600,
+          fill: showCurrentCampaignStyle && !retailerData[0].isCurrent ? '#8B8989' : '#212121'
+        }, (() => {
+          if (showCurrentCampaignStyle) {
+            if (retailerData[0].isCurrent) {
+              if (payload?.value?.length > 6) {
+                return `${payload.value.slice(0, 6)}...-Current`;
+              }
+              return `${payload.value}-Current`;
+            }
+            if (payload?.value?.length > 10) {
+              return `${payload.value.slice(0, 10)}...`;
+            }
+            return `${payload.value}`;
+          }
+          return payload?.value;
+        })()), /*#__PURE__*/React__default["default"].createElement(LabelText, {
+          textAnchor: "middle",
+          x: "0",
+          dy: "30",
+          fontSize: 14,
+          fontWeight: 400
+        }, retailerData[0].date)));
+      }
+      return null;
+    }
+    return null;
+  };
+  const CustomizedLabel = props => {
+    const {
+      x,
+      y,
+      stroke,
+      value
+    } = props;
+    return /*#__PURE__*/React__default["default"].createElement("text", {
+      x: x + 30,
+      y: y,
+      dy: -8,
+      fill: showCurrentCampaignStyle ? '#8B8989' : stroke,
+      fontSize: barFontSizeValue,
+      textAnchor: "middle"
+    }, displayFormattedValue(value));
+  };
+  return /*#__PURE__*/React__default["default"].createElement(ControlsContainer, {
+    className: className,
+    height: height,
+    width: width,
+    ref: controlsContainerRef
+  }, /*#__PURE__*/React__default["default"].createElement(Controls, null, /*#__PURE__*/React__default["default"].createElement(Title, null, title), /*#__PURE__*/React__default["default"].createElement(ResponsiveContainer, {
+    width: "100%",
+    height: 400
+  }, /*#__PURE__*/React__default["default"].createElement(BarChart$1, {
+    width: width,
+    height: height,
+    data: barChartData,
+    margin: {
+      top: 20,
+      right: 0,
+      bottom: 0,
+      left: -5
+    }
+  }, showCurrentCampaignStyle && /*#__PURE__*/React__default["default"].createElement(CartesianGrid, {
+    strokeDasharray: "3 3",
+    vertical: false
+  }), showCurrentCampaignStyle && /*#__PURE__*/React__default["default"].createElement(YAxis, {
+    tickCount: 10,
+    interval: "preserveEnd",
+    domain: [0, 'auto'],
+    tick: {
+      fill: '#8B8989'
+    },
+    axisLine: false,
+    fontWeight: 400,
+    fontSize: "12px",
+    tickLine: false,
+    tickFormatter: value => `${displayFormattedValue(value)}`
+  }), showReferenceLine && /*#__PURE__*/React__default["default"].createElement(ReferenceLine, {
+    y: referenceLinePoint,
+    stroke: referenceLineColor,
+    strokeDasharray: referenceLineDashed
+  }), /*#__PURE__*/React__default["default"].createElement(XAxis, {
+    dataKey: "title",
+    tick: CustomizedTickBarChart,
+    tickLine: false,
+    height: areAllDatesEmpty() ? 50 : 120,
+    stroke: "#D0D0D0",
+    domain: [0, 'auto'],
+    interval: 0
+  }), /*#__PURE__*/React__default["default"].createElement(Brush, {
+    dataKey: "name",
+    height: 30,
+    stroke: "#8884d8"
+  }), /*#__PURE__*/React__default["default"].createElement(Tooltip$2, {
+    content: /*#__PURE__*/React__default["default"].createElement(CustomTooltip, null)
+  }), /*#__PURE__*/React__default["default"].createElement(Tooltip$2, null), /*#__PURE__*/React__default["default"].createElement(Bar, {
+    dataKey: "value",
+    fill: barChartColor,
+    minPointSize: 5,
+    barSize: barSize ?? 60,
+    radius: [5, 5, 0, 0]
+  }, /*#__PURE__*/React__default["default"].createElement(LabelList, {
+    dataKey: "value",
+    content: CustomizedLabel
+  })))), showLegend && /*#__PURE__*/React__default["default"].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
+};
+
 exports.BannerEventBoxList = BannerEventBoxList;
+exports.BarChart = BarChart;
 exports.BarChartsByWeeks = BarChartsByWeeks;
 exports.Button = Button;
 exports.CollapseHeader = CollapseHeader;
 exports.DialogOverlay = DialogOverlay;
+exports.DoublePanelDataRow = DoublePanelDataRow;
 exports.EventDetailsCard = EventDetailsCard;
 exports.EventList = EventList;
 exports.FilterPanel = FilterPanel;
 exports.Heatmap = Heatmap;
+exports.IconButton = IconButton;
 exports.LinnerDataBox = LinnerDataBox;
 exports.MarketShareDescription = MarketShareDescription;
 exports.OneColumnContainer = OneColumnContainer;