sag_components 2.0.0-beta97 → 2.0.0-beta98

package/dist/index.esm.js

@@ -34,7 +34,7 @@ const ButtonItem = styled.div`
   height: ${props => props.height};
   color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
   border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
-  border-radius: 12px;
+  border-radius: ${props => props.borderRadius};
   background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
   box-sizing: border-box;
   gap: 8px;
@@ -70,14 +70,13 @@ const IconWrapper$3 = styled.div`
 const InputCommit = styled.input`
   font-family: "Poppins", sans-serif;
   border: ${props => `0px solid ${props.disabled ? props.disabled_border_color : props.hover_border_color}`};
-  border-radius: 8px;
   font-weight: 400;
   font-size: 14px;
   width: ${props => props.width};
   height: ${props => props.height};
   color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
   border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
-  border-radius: 12px;
+  border-radius: ${props => props.borderRadius};
   background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
   cursor: pointer;
   padding: ${props => props.padding};
@@ -352,6 +351,21 @@ const PlusIcon = ({
   fill: "#066768"
 }));
 
+const Plus = ({
+  width = 17,
+  height = 17,
+  fill = 'white'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 17 17",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M9.34619 2.03369V7.65869H14.9712C15.4282 7.65869 15.8149 8.04541 15.8149 8.50244C15.8149 8.99463 15.4282 9.34619 14.9712 9.34619H9.34619V14.9712C9.34619 15.4634 8.95947 15.8149 8.50244 15.8149C8.01025 15.8149 7.65869 15.4634 7.65869 14.9712V9.34619H2.03369C1.5415 9.34619 1.18994 8.99463 1.18994 8.50244C1.18994 8.04541 1.5415 7.65869 2.03369 7.65869H7.65869V2.03369C7.65869 1.57666 8.01025 1.18994 8.50244 1.18994C8.95947 1.18994 9.34619 1.57666 9.34619 2.03369Z",
+  fill: fill
+}));
+
 const Button$1 = props => {
   const {
     text = "",
@@ -363,6 +377,7 @@ const Button$1 = props => {
     textColor = "",
     backgroundColor = "",
     borderColor = "",
+    borderRadius = "12px",
     hoverTextColor = "",
     hoverBackgroundColor = "",
     hoverBorderColor = "",
@@ -392,7 +407,8 @@ const Button$1 = props => {
     maintenance: MaintenanceIcon,
     exit: ExitIcon,
     eye: EyeIcon,
-    reselect: ReselectIcon
+    reselect: ReselectIcon,
+    plus: Plus
   };
   const getIcon = icon => {
     if (!icon || icon === "none") return null;
@@ -427,11 +443,13 @@ const Button$1 = props => {
   }, isSubmitButton ? /*#__PURE__*/React$1.createElement(InputCommit, _extends$1({
     className: clicked ? "InputCommit-clicked" : "InputCommit",
     value: text,
-    type: "submit"
+    type: "submit",
+    borderRadius: borderRadius
   }, commonProps)) : /*#__PURE__*/React$1.createElement(ButtonItem, _extends$1({
     className: clicked ? "ButtonItem-clicked" : "ButtonItem",
     onMouseEnter: () => setHover(true),
-    onMouseLeave: () => setHover(false)
+    onMouseLeave: () => setHover(false),
+    borderRadius: borderRadius
   }, commonProps), getIcon(leftIcon), /*#__PURE__*/React$1.createElement(Label$8, {
     className: "Label",
     disabled: disabled
@@ -1866,7 +1884,7 @@ const TitleAndValueContainer$4 = styled.div`
   flex-direction: column;
   padding: 0 20px;
 `;
-const Title$j = styled.h4`
+const Title$k = styled.h4`
   font-weight: 400;
   font-size: 18px;
   margin: 0 0 8px;
@@ -2342,7 +2360,7 @@ const PieChart = props => {
     width: width
   }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$4, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$j, {
+  }, /*#__PURE__*/React$1.createElement(Title$k, {
     className: "Title"
   }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$2, {
     className: "CurrencySignAndFormattedValueContainer"
@@ -11896,7 +11914,7 @@ const Loader$1 = styled.span`
   animation: ${rotation$1} 1.5s infinite ease;
   transform: translateZ(0);
 `;
-const TableWrapper$2 = styled.div`
+const TableWrapper$3 = styled.div`
   position: relative;
   width: ${props => `${props.width}`};
   height: ${props => `${props.height}`};
@@ -11906,7 +11924,7 @@ const TableWrapper$2 = styled.div`
   overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden'};
   ${scrollableStyles$9}
 `;
-const Table$2 = styled.table`
+const Table$3 = styled.table`
   font-family: "Poppins", sans-serif;
   width: ${props => `${props.tableWidthSize}%`};
   table-layout: fixed;
@@ -12211,13 +12229,13 @@ const ReportTable = props => {
       return newState;
     });
   };
-  return /*#__PURE__*/React$1.createElement(ReportTableWrapper, null, /*#__PURE__*/React$1.createElement(TableWrapper$2, {
+  return /*#__PURE__*/React$1.createElement(ReportTableWrapper, null, /*#__PURE__*/React$1.createElement(TableWrapper$3, {
     width: width,
     height: height,
     className: className,
     maxColumnsNumber: getMaxColnumber(),
     columnsNumber: columnsNumber
-  }, /*#__PURE__*/React$1.createElement(Table$2, {
+  }, /*#__PURE__*/React$1.createElement(Table$3, {
     tableWidthSize: tableWidthSize
   }, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement(Tr, null, tableData.columnsHeadings.map((headline, index) => /*#__PURE__*/React$1.createElement(Th$1, {
     key: index
@@ -25106,7 +25124,7 @@ const TitleAndValueContainer$3 = styled.div`
   display: flex;
   flex-direction: column; 
 `;
-const Title$i = styled.h4`
+const Title$j = styled.h4`
   font-weight: 400;
   font-size: 20px;
   margin: 0;
@@ -25169,7 +25187,7 @@ const FormattedValue$3 = props => {
     width: width
   }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer$3, {
     className: "TitleAndValueContainer"
-  }, title ? /*#__PURE__*/React$1.createElement(Title$i, {
+  }, title ? /*#__PURE__*/React$1.createElement(Title$j, {
     className: "Title",
     width: width
   }, title) : '', showTopValue && /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$1, {
@@ -25181,7 +25199,7 @@ const FormattedValue$3 = 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$1.createElement(CurrencySignOrPercent, {
     className: "CurrencySignOrPercent"
-  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React$1.createElement(Title$i, {
+  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React$1.createElement(Title$j, {
     className: "Title",
     width: width
   }, subtitle) : '')));
@@ -25251,7 +25269,7 @@ const TooltipTitle$8 = styled.div`
 const TitleAndValueContainer$2 = styled.div`
   padding: 0 1rem;
 `;
-const Title$h = styled.h5`
+const Title$i = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -25380,7 +25398,7 @@ const TitleAndIconContainer = styled.div`
   display: flex;
   align-items: center;
 `;
-const Title$g = styled.h4`
+const Title$h = styled.h4`
   font-weight: 400;
   font-size: 14px;
   line-height: 27px;
@@ -25434,7 +25452,7 @@ const PerformanceAnalyticsLegend = props => {
     color: item.iconColor
   }) : item.iconType === ICON_TYPE_LEGEND_LINE_ICON$3 ? /*#__PURE__*/React$1.createElement(LegendLineIcon, {
     color: item.iconColor
-  }) : '', /*#__PURE__*/React$1.createElement(Title$g, {
+  }) : '', /*#__PURE__*/React$1.createElement(Title$h, {
     id: "Title",
     width: width
   }, item.title))))) : '');
@@ -25589,7 +25607,7 @@ const BarChartsByWeeks = props => {
     ref: controlsContainerRef
   }, /*#__PURE__*/React$1.createElement(Controls$a, {
     height: getControlsHeight()
-  }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$h, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
+  }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$i, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
     title: headerValueTopTitle,
     subtitle: headerValueBottomTitle,
     showTopValue: showHeaderTopValue,
@@ -25822,7 +25840,7 @@ const TitleAndValueContainer$1 = styled.div`
   flex-direction: column;
   padding: 0 1.25em; /* 20px → 1.25em */
 `;
-const Title$f = styled.h4`
+const Title$g = styled.h4`
   font-weight: 500;
   font-size: ${props => props.titleFontSize || '1.125em'}; /* Default: 18px → 1.125em */
   margin: 0;
@@ -26025,7 +26043,7 @@ const TotalDoughnutChart = props => {
     width: width
   }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$1, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$f, {
+  }, /*#__PURE__*/React$1.createElement(Title$g, {
     className: "Title",
     fontSize: titleFontSize
   }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer, {
@@ -26347,7 +26365,7 @@ const TotalValue = styled.div`
     font-size: 20px;
   }
 `;
-const Title$e = styled.h4`
+const Title$f = styled.h4`
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
@@ -26504,7 +26522,7 @@ const TotalHorizontalCharts = props => {
   }, chartsData?.length > 0 ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React$1.createElement(CardHeader, {
     ref: topHeader,
     className: "CardHeader"
-  }, !hideTitle ? /*#__PURE__*/React$1.createElement(Title$e, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
+  }, !hideTitle ? /*#__PURE__*/React$1.createElement(Title$f, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
     className: "TotalValue"
   }, currencySign && /*#__PURE__*/React$1.createElement(CurrencySign, {
     className: "CurrencySign"
@@ -26977,7 +26995,7 @@ const ItemContainer = styled.div`
   flex-direction: column;
   flex-wrap: wrap;
 `;
-const Title$d = styled.h4`
+const Title$e = styled.h4`
   font-size: 18px;
   font-weight: 500;
   margin: 0;
@@ -27093,7 +27111,7 @@ const SalesAndROI = props => {
     showBorderShadow: showBorderShadow
   }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer, {
     id: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$d, {
+  }, /*#__PURE__*/React$1.createElement(Title$e, {
     id: "Title"
   }, title), showBanner && /*#__PURE__*/React$1.createElement(OutBanner, {
     id: "OutBanner",
@@ -27192,7 +27210,7 @@ const TitleContainer$1 = styled.div`
   margin: 0;
   border-bottom: 1px solid #b1b1b1;
 `;
-const Title$c = styled.p`
+const Title$d = styled.p`
   font-weight: 400;
   font-size: 24px;
   margin: 0;
@@ -27412,7 +27430,7 @@ const PopupCharts = props => {
     height: height,
     width: width,
     onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/React$1.createElement(TitleContainer$1, null, /*#__PURE__*/React$1.createElement(Title$c, null, title), /*#__PURE__*/React$1.createElement(CloseXIconContainer, {
+  }, /*#__PURE__*/React$1.createElement(TitleContainer$1, null, /*#__PURE__*/React$1.createElement(Title$d, null, title), /*#__PURE__*/React$1.createElement(CloseXIconContainer, {
     onClick: e => closePopupCharts(e)
   }, /*#__PURE__*/React$1.createElement(CloseXIcon, null))), /*#__PURE__*/React$1.createElement(ChartsContainer, {
     id: "ChartsContainer",
@@ -27510,7 +27528,7 @@ const TopToggleListMainContainer = styled.div`
     padding: 0 24px;
     width: ${props => props.width};
 `;
-const Title$b = styled.h4`
+const Title$c = styled.h4`
     font-size: 14px;
     font-weight: 600;
     margin: 20px 0 12px;
@@ -27540,7 +27558,7 @@ const TopToggleList = props => {
   } = props;
   return /*#__PURE__*/React$1.createElement(TopToggleListMainContainer, {
     width: width
-  }, /*#__PURE__*/React$1.createElement(Title$b, null, title), /*#__PURE__*/React$1.createElement(ListContainer, {
+  }, /*#__PURE__*/React$1.createElement(Title$c, null, title), /*#__PURE__*/React$1.createElement(ListContainer, {
     height: height
   }, list.map(item => /*#__PURE__*/React$1.createElement(ListItem, {
     key: item.value
@@ -27602,7 +27620,7 @@ const TitleContainer = styled.div`
   justify-content: flex-start; 
   margin: 0 0 10px 0; 
 `;
-const Title$a = styled.h3`
+const Title$b = styled.h3`
   user-select: none;
   text-align: left;
   margin: 0;
@@ -27877,7 +27895,7 @@ const Heatmap = props => {
     className: "HeatmapWrapper"
   }, /*#__PURE__*/React$1.createElement(TitleContainer, {
     className: "TitleContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$a, {
+  }, /*#__PURE__*/React$1.createElement(Title$b, {
     className: "Title"
   }, title)), refreshRequired && renderBars(), !refreshRequired && renderBars(), renderLegend()));
 };
@@ -28296,7 +28314,7 @@ const TooltipTitle$7 = styled.div`
   font-size: 14px;
   font-weight: 600;
 `;
-const Title$9 = styled.h5`
+const Title$a = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -28457,7 +28475,7 @@ const BarChart = props => {
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React$1.createElement(Controls$7, null, /*#__PURE__*/React$1.createElement(Title$9, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, /*#__PURE__*/React$1.createElement(Controls$7, null, /*#__PURE__*/React$1.createElement(Title$a, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
@@ -28630,7 +28648,7 @@ const Controls$6 = styled.div`
   flex-direction: column;
   background-color: white;
 `;
-const Title$8 = styled.h5`
+const Title$9 = styled.h5`
   font-size: 18px;
   font-weight: 400;
   margin: 0 0 30px;
@@ -28896,7 +28914,7 @@ const DoubleBarSingleLine = props => {
     noDataText: noDataText
   }) : /*#__PURE__*/React$1.createElement(Controls$6, {
     className: "Controls"
-  }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$8, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
+  }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$9, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
     width: dynamicWidth //{hasScroll ? `${data.length * 178}px` : 'auto'}
   }, /*#__PURE__*/React$1.createElement(LineChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(LineChart, _extends$1({
     data: transformedData
@@ -29000,7 +29018,7 @@ const CheckboxGroupContainer = styled.div`
   height: 21px;   
   gap: 20px;
 `;
-const Title$7 = styled.h5`
+const Title$8 = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -29328,7 +29346,7 @@ const AreaChart = props => {
     height: height
   }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer$2, {
     "data-testid": "header-container"
-  }, /*#__PURE__*/React$1.createElement(Title$7, {
+  }, /*#__PURE__*/React$1.createElement(Title$8, {
     "data-testid": "title"
   }, title), /*#__PURE__*/React$1.createElement(CheckboxGroupContainer, {
     "data-testid": "checkbox-group-container"
@@ -29827,7 +29845,7 @@ const HeaderContainer$1 = styled.div`
   align-items: center;
   padding-bottom: 8px;
 `;
-const Title$6 = styled.h3`
+const Title$7 = styled.h3`
   font-size: 18px;
   font-weight: 400;
   margin: 0;
@@ -29891,7 +29909,7 @@ const BreakdownPanel = props => {
     height: height
   }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer$1, {
     "data-testid": "header-container"
-  }, /*#__PURE__*/React$1.createElement(Title$6, {
+  }, /*#__PURE__*/React$1.createElement(Title$7, {
     "data-testid": "title"
   }, title)), /*#__PURE__*/React$1.createElement(CategorySalesMainContainer, {
     "data-testid": "category-sales-main-container"
@@ -31407,7 +31425,7 @@ const ChartContainer = styled.div`
   width: 100%;
   height: calc(100% - 70px);
 `;
-const Title$5 = styled.h2`
+const Title$6 = styled.h2`
   color: #212121;
   font-family: "Poppins";
   font-size: 18px;
@@ -32053,7 +32071,7 @@ const BrushChart = props => {
   return /*#__PURE__*/React$1.createElement(Container, {
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(Title$5, null, title), /*#__PURE__*/React$1.createElement(SegmentedContainer, {
+  }, /*#__PURE__*/React$1.createElement(Title$6, null, title), /*#__PURE__*/React$1.createElement(SegmentedContainer, {
     gap: "8px",
     options: segmentedbuttonOptions ? segmentedbuttonOptions.map(value => ({
       value
@@ -32117,7 +32135,7 @@ const Controls$3 = styled.div`
     padding: 12px 32px;
   }
 `;
-const Title$4 = styled.span`
+const Title$5 = styled.span`
   color: #212121;
   display: inline-block;
   font-size: 18px;
@@ -32378,7 +32396,7 @@ const SingleBarLineCharts = _ref => {
     height: height
   }, data?.length > 0 ? /*#__PURE__*/React$1.createElement(Controls$3, {
     className: "Controls"
-  }, title !== '' && /*#__PURE__*/React$1.createElement(Title$4, null, title), totalsData.length > 0 && /*#__PURE__*/React$1.createElement(LinnerDataBoxWrap, {
+  }, title !== '' && /*#__PURE__*/React$1.createElement(Title$5, null, title), totalsData.length > 0 && /*#__PURE__*/React$1.createElement(LinnerDataBoxWrap, {
     width: "40%",
     height: "60px",
     data: totalsData
@@ -32670,7 +32688,7 @@ const TooltipTitle$2 = styled.div`
   font-size: 14px;
   font-weight: 600;
 `;
-const Title$3 = styled.h5`
+const Title$4 = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -32846,7 +32864,7 @@ const BarChartWithAreaChart = props => {
     ref: controlsContainerRef
   }, /*#__PURE__*/React$1.createElement(Controls$2, {
     className: "Controls"
-  }, /*#__PURE__*/React$1.createElement(Title$3, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, /*#__PURE__*/React$1.createElement(Title$4, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     height: barChartHeight
   }, /*#__PURE__*/React$1.createElement(ComposedChart, {
     data: barChartData
@@ -32919,7 +32937,7 @@ const Controls$1 = styled.div`
     padding: 12px 32px;
   }
 `;
-const Title$2 = styled.span`
+const Title$3 = styled.span`
   color: #212121;
   display: inline-block;
   font-size: 18px;
@@ -33074,7 +33092,7 @@ const BarChartTwoRows = props => {
     ref: controlsContainerRef
   }, /*#__PURE__*/React$1.createElement(Controls$1, {
     className: "Controls"
-  }, title !== '' && /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, title !== '' && /*#__PURE__*/React$1.createElement(Title$3, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     height: barChartHeight
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
     width: width,
@@ -33153,7 +33171,7 @@ const TooltipTitle = styled.div`
   font-size: 14px;
   font-weight: 600;
 `;
-const Title$1 = styled.h5`
+const Title$2 = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -33276,7 +33294,7 @@ const TwoBarCharts = props => {
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React$1.createElement(Controls, null, /*#__PURE__*/React$1.createElement(Title$1, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, /*#__PURE__*/React$1.createElement(Controls, null, /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
@@ -33456,7 +33474,7 @@ const TitleDiv = styled.div`
     font-size: 10px;
   }
 `;
-const TableWrapper$1 = styled.div`
+const TableWrapper$2 = styled.div`
   overflow-x: auto;
   margin-bottom: 22px;
   &::-webkit-scrollbar {
@@ -33473,7 +33491,7 @@ const TableWrapper$1 = styled.div`
     border-radius: 5px;
   }
 `;
-const Table$1 = styled.table`
+const Table$2 = styled.table`
   width: 100%;
   border-collapse: collapse;
   overflow: auto;
@@ -33703,7 +33721,7 @@ const CollapseData = props => {
     }) : /*#__PURE__*/React$1.createElement(ArrowDownIcon, {
       width: "11px",
       height: "12px"
-    })), /*#__PURE__*/React$1.createElement(TitleDiv, null, `${parseFloat(section.value.toFixed(1))}${section.valueType}`))), activeIndex === section.key && /*#__PURE__*/React$1.createElement(TableWrapper$1, null, /*#__PURE__*/React$1.createElement(Table$1, null, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement("tr", null, section.table.map((headline, i) => /*#__PURE__*/React$1.createElement(Th, {
+    })), /*#__PURE__*/React$1.createElement(TitleDiv, null, `${parseFloat(section.value.toFixed(1))}${section.valueType}`))), activeIndex === section.key && /*#__PURE__*/React$1.createElement(TableWrapper$2, null, /*#__PURE__*/React$1.createElement(Table$2, null, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement("tr", null, section.table.map((headline, i) => /*#__PURE__*/React$1.createElement(Th, {
       key: `${i + headline}`
     }, headline.title)))), /*#__PURE__*/React$1.createElement("tbody", null, /*#__PURE__*/React$1.createElement("tr", null, section.table.map((data, i) => {
       if (data.value !== null) {
@@ -33803,7 +33821,7 @@ const CloseButton = styled.button`
     align-self: flex-end;
   }
 `;
-const Title = styled.h2`
+const Title$1 = styled.h2`
   position: absolute;
   display: flex;
   align-items: center;
@@ -33981,7 +33999,7 @@ const InsightsCarousel = _ref => {
   const nextIndex = (currentIndex + 1) % totalChildren;
   return /*#__PURE__*/React$1.createElement(Overlay, {
     className: className
-  }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header$1, null, /*#__PURE__*/React$1.createElement(Title, {
+  }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header$1, null, /*#__PURE__*/React$1.createElement(Title$1, {
     $titleColor: titleColor
   }, /*#__PURE__*/React$1.cloneElement(icon, {
     fill: iconColor
@@ -35397,14 +35415,14 @@ ToggleSwitch.propTypes = {
   disabled: PropTypes.bool
 };
 
-const TableWrapper = styled.div`
+const TableWrapper$1 = styled.div`
     width: ${props => props.width};
     height: ${props => props.height};
     padding: 20px;
     background-color: #fff;
     box-sizing: border-box;
 `;
-const Table = styled.table`
+const Table$1 = styled.table`
     width: 100%;
     margin-top: 24px;
     border-spacing: unset;
@@ -35463,7 +35481,7 @@ const ContainerTable = props => {
   useEffect(() => {
     calculateRows();
   }, [height]);
-  return /*#__PURE__*/React$1.createElement(TableWrapper, {
+  return /*#__PURE__*/React$1.createElement(TableWrapper$1, {
     ref: TableWrapperRef,
     width: width,
     height: height
@@ -35479,7 +35497,7 @@ const ContainerTable = props => {
     style: {
       marginTop: 24
     }
-  }), /*#__PURE__*/React$1.createElement(Table, null, /*#__PURE__*/React$1.createElement(Thead, null, /*#__PURE__*/React$1.createElement(StyledRow, null, columnsWidths.map((width, index) => /*#__PURE__*/React$1.createElement(HeaderCell, {
+  }), /*#__PURE__*/React$1.createElement(Table$1, null, /*#__PURE__*/React$1.createElement(Thead, null, /*#__PURE__*/React$1.createElement(StyledRow, null, columnsWidths.map((width, index) => /*#__PURE__*/React$1.createElement(HeaderCell, {
     key: `header-cell-${index}`,
     width: `${width}px`
   }, /*#__PURE__*/React$1.createElement(Skeleton, {
@@ -35647,5 +35665,162 @@ const MenuRoute = props => {
   }), /*#__PURE__*/React$1.isValidElement(item.label) ? item.label : item.label))));
 };
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, Heatmap, IconButton, Input, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, ModalWithOverlay, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, ToggleSwitch, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
+const TableWrapper = styled.div`
+    width: ${props => props.width};
+    height: ${props => props.height};
+    background-color: #fff;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+`;
+styled.table`
+    width: 100%;
+    margin-top: 24px;
+    border-spacing: unset;
+`;
+styled.thead``;
+styled.th`
+    font-weight: 600;
+    width: ${props => props.width};
+    padding-right: 8px;
+    padding-bottom: 12px;
+`;
+styled.tbody``;
+styled.td`
+    font-weight: 600;
+    width: ${props => props.width};
+    padding-right: 8px;
+    padding-bottom: 12px;
+`;
+styled.tr`
+    border-bottom: 1px solid #C8C8C8;
+`;
+const NoInfoFound = styled.div`
+    height: 100%;
+    box-sizing: border-box;
+    color: #212121;
+    position: relative;
+`;
+const Title = styled.h2`
+    font-size: 24px;
+    font-weight: 500;
+    margin: 0;
+`;
+const SubTitle = styled.span`
+    font-size: 14px;
+    color: #8B8989;
+`;
+const NoEventsWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-bottom: 14px;
+`;
+const NoEventsMessage = styled.span`
+    font-size: 18px;
+    font-weight: 400;
+    margin-bottom: 14px;
+    text-align: center;
+    display: block;
+    > strong {
+        font-size: 24px;
+        font-weight: 500;
+    }
+`;
+
+const NoEvents = ({
+  width = '251',
+  height = '250'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 251 250",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("rect", {
+  x: "0.5",
+  width: "250",
+  height: "250",
+  rx: "125",
+  fill: "#F3F7F7"
+}), /*#__PURE__*/React$1.createElement("rect", {
+  x: "79.0715",
+  y: "82.0254",
+  width: "91.9643",
+  height: "31.25",
+  fill: "#B4D1D2"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M201.056 149.717V149.686C201.054 149.691 201.052 149.696 201.052 149.701C201.05 149.696 201.048 149.691 201.047 149.686V149.717C200.635 151.213 199.681 152.283 198.186 152.927C199.681 153.57 200.635 154.64 201.047 156.136V156.167C201.049 156.162 201.051 156.157 201.052 156.152C201.053 156.157 201.055 156.162 201.056 156.167V156.136C201.468 154.64 202.422 153.57 203.917 152.927C202.422 152.283 201.468 151.213 201.056 149.717ZM34.6198 71.7965V71.765C34.618 71.7702 34.6163 71.7755 34.6154 71.7808C34.6136 71.7755 34.6119 71.7702 34.611 71.765V71.7965C34.1985 73.2927 33.2449 74.3625 31.75 75.0059C33.2449 75.6494 34.1985 76.7192 34.611 78.2153V78.2468C34.6127 78.2416 34.6145 78.2363 34.6154 78.2311C34.6171 78.2363 34.6189 78.2416 34.6198 78.2468V78.2153C35.0322 76.7192 35.9859 75.6494 37.4808 75.0059C35.9859 74.3625 35.0322 73.2927 34.6198 71.7965ZM216.389 202.361V202.329C216.387 202.335 216.386 202.34 216.385 202.345C216.383 202.34 216.381 202.335 216.38 202.329V202.361C215.968 203.857 215.014 204.927 213.519 205.57C215.014 206.214 215.968 207.283 216.38 208.78V208.811C216.382 208.806 216.384 208.801 216.385 208.795C216.386 208.801 216.388 208.806 216.389 208.811V208.78C216.801 207.283 217.755 206.214 219.25 205.57C217.755 204.927 216.801 203.857 216.389 202.361ZM182.433 182.494V182.43C182.43 182.442 182.427 182.451 182.424 182.463C182.421 182.451 182.418 182.442 182.415 182.43V182.494C181.59 185.486 179.683 187.626 176.693 188.913C179.683 190.2 181.589 192.34 182.415 195.332V195.396C182.418 195.384 182.421 195.375 182.424 195.363C182.427 195.375 182.43 195.384 182.433 195.396V195.332C183.258 192.34 185.165 190.2 188.155 188.913C185.165 187.626 183.259 185.486 182.433 182.494ZM54.8385 110.651V110.587C54.8359 110.598 54.8324 110.608 54.8298 110.619C54.8271 110.608 54.8236 110.598 54.821 110.587V110.651C53.9961 113.642 52.0887 115.783 49.099 117.07C52.0887 118.357 53.9952 120.497 54.821 123.489V123.552C54.8236 123.541 54.8271 123.531 54.8298 123.52C54.8324 123.531 54.8359 123.541 54.8385 123.552V123.489C55.6635 120.497 57.5708 118.357 60.5605 117.07C57.5708 115.783 55.6643 113.642 54.8385 110.651ZM81.9624 38.3393V38.2754C81.9598 38.2868 81.9563 38.2964 81.9536 38.3078C81.951 38.2964 81.9475 38.2868 81.9449 38.2754V38.3393C81.1199 41.3307 79.2126 43.4712 76.2229 44.7581C79.2126 46.045 81.1191 48.1855 81.9449 51.177V51.2409C81.9475 51.2295 81.951 51.2198 81.9536 51.2085C81.9563 51.2198 81.9598 51.2295 81.9624 51.2409V51.177C82.7873 48.1855 84.6947 46.045 87.6844 44.7581C84.6947 43.4712 82.7882 41.3307 81.9624 38.3393Z",
+  fill: "#F2BB91"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M49.3076 149.106C49.5096 148.924 49.8322 148.924 50.0342 149.106C50.2444 149.295 50.2443 149.609 50.0342 149.798L41.8711 157.145C41.6691 157.327 41.3465 157.327 41.1445 157.145C40.9344 156.956 40.9342 156.642 41.1445 156.453L49.3076 149.106ZM47.1309 154.494C47.8309 153.864 48.9601 153.864 49.6602 154.494C50.3686 155.131 50.3687 156.171 49.6602 156.809C48.9601 157.439 47.8309 157.439 47.1309 156.809C46.4223 156.171 46.4223 155.131 47.1309 154.494ZM48.9346 155.186C48.6384 154.919 48.1526 154.919 47.8564 155.186C47.5689 155.445 47.5688 155.858 47.8564 156.117C48.1526 156.383 48.6384 156.383 48.9346 156.117C49.2221 155.858 49.222 155.445 48.9346 155.186ZM41.5186 149.442C42.2186 148.812 43.3479 148.812 44.0479 149.442C44.7564 150.08 44.7564 151.121 44.0479 151.758C43.3478 152.388 42.2186 152.388 41.5186 151.758C40.81 151.121 40.81 150.08 41.5186 149.442ZM43.3223 150.134C43.0262 149.868 42.5403 149.868 42.2441 150.134C41.9564 150.393 41.9564 150.807 42.2441 151.066C42.5403 151.332 43.0261 151.332 43.3223 151.066C43.61 150.807 43.61 150.393 43.3223 150.134Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.276243"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M136.808 199.106C137.01 198.924 137.332 198.924 137.534 199.106C137.744 199.295 137.744 199.609 137.534 199.798L129.371 207.145C129.169 207.327 128.846 207.327 128.645 207.145C128.434 206.956 128.434 206.642 128.645 206.453L136.808 199.106ZM134.631 204.494C135.331 203.864 136.46 203.864 137.16 204.494C137.869 205.131 137.869 206.171 137.16 206.809C136.46 207.439 135.331 207.439 134.631 206.809C133.922 206.171 133.922 205.131 134.631 204.494ZM136.435 205.186C136.138 204.919 135.653 204.919 135.356 205.186C135.069 205.445 135.069 205.858 135.356 206.117C135.653 206.383 136.138 206.383 136.435 206.117C136.722 205.858 136.722 205.445 136.435 205.186ZM129.019 199.442C129.719 198.812 130.848 198.812 131.548 199.442C132.256 200.08 132.256 201.121 131.548 201.758C130.848 202.388 129.719 202.388 129.019 201.758C128.31 201.121 128.31 200.08 129.019 199.442ZM130.822 200.134C130.526 199.868 130.04 199.868 129.744 200.134C129.456 200.393 129.456 200.807 129.744 201.066C130.04 201.332 130.526 201.332 130.822 201.066C131.11 200.807 131.11 200.393 130.822 200.134Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.276243"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M147.872 44.6279C148.041 44.4584 148.317 44.4584 148.486 44.6279C148.655 44.7974 148.655 45.0717 148.486 45.2412L142.172 51.5557C142.002 51.725 141.728 51.725 141.558 51.5557C141.389 51.3861 141.389 51.1109 141.558 50.9414L147.872 44.6279ZM146.188 49.2578C146.743 48.703 147.642 48.703 148.197 49.2578C148.752 49.8126 148.752 50.7118 148.197 51.2666C147.642 51.8214 146.743 51.8214 146.188 51.2666C145.633 50.7118 145.633 49.8126 146.188 49.2578ZM147.584 49.8711C147.368 49.6553 147.017 49.6553 146.802 49.8711C146.586 50.0868 146.586 50.4376 146.802 50.6533C147.017 50.8691 147.368 50.8691 147.584 50.6533C147.8 50.4376 147.8 50.0868 147.584 49.8711ZM141.847 44.917C142.402 44.3622 143.301 44.3622 143.856 44.917C144.411 45.4718 144.411 46.371 143.856 46.9258C143.301 47.4805 142.402 47.4804 141.847 46.9258C141.293 46.371 141.293 45.4718 141.847 44.917ZM143.242 45.5303C143.026 45.3148 142.676 45.3146 142.461 45.5303C142.245 45.7459 142.245 46.0957 142.461 46.3115C142.676 46.5273 143.026 46.5273 143.242 46.3115C143.458 46.0958 143.458 45.746 143.242 45.5303Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.276243"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M104.824 204.819V204.853C105.322 206.447 106.47 207.587 108.272 208.272C106.47 208.958 105.321 210.098 104.824 211.691V211.725C104.822 211.719 104.82 211.714 104.819 211.708C104.817 211.714 104.815 211.719 104.813 211.725V211.691C104.316 210.098 103.167 208.958 101.366 208.272C103.167 207.587 104.316 206.447 104.813 204.853V204.819C104.815 204.825 104.817 204.831 104.819 204.837C104.82 204.831 104.822 204.825 104.824 204.819Z",
+  fill: "#F2BB91"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M170.333 116.525H81.4886V168.301C81.4886 172.916 85.0486 176.335 89.0397 176.335H162.782C166.773 176.335 170.333 172.916 170.333 168.301V116.525ZM143.996 91.7463V83.7126H107.825V91.7463C107.824 93.3501 106.49 94.65 104.842 94.65C103.194 94.65 101.859 93.3501 101.858 91.7463V83.7126H89.0397C85.0486 83.7126 81.4886 87.1311 81.4886 91.7463V110.714H170.333V91.7463C170.333 87.1311 166.773 83.7126 162.782 83.7126H149.963V91.7463C149.962 93.3501 148.628 94.65 146.98 94.65C145.332 94.65 143.997 93.3501 143.996 91.7463ZM176.3 168.301C176.3 175.766 170.427 182.142 162.782 182.142H89.0397C81.3947 182.142 75.5217 175.766 75.5217 168.301V91.7463C75.5217 84.2812 81.3947 77.9018 89.0397 77.9018H101.858V69.8715C101.858 68.2671 103.193 66.9678 104.842 66.9678C106.49 66.9678 107.825 68.2671 107.825 69.8715V77.9018H143.996V69.8715C143.996 68.2671 145.331 66.9678 146.98 66.9678C148.628 66.9678 149.963 68.2671 149.963 69.8715V77.9018H162.782C170.427 77.9018 176.3 84.2812 176.3 91.7463V168.301Z",
+  fill: "#519595"
+}), /*#__PURE__*/React$1.createElement("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M114.622 129.954C116.552 129.954 118.356 130.941 119.55 132.411L120.021 133.068L120.039 133.093L120.049 133.117C121.121 135.065 121.132 137.505 120.039 139.391L120.032 139.405C118.863 141.349 116.806 142.537 114.622 142.537C112.644 142.537 110.817 141.634 109.607 140.101L109.129 139.405L109.118 139.391L109.122 139.388C108.03 137.502 108.039 135.064 109.111 133.117L109.122 133.093L109.139 133.068C110.298 131.237 112.341 129.954 114.622 129.954ZM114.622 139.841C116.534 139.841 118.221 138.278 118.221 136.245C118.221 134.315 116.552 132.65 114.622 132.65C112.59 132.65 111.023 134.334 111.023 136.245C111.023 138.26 112.608 139.841 114.622 139.841Z",
+  fill: "#519595"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M138.966 130.358C139.839 129.795 141.08 129.89 141.831 130.639C142.581 131.389 142.675 132.628 142.112 133.5L141.831 133.848L112.137 163.503C111.28 164.359 109.782 164.359 108.925 163.503C108.067 162.646 108.067 161.151 108.925 160.294L138.618 130.639L138.966 130.358Z",
+  fill: "#519595"
+}), /*#__PURE__*/React$1.createElement("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M141.145 153.978C139.951 152.508 138.147 151.521 136.217 151.521C133.936 151.521 131.893 152.804 130.734 154.635L130.717 154.66L130.706 154.684C129.635 156.631 129.622 159.073 130.713 160.958L130.724 160.972C131.896 162.923 133.957 164.104 136.217 164.104C138.402 164.104 140.458 162.916 141.627 160.972L141.634 160.958C142.727 159.072 142.717 156.632 141.644 154.684L141.634 154.66L141.616 154.635L141.145 153.978ZM136.217 161.408C138.129 161.408 139.817 159.845 139.817 157.813C139.817 155.882 138.147 154.217 136.217 154.217C134.185 154.217 132.618 155.901 132.618 157.813C132.618 159.827 134.203 161.408 136.217 161.408Z",
+  fill: "#519595"
+}), /*#__PURE__*/React$1.createElement("circle", {
+  cx: "171.036",
+  cy: "176.668",
+  r: "22.3214",
+  fill: "#F3F7F7",
+  stroke: "#519595",
+  "stroke-width": "5.35714"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M185.4 175.847C185.735 176.182 185.924 176.637 185.924 177.111C185.924 177.585 185.736 178.04 185.4 178.375C185.065 178.711 184.61 178.899 184.136 178.899L173.279 178.897L173.281 189.754C173.273 190.223 173.081 190.67 172.746 190.999C172.412 191.327 171.962 191.511 171.493 191.511C171.024 191.511 170.574 191.327 170.239 190.998C169.905 190.67 169.713 190.223 169.704 189.754L169.703 178.896L158.845 178.894C158.608 178.898 158.372 178.855 158.151 178.767C157.931 178.679 157.73 178.548 157.56 178.381C157.391 178.215 157.256 178.016 157.164 177.797C157.073 177.578 157.025 177.343 157.025 177.106C157.025 176.868 157.072 176.633 157.164 176.414C157.256 176.195 157.39 175.997 157.56 175.83C157.729 175.664 157.93 175.533 158.15 175.445C158.371 175.357 158.607 175.314 158.844 175.318L169.702 175.32L169.7 164.463C169.708 163.994 169.9 163.547 170.234 163.218C170.569 162.89 171.019 162.705 171.488 162.706C171.957 162.706 172.407 162.89 172.741 163.219C173.076 163.547 173.268 163.994 173.276 164.463L173.278 175.321L184.136 175.323C184.61 175.323 185.065 175.511 185.4 175.847Z",
+  fill: "#519595"
+}));
+
+const Table = props => {
+  const {
+    width = '100%',
+    height = 'auto',
+    tableTitle = 'All Events',
+    data = [],
+    onButtonClick = () => {},
+    buttonColor = '#066768',
+    buttonHoverColor = '#388586'
+  } = props;
+  return /*#__PURE__*/React$1.createElement(TableWrapper, {
+    width: width,
+    height: height
+  }, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(Title, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, "No Events"), /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven\u2019t created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let\u2019s get started and create your first one!"), /*#__PURE__*/React$1.createElement(Button$1, {
+    height: "45px",
+    leftIcon: "Plus",
+    text: "New Event",
+    borderRadius: "12px",
+    backgroundColor: buttonColor,
+    hoverBackgroundColor: buttonHoverColor,
+    onClick: onButtonClick
+  })) : /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, data.length, " Events")));
+};
+
+export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, Heatmap, IconButton, Input, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, ModalWithOverlay, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, Table, ToggleSwitch, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
 //# sourceMappingURL=index.esm.js.map