sag_components 2.0.0-beta56 → 2.0.0-beta58

package/dist/index.esm.js

@@ -1933,7 +1933,7 @@ const TitleAndValueContainer$4 = styled.div`
   flex-direction: column;
   padding: 0 20px;
 `;
-const Title$d = styled.h4`
+const Title$f = styled.h4`
   font-weight: 400;
   font-size: 18px;
   margin: 0 0 8px;
@@ -2068,7 +2068,7 @@ const AvarageDelimiter = styled.div`
 `;
 
 /* Custom properties */
-const TooltipContainer$3 = styled.div`
+const TooltipContainer$4 = styled.div`
   --tooltip-text-color: black;
   --tooltip-background-color: white;
   --tooltip-margin: 40px;
@@ -2182,7 +2182,7 @@ const Tooltip$1 = props => {
     clearInterval(timeout);
     setActive(false);
   };
-  return /*#__PURE__*/React$1.createElement(TooltipContainer$3, null, /*#__PURE__*/React$1.createElement(TooltipWrapper$2, {
+  return /*#__PURE__*/React$1.createElement(TooltipContainer$4, null, /*#__PURE__*/React$1.createElement(TooltipWrapper$2, {
     onMouseEnter: showTip,
     onMouseLeave: hideTip
   }, children, active && /*#__PURE__*/React$1.createElement(TooltipTip$1, {
@@ -2413,7 +2413,7 @@ const PieChart = props => {
     width: width
   }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$4, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$d, {
+  }, /*#__PURE__*/React$1.createElement(Title$f, {
     className: "Title"
   }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$2, {
     className: "CurrencySignAndFormattedValueContainer"
@@ -9717,35 +9717,41 @@ const OptionsContainer$4 = styled.div`
   padding-top: 8px;
 `;
 
-const ChervronRightIcon = ({
-  width = "8",
-  height = "13",
-  fill = "#777575"
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 8 13",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.createElement("path", {
-  d: "M7.33984 5.78516C7.58594 6.05859 7.58594 6.46875 7.33984 6.71484L2.08984 11.9648C1.81641 12.2383 1.40625 12.2383 1.16016 11.9648C0.886719 11.7188 0.886719 11.3086 1.16016 11.0625L5.94531 6.27734L1.16016 1.46484C0.886719 1.21875 0.886719 0.808594 1.16016 0.5625C1.40625 0.289062 1.81641 0.289062 2.0625 0.5625L7.33984 5.78516Z",
-  fill: fill
-}));
+const ChervronRightIcon = _ref => {
+  let {
+    width = "8",
+    height = "13",
+    fill = "#777575"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 8 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M7.33984 5.78516C7.58594 6.05859 7.58594 6.46875 7.33984 6.71484L2.08984 11.9648C1.81641 12.2383 1.40625 12.2383 1.16016 11.9648C0.886719 11.7188 0.886719 11.3086 1.16016 11.0625L5.94531 6.27734L1.16016 1.46484C0.886719 1.21875 0.886719 0.808594 1.16016 0.5625C1.40625 0.289062 1.81641 0.289062 2.0625 0.5625L7.33984 5.78516Z",
+    fill: fill
+  }));
+};
 
-const ChervronLeftIcon = ({
-  width = 7,
-  height = 13,
-  fill = "#777575"
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 7 13",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.createElement("path", {
-  d: "M0.410156 5.78516L5.66016 0.5625C5.90625 0.289062 6.31641 0.289062 6.58984 0.5625C6.83594 0.808594 6.83594 1.21875 6.58984 1.46484L1.77734 6.25L6.5625 11.0625C6.83594 11.3086 6.83594 11.7188 6.5625 11.9648C6.31641 12.2383 5.90625 12.2383 5.66016 11.9648L0.410156 6.71484C0.136719 6.46875 0.136719 6.05859 0.410156 5.78516Z",
-  fill: fill
-}));
+const ChervronLeftIcon = _ref => {
+  let {
+    width = 7,
+    height = 13,
+    fill = "#777575"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 7 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M0.410156 5.78516L5.66016 0.5625C5.90625 0.289062 6.31641 0.289062 6.58984 0.5625C6.83594 0.808594 6.83594 1.21875 6.58984 1.46484L1.77734 6.25L6.5625 11.0625C6.83594 11.3086 6.83594 11.7188 6.5625 11.9648C6.31641 12.2383 5.90625 12.2383 5.66016 11.9648L0.410156 6.71484C0.136719 6.46875 0.136719 6.05859 0.410156 5.78516Z",
+    fill: fill
+  }));
+};
 
 /* eslint-disable react/prop-types */
 
@@ -11127,7 +11133,7 @@ const TooltipTextContainer = styled.div`
     cursor: pointer;
   }
 `;
-const TooltipText$1 = styled.div` 
+const TooltipText$2 = styled.div` 
   margin: 0; 
 `;
 
@@ -11241,7 +11247,7 @@ const FilterPanel = props => {
         inputSubType: 'year'
       } : ''),
       ...(newPeriodPickerSelectedValue[0]?.value === 'ytd' ? {
-        inputSubType: 'daterange'
+        inputSubType: 'ytd'
       } : ''),
       ...(newPeriodPickerSelectedValue[0]?.value === 'month' ? {
         inputSubType: 'month'
@@ -11264,7 +11270,7 @@ const FilterPanel = props => {
           inputSubType: 'year'
         } : ''),
         ...(newPeriodPickerSelectedValue[0]?.value === 'ytd' ? {
-          inputSubType: 'daterange'
+          inputSubType: 'ytd'
         } : ''),
         ...(newPeriodPickerSelectedValue[0]?.value === 'month' ? {
           inputSubType: 'month'
@@ -11297,8 +11303,8 @@ const FilterPanel = props => {
       fieldsData: newFieldsDataState
     });
   };
-  const getTooltipTextDates = () => /*#__PURE__*/React$1.createElement(TooltipTextContainer, null, /*#__PURE__*/React$1.createElement(TooltipText$1, null, "Dates can be selected"), /*#__PURE__*/React$1.createElement(TooltipText$1, null, "only after selecting"), /*#__PURE__*/React$1.createElement(TooltipText$1, null, "period types"));
-  const getTooltipTextGoButton = () => /*#__PURE__*/React$1.createElement(TooltipTextContainer, null, /*#__PURE__*/React$1.createElement(TooltipText$1, null, tooltipTextGoButton));
+  const getTooltipTextDates = () => /*#__PURE__*/React$1.createElement(TooltipTextContainer, null, /*#__PURE__*/React$1.createElement(TooltipText$2, null, "Dates can be selected"), /*#__PURE__*/React$1.createElement(TooltipText$2, null, "only after selecting"), /*#__PURE__*/React$1.createElement(TooltipText$2, null, "period types"));
+  const getTooltipTextGoButton = () => /*#__PURE__*/React$1.createElement(TooltipTextContainer, null, /*#__PURE__*/React$1.createElement(TooltipText$2, null, tooltipTextGoButton));
   const getYearsArray = () => {
     const currentYear = moment().year();
     const previousYear = moment().subtract(1, 'years').year();
@@ -11454,7 +11460,7 @@ const FilterPanel = props => {
             const selectedValue = eventRangePicker && typeof eventRangePicker === 'string' ? `${eventRangePicker}` : undefined;
             const newFieldsDataState = FieldsDataState?.map(itemField => itemField.name === item.name ? {
               ...itemField,
-              inputSubType: 'daterange',
+              inputSubType: 'ytd',
               selectedValue: selectedValue ? `${selectedValue}` : undefined
             } : itemField);
             setFieldsDataState(newFieldsDataState);
@@ -11463,14 +11469,14 @@ const FilterPanel = props => {
               changedItem: {
                 name: item.name,
                 inputType: item.inputType,
-                inputSubType: 'daterange',
+                inputSubType: 'ytd',
                 selectedValue: selectedValue ? `${selectedValue}` : undefined
               }
             });
           },
           required: item.required,
           placeholder: "Select Date Range ...",
-          selectedValue: item.selectedValue || getYTDString(),
+          selectedValue: getYTDString(),
           disabled: true,
           width: "100%",
           height: "55px"
@@ -25373,7 +25379,7 @@ const TitleAndValueContainer$3 = styled.div`
   display: flex;
   flex-direction: column; 
 `;
-const Title$c = styled.h4`
+const Title$e = styled.h4`
   font-weight: 400;
   font-size: 20px;
   margin: 0;
@@ -25436,7 +25442,7 @@ const FormattedValue$3 = props => {
     width: width
   }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer$3, {
     className: "TitleAndValueContainer"
-  }, title ? /*#__PURE__*/React$1.createElement(Title$c, {
+  }, title ? /*#__PURE__*/React$1.createElement(Title$e, {
     className: "Title",
     width: width
   }, title) : '', showTopValue && /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$1, {
@@ -25448,7 +25454,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$c, {
+  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React$1.createElement(Title$e, {
     className: "Title",
     width: width
   }, subtitle) : '')));
@@ -25510,7 +25516,7 @@ const TooltipLabel$3 = styled.div`
   font-weight: 400;
   width: fit-content;
 `;
-const TooltipTitle$3 = styled.div`
+const TooltipTitle$4 = styled.div`
   color: #212121;
   font-size: 14px;
   font-weight: 600;
@@ -25518,7 +25524,7 @@ const TooltipTitle$3 = styled.div`
 const TitleAndValueContainer$2 = styled.div`
   padding: 0 1rem;
 `;
-const Title$b = styled.h5`
+const Title$d = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -25647,7 +25653,7 @@ const TitleAndIconContainer = styled.div`
   display: flex;
   align-items: center;
 `;
-const Title$a = styled.h4`
+const Title$c = styled.h4`
   font-weight: 400;
   font-size: 14px;
   line-height: 27px;
@@ -25701,7 +25707,7 @@ const PerformanceAnalyticsLegend = props => {
     color: item.iconColor
   }) : item.iconType === ICON_TYPE_LEGEND_LINE_ICON$2 ? /*#__PURE__*/React$1.createElement(LegendLineIcon, {
     color: item.iconColor
-  }) : '', /*#__PURE__*/React$1.createElement(Title$a, {
+  }) : '', /*#__PURE__*/React$1.createElement(Title$c, {
     id: "Title",
     width: width
   }, item.title))))) : '');
@@ -25799,7 +25805,7 @@ const BarChartsByWeeks = props => {
     let currentTooltipSecondValue = 0;
     if (payload[0].payload?.value) currentTooltipValue = payload[0].payload?.value;
     if (payload[0].payload?.secondValue) currentTooltipSecondValue = payload[0].payload?.secondValue;
-    return /*#__PURE__*/React$1.createElement(TooltipDiv$3, null, /*#__PURE__*/React$1.createElement(TooltipTitle$3, null, `${isTitleOriganal ? '' : 'Week: '}${week}`), /*#__PURE__*/React$1.createElement(TooltipLabel$3, null, `${tooltipTitle}             
+    return /*#__PURE__*/React$1.createElement(TooltipDiv$3, null, /*#__PURE__*/React$1.createElement(TooltipTitle$4, null, `${isTitleOriganal ? '' : 'Week: '}${week}`), /*#__PURE__*/React$1.createElement(TooltipLabel$3, null, `${tooltipTitle}             
             ${displayFormattedValue(currentTooltipValue)}                                       
           `), currentTooltipSecondValue ? /*#__PURE__*/React$1.createElement(TooltipLabel$3, null, `${tooltipSecondTitle}                        
             ${displayFormattedValue(currentTooltipSecondValue)}                       
@@ -25856,7 +25862,7 @@ const BarChartsByWeeks = props => {
     ref: controlsContainerRef
   }, /*#__PURE__*/React$1.createElement(Controls$6, {
     height: getControlsHeight()
-  }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$b, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
+  }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$d, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
     title: headerValueTopTitle,
     subtitle: headerValueBottomTitle,
     showTopValue: showHeaderTopValue,
@@ -26089,7 +26095,7 @@ const TitleAndValueContainer$1 = styled.div`
   flex-direction: column;
   padding: 0 1.25em; /* 20px → 1.25em */
 `;
-const Title$9 = styled.h4`
+const Title$b = styled.h4`
   font-weight: 500;
   font-size: ${props => props.titleFontSize || '1.125em'}; /* Default: 18px → 1.125em */
   margin: 0;
@@ -26292,7 +26298,7 @@ const TotalDoughnutChart = props => {
     width: width
   }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$1, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$9, {
+  }, /*#__PURE__*/React$1.createElement(Title$b, {
     className: "Title",
     fontSize: titleFontSize
   }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer, {
@@ -26422,7 +26428,7 @@ CustomTooltip.defaultProps = {
   isPercent: false
 };
 
-const TooltipContainer$2 = styled.div`
+const TooltipContainer$3 = styled.div`
   --tooltip-text-color: black;
   --tooltip-background-color: white;
   --tooltip-margin: 40px;
@@ -26528,7 +26534,7 @@ const Tooltip = props => {
     direction,
     content
   } = props;
-  return /*#__PURE__*/React$1.createElement(TooltipContainer$2, {
+  return /*#__PURE__*/React$1.createElement(TooltipContainer$3, {
     className: className,
     top: `${top}px`,
     left: `${left}px`
@@ -26614,7 +26620,7 @@ const TotalValue = styled.div`
     font-size: 20px;
   }
 `;
-const Title$8 = styled.h4`
+const Title$a = styled.h4`
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
@@ -26771,7 +26777,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$8, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
+  }, !hideTitle ? /*#__PURE__*/React$1.createElement(Title$a, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
     className: "TotalValue"
   }, currencySign && /*#__PURE__*/React$1.createElement(CurrencySign, {
     className: "CurrencySign"
@@ -27244,7 +27250,7 @@ const ItemContainer = styled.div`
   flex-direction: column;
   flex-wrap: wrap;
 `;
-const Title$7 = styled.h4`
+const Title$9 = styled.h4`
   font-size: 18px;
   font-weight: 500;
   margin: 0;
@@ -27360,7 +27366,7 @@ const SalesAndROI = props => {
     showBorderShadow: showBorderShadow
   }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer, {
     id: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$7, {
+  }, /*#__PURE__*/React$1.createElement(Title$9, {
     id: "Title"
   }, title), showBanner && /*#__PURE__*/React$1.createElement(OutBanner, {
     id: "OutBanner",
@@ -27439,7 +27445,7 @@ const ModalOverlay = styled.div`
   justify-content: center;
   align-items: center;
 `;
-const ModalContent = styled.div`  
+const ModalContent$1 = styled.div`  
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-size: 18px;
@@ -27459,7 +27465,7 @@ const TitleContainer$1 = styled.div`
   margin: 0;
   border-bottom: 1px solid #b1b1b1;
 `;
-const Title$6 = styled.p`
+const Title$8 = styled.p`
   font-weight: 400;
   font-size: 24px;
   margin: 0;
@@ -27672,14 +27678,14 @@ const PopupCharts = props => {
   }, IsPopupChartsOpen && /*#__PURE__*/React$1.createElement(ModalOverlay, {
     id: "ModalOverlay",
     className: "modal-overlay"
-  }, /*#__PURE__*/React$1.createElement(ModalContent, {
+  }, /*#__PURE__*/React$1.createElement(ModalContent$1, {
     id: "ModalContent",
     ref: divRef,
     className: "modal-content",
     height: height,
     width: width,
     onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/React$1.createElement(TitleContainer$1, null, /*#__PURE__*/React$1.createElement(Title$6, null, title), /*#__PURE__*/React$1.createElement(CloseXIconContainer, {
+  }, /*#__PURE__*/React$1.createElement(TitleContainer$1, null, /*#__PURE__*/React$1.createElement(Title$8, null, title), /*#__PURE__*/React$1.createElement(CloseXIconContainer, {
     onClick: e => closePopupCharts(e)
   }, /*#__PURE__*/React$1.createElement(CloseXIcon, null))), /*#__PURE__*/React$1.createElement(ChartsContainer, {
     id: "ChartsContainer",
@@ -27777,7 +27783,7 @@ const TopToggleListMainContainer = styled.div`
     padding: 0 24px;
     width: ${props => props.width};
 `;
-const Title$5 = styled.h4`
+const Title$7 = styled.h4`
     font-size: 14px;
     font-weight: 600;
     margin: 20px 0 12px;
@@ -27807,7 +27813,7 @@ const TopToggleList = props => {
   } = props;
   return /*#__PURE__*/React$1.createElement(TopToggleListMainContainer, {
     width: width
-  }, /*#__PURE__*/React$1.createElement(Title$5, null, title), /*#__PURE__*/React$1.createElement(ListContainer, {
+  }, /*#__PURE__*/React$1.createElement(Title$7, null, title), /*#__PURE__*/React$1.createElement(ListContainer, {
     height: height
   }, list.map(item => /*#__PURE__*/React$1.createElement(ListItem, {
     key: item.value
@@ -27869,7 +27875,7 @@ const TitleContainer = styled.div`
   justify-content: flex-start; 
   margin: 0 0 10px 0; 
 `;
-const Title$4 = styled.h3`
+const Title$6 = styled.h3`
   user-select: none;
   text-align: left;
   margin: 0;
@@ -27914,7 +27920,7 @@ const BarLabel = styled.span`
   font-weight: 400; 
   user-select: none;
 `;
-const TooltipContainer$1 = styled.div`
+const TooltipContainer$2 = styled.div`
   position: absolute;
 
   top: ${props => props.top};
@@ -28024,7 +28030,7 @@ const Heatmap = props => {
     if (tooltip && tooltipPosition && tooltip.label === `${item.label} - ${Math.round(item.value / totalValue * 100)}%`) {
       const top = `${tooltipPosition.y}px`;
       const left = `${tooltipPosition.x}px`;
-      return /*#__PURE__*/React$1.createElement(TooltipContainer$1, {
+      return /*#__PURE__*/React$1.createElement(TooltipContainer$2, {
         className: "TooltipContainer",
         top: top,
         left: left
@@ -28144,7 +28150,7 @@ const Heatmap = props => {
     className: "HeatmapWrapper"
   }, /*#__PURE__*/React$1.createElement(TitleContainer, {
     className: "TitleContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$4, {
+  }, /*#__PURE__*/React$1.createElement(Title$6, {
     className: "Title"
   }, title)), refreshRequired && renderBars(), !refreshRequired && renderBars(), renderLegend()));
 };
@@ -28558,12 +28564,12 @@ const TooltipLabel$1 = styled.div`
   font-weight: 400;
   width: fit-content;
 `;
-const TooltipTitle$2 = styled.div`
+const TooltipTitle$3 = styled.div`
   color: #212121;
   font-size: 14px;
   font-weight: 600;
 `;
-const Title$3 = styled.h5`
+const Title$5 = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -28640,7 +28646,7 @@ const BarChart = props => {
     if (!active || !payload || payload?.length === 0) return null;
     let currentTooltipValue = 0;
     if (payload[0].payload?.value) currentTooltipValue = payload[0].payload?.value;
-    return /*#__PURE__*/React$1.createElement(TooltipDiv$1, null, /*#__PURE__*/React$1.createElement(TooltipTitle$2, null, `${label}`), /*#__PURE__*/React$1.createElement(TooltipLabel$1, null, `${displayFormattedValue(currentTooltipValue, !!showCurrentCampaignStyle)}`));
+    return /*#__PURE__*/React$1.createElement(TooltipDiv$1, null, /*#__PURE__*/React$1.createElement(TooltipTitle$3, null, `${label}`), /*#__PURE__*/React$1.createElement(TooltipLabel$1, null, `${displayFormattedValue(currentTooltipValue, !!showCurrentCampaignStyle)}`));
   };
   const CustomizedTickBarChart = props => {
     const {
@@ -28723,7 +28729,7 @@ const BarChart = props => {
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React$1.createElement(Controls$3, null, /*#__PURE__*/React$1.createElement(Title$3, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, /*#__PURE__*/React$1.createElement(Controls$3, null, /*#__PURE__*/React$1.createElement(Title$5, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
     height: 400
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
@@ -28894,7 +28900,7 @@ const Controls$2 = styled.div`
   flex-direction: column;
   background-color: white;
 `;
-const Title$2 = styled.h5`
+const Title$4 = styled.h5`
   font-size: 18px;
   font-weight: 400;
   margin: 0 0 30px;
@@ -28927,7 +28933,7 @@ const TooltipLabel = styled.div`
   font-weight: 400;
   width: fit-content;
 `;
-const TooltipTitle$1 = styled.div`
+const TooltipTitle$2 = styled.div`
   color: #212121;
   font-size: 14px;
   font-weight: 600;
@@ -29080,7 +29086,7 @@ const DoubleBarSingleLine = props => {
     } else {
       `${currentTooltipValue.toFixed(1)}`;
     }
-    return /*#__PURE__*/React$1.createElement(TooltipDiv, null, /*#__PURE__*/React$1.createElement(TooltipTitle$1, null, `${label}`), payload.map((item, idx) => {
+    return /*#__PURE__*/React$1.createElement(TooltipDiv, null, /*#__PURE__*/React$1.createElement(TooltipTitle$2, null, `${label}`), payload.map((item, idx) => {
       const dataStateItem = dataState.find(state => state.key === item.dataKey);
       return /*#__PURE__*/React$1.createElement(TooltipLabel, {
         key: item.dataKey || idx
@@ -29153,7 +29159,7 @@ const DoubleBarSingleLine = props => {
     noDataText: noDataText
   }) : /*#__PURE__*/React$1.createElement(Controls$2, {
     className: "Controls"
-  }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
+  }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$4, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
     width: hasScroll ? `${data.length * 178}px` : 'auto'
   }, /*#__PURE__*/React$1.createElement(LineChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(LineChart, _extends({
     data: transformedData
@@ -29252,7 +29258,7 @@ const CheckboxGroupContainer = styled.div`
   height: 21px;   
   gap: 20px;
 `;
-const Title$1 = styled.h5`
+const Title$3 = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -29272,7 +29278,7 @@ const LegendIcon = styled.div`
   margin-right: 5px;
   background-color: ${props => props.color};
 `;
-const TooltipContainer = styled.div`
+const TooltipContainer$1 = styled.div`
   background: white;
   padding: 10px;
   border-radius: 5px;
@@ -29282,12 +29288,12 @@ const TooltipContainer = styled.div`
   font-weight: 500;
   font-size: 14px;
 `;
-const TooltipTitle = styled.p`
+const TooltipTitle$1 = styled.p`
   font-weight: 700;
   margin-top: 5px;
   margin-bottom: 5px;
 `;
-const TooltipText = styled.p`
+const TooltipText$1 = styled.p`
   margin-top: 5px;
   margin-bottom: 5px;
 `;
@@ -29528,10 +29534,10 @@ const AreaChart = props => {
       payload
     } = _ref3;
     if (active && payload && payload.length) {
-      return /*#__PURE__*/React$1.createElement(TooltipContainer, null, /*#__PURE__*/React$1.createElement(TooltipTitle, null, `${payload[0].payload.label}`), payload.map((data, index) => {
+      return /*#__PURE__*/React$1.createElement(TooltipContainer$1, null, /*#__PURE__*/React$1.createElement(TooltipTitle$1, null, `${payload[0].payload.label}`), payload.map((data, index) => {
         const chart = areaChartsState.find(chart => chart.key === data.dataKey);
         if (chart) {
-          return /*#__PURE__*/React$1.createElement(TooltipText, {
+          return /*#__PURE__*/React$1.createElement(TooltipText$1, {
             key: index
           }, `${chart.name}: ${displayFormattedValue(data.value, chart.isDollar)}`);
         }
@@ -29580,7 +29586,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$1, {
+  }, /*#__PURE__*/React$1.createElement(Title$3, {
     "data-testid": "title"
   }, title), /*#__PURE__*/React$1.createElement(CheckboxGroupContainer, {
     "data-testid": "checkbox-group-container"
@@ -30078,7 +30084,7 @@ const HeaderContainer$1 = styled.div`
   align-items: center;
   padding-bottom: 8px;
 `;
-const Title = styled.h3`
+const Title$2 = styled.h3`
   font-size: 18px;
   font-weight: 400;
   margin: 0;
@@ -30147,7 +30153,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, {
+  }, /*#__PURE__*/React$1.createElement(Title$2, {
     "data-testid": "title"
   }, title)), /*#__PURE__*/React$1.createElement(CategorySalesMainContainer, {
     "data-testid": "category-sales-main-container"
@@ -31389,42 +31395,29 @@ const BatteryChart = props => {
   }))))))), starText !== "" && /*#__PURE__*/React$1.createElement(StarText, null, starText));
 };
 
-// const originalData = [
-//   { label: "Vendor Selling Event: Week 34", inc_sales: 20000, inc_roi: 1.2 },
-//   { label: "Vendor Selling Event: Week 36", inc_sales: 10000, inc_roi: 1.2 },
-//   { label: "Vendor Selling Event: Week 38", inc_sales: 8000, inc_roi: 0.8 },
-//   { label: "Vendor Selling Event: Week 33", inc_sales: 12000, inc_roi: 1.1 },
-//   { label: "Vendor Selling Event: Week 29", inc_sales: 8000, inc_roi: 1.2 },
-//   { label: "Vendor Selling Event: Week 28", inc_sales: 8000, inc_roi: 0.7 },
-//   { label: "Vendor Selling Event: Week 35", inc_sales: 8000, inc_roi: 0.8 },
-//   { label: "Vendor Selling Event: Week 30", inc_sales: 9000, inc_roi: 1.1 },
-// ];
-
 const SeparatedLineBarChart = ({
-  barlineData
+  barlineData = []
 }) => {
-  // Sort the data by week number extracted from the label
-  const sortedData = barlineData?.sort((a, b) => {
-    const weekA = parseInt(a.label.match(/Week (\d+)/)[1], 10);
-    const weekB = parseInt(b.label.match(/Week (\d+)/)[1], 10);
-    return weekA - weekB;
+  const [startIndex, setStartIndex] = useState(0);
+  useState(6);
+  // Use simple data processing like in the working example
+  const processedData = barlineData.map(item => {
+    return {
+      ...item,
+      // Keep the full label for tooltip and filtering
+      shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
+    };
   });
-  const dataWithIndex = sortedData.map((item, index) => ({
-    ...item,
-    index,
-    shortLabel: item.label.replace("Vendor Selling Event: ", "Wk ")
-  }));
-  const CustomizedTick = ({
-    x,
-    y,
-    payload,
-    viewableIndices
-  }) => {
-    const label = dataWithIndex[payload.value]?.label ?? "";
+
+  // CustomTick component for the X-axis (similar to working example)
+  const CustomizedTick = props => {
+    const {
+      x,
+      y,
+      payload
+    } = props;
+    const label = payload.value;
     const parts = label.replace("Vendor Selling Event: ", "").split(" ");
-    if (!viewableIndices.includes(payload.value)) {
-      return null;
-    }
     return /*#__PURE__*/React$1.createElement("g", {
       transform: `translate(${x},${y})`
     }, /*#__PURE__*/React$1.createElement("text", {
@@ -31434,7 +31427,7 @@ const SeparatedLineBarChart = ({
       textAnchor: "middle",
       fill: "#212121",
       fontSize: 11,
-      fontWeight: "400",
+      fontWeight: 400,
       fontFamily: "Poppins"
     }, /*#__PURE__*/React$1.createElement("tspan", {
       x: 0,
@@ -31444,51 +31437,57 @@ const SeparatedLineBarChart = ({
       dy: 18
     }, "Event: ", parts.join(" "))));
   };
-  const CustomLabelListFilter = props => {
-    const {
-      viewableIndices,
-      dataKey,
-      position,
-      formatter,
-      fill,
-      fontSize,
-      fontWeight,
-      fontFamily
-    } = props;
-    return /*#__PURE__*/React$1.createElement(LabelList, {
-      dataKey: dataKey,
-      position: position,
-      formatter: (value, name, props) => {
-        if (!viewableIndices.includes(props.index)) {
-          return "";
-        }
-        return formatter ? formatter(value) : value;
-      },
-      fill: fill || "#212121",
-      fontSize: fontSize || 12,
-      fontWeight: fontWeight || "400",
-      fontFamily: fontFamily || "Poppins"
-    });
+
+  // Custom tooltip (similar to the working example)
+  const CustomTooltip = ({
+    active,
+    payload,
+    label
+  }) => {
+    if (!active || !payload || !payload.length) return null;
+
+    // Find the data item based on index
+    const data = payload[0]?.payload;
+    if (!data) return null;
+    return /*#__PURE__*/React$1.createElement("div", {
+      style: {
+        backgroundColor: "white",
+        padding: "10px",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+        fontFamily: "Poppins"
+      }
+    }, /*#__PURE__*/React$1.createElement("p", {
+      style: {
+        margin: "0 0 5px",
+        fontWeight: "bold"
+      }
+    }, "EVENT_NAME.DIM_EVENTS: ", data.label), /*#__PURE__*/React$1.createElement("p", {
+      style: {
+        margin: "0 0 5px"
+      }
+    }, "EVENT_DESCRIPTION.DIM_EVENTS: ", data.description || "N/A"), /*#__PURE__*/React$1.createElement("p", {
+      style: {
+        margin: "0 0 5px"
+      }
+    }, "INC Sales: ", data.inc_sales?.toLocaleString()), /*#__PURE__*/React$1.createElement("p", {
+      style: {
+        margin: "0"
+      }
+    }, "INC Sales ROI: ", data.inc_roi?.toFixed(1)));
   };
+
+  // Chart margins (same as in both examples)
   const chartMargins = {
-    top: 15,
-    right: 40,
+    top: 30,
+    right: 30,
     left: 20,
-    bottom: 40
+    bottom: 60
   };
-  const [viewWindow, setViewWindow] = useState({
-    startIndex: 0,
-    endIndex: dataWithIndex.length - 1
-  });
-  const viewableIndices = [];
-  for (let i = viewWindow.startIndex; i <= viewWindow.endIndex; i++) {
-    viewableIndices.push(i);
-  }
-  dataWithIndex.filter(item => viewableIndices.includes(item.index));
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
       width: "100%",
-      height: 700
+      height: "700px"
     }
   }, /*#__PURE__*/React$1.createElement("div", {
     style: {
@@ -31498,24 +31497,21 @@ const SeparatedLineBarChart = ({
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React$1.createElement(LineChart, {
-    data: dataWithIndex,
+    data: processedData,
     margin: chartMargins
   }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
   }), /*#__PURE__*/React$1.createElement(XAxis, {
-    dataKey: "index",
-    type: "number",
-    domain: ['dataMin', 'dataMax'],
-    padding: {
-      left: 20,
-      right: 20
-    },
+    dataKey: "label",
+    tick: false,
     hide: true
   }), /*#__PURE__*/React$1.createElement(YAxis, {
     domain: [0, 2],
     hide: true
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null), /*#__PURE__*/React$1.createElement(Line, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
+  }), /*#__PURE__*/React$1.createElement(Line, {
     type: "monotone",
     dataKey: "inc_roi",
     stroke: "#F8CD00",
@@ -31526,11 +31522,14 @@ const SeparatedLineBarChart = ({
     },
     activeDot: false,
     name: "INC Sales ROI"
-  }, /*#__PURE__*/React$1.createElement(CustomLabelListFilter, {
+  }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "inc_roi",
     position: "top",
     formatter: value => value.toFixed(1),
-    viewableIndices: viewableIndices
+    fill: "#212121",
+    fontSize: 12,
+    fontWeight: "400",
+    fontFamily: "Poppins"
   }))))), /*#__PURE__*/React$1.createElement("div", {
     style: {
       height: "60%"
@@ -31539,59 +31538,48 @@ const SeparatedLineBarChart = ({
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React$1.createElement(ComposedChart, {
-    data: dataWithIndex,
+    data: processedData,
     margin: chartMargins
   }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
   }), /*#__PURE__*/React$1.createElement(XAxis, {
-    dataKey: "index",
-    type: "number",
-    domain: ['dataMin', 'dataMax'],
-    padding: {
-      left: 20,
-      right: 20
-    },
-    tick: props => /*#__PURE__*/React$1.createElement(CustomizedTick, _extends({}, props, {
-      viewableIndices: viewableIndices
-    })),
+    dataKey: "label",
+    tick: /*#__PURE__*/React$1.createElement(CustomizedTick, null),
     interval: 0,
     height: 60,
-    tickLine: false,
-    ticks: dataWithIndex.map(item => item.index)
+    tickLine: false
   }), /*#__PURE__*/React$1.createElement(YAxis, {
     tickFormatter: v => `${v / 1000}k`,
     hide: true
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null), /*#__PURE__*/React$1.createElement(Bar, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
+  }), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "inc_sales",
     fill: "#CCDCDD",
-    gap: "4px",
+    gap: 4,
     borderRadius: [4, 4, 0, 8],
     barSize: 40,
     name: "INC Sales"
-  }, /*#__PURE__*/React$1.createElement(CustomLabelListFilter, {
+  }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "inc_sales",
     position: "top",
     formatter: value => `${value / 1000}k`,
-    viewableIndices: viewableIndices
+    fill: "#212121",
+    fontSize: 12,
+    fontWeight: "400",
+    fontFamily: "Poppins"
   })), /*#__PURE__*/React$1.createElement(Brush, {
-    dataKey: "index",
+    dataKey: "label",
     height: 30,
     stroke: "#212121",
-    startIndex: viewWindow.startIndex,
-    endIndex: viewWindow.endIndex,
-    onChange: e => {
-      setViewWindow({
-        startIndex: e.startIndex ?? 0,
-        endIndex: e.endIndex ?? dataWithIndex.length - 1
-      });
-    },
-    travellerWidth: 12
-  })), /*#__PURE__*/React$1.createElement("div", {
-    style: {
-      marginTop: "-28px"
-    }
-  }, /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    startIndex: startIndex,
+    endIndex: Math.min(4, processedData.length - 1),
+    onChange: onChange,
+    y: 330,
+    travellerWidth: 10,
+    tickFormatter: (value, index) => index + 1
+  })), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
     legendData: [{
       iconColor: "#CCDCDD",
       iconType: "Square",
@@ -31605,7 +31593,9 @@ const SeparatedLineBarChart = ({
 };
 
 function SingleChart({
-  lineChartData
+  lineChartData,
+  height = 450,
+  width = "100%"
 }) {
   const dataWithIndex = lineChartData?.map((item, index) => ({
     ...item,
@@ -31638,20 +31628,15 @@ function SingleChart({
       dy: 18
     }, "Event: ", parts.join(" "))));
   };
-  const [startIndex, setStartIndex] = useState(0);
-  const [endIndex, setEndIndex] = useState(dataWithIndex?.length - 1);
+  useState(0);
+  useState(dataWithIndex?.length - 1);
   return /*#__PURE__*/React$1.createElement("div", {
     style: {
-      width: "100%",
-      height: 600
-    }
-  }, /*#__PURE__*/React$1.createElement("div", {
-    style: {
-      height: "100%"
+      width: "100%"
     }
   }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    width: width,
+    height: height
   }, /*#__PURE__*/React$1.createElement(ComposedChart, {
     data: dataWithIndex,
     margin: {
@@ -31692,23 +31677,18 @@ function SingleChart({
     fontWeight: "400",
     fontFamily: "Poppins"
   })), /*#__PURE__*/React$1.createElement(Brush, {
-    dataKey: "index",
     height: 30,
-    stroke: "#212121",
-    startIndex: startIndex,
-    endIndex: endIndex,
-    onChange: e => {
-      setStartIndex(e.startIndex ?? 0);
-      setEndIndex(e.endIndex ?? dataWithIndex?.length - 1);
-    },
-    travellerWidth: 12
+    travellerWidth: 10,
+    startIndex: 0,
+    endIndex: 5,
+    y: 380
   })), /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
     legendData: [{
       iconColor: "#CCDCDD",
       iconType: "Square",
       title: "INC Units"
     }]
-  }))));
+  })));
 }
 
 styled.div`
@@ -31938,6 +31918,65 @@ SegmentedButton.defaultProps = {
   onClick: () => {}
 };
 
+const Container = styled.div`
+  width: ${props => props.width};
+  height: ${props => props.height};
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  #Segment {
+    width: auto;
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: "Poppins"  
+    }
+`;
+const Title$1 = styled.h2`
+  color: #212121;
+  font-family: "Poppins";
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin: 0 0 16px 0;
+`;
+styled.div`
+  font-family: sans-serif;
+  text-align: center;
+`;
+styled.div`
+  height: 25%;
+`;
+styled.div`
+  height: 75%;
+`;
+styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+`;
+const TooltipContainer = styled.div`
+background: white;
+padding: 10px;
+border-radius: 5px;
+box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
+border: 1px solid #ddd;
+font-family: Poppins, sans-serif;
+font-weight: 500;
+font-size: 14px;
+`;
+const TooltipTitle = styled.p`
+font-weight: 700;
+margin-top: 5px;
+margin-bottom: 5px;
+`;
+const TooltipText = styled.p`
+margin-top: 5px;
+margin-bottom: 5px;
+`;
+
 function InnerBarChart({
   data
 }) {
@@ -32002,9 +32041,8 @@ function InnerBarChart({
   }) => {
     if (!active || !payload || !payload.length) return null;
     const data = payload[0].payload;
-    return /*#__PURE__*/React$1.createElement("div", {
-      className: "bg-white border border-gray-300 p-2 rounded-lg text-sm"
-    }, /*#__PURE__*/React$1.createElement("strong", null, data.label), /*#__PURE__*/React$1.createElement("div", null, "Actual: ", format(data.actual)), /*#__PURE__*/React$1.createElement("div", null, "Total: ", format(data.total)));
+    const repeaterPercentage = (data.actual / data.total * 100).toFixed(1);
+    return /*#__PURE__*/React$1.createElement(TooltipContainer, null, /*#__PURE__*/React$1.createElement(TooltipTitle, null, `${data.label}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `${data.description}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `New Shoppers: ${format(data.total)}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `Repeaters: ${format(data.actual)}`), /*#__PURE__*/React$1.createElement(TooltipText, null, `% Repeaters: ${repeaterPercentage}%`));
   };
   const CustomizedTick = props => {
     const {
@@ -32036,9 +32074,7 @@ function InnerBarChart({
   };
   return /*#__PURE__*/React$1.createElement("div", {
     className: "w-full"
-  }, /*#__PURE__*/React$1.createElement("h3", {
-    className: "text-lg font-medium mb-4 text-center"
-  }, "Vendor Selling Events Comparison"), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
     height: 450
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
@@ -32060,7 +32096,8 @@ function InnerBarChart({
   }), /*#__PURE__*/React$1.createElement(YAxis, {
     type: "number",
     domain: [0, "dataMax + 2000"],
-    tickFormatter: format
+    tickFormatter: format,
+    hide: true
   }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
   }), /*#__PURE__*/React$1.createElement(Brush, {
@@ -32076,51 +32113,22 @@ function InnerBarChart({
   }))));
 }
 
-const Container = styled.div`
-  width: ${props => props.width};
-  height: ${props => props.height};
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  #Segment {
-    width: auto;
-    white-space: nowrap;
-    font-size: 14px;
-    font-weight: 500;
-    font-family: "Poppins"  
-    }
-`;
-styled.div`
-  font-family: sans-serif;
-  text-align: center;
-`;
-styled.div`
-  height: 25%;
-`;
-styled.div`
-  height: 75%;
-`;
-styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-`;
-
 const BrushChart = props => {
   const {
     width,
     height,
     data,
     barlineData,
-    lineChartData
+    lineChartData,
+    linearData,
+    title
   } = props;
   const segmentedbuttonOptions = ["New Shoppers & Repeaters", "INC Sales & ROI", "INC Units", "Basket Lift"];
   const [selectedOption, setSelectedOption] = useState(segmentedbuttonOptions[0]);
   return /*#__PURE__*/React$1.createElement(Container, {
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(SegmentedButton, {
+  }, /*#__PURE__*/React$1.createElement(Title$1, null, title), /*#__PURE__*/React$1.createElement(SegmentedButton, {
     gap: "8px",
     options: segmentedbuttonOptions.map(value => ({
       value
@@ -32138,9 +32146,301 @@ const BrushChart = props => {
   }), selectedOption === "INC Units" && /*#__PURE__*/React$1.createElement(SingleChart, {
     lineChartData: lineChartData
   }), selectedOption === "Basket Lift" && /*#__PURE__*/React$1.createElement(SingleChart, {
-    lineChartData: lineChartData
+    lineChartData: linearData
   }));
 };
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Button, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts };
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+`;
+const ModalContent = styled.div`
+  position: absolute;
+  width: 69%;
+  height: 100%;
+  padding: 8rem 0 4rem;
+  box-sizing: border-box;
+  margin: 0 auto;
+  font-family: 'Poppins', sans-serif;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    max-width: 940px;
+    padding: 1rem 0 3rem;
+  }
+`;
+const Header = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4rem;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+`;
+const CloseButton = styled.button`
+  position: absolute;
+  top: -10px;
+  right: 0px;
+  background: transparent;
+  border: none;
+  color: ${props => props.$navcolor || "#fff"};
+  font-size: 1.5rem;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  @media (max-width: 768px) {
+    position: static;
+    align-self: flex-end;
+  }
+`;
+const Title = styled.h2`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  top: -10px;
+  color: ${props => props.$titleColor || "#fff"};
+  font-size: 1.25rem;
+  margin: 0;
+  font-feature-settings: "liga" off;
+  font-family: 'Poppins', sans-serif;
+  font-size: 23.528px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+
+  @media (max-width: 768px) {
+    position: static;
+    align-self: flex-start;
+  }
+`;
+styled.span`
+  font-size: 1.5rem;
+  margin-right: 0.5rem;
+  color: ${props => props.$iconcolor || "#fff"};
+`;
+const CarouselContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: 75%;
+  overflow: visible;
+  margin: 0 auto;
+`;
+const VisibleCardsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .prev-card,
+  .next-card {
+    opacity: 0.3;
+  }
+
+  .prev-card {
+    transform: translateX(-50%) scale(0.75);
+    opacity: 0.3;
+  }
+
+  .active-card {
+    transform: translateX(0) scale(1);
+    opacity: 1;
+    z-index: 2;
+  }
+
+  .next-card {
+    transform: translateX(50%) scale(0.75);
+    opacity: 0.3;
+  }
+
+  .hidden-card {
+    display: none;
+  }
+`;
+const Card = styled.div`
+  position: absolute;
+  width: 41%;
+  height: 90%;
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 2rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
+
+  /* 🎯 תיקון: טרנזישן אחיד לכל שינויי תזוזה/שקיפות */
+  transition: transform 0.4s ease-in-out, left 0.4s ease-in-out,
+    right 0.4s ease-in-out, opacity 0.4s ease-in-out;
+
+  @media (max-width: 768px) {
+    width: 280px;
+    height: 250px;
+    padding: 1.5rem;
+  }
+`;
+const NavButton = styled.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1000;
+  color: ${props => props.$navcolor || "#fff"};
+  font-size: 2.5rem;
+  cursor: pointer;
+  user-select: none;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.prev {
+    left: 0;
+  }
+
+  &.next {
+    right: 0;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+const Pagination = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+  position: relative;
+`;
+const Dot = styled.button`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: transparent;
+  opacity: 1;
+  margin: 4px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  padding: 0;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    background: ${props => props.active ? "#fff" : "transparent"};
+    border-radius: 50%;
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const InsightsCarousel = _ref => {
+  let {
+    children,
+    onClose,
+    title = "Insights:",
+    icon = /*#__PURE__*/React$1.createElement(LampIcon, null),
+    titleColor = "#fff",
+    iconColor = "#fff",
+    navColor = "#fff"
+  } = _ref;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const containerRef = useRef(null);
+  const childrenArray = React$1.Children.toArray(children);
+  const totalChildren = childrenArray.length;
+  const goToSlide = index => {
+    let normalizedIndex = index;
+    if (index < 0) normalizedIndex = totalChildren - 1;
+    if (index >= totalChildren) normalizedIndex = 0;
+    setCurrentIndex(normalizedIndex);
+  };
+  const goToPrev = () => {
+    goToSlide(currentIndex - 1);
+  };
+  const goToNext = () => {
+    goToSlide(currentIndex + 1);
+  };
+  const prevIndex = (currentIndex - 1 + totalChildren) % totalChildren;
+  const nextIndex = (currentIndex + 1) % totalChildren;
+  return /*#__PURE__*/React$1.createElement(Overlay, null, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header, null, /*#__PURE__*/React$1.createElement(Title, {
+    $titleColor: titleColor
+  }, /*#__PURE__*/React$1.cloneElement(icon, {
+    fill: iconColor
+  }), title), /*#__PURE__*/React$1.createElement(CloseButton, {
+    onClick: () => onClose?.({
+      label: "closeCrusel"
+    }),
+    "aria-label": "Close insights overlay",
+    $navColor: navColor
+  }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+    fill: navColor,
+    width: 18.82,
+    height: 18.82
+  }))), /*#__PURE__*/React$1.createElement(CarouselContainer, {
+    ref: containerRef
+  }, totalChildren > 1 && /*#__PURE__*/React$1.createElement(NavButton, {
+    className: "prev",
+    onClick: goToPrev,
+    $navColor: navColor
+  }, /*#__PURE__*/React$1.createElement(ChervronLeftIcon, {
+    fill: navColor,
+    width: 41,
+    height: 42
+  })), /*#__PURE__*/React$1.createElement(VisibleCardsContainer, null, childrenArray.map((child, index) => {
+    let className = "hidden-card";
+    if (totalChildren === 1) {
+      className = "active-card";
+    } else {
+      if (index === prevIndex) className = "prev-card";
+      if (index === currentIndex) className = "active-card";
+      if (index === nextIndex) className = "next-card";
+    }
+    return /*#__PURE__*/React$1.createElement(Card, {
+      key: index,
+      className: className
+    }, child);
+  })), totalChildren > 1 && /*#__PURE__*/React$1.createElement(NavButton, {
+    className: "next",
+    onClick: goToNext,
+    $navColor: navColor
+  }, /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
+    fill: navColor,
+    width: 41,
+    height: 42
+  }))), /*#__PURE__*/React$1.createElement(Pagination, null, childrenArray.map((_, index) => /*#__PURE__*/React$1.createElement(Dot, {
+    key: index,
+    active: index === currentIndex,
+    onClick: () => goToSlide(index),
+    "aria-label": `Go to slide ${index + 1}`
+  })))));
+};
+
+export { AreaChart, BannerEventBoxList, BarChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Button, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts };
 //# sourceMappingURL=index.esm.js.map