sag_components 2.0.0-beta57 → 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"
@@ -9484,70 +9484,67 @@ const DropdownMain = styled.div`
 `;
 
 /* eslint-disable react/prop-types */
-const DropdownNew = _ref => {
-  let {
-    isMulti,
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    checkBoxColor,
-    xIconShow,
-    showLabelOnTop,
-    orderBy,
-    elementType
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement(DropdownMain, {
-    className: "DropdownMain",
-    width: width
-  }, isMulti ? /*#__PURE__*/React$1.createElement(DropdownMultiNew, {
-    className: "DropdownMultiNew",
-    placeHolder: placeHolder,
-    label: label,
-    labelEmptyValue: labelEmptyValue,
-    labelColor: labelColor,
-    checkBoxColor: checkBoxColor,
-    required: required,
-    options: options,
-    width: width,
-    disabled: disabled,
-    error: error,
-    errorMessage: errorMessage,
-    selectedValue: selectedValue,
-    xIconShow: xIconShow,
-    onChange: onChange,
-    showLabelOnTop: showLabelOnTop,
-    orderBy: orderBy,
-    elementType: elementType
-  }) : /*#__PURE__*/React$1.createElement(DropdownSingleNew, {
-    className: "DropdownSingleNew",
-    placeHolder: placeHolder,
-    label: label,
-    labelEmptyValue: labelEmptyValue,
-    labelColor: labelColor,
-    checkBoxColor: checkBoxColor,
-    required: required,
-    options: options,
-    width: width,
-    disabled: disabled,
-    error: error,
-    errorMessage: errorMessage,
-    selectedValue: selectedValue,
-    xIconShow: xIconShow,
-    onChange: onChange,
-    showLabelOnTop: showLabelOnTop,
-    orderBy: orderBy,
-    elementType: elementType
-  }));
-};
+const DropdownNew = ({
+  isMulti,
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  checkBoxColor,
+  xIconShow,
+  showLabelOnTop,
+  orderBy,
+  elementType
+}) => /*#__PURE__*/React$1.createElement(DropdownMain, {
+  className: "DropdownMain",
+  width: width
+}, isMulti ? /*#__PURE__*/React$1.createElement(DropdownMultiNew, {
+  className: "DropdownMultiNew",
+  placeHolder: placeHolder,
+  label: label,
+  labelEmptyValue: labelEmptyValue,
+  labelColor: labelColor,
+  checkBoxColor: checkBoxColor,
+  required: required,
+  options: options,
+  width: width,
+  disabled: disabled,
+  error: error,
+  errorMessage: errorMessage,
+  selectedValue: selectedValue,
+  xIconShow: xIconShow,
+  onChange: onChange,
+  showLabelOnTop: showLabelOnTop,
+  orderBy: orderBy,
+  elementType: elementType
+}) : /*#__PURE__*/React$1.createElement(DropdownSingleNew, {
+  className: "DropdownSingleNew",
+  placeHolder: placeHolder,
+  label: label,
+  labelEmptyValue: labelEmptyValue,
+  labelColor: labelColor,
+  checkBoxColor: checkBoxColor,
+  required: required,
+  options: options,
+  width: width,
+  disabled: disabled,
+  error: error,
+  errorMessage: errorMessage,
+  selectedValue: selectedValue,
+  xIconShow: xIconShow,
+  onChange: onChange,
+  showLabelOnTop: showLabelOnTop,
+  orderBy: orderBy,
+  elementType: elementType
+}));
 DropdownNew.propTypes = {
   placeHolder: PropTypes.string,
   label: PropTypes.string,
@@ -9720,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 */
 
@@ -9969,21 +9972,20 @@ const DatePicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const RangePicker = _ref => {
-  let {
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue
-  } = _ref;
+const RangePicker = ({
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState(''); // Added value state
@@ -10424,23 +10426,22 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10887,22 +10888,21 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11133,7 +11133,7 @@ const TooltipTextContainer = styled.div`
     cursor: pointer;
   }
 `;
-const TooltipText$1 = styled.div` 
+const TooltipText$2 = styled.div` 
   margin: 0; 
 `;
 
@@ -11303,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();
@@ -24128,22 +24128,21 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24541,24 +24540,23 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -25381,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;
@@ -25444,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, {
@@ -25456,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) : '')));
@@ -25518,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;
@@ -25526,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;
@@ -25655,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;
@@ -25709,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))))) : '');
@@ -25807,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)}                       
@@ -25864,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,
@@ -26097,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;
@@ -26300,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, {
@@ -26430,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;
@@ -26536,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`
@@ -26622,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;
@@ -26779,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"
@@ -27252,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;
@@ -27368,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",
@@ -27447,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;
@@ -27467,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;
@@ -27680,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",
@@ -27785,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;
@@ -27815,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
@@ -27877,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;
@@ -27922,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};
@@ -28032,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
@@ -28152,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()));
 };
@@ -28566,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;
@@ -28648,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 {
@@ -28731,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, {
@@ -28902,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;
@@ -28935,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;
@@ -29088,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
@@ -29161,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
@@ -29260,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;
@@ -29280,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;
@@ -29290,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;
 `;
@@ -29536,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)}`);
         }
@@ -29588,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"
@@ -30086,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;
@@ -30155,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"
@@ -31397,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 = []
 }) => {
-  // 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", {
@@ -31442,7 +31427,7 @@ const SeparatedLineBarChart = ({
       textAnchor: "middle",
       fill: "#212121",
       fontSize: 11,
-      fontWeight: "400",
+      fontWeight: 400,
       fontFamily: "Poppins"
     }, /*#__PURE__*/React$1.createElement("tspan", {
       x: 0,
@@ -31452,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: {
@@ -31506,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",
@@ -31534,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%"
@@ -31547,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",
@@ -31613,7 +31593,9 @@ const SeparatedLineBarChart = ({
 };
 
 function SingleChart({
-  lineChartData
+  lineChartData,
+  height = 450,
+  width = "100%"
 }) {
   const dataWithIndex = lineChartData?.map((item, index) => ({
     ...item,
@@ -31646,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: {
@@ -31700,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`
@@ -31946,8 +31918,67 @@ 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 = []
+  data
 }) {
   const processedData = data.map(item => {
     const parts = item.label.replace("Vendor Selling Event:", "").trim();
@@ -32010,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 {
@@ -32044,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, {
@@ -32068,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, {
@@ -32084,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
@@ -32146,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