sag_components 2.0.0-beta51 → 2.0.0-beta52

package/dist/index.esm.js

@@ -3470,50 +3470,240 @@ const LinnerDataBox = props => {
   }))));
 };
 
-const LampIcon = _ref => {
-  let {
-    // eslint-disable-next-line react/prop-types
-    width = '23',
-    // eslint-disable-next-line react/prop-types
-    height = '19',
-    // eslint-disable-next-line react/prop-types
-    fill = '#229E38'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
+const SagIconButtonWrapper = styled.button`
+  height: ${props => props.height};
+  font-size: 14px;
+  font-weight: 400;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 18px;
+  white-space: nowrap;
+  color: ${props => props.color};
+  border-radius: 8px;
+  border: 1px solid ${props => props.color};
+  background: ${props => props.backgroundColor ? props.backgroundColor : 'transparent'}; 
+  transition: box-shadow 0.3s ease;
+  &:hover, &:focus {
+    cursor: pointer;
+    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
+  }
+`;
+const SpanText$1 = styled.span`
+`;
+
+const SagIconButton = props => {
+  const {
+    iconName,
+    color,
+    backgroundColor,
+    activeColor,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    openState,
+    onButtonClick,
+    className
+  } = props;
+  const [activeState, setActiveState] = useState(openState);
+  const onClickHandler = event => {
+    onButtonClick(event);
+    setActiveState(prevState => !prevState);
+  };
+  const getIcon = icon => {
+    switch (icon.toLowerCase()) {
+      case 'filter':
+        return /*#__PURE__*/React$1.createElement(FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'options':
+        return /*#__PURE__*/React$1.createElement(OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'download':
+        return /*#__PURE__*/React$1.createElement(DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'document':
+        return /*#__PURE__*/React$1.createElement(DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'fly':
+        return /*#__PURE__*/React$1.createElement(FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'bell':
+        return /*#__PURE__*/React$1.createElement(BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'maintenance':
+        return /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'exit':
+        return /*#__PURE__*/React$1.createElement(ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'eye':
+        return /*#__PURE__*/React$1.createElement(EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      default:
+        return /*#__PURE__*/React$1.createElement(EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+    }
+  };
+  return /*#__PURE__*/React$1.createElement(SagIconButtonWrapper, {
+    className: className,
     height: height,
-    viewBox: "0 0 23 19",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M2.42578 0.390625L4.11328 1.51562C4.5 1.79688 4.60547 2.32422 4.35938 2.71094C4.07812 3.09766 3.55078 3.20312 3.16406 2.92188L1.47656 1.79688C1.08984 1.55078 0.984375 1.02344 1.26562 0.636719C1.51172 0.25 2.03906 0.144531 2.42578 0.390625ZM20.9883 1.79688L19.3008 2.92188C18.9141 3.20312 18.3867 3.09766 18.1406 2.71094C17.8594 2.32422 17.9648 1.79688 18.3516 1.51562L20.0391 0.390625C20.4258 0.144531 20.9531 0.25 21.2344 0.636719C21.4805 1.02344 21.375 1.55078 20.9883 1.79688ZM0.84375 5.875H3.09375C3.55078 5.875 3.9375 6.26172 3.9375 6.71875C3.9375 7.21094 3.55078 7.5625 3.09375 7.5625H0.84375C0.351562 7.5625 0 7.21094 0 6.71875C0 6.26172 0.351562 5.875 0.84375 5.875ZM19.4062 5.875H21.6562C22.1133 5.875 22.5 6.26172 22.5 6.71875C22.5 7.21094 22.1133 7.5625 21.6562 7.5625H19.4062C18.9141 7.5625 18.5625 7.21094 18.5625 6.71875C18.5625 6.26172 18.9141 5.875 19.4062 5.875ZM4.11328 11.9219L2.42578 13.0469C2.03906 13.3281 1.51172 13.2227 1.26562 12.8359C0.984375 12.4492 1.08984 11.9219 1.47656 11.6406L3.16406 10.5156C3.55078 10.2695 4.07812 10.375 4.35938 10.7617C4.60547 11.1484 4.5 11.6758 4.11328 11.9219ZM19.3008 10.5508L20.9883 11.6758C21.375 11.9219 21.4805 12.4492 21.2344 12.8359C20.9531 13.2227 20.4258 13.3281 20.0391 13.082L18.3516 11.957C17.9648 11.6758 17.8594 11.1484 18.1406 10.7617C18.3867 10.375 18.9141 10.2695 19.3008 10.5508ZM15.75 6.4375C15.75 3.97656 13.7109 1.9375 11.25 1.9375C8.75391 1.9375 6.75 3.97656 6.75 6.4375C6.75 7.42188 7.03125 8.30078 7.52344 9.00391C7.66406 9.21484 7.80469 9.42578 7.98047 9.63672C8.4375 10.2695 8.96484 11.0078 9.38672 11.7461C9.73828 12.4141 9.94922 13.1172 10.0195 13.75H8.33203C8.22656 13.3281 8.12109 12.9414 7.91016 12.5547C7.55859 11.9219 7.13672 11.3242 6.67969 10.7266C6.50391 10.4805 6.32812 10.2344 6.15234 9.98828C5.44922 8.96875 5.0625 7.77344 5.0625 6.4375C5.0625 3.02734 7.80469 0.25 11.25 0.25C14.6602 0.25 17.4375 3.02734 17.4375 6.4375C17.4375 7.77344 17.0156 8.96875 16.3125 9.98828C16.1367 10.2344 15.9609 10.4805 15.7852 10.7266C15.3633 11.3242 14.9062 11.9219 14.5547 12.5547C14.3438 12.9414 14.2383 13.3281 14.168 13.75H12.4453C12.5508 13.1172 12.7266 12.4141 13.0781 11.7461C13.5 11.0078 14.0273 10.2695 14.4844 9.63672C14.6602 9.42578 14.8008 9.21484 14.9414 9.00391C15.4336 8.30078 15.75 7.42188 15.75 6.4375ZM9.5625 6.4375C9.5625 6.75391 9.28125 7 9 7C8.68359 7 8.4375 6.75391 8.4375 6.4375C8.4375 4.89062 9.66797 3.625 11.25 3.625C11.5312 3.625 11.8125 3.90625 11.8125 4.1875C11.8125 4.50391 11.5312 4.75 11.25 4.75C10.3008 4.75 9.5625 5.52344 9.5625 6.4375ZM14.0625 15.4375C14.0625 17.0195 12.7969 18.25 11.25 18.25C9.66797 18.25 8.4375 17.0195 8.4375 15.4375V14.875H14.0625V15.4375Z",
-    fill: fill
-  }));
+    color: activeState ? activeColor : color,
+    backgroundColor: backgroundColor,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, getIcon(iconName), buttonText && /*#__PURE__*/React$1.createElement(SpanText$1, null, buttonText));
+};
+SagIconButton.propTypes = {
+  className: PropTypes.string,
+  iconName: PropTypes.string,
+  buttonText: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  activeColor: PropTypes.string,
+  iconHeight: PropTypes.number,
+  iconWidth: PropTypes.number,
+  openState: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onButtonClick: PropTypes.func
+};
+SagIconButton.defaultProps = {
+  className: '',
+  iconName: 'filter',
+  buttonText: 'Filter',
+  height: '40px',
+  color: '#212121',
+  activeColor: '#229E38',
+  backgroundColor: 'transparent',
+  // '#E8F5EB',
+  iconHeight: 12,
+  iconWidth: 12,
+  openState: false,
+  disabled: false,
+  onButtonClick: () => {}
 };
 
-const ExportIcon = _ref => {
-  let {
-    width = '14',
-    height = '15',
-    color = '#212121'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
+const TextFieldContainer = styled.div`
+    position: relative;
+    width: ${props => props.width};
+    > svg {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 10px;
+    
+    }
+`;
+const TextFieldInput = styled.input`
+  width: 100%;
+  height: ${props => props.height};
+  font-size: 14px;
+  font-weight: 400;
+  padding: 6px 16px;
+  border-radius: 8px;
+  border: 1px solid #B1B1B1;
+  background: transparent;
+  text-indent: 14px;
+  &:hover, 
+  &:focus {
+    border: 1px solid #212121;
+  }
+  &::placeholder {
+    color: #B1B1B1;
+  }
+`;
+
+const SearchIcon = ({
+  width = '13',
+  height = '13',
+  color = '#212121'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 13 13",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z",
+  fill: color
+}));
+
+const SearchInput = props => {
+  const {
+    placeholder,
+    onTyping,
+    width,
+    height,
+    className
+  } = props;
+  const handleInputChange = e => {
+    onTyping(e);
+  };
+  return /*#__PURE__*/React$1.createElement(TextFieldContainer, {
+    className: className,
+    width: width
+  }, /*#__PURE__*/React$1.createElement(TextFieldInput, {
+    type: "search",
     height: height,
-    viewBox: "0 0 14 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M8.3125 0.90625C8.3125 0.550781 8.58594 0.25 8.96875 0.25H13.3164C13.6992 0.25 13.9727 0.550781 13.9727 0.90625V5.28125C13.9727 5.66406 13.6992 5.9375 13.3164 5.9375C12.9609 5.9375 12.6602 5.66406 12.6602 5.28125V2.49219L6.5625 8.58984C6.31641 8.86328 5.90625 8.86328 5.66016 8.58984C5.38672 8.34375 5.38672 7.93359 5.66016 7.66016L11.7578 1.5625H8.96875C8.58594 1.5625 8.3125 1.28906 8.3125 0.90625ZM1.96875 1.125H5.46875C5.82422 1.125 6.125 1.42578 6.125 1.78125C6.125 2.16406 5.82422 2.4375 5.46875 2.4375H1.96875C1.58594 2.4375 1.3125 2.73828 1.3125 3.09375V12.2812C1.3125 12.6641 1.58594 12.9375 1.96875 12.9375H11.1562C11.5117 12.9375 11.8125 12.6641 11.8125 12.2812V8.78125C11.8125 8.42578 12.0859 8.125 12.4688 8.125C12.8242 8.125 13.125 8.42578 13.125 8.78125V12.2812C13.125 13.375 12.2227 14.25 11.1562 14.25H1.96875C0.875 14.25 0 13.375 0 12.2812V3.09375C0 2.02734 0.875 1.125 1.96875 1.125Z",
-    fill: color
-  }));
+    placeholder: placeholder,
+    onChange: handleInputChange
+  }), /*#__PURE__*/React$1.createElement(SearchIcon, null));
+};
+SearchInput.propTypes = {
+  placeholder: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  onTyping: PropTypes.func,
+  className: PropTypes.string
+};
+SearchInput.defaultProps = {
+  placeholder: 'Search',
+  width: '100%',
+  height: '40px',
+  onTyping: () => {},
+  className: ''
 };
 
 const scrollableStyles$c = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
-    width: 8px;
+    width: 4px;
   }
 
   &::-webkit-scrollbar-track {
@@ -3526,665 +3716,125 @@ const scrollableStyles$c = `
     border-radius: 5px;
   }
 `;
-const MainContainer$5 = styled.div`
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-size: 1rem;
-  border-radius: 12px;
-  padding: 10px;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  overflow: auto;
-  ${scrollableStyles$c}
+const TabMenuContainer = styled.div`
+  font-family: 'Poppins', sans-serif;
+  display: grid;
+  gap: 20px;
+  grid-template-rows: repeat(3, auto);
 `;
-const RowTitle = styled.h4`
+const TopRow = styled.div`
   display: flex;
-  justify-content: space-between;
-  font-weight: 500;
-  font-size: 18px;
-  margin: 5px 5px 5px 0;
-  @media (max-width: 1536px) {
-    font-size: 15px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
+  align-items: center;
+  gap: 20px;
 `;
-const AllRowsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-  height: 100%;
+const Headline$1 = styled.span`
+  font-size: 18px;
+  font-weight: 500;
+  margin-right: auto;
 `;
-const OneRowContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+const Nav = styled.nav`
+display: flex;
+flex-direction: row;
+
 `;
-const ColumnLineSeporatorContainer = styled.div`
+const TabActionLine = styled.div`
+  margin-left: auto;
   display: flex;
-  flex-direction: column;
-  background-color: #b1b1b1;
   align-items: center;
-  height: 1px;
-  width: 100%;
-  &.ColumnLineSeporatorContainer_vertical {  
-    margin: 0 30px;  
-    height: 100%;
-    width: 1px;
-  }
-  &.ColumnLineSeporatorContainer_horizontal {
-    margin: 30px 0;
-    min-height: 1px;
-    height: 1px;
-    width: 100%;
-  }
-`;
-const ColumnLineSeporator = styled.div`
-  min-width: 0.5px;
-  width: 0.5px;
-`;
-const FieldsContainer$1 = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  white-space: nowrap;
   height: 100%;
-  padding: 30px 0px;
 `;
-const OneFieldsContainer = styled.div`
+const Tabs = styled.div`
+  position: relative;
   display: flex;
-  padding: 4px;
-  gap: 10px;
+  align-items: center;
   width: 100%;
-  justify-content: flex-start;
-  // padding: ${props => props.padding}; //0 0 0 40px;
-`;
-const FieldTitle = styled.h4`
-  font-size: 18px;
-  font-weight: 400;
-  margin: 0;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const FormattedValue$3 = styled.div`
-  font-weight: 400;
-  font-size: 40px;
-  display: flex;
-  align-items: baseline;
-  min-height: 40px;
-  gap: 2px;
-  @media (max-width: 1536px) {
-    font-size: 24px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 20px;
-  }
 `;
-const TextBeforeAndAfterValue$1 = styled.span`
-  font-weight: 400;
+const Tab = styled.div`
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+  padding: 8px 12px;
   font-size: 16px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 11px;
+  color: #000000;
+  &.active {
+    font-weight: 600;
+    color: ${props => props.color};
+    border-bottom: 1mm solid ${props => props.color};
+    //2px solid ${props => props.color};
   }
 `;
-const FieldTitleAndValueSubContainer = styled.div`
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  flex-wrap: wrap;
+const PresentationSlider = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
   width: 100%;
+  height: 2px;
+  background-color: #EAEAEA;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    z-index: 1;
+    width: ${props => props.width};
+    height: 2px;
+    /* background-color: ${props => props.color}; */
+    transform: translateX(calc(100% * ${props => props.activeTab}));
+    transition: transform .35s ease;
+  }
 `;
-const InfoTextContainer$1 = styled.div`
-  display: flex;
-  flex-direction: row;
+const Body = styled.div`
   width: 100%;
-  height: 100%; 
-  overflow:auto;
-`;
-const IconContainer$5 = styled.div`  
-  display: flex;  
-  padding: 5px 10px 0 0;
-  cursor:  pointer;  
+  ${scrollableStyles$c}
+  position: relative;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding:  ${props => props.setBackground ? '20px' : '5px'};
+  background-color: ${props => props.setBackground ? 'white' : 'unset'};
+  border-radius: ${props => props.setBackground ? '12px' : '0'};
+  box-shadow: ${props => props.setBackground ? '0px 0px 20px 0px rgba(0, 0, 0, 0.10)' : 'unset'};
 `;
-const InfoTextLabel$1 = styled.div`
-  color: black;
-  font-size: 18px;
-  line-height: 24px;
+const Label$5 = styled.div`
+  font-size: 12px;
   font-weight: 400;
-  width: 100%;
-  overflow: auto;
-  ${scrollableStyles$c}
-  strong {
-    font-weight: 500;
-    color: #212121;
-    @media (max-width: 1536px) {
-    font-size: 14px;
-    }
-    @media (max-width: 1366px) {
-    font-size: 12px;
-    }
-  };
-  p1 {
-    font-weight: 400;
-    color: #726F6F;
-    @media (max-width: 1536px) {
-    font-size: 14px;
+  padding: 8px;
+  color: #5a5a5a;
+  background-color: #E7E7E7;
+  border-radius: 4px;
+   > span {
+      font-weight: 500;
     }
-    @media (max-width: 1366px) {
-    font-size: 12px;
+    ~ span {
+      margin: 0 24px;
+      font-weight: 400;
     }
-  };
 `;
-const OutBanner$2 = styled.div`
+const ActionsWrapper = styled.div`
   display: flex;
-  gap: 8px;
   align-items: center;
-  font-size: 14px;
-  font-weight: 400;
-  color: ${props => props.textColor};
-  cursor: pointer;
-  @media (max-width: 1536px) {
-    font-size: 13px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-  > svg {
-    width: 14px;
-    height: 14px;
-    @media (max-width: 1536px) {
-      width: 13px;
-      height: 13px;
-    }
-    @media (max-width: 1366px) {
-      width: 12px;
-      height: 12px;
-    }
-  }
-`;
-
-const MarketShareDescription = props => {
-  const {
-    width,
-    height,
-    marketShareData,
-    iconColor,
-    onBannerClick,
-    dotCut
-  } = props;
-  const displayField = dataItem => {
-    const content = /*#__PURE__*/React$1.createElement(FieldTitleAndValueSubContainer, {
-      className: "FieldTitleAndValueSubContainer"
-    }, /*#__PURE__*/React$1.createElement(FieldTitle, {
-      className: "FieldTitle"
-    }, dataItem.label), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
-      className: "FormattedValue"
-    }, /*#__PURE__*/React$1.createElement(TextBeforeAndAfterValue$1, {
-      className: "TextBeforeAndAfterValue"
-    }, dataItem.textBefore), dotCut ? getFormattedValue(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? dataItem.value?.toFixed(2) : dataItem.value) : getNumberWithCommas(dataItem.value), dotCut ? getFormattedUnits(dataItem.value) : '', /*#__PURE__*/React$1.createElement(TextBeforeAndAfterValue$1, null, dataItem.textAfter)));
-    return content;
-  };
-  const dispalyRowFields = data => {
-    if (!data && !data.length > 0) return '';
-    const content = /*#__PURE__*/React$1.createElement(FieldsContainer$1, {
-      className: "FieldsContainer",
-      height: "160px"
-    }, data?.map((item, index) => /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(OneFieldsContainer, {
-      className: "OneFieldsContainer",
-      padding: index === 0 ? '0px' : '0 0 0 40px'
-    }, displayField(item)), data?.length !== index + 1 ? /*#__PURE__*/React$1.createElement(ColumnLineSeporatorContainer, {
-      className: "ColumnLineSeporatorContainer_vertical"
-    }, /*#__PURE__*/React$1.createElement(ColumnLineSeporator, {
-      className: "ColumnLineSeporator"
-    })) : '')));
-    return content;
-  };
-  const displayRows = () => {
-    if (!marketShareData || marketShareData?.length === 0) return '';
-    const content = /*#__PURE__*/React$1.createElement(AllRowsContainer, {
-      className: "AllRowsContainer"
-    }, marketShareData.map((item, index) => /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(OneRowContainer, {
-      className: "OneRowContainer"
-    }, /*#__PURE__*/React$1.createElement(RowTitle, {
-      className: "RowTitle"
-    }, /*#__PURE__*/React$1.createElement(InfoTextLabel$1, {
-      className: "InfoTextLabel",
-      dangerouslySetInnerHTML: {
-        __html: item.rowTitle
-      }
-    }), item.showBanner && /*#__PURE__*/React$1.createElement(OutBanner$2, {
-      className: "OutBanner",
-      onClick: () => onBannerClick({
-        eventName: 'onBannerClick',
-        rowName: item.name
-      })
-    }, /*#__PURE__*/React$1.createElement(ExportIcon, {
-      color: "#212121"
-    }), "View By Banner")), dispalyRowFields(item.fieldsArray), /*#__PURE__*/React$1.createElement(InfoTextContainer$1, {
-      className: "InfoTextContainer"
-    }, item.rowFooter && item.rowFooter?.length > 0 ? /*#__PURE__*/React$1.createElement(IconContainer$5, {
-      className: "IconContainer"
-    }, /*#__PURE__*/React$1.createElement(LampIcon, {
-      width: "23px",
-      height: "19px",
-      fill: iconColor
-    })) : '', /*#__PURE__*/React$1.createElement(InfoTextLabel$1, {
-      className: "InfoTextLabel",
-      dangerouslySetInnerHTML: {
-        __html: item.rowFooter
-      }
-    }))), marketShareData?.length !== index + 1 ? /*#__PURE__*/React$1.createElement(ColumnLineSeporatorContainer, {
-      className: "ColumnLineSeporatorContainer_horizontal"
-    }, /*#__PURE__*/React$1.createElement(ColumnLineSeporator, {
-      className: "ColumnLineSeporator"
-    })) : '')));
-    return content;
-  };
-  return /*#__PURE__*/React$1.createElement(MainContainer$5, {
-    className: "MainContainer",
-    height: height,
-    width: width
-  }, displayRows());
-};
-MarketShareDescription.propTypes = {
-  marketShareData: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    checked: PropTypes.bool,
-    disabled: PropTypes.bool
-  })),
-  height: PropTypes.string,
-  width: PropTypes.string,
-  iconColor: PropTypes.string,
-  onBannerClick: PropTypes.func,
-  dotCut: PropTypes.bool
-};
-MarketShareDescription.defaultProps = {
-  marketShareData: [],
-  width: '100%',
-  height: '100%',
-  iconColor: '#1B30AA',
-  onBannerClick: () => {},
-  dotCut: false
-};
-
-const SagIconButtonWrapper = styled.button`
-  height: ${props => props.height};
-  font-size: 14px;
-  font-weight: 400;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 18px;
-  white-space: nowrap;
-  color: ${props => props.color};
-  border-radius: 8px;
-  border: 1px solid ${props => props.color};
-  background: ${props => props.backgroundColor ? props.backgroundColor : 'transparent'}; 
-  transition: box-shadow 0.3s ease;
-  &:hover, &:focus {
-    cursor: pointer;
-    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
-  }
-`;
-const SpanText$1 = styled.span`
-`;
-
-const SagIconButton = props => {
-  const {
-    iconName,
-    color,
-    backgroundColor,
-    activeColor,
-    height,
-    buttonText,
-    iconWidth,
-    iconHeight,
-    disabled,
-    openState,
-    onButtonClick,
-    className
-  } = props;
-  const [activeState, setActiveState] = useState(openState);
-  const onClickHandler = event => {
-    onButtonClick(event);
-    setActiveState(prevState => !prevState);
-  };
-  const getIcon = icon => {
-    switch (icon.toLowerCase()) {
-      case 'filter':
-        return /*#__PURE__*/React$1.createElement(FilterIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'options':
-        return /*#__PURE__*/React$1.createElement(OptionsIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'download':
-        return /*#__PURE__*/React$1.createElement(DownloadIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'document':
-        return /*#__PURE__*/React$1.createElement(DocumentIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'fly':
-        return /*#__PURE__*/React$1.createElement(FlyIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'bell':
-        return /*#__PURE__*/React$1.createElement(BellIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'exit':
-        return /*#__PURE__*/React$1.createElement(ExitIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      case 'eye':
-        return /*#__PURE__*/React$1.createElement(EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-      default:
-        return /*#__PURE__*/React$1.createElement(EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: activeState ? activeColor : color
-        });
-    }
-  };
-  return /*#__PURE__*/React$1.createElement(SagIconButtonWrapper, {
-    className: className,
-    height: height,
-    color: activeState ? activeColor : color,
-    backgroundColor: backgroundColor,
-    disabled: disabled,
-    onClick: event => {
-      onClickHandler(event);
-    }
-  }, getIcon(iconName), buttonText && /*#__PURE__*/React$1.createElement(SpanText$1, null, buttonText));
-};
-SagIconButton.propTypes = {
-  className: PropTypes.string,
-  iconName: PropTypes.string,
-  buttonText: PropTypes.string,
-  height: PropTypes.string,
-  color: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  activeColor: PropTypes.string,
-  iconHeight: PropTypes.number,
-  iconWidth: PropTypes.number,
-  openState: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onButtonClick: PropTypes.func
-};
-SagIconButton.defaultProps = {
-  className: '',
-  iconName: 'filter',
-  buttonText: 'Filter',
-  height: '40px',
-  color: '#212121',
-  activeColor: '#229E38',
-  backgroundColor: 'transparent',
-  // '#E8F5EB',
-  iconHeight: 12,
-  iconWidth: 12,
-  openState: false,
-  disabled: false,
-  onButtonClick: () => {}
-};
-
-const TextFieldContainer = styled.div`
-    position: relative;
-    width: ${props => props.width};
-    > svg {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 10px;
-    
-    }
-`;
-const TextFieldInput = styled.input`
-  width: 100%;
-  height: ${props => props.height};
-  font-size: 14px;
-  font-weight: 400;
-  padding: 6px 16px;
-  border-radius: 8px;
-  border: 1px solid #B1B1B1;
-  background: transparent;
-  text-indent: 14px;
-  &:hover, 
-  &:focus {
-    border: 1px solid #212121;
-  }
-  &::placeholder {
-    color: #B1B1B1;
-  }
-`;
-
-const SearchIcon = ({
-  width = '13',
-  height = '13',
-  color = '#212121'
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 13 13",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.createElement("path", {
-  d: "M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z",
-  fill: color
-}));
-
-const SearchInput = props => {
-  const {
-    placeholder,
-    onTyping,
-    width,
-    height,
-    className
-  } = props;
-  const handleInputChange = e => {
-    onTyping(e);
-  };
-  return /*#__PURE__*/React$1.createElement(TextFieldContainer, {
-    className: className,
-    width: width
-  }, /*#__PURE__*/React$1.createElement(TextFieldInput, {
-    type: "search",
-    height: height,
-    placeholder: placeholder,
-    onChange: handleInputChange
-  }), /*#__PURE__*/React$1.createElement(SearchIcon, null));
-};
-SearchInput.propTypes = {
-  placeholder: PropTypes.string,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  onTyping: PropTypes.func,
-  className: PropTypes.string
-};
-SearchInput.defaultProps = {
-  placeholder: 'Search',
-  width: '100%',
-  height: '40px',
-  onTyping: () => {},
-  className: ''
-};
-
-const scrollableStyles$b = `
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
-  }
-`;
-const TabMenuContainer = styled.div`
-  font-family: 'Poppins', sans-serif;
-  display: grid;
-  gap: 20px;
-  grid-template-rows: repeat(3, auto);
-`;
-const TopRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 20px;
-`;
-const Headline$1 = styled.span`
-  font-size: 18px;
-  font-weight: 500;
-  margin-right: auto;
-`;
-const Nav = styled.nav`
-display: flex;
-flex-direction: row;
-
-`;
-const TabActionLine = styled.div`
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  height: 100%;
-`;
-const Tabs = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-`;
-const Tab = styled.div`
-  cursor: pointer;
-  position: relative;
-  text-align: center;
-  padding: 8px 12px;
-  font-size: 16px;
-  color: #000000;
-  &.active {
-    font-weight: 600;
-    color: ${props => props.color};
-    border-bottom: 1mm solid #229E38;
-    //2px solid ${props => props.color};
-  }
-`;
-const PresentationSlider = styled.div`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background-color: #EAEAEA;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    z-index: 1;
-    width: ${props => props.width};
-    height: 2px;
-    /* background-color: ${props => props.color}; */
-    transform: translateX(calc(100% * ${props => props.activeTab}));
-    transition: transform .35s ease;
-  }
-`;
-const Body = styled.div`
-  width: 100%;
-  ${scrollableStyles$b}
-  position: relative;
-  overflow-x: hidden;
-  box-sizing: border-box;
-  padding:  ${props => props.setBackground ? '20px' : '5px'};
-  background-color: ${props => props.setBackground ? 'white' : 'unset'};
-  border-radius: ${props => props.setBackground ? '12px' : '0'};
-  box-shadow: ${props => props.setBackground ? '0px 0px 20px 0px rgba(0, 0, 0, 0.10)' : 'unset'};
-`;
-const Label$5 = styled.div`
-  font-size: 12px;
-  font-weight: 400;
-  padding: 8px;
-  color: #5a5a5a;
-  background-color: #E7E7E7;
-  border-radius: 4px;
-   > span {
-      font-weight: 500;
-    }
-    ~ span {
-      margin: 0 24px;
-      font-weight: 400;
-    }
-`;
-const ActionsWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-`;
-const SagIconButtonWrap = styled(SagIconButton)`
-`;
-const SearchInputWrap = styled(SearchInput)`
-  margin-left: auto;
+  gap: 10px;
+  width: 100%;
+`;
+const SagIconButtonWrap = styled(SagIconButton)`
+`;
+const SearchInputWrap = styled(SearchInput)`
+  margin-left: auto;
 `;
 
 const TabMenu = _ref => {
   let {
-    activeColor = '#229E38',
-    headlineContent = /*#__PURE__*/React$1.createElement("div", null),
-    children = null,
-    className = 'TabMenuContainer',
     color = '#229E38',
     currentTab = 0,
     headlineInsteadTabs = false,
     headlineText = 'Headline',
+    headlineContent = /*#__PURE__*/React$1.createElement("div", null),
+    className = 'TabMenuContainer',
+    children = null,
+    tabs = [],
     inputWidth = '100%',
     onFilterButtonClick = () => {},
     onSearchFieldTyping = () => {},
     onTabChange = () => {},
+    onTopButtonClick = () => {},
     panelIsOpen = false,
     setBackground = false,
     showActions = true,
@@ -4195,9 +3845,7 @@ const TabMenu = _ref => {
     disabledButton = false,
     setTopRightButton = false,
     rightButtonText = 'Button',
-    rightButtonIcon = 'arrow',
-    onTopButtonClick = () => {},
-    tabs = []
+    rightButtonIcon = 'arrow'
   } = _ref;
   const [activeTab, setActiveTab] = useState(currentTab);
   useEffect(() => {
@@ -4221,7 +3869,7 @@ const TabMenu = _ref => {
     iconName: "Filter",
     buttonText: "",
     openState: panelIsOpen,
-    activeColor: activeColor,
+    activeColor: color,
     onButtonClick: onFilterButtonClick
   }), headlineInsteadTabs ? /*#__PURE__*/React$1.createElement(Headline$1, null, headlineText) : /*#__PURE__*/React$1.createElement(Nav, {
     className: "Nav"
@@ -4257,7 +3905,6 @@ const TabMenu = _ref => {
   }, tabs[activeTab]?.content));
 };
 TabMenu.propTypes = {
-  activeColor: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   color: PropTypes.string,
@@ -8861,7 +8508,7 @@ const MenuItemUpIcon = ({
 }));
 
 /* eslint-disable no-nested-ternary */
-const scrollableStyles$a = `
+const scrollableStyles$b = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -8986,7 +8633,7 @@ const OptionsContainer$6 = styled.div`
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
 `;
 const OptionsSubContainer$3 = styled.ul`
-  ${scrollableStyles$a}
+  ${scrollableStyles$b}
   list-style: none;
   font-weight: 400;
   margin: 0;
@@ -9029,7 +8676,7 @@ const ErrorMessage$3 = styled.div`
   color: red;
   margin-top: 5px;
 `;
-const IconContainer$4 = styled.div`  
+const IconContainer$5 = styled.div`  
   display: flex;  
   padding: 2px;
   cursor:  pointer;  
@@ -9213,14 +8860,14 @@ const DropdownSingleNew = ({
     placeholder: isFocused ? filteredOptions.length <= 5 ? "Select Option…" : "Type To Search" : "",
     error: error,
     isFocused: isFocused
-  })), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$4, {
+  })), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$5, {
     className: "IconContainer",
     onClick: handleClearClick
   }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
     width: "12px",
     height: "12px",
     fill: "#B1B1B1"
-  })), /*#__PURE__*/React$1.createElement(IconContainer$4, {
+  })), /*#__PURE__*/React$1.createElement(IconContainer$5, {
     className: "IconContainer",
     onClick: handleOpenCloseMenuClick
   }, showOptions ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
@@ -9328,7 +8975,7 @@ const CheckBoxNotCheckedIcon = ({
 };
 
 /* eslint-disable no-nested-ternary */
-const scrollableStyles$9 = `
+const scrollableStyles$a = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -9453,7 +9100,7 @@ const OptionsContainer$5 = styled.div`
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
 `;
 const OptionsSubContainer$2 = styled.ul`
-  ${scrollableStyles$9}
+  ${scrollableStyles$a}
   list-style: none;
   font-weight: 400;
   margin: 0;
@@ -9525,7 +9172,7 @@ const SelectedOptionItem$1 = styled.div`
   padding: 4px 6px;
   font-size: 12px;
 `;
-const IconContainer$3 = styled.div`  
+const IconContainer$4 = styled.div`  
   display: flex;  
   padding: 2px;
   cursor:  pointer;  
@@ -9732,14 +9379,14 @@ const DropdownMultiNew = ({
     placeholder: isFocused ? filteredOptions.length <= 5 ? "Select Option…" : "Type To Search" : "",
     error: error,
     isFocused: isFocused
-  }) : " "), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$3, {
+  }) : " "), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$4, {
     className: "IconContainer",
     onClick: handleClearClick
   }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
     width: "12px",
     height: "12px",
     fill: "#B1B1B1"
-  })), /*#__PURE__*/React$1.createElement(IconContainer$3, {
+  })), /*#__PURE__*/React$1.createElement(IconContainer$4, {
     className: "IconContainer",
     onClick: handleOpenCloseMenuClick
   }, showOptions ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
@@ -9767,7 +9414,7 @@ const DropdownMultiNew = ({
     key: option.value,
     onClick: () => toggleOption(option),
     selected: isDropdowned(option)
-  }, " ", /*#__PURE__*/React$1.createElement(IconContainer$3, {
+  }, " ", /*#__PURE__*/React$1.createElement(IconContainer$4, {
     className: "IconContainer"
   }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/React$1.createElement(CheckBoxCheckedIcon, {
     width: "14px",
@@ -11410,7 +11057,7 @@ const AllFieldsContainer = styled.div`
   flex-wrap: wrap;
   width: 100%;
 `;
-const FieldsContainer = styled.div`
+const FieldsContainer$1 = styled.div`
   display: flex;
   flex-direction: column;
   white-space: wrap;
@@ -11562,7 +11209,7 @@ const FilterPanel = props => {
       const mm = String(date.getMonth() + 1).padStart(2, '0');
       const dd = String(date.getDate()).padStart(2, '0');
       const yyyy = date.getFullYear();
-      return `${dd}/${mm}/${yyyy}`;
+      return `${mm}/${dd}/${yyyy}`;
     };
     return `${formatDate(startOfYear)} - ${formatDate(now)}`;
   };
@@ -11784,6 +11431,7 @@ const FilterPanel = props => {
           borderRadius: "12px",
           label: "Date Range",
           onChange: eventRangePicker => {
+            // Allow changes to the date range even in YTD mode
             const selectedValue = eventRangePicker && typeof eventRangePicker === 'string' ? `${eventRangePicker}` : undefined;
             const newFieldsDataState = FieldsDataState?.map(itemField => itemField.name === item.name ? {
               ...itemField,
@@ -11803,7 +11451,7 @@ const FilterPanel = props => {
           },
           required: item.required,
           placeholder: "Select Date Range ...",
-          selectedValue: getYTDString(),
+          selectedValue: item.selectedValue || getYTDString(),
           disabled: true,
           width: "100%",
           height: "55px"
@@ -11969,7 +11617,7 @@ const FilterPanel = props => {
     if (!data || data.length === 0) {
       return '';
     }
-    return /*#__PURE__*/React$1.createElement(FieldsContainer, {
+    return /*#__PURE__*/React$1.createElement(FieldsContainer$1, {
       className: "FieldsContainer"
     }, data?.map((item, i) => /*#__PURE__*/React$1.createElement(FieldContainer$1, {
       key: `${item.name}-${i}`,
@@ -12163,7 +11811,7 @@ const SortIcon = _ref => {
   }))));
 };
 
-const scrollableStyles$8 = `
+const scrollableStyles$9 = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -12398,7 +12046,7 @@ const TableWrapper = styled.div`
   border: 1px solid #dddddd;
   border-radius: ${props => props.columnsNumber > props.maxColumnsNumber ? ' 12px 12px 6px 6px' : '12px'};
   overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden'};
-  ${scrollableStyles$8}
+  ${scrollableStyles$9}
 `;
 const Table = styled.table`
   font-family: "Poppins", sans-serif;
@@ -12989,7 +12637,7 @@ EventListItem.defaultProps = {
   onClick: () => {}
 };
 
-const MainContainer$4 = styled.div`
+const MainContainer$5 = styled.div`
   /* display: flex; */
   position: relative;
   font-family: "Poppins", sans-serif;
@@ -13052,7 +12700,7 @@ const EventList = props => {
   };
 
   //= ======================================== MAIN RETURN ====================================
-  return /*#__PURE__*/React$1.createElement(MainContainer$4, {
+  return /*#__PURE__*/React$1.createElement(MainContainer$5, {
     id: "MainContainer",
     height: height,
     width: width
@@ -13248,7 +12896,7 @@ const CollapseMenuItemContentContainer = styled.div`
     font-size: 12px;
   }
 `;
-const MainContainer$3 = styled.div`
+const MainContainer$4 = styled.div`
   width: ${props => props.width};
   height: ${props => props.height};
   display: flex;
@@ -13263,7 +12911,7 @@ const DraftTag$1 = styled.div`
   height: fit-content;
 `;
 
-const MainContainer$2 = styled.div`
+const MainContainer$3 = styled.div`
     width: ${props => props.width};
     height: ${props => props.height};
     font-family: 'Poppins', sans-serif;
@@ -13380,7 +13028,7 @@ const BannerEventBox = props => {
   const onInfoClickHandler = event => {
     onInfoClick(event);
   };
-  return /*#__PURE__*/React$1.createElement(MainContainer$2, {
+  return /*#__PURE__*/React$1.createElement(MainContainer$3, {
     height: height,
     width: width
   }, /*#__PURE__*/React$1.createElement(TitleWrapper, null, formatedBanners().icon, "|", /*#__PURE__*/React$1.createElement(CardTitle, null, formatedBanners().name)), /*#__PURE__*/React$1.createElement(Block, null, /*#__PURE__*/React$1.createElement(Headline, null, "Event Description"), /*#__PURE__*/React$1.createElement(Text, null, description)), /*#__PURE__*/React$1.createElement(Block, null, /*#__PURE__*/React$1.createElement(Headline, null, "Event Dates:"), /*#__PURE__*/React$1.createElement(Text, null, dates.join(" - "))), /*#__PURE__*/React$1.createElement(ButtonWrap, null, /*#__PURE__*/React$1.createElement(Button, {
@@ -13490,7 +13138,7 @@ const BannerEventBoxList = props => {
     color: toggleColor
   }))), IsItemOpen && /*#__PURE__*/React.createElement(CollapseMenuItemContentContainer, {
     id: "CollapseMenuItemContentContainer"
-  }, cardsContent ? /*#__PURE__*/React.createElement(MainContainer$3, {
+  }, cardsContent ? /*#__PURE__*/React.createElement(MainContainer$4, {
     width: width,
     height: height
   }, data.map(item => /*#__PURE__*/React.createElement(BannerEventBox, {
@@ -13578,7 +13226,7 @@ BannerEventBoxList.defaultProps = {
   showDraft: false
 };
 
-const scrollableStyles$7 = `
+const scrollableStyles$8 = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -13615,7 +13263,7 @@ const Modal = styled.div`
     width: 79%;
     max-width: 1500px;
     margin: 0 auto;
-    ${scrollableStyles$7}
+    ${scrollableStyles$8}
 `;
 const ModalHeader = styled.div`
     display: flex;
@@ -13624,7 +13272,7 @@ const ModalHeader = styled.div`
     margin-bottom: 32px;
 `;
 const ModalBody = styled.div`
-    ${scrollableStyles$7}
+    ${scrollableStyles$8}
     max-height: 80vh;
 `;
 const ModalTitle = styled.h5`
@@ -23879,7 +23527,7 @@ const TheGiantCompanyIcon = _ref => {
   })));
 };
 
-const MainContainer$1 = styled.div`
+const MainContainer$2 = styled.div`
   display: flex;
   position: relative;
   font-family: "Poppins", sans-serif;
@@ -24172,7 +23820,7 @@ const CollapseHeader = props => {
     } = viewCreativeContainerRef.current;
     return (offsetTop + 33).toString().concat("", "px");
   };
-  return /*#__PURE__*/React$1.createElement(MainContainer$1, {
+  return /*#__PURE__*/React$1.createElement(MainContainer$2, {
     id: "CollapseHeader",
     className: className,
     height: height,
@@ -24446,7 +24094,7 @@ const ErrorMessage$1 = styled.div`
   color: red;
   margin-top: 5px;
 `;
-const IconContainer$2 = styled.div`
+const IconContainer$3 = styled.div`
   padding: 2px;
   cursor: pointer;
 `;
@@ -24620,7 +24268,7 @@ const QuickFilterDropdownSingle = _ref => {
     width: "12px",
     height: "12px",
     fill: "#B1B1B1"
-  })), /*#__PURE__*/React$1.createElement(IconContainer$2, {
+  })), /*#__PURE__*/React$1.createElement(IconContainer$3, {
     className: "IconContainer",
     onClick: handleOpenCloseMenuClick
   }, showOptions ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
@@ -24862,7 +24510,7 @@ const SelectedOptionItem = styled.div`
   padding: 4px 6px;
   font-size: 12px;
 `;
-const IconContainer$1 = styled.div`  
+const IconContainer$2 = styled.div`  
   display: flex;  
   padding: 2px;
   cursor:  pointer;  
@@ -25080,14 +24728,14 @@ const QuickFilterDropdownMultiSelection = _ref => {
     placeholder: isFocused ? placeHolder || 'Type to search...' : '',
     error: error,
     isFocused: isFocused
-  }) : ' '), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$1, {
+  }) : ' '), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$2, {
     className: "IconContainer",
     onClick: handleClearClick
   }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
     width: "12px",
     height: "12px",
     fill: "#B1B1B1"
-  })), /*#__PURE__*/React$1.createElement(IconContainer$1, {
+  })), /*#__PURE__*/React$1.createElement(IconContainer$2, {
     className: "IconContainer",
     onClick: handleOpenCloseMenuClick
   }, showOptions ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
@@ -25115,7 +24763,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
     key: option.value,
     onClick: () => toggleOption(option),
     selected: isDropdowned(option)
-  }, highlightText(option.label, inputValue), /*#__PURE__*/React$1.createElement(IconContainer$1, {
+  }, highlightText(option.label, inputValue), /*#__PURE__*/React$1.createElement(IconContainer$2, {
     className: "IconContainer"
   }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/React$1.createElement(CheckBoxCheckedIcon, {
     width: "14px",
@@ -25298,6 +24946,24 @@ classnames.exports;
 var classnamesExports = classnames.exports;
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
+const ExportIcon = _ref => {
+  let {
+    width = '14',
+    height = '15',
+    color = '#212121'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 14 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M8.3125 0.90625C8.3125 0.550781 8.58594 0.25 8.96875 0.25H13.3164C13.6992 0.25 13.9727 0.550781 13.9727 0.90625V5.28125C13.9727 5.66406 13.6992 5.9375 13.3164 5.9375C12.9609 5.9375 12.6602 5.66406 12.6602 5.28125V2.49219L6.5625 8.58984C6.31641 8.86328 5.90625 8.86328 5.66016 8.58984C5.38672 8.34375 5.38672 7.93359 5.66016 7.66016L11.7578 1.5625H8.96875C8.58594 1.5625 8.3125 1.28906 8.3125 0.90625ZM1.96875 1.125H5.46875C5.82422 1.125 6.125 1.42578 6.125 1.78125C6.125 2.16406 5.82422 2.4375 5.46875 2.4375H1.96875C1.58594 2.4375 1.3125 2.73828 1.3125 3.09375V12.2812C1.3125 12.6641 1.58594 12.9375 1.96875 12.9375H11.1562C11.5117 12.9375 11.8125 12.6641 11.8125 12.2812V8.78125C11.8125 8.42578 12.0859 8.125 12.4688 8.125C12.8242 8.125 13.125 8.42578 13.125 8.78125V12.2812C13.125 13.375 12.2227 14.25 11.1562 14.25H1.96875C0.875 14.25 0 13.375 0 12.2812V3.09375C0 2.02734 0.875 1.125 1.96875 1.125Z",
+    fill: color
+  }));
+};
+
 const UpArrowIcon = _ref => {
   let {
     width = '10',
@@ -25358,7 +25024,7 @@ const OneColumnContainerMainDiv = styled.div`
     box-sizing: border-box;
   }
 `;
-const InfoTextContainer = styled.div`
+const InfoTextContainer$1 = styled.div`
   overflow: auto;
   padding: 20px;
   box-sizing: border-box;
@@ -25370,7 +25036,7 @@ const InfoTitleLabel = styled.div`
   font-size: 18px;
   line-height: 32px;
 `;
-const InfoTextLabel = styled.div`
+const InfoTextLabel$1 = styled.div`
   color: black;
   font-size: 14px;
   line-height: 20px;
@@ -25383,7 +25049,7 @@ const ColumnTitle = styled.span`
   font-weight: 500;
   padding: 20px 20px 0;
 `;
-const IconContainer = styled.div`
+const IconContainer$1 = styled.div`
   width: 20px;
   height: 20px;
   top: 10px;
@@ -25405,7 +25071,7 @@ const BannerContainer = styled.div`
   right: ${props => props.right};
   user-select: none;
 `;
-const OutBanner$1 = styled.div`
+const OutBanner$2 = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -25438,7 +25104,7 @@ const PercentOfChange = styled.div`
     align-items: baseline;
     justify-content: center;
     padding: 4px 8px;
-    background-color: ${props => props.isPercentDataPositive ? '#E8F5EB' : '#FFE9EB'};
+    background-color: ${props => props.isPercentDataPositive > 0 ? '#E8F5EB' : props.isPercentDataPositive < 0 ? '#FFE9EB' : '#E3E4E5'}; /* Gray for 0 */
     color: #333333;
     border-radius: 12px 0px 12px 0px;
     font-size: 12px;
@@ -25518,7 +25184,6 @@ const OneColumnContainer = props => {
   useEffect(() => {
     setOffsetWidth(anotherRef?.current?.offsetWidth);
   }, [anotherRef]);
-  const isPercentDataPositive = PercentOfChangeData > 0;
   return /*#__PURE__*/React$1.createElement(StyledContainer, {
     className: classNames('OneColumnContainer', itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
     width: width,
@@ -25543,37 +25208,37 @@ const OneColumnContainer = props => {
   }, columnTitle), !isLoading && showViewByBannerButton && !hover && /*#__PURE__*/React$1.createElement(BannerContainer, {
     className: "BannerContainer",
     right: disableInfo ? '20px' : '45px'
-  }, /*#__PURE__*/React$1.createElement(OutBanner$1, {
+  }, /*#__PURE__*/React$1.createElement(OutBanner$2, {
     className: "OutBanner",
     onClick: () => onBannerClick({
       eventName: 'onBannerClick'
     })
-  }, /*#__PURE__*/React$1.createElement(ExportIcon, null), "By Banner")), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(IconContainer, {
+  }, /*#__PURE__*/React$1.createElement(ExportIcon, null), "By Banner")), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(IconContainer$1, {
     className: "IconContainer",
     onMouseEnter: () => setHover(true),
     onMouseLeave: () => setHover(false)
-  }, /*#__PURE__*/React$1.createElement(InfoIcon, null)), hover && /*#__PURE__*/React$1.createElement(InfoTextContainer, {
+  }, /*#__PURE__*/React$1.createElement(InfoIcon, null)), hover && /*#__PURE__*/React$1.createElement(InfoTextContainer$1, {
     className: "InfoTextContainer"
   }, infoTitle && /*#__PURE__*/React$1.createElement(InfoTitleLabel, {
     className: "InfoTitleLabel",
     dangerouslySetInnerHTML: {
       __html: infoTitle
     }
-  }), /*#__PURE__*/React$1.createElement(InfoTextLabel, {
+  }), /*#__PURE__*/React$1.createElement(InfoTextLabel$1, {
     className: "InfoTextLabel",
     dangerouslySetInnerHTML: {
       __html: infoText
     }
   }))), isPercentOfChange && !isLoading && /*#__PURE__*/React$1.createElement(PercentOfChange, {
     className: "PercentOfChange",
-    isPercentDataPositive: isPercentDataPositive
-  }, isPercentDataPositive ? /*#__PURE__*/React$1.createElement(UpArrowIcon, {
+    isPercentDataPositive: PercentOfChangeData
+  }, PercentOfChangeData > 0 ? /*#__PURE__*/React$1.createElement(UpArrowIcon, {
     width: "11",
     height: "10"
-  }) : /*#__PURE__*/React$1.createElement(DownArrowIcon, {
+  }) : PercentOfChangeData < 0 ? /*#__PURE__*/React$1.createElement(DownArrowIcon, {
     width: "11",
     height: "10"
-  }), `${Math.abs(PercentOfChangeData)}%`), isLoading && /*#__PURE__*/React$1.createElement(LoadingDiv, {
+  }) : null, `${Math.abs(PercentOfChangeData)}%`), isLoading && /*#__PURE__*/React$1.createElement(LoadingDiv, {
     className: "loadingDiv"
   }, /*#__PURE__*/React$1.createElement(SkeletonTheme, {
     baseColor: "#EAEAEA"
@@ -25617,1335 +25282,1732 @@ OneColumnContainer.propTypes = {
   showBackgroundImage: PropTypes.bool,
   backgroundImageStyle: PropTypes.object
 };
-OneColumnContainer.defaultProps = {
-  children: null,
-  display: 'block',
-  isLoading: '',
-  gridTemplateColumns: '',
-  itemClass: '',
-  divStyle: '',
-  overStyle: '',
-  draggingStyle: '',
-  droppedStyle: '',
-  width: '300px',
-  height: '300px',
-  overflow: 'hidden',
-  transparentBackground: false,
-  infoTitle: '',
-  infoText: '',
-  disableInfo: false,
-  showViewByBannerButton: false,
-  onBannerClick: () => {},
-  columnTitle: '',
-  isPercentOfChange: false,
-  PercentOfChangeData: 0,
-  backgroundImage: '',
-  showBackgroundImage: false,
-  backgroundImageStyle: {}
+OneColumnContainer.defaultProps = {
+  children: null,
+  display: 'block',
+  isLoading: '',
+  gridTemplateColumns: '',
+  itemClass: '',
+  divStyle: '',
+  overStyle: '',
+  draggingStyle: '',
+  droppedStyle: '',
+  width: '300px',
+  height: '300px',
+  overflow: 'hidden',
+  transparentBackground: false,
+  infoTitle: '',
+  infoText: '',
+  disableInfo: false,
+  showViewByBannerButton: false,
+  onBannerClick: () => {},
+  columnTitle: '',
+  isPercentOfChange: false,
+  PercentOfChangeData: 0,
+  backgroundImage: '',
+  showBackgroundImage: false,
+  backgroundImageStyle: {}
+};
+
+const scrollableStyles$7 = `
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
+`;
+const ControlsContainer$7 = styled.div`
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  color: ${props => props.textcolor};
+  width: ${props => props.width};
+  height: ${props => props.height};
+  display: flex;
+  align-items: center;
+  @media (max-width: 1536px) {
+    ${scrollableStyles$7}
+  }
+
+  > * {
+    box-sizing: border-box;
+  }
+`;
+const Controls$6 = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: white;  
+`;
+const TitleAndValueContainer$3 = styled.div`
+  display: flex;
+  flex-direction: column; 
+`;
+const Title$c = styled.h4`
+  font-weight: 400;
+  font-size: 20px;
+  margin: 0;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 10px;
+  }
+`;
+const CurrencySignAndFormattedValueContainer$1 = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+const CurrencySignOrPercent = styled.span`
+  font-weight: 500;
+  font-size: 16px;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 11px;
+  }
+`;
+const FormattedValueText = styled.div`
+  font-weight: 500;
+  font-size: 40px;
+  @media (max-width: 1536px) {
+    font-size: 34px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 28px;
+  }
+`;
+
+const FormattedValue$3 = props => {
+  const {
+    className,
+    title,
+    subtitle,
+    showTopValue,
+    value,
+    dotCut,
+    currencySign,
+    currencyType,
+    width,
+    height,
+    textcolor,
+    isPercent
+  } = props;
+  return /*#__PURE__*/React$1.createElement(ControlsContainer$7, {
+    className: className || 'FormattedValue_ControlsContainer',
+    height: height,
+    width: width,
+    textcolor: textcolor
+  }, /*#__PURE__*/React$1.createElement(Controls$6, {
+    className: "Controls",
+    height: height,
+    width: width
+  }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer$3, {
+    className: "TitleAndValueContainer"
+  }, title ? /*#__PURE__*/React$1.createElement(Title$c, {
+    className: "Title",
+    width: width
+  }, title) : '', showTopValue && /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$1, {
+    className: "CurrencySignAndFormattedValueContainer"
+  }, /*#__PURE__*/React$1.createElement(FormattedValueText, {
+    className: "FormattedValueText",
+    width: width
+  }, /*#__PURE__*/React$1.createElement(CurrencySignOrPercent, {
+    className: "CurrencySignOrPercent"
+  }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '', /*#__PURE__*/React$1.createElement(CurrencySignOrPercent, {
+    className: "CurrencySignOrPercent"
+  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React$1.createElement(Title$c, {
+    className: "Title",
+    width: width
+  }, subtitle) : '')));
+};
+FormattedValue$3.propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  showTopValue: PropTypes.bool,
+  value: PropTypes.number,
+  dotCut: PropTypes.bool,
+  currencySign: PropTypes.bool,
+  currencyType: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  textcolor: PropTypes.string,
+  isPercent: PropTypes.bool
+};
+FormattedValue$3.defaultProps = {
+  className: 'FormattedValue_ControlsContainer',
+  title: '',
+  subtitle: '',
+  showTopValue: true,
+  value: 0,
+  dotCut: false,
+  currencySign: false,
+  currencyType: 'USD',
+  width: '100%',
+  height: '100%',
+  textcolor: '#212121',
+  isPercent: false
 };
 
-const scrollableStyles$6 = `
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
-  }
-`;
-const ControlsContainer$7 = styled.div`
+const ControlsContainer$6 = styled.div`
   position: relative;
   font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 20px;
-  color: ${props => props.textcolor};
+  color: #212121;
   width: ${props => props.width};
   height: ${props => props.height};
+  min-width: 250px;
+`;
+const Controls$5 = styled.div`
+  height: 100%;
+  width: 100%;
+  background: white;
+  display: flex;
+  flex-direction: column;
+`;
+const TooltipDiv$3 = styled.div`
+  border-radius: 5px;
+  padding: 8px 12px;
+  background: white;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
+  margin: 0;
+`;
+const TooltipLabel$3 = styled.div`
+  color: #212121;
+  font-size: 14px;
+  font-weight: 400;
+  width: fit-content;
+`;
+const TooltipTitle$3 = styled.div`
+  color: #212121;
+  font-size: 14px;
+  font-weight: 600;
+`;
+const TitleAndValueContainer$2 = styled.div`
+  padding: 0 1rem;
+`;
+const Title$b = styled.h5`
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 20px;
+  margin: 0;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
+`;
+const EventWeeksLegendMainContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin: 2px 0 0 0;
+  padding-left: 55px;
+  align-items: center;
+`;
+const EventWeeksLegendDataElementsContainer = styled.div`
   display: flex;
+  margin: 0px;
   align-items: center;
+  justify-content: space-around;
+  width: 100%;
+`;
+const EventWeeksLegendDataElement = styled.h4`
+  display: flex;
+  font-weight: ${props => props.fontWeight};
+  font-size: 12px;
+  line-height: 15px;
+  margin: 0;
+  width: 100%;
+  justify-content: center;
+  align-content: center;
+  color: ${props => props.textColor};
+  border-top-left-radius: ${props => props.borderLeftRadius};
+  border-bottom-left-radius: ${props => props.borderLeftRadius};
+  border-top-right-radius: ${props => props.borderRightRadius};
+  border-bottom-right-radius: ${props => props.borderRightRadius};
+  background: ${props => props.color};
   @media (max-width: 1536px) {
-    ${scrollableStyles$6}
+    font-size: 11px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 10px;
   }
+`;
+const LegendWrapper = styled.div`
+  padding-top: 15px;
+`;
+
+const LegendUnionIcon = _ref => {
+  let {
+    width = '18',
+    height = '5',
+    color = '#9CCB3B'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 18 5",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.45 2H17C17.2761 2 17.5 2.22386 17.5 2.5C17.5 2.77614 17.2761 3 17 3H11.45C11.2184 4.14112 10.2095 5 9 5C7.79052 5 6.78164 4.14112 6.55001 3H1C0.723858 3 0.5 2.77614 0.5 2.5C0.5 2.22386 0.723858 2 1 2H6.55001C6.78164 0.85888 7.79052 0 9 0C10.2095 0 11.2184 0.85888 11.45 2Z",
+    fill: color
+  }));
+};
+
+const LegendLineIcon = _ref => {
+  let {
+    width = '19',
+    height = '3',
+    color = '#9CCB3B'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 19 3",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 1.5C0 0.671573 0.671573 0 1.5 0H17.5C18.3284 0 19 0.671572 19 1.5C19 2.32843 18.3284 3 17.5 3H1.5C0.671575 3 0 2.32843 0 1.5Z",
+    fill: color
+  }));
+};
+
+const ControlsContainer$5 = styled.div`
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  font-size: ${props => props.rootFont};
+  color: ${props => props.textColor};
+  width: ${props => props.width};
+  height: ${props => props.height};
 
   > * {
     box-sizing: border-box;
   }
 `;
-const Controls$6 = styled.div`
+const Controls$4 = styled.div`
   display: flex;
+  gap: 20px;
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background: white;  
+  background: white;
 `;
-const TitleAndValueContainer$3 = styled.div`
+const LegendDataContainer = styled.div`
   display: flex;
-  flex-direction: column; 
-`;
-const Title$c = styled.h4`
-  font-weight: 400;
-  font-size: 20px;
-  margin: 0;
+  justify-content: center;
+  gap: 40px;
+  margin-top: auto;
   @media (max-width: 1536px) {
-    font-size: 14px;
+    gap: 38px;
   }
   @media (max-width: 1366px) {
-    font-size: 10px;
+    gap: 30px;
   }
 `;
-const CurrencySignAndFormattedValueContainer$1 = styled.div`
+const TitleAndIconContainer = styled.div`
   display: flex;
   align-items: center;
-  gap: 16px;
 `;
-const CurrencySignOrPercent = styled.span`
-  font-weight: 500;
-  font-size: 16px;
+const Title$a = styled.h4`
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 27px;
+  margin: 0 0 0 10px;
   @media (max-width: 1536px) {
     font-size: 14px;
   }
   @media (max-width: 1366px) {
-    font-size: 11px;
+    font-size: 12px;
   }
 `;
-const FormattedValueText = styled.div`
-  font-weight: 500;
-  font-size: 40px;
-  @media (max-width: 1536px) {
-    font-size: 34px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 28px;
-  }
+const LegendColorRectangle$1 = styled.div`
+  width: 0.875rem;
+  min-width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 2px;
+  background: ${props => props.color};
 `;
 
-const FormattedValue$2 = props => {
+/* eslint-disable no-nested-ternary */
+const ICON_TYPE_SQUARE$3 = 'Square';
+const ICON_TYPE_LEGEND_UNION_ICON$3 = 'LegendUnionIcon';
+const ICON_TYPE_LEGEND_LINE_ICON$2 = 'LegendLineIcon';
+const PerformanceAnalyticsLegend = props => {
+  const {
+    className = 'PerformanceAnalyticsLegend',
+    width = '100%',
+    height = '100%',
+    legendData = [{
+      title: '',
+      iconType: ICON_TYPE_SQUARE$3,
+      iconColor: '#1F7677'
+    }]
+  } = props;
+  return /*#__PURE__*/React$1.createElement(ControlsContainer$5, {
+    className: className,
+    height: height,
+    width: width
+  }, legendData?.length > 0 ? /*#__PURE__*/React$1.createElement(Controls$4, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/React$1.createElement(LegendDataContainer, {
+    id: "LegendDataContainer"
+  }, legendData?.map((item, i) => /*#__PURE__*/React$1.createElement(TitleAndIconContainer, {
+    key: `${item.title + i}`
+  }, item.iconType === ICON_TYPE_SQUARE$3 ? /*#__PURE__*/React$1.createElement(LegendColorRectangle$1, {
+    color: item.iconColor
+  }) : item.iconType === ICON_TYPE_LEGEND_UNION_ICON$3 ? /*#__PURE__*/React$1.createElement(LegendUnionIcon, {
+    width: 30,
+    height: 30,
+    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, {
+    id: "Title",
+    width: width
+  }, item.title))))) : '');
+};
+
+/* eslint-disable no-nested-ternary */
+const ICON_TYPE_SQUARE$2 = 'Square';
+const ICON_TYPE_LEGEND_UNION_ICON$2 = 'LegendUnionIcon';
+const ICON_TYPE_LEGEND_LINE_ICON$1 = 'LegendLineIcon';
+const BarChartsByWeeks = props => {
   const {
     className,
     title,
-    subtitle,
-    showTopValue,
-    value,
-    dotCut,
-    currencySign,
-    currencyType,
+    showHeaderTopValue,
+    headerValueTopTitle,
+    headerValueBottomTitle,
+    headerValue,
+    HeaderValueCurrencyType,
+    HeaderValueIsPercent,
+    barChartData,
+    isTitleOriganal,
     width,
     height,
-    textcolor,
-    isPercent
+    barChartColor,
+    barChartSecondColor,
+    xselectedColor,
+    tooltipTitle,
+    tooltipSecondTitle,
+    startWeekRange = 0,
+    endWeekRange = 0,
+    yAxisCounter,
+    isPercentValue,
+    interval,
+    showTitle,
+    showLegend,
+    legendData,
+    showTwoBars,
+    setLimitHeight,
+    setLimitLow
   } = props;
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$7, {
-    className: className || 'FormattedValue_ControlsContainer',
+
+  // const [BarChartContainerWidth, setBarChartContainerWidth] = useState(0);
+  // const [BarChartContainerHeight, setBarChartContainerHeight] = useState(0);
+
+  const controlsContainerRef = useRef();
+
+  // useEffect(() => {
+  //   const { offsetWidth } = controlsContainerRef.current;
+  //   setBarChartContainerWidth(offsetWidth - 20);
+  // }, [width]);
+
+  // useEffect(() => {
+  //   const { offsetHeight } = controlsContainerRef.current;
+  //   setBarChartContainerHeight(offsetHeight - 40);
+  // }, [height]);
+
+  const displayFormattedValue = value => {
+    if (!value) return '';
+    let formattedValue = '';
+    formattedValue = isPercentValue ? ''.concat('', value.toFixed(1), '%') : ''.concat('', getFormattedValue(value), getFormattedUnits(value));
+    return formattedValue;
+  };
+  const formmatedData = barChartData?.map(item => {
+    if (setLimitHeight && item.value > setLimitHeight) {
+      return {
+        title: item.title,
+        value: setLimitHeight,
+        secondValue: item.secondValue
+      };
+    }
+    if (setLimitLow && item.value < setLimitLow) {
+      return {
+        title: item.title,
+        value: setLimitLow,
+        secondValue: item.secondValue
+      };
+    }
+    return {
+      title: item.title,
+      value: item.value,
+      secondValue: item.secondValue
+    };
+  });
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const CustomTooltip = tooltipData => {
+    const {
+      active,
+      payload,
+      label
+    } = tooltipData;
+    if (!active || !payload || payload?.length === 0) return null;
+    const week = isTitleOriganal ? label : label && label?.toString().length === 6 ? label.toString().substring(4, 6) : 0;
+    let currentTooltipValue = 0;
+    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}             
+            ${displayFormattedValue(currentTooltipValue)}                                       
+          `), currentTooltipSecondValue ? /*#__PURE__*/React$1.createElement(TooltipLabel$3, null, `${tooltipSecondTitle}                        
+            ${displayFormattedValue(currentTooltipSecondValue)}                       
+          `) : '');
+  };
+  const getWeek = () => {
+    if (!barChartData || barChartData?.length === 0) return null;
+    const newFormattedData = barChartData?.map(item => ({
+      ...item,
+      titleWeek: item.title && isTitleOriganal ? item.title : item.title?.toString().length === 6 ? item.title.toString().substring(4, 6) : 0
+    }));
+    return newFormattedData;
+  };
+  const displayEventWeeksElements = () => {
+    if (!barChartData || barChartData.length === 0) return '';
+    return /*#__PURE__*/React$1.createElement(EventWeeksLegendDataElementsContainer, null, getWeek()?.map(item => /*#__PURE__*/React$1.createElement(EventWeeksLegendDataElement, {
+      color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : '',
+      textColor: item.title >= startWeekRange && item.title <= endWeekRange ? '#212121' : '#B1B1B1',
+      fontWeight: item.title >= startWeekRange && item.title <= endWeekRange ? 600 : 400,
+      borderLeftRadius: startWeekRange && item?.title?.toString() === startWeekRange?.toString() ? '12px' : '0px',
+      borderRightRadius: endWeekRange && item?.title?.toString() === endWeekRange?.toString() ? '12px' : '0px'
+    }, item.titleWeek)));
+  };
+  const displayEventWeeksLegendData = () => /*#__PURE__*/React$1.createElement(EventWeeksLegendMainContainer, {
+    className: "EventWeeksLegendMainContainer"
+  }, displayEventWeeksElements());
+  const getControlsHeight = () => {
+    if (!controlsContainerRef?.current) return '100%';
+    const {
+      offsetHeight
+    } = controlsContainerRef.current;
+    let newHeight = offsetHeight - 20;
+    if (title) {
+      newHeight -= 20;
+    }
+    if (headerValueTopTitle) {
+      newHeight -= 16;
+    }
+    if (headerValueBottomTitle) {
+      newHeight -= 16;
+    }
+    if (headerValue) {
+      newHeight -= 42;
+    }
+    if (showLegend) {
+      newHeight -= 34;
+    }
+    return `${newHeight}px`;
+  };
+  return /*#__PURE__*/React$1.createElement(ControlsContainer$6, {
+    className: className,
     height: height,
     width: width,
-    textcolor: textcolor
-  }, /*#__PURE__*/React$1.createElement(Controls$6, {
-    className: "Controls",
+    ref: controlsContainerRef
+  }, /*#__PURE__*/React$1.createElement(Controls$5, {
+    height: getControlsHeight()
+  }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$b, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
+    title: headerValueTopTitle,
+    subtitle: headerValueBottomTitle,
+    showTopValue: showHeaderTopValue,
+    value: headerValue,
+    currencyType: HeaderValueCurrencyType,
+    isPercent: HeaderValueIsPercent,
+    dotCut: true
+  })), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
+    width: width,
     height: height,
-    width: width
-  }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer$3, {
-    className: "TitleAndValueContainer"
-  }, title ? /*#__PURE__*/React$1.createElement(Title$c, {
-    className: "Title",
-    width: width
-  }, title) : '', showTopValue && /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$1, {
-    className: "CurrencySignAndFormattedValueContainer"
-  }, /*#__PURE__*/React$1.createElement(FormattedValueText, {
-    className: "FormattedValueText",
-    width: width
-  }, /*#__PURE__*/React$1.createElement(CurrencySignOrPercent, {
-    className: "CurrencySignOrPercent"
-  }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '', /*#__PURE__*/React$1.createElement(CurrencySignOrPercent, {
-    className: "CurrencySignOrPercent"
-  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React$1.createElement(Title$c, {
-    className: "Title",
-    width: width
-  }, subtitle) : '')));
+    data: formmatedData,
+    margin: {
+      top: 20,
+      right: 0,
+      bottom: 0,
+      left: -5
+    }
+  }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
+    strokeDasharray: "3 3",
+    vertical: false
+  }), /*#__PURE__*/React$1.createElement(XAxis, {
+    dataKey: "title",
+    tick: false,
+    tickLine: false
+  }), /*#__PURE__*/React$1.createElement(YAxis, {
+    tickCount: yAxisCounter,
+    interval: interval || 'preserveEnd',
+    domain: [0, 'auto'],
+    tick: {
+      fill: '#B1B1B1'
+    },
+    axisLine: false,
+    fontWeight: 400,
+    fontSize: "12px",
+    tickLine: false,
+    tickFormatter: value => `${displayFormattedValue(value)}`
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null), !showTwoBars ? /*#__PURE__*/React$1.createElement(Bar, {
+    dataKey: "value",
+    name: "title",
+    maxBarSize: 30,
+    radius: [4, 4, 0, 0],
+    fill: barChartColor
+  }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Bar, {
+    dataKey: "value",
+    name: "title",
+    maxBarSize: 30,
+    stackId: "a",
+    fill: barChartColor
+  }), /*#__PURE__*/React$1.createElement(Bar, {
+    dataKey: "secondValue",
+    name: "title",
+    maxBarSize: 30,
+    radius: [4, 4, 0, 0],
+    stackId: "a",
+    fill: barChartSecondColor
+  })))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/React$1.createElement(LegendWrapper, null, /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
+    legendData: legendData
+  }))));
 };
-FormattedValue$2.propTypes = {
+BarChartsByWeeks.propTypes = {
   className: PropTypes.string,
   title: PropTypes.string,
-  subtitle: PropTypes.string,
-  showTopValue: PropTypes.bool,
-  value: PropTypes.number,
-  dotCut: PropTypes.bool,
-  currencySign: PropTypes.bool,
-  currencyType: PropTypes.string,
+  showHeaderTopValue: PropTypes.bool,
+  headerValueTopTitle: PropTypes.string,
+  headerValueBottomTitle: PropTypes.string,
+  headerValue: PropTypes.number,
+  HeaderValueCurrencyType: PropTypes.string,
+  HeaderValueIsPercent: PropTypes.bool,
+  barChartData: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    value: PropTypes.number
+  })),
+  isTitleOriganal: PropTypes.bool,
   width: PropTypes.string,
   height: PropTypes.string,
-  textcolor: PropTypes.string,
-  isPercent: PropTypes.bool
+  barChartColor: PropTypes.string,
+  barChartSecondColor: PropTypes.string,
+  xselectedColor: PropTypes.string,
+  startWeekRange: PropTypes.string,
+  endWeekRange: PropTypes.string,
+  tooltipTitle: PropTypes.string,
+  tooltipSecondTitle: PropTypes.string,
+  yAxisCounter: PropTypes.number,
+  isPercentValue: PropTypes.bool,
+  interval: PropTypes.string,
+  showTitle: PropTypes.bool,
+  showLegend: PropTypes.bool,
+  legendData: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    iconType: PropTypes.oneOf([ICON_TYPE_SQUARE$2, ICON_TYPE_LEGEND_UNION_ICON$2, ICON_TYPE_LEGEND_LINE_ICON$1]).isRequired,
+    iconColor: PropTypes.string.isRequired
+  })),
+  showTwoBars: PropTypes.bool,
+  setLimitHeight: PropTypes.number,
+  setLimitLow: PropTypes.number
 };
-FormattedValue$2.defaultProps = {
-  className: 'FormattedValue_ControlsContainer',
+BarChartsByWeeks.defaultProps = {
+  className: '',
   title: '',
-  subtitle: '',
-  showTopValue: true,
-  value: 0,
-  dotCut: false,
-  currencySign: false,
-  currencyType: 'USD',
+  showHeaderTopValue: true,
+  headerValueTopTitle: '',
+  headerValueBottomTitle: '',
+  headerValue: 0,
+  HeaderValueCurrencyType: '',
+  HeaderValueIsPercent: false,
+  barChartData: [{
+    title: '202320',
+    value: 542366
+  }, {
+    title: '202321',
+    value: 699511
+  }, {
+    title: '202322',
+    value: 403092
+  }, {
+    title: '202323',
+    value: 396184
+  }, {
+    title: '202324',
+    value: 415317
+  }, {
+    title: '202325',
+    value: 568376
+  }, {
+    title: '202326',
+    value: 1078121
+  }, {
+    title: '202327',
+    value: 347930
+  }, {
+    title: '202328',
+    value: 346258
+  }, {
+    title: '202329',
+    value: 350184
+  }],
   width: '100%',
   height: '100%',
-  textcolor: '#212121',
-  isPercent: false
+  barChartColor: '#BD9EFF',
+  barChartSecondColor: '#42977A',
+  xselectedColor: '#42977A',
+  tooltipTitle: 'Sales',
+  tooltipSecondTitle: 'Sales 2',
+  startWeekRange: 0,
+  endWeekRange: 0,
+  yAxisCounter: 10,
+  isPercentValue: false,
+  interval: 'preserveEnd',
+  showTitle: true,
+  showLegend: true,
+  isTitleOriganal: false,
+  legendData: [{
+    title: 'Sales',
+    iconType: ICON_TYPE_SQUARE$2,
+    iconColor: '#90CE9C'
+  }, {
+    title: 'Category Average',
+    iconType: ICON_TYPE_LEGEND_LINE_ICON$1,
+    iconColor: '#C906FD'
+  }],
+  showTwoBars: false,
+  setLimitHeight: null,
+  setLimitLow: null
 };
 
-const ControlsContainer$6 = styled.div`
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  color: #212121;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  min-width: 250px;
-`;
-const Controls$5 = styled.div`
-  height: 100%;
-  width: 100%;
-  background: white;
-  display: flex;
-  flex-direction: column;
-`;
-const TooltipDiv$3 = styled.div`
-  border-radius: 5px;
-  padding: 8px 12px;
-  background: white;
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-  margin: 0;
-`;
-const TooltipLabel$3 = styled.div`
-  color: #212121;
-  font-size: 14px;
-  font-weight: 400;
-  width: fit-content;
-`;
-const TooltipTitle$3 = styled.div`
-  color: #212121;
-  font-size: 14px;
-  font-weight: 600;
-`;
-const TitleAndValueContainer$2 = styled.div`
-  padding: 0 1rem;
-`;
-const Title$b = styled.h5`
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 20px;
-  margin: 0;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const EventWeeksLegendMainContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  margin: 2px 0 0 0;
-  padding-left: 55px;
-  align-items: center;
-`;
-const EventWeeksLegendDataElementsContainer = styled.div`
-  display: flex;
-  margin: 0px;
-  align-items: center;
-  justify-content: space-around;
-  width: 100%;
-`;
-const EventWeeksLegendDataElement = styled.h4`
-  display: flex;
-  font-weight: ${props => props.fontWeight};
-  font-size: 12px;
-  line-height: 15px;
-  margin: 0;
-  width: 100%;
-  justify-content: center;
-  align-content: center;
-  color: ${props => props.textColor};
-  border-top-left-radius: ${props => props.borderLeftRadius};
-  border-bottom-left-radius: ${props => props.borderLeftRadius};
-  border-top-right-radius: ${props => props.borderRightRadius};
-  border-bottom-right-radius: ${props => props.borderRightRadius};
-  background: ${props => props.color};
-  @media (max-width: 1536px) {
-    font-size: 11px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-`;
-const LegendWrapper = styled.div`
-  padding-top: 15px;
-`;
+const scrollableStyles$6 = `
+  overflow-y: auto;
 
-const LegendUnionIcon = _ref => {
-  let {
-    width = '18',
-    height = '5',
-    color = '#9CCB3B'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 18 5",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M11.45 2H17C17.2761 2 17.5 2.22386 17.5 2.5C17.5 2.77614 17.2761 3 17 3H11.45C11.2184 4.14112 10.2095 5 9 5C7.79052 5 6.78164 4.14112 6.55001 3H1C0.723858 3 0.5 2.77614 0.5 2.5C0.5 2.22386 0.723858 2 1 2H6.55001C6.78164 0.85888 7.79052 0 9 0C10.2095 0 11.2184 0.85888 11.45 2Z",
-    fill: color
-  }));
-};
+  &::-webkit-scrollbar {
+    width: 0.5em; /* 8px → 0.5em */
+  }
 
-const LegendLineIcon = _ref => {
-  let {
-    width = '19',
-    height = '3',
-    color = '#9CCB3B'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 19 3",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M0 1.5C0 0.671573 0.671573 0 1.5 0H17.5C18.3284 0 19 0.671572 19 1.5C19 2.32843 18.3284 3 17.5 3H1.5C0.671575 3 0 2.32843 0 1.5Z",
-    fill: color
-  }));
-};
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+  }
 
-const ControlsContainer$5 = styled.div`
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+  }
+`;
+const ControlsContainer$4 = styled.div`
   position: relative;
   font-family: "Poppins", sans-serif;
-  font-size: ${props => props.rootFont};
+  font-size: ${props => props.rootFont || '1em'}; /* Base font size */
   color: ${props => props.textColor};
   width: ${props => props.width};
   height: ${props => props.height};
+  padding: ${props => props.containerPadding || '0'};
+  display: flex;
+  align-items: center;
+  @media (max-width: 1536px) {
+    ${scrollableStyles$6}
+  }
 
   > * {
     box-sizing: border-box;
   }
 `;
-const Controls$4 = styled.div`
+const Controls$3 = styled.div`
   display: flex;
-  gap: 20px;
   flex-direction: column;
   width: 100%;
   height: 100%;
   background: white;
+  border-radius: 12px;  
 `;
-const LegendDataContainer = styled.div`
+const TooltipDiv$2 = styled.div`
   display: flex;
-  justify-content: center;
-  gap: 40px;
-  margin-top: auto;
+  background: white;
+  padding: 0.375em 0.625em; /* 6px 10px → 0.375em 0.625em */
+  margin: 0;
+`;
+const TooltipLabel$2 = styled.p`
+  color: #212121;
+  font-family: "Poppins", sans-serif;
+  font-size: 0.75em; /* 12px → 0.75em */
+  font-weight: 400;
+  font-style: normal;
+  width: max-content;
+  line-height: normal;
+  margin: 0;
+`;
+const TitleAndValueContainer$1 = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 1.25em; /* 20px → 1.25em */
+`;
+const Title$9 = styled.h4`
+  font-weight: 500;
+  font-size: ${props => props.titleFontSize || '1.125em'}; /* Default: 18px → 1.125em */
+  margin: 0;
   @media (max-width: 1536px) {
-    gap: 38px;
+    font-size: 0.875em; /* 14px → 0.875em */
   }
   @media (max-width: 1366px) {
-    gap: 30px;
+    font-size: 0.75em; /* 12px → 0.75em */
   }
 `;
-const TitleAndIconContainer = styled.div`
+const CurrencySignAndFormattedValueContainer = styled.div`
   display: flex;
   align-items: center;
+  gap: 0.3125em; /* 5px → 0.3125em */
+  align-items: baseline;
 `;
-const Title$a = styled.h4`
+const CurrencySign$1 = styled.span`
+  font-weight: 500;
+  font-size: 1em; /* 16px → 1em */
+  @media (max-width: 1536px) {
+    font-size: 0.875em; /* 14px → 0.875em */
+  }
+  @media (max-width: 1366px) {
+    font-size: 0.6875em; /* 11px → 0.6875em */
+  }
+`;
+const FormattedValue$2 = styled.div`
+  font-weight: 500;
+  font-size: ${props => props.FormattedValueFontSize || '2.5em'}; /* Default: 40px → 2.5em */
+  @media (max-width: 1536px) {
+    font-size: 1.5em; /* 24px → 1.5em */
+  }
+  @media (max-width: 1366px) {
+    font-size: 1.25em; /* 20px → 1.25em */
+  }
+`;
+const TextAfterValue = styled.div`  
   font-weight: 400;
-  font-size: 14px;
-  line-height: 27px;
-  margin: 0 0 0 10px;
+  font-size: 0.75em; /* 12px → 0.75em */
   @media (max-width: 1536px) {
-    font-size: 14px;
+    font-size: 0.6875em; /* 11px → 0.6875em */
   }
   @media (max-width: 1366px) {
-    font-size: 12px;
+    font-size: 0.625em; /* 10px → 0.625em */
   }
 `;
-const LegendColorRectangle$1 = styled.div`
+const DoughnutChartAndLegendContainer = styled.div`
+  display: flex;
+  flex-direction: ${props => props.legendBelow ? 'column' : 'row'};
+  gap: 0.75em; /* 12px → 0.75em */
+  justify-content: space-between;
+  margin-top: auto;
+  padding: 0 1.25em; /* 20px → 1.25em */
+  margin-bottom: 1.25em; /* 20px → 1.25em */
+`;
+const DoughnutChartContainer = styled.div`
+  display: flex;
+  align-items: center;   
+  min-width: 90px;
+  min-height: 90px; 
+`;
+const LegendContainer$2 = styled.div`
+  padding-left: 0.625em; /* 10px → 0.625em */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly; 
+`;
+const LegendControlsContainer = styled.div`
+  display: flex;
+  gap: 0.5em; /* 8px → 0.5em */
+  align-items: center;
+  margin-bottom: 0.375em; /* 6px → 0.375em */
+`;
+const LegendTitleAndFormatedValueContainer = styled.div`
+  flex-grow: 1;
+`;
+styled.div`
+  font-size: 0.875rem;
+`;
+const LegendColorRectangle = styled.div`
   width: 0.875rem;
   min-width: 0.875rem;
   height: 0.875rem;
   border-radius: 2px;
   background: ${props => props.color};
 `;
+const LegendTitle = styled.h5`
+  font-weight: 400;
+  font-size: 1em; /* 16px → 1em */
+  gap: 0.3125em; /* 5px → 0.3125em */
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  @media (max-width: 1536px) {
+    font-size: 0.75em; /* 11px → 0.6875em */
+  }
+  @media (max-width: 1366px) {
+    font-size: 0.625em; /* 10px → 0.625em */
+  }
+`;
+const LegendFormattedValue = styled.span`
+  font-weight: 500;
+  font-size: 0.875em; /* 14px → 0.875em */
+  white-space: nowrap;
+`;
 
-/* eslint-disable no-nested-ternary */
-const ICON_TYPE_SQUARE$3 = 'Square';
-const ICON_TYPE_LEGEND_UNION_ICON$3 = 'LegendUnionIcon';
-const ICON_TYPE_LEGEND_LINE_ICON$2 = 'LegendLineIcon';
-const PerformanceAnalyticsLegend = props => {
-  const {
-    className = 'PerformanceAnalyticsLegend',
-    width = '100%',
-    height = '100%',
-    legendData = [{
-      title: '',
-      iconType: ICON_TYPE_SQUARE$3,
-      iconColor: '#1F7677'
-    }]
-  } = props;
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$5, {
-    className: className,
-    height: height,
-    width: width
-  }, legendData?.length > 0 ? /*#__PURE__*/React$1.createElement(Controls$4, {
-    height: height,
-    width: width
-  }, /*#__PURE__*/React$1.createElement(LegendDataContainer, {
-    id: "LegendDataContainer"
-  }, legendData?.map((item, i) => /*#__PURE__*/React$1.createElement(TitleAndIconContainer, {
-    key: `${item.title + i}`
-  }, item.iconType === ICON_TYPE_SQUARE$3 ? /*#__PURE__*/React$1.createElement(LegendColorRectangle$1, {
-    color: item.iconColor
-  }) : item.iconType === ICON_TYPE_LEGEND_UNION_ICON$3 ? /*#__PURE__*/React$1.createElement(LegendUnionIcon, {
-    width: 30,
-    height: 30,
-    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, {
-    id: "Title",
-    width: width
-  }, item.title))))) : '');
-};
-
-/* eslint-disable no-nested-ternary */
-const ICON_TYPE_SQUARE$2 = 'Square';
-const ICON_TYPE_LEGEND_UNION_ICON$2 = 'LegendUnionIcon';
-const ICON_TYPE_LEGEND_LINE_ICON$1 = 'LegendLineIcon';
-const BarChartsByWeeks = props => {
+const TotalDoughnutChart = props => {
   const {
     className,
-    title,
-    showHeaderTopValue,
-    headerValueTopTitle,
-    headerValueBottomTitle,
-    headerValue,
-    HeaderValueCurrencyType,
-    HeaderValueIsPercent,
-    barChartData,
-    isTitleOriganal,
     width,
     height,
-    barChartColor,
-    barChartSecondColor,
-    xselectedColor,
-    tooltipTitle,
-    tooltipSecondTitle,
-    startWeekRange = 0,
-    endWeekRange = 0,
-    yAxisCounter,
-    isPercentValue,
-    interval,
-    showTitle,
-    showLegend,
+    title,
+    value,
+    rootFont,
+    containerPadding,
+    addingBenchmark,
+    dotCut,
+    currencySign,
+    currencyType,
     legendData,
-    showTwoBars,
-    setLimitHeight,
-    setLimitLow
-  } = props;
-
-  // const [BarChartContainerWidth, setBarChartContainerWidth] = useState(0);
-  // const [BarChartContainerHeight, setBarChartContainerHeight] = useState(0);
-
-  const controlsContainerRef = useRef();
-
-  // useEffect(() => {
-  //   const { offsetWidth } = controlsContainerRef.current;
-  //   setBarChartContainerWidth(offsetWidth - 20);
-  // }, [width]);
-
-  // useEffect(() => {
-  //   const { offsetHeight } = controlsContainerRef.current;
-  //   setBarChartContainerHeight(offsetHeight - 40);
-  // }, [height]);
-
-  const displayFormattedValue = value => {
-    if (!value) return '';
-    let formattedValue = '';
-    formattedValue = isPercentValue ? ''.concat('', value.toFixed(1), '%') : ''.concat('', getFormattedValue(value), getFormattedUnits(value));
-    return formattedValue;
-  };
-  const formmatedData = barChartData?.map(item => {
-    if (setLimitHeight && item.value > setLimitHeight) {
-      return {
-        title: item.title,
-        value: setLimitHeight,
-        secondValue: item.secondValue
-      };
-    }
-    if (setLimitLow && item.value < setLimitLow) {
-      return {
-        title: item.title,
-        value: setLimitLow,
-        secondValue: item.secondValue
-      };
+    legendBelow,
+    itemsPercentagesValueAside,
+    itemsBoldedValues,
+    itemsValuesSeparateLine,
+    textcolor,
+    titleFontSize,
+    FormattedValueFontSize,
+    isPercent,
+    hideTitleAndValue,
+    noDataText,
+    textAfterValue
+  } = props;
+  const [DoughnutChartRadius, setDoughnutChartRadius] = useState(0);
+  const [zoomResolution, setZoomResolution] = useState(1);
+  const DoughnutChartContainerRef = useRef();
+  const dotCutTrenty = row => {
+    if (!row || !row.value) return null;
+    let valueNew = 0;
+    if (row?.value && Math.abs(row.value) > 0 && row.value % 1 !== 0) {
+      valueNew = row?.value?.toFixed(2);
+    } else {
+      valueNew = row?.value;
     }
-    return {
-      title: item.title,
-      value: item.value,
-      secondValue: item.secondValue
+    return dotCut ? getFormattedValue(valueNew) : getNumberWithCommas(valueNew);
+  };
+  useEffect(() => {
+    const handleResize = () => {
+      setZoomResolution(window.devicePixelRatio);
     };
-  });
 
-  // eslint-disable-next-line react/no-unstable-nested-components
-  const CustomTooltip = tooltipData => {
-    const {
-      active,
-      payload,
-      label
-    } = tooltipData;
-    if (!active || !payload || payload?.length === 0) return null;
-    const week = isTitleOriganal ? label : label && label?.toString().length === 6 ? label.toString().substring(4, 6) : 0;
-    let currentTooltipValue = 0;
-    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}             
-            ${displayFormattedValue(currentTooltipValue)}                                       
-          `), currentTooltipSecondValue ? /*#__PURE__*/React$1.createElement(TooltipLabel$3, null, `${tooltipSecondTitle}                        
-            ${displayFormattedValue(currentTooltipSecondValue)}                       
-          `) : '');
-  };
-  const getWeek = () => {
-    if (!barChartData || barChartData?.length === 0) return null;
-    const newFormattedData = barChartData?.map(item => ({
-      ...item,
-      titleWeek: item.title && isTitleOriganal ? item.title : item.title?.toString().length === 6 ? item.title.toString().substring(4, 6) : 0
-    }));
-    return newFormattedData;
-  };
-  const displayEventWeeksElements = () => {
-    if (!barChartData || barChartData.length === 0) return '';
-    return /*#__PURE__*/React$1.createElement(EventWeeksLegendDataElementsContainer, null, getWeek()?.map(item => /*#__PURE__*/React$1.createElement(EventWeeksLegendDataElement, {
-      color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : '',
-      textColor: item.title >= startWeekRange && item.title <= endWeekRange ? '#212121' : '#B1B1B1',
-      fontWeight: item.title >= startWeekRange && item.title <= endWeekRange ? 600 : 400,
-      borderLeftRadius: startWeekRange && item?.title?.toString() === startWeekRange?.toString() ? '12px' : '0px',
-      borderRightRadius: endWeekRange && item?.title?.toString() === endWeekRange?.toString() ? '12px' : '0px'
-    }, item.titleWeek)));
-  };
-  const displayEventWeeksLegendData = () => /*#__PURE__*/React$1.createElement(EventWeeksLegendMainContainer, {
-    className: "EventWeeksLegendMainContainer"
-  }, displayEventWeeksElements());
-  const getControlsHeight = () => {
-    if (!controlsContainerRef?.current) return '100%';
+    // Add event listener for window resize to update zoom resolution
+    window.addEventListener('resize', handleResize);
+
+    // Initial update of zoom resolution
+    setZoomResolution(window.devicePixelRatio);
+
+    // Clean up the event listener when component unmounts
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  useEffect(() => {
+    const MIN_RADIUS = 45;
+    if (!DoughnutChartContainerRef) return;
     const {
-      offsetHeight
-    } = controlsContainerRef.current;
-    let newHeight = offsetHeight - 20;
-    if (title) {
-      newHeight -= 20;
-    }
-    if (headerValueTopTitle) {
-      newHeight -= 16;
-    }
-    if (headerValueBottomTitle) {
-      newHeight -= 16;
+      current
+    } = DoughnutChartContainerRef;
+    if (!current) return;
+    const DoughnutChartContainerWidth = current?.clientWidth;
+    const DoughnutChartContainerHeight = current?.clientHeight;
+    const resolutionFactor = zoomResolution && zoomResolution >= 1 ? zoomResolution : 1;
+    let radius = DoughnutChartContainerWidth > DoughnutChartContainerHeight ? DoughnutChartContainerHeight / 2 / resolutionFactor : DoughnutChartContainerWidth / 2 / resolutionFactor;
+    if (radius < MIN_RADIUS) {
+      radius = MIN_RADIUS;
     }
-    if (headerValue) {
-      newHeight -= 42;
+    setDoughnutChartRadius(radius);
+  }, [height, width, DoughnutChartContainerRef?.current?.clientWidth, DoughnutChartContainerRef?.current?.clientHeight, zoomResolution]);
+  const displayLegendValue = row => /*#__PURE__*/React$1.createElement(LegendFormattedValue, {
+    style: {
+      fontWeight: itemsBoldedValues ? '700' : '500'
     }
-    if (showLegend) {
-      newHeight -= 34;
+  }, !isPercent && row.value && currencySign ? getCurrencySign(currencyType, row.value) : '', !isPercent && row.value !== undefined && row.value !== null ? dotCutTrenty(row) : !isPercent && 'No Data', !isPercent && row.value && dotCut ? getFormattedUnits(row.value) : '', !isPercent && row.value && itemsPercentagesValueAside && /*#__PURE__*/React$1.createElement("span", {
+    style: {
+      fontWeight: itemsBoldedValues ? '700' : '400'
     }
-    return `${newHeight}px`;
-  };
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$6, {
+  }, ' (', `${Math.round(row.value / value * 100)}%)`), isPercent && row.value && `${row.value.toFixed(1)}%`);
+  return /*#__PURE__*/React$1.createElement(ControlsContainer$4, {
     className: className,
     height: height,
     width: width,
-    ref: controlsContainerRef
-  }, /*#__PURE__*/React$1.createElement(Controls$5, {
-    height: getControlsHeight()
-  }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$b, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$2, {
-    title: headerValueTopTitle,
-    subtitle: headerValueBottomTitle,
-    showTopValue: showHeaderTopValue,
-    value: headerValue,
-    currencyType: HeaderValueCurrencyType,
-    isPercent: HeaderValueIsPercent,
-    dotCut: true
-  })), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
-  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
+    rootFont: rootFont,
+    containerPadding: containerPadding,
+    textcolor: textcolor
+  }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
+    className: "NoDataFoundMessage",
+    noDataText: noDataText
+  }) : /*#__PURE__*/React$1.createElement(Controls$3, {
+    className: "Controls",
+    height: height,
+    width: width
+  }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$1, {
+    className: "TitleAndValueContainer"
+  }, /*#__PURE__*/React$1.createElement(Title$9, {
+    className: "Title",
+    fontSize: titleFontSize
+  }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer, {
+    className: "CurrencySignAndFormattedValueContainer"
+  }, /*#__PURE__*/React$1.createElement(FormattedValue$2, {
+    className: "FormattedValue",
+    fontSize: FormattedValueFontSize,
+    width: width
+  }, /*#__PURE__*/React$1.createElement(CurrencySign$1, {
+    className: "CurrencySign"
+  }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : ''), textAfterValue ? /*#__PURE__*/React$1.createElement(TextAfterValue, {
+    className: "TextAfterValue"
+  }, textAfterValue) : '', addingBenchmark && /*#__PURE__*/React$1.createElement(Benchmark, null))), /*#__PURE__*/React$1.createElement(DoughnutChartAndLegendContainer, {
+    legendBelow: legendBelow
+  }, /*#__PURE__*/React$1.createElement(DoughnutChartContainer, {
     width: width,
     height: height,
-    data: formmatedData,
-    margin: {
-      top: 20,
-      right: 0,
-      bottom: 0,
-      left: -5
-    }
-  }, /*#__PURE__*/React$1.createElement(CartesianGrid, {
-    strokeDasharray: "3 3",
-    vertical: false
-  }), /*#__PURE__*/React$1.createElement(XAxis, {
-    dataKey: "title",
-    tick: false,
-    tickLine: false
-  }), /*#__PURE__*/React$1.createElement(YAxis, {
-    tickCount: yAxisCounter,
-    interval: interval || 'preserveEnd',
-    domain: [0, 'auto'],
-    tick: {
-      fill: '#B1B1B1'
-    },
-    axisLine: false,
-    fontWeight: 400,
-    fontSize: "12px",
-    tickLine: false,
-    tickFormatter: value => `${displayFormattedValue(value)}`
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, {
-    content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null), !showTwoBars ? /*#__PURE__*/React$1.createElement(Bar, {
-    dataKey: "value",
-    name: "title",
-    maxBarSize: 30,
-    radius: [4, 4, 0, 0],
-    fill: barChartColor
-  }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Bar, {
+    ref: DoughnutChartContainerRef
+  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(PieChart$1, null, /*#__PURE__*/React$1.createElement(Pie, {
+    fill: "#8884d8",
     dataKey: "value",
-    name: "title",
-    maxBarSize: 30,
-    stackId: "a",
-    fill: barChartColor
-  }), /*#__PURE__*/React$1.createElement(Bar, {
-    dataKey: "secondValue",
-    name: "title",
-    maxBarSize: 30,
-    radius: [4, 4, 0, 0],
-    stackId: "a",
-    fill: barChartSecondColor
-  })))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/React$1.createElement(LegendWrapper, null, /*#__PURE__*/React$1.createElement(PerformanceAnalyticsLegend, {
-    legendData: legendData
-  }))));
+    blendStroke: true,
+    startAngle: -270,
+    data: legendData,
+    outerRadius: DoughnutChartRadius - 4,
+    innerRadius: DoughnutChartRadius - DoughnutChartRadius / 3
+  }, legendData.map(row => /*#__PURE__*/React$1.createElement(Cell, {
+    key: `cell-${row.name}`,
+    fill: row.color
+  }))), /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    content: /*#__PURE__*/React$1.createElement(CustomTooltip, {
+      value: value,
+      isPercent: isPercent
+    })
+  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null)))), /*#__PURE__*/React$1.createElement(LegendContainer$2, null, legendData.map(row => /*#__PURE__*/React$1.createElement(LegendControlsContainer, {
+    key: row.name
+  }, /*#__PURE__*/React$1.createElement(LegendColorRectangle, {
+    color: row.color
+  }), /*#__PURE__*/React$1.createElement(LegendTitleAndFormatedValueContainer, null, /*#__PURE__*/React$1.createElement(LegendTitle, {
+    style: {
+      flexDirection: itemsValuesSeparateLine ? 'column' : 'row',
+      alignItems: itemsValuesSeparateLine ? 'baseline' : 'center'
+    }
+  }, row.name, displayLegendValue(row)))))))));
 };
-BarChartsByWeeks.propTypes = {
+TotalDoughnutChart.propTypes = {
   className: PropTypes.string,
   title: PropTypes.string,
-  showHeaderTopValue: PropTypes.bool,
-  headerValueTopTitle: PropTypes.string,
-  headerValueBottomTitle: PropTypes.string,
-  headerValue: PropTypes.number,
-  HeaderValueCurrencyType: PropTypes.string,
-  HeaderValueIsPercent: PropTypes.bool,
-  barChartData: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string,
-    value: PropTypes.number
+  value: PropTypes.number,
+  rootFont: PropTypes.string,
+  containerPadding: PropTypes.string,
+  addingBenchmark: PropTypes.bool,
+  dotCut: PropTypes.bool,
+  currencySign: PropTypes.bool,
+  currencyType: PropTypes.string,
+  legendData: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string,
+    value: PropTypes.number,
+    name: PropTypes.string
   })),
-  isTitleOriganal: PropTypes.bool,
+  legendBelow: PropTypes.bool,
+  itemsPercentagesValueAside: PropTypes.bool,
+  itemsBoldedValues: PropTypes.bool,
+  itemsValuesSeparateLine: PropTypes.bool,
   width: PropTypes.string,
   height: PropTypes.string,
-  barChartColor: PropTypes.string,
-  barChartSecondColor: PropTypes.string,
-  xselectedColor: PropTypes.string,
-  startWeekRange: PropTypes.string,
-  endWeekRange: PropTypes.string,
-  tooltipTitle: PropTypes.string,
-  tooltipSecondTitle: PropTypes.string,
-  yAxisCounter: PropTypes.number,
-  isPercentValue: PropTypes.bool,
-  interval: PropTypes.string,
-  showTitle: PropTypes.bool,
-  showLegend: PropTypes.bool,
-  legendData: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    iconType: PropTypes.oneOf([ICON_TYPE_SQUARE$2, ICON_TYPE_LEGEND_UNION_ICON$2, ICON_TYPE_LEGEND_LINE_ICON$1]).isRequired,
-    iconColor: PropTypes.string.isRequired
-  })),
-  showTwoBars: PropTypes.bool,
-  setLimitHeight: PropTypes.number,
-  setLimitLow: PropTypes.number
+  textcolor: PropTypes.string,
+  titleFontSize: PropTypes.string,
+  FormattedValueFontSize: PropTypes.string,
+  isPercent: PropTypes.bool,
+  hideTitleAndValue: PropTypes.bool,
+  noDataText: PropTypes.string,
+  textAfterValue: PropTypes.string
 };
-BarChartsByWeeks.defaultProps = {
+TotalDoughnutChart.defaultProps = {
   className: '',
   title: '',
-  showHeaderTopValue: true,
-  headerValueTopTitle: '',
-  headerValueBottomTitle: '',
-  headerValue: 0,
-  HeaderValueCurrencyType: '',
-  HeaderValueIsPercent: false,
-  barChartData: [{
-    title: '202320',
-    value: 542366
-  }, {
-    title: '202321',
-    value: 699511
-  }, {
-    title: '202322',
-    value: 403092
-  }, {
-    title: '202323',
-    value: 396184
-  }, {
-    title: '202324',
-    value: 415317
-  }, {
-    title: '202325',
-    value: 568376
-  }, {
-    title: '202326',
-    value: 1078121
-  }, {
-    title: '202327',
-    value: 347930
-  }, {
-    title: '202328',
-    value: 346258
-  }, {
-    title: '202329',
-    value: 350184
-  }],
+  value: 0,
+  rootFont: '18px',
+  containerPadding: '0px',
+  addingBenchmark: false,
+  dotCut: false,
+  currencySign: false,
+  currencyType: 'USD',
+  legendData: [],
+  legendBelow: false,
+  itemsPercentagesValueAside: true,
+  itemsBoldedValues: true,
+  itemsValuesSeparateLine: true,
   width: '100%',
   height: '100%',
-  barChartColor: '#BD9EFF',
-  barChartSecondColor: '#42977A',
-  xselectedColor: '#42977A',
-  tooltipTitle: 'Sales',
-  tooltipSecondTitle: 'Sales 2',
-  startWeekRange: 0,
-  endWeekRange: 0,
-  yAxisCounter: 10,
-  isPercentValue: false,
-  interval: 'preserveEnd',
-  showTitle: true,
-  showLegend: true,
-  isTitleOriganal: false,
-  legendData: [{
-    title: 'Sales',
-    iconType: ICON_TYPE_SQUARE$2,
-    iconColor: '#90CE9C'
-  }, {
-    title: 'Category Average',
-    iconType: ICON_TYPE_LEGEND_LINE_ICON$1,
-    iconColor: '#C906FD'
-  }],
-  showTwoBars: false,
-  setLimitHeight: null,
-  setLimitLow: null
+  textcolor: '#212121',
+  titleFontSize: '18px',
+  FormattedValueFontSize: '40px',
+  isPercent: false,
+  hideTitleAndValue: false,
+  noDataText: 'No Data',
+  textAfterValue: ''
+};
+function CustomTooltip(_ref) {
+  let {
+    active,
+    payload,
+    value,
+    isPercent = false
+  } = _ref;
+  if (active && payload && payload.length) {
+    // eslint-disable-next-line no-nested-ternary
+    const percent = value && value !== 0 && !isPercent ? (payload[0].value / value * 100).toFixed(1) : value && isPercent ? payload[0].value.toFixed(1) : 0;
+    return /*#__PURE__*/React$1.createElement(TooltipDiv$2, null, /*#__PURE__*/React$1.createElement(TooltipLabel$2, null, `${payload[0].name} ${percent}%`));
+  }
+}
+CustomTooltip.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  active: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  payload: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  value: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  isPercent: PropTypes.any
+};
+CustomTooltip.defaultProps = {
+  active: '',
+  payload: '',
+  value: '',
+  isPercent: false
+};
+
+const TooltipContainer$2 = styled.div`
+  --tooltip-text-color: black;
+  --tooltip-background-color: white;
+  --tooltip-margin: 40px;
+  --tooltip-arrow-size: 10px;
+  position: absolute;
+  z-index: 999999;
+  top: ${props => props.top};
+  left: ${props => props.left};
+`;
+const TooltipWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+const TooltipTip = styled.div`
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  border-radius: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 12px;
+  color: var(--tooltip-text-color);
+  background: var(--tooltip-background-color);
+  font-size: 10px;
+  z-index: 999;
+  white-space: nowrap;
+ 
+  /* CSS border triangles */
+  &.controls::before {
+    content: " ";
+    left: 50%;
+    border: solid transparent;
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-width: var(--tooltip-arrow-size);
+    margin-left: calc(var(--tooltip-arrow-size) * -1);
+  }
+
+  /* Absolute positioning */
+  &.controls.top {
+    top: calc(var(--tooltip-margin) * -1);
+  }
+
+  /* CSS border triangles */
+  &.controls.top::before {
+    top: 100%;
+    border-top-color: var(--tooltip-background-color);
+  }
+
+  /* Absolute positioning */
+  &.controls.right {
+    left: calc(70% + var(--tooltip-margin));
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+  }
+
+  /* CSS border triangles */
+  &.controls.right::before {
+    left: calc(var(--tooltip-arrow-size) * -1);
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+    border-right-color: var(--tooltip-background-color);
+  }
+
+  /* Absolute positioning */
+  &.controls.bottom {
+    bottom: calc(var(--tooltip-margin) * -1);
+  }
+  /* CSS border triangles */
+  &.controls.bottom::before {
+    bottom: 100%;
+    border-bottom-color: var(--tooltip-background-color);
+  }
+
+  /* Absolute positioning */
+  &.controls.left {
+    left: auto;
+    right: calc(70% + var(--tooltip-margin));
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+  }
+  /* CSS border triangles */
+  &.controls.left::before {
+    left: auto;
+    right: calc(var(--tooltip-arrow-size) * -2);
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+    border-left-color: var(--tooltip-background-color);
+  }
+
+  > ul {
+    padding-left: 10px;
+    margin: 0;
+  }
+`;
+
+const Tooltip = props => {
+  const {
+    className,
+    top,
+    left,
+    direction,
+    content
+  } = props;
+  return /*#__PURE__*/React$1.createElement(TooltipContainer$2, {
+    className: className,
+    top: `${top}px`,
+    left: `${left}px`
+  }, /*#__PURE__*/React$1.createElement(TooltipWrapper, null, /*#__PURE__*/React$1.createElement(TooltipTip, {
+    className: `controls ${direction || 'top'}`
+  }, content)));
+};
+Tooltip.propTypes = {
+  className: PropTypes.string,
+  top: PropTypes.number,
+  left: PropTypes.number,
+  direction: PropTypes.string,
+  content: PropTypes.string
+};
+Tooltip.defaultProps = {
+  className: '',
+  top: 0,
+  left: 0,
+  direction: 'top',
+  content: ''
 };
 
-const scrollableStyles$5 = `
-  overflow-y: auto;
+const ControlsContainer$3 = styled.div`
+  font-family: "Poppins", sans-serif;
+  background-color: white;
+  color: ${props => props.textColor};
+  width: ${props => props.width};
+  height: ${props => props.height};
+  /* display: flex;
+  flex-direction: column;
+  overflow: hidden; */
+  overflow-y: ${props => props.scroller};
 
   &::-webkit-scrollbar {
-    width: 0.5em; /* 8px → 0.5em */
+    width: 8px;
   }
 
   &::-webkit-scrollbar-track {
     background: #E8E8E8;
+    border-radius: 5px;
   }
 
   &::-webkit-scrollbar-thumb {
     background: #D0D0D0;
+    border-radius: 5px;
   }
 `;
-const ControlsContainer$4 = styled.div`
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  font-size: ${props => props.rootFont || '1em'}; /* Base font size */
-  color: ${props => props.textColor};
-  width: ${props => props.width};
-  height: ${props => props.height};
-  padding: ${props => props.containerPadding || '0'};
-  display: flex;
-  align-items: center;
-  @media (max-width: 1536px) {
-    ${scrollableStyles$5}
+styled.div`
+  overflow-y: auto;
+  height: 100%;
+
+  &::-webkit-scrollbar {
+    width: 8px;
   }
 
-  > * {
-    box-sizing: border-box;
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
   }
 `;
-const Controls$3 = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: white;
-  border-radius: 12px;  
-`;
-const TooltipDiv$2 = styled.div`
-  display: flex;
-  background: white;
-  padding: 0.375em 0.625em; /* 6px 10px → 0.375em 0.625em */
-  margin: 0;
-`;
-const TooltipLabel$2 = styled.p`
-  color: #212121;
-  font-family: "Poppins", sans-serif;
-  font-size: 0.75em; /* 12px → 0.75em */
-  font-weight: 400;
-  font-style: normal;
-  width: max-content;
-  line-height: normal;
-  margin: 0;
-`;
-const TitleAndValueContainer$1 = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0 1.25em; /* 20px → 1.25em */
+const CardHeader = styled.div`
+  padding: 16px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: white;
 `;
-const Title$9 = styled.h4`
+const TotalValue = styled.div`
   font-weight: 500;
-  font-size: ${props => props.titleFontSize || '1.125em'}; /* Default: 18px → 1.125em */
-  margin: 0;
-  @media (max-width: 1536px) {
-    font-size: 0.875em; /* 14px → 0.875em */
-  }
-  @media (max-width: 1366px) {
-    font-size: 0.75em; /* 12px → 0.75em */
-  }
-`;
-const CurrencySignAndFormattedValueContainer = styled.div`
+  font-size: 40px;
   display: flex;
-  align-items: center;
-  gap: 0.3125em; /* 5px → 0.3125em */
   align-items: baseline;
-`;
-const CurrencySign$1 = styled.span`
-  font-weight: 500;
-  font-size: 1em; /* 16px → 1em */
-  @media (max-width: 1536px) {
-    font-size: 0.875em; /* 14px → 0.875em */
-  }
-  @media (max-width: 1366px) {
-    font-size: 0.6875em; /* 11px → 0.6875em */
-  }
-`;
-const FormattedValue$1 = styled.div`
-  font-weight: 500;
-  font-size: ${props => props.FormattedValueFontSize || '2.5em'}; /* Default: 40px → 2.5em */
+  line-height: 1;
   @media (max-width: 1536px) {
-    font-size: 1.5em; /* 24px → 1.5em */
+    font-size: 24px;
   }
   @media (max-width: 1366px) {
-    font-size: 1.25em; /* 20px → 1.25em */
+    font-size: 20px;
   }
 `;
-const TextAfterValue = styled.div`  
+const Title$8 = styled.h4`
+  font-size: 18px;
   font-weight: 400;
-  font-size: 0.75em; /* 12px → 0.75em */
+  line-height: 1;
+  margin: 0 0 8px;
   @media (max-width: 1536px) {
-    font-size: 0.6875em; /* 11px → 0.6875em */
+    font-size: 14px;
   }
   @media (max-width: 1366px) {
-    font-size: 0.625em; /* 10px → 0.625em */
+    font-size: 12px;
   }
 `;
-const DoughnutChartAndLegendContainer = styled.div`
-  display: flex;
-  flex-direction: ${props => props.legendBelow ? 'column' : 'row'};
-  gap: 0.75em; /* 12px → 0.75em */
-  justify-content: space-between;
-  margin-top: auto;
-  padding: 0 1.25em; /* 20px → 1.25em */
-  margin-bottom: 1.25em; /* 20px → 1.25em */
-`;
-const DoughnutChartContainer = styled.div`
-  display: flex;
-  align-items: center;   
-  min-width: 90px;
-  min-height: 90px; 
-`;
-const LegendContainer$2 = styled.div`
-  padding-left: 0.625em; /* 10px → 0.625em */
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly; 
-`;
-const LegendControlsContainer = styled.div`
-  display: flex;
-  gap: 0.5em; /* 8px → 0.5em */
-  align-items: center;
-  margin-bottom: 0.375em; /* 6px → 0.375em */
-`;
-const LegendTitleAndFormatedValueContainer = styled.div`
-  flex-grow: 1;
-`;
-styled.div`
-  font-size: 0.875rem;
-`;
-const LegendColorRectangle = styled.div`
-  width: 0.875rem;
-  min-width: 0.875rem;
-  height: 0.875rem;
-  border-radius: 2px;
-  background: ${props => props.color};
-`;
-const LegendTitle = styled.h5`
-  font-weight: 400;
-  font-size: 1em; /* 16px → 1em */
-  gap: 0.3125em; /* 5px → 0.3125em */
-  margin: 0;
-  display: flex;
-  justify-content: space-between;
+const CurrencySign = styled.span`
+  font-weight: 500;
+  font-size: 16px;
   @media (max-width: 1536px) {
-    font-size: 0.75em; /* 11px → 0.6875em */
+    font-size: 14px;
   }
   @media (max-width: 1366px) {
-    font-size: 0.625em; /* 10px → 0.625em */
+    font-size: 11px;
   }
 `;
-const LegendFormattedValue = styled.span`
-  font-weight: 500;
-  font-size: 0.875em; /* 14px → 0.875em */
-  white-space: nowrap;
-`;
 
-const TotalDoughnutChart = props => {
+/* eslint-disable no-unused-vars */
+const TotalHorizontalCharts = props => {
   const {
-    className,
-    width,
-    height,
     title,
     value,
-    rootFont,
-    containerPadding,
-    addingBenchmark,
     dotCut,
     currencySign,
     currencyType,
-    legendData,
-    legendBelow,
-    itemsPercentagesValueAside,
-    itemsBoldedValues,
-    itemsValuesSeparateLine,
-    textcolor,
-    titleFontSize,
-    FormattedValueFontSize,
-    isPercent,
-    hideTitleAndValue,
+    chartsData,
+    showScrollerBarsCount,
+    labelFontSize,
+    labelLimitedLetters,
+    width,
+    height,
+    rightGap,
+    textColor,
     noDataText,
-    textAfterValue
-  } = props;
-  const [DoughnutChartRadius, setDoughnutChartRadius] = useState(0);
-  const [zoomResolution, setZoomResolution] = useState(1);
-  const DoughnutChartContainerRef = useRef();
-  const dotCutTrenty = row => {
-    if (!row || !row.value) return null;
-    let valueNew = 0;
-    if (row?.value && Math.abs(row.value) > 0 && row.value % 1 !== 0) {
-      valueNew = row?.value?.toFixed(2);
-    } else {
-      valueNew = row?.value;
-    }
-    return dotCut ? getFormattedValue(valueNew) : getNumberWithCommas(valueNew);
-  };
-  useEffect(() => {
-    const handleResize = () => {
-      setZoomResolution(window.devicePixelRatio);
-    };
+    showPercentAsideValue,
+    isDollar,
+    isPercentage,
+    showDollarSign,
+    className,
+    hideTotalValue,
+    hideTitle
+  } = props;
+  const barBackgrounds = chartsData.map(bg => bg.color);
+  const topHeader = useRef();
+  const wrapper = useRef();
+  const BAR_HEIGHT = 40; // Height of each bar including padding
+  const CHART_PADDING = 40; // Total padding for chart (top + bottom)
 
-    // Add event listener for window resize to update zoom resolution
-    window.addEventListener('resize', handleResize);
+  // Inside the TotalHorizontalCharts component
+  const calculateChartHeight = () => {
+    if (!chartsData?.length) return 0;
+    if (chartsData.length > showScrollerBarsCount) {
+      return chartsData.length * BAR_HEIGHT + CHART_PADDING;
+    }
 
-    // Initial update of zoom resolution
-    setZoomResolution(window.devicePixelRatio);
+    // Calculate height to show only specified number of bars
+    const visibleBarsHeight = showScrollerBarsCount * BAR_HEIGHT;
 
-    // Clean up the event listener when component unmounts
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-  useEffect(() => {
-    const MIN_RADIUS = 45;
-    if (!DoughnutChartContainerRef) return;
+    // Use the smaller value between:
+    // 1. Height needed for all bars
+    // 2. Height needed for specified number of bars
+    return Math.min(chartsData.length * BAR_HEIGHT + CHART_PADDING, visibleBarsHeight + CHART_PADDING);
+  };
+  const [showLegendTooltip, setShowLegendTooltip] = useState(false);
+  const [tooltipText, setTooltipText] = useState({
+    content: '',
+    clientX: 0,
+    clientY: 0
+  });
+  const CustomizedLabel = props => showPercentAsideValue ? /*#__PURE__*/React$1.createElement("text", {
+    x: props.x + (props.width <= 0 ? -12 : props.width) + 56,
+    y: props.y + 4,
+    dy: props.height / 2,
+    dx: -8,
+    fill: props.stroke,
+    fontSize: 12,
+    fontWeight: 500,
+    textAnchor: "middle"
+  }, ''.concat(getFormattedValue(props.value), getFormattedUnits(props.value)), /*#__PURE__*/React$1.createElement("tspan", {
+    fontWeight: 400
+  }, ` (${(props.value / value * 100).toFixed(0)}%)`)) : /*#__PURE__*/React$1.createElement("text", {
+    x: props.x + (props.width <= 0 ? -12 : props.width) + 40,
+    y: props.y + 4,
+    dy: props.height / 2,
+    dx: -8,
+    fill: props.stroke,
+    fontSize: 12,
+    fontWeight: 400,
+    textAnchor: "middle"
+  }, !isDollar ? ''.concat(getFormattedValue(props.value), isPercentage ? '%' : getFormattedUnits(props.value)) : ''.concat(showDollarSign ? '$' : '', getFormattedValue(props.value), getFormattedUnits(props.value)));
+  const CustomizedTickBarChart = props => {
     const {
-      current
-    } = DoughnutChartContainerRef;
-    if (!current) return;
-    const DoughnutChartContainerWidth = current?.clientWidth;
-    const DoughnutChartContainerHeight = current?.clientHeight;
-    const resolutionFactor = zoomResolution && zoomResolution >= 1 ? zoomResolution : 1;
-    let radius = DoughnutChartContainerWidth > DoughnutChartContainerHeight ? DoughnutChartContainerHeight / 2 / resolutionFactor : DoughnutChartContainerWidth / 2 / resolutionFactor;
-    if (radius < MIN_RADIUS) {
-      radius = MIN_RADIUS;
-    }
-    setDoughnutChartRadius(radius);
-  }, [height, width, DoughnutChartContainerRef?.current?.clientWidth, DoughnutChartContainerRef?.current?.clientHeight, zoomResolution]);
-  const displayLegendValue = row => /*#__PURE__*/React$1.createElement(LegendFormattedValue, {
-    style: {
-      fontWeight: itemsBoldedValues ? '700' : '500'
-    }
-  }, !isPercent && row.value && currencySign ? getCurrencySign(currencyType, row.value) : '', !isPercent && row.value !== undefined && row.value !== null ? dotCutTrenty(row) : !isPercent && 'No Data', !isPercent && row.value && dotCut ? getFormattedUnits(row.value) : '', !isPercent && row.value && itemsPercentagesValueAside && /*#__PURE__*/React$1.createElement("span", {
-    style: {
-      fontWeight: itemsBoldedValues ? '700' : '400'
+      x,
+      y,
+      height,
+      payload,
+      fill,
+      orientation,
+      stroke
+    } = props;
+    const handleMouseEnter = content => {
+      setTooltipText(prevState => ({
+        ...prevState,
+        content: content !== prevState.content ? content : prevState.content,
+        clientX: x / 1.2,
+        clientY: y - 20
+      }));
+      setShowLegendTooltip(true);
+    };
+    const handleMouseLeave = () => {
+      if (showLegendTooltip === false) return;
+      setTimeout(() => {
+        setShowLegendTooltip(false);
+      }, 1200);
+    };
+    if (chartsData && chartsData.length > 0 && payload) {
+      const chartsDataLabel = chartsData.filter(item => item.name === payload.value);
+      if (chartsDataLabel && chartsDataLabel.length > 0) {
+        return /*#__PURE__*/React$1.createElement("g", {
+          onMouseEnter: () => handleMouseEnter(payload.value),
+          onMouseLeave: handleMouseLeave
+        }, /*#__PURE__*/React$1.createElement("text", {
+          style: {
+            whiteSpace: 'nowrap'
+          },
+          height: height,
+          x: 20,
+          y: y,
+          fontSize: labelFontSize,
+          orientation: orientation,
+          stroke: stroke,
+          textAnchor: "start"
+          // verticalAnchor="middle"
+          ,
+          fill: fill
+        }, payload.value.length > labelLimitedLetters - 1 ? `${payload.value.slice(0, labelLimitedLetters)}...` : payload.value));
+      }
+      return null;
     }
-  }, ' (', `${Math.round(row.value / value * 100)}%)`), isPercent && row.value && `${row.value.toFixed(1)}%`);
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$4, {
-    className: className,
+    return null;
+  };
+  return /*#__PURE__*/React$1.createElement(ControlsContainer$3, {
+    ref: wrapper,
     height: height,
     width: width,
-    rootFont: rootFont,
-    containerPadding: containerPadding,
-    textcolor: textcolor
-  }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
-    className: "NoDataFoundMessage",
-    noDataText: noDataText
-  }) : /*#__PURE__*/React$1.createElement(Controls$3, {
-    className: "Controls",
-    height: height,
-    width: width
-  }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$1, {
-    className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$9, {
-    className: "Title",
-    fontSize: titleFontSize
-  }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer, {
-    className: "CurrencySignAndFormattedValueContainer"
-  }, /*#__PURE__*/React$1.createElement(FormattedValue$1, {
-    className: "FormattedValue",
-    fontSize: FormattedValueFontSize,
-    width: width
-  }, /*#__PURE__*/React$1.createElement(CurrencySign$1, {
+    textColor: textColor,
+    scroller: chartsData.length > showScrollerBarsCount ? 'auto' : 'hidden',
+    className: className
+  }, chartsData?.length > 0 ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React$1.createElement(CardHeader, {
+    ref: topHeader,
+    className: "CardHeader"
+  }, !hideTitle ? /*#__PURE__*/React$1.createElement(Title$8, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
+    className: "TotalValue"
+  }, currencySign && /*#__PURE__*/React$1.createElement(CurrencySign, {
     className: "CurrencySign"
-  }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : ''), textAfterValue ? /*#__PURE__*/React$1.createElement(TextAfterValue, {
-    className: "TextAfterValue"
-  }, textAfterValue) : '', addingBenchmark && /*#__PURE__*/React$1.createElement(Benchmark, null))), /*#__PURE__*/React$1.createElement(DoughnutChartAndLegendContainer, {
-    legendBelow: legendBelow
-  }, /*#__PURE__*/React$1.createElement(DoughnutChartContainer, {
-    width: width,
-    height: height,
-    ref: DoughnutChartContainerRef
-  }, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(PieChart$1, null, /*#__PURE__*/React$1.createElement(Pie, {
+  }, getCurrencySign(currencyType, value)), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '') : '') : '', /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+    width: "100%",
+    height: calculateChartHeight()
+  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
+    layout: "vertical",
+    data: chartsData,
+    margin: {
+      top: 10,
+      right: 20,
+      bottom: 20,
+      left: 10
+    }
+  }, /*#__PURE__*/React$1.createElement(XAxis, {
+    type: "number",
+    domain: [0, dataMax => dataMax * rightGap]
+    // allowDataOverflow={false}
+    ,
+    hide: true
+  }), /*#__PURE__*/React$1.createElement(YAxis, {
+    dataKey: "name",
+    type: "category",
+    width: labelLimitedLetters * 10,
+    tickLine: false,
+    axisLine: false,
+    interval: 0,
+    allowDataOverflow: true,
+    tick: CustomizedTickBarChart
+  }), /*#__PURE__*/React$1.createElement(Bar, {
+    dataKey: "value",
+    barSize: 20,
     fill: "#8884d8",
+    barCategoryGap: 10,
+    barGap: 5
+  }, /*#__PURE__*/React$1.createElement(LabelList, {
     dataKey: "value",
-    blendStroke: true,
-    startAngle: -270,
-    data: legendData,
-    outerRadius: DoughnutChartRadius - 4,
-    innerRadius: DoughnutChartRadius - DoughnutChartRadius / 3
-  }, legendData.map(row => /*#__PURE__*/React$1.createElement(Cell, {
-    key: `cell-${row.name}`,
-    fill: row.color
-  }))), /*#__PURE__*/React$1.createElement(Tooltip$2, {
-    content: /*#__PURE__*/React$1.createElement(CustomTooltip, {
-      value: value,
-      isPercent: isPercent
-    })
-  }), /*#__PURE__*/React$1.createElement(Tooltip$2, null)))), /*#__PURE__*/React$1.createElement(LegendContainer$2, null, legendData.map(row => /*#__PURE__*/React$1.createElement(LegendControlsContainer, {
-    key: row.name
-  }, /*#__PURE__*/React$1.createElement(LegendColorRectangle, {
-    color: row.color
-  }), /*#__PURE__*/React$1.createElement(LegendTitleAndFormatedValueContainer, null, /*#__PURE__*/React$1.createElement(LegendTitle, {
+    content: CustomizedLabel
+  }), chartsData.map((entry, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  React$1.createElement(Cell, {
+    key: `cell-${index}`,
+    fill: barBackgrounds[index % 20]
+  }))), showLegendTooltip && /*#__PURE__*/React$1.createElement(Tooltip, {
+    direction: "top",
+    content: tooltipText.content,
+    top: tooltipText.clientY,
+    left: tooltipText.clientX,
     style: {
-      flexDirection: itemsValuesSeparateLine ? 'column' : 'row',
-      alignItems: itemsValuesSeparateLine ? 'baseline' : 'center'
+      pointerEvents: 'none'
     }
-  }, row.name, displayLegendValue(row)))))))));
+  })))) : /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
+    noDataText: noDataText
+  }));
 };
-TotalDoughnutChart.propTypes = {
+TotalHorizontalCharts.propTypes = {
   className: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.number,
-  rootFont: PropTypes.string,
-  containerPadding: PropTypes.string,
-  addingBenchmark: PropTypes.bool,
   dotCut: PropTypes.bool,
   currencySign: PropTypes.bool,
   currencyType: PropTypes.string,
-  legendData: PropTypes.arrayOf(PropTypes.shape({
-    color: PropTypes.string,
+  chartsData: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
     value: PropTypes.number,
-    name: PropTypes.string
-  })),
-  legendBelow: PropTypes.bool,
-  itemsPercentagesValueAside: PropTypes.bool,
-  itemsBoldedValues: PropTypes.bool,
-  itemsValuesSeparateLine: PropTypes.bool,
+    color: PropTypes.string
+  })),
+  showScrollerBarsCount: PropTypes.number,
+  showPercentAsideValue: PropTypes.bool,
+  labelFontSize: PropTypes.number,
+  labelLimitedLetters: PropTypes.number,
   width: PropTypes.string,
   height: PropTypes.string,
-  textcolor: PropTypes.string,
-  titleFontSize: PropTypes.string,
-  FormattedValueFontSize: PropTypes.string,
-  isPercent: PropTypes.bool,
-  hideTitleAndValue: PropTypes.bool,
+  rightGap: PropTypes.number,
+  textColor: PropTypes.string,
   noDataText: PropTypes.string,
-  textAfterValue: PropTypes.string
+  isDollar: PropTypes.bool,
+  isPercentage: PropTypes.bool,
+  showDollarSign: PropTypes.bool,
+  hideTotalValue: PropTypes.bool,
+  hideTitle: PropTypes.bool
 };
-TotalDoughnutChart.defaultProps = {
+TotalHorizontalCharts.defaultProps = {
   className: '',
-  title: '',
+  title: 'SALES',
   value: 0,
-  rootFont: '18px',
-  containerPadding: '0px',
-  addingBenchmark: false,
   dotCut: false,
   currencySign: false,
   currencyType: 'USD',
-  legendData: [],
-  legendBelow: false,
-  itemsPercentagesValueAside: true,
-  itemsBoldedValues: true,
-  itemsValuesSeparateLine: true,
+  chartsData: [],
+  showScrollerBarsCount: 7,
+  showPercentAsideValue: false,
+  labelFontSize: 10,
+  labelLimitedLetters: 12,
   width: '100%',
   height: '100%',
-  textcolor: '#212121',
-  titleFontSize: '18px',
-  FormattedValueFontSize: '40px',
-  isPercent: false,
-  hideTitleAndValue: false,
+  rightGap: 1,
+  textColor: '#212121',
   noDataText: 'No Data',
-  textAfterValue: ''
+  isDollar: true,
+  isPercentage: false,
+  showDollarSign: true,
+  hideTotalValue: false,
+  hideTitle: false
 };
-function CustomTooltip(_ref) {
+
+const LampIcon = _ref => {
   let {
-    active,
-    payload,
-    value,
-    isPercent = false
+    // eslint-disable-next-line react/prop-types
+    width = '23',
+    // eslint-disable-next-line react/prop-types
+    height = '19',
+    // eslint-disable-next-line react/prop-types
+    fill = '#229E38'
   } = _ref;
-  if (active && payload && payload.length) {
-    // eslint-disable-next-line no-nested-ternary
-    const percent = value && value !== 0 && !isPercent ? (payload[0].value / value * 100).toFixed(1) : value && isPercent ? payload[0].value.toFixed(1) : 0;
-    return /*#__PURE__*/React$1.createElement(TooltipDiv$2, null, /*#__PURE__*/React$1.createElement(TooltipLabel$2, null, `${payload[0].name} ${percent}%`));
-  }
-}
-CustomTooltip.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  active: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  payload: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  value: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  isPercent: PropTypes.any
-};
-CustomTooltip.defaultProps = {
-  active: '',
-  payload: '',
-  value: '',
-  isPercent: false
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 23 19",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M2.42578 0.390625L4.11328 1.51562C4.5 1.79688 4.60547 2.32422 4.35938 2.71094C4.07812 3.09766 3.55078 3.20312 3.16406 2.92188L1.47656 1.79688C1.08984 1.55078 0.984375 1.02344 1.26562 0.636719C1.51172 0.25 2.03906 0.144531 2.42578 0.390625ZM20.9883 1.79688L19.3008 2.92188C18.9141 3.20312 18.3867 3.09766 18.1406 2.71094C17.8594 2.32422 17.9648 1.79688 18.3516 1.51562L20.0391 0.390625C20.4258 0.144531 20.9531 0.25 21.2344 0.636719C21.4805 1.02344 21.375 1.55078 20.9883 1.79688ZM0.84375 5.875H3.09375C3.55078 5.875 3.9375 6.26172 3.9375 6.71875C3.9375 7.21094 3.55078 7.5625 3.09375 7.5625H0.84375C0.351562 7.5625 0 7.21094 0 6.71875C0 6.26172 0.351562 5.875 0.84375 5.875ZM19.4062 5.875H21.6562C22.1133 5.875 22.5 6.26172 22.5 6.71875C22.5 7.21094 22.1133 7.5625 21.6562 7.5625H19.4062C18.9141 7.5625 18.5625 7.21094 18.5625 6.71875C18.5625 6.26172 18.9141 5.875 19.4062 5.875ZM4.11328 11.9219L2.42578 13.0469C2.03906 13.3281 1.51172 13.2227 1.26562 12.8359C0.984375 12.4492 1.08984 11.9219 1.47656 11.6406L3.16406 10.5156C3.55078 10.2695 4.07812 10.375 4.35938 10.7617C4.60547 11.1484 4.5 11.6758 4.11328 11.9219ZM19.3008 10.5508L20.9883 11.6758C21.375 11.9219 21.4805 12.4492 21.2344 12.8359C20.9531 13.2227 20.4258 13.3281 20.0391 13.082L18.3516 11.957C17.9648 11.6758 17.8594 11.1484 18.1406 10.7617C18.3867 10.375 18.9141 10.2695 19.3008 10.5508ZM15.75 6.4375C15.75 3.97656 13.7109 1.9375 11.25 1.9375C8.75391 1.9375 6.75 3.97656 6.75 6.4375C6.75 7.42188 7.03125 8.30078 7.52344 9.00391C7.66406 9.21484 7.80469 9.42578 7.98047 9.63672C8.4375 10.2695 8.96484 11.0078 9.38672 11.7461C9.73828 12.4141 9.94922 13.1172 10.0195 13.75H8.33203C8.22656 13.3281 8.12109 12.9414 7.91016 12.5547C7.55859 11.9219 7.13672 11.3242 6.67969 10.7266C6.50391 10.4805 6.32812 10.2344 6.15234 9.98828C5.44922 8.96875 5.0625 7.77344 5.0625 6.4375C5.0625 3.02734 7.80469 0.25 11.25 0.25C14.6602 0.25 17.4375 3.02734 17.4375 6.4375C17.4375 7.77344 17.0156 8.96875 16.3125 9.98828C16.1367 10.2344 15.9609 10.4805 15.7852 10.7266C15.3633 11.3242 14.9062 11.9219 14.5547 12.5547C14.3438 12.9414 14.2383 13.3281 14.168 13.75H12.4453C12.5508 13.1172 12.7266 12.4141 13.0781 11.7461C13.5 11.0078 14.0273 10.2695 14.4844 9.63672C14.6602 9.42578 14.8008 9.21484 14.9414 9.00391C15.4336 8.30078 15.75 7.42188 15.75 6.4375ZM9.5625 6.4375C9.5625 6.75391 9.28125 7 9 7C8.68359 7 8.4375 6.75391 8.4375 6.4375C8.4375 4.89062 9.66797 3.625 11.25 3.625C11.5312 3.625 11.8125 3.90625 11.8125 4.1875C11.8125 4.50391 11.5312 4.75 11.25 4.75C10.3008 4.75 9.5625 5.52344 9.5625 6.4375ZM14.0625 15.4375C14.0625 17.0195 12.7969 18.25 11.25 18.25C9.66797 18.25 8.4375 17.0195 8.4375 15.4375V14.875H14.0625V15.4375Z",
+    fill: fill
+  }));
 };
 
-const TooltipContainer$2 = styled.div`
-  --tooltip-text-color: black;
-  --tooltip-background-color: white;
-  --tooltip-margin: 40px;
-  --tooltip-arrow-size: 10px;
-  position: absolute;
-  z-index: 999999;
-  top: ${props => props.top};
-  left: ${props => props.left};
-`;
-const TooltipWrapper = styled.div`
-  display: inline-block;
-  position: relative;
-`;
-const TooltipTip = styled.div`
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-  position: absolute;
-  border-radius: 4px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 8px 12px;
-  color: var(--tooltip-text-color);
-  background: var(--tooltip-background-color);
-  font-size: 10px;
-  z-index: 999;
-  white-space: nowrap;
- 
-  /* CSS border triangles */
-  &.controls::before {
-    content: " ";
-    left: 50%;
-    border: solid transparent;
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    border-width: var(--tooltip-arrow-size);
-    margin-left: calc(var(--tooltip-arrow-size) * -1);
-  }
-
-  /* Absolute positioning */
-  &.controls.top {
-    top: calc(var(--tooltip-margin) * -1);
-  }
-
-  /* CSS border triangles */
-  &.controls.top::before {
-    top: 100%;
-    border-top-color: var(--tooltip-background-color);
-  }
-
-  /* Absolute positioning */
-  &.controls.right {
-    left: calc(70% + var(--tooltip-margin));
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
-  }
-
-  /* CSS border triangles */
-  &.controls.right::before {
-    left: calc(var(--tooltip-arrow-size) * -1);
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
-    border-right-color: var(--tooltip-background-color);
-  }
+const scrollableStyles$5 = `
+  overflow-y: auto;
 
-  /* Absolute positioning */
-  &.controls.bottom {
-    bottom: calc(var(--tooltip-margin) * -1);
-  }
-  /* CSS border triangles */
-  &.controls.bottom::before {
-    bottom: 100%;
-    border-bottom-color: var(--tooltip-background-color);
+  &::-webkit-scrollbar {
+    width: 8px;
   }
 
-  /* Absolute positioning */
-  &.controls.left {
-    left: auto;
-    right: calc(70% + var(--tooltip-margin));
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
-  }
-  /* CSS border triangles */
-  &.controls.left::before {
-    left: auto;
-    right: calc(var(--tooltip-arrow-size) * -2);
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
-    border-left-color: var(--tooltip-background-color);
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
   }
 
-  > ul {
-    padding-left: 10px;
-    margin: 0;
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
   }
 `;
-
-const Tooltip = props => {
-  const {
-    className,
-    top,
-    left,
-    direction,
-    content
-  } = props;
-  return /*#__PURE__*/React$1.createElement(TooltipContainer$2, {
-    className: className,
-    top: `${top}px`,
-    left: `${left}px`
-  }, /*#__PURE__*/React$1.createElement(TooltipWrapper, null, /*#__PURE__*/React$1.createElement(TooltipTip, {
-    className: `controls ${direction || 'top'}`
-  }, content)));
-};
-Tooltip.propTypes = {
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  direction: PropTypes.string,
-  content: PropTypes.string
-};
-Tooltip.defaultProps = {
-  className: '',
-  top: 0,
-  left: 0,
-  direction: 'top',
-  content: ''
-};
-
-const ControlsContainer$3 = styled.div`
+const MainContainer$1 = styled.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
   font-family: "Poppins", sans-serif;
-  background-color: white;
-  color: ${props => props.textColor};
+  font-style: normal;
+  font-size: 1rem;
+  border-radius: 12px;
+  padding: 10px;
   width: ${props => props.width};
   height: ${props => props.height};
-  /* display: flex;
-  flex-direction: column;
-  overflow: hidden; */
-  overflow-y: ${props => props.scroller};
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
+  overflow: auto;
+  ${scrollableStyles$5}
+`;
+const RowTitle = styled.h4`
+  display: flex;
+  justify-content: space-between;
+  font-weight: 500;
+  font-size: 18px;
+  margin: 5px 5px 5px 0;
+  @media (max-width: 1536px) {
+    font-size: 15px;
   }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
+  @media (max-width: 1366px) {
+    font-size: 12px;
   }
 `;
-styled.div`
-  overflow-y: auto;
+const AllRowsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
   height: 100%;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
+`;
+const OneRowContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+const ColumnLineSeporatorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: #b1b1b1;
+  align-items: center;
+  height: 1px;
+  width: 100%;
+  &.ColumnLineSeporatorContainer_vertical {  
+    margin: 0 30px;  
+    height: 100%;
+    width: 1px;
   }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
+  &.ColumnLineSeporatorContainer_horizontal {
+    margin: 30px 0;
+    min-height: 1px;
+    height: 1px;
+    width: 100%;
   }
 `;
-const CardHeader = styled.div`
-  padding: 16px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background-color: white;
+const ColumnLineSeporator = styled.div`
+  min-width: 0.5px;
+  width: 0.5px;
 `;
-const TotalValue = styled.div`
-  font-weight: 500;
-  font-size: 40px;
+const FieldsContainer = styled.div`
   display: flex;
-  align-items: baseline;
-  line-height: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  white-space: nowrap;
+  height: 100%;
+  padding: 30px 0px;
+`;
+const OneFieldsContainer = styled.div`
+  display: flex;
+  padding: 4px;
+  gap: 10px;
+  width: 100%;
+  justify-content: flex-start;
+  // padding: ${props => props.padding}; //0 0 0 40px;
+`;
+const FieldTitle = styled.h4`
+  font-size: 18px;
+  font-weight: 400;
+  margin: 0;
   @media (max-width: 1536px) {
-    font-size: 24px;
+    font-size: 14px;
   }
   @media (max-width: 1366px) {
-    font-size: 20px;
+    font-size: 12px;
   }
 `;
-const Title$8 = styled.h4`
-  font-size: 18px;
+const FormattedValue$1 = styled.div`
   font-weight: 400;
-  line-height: 1;
-  margin: 0 0 8px;
+  font-size: 40px;
+  display: flex;
+  align-items: baseline;
+  min-height: 40px;
+  gap: 2px;
   @media (max-width: 1536px) {
-    font-size: 14px;
+    font-size: 24px;
   }
   @media (max-width: 1366px) {
-    font-size: 12px;
+    font-size: 20px;
   }
 `;
-const CurrencySign = styled.span`
-  font-weight: 500;
+const TextBeforeAndAfterValue$1 = styled.span`
+  font-weight: 400;
   font-size: 16px;
   @media (max-width: 1536px) {
     font-size: 14px;
@@ -26954,248 +27016,184 @@ const CurrencySign = styled.span`
     font-size: 11px;
   }
 `;
-
-/* eslint-disable no-unused-vars */
-const TotalHorizontalCharts = props => {
-  const {
-    title,
-    value,
-    dotCut,
-    currencySign,
-    currencyType,
-    chartsData,
-    showScrollerBarsCount,
-    labelFontSize,
-    labelLimitedLetters,
-    width,
-    height,
-    rightGap,
-    textColor,
-    noDataText,
-    showPercentAsideValue,
-    isDollar,
-    isPercentage,
-    showDollarSign,
-    className,
-    hideTotalValue,
-    hideTitle
-  } = props;
-  const barBackgrounds = chartsData.map(bg => bg.color);
-  const topHeader = useRef();
-  const wrapper = useRef();
-  const BAR_HEIGHT = 40; // Height of each bar including padding
-  const CHART_PADDING = 40; // Total padding for chart (top + bottom)
-
-  // Inside the TotalHorizontalCharts component
-  const calculateChartHeight = () => {
-    if (!chartsData?.length) return 0;
-    if (chartsData.length > showScrollerBarsCount) {
-      return chartsData.length * BAR_HEIGHT + CHART_PADDING;
+const FieldTitleAndValueSubContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 100%;
+`;
+const InfoTextContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%; 
+  overflow:auto;
+`;
+const IconContainer = styled.div`  
+  display: flex;  
+  padding: 5px 10px 0 0;
+  cursor:  pointer;  
+`;
+const InfoTextLabel = styled.div`
+  color: black;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 400;
+  width: 100%;
+  overflow: auto;
+  ${scrollableStyles$5}
+  strong {
+    font-weight: 500;
+    color: #212121;
+    @media (max-width: 1536px) {
+    font-size: 14px;
     }
-
-    // Calculate height to show only specified number of bars
-    const visibleBarsHeight = showScrollerBarsCount * BAR_HEIGHT;
-
-    // Use the smaller value between:
-    // 1. Height needed for all bars
-    // 2. Height needed for specified number of bars
-    return Math.min(chartsData.length * BAR_HEIGHT + CHART_PADDING, visibleBarsHeight + CHART_PADDING);
-  };
-  const [showLegendTooltip, setShowLegendTooltip] = useState(false);
-  const [tooltipText, setTooltipText] = useState({
-    content: '',
-    clientX: 0,
-    clientY: 0
-  });
-  const CustomizedLabel = props => showPercentAsideValue ? /*#__PURE__*/React$1.createElement("text", {
-    x: props.x + (props.width <= 0 ? -12 : props.width) + 56,
-    y: props.y + 4,
-    dy: props.height / 2,
-    dx: -8,
-    fill: props.stroke,
-    fontSize: 12,
-    fontWeight: 500,
-    textAnchor: "middle"
-  }, ''.concat(getFormattedValue(props.value), getFormattedUnits(props.value)), /*#__PURE__*/React$1.createElement("tspan", {
-    fontWeight: 400
-  }, ` (${(props.value / value * 100).toFixed(0)}%)`)) : /*#__PURE__*/React$1.createElement("text", {
-    x: props.x + (props.width <= 0 ? -12 : props.width) + 40,
-    y: props.y + 4,
-    dy: props.height / 2,
-    dx: -8,
-    fill: props.stroke,
-    fontSize: 12,
-    fontWeight: 400,
-    textAnchor: "middle"
-  }, !isDollar ? ''.concat(getFormattedValue(props.value), isPercentage ? '%' : getFormattedUnits(props.value)) : ''.concat(showDollarSign ? '$' : '', getFormattedValue(props.value), getFormattedUnits(props.value)));
-  const CustomizedTickBarChart = props => {
-    const {
-      x,
-      y,
-      height,
-      payload,
-      fill,
-      orientation,
-      stroke
-    } = props;
-    const handleMouseEnter = content => {
-      setTooltipText(prevState => ({
-        ...prevState,
-        content: content !== prevState.content ? content : prevState.content,
-        clientX: x / 1.2,
-        clientY: y - 20
-      }));
-      setShowLegendTooltip(true);
-    };
-    const handleMouseLeave = () => {
-      if (showLegendTooltip === false) return;
-      setTimeout(() => {
-        setShowLegendTooltip(false);
-      }, 1200);
-    };
-    if (chartsData && chartsData.length > 0 && payload) {
-      const chartsDataLabel = chartsData.filter(item => item.name === payload.value);
-      if (chartsDataLabel && chartsDataLabel.length > 0) {
-        return /*#__PURE__*/React$1.createElement("g", {
-          onMouseEnter: () => handleMouseEnter(payload.value),
-          onMouseLeave: handleMouseLeave
-        }, /*#__PURE__*/React$1.createElement("text", {
-          style: {
-            whiteSpace: 'nowrap'
-          },
-          height: height,
-          x: 20,
-          y: y,
-          fontSize: labelFontSize,
-          orientation: orientation,
-          stroke: stroke,
-          textAnchor: "start"
-          // verticalAnchor="middle"
-          ,
-          fill: fill
-        }, payload.value.length > labelLimitedLetters - 1 ? `${payload.value.slice(0, labelLimitedLetters)}...` : payload.value));
-      }
-      return null;
+    @media (max-width: 1366px) {
+    font-size: 12px;
     }
-    return null;
   };
-  return /*#__PURE__*/React$1.createElement(ControlsContainer$3, {
-    ref: wrapper,
-    height: height,
-    width: width,
-    textColor: textColor,
-    scroller: chartsData.length > showScrollerBarsCount ? 'auto' : 'hidden',
-    className: className
-  }, chartsData?.length > 0 ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React$1.createElement(CardHeader, {
-    ref: topHeader,
-    className: "CardHeader"
-  }, !hideTitle ? /*#__PURE__*/React$1.createElement(Title$8, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
-    className: "TotalValue"
-  }, currencySign && /*#__PURE__*/React$1.createElement(CurrencySign, {
-    className: "CurrencySign"
-  }, getCurrencySign(currencyType, value)), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '') : '') : '', /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
-    width: "100%",
-    height: calculateChartHeight()
-  }, /*#__PURE__*/React$1.createElement(BarChart$1, {
-    layout: "vertical",
-    data: chartsData,
-    margin: {
-      top: 10,
-      right: 20,
-      bottom: 20,
-      left: 10
+  p1 {
+    font-weight: 400;
+    color: #726F6F;
+    @media (max-width: 1536px) {
+    font-size: 14px;
     }
-  }, /*#__PURE__*/React$1.createElement(XAxis, {
-    type: "number",
-    domain: [0, dataMax => dataMax * rightGap]
-    // allowDataOverflow={false}
-    ,
-    hide: true
-  }), /*#__PURE__*/React$1.createElement(YAxis, {
-    dataKey: "name",
-    type: "category",
-    width: labelLimitedLetters * 10,
-    tickLine: false,
-    axisLine: false,
-    interval: 0,
-    allowDataOverflow: true,
-    tick: CustomizedTickBarChart
-  }), /*#__PURE__*/React$1.createElement(Bar, {
-    dataKey: "value",
-    barSize: 20,
-    fill: "#8884d8",
-    barCategoryGap: 10,
-    barGap: 5
-  }, /*#__PURE__*/React$1.createElement(LabelList, {
-    dataKey: "value",
-    content: CustomizedLabel
-  }), chartsData.map((entry, index) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  React$1.createElement(Cell, {
-    key: `cell-${index}`,
-    fill: barBackgrounds[index % 20]
-  }))), showLegendTooltip && /*#__PURE__*/React$1.createElement(Tooltip, {
-    direction: "top",
-    content: tooltipText.content,
-    top: tooltipText.clientY,
-    left: tooltipText.clientX,
-    style: {
-      pointerEvents: 'none'
+    @media (max-width: 1366px) {
+    font-size: 12px;
     }
-  })))) : /*#__PURE__*/React$1.createElement(NoDataFoundMessage, {
-    noDataText: noDataText
-  }));
+  };
+`;
+const OutBanner$1 = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: ${props => props.textColor};
+  cursor: pointer;
+  @media (max-width: 1536px) {
+    font-size: 13px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+  > svg {
+    width: 14px;
+    height: 14px;
+    @media (max-width: 1536px) {
+      width: 13px;
+      height: 13px;
+    }
+    @media (max-width: 1366px) {
+      width: 12px;
+      height: 12px;
+    }
+  }
+`;
+
+const MarketShareDescription = props => {
+  const {
+    width,
+    height,
+    marketShareData,
+    iconColor,
+    onBannerClick,
+    dotCut
+  } = props;
+  const displayField = dataItem => {
+    const content = /*#__PURE__*/React$1.createElement(FieldTitleAndValueSubContainer, {
+      className: "FieldTitleAndValueSubContainer"
+    }, /*#__PURE__*/React$1.createElement(FieldTitle, {
+      className: "FieldTitle"
+    }, dataItem.label), /*#__PURE__*/React$1.createElement(FormattedValue$1, {
+      className: "FormattedValue"
+    }, /*#__PURE__*/React$1.createElement(TextBeforeAndAfterValue$1, {
+      className: "TextBeforeAndAfterValue"
+    }, dataItem.textBefore), dotCut ? getFormattedValue(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? dataItem.value?.toFixed(2) : dataItem.value) : getNumberWithCommas(dataItem.value), dotCut ? getFormattedUnits(dataItem.value) : '', /*#__PURE__*/React$1.createElement(TextBeforeAndAfterValue$1, null, dataItem.textAfter)));
+    return content;
+  };
+  const dispalyRowFields = data => {
+    if (!data && !data.length > 0) return '';
+    const content = /*#__PURE__*/React$1.createElement(FieldsContainer, {
+      className: "FieldsContainer",
+      height: "160px"
+    }, data?.map((item, index) => /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(OneFieldsContainer, {
+      className: "OneFieldsContainer",
+      padding: index === 0 ? '0px' : '0 0 0 40px'
+    }, displayField(item)), data?.length !== index + 1 ? /*#__PURE__*/React$1.createElement(ColumnLineSeporatorContainer, {
+      className: "ColumnLineSeporatorContainer_vertical"
+    }, /*#__PURE__*/React$1.createElement(ColumnLineSeporator, {
+      className: "ColumnLineSeporator"
+    })) : '')));
+    return content;
+  };
+  const displayRows = () => {
+    if (!marketShareData || marketShareData?.length === 0) return '';
+    const content = /*#__PURE__*/React$1.createElement(AllRowsContainer, {
+      className: "AllRowsContainer"
+    }, marketShareData.map((item, index) => /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(OneRowContainer, {
+      className: "OneRowContainer"
+    }, /*#__PURE__*/React$1.createElement(RowTitle, {
+      className: "RowTitle"
+    }, /*#__PURE__*/React$1.createElement(InfoTextLabel, {
+      className: "InfoTextLabel",
+      dangerouslySetInnerHTML: {
+        __html: item.rowTitle
+      }
+    }), item.showBanner && /*#__PURE__*/React$1.createElement(OutBanner$1, {
+      className: "OutBanner",
+      onClick: () => onBannerClick({
+        eventName: 'onBannerClick',
+        rowName: item.name
+      })
+    }, /*#__PURE__*/React$1.createElement(ExportIcon, {
+      color: "#212121"
+    }), "View By Banner")), dispalyRowFields(item.fieldsArray), /*#__PURE__*/React$1.createElement(InfoTextContainer, {
+      className: "InfoTextContainer"
+    }, item.rowFooter && item.rowFooter?.length > 0 ? /*#__PURE__*/React$1.createElement(IconContainer, {
+      className: "IconContainer"
+    }, /*#__PURE__*/React$1.createElement(LampIcon, {
+      width: "23px",
+      height: "19px",
+      fill: iconColor
+    })) : '', /*#__PURE__*/React$1.createElement(InfoTextLabel, {
+      className: "InfoTextLabel",
+      dangerouslySetInnerHTML: {
+        __html: item.rowFooter
+      }
+    }))), marketShareData?.length !== index + 1 ? /*#__PURE__*/React$1.createElement(ColumnLineSeporatorContainer, {
+      className: "ColumnLineSeporatorContainer_horizontal"
+    }, /*#__PURE__*/React$1.createElement(ColumnLineSeporator, {
+      className: "ColumnLineSeporator"
+    })) : '')));
+    return content;
+  };
+  return /*#__PURE__*/React$1.createElement(MainContainer$1, {
+    className: "MainContainer",
+    height: height,
+    width: width
+  }, displayRows());
 };
-TotalHorizontalCharts.propTypes = {
-  className: PropTypes.string,
-  title: PropTypes.string,
-  value: PropTypes.number,
-  dotCut: PropTypes.bool,
-  currencySign: PropTypes.bool,
-  currencyType: PropTypes.string,
-  chartsData: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.number,
-    color: PropTypes.string
+MarketShareDescription.propTypes = {
+  marketShareData: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    checked: PropTypes.bool,
+    disabled: PropTypes.bool
   })),
-  showScrollerBarsCount: PropTypes.number,
-  showPercentAsideValue: PropTypes.bool,
-  labelFontSize: PropTypes.number,
-  labelLimitedLetters: PropTypes.number,
-  width: PropTypes.string,
   height: PropTypes.string,
-  rightGap: PropTypes.number,
-  textColor: PropTypes.string,
-  noDataText: PropTypes.string,
-  isDollar: PropTypes.bool,
-  isPercentage: PropTypes.bool,
-  showDollarSign: PropTypes.bool,
-  hideTotalValue: PropTypes.bool,
-  hideTitle: PropTypes.bool
+  width: PropTypes.string,
+  iconColor: PropTypes.string,
+  onBannerClick: PropTypes.func,
+  dotCut: PropTypes.bool
 };
-TotalHorizontalCharts.defaultProps = {
-  className: '',
-  title: 'SALES',
-  value: 0,
-  dotCut: false,
-  currencySign: false,
-  currencyType: 'USD',
-  chartsData: [],
-  showScrollerBarsCount: 7,
-  showPercentAsideValue: false,
-  labelFontSize: 10,
-  labelLimitedLetters: 12,
+MarketShareDescription.defaultProps = {
+  marketShareData: [],
   width: '100%',
   height: '100%',
-  rightGap: 1,
-  textColor: '#212121',
-  noDataText: 'No Data',
-  isDollar: true,
-  isPercentage: false,
-  showDollarSign: true,
-  hideTotalValue: false,
-  hideTitle: false
+  iconColor: '#1B30AA',
+  onBannerClick: () => {},
+  dotCut: false
 };
 
 const ControlsContainer$2 = styled.div`
@@ -28870,10 +28868,11 @@ const LegendContainer = styled.div`
   left: 0;
   text-align: center;
   width: ${props => `${props.width}px`};
-  bottom: 30px;
+  bottom: 20px;
 `;
 const Controls$1 = styled.div`
-  height: calc(100% - 30px);
+  /* height: calc(100% - 30px); */
+  height: 100%;
   display: flex;
   flex-direction: column;
   background-color: white;
@@ -28889,14 +28888,14 @@ const Title$2 = styled.h5`
 const ChartsWrapper = styled.div`
   flex-grow: 1;
   width: ${props => props.width};
-  margin-top: auto;
+  /* margin-top: auto; */
   background-color: white;
 `;
 const LineChartWrapper = styled.div`
-  height: 25%;
+  height: 30%;
 `;
 const BarChartWrapper = styled.div`
-  height: 75%;
+  height: 70%;
 `;
 const TooltipDiv = styled.div`
   border-radius: 5px;
@@ -29112,7 +29111,7 @@ const DoubleBarSingleLine = props => {
     syncId: "anyId",
     // This synchronizes the charts
     margin: {
-      top: 20,
+      top: 0,
       right: 35,
       left: 35,
       bottom: 5
@@ -29717,8 +29716,8 @@ const scrollableStyles$1 = `
   }
 `;
 const CategorySalesPanelContainer = styled.div`
-  width: "100%", 
-  margin: "10px auto"
+  width: "100%";
+  margin: "10px auto";
 `;
 const AccordionContainer = styled.div`  
   border-radius: 12px;
@@ -29727,7 +29726,7 @@ const AccordionContainer = styled.div`
 `;
 const CategorySalesContainer = styled.button`
   display: flex;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   align-items: center;
   width: 100%;
   font-family: "Poppins", sans-serif;
@@ -29749,7 +29748,7 @@ const ItemSalesContainer = styled.div`
   padding-top: 10px;
   background: #F7F8FA;
   border-top: 1px solid #ddd;  
-  gap:12px;
+  gap: 12px;
   transition: max-height 0.3s ease-in-out;   
   max-height: 250px; 
   ${scrollableStyles$1}
@@ -29759,9 +29758,21 @@ const FieldContainer = styled.div`
   display: flex;
   align-items: center;
   padding: 5px 0px;
-  width: ${props => props.width};   
   font-size: ${props => props.fontSize || '14px'}; 
   font-weight: ${props => props.fontwidth || 500}; 
+  &:first-child {
+    width: 40px;
+  }
+  &:nth-child(2) {
+    width: 320px;
+  }
+  &:nth-child(3) {
+    flex-grow: 1;
+  }
+  &:nth-child(4) {
+    width: 21%;
+    margin-left: auto;
+  }
 `;
 
 const ButtonContainer = styled.button`  
@@ -29776,7 +29787,7 @@ const ButtonContainer = styled.button`
   opacity: ${props => props.disabled ? "0.4" : "1"};
   cursor: ${props => props.disabled ? "not-allowed" : "pointer"};
   transition: all 0.3s ease-in-out;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
 
   &:hover {
     border: ${props => props.disabled ? "1px solid #ddd" : `1px solid ${props.hoverbordercolor}`};
@@ -29858,7 +29869,6 @@ const BannerButton = ({
 
 const ItemSalesPanelContainer = styled.div`
   display: flex;
-  flex-direction: row; 
   background: #F7F8FA;
   color: #212121;
   transition: max-height 0.3s ease-in-out;  
@@ -29867,7 +29877,7 @@ const ItemTitle = styled.h4`
   font-size: 14px;
   font-weight: 400;
   margin: 14px 0px;
-  width: 30%
+  min-width: 360px;
 `;
 const BannerIconWrapper = styled.div`
   display: flex;
@@ -29892,11 +29902,15 @@ const ItemSalesPanel = props => {
     banners,
     onBannerClick
   } = props;
+  const truncateString = maxLength => {
+    return itemName[0].length > maxLength ? itemName[0].slice(0, maxLength) + '...' : itemName[0];
+  };
   return /*#__PURE__*/React$1.createElement(ItemSalesPanelContainer, {
     "data-testid": "item-sales-panel-container"
   }, /*#__PURE__*/React$1.createElement(ItemTitle, {
-    "data-testid": "item-title"
-  }, itemName), (banners || []).map(banner => /*#__PURE__*/React$1.createElement(BannerIconWrapper, {
+    "data-testid": "item-title",
+    title: itemName[0]
+  }, truncateString(35)), (banners || []).map(banner => /*#__PURE__*/React$1.createElement(BannerIconWrapper, {
     "data-testid": "banner-icon-wrapper",
     key: banner
   }, /*#__PURE__*/React$1.createElement(BannerButton, {
@@ -29969,16 +29983,13 @@ const CategorySalesPanel = ({
       "data-testid": "category-sales-container",
       onClick: () => setIsOpen(!isOpen)
     }, /*#__PURE__*/React$1.createElement(FieldContainer, {
-      "data-testid": "field-container-dropdown-icon",
-      width: "2.4%"
+      "data-testid": "field-container-dropdown-icon"
     }, isOpen ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, null) : /*#__PURE__*/React$1.createElement(MenuItemRightIcon, null)), /*#__PURE__*/React$1.createElement(FieldContainer, {
       "data-testid": "field-container-category",
-      width: "25%",
       fontwidth: 500,
       fontSize: "14px"
     }, categorySales.category), /*#__PURE__*/React$1.createElement(FieldContainer, {
       "data-testid": "field-container-items-counter",
-      width: "70%",
       fontwidth: 400,
       fontSize: "20px"
     }, /*#__PURE__*/React$1.createElement(ItemsCounterGraphPanel, {
@@ -29987,7 +29998,6 @@ const CategorySalesPanel = ({
       graphCounterMax: graphCounterMax
     })), /*#__PURE__*/React$1.createElement(FieldContainer, {
       "data-testid": "field-container-value-of-items",
-      width: "10%",
       fontwidth: 400,
       fontSize: "14px"
     }, `${displayFormattedValue(categorySales.valueOfItems)}`)), isOpen && /*#__PURE__*/React$1.createElement(AccordionContent, {
@@ -30063,8 +30073,16 @@ const CategorySalesMainContainer = styled.div`
 `;
 const CategoryHeadersContainer = styled.div`
   display: flex;
-  flex-direction: row;
-  padding: 10px ;
+  padding: 10px;
+  > div {
+    &:first-of-type {
+      padding-left: 40px;
+      box-sizing: border-box;
+    }
+    &:last-of-type {
+      margin-left: auto;
+    }
+  }
 `;
 const CategoryHeader = styled.div`
   display: flex;
@@ -30082,7 +30100,6 @@ const CategorySalesDataContainer = styled.div`
   ${scrollableStyles}
 `;
 
-/* BreakdownPanel */
 const BreakdownPanel = props => {
   const {
     title = '',
@@ -30097,10 +30114,9 @@ const BreakdownPanel = props => {
     }
   } = props;
   const getCategoryHeaderWidth = index => {
-    if (index === 0) return "2.5%";
-    if (index === 1) return "23.2%";
-    if (index === 2) return "64.8%";
-    if (index === 3) return "9.5%";
+    if (index === 0) return "360px";
+    if (index === 1) return "auto";
+    if (index === 2) return "21%";
   };
   return /*#__PURE__*/React$1.createElement(BreakdownPanelContainer, {
     "data-testid": "breakdown-panel-container",
@@ -30120,12 +30136,12 @@ const BreakdownPanel = props => {
     "data-testid": "category-sales-main-container"
   }, /*#__PURE__*/React$1.createElement(CategoryHeadersContainer, {
     "data-testid": "category-headers-container"
-  }, categoryHeaders && ["", ...categoryHeaders].map((headerTitle, index) => /*#__PURE__*/React$1.createElement(CategoryHeader, {
+  }, categoryHeaders?.map((headerTitle, index) => /*#__PURE__*/React$1.createElement(CategoryHeader, {
     "data-testid": "category-header",
-    width: getCategoryHeaderWidth(index),
-    key: headerTitle
+    key: headerTitle,
+    width: getCategoryHeaderWidth(index)
   }, headerTitle))), /*#__PURE__*/React$1.createElement(CategorySalesDataContainer, {
-    "data-testid": "category-sales-data-container"
+    "data-testid": "caitem-sales-panel-containerer"
   }, data.map((categorySales, index) => /*#__PURE__*/React$1.createElement(CategorySalesPanel, {
     "data-testid": "category-sales-panel",
     key: categorySales.category || index,