sag_components 2.0.0-beta96 → 2.0.0-beta98

package/dist/index.esm.js

@@ -4,6 +4,16 @@ import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tool
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { motion, AnimatePresence } from 'framer-motion';
 
+function _extends$1() {
+  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1.apply(null, arguments);
+}
+
 const ButtonContainer$1 = styled.div`
   //position: relative;
   display: flex;
@@ -24,7 +34,7 @@ const ButtonItem = styled.div`
   height: ${props => props.height};
   color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
   border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
-  border-radius: 12px;
+  border-radius: ${props => props.borderRadius};
   background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
   box-sizing: border-box;
   gap: 8px;
@@ -43,7 +53,7 @@ const ButtonItem = styled.div`
     transition: background-color 0.3s, color 0.3s;
   }
 `;
-const Label$7 = styled.label`
+const Label$8 = styled.label`
   font-family: "Poppins";
   font-size: 14px;
   font-weight: 400;
@@ -51,7 +61,7 @@ const Label$7 = styled.label`
   pointer-events: none;
   user-select: none;
 `;
-const IconWrapper$1 = styled.div`
+const IconWrapper$3 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -60,14 +70,13 @@ const IconWrapper$1 = styled.div`
 const InputCommit = styled.input`
   font-family: "Poppins", sans-serif;
   border: ${props => `0px solid ${props.disabled ? props.disabled_border_color : props.hover_border_color}`};
-  border-radius: 8px;
   font-weight: 400;
   font-size: 14px;
   width: ${props => props.width};
   height: ${props => props.height};
   color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
   border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
-  border-radius: 12px;
+  border-radius: ${props => props.borderRadius};
   background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
   cursor: pointer;
   padding: ${props => props.padding};
@@ -87,6 +96,24 @@ const InputCommit = styled.input`
   }
 `;
 
+const DownloadIcon = _ref => {
+  let {
+    width = '8',
+    height = '9',
+    color = '#212121'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M9.57031 14.8438L3.94531 9.84375C3.67188 9.64844 3.67188 9.21875 3.90625 8.98438C4.10156 8.71094 4.53125 8.71094 4.76562 8.90625L9.375 13.0078V0.625C9.375 0.3125 9.64844 0 10 0C10.3125 0 10.625 0.3125 10.625 0.625V13.0078L15.1953 8.94531C15.4297 8.71094 15.8594 8.71094 16.0547 8.98438C16.2891 9.21875 16.2891 9.64844 16.0156 9.84375L10.3906 14.8438C10.2734 14.9609 10.1172 15 10 15C9.84375 15 9.6875 14.9609 9.57031 14.8438ZM17.5 12.5C18.8672 12.5 20 13.6328 20 15V17.5C20 18.9062 18.8672 20 17.5 20H2.5C1.09375 20 0 18.9062 0 17.5V15C0 13.6328 1.09375 12.5 2.5 12.5H4.375C4.6875 12.5 5 12.8125 5 13.125C5 13.4766 4.6875 13.75 4.375 13.75H2.5C1.79688 13.75 1.25 14.3359 1.25 15V17.5C1.25 18.2031 1.79688 18.75 2.5 18.75H17.5C18.1641 18.75 18.75 18.2031 18.75 17.5V15C18.75 14.3359 18.1641 13.75 17.5 13.75H15.625C15.2734 13.75 15 13.4766 15 13.125C15 12.8125 15.2734 12.5 15.625 12.5H17.5ZM17.1875 16.25C17.1875 16.7969 16.7578 17.1875 16.25 17.1875C15.7031 17.1875 15.3125 16.7969 15.3125 16.25C15.3125 15.7422 15.7031 15.3125 16.25 15.3125C16.7578 15.3125 17.1875 15.7422 17.1875 16.25Z",
+    fill: color
+  }));
+};
+
 const FilterIcon = _ref => {
   let {
     width = '17',
@@ -132,24 +159,6 @@ const OptionsIcon = _ref => {
   }));
 };
 
-const DownloadIcon = _ref => {
-  let {
-    width = '8',
-    height = '9',
-    color = '#212121'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 20 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M9.57031 14.8438L3.94531 9.84375C3.67188 9.64844 3.67188 9.21875 3.90625 8.98438C4.10156 8.71094 4.53125 8.71094 4.76562 8.90625L9.375 13.0078V0.625C9.375 0.3125 9.64844 0 10 0C10.3125 0 10.625 0.3125 10.625 0.625V13.0078L15.1953 8.94531C15.4297 8.71094 15.8594 8.71094 16.0547 8.98438C16.2891 9.21875 16.2891 9.64844 16.0156 9.84375L10.3906 14.8438C10.2734 14.9609 10.1172 15 10 15C9.84375 15 9.6875 14.9609 9.57031 14.8438ZM17.5 12.5C18.8672 12.5 20 13.6328 20 15V17.5C20 18.9062 18.8672 20 17.5 20H2.5C1.09375 20 0 18.9062 0 17.5V15C0 13.6328 1.09375 12.5 2.5 12.5H4.375C4.6875 12.5 5 12.8125 5 13.125C5 13.4766 4.6875 13.75 4.375 13.75H2.5C1.79688 13.75 1.25 14.3359 1.25 15V17.5C1.25 18.2031 1.79688 18.75 2.5 18.75H17.5C18.1641 18.75 18.75 18.2031 18.75 17.5V15C18.75 14.3359 18.1641 13.75 17.5 13.75H15.625C15.2734 13.75 15 13.4766 15 13.125C15 12.8125 15.2734 12.5 15.625 12.5H17.5ZM17.1875 16.25C17.1875 16.7969 16.7578 17.1875 16.25 17.1875C15.7031 17.1875 15.3125 16.7969 15.3125 16.25C15.3125 15.7422 15.7031 15.3125 16.25 15.3125C16.7578 15.3125 17.1875 15.7422 17.1875 16.25Z",
-    fill: color
-  }));
-};
-
 const DocumentIcon = _ref => {
   let {
     width = '19',
@@ -282,40 +291,169 @@ const EyeIcon = _ref => {
   }));
 };
 
-const ButtonArrowRight = _ref => {
-  let {
-    width = '16',
-    height = '17'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 17",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("g", null, /*#__PURE__*/React$1.createElement("path", {
-    id: "icon",
-    d: "M14.5 8.48438C14.5 6.17188 13.25 4.04688 11.25 2.85938C9.21875 1.70312 6.75 1.70312 4.75 2.85938C2.71875 4.04688 1.5 6.17188 1.5 8.48438C1.5 10.8282 2.71875 12.9532 4.75 14.1406C6.75 15.2969 9.21875 15.2969 11.25 14.1406C13.25 12.9532 14.5 10.8282 14.5 8.48438ZM0 8.48438C0 5.64062 1.5 3.01562 4 1.57812C6.46875 0.140625 9.5 0.140625 12 1.57812C14.4688 3.01562 16 5.64062 16 8.48438C16 11.3594 14.4688 13.9844 12 15.4219C9.5 16.8594 6.46875 16.8594 4 15.4219C1.5 13.9844 0 11.3594 0 8.48438ZM9.03125 11.7656C8.71875 12.0782 8.25 12.0782 7.96875 11.7656C7.65625 11.4844 7.65625 11.0156 7.96875 10.7032L9.4375 9.23438H4.75C4.3125 9.23438 4 8.92188 4 8.48438C4 8.07812 4.3125 7.73438 4.75 7.73438H9.4375L7.96875 6.26562C7.65625 5.98438 7.65625 5.51562 7.96875 5.23438C8.25 4.92188 8.71875 4.92188 9.03125 5.23438L11.7812 7.98438C12.0625 8.26562 12.0625 8.73438 11.7812 9.01562L9.03125 11.7656Z",
-    fill: "white"
-  })));
-};
+const ButtonArrowRight = ({
+  width = '16',
+  height = '17'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 16 17",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("g", null, /*#__PURE__*/React$1.createElement("path", {
+  id: "icon",
+  d: "M14.5 8.48438C14.5 6.17188 13.25 4.04688 11.25 2.85938C9.21875 1.70312 6.75 1.70312 4.75 2.85938C2.71875 4.04688 1.5 6.17188 1.5 8.48438C1.5 10.8282 2.71875 12.9532 4.75 14.1406C6.75 15.2969 9.21875 15.2969 11.25 14.1406C13.25 12.9532 14.5 10.8282 14.5 8.48438ZM0 8.48438C0 5.64062 1.5 3.01562 4 1.57812C6.46875 0.140625 9.5 0.140625 12 1.57812C14.4688 3.01562 16 5.64062 16 8.48438C16 11.3594 14.4688 13.9844 12 15.4219C9.5 16.8594 6.46875 16.8594 4 15.4219C1.5 13.9844 0 11.3594 0 8.48438ZM9.03125 11.7656C8.71875 12.0782 8.25 12.0782 7.96875 11.7656C7.65625 11.4844 7.65625 11.0156 7.96875 10.7032L9.4375 9.23438H4.75C4.3125 9.23438 4 8.92188 4 8.48438C4 8.07812 4.3125 7.73438 4.75 7.73438H9.4375L7.96875 6.26562C7.65625 5.98438 7.65625 5.51562 7.96875 5.23438C8.25 4.92188 8.71875 4.92188 9.03125 5.23438L11.7812 7.98438C12.0625 8.26562 12.0625 8.73438 11.7812 9.01562L9.03125 11.7656Z",
+  fill: "white"
+})));
 
-const ReselectIcon = _ref => {
-  let {
-    width = '16',
-    height = '16',
-    color = '#212121'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M4.21875 15.5312L1.21875 12.5312C0.90625 12.25 0.90625 11.7812 1.21875 11.4688L4.21875 8.5C4.5 8.1875 4.96875 8.1875 5.25 8.5C5.5625 8.78125 5.5625 9.25 5.25 9.53125L3.53125 11.25H14.25C14.6562 11.25 15 11.5938 15 12C15 12.4375 14.6562 12.75 14.25 12.75L3.53125 12.7812L5.25 14.5C5.5625 14.7812 5.5625 15.25 5.25 15.5312C4.96875 15.8438 4.5 15.8438 4.21875 15.5312ZM14.7812 4.53125L11.7812 7.53125C11.4688 7.84375 11 7.84375 10.7188 7.53125C10.4062 7.25 10.4062 6.78125 10.7188 6.46875L12.4375 4.75H1.75C1.3125 4.75 1 4.4375 1 4C1 3.59375 1.3125 3.25 1.75 3.25H12.4375L10.7188 1.53125C10.4062 1.25 10.4062 0.78125 10.7188 0.46875C11 0.1875 11.4688 0.1875 11.7812 0.46875L14.7812 3.5C15.0625 3.78125 15.0625 4.25 14.7812 4.53125Z",
-    fill: color
-  }));
+const ReselectIcon = ({
+  width = '16',
+  height = '16',
+  color = '#212121'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M4.21875 15.5312L1.21875 12.5312C0.90625 12.25 0.90625 11.7812 1.21875 11.4688L4.21875 8.5C4.5 8.1875 4.96875 8.1875 5.25 8.5C5.5625 8.78125 5.5625 9.25 5.25 9.53125L3.53125 11.25H14.25C14.6562 11.25 15 11.5938 15 12C15 12.4375 14.6562 12.75 14.25 12.75L3.53125 12.7812L5.25 14.5C5.5625 14.7812 5.5625 15.25 5.25 15.5312C4.96875 15.8438 4.5 15.8438 4.21875 15.5312ZM14.7812 4.53125L11.7812 7.53125C11.4688 7.84375 11 7.84375 10.7188 7.53125C10.4062 7.25 10.4062 6.78125 10.7188 6.46875L12.4375 4.75H1.75C1.3125 4.75 1 4.4375 1 4C1 3.59375 1.3125 3.25 1.75 3.25H12.4375L10.7188 1.53125C10.4062 1.25 10.4062 0.78125 10.7188 0.46875C11 0.1875 11.4688 0.1875 11.7812 0.46875L14.7812 3.5C15.0625 3.78125 15.0625 4.25 14.7812 4.53125Z",
+  fill: color
+}));
+
+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 PlusIcon = ({
+  width = '17',
+  height = '17',
+  color = '#212121'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "17",
+  viewBox: "0 0 16 17",
+  fill: "none"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M8.71875 2.28125V7.90625H14.3438C14.8008 7.90625 15.1875 8.29297 15.1875 8.75C15.1875 9.24219 14.8008 9.59375 14.3438 9.59375H8.71875V15.2188C8.71875 15.7109 8.33203 16.0625 7.875 16.0625C7.38281 16.0625 7.03125 15.7109 7.03125 15.2188V9.59375H1.40625C0.914062 9.59375 0.5625 9.24219 0.5625 8.75C0.5625 8.29297 0.914062 7.90625 1.40625 7.90625H7.03125V2.28125C7.03125 1.82422 7.38281 1.4375 7.875 1.4375C8.33203 1.4375 8.71875 1.82422 8.71875 2.28125Z",
+  fill: "#066768"
+}));
+
+const Plus = ({
+  width = 17,
+  height = 17,
+  fill = 'white'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 17 17",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M9.34619 2.03369V7.65869H14.9712C15.4282 7.65869 15.8149 8.04541 15.8149 8.50244C15.8149 8.99463 15.4282 9.34619 14.9712 9.34619H9.34619V14.9712C9.34619 15.4634 8.95947 15.8149 8.50244 15.8149C8.01025 15.8149 7.65869 15.4634 7.65869 14.9712V9.34619H2.03369C1.5415 9.34619 1.18994 8.99463 1.18994 8.50244C1.18994 8.04541 1.5415 7.65869 2.03369 7.65869H7.65869V2.03369C7.65869 1.57666 8.01025 1.18994 8.50244 1.18994C8.95947 1.18994 9.34619 1.57666 9.34619 2.03369Z",
+  fill: fill
+}));
+
+const Button$1 = props => {
+  const {
+    text = "",
+    type = "primary",
+    size = "small",
+    height = "",
+    width = "",
+    disabled = false,
+    textColor = "",
+    backgroundColor = "",
+    borderColor = "",
+    borderRadius = "12px",
+    hoverTextColor = "",
+    hoverBackgroundColor = "",
+    hoverBorderColor = "",
+    disabledTextColor = "",
+    disabledBackgroundColor = "",
+    disabledBorderColor = "",
+    onClick = () => {},
+    leftIcon = null,
+    rightIcon = null,
+    isSubmitButton = false
+  } = props;
+  const [clicked, setClicked] = useState(false);
+  const [hover, setHover] = useState(false);
+  const handleClick = event => {
+    setClicked(prev => !prev);
+    onClick(event);
+    setTimeout(() => setClicked(prev => !prev), 300);
+  };
+  const iconMap = {
+    arrow: ButtonArrowRight,
+    filter: FilterIcon,
+    options: OptionsIcon,
+    download: DownloadIcon,
+    document: DocumentIcon,
+    fly: FlyIcon,
+    bell: BellIcon,
+    maintenance: MaintenanceIcon,
+    exit: ExitIcon,
+    eye: EyeIcon,
+    reselect: ReselectIcon,
+    plus: Plus
+  };
+  const getIcon = icon => {
+    if (!icon || icon === "none") return null;
+    const IconComponent = iconMap[icon.toLowerCase()];
+    const iconProps = {
+      height: "16px",
+      width: "16px",
+      color: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff")
+    };
+    return /*#__PURE__*/React$1.createElement(IconWrapper$3, null, /*#__PURE__*/React$1.createElement(IconComponent, iconProps));
+  };
+  const commonProps = {
+    width: width || null,
+    height: height || (size === "small" ? "33px" : "45px"),
+    disabled,
+    text_color: textColor || (type === "secondary" ? "#212121" : "#ffffff"),
+    background_color: backgroundColor || (type === "secondary" ? "#ffffff" : "#229E38"),
+    border_color: borderColor || (type === "secondary" ? "#B1B1B1" : "#229E38"),
+    hover_text_color: hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff"),
+    hover_background_color: hoverBackgroundColor || (type === "secondary" ? "#E8F5EB" : "#92CF17"),
+    hover_border_color: hoverBorderColor || (type === "secondary" ? "#229E38" : "#92CF17"),
+    disabled_text_color: disabledTextColor || "#B1B1B1",
+    disabled_background_color: disabledBackgroundColor || (type === "secondary" ? "#ffffff" : "#E3E4E5"),
+    disabled_border_color: disabledBorderColor || "#E3E4E5",
+    padding: size === "small" ? "0 16px" : "0 20px",
+    onClick: !disabled ? handleClick : null
+  };
+  return /*#__PURE__*/React$1.createElement(ButtonContainer$1, {
+    className: "ButtonContainer",
+    width: commonProps.width,
+    height: commonProps.height
+  }, isSubmitButton ? /*#__PURE__*/React$1.createElement(InputCommit, _extends$1({
+    className: clicked ? "InputCommit-clicked" : "InputCommit",
+    value: text,
+    type: "submit",
+    borderRadius: borderRadius
+  }, commonProps)) : /*#__PURE__*/React$1.createElement(ButtonItem, _extends$1({
+    className: clicked ? "ButtonItem-clicked" : "ButtonItem",
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    borderRadius: borderRadius
+  }, commonProps), getIcon(leftIcon), /*#__PURE__*/React$1.createElement(Label$8, {
+    className: "Label",
+    disabled: disabled
+  }, text), getIcon(rightIcon)));
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1471,199 +1609,6 @@ if (process.env.NODE_ENV !== 'production') {
 var propTypesExports = propTypes.exports;
 var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
-const Button = _ref => {
-  let {
-    text = '',
-    type = 'primary',
-    size = 'small',
-    height = '',
-    width = '',
-    disabled = false,
-    textColor = '',
-    backgroundColor = '',
-    borderColor = '',
-    hoverTextColor = '',
-    hoverBackgroundColor = '',
-    hoverBorderColor = '',
-    disabledTextColor = '',
-    disabledBackgroundColor = '',
-    disabledBorderColor = '',
-    onClick = () => {},
-    leftIcon = 'none',
-    rightIcon = 'none',
-    isSubmitButton = false
-  } = _ref;
-  const [clicked, setClicked] = useState(false);
-  const [hover, setHover] = useState(false);
-  const handleSubmitButtonOnClick = () => {
-    setClicked(true);
-    onClick(`SubmitButtonOnClick: ${text}`);
-    setTimeout(() => {
-      setClicked(false);
-    }, 300);
-  };
-  const handleButtonClick = event => {
-    setClicked(true);
-    onClick(event);
-    setTimeout(() => {
-      setClicked(false);
-    }, 300);
-  };
-  const getIcon = icon => {
-    const iconHeight = '16px';
-    const iconWidth = '16px';
-    const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#ffffff');
-    const newHoverTextColor = hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff');
-    const newDisabledTextColor = disabledTextColor || '#B1B1B1';
-    const newEnabledTextColor = hover ? newHoverTextColor : newTextColor;
-    const color = disabled ? newDisabledTextColor : newEnabledTextColor;
-    switch (icon.toLowerCase()) {
-      case 'arrow':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "ArrowRightIcon"
-        }, /*#__PURE__*/React$1.createElement(ButtonArrowRight, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'filter':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "FilterIcon"
-        }, /*#__PURE__*/React$1.createElement(FilterIcon, {
-          height: "150px",
-          width: iconWidth,
-          color: color
-        }));
-      case 'options':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "OptionsIcon"
-        }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'download':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "DownloadIcon"
-        }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'document':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "DocumentIcon"
-        }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'fly':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "FlyIcon"
-        }, /*#__PURE__*/React$1.createElement(FlyIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'bell':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "BellIcon"
-        }, /*#__PURE__*/React$1.createElement(BellIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "MaintenanceIcon"
-        }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'exit':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "ExitIcon"
-        }, /*#__PURE__*/React$1.createElement(ExitIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'eye':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "EyeIcon"
-        }, /*#__PURE__*/React$1.createElement(EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'reselect':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
-          className: "ReselectIcon"
-        }, /*#__PURE__*/React$1.createElement(ReselectIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      default:
-        return '';
-    }
-  };
-  const getLeftIcon = () => {
-    if (!leftIcon || leftIcon === 'none') return '';
-    return getIcon(leftIcon);
-  };
-  const getRightIcon = () => {
-    if (!rightIcon || rightIcon === 'none') return '';
-    return getIcon(rightIcon);
-  };
-  return /*#__PURE__*/React$1.createElement(ButtonContainer$1, {
-    className: "ButtonContainer",
-    width: width || null,
-    height: height || (size === 'small' ? '33px' : '45px')
-  }, isSubmitButton ? /*#__PURE__*/React$1.createElement(InputCommit, {
-    className: clicked ? 'InputCommit-clicked' : 'InputCommit',
-    value: text,
-    type: "submit",
-    width: width || null,
-    height: height || (size === 'small' ? '33px' : '45px'),
-    disabled: disabled,
-    text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
-    background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
-    border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
-    hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
-    hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
-    hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
-    disabled_text_color: disabledTextColor || '#B1B1B1',
-    disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
-    disabled_border_color: disabledBorderColor || '#E3E4E5',
-    padding: size === 'small' ? '0 16px' : '0 20px',
-    onClick: !disabled ? handleSubmitButtonOnClick : null
-  }) : /*#__PURE__*/React$1.createElement(ButtonItem, {
-    className: clicked ? 'ButtonItem-clicked' : 'ButtonItem',
-    onMouseEnter: () => setHover(true),
-    onMouseLeave: () => setHover(false),
-    onClick: event => !disabled ? handleButtonClick(event) : null,
-    width: width || null,
-    height: height || (size === 'small' ? '33px' : '45px'),
-    disabled: disabled,
-    text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
-    background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
-    border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
-    hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
-    hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
-    hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
-    disabled_text_color: disabledTextColor || '#B1B1B1',
-    disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
-    disabled_border_color: disabledBorderColor || '#E3E4E5',
-    padding: size === 'small' ? '0 16px' : '0 20px'
-  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$7, {
-    className: "Label",
-    disabled: disabled
-  }, text), getRightIcon()));
-};
-
 /* eslint-disable no-restricted-globals */
 /* eslint-disable no-shadow */
 const getCurrencySign = (currencyTypeToConvert, value) => {
@@ -1939,7 +1884,7 @@ const TitleAndValueContainer$4 = styled.div`
   flex-direction: column;
   padding: 0 20px;
 `;
-const Title$j = styled.h4`
+const Title$k = styled.h4`
   font-weight: 400;
   font-size: 18px;
   margin: 0 0 8px;
@@ -2415,7 +2360,7 @@ const PieChart = props => {
     width: width
   }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$4, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$j, {
+  }, /*#__PURE__*/React$1.createElement(Title$k, {
     className: "Title"
   }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$2, {
     className: "CurrencySignAndFormattedValueContainer"
@@ -2495,7 +2440,7 @@ PieChart.defaultProps = {
   noDataText: 'No Data'
 };
 
-const MainContainer$7 = styled.div`
+const MainContainer$8 = styled.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   background-color: white;
@@ -2702,7 +2647,7 @@ const HannafordNewIcon = _ref => {
   })));
 };
 
-const MainContainer$6 = styled.div`
+const MainContainer$7 = styled.div`
   position: relative;
   font-family: "Poppins", sans-serif;
   background-color: white;
@@ -2876,7 +2821,7 @@ const BannersDropdown = props => {
       setBannerButtonArrow('#757575');
     }
   }, [processedBanners]);
-  return /*#__PURE__*/React.createElement(MainContainer$6, null, /*#__PURE__*/React.createElement(ToggleBannersWrapper, null, /*#__PURE__*/React.createElement(ToggleBanners, {
+  return /*#__PURE__*/React.createElement(MainContainer$7, null, /*#__PURE__*/React.createElement(ToggleBannersWrapper, null, /*#__PURE__*/React.createElement(ToggleBanners, {
     className: bannerButtonText === 'Partial' ? 'partial' : '',
     onClick: () => setToggled(!toggled)
   }, /*#__PURE__*/React.createElement("span", null, bannerButtonText), /*#__PURE__*/React.createElement(ArrowWrap, {
@@ -2952,11 +2897,11 @@ const LinkButtonItem = styled.div`
     transition: background-color 0.3s, color 0.3s;
   }
 `;
-const Label$6 = styled.label` 
+const Label$7 = styled.label` 
   user-select: none;   
   pointer-events: none;
 `;
-const IconWrapper = styled.div`
+const IconWrapper$2 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3080,15 +3025,23 @@ const LinkButton = _ref => {
     const color = disabled ? '#B1B1B1' : newTextColor;
     switch (icon.toLowerCase()) {
       case 'filter':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "FilterIcon"
         }, /*#__PURE__*/React$1.createElement(FilterIcon, {
           height: iconHeight,
           width: iconWidth,
           color: color
         }));
+      case 'plus':
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+          className: "PlusIcon"
+        }, /*#__PURE__*/React$1.createElement(PlusIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
       case 'options':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "OptionsIcon"
         }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
           height: iconHeight,
@@ -3096,7 +3049,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'download':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "DownloadIcon"
         }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
           height: iconHeight,
@@ -3104,7 +3057,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'document':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "DocumentIcon"
         }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
           height: iconHeight,
@@ -3112,7 +3065,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'fly':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "FlyIcon"
         }, /*#__PURE__*/React$1.createElement(FlyIcon, {
           height: iconHeight,
@@ -3120,7 +3073,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'bell':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "BellIcon"
         }, /*#__PURE__*/React$1.createElement(BellIcon, {
           height: iconHeight,
@@ -3128,7 +3081,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "MaintenanceIcon"
         }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
           height: iconHeight,
@@ -3136,7 +3089,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'exit':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "ExitIcon"
         }, /*#__PURE__*/React$1.createElement(ExitIcon, {
           height: iconHeight,
@@ -3144,7 +3097,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'eye':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "EyeIcon"
         }, /*#__PURE__*/React$1.createElement(EyeIcon, {
           height: iconHeight,
@@ -3152,7 +3105,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowdown':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "ArrowDownIcon"
         }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
           height: iconHeight,
@@ -3160,7 +3113,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowright':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "ArrowRightIcon"
         }, /*#__PURE__*/React$1.createElement(MenuItemRightIcon, {
           height: iconHeight,
@@ -3168,7 +3121,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'select':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "SelectRightIcon"
         }, /*#__PURE__*/React$1.createElement(ArrowSelectIcon, {
           height: "16px",
@@ -3176,7 +3129,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'info':
-        return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
           className: "InfoIcon"
         }, /*#__PURE__*/React$1.createElement(InfoIcon, {
           height: iconHeight,
@@ -3207,7 +3160,7 @@ const LinkButton = _ref => {
     disabled: disabled,
     text_color: textColor || (type === 'secondary' ? '#212121' : '#229E38'),
     font_size: size === 'small' ? '14px' : '16px'
-  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$6, {
+  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(Label$7, {
     className: "Label",
     disabled: disabled,
     font_size: size === 'small' ? '14px' : '16px'
@@ -3286,7 +3239,7 @@ const EventDetailsCard = props => {
   const viewButtonClick = e => {
     onViewButtonClick(e);
   };
-  return /*#__PURE__*/React.createElement(MainContainer$7, {
+  return /*#__PURE__*/React.createElement(MainContainer$8, {
     className: className,
     height: height,
     width: width
@@ -3364,16 +3317,6 @@ EventDetailsCard.defaultProps = {
   disableViewDetailsButton: false
 };
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
 const LinnerContainer$1 = styled.div.attrs(props => ({
   style: {
     backgroundColor: props.$backgroundColor,
@@ -3447,7 +3390,7 @@ const LinnerDataBox = props => {
     backgroundColor = "#FFFFFF",
     customDataFormat = false
   } = props;
-  return /*#__PURE__*/React$1.createElement(LinnerContainer$1, _extends({
+  return /*#__PURE__*/React$1.createElement(LinnerContainer$1, _extends$1({
     className: className,
     $backgroundColor: backgroundColor || "white",
     $width: width || "100%",
@@ -3502,21 +3445,6 @@ const TextFieldInput = styled.input`
   }
 `;
 
-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,
@@ -3645,7 +3573,7 @@ const Body = styled.div`
   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`
+const Label$6 = styled.div`
   font-size: 12px;
   font-weight: 400;
   padding: 8px;
@@ -3884,7 +3812,7 @@ const TabMenu = props => {
     color: color,
     width: `${100 / tabs.length}%`,
     role: "presentation"
-  }))), headlineContent && /*#__PURE__*/React$1.createElement(TabActionLine, null, headlineContent), setTopRightButton && /*#__PURE__*/React$1.createElement(Button, {
+  }))), headlineContent && /*#__PURE__*/React$1.createElement(TabActionLine, null, headlineContent), setTopRightButton && /*#__PURE__*/React$1.createElement(Button$1, {
     text: rightButtonText,
     rightIcon: rightButtonIcon,
     size: "small",
@@ -3896,7 +3824,7 @@ const TabMenu = props => {
     hoverBorderColor: buttonHoverColor
   })), showActions && /*#__PURE__*/React$1.createElement(ActionsWrapper, {
     className: "ActionsWrapper"
-  }, showLabel && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Label$5, {
+  }, showLabel && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Label$6, {
     className: "Label"
   }, /*#__PURE__*/React$1.createElement("span", null, "Platform: "), "Total"), /*#__PURE__*/React$1.createElement("span", {
     className: "separator"
@@ -8517,7 +8445,7 @@ const DropdownWrapper$2 = styled.div`
   font-size: 14px;
   border-radius: 10px;  
 `;
-const Label$4 = styled.label`
+const Label$5 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -8540,7 +8468,7 @@ const Label$4 = styled.label`
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
 `;
-const InputContainer$6 = styled.div`
+const InputContainer$8 = styled.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -8572,7 +8500,7 @@ const InputContainer$6 = styled.div`
   }
   
 `;
-const InputSubContainer$3 = styled.div`
+const InputSubContainer$4 = styled.div`
     display: flex;       
     flex-direction: column;
     flex-wrap: nowrap;     
@@ -8591,7 +8519,7 @@ const InputSubContainer$3 = styled.div`
     outline: none;
     color: ${props => props.disabled ? '#888' : '#212121'};     
 `;
-const StyledInput$6 = styled.input`
+const StyledInput$8 = styled.input`
   width: calc(100% - 10px);
   height: 20px;
   font-family: Poppins;
@@ -8602,7 +8530,7 @@ const StyledInput$6 = styled.input`
   color: ${props => props.disabled ? '#888' : '#212121'};    
   border: none;
 `;
-const OptionsContainer$6 = styled.div`  
+const OptionsContainer$7 = styled.div`  
   margin: 0;   
   top: 100%; 
   left: 0;
@@ -8650,7 +8578,7 @@ const OptionItem$3 = styled.li`
     background-color: #EDF6FF;
   }
 `;
-const ErrorMessage$3 = styled.div`
+const ErrorMessage$4 = styled.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
@@ -8806,20 +8734,20 @@ const DropdownSingleNew = ({
     width: width,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(InputContainer$6, {
+  }, /*#__PURE__*/React$1.createElement(InputContainer$8, {
     className: "InputContainer",
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     isFocused: isFocused
-  }, /*#__PURE__*/React$1.createElement(InputSubContainer$3, {
+  }, /*#__PURE__*/React$1.createElement(InputSubContainer$4, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$4, {
+  }, /*#__PURE__*/React$1.createElement(Label$5, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -8829,7 +8757,7 @@ const DropdownSingleNew = ({
     errorMessage: errorMessage,
     onClick: handleLabelClick,
     showLabelOnTop: showLabelOnTop
-  }, getLabel(), getRequired()), /*#__PURE__*/React$1.createElement(StyledInput$6, {
+  }, getLabel(), getRequired()), /*#__PURE__*/React$1.createElement(StyledInput$8, {
     className: "StyledInput",
     ref: inputRef,
     value: selectedOptions && selectedOptions?.length > 0 ? selectedOptions[0].label : inputValue && inputValue?.length > 0 ? inputValue[0].label : "",
@@ -8857,7 +8785,7 @@ const DropdownSingleNew = ({
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$3, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$6, {
+  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$4, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$7, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
@@ -8984,7 +8912,7 @@ const DropdownWrapper$1 = styled.div`
   font-size: 14px;
   border-radius: 10px;
 `;
-const Label$3 = styled.label`
+const Label$4 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -9007,7 +8935,7 @@ const Label$3 = styled.label`
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
 `;
-const InputContainer$5 = styled.div`
+const InputContainer$7 = styled.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -9038,7 +8966,7 @@ const InputContainer$5 = styled.div`
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'}; 
   }
 `;
-const InputSubContainer$2 = styled.div`
+const InputSubContainer$3 = styled.div`
 
     display: flex;       
     flex-direction: column;
@@ -9058,7 +8986,7 @@ const InputSubContainer$2 = styled.div`
     outline: none;
     color: ${props => props.disabled ? '#888' : '#212121'};     
 `;
-const StyledInput$5 = styled.input`
+const StyledInput$7 = styled.input`
   width: calc(100% - 20px);
   height: 25px;
   font-family: Poppins;
@@ -9069,7 +8997,7 @@ const StyledInput$5 = styled.input`
   color: ${props => props.disabled ? '#888' : '#212121'};    
   border: none;  
 `;
-const OptionsContainer$5 = styled.div`  
+const OptionsContainer$6 = styled.div`  
   margin: 0;   
   top: 100%; 
   left: 0;
@@ -9116,7 +9044,7 @@ const OptionItem$2 = styled.li`
     background-color: #EDF6FF;
   }
 `;
-const ErrorMessage$2 = styled.div`
+const ErrorMessage$3 = styled.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
@@ -9323,20 +9251,20 @@ const DropdownMultiNew = ({
     width: width,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(InputContainer$5, {
+  }, /*#__PURE__*/React$1.createElement(InputContainer$7, {
     className: "InputContainer",
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     isFocused: isFocused
-  }, /*#__PURE__*/React$1.createElement(InputSubContainer$2, {
+  }, /*#__PURE__*/React$1.createElement(InputSubContainer$3, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$3, {
+  }, /*#__PURE__*/React$1.createElement(Label$4, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -9346,7 +9274,7 @@ const DropdownMultiNew = ({
     errorMessage: errorMessage,
     onClick: handleLabelClick,
     showLabelOnTop: showLabelOnTop
-  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput$5, {
+  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput$7, {
     className: "StyledInput",
     ref: inputRef,
     value: inputValue,
@@ -9376,7 +9304,7 @@ const DropdownMultiNew = ({
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$2, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$5, {
+  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$3, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$6, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
@@ -9463,27 +9391,34 @@ const DropdownMain = styled.div`
 `;
 
 /* eslint-disable react/prop-types */
-const DropdownNew = _ref => {
-  let {
-    isMulti,
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    checkBoxColor,
-    xIconShow,
-    showLabelOnTop,
-    orderBy,
-    elementType
-  } = _ref;
+const DropdownNew = props => {
+  const {
+    isMulti = false,
+    label = "",
+    labelEmptyValue = "",
+    options = [],
+    selectedValue = null,
+    placeHolder = "",
+    onChange = () => {},
+    handleChange = () => {},
+    required = false,
+    disabled = false,
+    width = "300px",
+    error = false,
+    showLabelOnTop = true,
+    orderBy = "",
+    elementType = "dropdown",
+    errorMessage = "",
+    labelColor = "#066768",
+    checkBoxColor = "#229E38",
+    xIconShow = true
+  } = props;
+  const handleOnChange = event => {
+    if (event && event.newValue && event.newValue[0]) {
+      onChange && onChange(event);
+      handleChange && handleChange(event.newValue[0].value);
+    }
+  };
   return /*#__PURE__*/React$1.createElement(DropdownMain, {
     className: "DropdownMain",
     width: width
@@ -9502,7 +9437,7 @@ const DropdownNew = _ref => {
     errorMessage: errorMessage,
     selectedValue: selectedValue,
     xIconShow: xIconShow,
-    onChange: onChange,
+    onChange: handleOnChange,
     showLabelOnTop: showLabelOnTop,
     orderBy: orderBy,
     elementType: elementType
@@ -9521,54 +9456,12 @@ const DropdownNew = _ref => {
     errorMessage: errorMessage,
     selectedValue: selectedValue,
     xIconShow: xIconShow,
-    onChange: onChange,
+    onChange: handleOnChange,
     showLabelOnTop: showLabelOnTop,
     orderBy: orderBy,
     elementType: elementType
   }));
 };
-DropdownNew.propTypes = {
-  placeHolder: PropTypes.string,
-  label: PropTypes.string,
-  labelEmptyValue: PropTypes.string,
-  labelColor: PropTypes.string,
-  checkBoxColor: PropTypes.string,
-  required: PropTypes.bool,
-  width: PropTypes.string,
-  disabled: PropTypes.bool,
-  error: PropTypes.bool,
-  errorMessage: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.string
-  })),
-  selectedValue: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.string
-  })),
-  xIconShow: PropTypes.bool,
-  onChange: PropTypes.func,
-  showLabelOnTop: PropTypes.bool
-};
-DropdownNew.defaultProps = {
-  placeHolder: "Type...",
-  label: "Label",
-  labelEmptyValue: "All Labels",
-  labelColor: "#066768",
-  checkBoxColor: "#229E38",
-  required: true,
-  width: "300px",
-  disabled: false,
-  error: false,
-  errorMessage: "",
-  options: [],
-  selectedValue: [],
-  xIconShow: true,
-  onChange: () => {},
-  showLabelOnTop: true,
-  orderBy: "asc",
-  elementType: "number"
-};
 
 const Calendar = () => /*#__PURE__*/React$1.createElement("svg", {
   width: "11",
@@ -9605,7 +9498,7 @@ const RangePickerContainer = styled.div`
   width: ${props => props.width || '100%'};
   height: ${props => props.height || '60px'};
 `;
-const CalendarDiv$2 = styled.div`
+const CalendarDiv$3 = styled.div`
     position: absolute;
     width: 11px;
     height: 11px;
@@ -9617,7 +9510,7 @@ const CalendarDiv$2 = styled.div`
   }
 
 `;
-const InputContainer$4 = styled.div`
+const InputContainer$6 = styled.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -9647,7 +9540,7 @@ const InputContainer$4 = styled.div`
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'}; 
   }
 `;
-const StyledInput$4 = styled.input`
+const StyledInput$6 = styled.input`
   padding: 20px;
   font-size: 14px;
   border-radius: ${props => props.borderRadius || '4px'};
@@ -9664,7 +9557,7 @@ const StyledInput$4 = styled.input`
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
 `;
-const StyledLabel$2 = styled.label`
+const StyledLabel$3 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   padding-inline-end: 5px;
   padding-inline-start: 5px;
@@ -9684,7 +9577,7 @@ const StyledLabel$2 = styled.label`
   box-sizing: border-box;
   cursor: pointer;
 `;
-const RequiredIndicator$2 = styled.span`
+const RequiredIndicator$3 = styled.span`
   color: red;
   margin-left: 5px;
 `;
@@ -9693,7 +9586,7 @@ styled.div`
   color: red;
   margin-top: 5px;
 `;
-const OptionsContainer$4 = styled.div`
+const OptionsContainer$5 = styled.div`
   display: block;
   margin: 0;
   padding-top: 8px;
@@ -10044,7 +9937,7 @@ const RangePicker = _ref => {
     onClick: handleFocus,
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(InputContainer$4, {
+  }, /*#__PURE__*/React$1.createElement(InputContainer$6, {
     className: "InputContainer",
     isFocused: isFocused,
     hasValue: value,
@@ -10054,7 +9947,7 @@ const RangePicker = _ref => {
     borderColorFocus: borderColorFocus,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(StyledLabel$2, {
+  }, /*#__PURE__*/React$1.createElement(StyledLabel$3, {
     className: "StyledLabel",
     onClick: handleFocus,
     isFocused: isFocused,
@@ -10063,7 +9956,7 @@ const RangePicker = _ref => {
     textColor: textColor,
     borderColor: borderColor,
     borderColorFocus: borderColorFocus
-  }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$2, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$4, {
+  }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$3, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$6, {
     className: "StyledInput",
     ref: inputRef,
     value: value,
@@ -10079,14 +9972,14 @@ const RangePicker = _ref => {
     textColor: textColor,
     borderColor: borderColor,
     borderColorFocus: borderColorFocus
-  }), /*#__PURE__*/React$1.createElement(CalendarDiv$2, {
+  }), /*#__PURE__*/React$1.createElement(CalendarDiv$3, {
     className: "CalendarDiv",
     onClick: toggleDatePicker
   }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, {
     className: "CalendarInOpen"
   }) : /*#__PURE__*/React$1.createElement(Calendar, {
     className: "Calendar"
-  }))), /*#__PURE__*/React$1.createElement(OptionsContainer$4, {
+  }))), /*#__PURE__*/React$1.createElement(OptionsContainer$5, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false)
@@ -10139,14 +10032,14 @@ const QuarterPickerContainer = styled.div`
   width: ${props => props.width || '100%'};
   height: ${props => props.height || '60px'};
 `;
-const CalendarDiv$1 = styled.div`
+const CalendarDiv$2 = styled.div`
     position: absolute;
     width: 11px;
     height: 11px;
     top: ${props => parseInt(props.height, 10) / 2 || '20px'};
     right: 25px;
 `;
-const InputContainer$3 = styled.div`
+const InputContainer$5 = styled.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -10176,7 +10069,7 @@ const InputContainer$3 = styled.div`
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'}; 
   }
 `;
-const StyledInput$3 = styled.input`
+const StyledInput$5 = styled.input`
   padding: 20px;
   font-size: 14px;
   border-radius: ${props => props.borderRadius || '4px'};
@@ -10193,7 +10086,7 @@ const StyledInput$3 = styled.input`
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
 `;
-const StyledLabel$1 = styled.label`
+const StyledLabel$2 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   padding-inline-end: 5px;
   padding-inline-start: 5px;
@@ -10213,7 +10106,7 @@ const StyledLabel$1 = styled.label`
   box-sizing: border-box;
   cursor: pointer;
 `;
-const RequiredIndicator$1 = styled.span`
+const RequiredIndicator$2 = styled.span`
   color: red;
   margin-left: 5px;
 `;
@@ -10222,7 +10115,7 @@ styled.div`
   color: red;
   margin-top: 5px;
 `;
-const OptionsContainer$3 = styled.div`
+const OptionsContainer$4 = styled.div`
   display: block;
   margin: 0;
   padding-top: 8px;
@@ -10477,7 +10370,7 @@ const QuarterPicker = _ref => {
     onClick: handleFocus,
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(InputContainer$3, {
+  }, /*#__PURE__*/React$1.createElement(InputContainer$5, {
     className: "InputContainer",
     isFocused: isFocused,
     hasValue: value,
@@ -10487,7 +10380,7 @@ const QuarterPicker = _ref => {
     borderColorFocus: borderColorFocus,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(StyledLabel$1, {
+  }, /*#__PURE__*/React$1.createElement(StyledLabel$2, {
     className: "StyledLabel",
     onClick: handleFocus,
     isFocused: isFocused,
@@ -10496,7 +10389,7 @@ const QuarterPicker = _ref => {
     textColor: textColor,
     borderColor: borderColor,
     borderColorFocus: borderColorFocus
-  }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$1, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$3, {
+  }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$2, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$5, {
     className: "StyledInput",
     ref: inputRef,
     value: value,
@@ -10512,11 +10405,11 @@ const QuarterPicker = _ref => {
     disabled: disabled,
     borderColor: borderColor,
     textColor: textColor
-  }), /*#__PURE__*/React$1.createElement(CalendarDiv$1, {
+  }), /*#__PURE__*/React$1.createElement(CalendarDiv$2, {
     className: "CalendarDiv",
     width: width,
     onClick: toggleDatePicker
-  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), /*#__PURE__*/React$1.createElement(OptionsContainer$3, {
+  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), /*#__PURE__*/React$1.createElement(OptionsContainer$4, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false)
@@ -10565,14 +10458,14 @@ const MonthPickerContainer = styled.div`
   width: ${props => props.width || '100%'};
   height: ${props => props.height || '60px'};
 `;
-const CalendarDiv = styled.div`
+const CalendarDiv$1 = styled.div`
     position: absolute;
     width: 11px;
     height: 11px;
     top: ${props => parseInt(props.height, 10) / 2 || '20px'};
     right: 25px;
 `;
-const InputContainer$2 = styled.div`
+const InputContainer$4 = styled.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -10602,7 +10495,7 @@ const InputContainer$2 = styled.div`
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'}; 
   }
 `;
-const StyledInput$2 = styled.input`
+const StyledInput$4 = styled.input`
   padding: 20px;
   font-size: 14px;
   border-radius: ${props => props.borderRadius || '4px'};
@@ -10620,7 +10513,7 @@ const StyledInput$2 = styled.input`
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
 `;
-const StyledLabel = styled.label`
+const StyledLabel$1 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   padding-inline-end: 5px;
   padding-inline-start: 5px;
@@ -10640,7 +10533,7 @@ const StyledLabel = styled.label`
   box-sizing: border-box;
   cursor: pointer;
 `;
-const RequiredIndicator = styled.span`
+const RequiredIndicator$1 = styled.span`
   color: red;
   margin-left: 5px;
 `;
@@ -10649,7 +10542,7 @@ styled.div`
   color: red;
   margin-top: 5px;
 `;
-const OptionsContainer$2 = styled.div`
+const OptionsContainer$3 = styled.div`
   display: block;
   margin: 0;
   padding-top: 8px;
@@ -10934,7 +10827,7 @@ const MonthPicker = _ref => {
     onClick: handleFocus,
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(InputContainer$2, {
+  }, /*#__PURE__*/React$1.createElement(InputContainer$4, {
     className: "InputContainer",
     isFocused: isFocused,
     hasValue: value,
@@ -10944,7 +10837,7 @@ const MonthPicker = _ref => {
     borderColorFocus: borderColorFocus,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(StyledLabel, {
+  }, /*#__PURE__*/React$1.createElement(StyledLabel$1, {
     className: "StyledLabel",
     onClick: handleFocus,
     isFocused: isFocused,
@@ -10953,7 +10846,7 @@ const MonthPicker = _ref => {
     textColor: textColor,
     borderColor: borderColor,
     borderColorFocus: borderColorFocus
-  }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$2, {
+  }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator$1, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$4, {
     className: "StyledInput",
     ref: inputRef,
     value: value,
@@ -10969,11 +10862,11 @@ const MonthPicker = _ref => {
     disabled: disabled,
     borderColor: borderColor,
     textColor: textColor
-  }), /*#__PURE__*/React$1.createElement(CalendarDiv, {
+  }), /*#__PURE__*/React$1.createElement(CalendarDiv$1, {
     className: "CalendarDiv",
     width: width,
     onClick: toggleDatePicker
-  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), /*#__PURE__*/React$1.createElement(OptionsContainer$2, {
+  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), /*#__PURE__*/React$1.createElement(OptionsContainer$3, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false)
@@ -11615,7 +11508,7 @@ const FilterPanel = props => {
         content: getTooltipTextGoButton(),
         direction: "top",
         topFactor: -0.9
-      }, /*#__PURE__*/React$1.createElement(Button, {
+      }, /*#__PURE__*/React$1.createElement(Button$1, {
         text: "Go",
         type: "primary",
         size: "medium",
@@ -11643,7 +11536,7 @@ const FilterPanel = props => {
         })
       }));
     } else {
-      content = /*#__PURE__*/React$1.createElement(Button, {
+      content = /*#__PURE__*/React$1.createElement(Button$1, {
         text: "Go",
         type: "primary",
         size: "medium",
@@ -11683,7 +11576,7 @@ const FilterPanel = props => {
     ref: AllFieldsContainerRef
   }, displayFields(FieldsDataState)), /*#__PURE__*/React$1.createElement(ButtonsContainer, {
     className: "ButtonsContainer"
-  }, displayGoButton(), /*#__PURE__*/React$1.createElement(Button, {
+  }, displayGoButton(), /*#__PURE__*/React$1.createElement(Button$1, {
     text: "Reset",
     size: "medium",
     type: "secondary",
@@ -12021,7 +11914,7 @@ const Loader$1 = styled.span`
   animation: ${rotation$1} 1.5s infinite ease;
   transform: translateZ(0);
 `;
-const TableWrapper$1 = styled.div`
+const TableWrapper$3 = styled.div`
   position: relative;
   width: ${props => `${props.width}`};
   height: ${props => `${props.height}`};
@@ -12031,7 +11924,7 @@ const TableWrapper$1 = styled.div`
   overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden'};
   ${scrollableStyles$9}
 `;
-const Table$1 = styled.table`
+const Table$3 = styled.table`
   font-family: "Poppins", sans-serif;
   width: ${props => `${props.tableWidthSize}%`};
   table-layout: fixed;
@@ -12336,13 +12229,13 @@ const ReportTable = props => {
       return newState;
     });
   };
-  return /*#__PURE__*/React$1.createElement(ReportTableWrapper, null, /*#__PURE__*/React$1.createElement(TableWrapper$1, {
+  return /*#__PURE__*/React$1.createElement(ReportTableWrapper, null, /*#__PURE__*/React$1.createElement(TableWrapper$3, {
     width: width,
     height: height,
     className: className,
     maxColumnsNumber: getMaxColnumber(),
     columnsNumber: columnsNumber
-  }, /*#__PURE__*/React$1.createElement(Table$1, {
+  }, /*#__PURE__*/React$1.createElement(Table$3, {
     tableWidthSize: tableWidthSize
   }, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement(Tr, null, tableData.columnsHeadings.map((headline, index) => /*#__PURE__*/React$1.createElement(Th$1, {
     key: index
@@ -12620,7 +12513,7 @@ EventListItem.defaultProps = {
   onClick: () => {}
 };
 
-const MainContainer$5 = styled.div`
+const MainContainer$6 = styled.div`
   /* display: flex; */
   position: relative;
   font-family: "Poppins", sans-serif;
@@ -12683,7 +12576,7 @@ const EventList = props => {
   };
 
   //= ======================================== MAIN RETURN ====================================
-  return /*#__PURE__*/React$1.createElement(MainContainer$5, {
+  return /*#__PURE__*/React$1.createElement(MainContainer$6, {
     id: "MainContainer",
     height: height,
     width: width
@@ -12879,7 +12772,7 @@ const CollapseMenuItemContentContainer = styled.div`
     font-size: 12px;
   }
 `;
-const MainContainer$4 = styled.div`
+const MainContainer$5 = styled.div`
   width: ${props => props.width};
   height: ${props => props.height};
   display: flex;
@@ -12894,7 +12787,7 @@ const DraftTag$1 = styled.div`
   height: fit-content;
 `;
 
-const MainContainer$3 = styled.div`
+const MainContainer$4 = styled.div`
     width: ${props => props.width};
     height: ${props => props.height};
     font-family: 'Poppins', sans-serif;
@@ -13011,10 +12904,10 @@ const BannerEventBox = props => {
   const onInfoClickHandler = event => {
     onInfoClick(event);
   };
-  return /*#__PURE__*/React$1.createElement(MainContainer$3, {
+  return /*#__PURE__*/React$1.createElement(MainContainer$4, {
     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, {
+  }, /*#__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$1, {
     leftIcon: "Eye",
     onClick: () => onInfoClickHandler(banner),
     text: buttonText,
@@ -13089,7 +12982,7 @@ const BannerEventBoxList = props => {
     color: toggleColor
   }))), IsItemOpen && /*#__PURE__*/React$1.createElement(CollapseMenuItemContentContainer, {
     id: "CollapseMenuItemContentContainer"
-  }, cardsContent ? /*#__PURE__*/React$1.createElement(MainContainer$4, {
+  }, cardsContent ? /*#__PURE__*/React$1.createElement(MainContainer$5, {
     width: width,
     height: height
   }, data.map(item => /*#__PURE__*/React$1.createElement(BannerEventBox, {
@@ -13123,7 +13016,7 @@ const scrollableStyles$8 = `
     border-radius: 5px;
   }
 `;
-const ModalWrapper = styled.dialog`
+const ModalWrapper$1 = styled.dialog`
   width: 100vw;
   height: 100vh;
   padding: 20px;
@@ -13139,23 +13032,23 @@ const ModalWrapper = styled.dialog`
     align-content: center;
   }
 `;
-const Modal = styled.div`
+const Modal$1 = styled.div`
     width: 79%;
     max-width: 1500px;
     margin: 0 auto;
     ${scrollableStyles$8}
 `;
-const ModalHeader = styled.div`
+const ModalHeader$1 = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 32px;
 `;
-const ModalBody = styled.div`
+const ModalBody$1 = styled.div`
     ${scrollableStyles$8}
     max-height: 80vh;
 `;
-const ModalTitle = styled.h5`
+const ModalTitle$1 = styled.h5`
     font-family: 'Poppins', sans-serif;
     font-size: 32px;
     font-weight: 500;
@@ -13185,14 +13078,14 @@ const DialogOverlay = props => {
     modal.close();
     onDialogClose();
   };
-  return /*#__PURE__*/React.createElement(ModalWrapper, {
+  return /*#__PURE__*/React.createElement(ModalWrapper$1, {
     className: className
-  }, /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, title), /*#__PURE__*/React.createElement(ModalClose, {
+  }, /*#__PURE__*/React.createElement(Modal$1, null, /*#__PURE__*/React.createElement(ModalHeader$1, null, /*#__PURE__*/React.createElement(ModalTitle$1, null, title), /*#__PURE__*/React.createElement(ModalClose, {
     type: "button",
     onClick: closeModal
   }, /*#__PURE__*/React.createElement(CloseXIcon, {
     fill: "white"
-  }))), /*#__PURE__*/React.createElement(ModalBody, {
+  }))), /*#__PURE__*/React.createElement(ModalBody$1, {
     id: "modalBody"
   }, children)));
 };
@@ -23407,7 +23300,7 @@ const TheGiantCompanyIcon = _ref => {
   })));
 };
 
-const MainContainer$2 = styled.div`
+const MainContainer$3 = styled.div`
   display: flex;
   position: relative;
   font-family: "Poppins", sans-serif;
@@ -23700,7 +23593,7 @@ const CollapseHeader = props => {
     } = viewCreativeContainerRef.current;
     return (offsetTop + 33).toString().concat("", "px");
   };
-  return /*#__PURE__*/React$1.createElement(MainContainer$2, {
+  return /*#__PURE__*/React$1.createElement(MainContainer$3, {
     id: "CollapseHeader",
     className: className,
     height: height,
@@ -23714,7 +23607,7 @@ const CollapseHeader = props => {
     id: "EventNameViewCreativeSubContainer"
   }, /*#__PURE__*/React$1.createElement(ViewCreativeButtonAndListBoxContainer, {
     id: "ViewCreativeButtonAndListBoxContainer"
-  }, showViewCreativeButton && /*#__PURE__*/React$1.createElement(Button, {
+  }, showViewCreativeButton && /*#__PURE__*/React$1.createElement(Button$1, {
     leftIcon: "Eye",
     onClick: viewCreativeOnClickHandler,
     text: buttonText,
@@ -23868,13 +23761,13 @@ const QuickFilterInput = styled.div`
   font-size: 14px;
   border-radius: 8px;
 `;
-const Label$2 = styled.label`
+const Label$3 = styled.label`
   font-size: 14px;
   font-weight: 500;
   color: ${props => props.disabled ? '#D0D0D0' : '212121'};
   white-space: nowrap;
 `;
-const InputContainer$1 = styled.div`
+const InputContainer$3 = styled.div`
   display: flex;
   justify-content: space-between;
   align-content: center;
@@ -23904,12 +23797,12 @@ const InputContainer$1 = styled.div`
       ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
   }
 `;
-const InputSubContainer$1 = styled.div`
+const InputSubContainer$2 = styled.div`
   display: flex;
   color: ${props => props.disabled ? '#888' : '#212121'};
   gap: 8px;
 `;
-const StyledInput$1 = styled.input`
+const StyledInput$3 = styled.input`
   width: 100%;
   height: 20px;
   font-family: "Poppins";
@@ -23923,7 +23816,7 @@ const StyledInput$1 = styled.input`
     color: ${props => props.disabled ? '#D0D0D0' : '#b1b1b1'};
   }
 `;
-const OptionsContainer$1 = styled.div`
+const OptionsContainer$2 = styled.div`
   margin: 0;
   top: 100%;
   left: 0;
@@ -23964,7 +23857,7 @@ const OptionItem$1 = styled.li`
     color: #229e38;
   }
 `;
-const ErrorMessage$1 = styled.div`
+const ErrorMessage$2 = styled.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
@@ -24102,21 +23995,21 @@ const QuickFilterDropdownSingle = _ref => {
     width: width,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(InputContainer$1, {
+  }, /*#__PURE__*/React$1.createElement(InputContainer$3, {
     className: "InputContainer",
     labelColor: labelColor,
     hoverColor: hoverColor,
     disabled: disabled,
     error: error,
     isFocused: isFocused
-  }, /*#__PURE__*/React$1.createElement(InputSubContainer$1, {
+  }, /*#__PURE__*/React$1.createElement(InputSubContainer$2, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$2, {
+  }, /*#__PURE__*/React$1.createElement(Label$3, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -24126,7 +24019,7 @@ const QuickFilterDropdownSingle = _ref => {
     errorMessage: errorMessage,
     onClick: handleLabelClick,
     showLabelOnTop: showLabelOnTop
-  }, label), /*#__PURE__*/React$1.createElement(StyledInput$1, {
+  }, label), /*#__PURE__*/React$1.createElement(StyledInput$3, {
     className: "StyledInput",
     ref: inputRef,
     value: selectedOptions && selectedOptions?.length > 0 ? selectedOptions[0].label : inputValue && inputValue?.length > 0 ? inputValue[0].label : "",
@@ -24154,7 +24047,7 @@ const QuickFilterDropdownSingle = _ref => {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$1, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$1, {
+  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$2, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$2, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
@@ -24223,7 +24116,7 @@ const DropdownWrapper = styled.div`
   font-size: 14px;
   border-radius: 10px;
 `;
-const Label$1 = styled.label`
+const Label$2 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -24246,7 +24139,7 @@ const Label$1 = styled.label`
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
 `;
-const InputContainer = styled.div`
+const InputContainer$2 = styled.div`
     display: flex;       
     flex-direction: row;
     flex-wrap: nowrap; 
@@ -24277,7 +24170,7 @@ const InputContainer = styled.div`
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'}; 
   }
 `;
-const InputSubContainer = styled.div`
+const InputSubContainer$1 = styled.div`
     display: flex;       
     flex-direction: column;
     flex-wrap: nowrap;     
@@ -24296,7 +24189,7 @@ const InputSubContainer = styled.div`
     outline: none;
     color: ${props => props.disabled ? '#888' : '#212121'};     
 `;
-const StyledInput = styled.input`
+const StyledInput$2 = styled.input`
   width: calc(100% - 20px);
   height: 25px;
   font-family: Poppins;
@@ -24307,7 +24200,7 @@ const StyledInput = styled.input`
   color: ${props => props.disabled ? '#888' : '#212121'};    
   border: none;  
 `;
-const OptionsContainer = styled.div`  
+const OptionsContainer$1 = styled.div`  
   margin: 0;   
   top: 100%; 
   left: 0;
@@ -24350,7 +24243,7 @@ const OptionItem = styled.li`
     background-color: #EDF6FF;
   }
 `;
-const ErrorMessage = styled.div`
+const ErrorMessage$1 = styled.div`
   font-size: 12px;
   color: red;
   margin-top: 5px;
@@ -24568,20 +24461,20 @@ const QuickFilterDropdownMultiSelection = _ref => {
     width: width,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
-  }, /*#__PURE__*/React$1.createElement(InputContainer, {
+  }, /*#__PURE__*/React$1.createElement(InputContainer$2, {
     className: "InputContainer",
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     isFocused: isFocused
-  }, /*#__PURE__*/React$1.createElement(InputSubContainer, {
+  }, /*#__PURE__*/React$1.createElement(InputSubContainer$1, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
     disabled: disabled,
     error: error,
     onClick: handleLabelClick
-  }, /*#__PURE__*/React$1.createElement(Label$1, {
+  }, /*#__PURE__*/React$1.createElement(Label$2, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
@@ -24591,7 +24484,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
     errorMessage: errorMessage,
     onClick: handleLabelClick,
     showLabelOnTop: showLabelOnTop
-  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput, {
+  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput$2, {
     className: "StyledInput",
     ref: inputRef,
     value: inputValue,
@@ -24621,7 +24514,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
-  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer, {
+  }))), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage$1, null, errorMessage), /*#__PURE__*/React$1.createElement(OptionsContainer$1, {
     className: "OptionsContainer",
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
@@ -25231,7 +25124,7 @@ const TitleAndValueContainer$3 = styled.div`
   display: flex;
   flex-direction: column; 
 `;
-const Title$i = styled.h4`
+const Title$j = styled.h4`
   font-weight: 400;
   font-size: 20px;
   margin: 0;
@@ -25294,7 +25187,7 @@ const FormattedValue$3 = props => {
     width: width
   }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer$3, {
     className: "TitleAndValueContainer"
-  }, title ? /*#__PURE__*/React$1.createElement(Title$i, {
+  }, title ? /*#__PURE__*/React$1.createElement(Title$j, {
     className: "Title",
     width: width
   }, title) : '', showTopValue && /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer$1, {
@@ -25306,7 +25199,7 @@ const FormattedValue$3 = props => {
     className: "CurrencySignOrPercent"
   }, currencySign ? getCurrencySign(currencyType, value) : ''), dotCut ? getFormattedValue(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : getNumberWithCommas(value), dotCut ? getFormattedUnits(value) : '', /*#__PURE__*/React$1.createElement(CurrencySignOrPercent, {
     className: "CurrencySignOrPercent"
-  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React$1.createElement(Title$i, {
+  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/React$1.createElement(Title$j, {
     className: "Title",
     width: width
   }, subtitle) : '')));
@@ -25376,7 +25269,7 @@ const TooltipTitle$8 = styled.div`
 const TitleAndValueContainer$2 = styled.div`
   padding: 0 1rem;
 `;
-const Title$h = styled.h5`
+const Title$i = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -25505,7 +25398,7 @@ const TitleAndIconContainer = styled.div`
   display: flex;
   align-items: center;
 `;
-const Title$g = styled.h4`
+const Title$h = styled.h4`
   font-weight: 400;
   font-size: 14px;
   line-height: 27px;
@@ -25559,7 +25452,7 @@ const PerformanceAnalyticsLegend = props => {
     color: item.iconColor
   }) : item.iconType === ICON_TYPE_LEGEND_LINE_ICON$3 ? /*#__PURE__*/React$1.createElement(LegendLineIcon, {
     color: item.iconColor
-  }) : '', /*#__PURE__*/React$1.createElement(Title$g, {
+  }) : '', /*#__PURE__*/React$1.createElement(Title$h, {
     id: "Title",
     width: width
   }, item.title))))) : '');
@@ -25714,7 +25607,7 @@ const BarChartsByWeeks = props => {
     ref: controlsContainerRef
   }, /*#__PURE__*/React$1.createElement(Controls$a, {
     height: getControlsHeight()
-  }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$h, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
+  }, showTitle && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$2, null, /*#__PURE__*/React$1.createElement(Title$i, null, title), /*#__PURE__*/React$1.createElement(FormattedValue$3, {
     title: headerValueTopTitle,
     subtitle: headerValueBottomTitle,
     showTopValue: showHeaderTopValue,
@@ -25947,7 +25840,7 @@ const TitleAndValueContainer$1 = styled.div`
   flex-direction: column;
   padding: 0 1.25em; /* 20px → 1.25em */
 `;
-const Title$f = styled.h4`
+const Title$g = styled.h4`
   font-weight: 500;
   font-size: ${props => props.titleFontSize || '1.125em'}; /* Default: 18px → 1.125em */
   margin: 0;
@@ -26150,7 +26043,7 @@ const TotalDoughnutChart = props => {
     width: width
   }, !hideTitleAndValue && /*#__PURE__*/React$1.createElement(TitleAndValueContainer$1, {
     className: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$f, {
+  }, /*#__PURE__*/React$1.createElement(Title$g, {
     className: "Title",
     fontSize: titleFontSize
   }, title), /*#__PURE__*/React$1.createElement(CurrencySignAndFormattedValueContainer, {
@@ -26472,7 +26365,7 @@ const TotalValue = styled.div`
     font-size: 20px;
   }
 `;
-const Title$e = styled.h4`
+const Title$f = styled.h4`
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
@@ -26629,7 +26522,7 @@ const TotalHorizontalCharts = props => {
   }, chartsData?.length > 0 ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/React$1.createElement(CardHeader, {
     ref: topHeader,
     className: "CardHeader"
-  }, !hideTitle ? /*#__PURE__*/React$1.createElement(Title$e, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
+  }, !hideTitle ? /*#__PURE__*/React$1.createElement(Title$f, null, title) : '', !hideTotalValue ? /*#__PURE__*/React$1.createElement(TotalValue, {
     className: "TotalValue"
   }, currencySign && /*#__PURE__*/React$1.createElement(CurrencySign, {
     className: "CurrencySign"
@@ -26776,7 +26669,7 @@ const scrollableStyles$5 = `
     border-radius: 5px;
   }
 `;
-const MainContainer$1 = styled.div`
+const MainContainer$2 = styled.div`
   display: flex;
   flex-direction: row;
   position: relative;
@@ -27044,7 +26937,7 @@ const MarketShareDescription = props => {
     })) : '')));
     return content;
   };
-  return /*#__PURE__*/React$1.createElement(MainContainer$1, {
+  return /*#__PURE__*/React$1.createElement(MainContainer$2, {
     className: "MainContainer",
     height: height,
     width: width
@@ -27102,7 +26995,7 @@ const ItemContainer = styled.div`
   flex-direction: column;
   flex-wrap: wrap;
 `;
-const Title$d = styled.h4`
+const Title$e = styled.h4`
   font-size: 18px;
   font-weight: 500;
   margin: 0;
@@ -27218,7 +27111,7 @@ const SalesAndROI = props => {
     showBorderShadow: showBorderShadow
   }, /*#__PURE__*/React$1.createElement(TitleAndValueContainer, {
     id: "TitleAndValueContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$d, {
+  }, /*#__PURE__*/React$1.createElement(Title$e, {
     id: "Title"
   }, title), showBanner && /*#__PURE__*/React$1.createElement(OutBanner, {
     id: "OutBanner",
@@ -27284,7 +27177,7 @@ const scrollableStyles$4 = `
     border-radius: 5px;
   }
 `;
-const MainContainer = styled.div``;
+const MainContainer$1 = styled.div``;
 const ModalOverlay = styled.div`
   position: fixed;
   z-index: 100;
@@ -27317,7 +27210,7 @@ const TitleContainer$1 = styled.div`
   margin: 0;
   border-bottom: 1px solid #b1b1b1;
 `;
-const Title$c = styled.p`
+const Title$d = styled.p`
   font-weight: 400;
   font-size: 24px;
   margin: 0;
@@ -27525,7 +27418,7 @@ const PopupCharts = props => {
   }, item.title)), /*#__PURE__*/React$1.createElement(ChartContentContainer, {
     id: "ChartContentContainer"
   }, displayChart(item)));
-  return /*#__PURE__*/React$1.createElement(MainContainer, {
+  return /*#__PURE__*/React$1.createElement(MainContainer$1, {
     id: "MainContainer"
   }, IsPopupChartsOpen && /*#__PURE__*/React$1.createElement(ModalOverlay, {
     id: "ModalOverlay",
@@ -27537,7 +27430,7 @@ const PopupCharts = props => {
     height: height,
     width: width,
     onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/React$1.createElement(TitleContainer$1, null, /*#__PURE__*/React$1.createElement(Title$c, null, title), /*#__PURE__*/React$1.createElement(CloseXIconContainer, {
+  }, /*#__PURE__*/React$1.createElement(TitleContainer$1, null, /*#__PURE__*/React$1.createElement(Title$d, null, title), /*#__PURE__*/React$1.createElement(CloseXIconContainer, {
     onClick: e => closePopupCharts(e)
   }, /*#__PURE__*/React$1.createElement(CloseXIcon, null))), /*#__PURE__*/React$1.createElement(ChartsContainer, {
     id: "ChartsContainer",
@@ -27635,7 +27528,7 @@ const TopToggleListMainContainer = styled.div`
     padding: 0 24px;
     width: ${props => props.width};
 `;
-const Title$b = styled.h4`
+const Title$c = styled.h4`
     font-size: 14px;
     font-weight: 600;
     margin: 20px 0 12px;
@@ -27665,7 +27558,7 @@ const TopToggleList = props => {
   } = props;
   return /*#__PURE__*/React$1.createElement(TopToggleListMainContainer, {
     width: width
-  }, /*#__PURE__*/React$1.createElement(Title$b, null, title), /*#__PURE__*/React$1.createElement(ListContainer, {
+  }, /*#__PURE__*/React$1.createElement(Title$c, null, title), /*#__PURE__*/React$1.createElement(ListContainer, {
     height: height
   }, list.map(item => /*#__PURE__*/React$1.createElement(ListItem, {
     key: item.value
@@ -27727,7 +27620,7 @@ const TitleContainer = styled.div`
   justify-content: flex-start; 
   margin: 0 0 10px 0; 
 `;
-const Title$a = styled.h3`
+const Title$b = styled.h3`
   user-select: none;
   text-align: left;
   margin: 0;
@@ -28002,7 +27895,7 @@ const Heatmap = props => {
     className: "HeatmapWrapper"
   }, /*#__PURE__*/React$1.createElement(TitleContainer, {
     className: "TitleContainer"
-  }, /*#__PURE__*/React$1.createElement(Title$a, {
+  }, /*#__PURE__*/React$1.createElement(Title$b, {
     className: "Title"
   }, title)), refreshRequired && renderBars(), !refreshRequired && renderBars(), renderLegend()));
 };
@@ -28421,7 +28314,7 @@ const TooltipTitle$7 = styled.div`
   font-size: 14px;
   font-weight: 600;
 `;
-const Title$9 = styled.h5`
+const Title$a = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -28582,7 +28475,7 @@ const BarChart = props => {
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React$1.createElement(Controls$7, null, /*#__PURE__*/React$1.createElement(Title$9, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, /*#__PURE__*/React$1.createElement(Controls$7, null, /*#__PURE__*/React$1.createElement(Title$a, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
@@ -28755,7 +28648,7 @@ const Controls$6 = styled.div`
   flex-direction: column;
   background-color: white;
 `;
-const Title$8 = styled.h5`
+const Title$9 = styled.h5`
   font-size: 18px;
   font-weight: 400;
   margin: 0 0 30px;
@@ -29021,9 +28914,9 @@ const DoubleBarSingleLine = props => {
     noDataText: noDataText
   }) : /*#__PURE__*/React$1.createElement(Controls$6, {
     className: "Controls"
-  }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$8, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
+  }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$9, null, title), /*#__PURE__*/React$1.createElement(ChartsWrapper, {
     width: dynamicWidth //{hasScroll ? `${data.length * 178}px` : 'auto'}
-  }, /*#__PURE__*/React$1.createElement(LineChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(LineChart, _extends({
+  }, /*#__PURE__*/React$1.createElement(LineChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(LineChart, _extends$1({
     data: transformedData
   }, syncCharts, {
     margin: {
@@ -29062,7 +28955,7 @@ const DoubleBarSingleLine = props => {
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     content: CustomLabelLine,
     position: "top"
-  })))))), /*#__PURE__*/React$1.createElement(BarChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(BarChart$1, _extends({
+  })))))), /*#__PURE__*/React$1.createElement(BarChartWrapper, null, /*#__PURE__*/React$1.createElement(ResponsiveContainer, null, /*#__PURE__*/React$1.createElement(BarChart$1, _extends$1({
     data: data,
     barGap: 13,
     barCategoryGap: data.length >= limitViewableItems ? 178 : 50,
@@ -29125,7 +29018,7 @@ const CheckboxGroupContainer = styled.div`
   height: 21px;   
   gap: 20px;
 `;
-const Title$7 = styled.h5`
+const Title$8 = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -29177,7 +29070,7 @@ const Controls$5 = styled.div`
   display: flex;  
   align-items: center;
 `;
-const Label = styled.div`
+const Label$1 = styled.div`
   display: flex;
   padding: 0 10px 0 10px;
   white-space: nowrap;
@@ -29257,7 +29150,7 @@ const CheckBox = props => {
     width: iconSize,
     height: iconSize,
     color: disabled ? colorDisabled : colorUnchecked
-  })), /*#__PURE__*/React$1.createElement(Label, {
+  })), /*#__PURE__*/React$1.createElement(Label$1, {
     className: "Label",
     "data-testid": "label"
   }, label)));
@@ -29453,7 +29346,7 @@ const AreaChart = props => {
     height: height
   }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer$2, {
     "data-testid": "header-container"
-  }, /*#__PURE__*/React$1.createElement(Title$7, {
+  }, /*#__PURE__*/React$1.createElement(Title$8, {
     "data-testid": "title"
   }, title), /*#__PURE__*/React$1.createElement(CheckboxGroupContainer, {
     "data-testid": "checkbox-group-container"
@@ -29952,7 +29845,7 @@ const HeaderContainer$1 = styled.div`
   align-items: center;
   padding-bottom: 8px;
 `;
-const Title$6 = styled.h3`
+const Title$7 = styled.h3`
   font-size: 18px;
   font-weight: 400;
   margin: 0;
@@ -30016,7 +29909,7 @@ const BreakdownPanel = props => {
     height: height
   }) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(HeaderContainer$1, {
     "data-testid": "header-container"
-  }, /*#__PURE__*/React$1.createElement(Title$6, {
+  }, /*#__PURE__*/React$1.createElement(Title$7, {
     "data-testid": "title"
   }, title)), /*#__PURE__*/React$1.createElement(CategorySalesMainContainer, {
     "data-testid": "category-sales-main-container"
@@ -31532,7 +31425,7 @@ const ChartContainer = styled.div`
   width: 100%;
   height: calc(100% - 70px);
 `;
-const Title$5 = styled.h2`
+const Title$6 = styled.h2`
   color: #212121;
   font-family: "Poppins";
   font-size: 18px;
@@ -32178,7 +32071,7 @@ const BrushChart = props => {
   return /*#__PURE__*/React$1.createElement(Container, {
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(Title$5, null, title), /*#__PURE__*/React$1.createElement(SegmentedContainer, {
+  }, /*#__PURE__*/React$1.createElement(Title$6, null, title), /*#__PURE__*/React$1.createElement(SegmentedContainer, {
     gap: "8px",
     options: segmentedbuttonOptions ? segmentedbuttonOptions.map(value => ({
       value
@@ -32242,7 +32135,7 @@ const Controls$3 = styled.div`
     padding: 12px 32px;
   }
 `;
-const Title$4 = styled.span`
+const Title$5 = styled.span`
   color: #212121;
   display: inline-block;
   font-size: 18px;
@@ -32503,7 +32396,7 @@ const SingleBarLineCharts = _ref => {
     height: height
   }, data?.length > 0 ? /*#__PURE__*/React$1.createElement(Controls$3, {
     className: "Controls"
-  }, title !== '' && /*#__PURE__*/React$1.createElement(Title$4, null, title), totalsData.length > 0 && /*#__PURE__*/React$1.createElement(LinnerDataBoxWrap, {
+  }, title !== '' && /*#__PURE__*/React$1.createElement(Title$5, null, title), totalsData.length > 0 && /*#__PURE__*/React$1.createElement(LinnerDataBoxWrap, {
     width: "40%",
     height: "60px",
     data: totalsData
@@ -32795,7 +32688,7 @@ const TooltipTitle$2 = styled.div`
   font-size: 14px;
   font-weight: 600;
 `;
-const Title$3 = styled.h5`
+const Title$4 = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -32971,7 +32864,7 @@ const BarChartWithAreaChart = props => {
     ref: controlsContainerRef
   }, /*#__PURE__*/React$1.createElement(Controls$2, {
     className: "Controls"
-  }, /*#__PURE__*/React$1.createElement(Title$3, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, /*#__PURE__*/React$1.createElement(Title$4, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     height: barChartHeight
   }, /*#__PURE__*/React$1.createElement(ComposedChart, {
     data: barChartData
@@ -33044,7 +32937,7 @@ const Controls$1 = styled.div`
     padding: 12px 32px;
   }
 `;
-const Title$2 = styled.span`
+const Title$3 = styled.span`
   color: #212121;
   display: inline-block;
   font-size: 18px;
@@ -33199,7 +33092,7 @@ const BarChartTwoRows = props => {
     ref: controlsContainerRef
   }, /*#__PURE__*/React$1.createElement(Controls$1, {
     className: "Controls"
-  }, title !== '' && /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, title !== '' && /*#__PURE__*/React$1.createElement(Title$3, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     height: barChartHeight
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
     width: width,
@@ -33278,7 +33171,7 @@ const TooltipTitle = styled.div`
   font-size: 14px;
   font-weight: 600;
 `;
-const Title$1 = styled.h5`
+const Title$2 = styled.h5`
   font-weight: 500;
   font-size: 18px;
   line-height: 20px;
@@ -33401,7 +33294,7 @@ const TwoBarCharts = props => {
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/React$1.createElement(Controls, null, /*#__PURE__*/React$1.createElement(Title$1, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
+  }, /*#__PURE__*/React$1.createElement(Controls, null, /*#__PURE__*/React$1.createElement(Title$2, null, title), /*#__PURE__*/React$1.createElement(ResponsiveContainer, {
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/React$1.createElement(BarChart$1, {
@@ -33581,7 +33474,7 @@ const TitleDiv = styled.div`
     font-size: 10px;
   }
 `;
-const TableWrapper = styled.div`
+const TableWrapper$2 = styled.div`
   overflow-x: auto;
   margin-bottom: 22px;
   &::-webkit-scrollbar {
@@ -33598,7 +33491,7 @@ const TableWrapper = styled.div`
     border-radius: 5px;
   }
 `;
-const Table = styled.table`
+const Table$2 = styled.table`
   width: 100%;
   border-collapse: collapse;
   overflow: auto;
@@ -33828,7 +33721,7 @@ const CollapseData = props => {
     }) : /*#__PURE__*/React$1.createElement(ArrowDownIcon, {
       width: "11px",
       height: "12px"
-    })), /*#__PURE__*/React$1.createElement(TitleDiv, null, `${parseFloat(section.value.toFixed(1))}${section.valueType}`))), activeIndex === section.key && /*#__PURE__*/React$1.createElement(TableWrapper, null, /*#__PURE__*/React$1.createElement(Table, null, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement("tr", null, section.table.map((headline, i) => /*#__PURE__*/React$1.createElement(Th, {
+    })), /*#__PURE__*/React$1.createElement(TitleDiv, null, `${parseFloat(section.value.toFixed(1))}${section.valueType}`))), activeIndex === section.key && /*#__PURE__*/React$1.createElement(TableWrapper$2, null, /*#__PURE__*/React$1.createElement(Table$2, null, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement("tr", null, section.table.map((headline, i) => /*#__PURE__*/React$1.createElement(Th, {
       key: `${i + headline}`
     }, headline.title)))), /*#__PURE__*/React$1.createElement("tbody", null, /*#__PURE__*/React$1.createElement("tr", null, section.table.map((data, i) => {
       if (data.value !== null) {
@@ -33896,7 +33789,7 @@ const ModalContent = styled.div`
     padding: 1rem 0 3rem;
   }
 `;
-const Header = styled.div`
+const Header$1 = styled.div`
   position: relative;
   display: flex;
   justify-content: space-between;
@@ -33928,7 +33821,7 @@ const CloseButton = styled.button`
     align-self: flex-end;
   }
 `;
-const Title = styled.h2`
+const Title$1 = styled.h2`
   position: absolute;
   display: flex;
   align-items: center;
@@ -34106,7 +33999,7 @@ const InsightsCarousel = _ref => {
   const nextIndex = (currentIndex + 1) % totalChildren;
   return /*#__PURE__*/React$1.createElement(Overlay, {
     className: className
-  }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header, null, /*#__PURE__*/React$1.createElement(Title, {
+  }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header$1, null, /*#__PURE__*/React$1.createElement(Title$1, {
     $titleColor: titleColor
   }, /*#__PURE__*/React$1.cloneElement(icon, {
     fill: iconColor
@@ -34404,5 +34297,1530 @@ DownloadProgress.defaultProps = {
   className: 'DownloadProgressMainContainer'
 };
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Button, CollapseData, CollapseHeader, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, EventDetailsCard, EventList, FilterPanel, Heatmap, IconButton, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, TwoBarCharts };
+const ModalWrapper = styled.div`
+  font-family: "Poppins", sans-serif;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const Modal = styled.div`
+  display: flex;
+  gap: 30px;
+  padding: 20px;
+  flex-direction: column;
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+`;
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+const ModalButtons = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+const ModalTitle = styled.h3`
+  margin: 0;
+  font-size: 24px;
+`;
+const ModalBody = styled.div`
+  flex-grow: 1;
+`;
+styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 20px;
+  border-top: 1px solid #ddd;
+`;
+
+const ModalWithOverlay = props => {
+  const {
+    title = '',
+    children = null,
+    onOk = () => {},
+    onCancel = () => {},
+    cancelButtonText = 'Cancel',
+    cancelButtonLeftIcon = '',
+    cancelButtonRightIcon = '',
+    cancelButtonType = 'secondary',
+    okButtonText = 'OK',
+    okButtonLeftIcon = '',
+    okButtonRightIcon = '',
+    okButtonType = 'primary',
+    width = '400px',
+    height = 'auto',
+    overlayTransparent = false,
+    overlayOpacity = 0.797,
+    showCancelButton = true,
+    // Added this prop
+    showOkButton = true // Added this prop
+  } = props;
+  const overlayStyle = {
+    backgroundColor: overlayTransparent ? "transparent" : `rgba(0, 0, 0, ${overlayOpacity || 0.797})`
+  };
+  return /*#__PURE__*/React$1.createElement(ModalWrapper, {
+    className: "modal-wrapper",
+    style: overlayStyle
+  }, /*#__PURE__*/React$1.createElement(Modal, {
+    style: {
+      width,
+      height
+    }
+  }, /*#__PURE__*/React$1.createElement(ModalHeader, {
+    className: "modal-header"
+  }, /*#__PURE__*/React$1.createElement(ModalTitle, null, title), /*#__PURE__*/React$1.createElement(ModalButtons, {
+    className: "modal-buttons"
+  }, showCancelButton && /*#__PURE__*/React$1.createElement(Button$1, {
+    type: cancelButtonType,
+    leftIcon: cancelButtonLeftIcon,
+    rightIcon: cancelButtonRightIcon,
+    text: cancelButtonText,
+    onClick: onCancel
+  }), showOkButton && /*#__PURE__*/React$1.createElement(Button$1, {
+    type: okButtonType,
+    leftIcon: okButtonLeftIcon,
+    rightIcon: okButtonRightIcon,
+    text: okButtonText,
+    onClick: onOk
+  }))), /*#__PURE__*/React$1.createElement(ModalBody, {
+    className: "modal-body"
+  }, children)));
+};
+
+/* ──────────────────────────────────────────
+   COLORS  – map to your design-system tokens
+   Change only here if the palette shifts
+─────────────────────────────────────────── */
+const c = {
+  surface: "#ffffff",
+  text: "#212121",
+  textSecondary: "#8d9299",
+  primary: "#016672",
+  // apply / highlight
+  primaryLight: "#d1e7ea",
+  border: "#e0e0e0"
+};
+
+/* ───────────────────────── wrapper */
+const CalendarWrapper = styled.div`
+  width: 240px;
+  padding: 16px 16px 12px;
+  background: ${c.surface};
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  user-select: none;
+`;
+
+/* ───────────────────────── header */
+const Header = styled.h4`
+  margin: 0 0 12px;
+  color: ${c.text};
+
+  /* Content/P3 Regular */
+  font-family: Poppins;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+/* ───────────────────────── grid */
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(${({
+  columns
+}) => columns}, 1fr);
+  gap: 6px 0px;
+  margin-bottom: 16px;
+`;
+
+/* individual week cell */
+const WeekCell = styled.div`
+  padding: 6px 0;
+  font-size: 13px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: center;
+  cursor: pointer;
+  color: ${c.textSecondary};
+  transition: background 0.15s ease;
+      border-radius: 4px;
+
+  ${({
+  $selected
+}) => $selected && css`
+
+      background: ${c.primary};
+      color: #FFFFFF;
+    `}
+
+  /* highlight range interior lighter */
+  ${({
+  $isRangeMiddle
+}) => $isRangeMiddle && css`
+      background: ${c.primaryLight};
+      border-radius: 0px;
+      color: ${c.text};
+    `}
+
+  &:hover {
+    background: ${c.primaryLight};
+    color: ${c.text};
+  }
+  text-align: center;
+  font-feature-settings: "liga" off;
+
+  /* Content/P3 Regular */
+  font-family: Poppins;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+/* ───────────────────────── footer buttons */
+const Footer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+`;
+css`
+  flex: 1 1 0;
+  height: 32px;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition:
+    opacity 0.15s ease,
+    background 0.15s ease;
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+`;
+
+/**
+ * WeeksCalendar
+ * -------------
+ * Props
+ * • year               – four-digit year (required)
+ * • defaultStartWeek   – number | null
+ * • defaultEndWeek     – number | null
+ * • onApply(start,end) – callback, both numbers (inclusive)
+ * • onCancel()         – callback
+ */
+const WeeksCalendar = ({
+  year,
+  defaultStartWeek = null,
+  defaultEndWeek = null,
+  onApply,
+  onCancel
+}) => {
+  // state -------------------------------------------------
+  const [startWeek, setStartWeek] = useState(defaultStartWeek);
+  const [endWeek, setEndWeek] = useState(defaultEndWeek);
+
+  // derived helpers --------------------------------------
+  const hasSelection = startWeek !== null;
+  const isRange = hasSelection && endWeek !== null && endWeek !== startWeek;
+  const weeks = useMemo(() => [...Array(53)].map((_, i) => i + 1), []);
+  const handleCellClick = week => {
+    // first click → start
+
+    if (!hasSelection) {
+      setStartWeek(week);
+      setEndWeek(null);
+      return;
+    }
+    // second click → decide range or single
+    if (hasSelection && endWeek === null) {
+      // second click on same cell turns it to single selection
+      if (week === startWeek) {
+        setEndWeek(null);
+        return;
+      }
+      // ensure ascending order
+      setEndWeek(week < startWeek ? startWeek : week);
+      setStartWeek(week < startWeek ? week : startWeek);
+      return;
+    }
+    // any later click resets selection and starts over
+    setStartWeek(week);
+    setEndWeek(null);
+  };
+  const clearAll = () => {
+    setStartWeek(null);
+    setEndWeek(null);
+  };
+
+  // render ------------------------------------------------
+  const title = !hasSelection ? "Select Weeks" : !isRange ? `Week ${startWeek}, ${year}` : `Weeks ${startWeek}-${endWeek}, ${year}`;
+  return /*#__PURE__*/React$1.createElement(CalendarWrapper, null, /*#__PURE__*/React$1.createElement(Header, null, title), /*#__PURE__*/React$1.createElement(Grid, {
+    columns: 6
+  }, weeks.map(wk => {
+    const selected = wk === startWeek || isRange && wk >= startWeek && wk <= endWeek;
+    return /*#__PURE__*/React$1.createElement(WeekCell, {
+      key: wk,
+      "data-week": wk,
+      $selected: selected,
+      $isRangeMiddle: selected && wk !== startWeek && wk !== endWeek,
+      onClick: () => handleCellClick(wk)
+    }, wk);
+  })), /*#__PURE__*/React$1.createElement(Footer, null, /*#__PURE__*/React$1.createElement(Button$1, {
+    type: "secondary",
+    disabled: !hasSelection,
+    onClick: clearAll,
+    text: "CLEAR"
+  }), /*#__PURE__*/React$1.createElement(Button$1, {
+    type: "primary",
+    disabled: !hasSelection,
+    onClick: () => {
+      if (hasSelection) onApply(startWeek, endWeek ?? startWeek);
+    },
+    text: "APPLY"
+  }), onCancel && /*#__PURE__*/React$1.createElement("button", {
+    style: {
+      display: "none"
+    },
+    type: "button",
+    onClick: onCancel
+  })));
+};
+WeeksCalendar.propTypes = {
+  year: PropTypes.number.isRequired,
+  defaultStartWeek: PropTypes.number,
+  defaultEndWeek: PropTypes.number,
+  onApply: PropTypes.func.isRequired,
+  onCancel: PropTypes.func
+};
+
+/* src/components/WeeksPicker/WeeksPicker.style.js */
+const WeeksPickerContainer = styled.div`
+  position: relative;
+  margin-bottom: 10px;
+  width: ${props => props.width || '100%'};
+  height: ${props => props.height || '60px'};
+`;
+const StyledInput$1 = styled.input`
+  padding: 20px;
+  font-size: 14px;
+  border-radius: ${props => props.borderRadius || '4px'};
+  border: none;
+  outline: none;
+  width: ${props => props.width || '90%'};
+  height: ${props => props.height || '60px'};
+  transition: border-color 0.3s ease; 
+  font-size: 14px;
+  font-weight: 400;
+  box-sizing: border-box;
+  color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+`;
+const StyledLabel = styled.label`
+  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
+  width: ${props => props.isFocused || props.hasValue ? 'auto' : '150px'};
+  color: ${props => props.disabled ? '#888' : (props.isFocused || props.hasValue ? props.borderColorFocus : '#757575') || '#333'};
+  position: absolute;
+  top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
+  left: 15px;
+  background-color: ${props => props.isFocused || props.hasValue ? 'white' : 'transparent'};
+  transform: translateY(-50%);
+  transition: top 0.3s ease, font-size 0.3s ease;
+  display: flex;
+  font-weight: 400;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+`;
+const RequiredIndicator = styled.span`
+  color: red;
+  margin-left: 5px;
+`;
+styled.div`
+  font-size: 12px;
+  color: red;
+  margin-top: 5px;
+`;
+const OptionsContainer = styled.div`
+  position: relative;
+  z-index: 999;
+`;
+const InputContainer$1 = styled.div`
+  display: flex;       
+  flex-wrap: nowrap; 
+  justify-content: flex-start;
+  align-content: center;     
+  white-space: pre-wrap;
+  align-items: center;
+  overflow: hidden; 
+  width: 100%;
+  height: 100%;    
+  box-sizing: border-box;
+  background-color: transparent;    
+  border:  1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  border-radius: 12px;
+  outline: none;
+  color: ${props => props.disabled ? '#888' : '#212121'};
+   
+  &:hover {
+    border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'};
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  }
+
+  &:focus {  
+    border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'}; 
+  }
+`;
+const CalendarDiv = styled.div`
+  position: absolute;
+  top: 16px;
+  right: 10px;
+`;
+
+// src/components/WeeksPicker/WeeksPicker.jsx
+const WeeksPicker = _ref => {
+  let {
+    label,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    required,
+    placeholder,
+    borderRadius,
+    year,
+    width,
+    height,
+    onChange,
+    selectedValue
+  } = _ref;
+  const [value, setValue] = useState("");
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  const onChangeEvent = e => {
+    onChange(e.target.value);
+    setValue(e.target.value);
+  };
+  useEffect(() => {
+    if (selectedValue) {
+      setValue(selectedValue);
+    }
+  }, [selectedValue]);
+  const handleApply = () => {
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    setIsOpen(false);
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+  return /*#__PURE__*/React$1.createElement(WeeksPickerContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React$1.createElement(InputContainer$1, {
+    onClick: handleToggle,
+    className: "InputContainer",
+    isFocused: isFocused,
+    hasValue: value,
+    disabled: disabled,
+    textColor: textColor,
+    borderColor: borderColor,
+    borderColorFocus: borderColorFocus
+  }, /*#__PURE__*/React$1.createElement(StyledLabel, {
+    className: "StyledLabel",
+    onClick: handleFocus,
+    isFocused: isFocused,
+    hasValue: value,
+    disabled: disabled,
+    textColor: textColor,
+    borderColor: borderColor,
+    borderColorFocus: borderColorFocus
+  }, label, required && /*#__PURE__*/React$1.createElement(RequiredIndicator, null, "*")), /*#__PURE__*/React$1.createElement(StyledInput$1, {
+    className: "StyledInput",
+    ref: inputRef,
+    value: value,
+    onChange: onChangeEvent,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    isFocused: isFocused,
+    borderColorFocus: borderColorFocus,
+    borderRadius: borderRadius,
+    width: width,
+    height: height,
+    placeholder: isFocused ? placeholder : "",
+    disabled: disabled,
+    borderColor: borderColor,
+    textColor: textColor
+  }), /*#__PURE__*/React$1.createElement(CalendarDiv, {
+    onClick: handleToggle
+  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, null) : /*#__PURE__*/React$1.createElement(Calendar, null))), isOpen && /*#__PURE__*/React$1.createElement(OptionsContainer, null, /*#__PURE__*/React$1.createElement(WeeksCalendar, {
+    year: year,
+    onApply: (start, end) => {
+      handleApply();
+      const tempValue = end === start ? `Week ${start},${year}` : `Weeks ${start} - ${end},${year}`;
+      onChange(tempValue);
+      setValue(tempValue);
+      setIsOpen(!isOpen);
+      // close your modal here if needed …
+    },
+    onCancel: () => handleCancel()
+  })));
+};
+WeeksPicker.propTypes = {
+  label: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+  defaultValues: PropTypes.arrayOf(PropTypes.number),
+  saveStartWeekID: PropTypes.func.isRequired,
+  saveEndWeekID: PropTypes.func.isRequired
+};
+
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React$1.createContext && /*#__PURE__*/React$1.createContext(DefaultContext);
+
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => /*#__PURE__*/React$1.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  return props => /*#__PURE__*/React$1.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = conf => {
+    var {
+        attr,
+        size,
+        title
+      } = props,
+      svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /*#__PURE__*/React$1.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className: className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /*#__PURE__*/React$1.createElement("title", null, title), props.children);
+  };
+  return IconContext !== undefined ? /*#__PURE__*/React$1.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
+}
+
+// THIS FILE IS AUTO GENERATED
+function FaEyeSlash (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 640 512"},"child":[{"tag":"path","attr":{"d":"M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"},"child":[]}]})(props);
+}
+
+const IconWrapper$1 = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;  
+  padding: 2px;
+  cursor: ${props => props.disabled ? 'not-allowed' : props.pointer || 'default'};
+`;
+
+// eslint-disable-next-line import/prefer-default-export
+const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBackOnClick) => {
+  const newIconHeight = iconHeight || '12px';
+  const newIconWidth = iconWidth || '12px';
+  const newColor = disabled ? '#D0D0D0' : color || '#212121';
+  switch (icon.toLowerCase()) {
+    case 'filter':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        className: "FilterIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(FilterIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
+    case 'options':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        className: "OptionsIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
+    case 'download':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        className: "DownloadIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
+    case 'document':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        className: "DocumentIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
+    case 'fly':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        className: "FlyIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(FlyIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
+    case 'bell':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        className: "BellIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(BellIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
+    case 'maintenance':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        className: "MaintenanceIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
+    case 'exit':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        className: "ExitIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(ExitIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
+    case 'eye':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        className: "EyeIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(EyeIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
+    case 'search':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+        className: "SearchIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(SearchIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
+    default:
+      return '';
+  }
+};
+
+/* eslint-disable no-nested-ternary */
+const MainContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  align-items: flex-start;
+  width: ${props => props.width || '300px'};  
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
+  padding: 0;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'default'};
+`;
+const Label = styled.label`
+
+  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
+  font-weight: 400;
+  padding-inline-end: 5px;
+  padding-inline-start: 5px;
+  margin-right: 10px; 
+  z-index: 2;
+  color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};
+  background-color: white;
+  position: absolute;
+  top: ${props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px'};
+  left: ${props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px'};
+  font-family: Poppins;  
+  transform: translateY(-50%);
+  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-height: 16px;
+  gap: 4px;
+  &:hover {
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  }
+`;
+const InputContainer = styled.div`
+
+    display: flex;       
+    flex-direction: row;
+    flex-wrap: nowrap; 
+    justify-content: flex-start;
+    align-content: center;     
+    white-space: pre-wrap;
+    align-items: center;
+    overflow: hidden;
+    padding: 0 16px;
+    gap: 14px;
+    width: 100%;
+    height: 100%;    
+    box-sizing: border-box;
+    background-color: #fff;
+    border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
+    outline: none;
+    color: ${props => props.disabled ? '#D0D0D0' : '#212121'};
+   
+  &:hover {
+    border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'};
+  }
+
+  &:focus {  
+    border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'}; 
+  }
+  
+`;
+const InputSubContainer = styled.div`
+
+    display: flex;       
+    flex-direction: column;
+    flex-wrap: nowrap;     
+    align-content: center; 
+    align-items: flex-start;
+    justify-content: center;
+    white-space: pre-wrap;
+    overflow: hidden;
+    padding: 5px 0;
+    width: 100%;
+    height: 100%;
+    min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
+    box-sizing: border-box;
+    background-color: #fff;    
+    border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
+    outline: none;
+    color: ${props => props.disabled ? '#D0D0D0' : '#212121'};     
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+`;
+const StyledInput = styled.input`
+  width: calc(100% - 10px);
+  height: 20px;
+  font-family: Poppins;
+  font-weight: 400;
+  font-size: 14px;
+  outline: none;  
+  color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
+  background-color: #fff;  
+  border: none;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+`;
+const ErrorMessage = styled.div`
+  font-size: 12px;
+  color: red;
+  margin-top: 5px;
+  max-width: ${props => props.width || '300px'};
+`;
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;  
+  padding: 2px; 
+  &:hover{ 
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  }
+`;
+
+/* eslint-disable import/no-extraneous-dependencies */
+const Input = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    size,
+    selectedValue,
+    placeHolder,
+    onChange,
+    onBlur,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    leftIcon,
+    rightIcon,
+    password,
+    leftIconOnClick,
+    rightIconOnClick
+  } = _ref;
+  const [isFocused, setIsFocused] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    setInputValue(selectedValue);
+  }, [selectedValue]);
+  const handleLabelClick = () => {
+    if (disabled) return;
+    setIsFocused(true);
+    if (inputRef?.current) {
+      inputRef?.current?.focus();
+    }
+  };
+  const handleInputChange = e => {
+    setIsFocused(true);
+    setInputValue(e.target.value);
+    if (inputRef?.current) {
+      inputRef?.current?.focus();
+    }
+    onChange({
+      newValue: e.target.value || ''
+    });
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+    if (inputRef?.current) {
+      inputRef?.current?.focus();
+    }
+  };
+  const handleBlur = () => {
+    onBlur();
+    setIsFocused(false);
+  };
+  const leftIconOnClickHandler = () => {
+    if (disabled) return;
+    leftIconOnClick({
+      leftIconOnClick: leftIcon
+    });
+  };
+  const rightIconOnClickHandler = () => {
+    if (disabled) return;
+    rightIconOnClick({
+      rightIconOnClick: rightIcon
+    });
+  };
+  const getLeftIcon = () => {
+    if (!leftIcon || leftIcon === 'none') return '';
+    return getIcon(leftIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', leftIconOnClickHandler);
+  };
+  const getRightIcon = () => {
+    if (!rightIcon || rightIcon === 'none') return '';
+    return getIcon(rightIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', rightIconOnClickHandler);
+  };
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+  const getPasswordIcon = () => {
+    if (!password) return '';
+    if (showPassword) {
+      return /*#__PURE__*/React$1.createElement(IconWrapper, {
+        className: "passwordEyeSlash",
+        disabled: disabled,
+        onClick: toggleShowPassword
+      }, /*#__PURE__*/React$1.createElement(FaEyeSlash, {
+        onClick: toggleShowPassword,
+        color: error ? 'red' : labelColor
+      }));
+    }
+    return getIcon('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
+  };
+  return /*#__PURE__*/React$1.createElement(MainContainer, {
+    className: "MainContainer",
+    width: width,
+    size: size,
+    disabled: disabled
+  }, /*#__PURE__*/React$1.createElement(InputContainer, {
+    className: "InputContainer",
+    labelColor: labelColor,
+    disabled: disabled,
+    error: error,
+    isFocused: isFocused,
+    size: size
+  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(InputSubContainer, {
+    className: "InputSubContainer",
+    ref: containerRef,
+    labelColor: labelColor,
+    disabled: disabled,
+    error: error,
+    onClick: handleLabelClick,
+    size: size
+  }, /*#__PURE__*/React$1.createElement(Label, {
+    className: "Label",
+    isFocused: isFocused,
+    labelColor: labelColor,
+    hasValue: inputValue,
+    leftIcon: leftIcon,
+    disabled: disabled,
+    error: error,
+    errorMessage: errorMessage,
+    onClick: handleLabelClick,
+    size: size
+  }, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/React$1.createElement("span", {
+    style: {
+      color: disabled ? '#D0D0D0' : 'red',
+      height: '16px'
+    }
+  }, "*")), /*#__PURE__*/React$1.createElement(StyledInput, {
+    className: "StyledInput",
+    ref: inputRef,
+    type: password && !showPassword ? 'password' : 'text',
+    value: inputValue,
+    onChange: handleInputChange,
+    onClick: handleLabelClick,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    disabled: disabled,
+    placeholder: isFocused ? placeHolder : '',
+    error: error,
+    isFocused: isFocused
+  })), password ? getPasswordIcon() : getRightIcon()), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, {
+    className: "ErrorMessage",
+    width: width
+  }, errorMessage));
+};
+Input.propTypes = {
+  placeHolder: PropTypes.string,
+  label: PropTypes.string,
+  labelEmptyValue: PropTypes.string,
+  size: PropTypes.string,
+  labelColor: PropTypes.string,
+  required: PropTypes.bool,
+  width: PropTypes.string,
+  disabled: PropTypes.bool,
+  error: PropTypes.bool,
+  errorMessage: PropTypes.string,
+  selectedValue: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  leftIconOnClick: PropTypes.func,
+  rightIconOnClick: PropTypes.func,
+  onBlur: PropTypes.func,
+  leftIcon: PropTypes.string,
+  rightIcon: PropTypes.string,
+  password: PropTypes.bool
+};
+Input.defaultProps = {
+  placeHolder: 'Type...',
+  label: '',
+  labelEmptyValue: '',
+  size: 'medium',
+  labelColor: '#066768',
+  required: true,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  selectedValue: '',
+  leftIcon: 'none',
+  rightIcon: 'none',
+  leftIconOnClick: () => {},
+  rightIconOnClick: () => {},
+  onBlur: () => {},
+  password: false
+};
+
+const ToggleSwitchLabel = styled.label`
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  opacity: ${({
+  disabled
+}) => disabled ? 0.5 : 1};
+`;
+const ToggleInput = styled.input`
+  display: none;
+`;
+const ToggleSlider = styled.span`
+  display: block;
+  position: relative;
+  background: ${({
+  checked,
+  disabled
+}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
+  border-radius: 999px;
+  transition: background 0.2s;
+  ${({
+  size
+}) => {
+  switch (size) {
+    case "s":
+      return css`width: 40px; height: 20px;`;
+    case "l":
+      return css`width: 72px; height: 36px;`;
+    default:
+      return css`width: 56px; height: 28px;`;
+  }
+}}
+  &:before {
+    content: "";
+    position: absolute;
+    left: 3px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #fff;
+    border-radius: 50%;
+    transition: left 0.2s, width 0.2s, height 0.2s;
+    ${({
+  size
+}) => {
+  switch (size) {
+    case "s":
+      return css`width: 14px; height: 14px;`;
+    case "l":
+      return css`width: 28px; height: 28px;`;
+    default:
+      return css`width: 20px; height: 20px;`;
+  }
+}}
+    left: ${({
+  checked,
+  size
+}) => {
+  if (!checked) return "3px";
+  switch (size) {
+    case "s":
+      return "calc(100% - 17px)";
+    case "l":
+      return "calc(100% - 31px)";
+    default:
+      return "calc(100% - 23px)";
+  }
+}};
+  }
+`;
+
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
+ */
+function ToggleSwitch(_ref) {
+  let {
+    checked,
+    onChange,
+    size = "m",
+    disabled = false,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement(ToggleSwitchLabel, {
+    size: size,
+    disabled: disabled
+  }, /*#__PURE__*/React$1.createElement(ToggleInput, _extends$1({
+    type: "checkbox",
+    checked: checked,
+    onChange: e => onChange?.(e.target.checked),
+    disabled: disabled
+  }, props)), /*#__PURE__*/React$1.createElement(ToggleSlider, {
+    checked: checked,
+    size: size,
+    disabled: disabled
+  }));
+}
+ToggleSwitch.propTypes = {
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(["s", "m", "l"]),
+  disabled: PropTypes.bool
+};
+
+const TableWrapper$1 = styled.div`
+    width: ${props => props.width};
+    height: ${props => props.height};
+    padding: 20px;
+    background-color: #fff;
+    box-sizing: border-box;
+`;
+const Table$1 = styled.table`
+    width: 100%;
+    margin-top: 24px;
+    border-spacing: unset;
+`;
+const Thead = styled.thead``;
+const HeaderCell = styled.th`
+    font-weight: 600;
+    width: ${props => props.width};
+    padding-right: 8px;
+    padding-bottom: 12px;
+`;
+const Tbody = styled.tbody``;
+const BodyCell = styled.td`
+    font-weight: 600;
+    width: ${props => props.width};
+    padding-right: 8px;
+    padding-bottom: 12px;
+`;
+const StyledRow = styled.tr`
+    border-bottom: 1px solid #C8C8C8;
+`;
+
+const ContainerTable = props => {
+  const {
+    width = '100%',
+    height = '300px',
+    columnsWidths = [430, 105, 210, 175, 148, 185, 104, 104, 140, 50, 50],
+    standardCellSkeletonHeight = 22,
+    isLoading = true,
+    children
+  } = props;
+  const TableWrapperRef = useRef(null);
+  const [numberOfRows, setNumberOfRows] = useState(3);
+  const calculateRows = () => {
+    if (TableWrapperRef.current) {
+      const wrapperHeight = TableWrapperRef.current.offsetHeight;
+
+      // Calculate available space for rows
+      const titleHeight = 32; // First skeleton height
+      const subtitleHeight = 22; // Second skeleton height
+      const titleMargin = 24; // Margin top for subtitle
+      const headerRowHeight = standardCellSkeletonHeight + 22; // Approximate height of header row (22px skeleton + padding)
+      const bodyRowHeight = standardCellSkeletonHeight + 22; // Approximate height of body row (22px skeleton + padding)
+      const tablePadding = 20; // Approximate padding/margins for the table
+
+      const usedHeight = titleHeight + subtitleHeight + titleMargin + headerRowHeight + tablePadding;
+      const availableHeight = wrapperHeight - usedHeight;
+
+      // Calculate how many rows can fit
+      const maxRows = Math.floor(availableHeight / bodyRowHeight);
+
+      // Set minimum of 3 rows, maximum based on available space
+      setNumberOfRows(Math.max(3, maxRows));
+    }
+  };
+  useEffect(() => {
+    calculateRows();
+  }, [height]);
+  return /*#__PURE__*/React$1.createElement(TableWrapper$1, {
+    ref: TableWrapperRef,
+    width: width,
+    height: height
+  }, isLoading ? /*#__PURE__*/React$1.createElement(SkeletonTheme, {
+    baseColor: "#EAEAEA",
+    highlightColor: "#F5F5F5"
+  }, /*#__PURE__*/React$1.createElement(Skeleton, {
+    width: 260,
+    height: 32
+  }), /*#__PURE__*/React$1.createElement(Skeleton, {
+    width: 260,
+    height: 22,
+    style: {
+      marginTop: 24
+    }
+  }), /*#__PURE__*/React$1.createElement(Table$1, null, /*#__PURE__*/React$1.createElement(Thead, null, /*#__PURE__*/React$1.createElement(StyledRow, null, columnsWidths.map((width, index) => /*#__PURE__*/React$1.createElement(HeaderCell, {
+    key: `header-cell-${index}`,
+    width: `${width}px`
+  }, /*#__PURE__*/React$1.createElement(Skeleton, {
+    width: '100%',
+    height: standardCellSkeletonHeight
+  }))))), /*#__PURE__*/React$1.createElement(Tbody, null, Array.from({
+    length: numberOfRows
+  }).map((_, rowIndex) => /*#__PURE__*/React$1.createElement(StyledRow, {
+    key: `row-${rowIndex}`
+  }, columnsWidths.map((width, colIndex) => /*#__PURE__*/React$1.createElement(BodyCell, {
+    key: `cell-${rowIndex}-${colIndex}`,
+    width: `${width}px`
+  }, /*#__PURE__*/React$1.createElement(Skeleton, {
+    width: '100%',
+    height: standardCellSkeletonHeight
+  })))))))) : children);
+};
+
+const MenuRouteContainer = styled.div`
+    font-family: 'Poppins', sans-serif;
+`;
+const ButtonGroup = styled.div`
+    display: flex;
+    justify-content: ${props => {
+  switch (props.pos) {
+    case 'left':
+      return 'flex-start';
+    case 'center':
+      return 'center';
+    case 'right':
+      return 'flex-end';
+    default:
+      return 'center';
+  }
+}};
+`;
+const Button = styled.button`
+    background-color: transparent;
+    border: none;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    color: #212121;
+    padding: 0 24px 10px;
+    font-size: 16px;
+    font-weight: 600;
+    &.active {
+        color: ${props => props.color || '#066768'};
+        border-bottom: 3px solid ${props => props.color || '#066768'};
+    }
+    &:disabled {
+        color: #717171;
+        cursor: not-allowed;
+    }
+`;
+
+const Build = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M20.7978 14.3728C20.9274 14.2408 21 14.0623 21 13.8758V12.0002C21 11.6122 20.6913 11.2972 20.31 11.2972H18.2399V5.21311L19.4183 4.01058C19.5753 3.85008 19.647 3.62208 19.6106 3.39807L19.1503 0.587512C19.0949 0.248505 18.8068 0 18.4696 0H16.6292C16.2916 0 16.004 0.248505 15.9486 0.587512L15.4882 3.39807C15.4514 3.62158 15.5231 3.84958 15.6806 4.01058L16.8589 5.21311V11.2972H14.7884C14.4071 11.2972 14.0984 11.6122 14.0984 12.0002V13.8753C14.0984 14.0618 14.171 14.2408 14.3006 14.3723L15.0185 15.1038V15.4588L14.3006 16.1903C14.171 16.3223 14.0984 16.5013 14.0984 16.6873V21.8905C14.0984 23.0535 15.0274 24 16.1689 24H18.929C20.0705 24 20.9995 23.0535 20.9995 21.8905V16.6878C20.9995 16.5013 20.9269 16.3228 20.7973 16.1908L20.0793 15.4593V15.1043L20.7978 14.3728ZM17.2137 1.40653H17.8851L18.1909 3.27257L17.5499 3.92658L16.9085 3.27257L17.2137 1.40653ZM19.6195 21.891C19.6195 22.2785 19.3098 22.594 18.9295 22.594H16.1694C15.7891 22.594 15.4794 22.2785 15.4794 21.891V21.1409H19.62L19.6195 21.891ZM19.6195 13.5843L18.9015 14.3158C18.7719 14.4478 18.6993 14.6263 18.6993 14.8128V15.7503C18.6993 15.9363 18.7719 16.1153 18.9015 16.2473L19.6195 16.9789V19.7344H15.4789V16.9789L16.1969 16.2473C16.3264 16.1153 16.3991 15.9363 16.3991 15.7503V14.8128C16.3991 14.6263 16.3264 14.4478 16.1969 14.3158L15.4789 13.5843V12.7038H19.6195V13.5843ZM7.50349 20.3582C6.99555 20.6978 7.15554 21.5158 7.75182 21.6323C8.21559 21.7413 8.67053 21.2783 8.56354 20.8053C8.48011 20.3247 7.89561 20.0777 7.50349 20.3582Z",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M9.44437 0.959887C8.99507 0.803976 8.52368 1.13173 8.52368 1.59994V4.90256L7.83476 5.35485L7.1429 4.90208V1.60043C7.1429 1.13221 6.67101 0.804459 6.22221 0.96037C4.33566 1.61587 3.0413 3.37724 3.00104 5.34326C2.96323 7.1722 4.00716 8.85199 5.64426 9.67402L4.6347 20.5555C4.46333 22.4032 5.94576 24 7.83329 24C9.72082 24 11.2037 22.4032 11.0324 20.5555L10.0233 9.67789C10.7245 9.32793 11.327 8.81579 11.7861 8.17573C12.3621 7.37204 12.6665 6.42692 12.6665 5.44077C12.6665 3.42985 11.3717 1.62939 9.44437 0.959887ZM9.04761 8.61836C8.75643 8.72601 8.57475 9.0108 8.60274 9.31538L9.65649 20.6781C9.75421 21.7337 8.9111 22.6417 7.8328 22.6417C6.75498 22.6417 5.91139 21.7337 6.00959 20.6781L7.06384 9.31297C7.09183 9.00935 6.91113 8.72456 6.62093 8.61643C5.25193 8.10622 4.35187 6.80197 4.38182 5.36981C4.40343 4.31512 4.9303 3.34296 5.76162 2.72608V5.26507C5.76162 5.49193 5.87751 5.70432 6.06999 5.82982L7.45323 6.73488C7.68549 6.88645 7.98747 6.88645 8.21924 6.7344L9.59806 5.82934C9.79005 5.70336 9.90545 5.49193 9.90545 5.26507V2.72511C10.7579 3.35552 11.2862 4.35518 11.2862 5.44029C11.2857 6.84638 10.3862 8.1236 9.04761 8.61836Z",
+    fill: fill
+  }));
+};
+
+const Track = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M11.999 19.1706C8.2827 19.1706 5.02706 16.8561 2.95058 14.9152C1.80841 13.8472 1 13.0127 1 11.9967C1 10.9806 1.80741 10.1471 2.94758 9.08017C5.02507 7.13828 8.28271 4.82274 11.999 4.82274C15.7163 4.82274 18.9729 7.13828 21.0494 9.08017C22.1916 10.1482 23 10.9826 23 11.9977C23 13.0117 22.1906 13.8462 21.0474 14.9152C18.9709 16.8561 15.7153 19.1706 11.999 19.1706ZM11.999 6.41694C8.76935 6.41694 5.85246 8.50933 3.97483 10.2654C3.47119 10.7356 2.53487 11.6116 2.53487 11.9967C2.53487 12.3817 3.47319 13.2587 3.97783 13.7299C5.85446 15.485 8.76935 17.5764 11.999 17.5764C15.2286 17.5764 18.1435 15.485 20.0202 13.7299C20.5248 13.2587 21.4651 12.3807 21.4651 11.9977C21.4651 11.6137 20.5268 10.7367 20.0222 10.2655C18.1455 8.50934 15.2297 6.41694 11.999 6.41694Z",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M12.0008 3.55814C11.5297 3.55814 11.1474 3.21439 11.1474 2.7907V1.76744C11.1474 1.34375 11.5297 1 12.0008 1C12.472 1 12.8542 1.34375 12.8542 1.76744V2.7907C12.8542 3.21439 12.472 3.55814 12.0008 3.55814ZM6.31135 5.11001C6.03577 5.11001 5.76463 4.99009 5.60017 4.76826L4.96899 3.91789C4.70786 3.56614 4.81342 3.08949 5.20569 2.85366C5.59906 2.61883 6.12801 2.71476 6.38914 3.06651L7.02032 3.91688C7.28145 4.26863 7.17589 4.74528 6.78362 4.98111C6.63805 5.06805 6.47359 5.11001 6.31135 5.11001ZM17.6869 5.11001C17.5247 5.11001 17.3591 5.06804 17.2136 4.98011C16.8224 4.74528 16.7168 4.26863 16.9791 3.91588L17.6114 3.0655C17.8725 2.71476 18.4015 2.61683 18.7948 2.85466C19.186 3.08949 19.2915 3.56614 19.0293 3.91889L18.397 4.76927C18.2326 4.9901 17.9625 5.11001 17.6869 5.11001ZM12.0008 23C11.5297 23 11.1474 22.6562 11.1474 22.2326V21.2093C11.1474 20.7856 11.5297 20.4419 12.0008 20.4419C12.472 20.4419 12.8542 20.7856 12.8542 21.2093V22.2326C12.8542 22.6562 12.472 23 12.0008 23ZM18.3215 21.2753C18.0459 21.2753 17.7758 21.1553 17.6114 20.9345L16.9791 20.0841C16.7169 19.7314 16.8224 19.2547 17.2136 19.0199C17.6058 18.7821 18.1359 18.88 18.397 19.2307L19.0293 20.0811C19.2916 20.4339 19.186 20.9105 18.7948 21.1453C18.6493 21.2333 18.4837 21.2753 18.3215 21.2753ZM5.67796 21.2753C5.51572 21.2753 5.35126 21.2333 5.20569 21.1463C4.81342 20.9105 4.70786 20.4339 4.96899 20.0821L5.60017 19.2317C5.86131 18.879 6.39026 18.7841 6.78362 19.0189C7.17589 19.2547 7.28145 19.7314 7.02032 20.0831L6.38914 20.9335C6.22468 21.1553 5.95354 21.2753 5.67796 21.2753Z",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M12.1414 14.6391C11.9399 14.6391 11.7472 14.559 11.605 14.4168L10.1185 12.9303L8.63195 14.4168C8.33563 14.7131 7.8556 14.7131 7.55928 14.4168C7.26296 14.1205 7.26296 13.6405 7.55928 13.3441L9.58214 11.3213C9.87846 11.0249 10.3585 11.0249 10.6548 11.3213L12.1414 12.8078L14.4425 10.5441L14.6979 10.2929C14.4826 10.2005 14.3509 10.1836 14.0827 10.1549L13.7044 10.1134C13.2876 10.0679 12.9873 9.69359 13.0327 9.27776C13.0772 8.85995 13.4535 8.54289 13.8684 8.60611L14.1943 8.64167C16.6133 8.90045 16.8839 9.13652 17.4568 11.4498L17.5496 11.8261C17.6494 12.233 17.4005 12.6439 16.9945 12.7447C16.9333 12.7595 16.872 12.7664 16.8118 12.7664C16.471 12.7664 16.1609 12.5353 16.0759 12.1896L15.9959 11.8646C15.9265 11.5838 15.9328 11.5337 15.8065 11.3213L15.5764 11.5489L12.6777 14.4168C12.5355 14.559 12.3429 14.6391 12.1414 14.6391Z",
+    fill: fill
+  }));
+};
+
+const Execute = _ref => {
+  let {
+    width = '24',
+    height = '24',
+    fill = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M1.7579 23C1.61208 23 1.46954 22.9567 1.3483 22.8755C1.22706 22.7944 1.13257 22.6792 1.07677 22.5443C1.02097 22.4094 1.00637 22.261 1.03481 22.1179C1.06325 21.9747 1.13346 21.8432 1.23655 21.74L4.08812 18.8863C4.2272 18.7518 4.41347 18.6774 4.60682 18.6791C4.80016 18.6808 4.98512 18.7584 5.12184 18.8953C5.25856 19.0321 5.33611 19.2173 5.33779 19.4108C5.33947 19.6043 5.26515 19.7908 5.13082 19.93L2.27925 22.7837C2.21089 22.8524 2.12963 22.9069 2.04016 22.944C1.95068 22.9811 1.85476 23.0001 1.7579 23ZM5.14999 23C5.00417 23 4.86163 22.9567 4.74039 22.8755C4.61915 22.7944 4.52466 22.6792 4.46886 22.5443C4.41306 22.4094 4.39846 22.261 4.4269 22.1179C4.45534 21.9747 4.52555 21.8432 4.62864 21.74L6.05406 20.3131C6.12208 20.2426 6.20345 20.1864 6.29342 20.1477C6.38339 20.109 6.48015 20.0887 6.57806 20.0878C6.67598 20.0869 6.77308 20.1056 6.8637 20.1427C6.95433 20.1799 7.03666 20.2347 7.1059 20.304C7.17514 20.3733 7.22989 20.4557 7.26697 20.5464C7.30405 20.6371 7.3227 20.7343 7.32185 20.8323C7.321 20.9303 7.30066 21.0272 7.26201 21.1173C7.22337 21.2073 7.16719 21.2888 7.09676 21.3569L5.67134 22.7837C5.60298 22.8524 5.52172 22.9069 5.43225 22.944C5.34277 22.9811 5.24685 23.0001 5.14999 23ZM1.73652 19.5823C1.59085 19.5822 1.44849 19.5388 1.32741 19.4577C1.20633 19.3767 1.11195 19.2615 1.05618 19.1268C1.00041 18.9921 0.98575 18.8439 1.01404 18.7008C1.04234 18.5578 1.11232 18.4263 1.21517 18.3231L2.64058 16.8962C2.70861 16.8257 2.78998 16.7695 2.87994 16.7308C2.96991 16.6921 3.06667 16.6717 3.16459 16.6709C3.2625 16.67 3.3596 16.6887 3.45023 16.7258C3.54085 16.7629 3.62319 16.8178 3.69242 16.8871C3.76166 16.9564 3.81642 17.0388 3.85349 17.1295C3.89057 17.2202 3.90923 17.3174 3.90838 17.4154C3.90753 17.5134 3.88718 17.6103 3.84854 17.7004C3.80989 17.7904 3.75371 17.8719 3.68328 17.94L2.25787 19.3661C2.18948 19.4347 2.10822 19.4892 2.01875 19.5263C1.92928 19.5634 1.83337 19.5824 1.73652 19.5823Z",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M10.4266 5.23524C14.8319 0.824773 21.9759 0.994548 22.2834 1.00267C22.471 1.00859 22.6492 1.08587 22.7819 1.21877C22.9145 1.35167 22.9915 1.53018 22.9972 1.71794C23.0061 2.02058 23.1749 9.1755 18.7682 13.5867C17.4105 15.0207 15.8334 16.2187 14.1025 17.1391L14.1272 19.3786C14.1297 19.6736 14.0737 19.9661 13.9623 20.2392C13.8509 20.5122 13.6864 20.7604 13.4783 20.9693L11.8317 22.6176C11.6934 22.7561 11.5051 22.8339 11.3096 22.8339C11.1451 22.834 10.9853 22.7789 10.8556 22.6775C10.726 22.5761 10.634 22.4342 10.5943 22.2744L9.85024 19.2946C9.75514 19.3524 9.65558 19.4029 9.55236 19.4458C9.28402 19.5571 8.99555 19.6142 8.70506 19.6135C8.41415 19.6143 8.12597 19.5574 7.85723 19.4459C7.58849 19.3344 7.34454 19.1705 7.13954 18.9639L5.05488 16.8772C4.64047 16.4616 4.40771 15.8984 4.40771 15.3112C4.40771 14.9029 4.52022 14.5063 4.72805 14.1628L1.7461 13.4166C1.61952 13.3849 1.50359 13.3202 1.41015 13.229C1.31671 13.1379 1.24911 13.0235 1.21425 12.8976C1.17938 12.7718 1.17851 12.6389 1.2117 12.5126C1.2449 12.3863 1.31098 12.2711 1.40321 12.1787L3.04985 10.5296C3.25704 10.3198 3.50452 10.1542 3.77737 10.0427C4.05023 9.93116 4.34281 9.8761 4.63749 9.8808L6.87751 9.90562C7.79715 8.17292 8.99396 6.59433 10.4266 5.23524ZM11.251 16.8169L7.19967 12.7622L7.20002 12.7612C8.11342 10.3043 9.57336 8.08756 11.4693 6.27899C12.7276 5.01966 14.2699 4.17681 15.7898 3.61295L20.3926 8.2204C19.8291 9.73967 18.9864 11.2819 17.7269 12.543C15.9202 14.441 13.7057 15.9025 11.251 16.8169ZM4.09328 11.5726C4.23607 11.4366 4.42492 11.3597 4.62201 11.3571L6.18016 11.3744C5.98649 11.8342 5.81139 12.3029 5.65553 12.7792C5.64749 12.8087 5.64132 12.8387 5.63702 12.8688L3.36693 12.3005L4.09328 11.5726ZM12.4356 19.9249L11.71 20.6519L11.1422 18.3806C11.1726 18.3763 11.2027 18.37 11.2326 18.3618C11.708 18.2059 12.1758 18.0308 12.6349 17.8372L12.6517 19.3949C12.6525 19.4931 12.6339 19.5906 12.5968 19.6816C12.5597 19.7725 12.5049 19.8552 12.4356 19.9249ZM6.09684 14.7882L6.61819 14.2663L9.74703 17.3983L9.22568 17.9202C9.08542 18.0545 8.8988 18.1295 8.7047 18.1295C8.51059 18.1295 8.32323 18.0545 8.18298 17.9202L6.09684 15.8327C5.95873 15.694 5.88118 15.5062 5.88118 15.3104C5.88118 15.1146 5.95873 14.9268 6.09684 14.7882ZM17.377 3.11417C19.1023 2.66213 20.6468 2.5293 21.5113 2.49152C21.4749 3.35736 21.3436 4.90377 20.8915 6.63167L17.377 3.11417Z",
+    fill: fill
+  }), /*#__PURE__*/React$1.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M12.5702 11.8494C13.0971 12.2829 13.7579 12.5201 14.4399 12.5206C14.8274 12.5213 15.2105 12.4454 15.5687 12.2972C15.9268 12.1489 16.2522 11.9314 16.526 11.657C17.0085 11.1744 17.3088 10.5393 17.376 9.85989C17.4431 9.18049 17.2728 8.49881 16.8941 7.93099C16.5155 7.36317 15.9519 6.94432 15.2993 6.74582C14.6468 6.54731 13.9456 6.58143 13.3154 6.84234C12.6851 7.10326 12.1647 7.57484 11.8429 8.17675C11.521 8.77865 11.4176 9.47365 11.5502 10.1433C11.6828 10.813 12.0433 11.4159 12.5702 11.8494ZM13.5057 8.42927C13.7692 8.21258 14.0996 8.09405 14.4406 8.09389C14.6343 8.09363 14.8261 8.13164 15.005 8.20574C15.1839 8.27985 15.3465 8.38858 15.4833 8.52571C15.7246 8.76701 15.8748 9.08457 15.9083 9.42428C15.9419 9.764 15.8567 10.1048 15.6673 10.3888C15.478 10.6727 15.1962 10.8821 14.8698 10.9813C14.5435 11.0805 14.193 11.0634 13.8778 10.9329C13.5627 10.8024 13.3025 10.5666 13.1417 10.2656C12.9808 9.96461 12.9291 9.61709 12.9955 9.28225C13.0619 8.9474 13.2422 8.64596 13.5057 8.42927Z",
+    fill: fill
+  }));
+};
+
+const MenuRoute = props => {
+  const {
+    tabsPosition,
+    items,
+    color,
+    selecetIndex = 0,
+    onTabClick
+  } = props;
+  const [activeItem, setActiveItem] = useState(items[selecetIndex]?.key || items[0]?.key);
+  useEffect(() => {
+    if (selecetIndex >= 0 && selecetIndex < items.length) {
+      setActiveItem(items[selecetIndex]?.key);
+    }
+  }, [selecetIndex, items]);
+  const handleItemClick = (key, item) => {
+    if (item.disabled) return;
+    if (item.href) {
+      window.open(item.href, item.target || '_self');
+      return;
+    }
+    setActiveItem(key);
+    if (onTabClick) {
+      onTabClick(key);
+    }
+  };
+  return /*#__PURE__*/React$1.createElement(MenuRouteContainer, null, /*#__PURE__*/React$1.createElement(ButtonGroup, {
+    pos: tabsPosition
+  }, items.map(item => /*#__PURE__*/React$1.createElement(Button, {
+    key: item.key,
+    onClick: () => handleItemClick(item.key, item),
+    disabled: item.disabled,
+    className: activeItem === item.key ? 'active' : '',
+    color: color
+  }, item.icon && /*#__PURE__*/React$1.cloneElement(item.icon, {
+    fill: item.disabled ? '#717171' : activeItem === item.key ? color : item.icon.props.fill
+  }), /*#__PURE__*/React$1.isValidElement(item.label) ? item.label : item.label))));
+};
+
+const TableWrapper = styled.div`
+    width: ${props => props.width};
+    height: ${props => props.height};
+    background-color: #fff;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+`;
+styled.table`
+    width: 100%;
+    margin-top: 24px;
+    border-spacing: unset;
+`;
+styled.thead``;
+styled.th`
+    font-weight: 600;
+    width: ${props => props.width};
+    padding-right: 8px;
+    padding-bottom: 12px;
+`;
+styled.tbody``;
+styled.td`
+    font-weight: 600;
+    width: ${props => props.width};
+    padding-right: 8px;
+    padding-bottom: 12px;
+`;
+styled.tr`
+    border-bottom: 1px solid #C8C8C8;
+`;
+const NoInfoFound = styled.div`
+    height: 100%;
+    box-sizing: border-box;
+    color: #212121;
+    position: relative;
+`;
+const Title = styled.h2`
+    font-size: 24px;
+    font-weight: 500;
+    margin: 0;
+`;
+const SubTitle = styled.span`
+    font-size: 14px;
+    color: #8B8989;
+`;
+const NoEventsWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-bottom: 14px;
+`;
+const NoEventsMessage = styled.span`
+    font-size: 18px;
+    font-weight: 400;
+    margin-bottom: 14px;
+    text-align: center;
+    display: block;
+    > strong {
+        font-size: 24px;
+        font-weight: 500;
+    }
+`;
+
+const NoEvents = ({
+  width = '251',
+  height = '250'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 251 250",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("rect", {
+  x: "0.5",
+  width: "250",
+  height: "250",
+  rx: "125",
+  fill: "#F3F7F7"
+}), /*#__PURE__*/React$1.createElement("rect", {
+  x: "79.0715",
+  y: "82.0254",
+  width: "91.9643",
+  height: "31.25",
+  fill: "#B4D1D2"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M201.056 149.717V149.686C201.054 149.691 201.052 149.696 201.052 149.701C201.05 149.696 201.048 149.691 201.047 149.686V149.717C200.635 151.213 199.681 152.283 198.186 152.927C199.681 153.57 200.635 154.64 201.047 156.136V156.167C201.049 156.162 201.051 156.157 201.052 156.152C201.053 156.157 201.055 156.162 201.056 156.167V156.136C201.468 154.64 202.422 153.57 203.917 152.927C202.422 152.283 201.468 151.213 201.056 149.717ZM34.6198 71.7965V71.765C34.618 71.7702 34.6163 71.7755 34.6154 71.7808C34.6136 71.7755 34.6119 71.7702 34.611 71.765V71.7965C34.1985 73.2927 33.2449 74.3625 31.75 75.0059C33.2449 75.6494 34.1985 76.7192 34.611 78.2153V78.2468C34.6127 78.2416 34.6145 78.2363 34.6154 78.2311C34.6171 78.2363 34.6189 78.2416 34.6198 78.2468V78.2153C35.0322 76.7192 35.9859 75.6494 37.4808 75.0059C35.9859 74.3625 35.0322 73.2927 34.6198 71.7965ZM216.389 202.361V202.329C216.387 202.335 216.386 202.34 216.385 202.345C216.383 202.34 216.381 202.335 216.38 202.329V202.361C215.968 203.857 215.014 204.927 213.519 205.57C215.014 206.214 215.968 207.283 216.38 208.78V208.811C216.382 208.806 216.384 208.801 216.385 208.795C216.386 208.801 216.388 208.806 216.389 208.811V208.78C216.801 207.283 217.755 206.214 219.25 205.57C217.755 204.927 216.801 203.857 216.389 202.361ZM182.433 182.494V182.43C182.43 182.442 182.427 182.451 182.424 182.463C182.421 182.451 182.418 182.442 182.415 182.43V182.494C181.59 185.486 179.683 187.626 176.693 188.913C179.683 190.2 181.589 192.34 182.415 195.332V195.396C182.418 195.384 182.421 195.375 182.424 195.363C182.427 195.375 182.43 195.384 182.433 195.396V195.332C183.258 192.34 185.165 190.2 188.155 188.913C185.165 187.626 183.259 185.486 182.433 182.494ZM54.8385 110.651V110.587C54.8359 110.598 54.8324 110.608 54.8298 110.619C54.8271 110.608 54.8236 110.598 54.821 110.587V110.651C53.9961 113.642 52.0887 115.783 49.099 117.07C52.0887 118.357 53.9952 120.497 54.821 123.489V123.552C54.8236 123.541 54.8271 123.531 54.8298 123.52C54.8324 123.531 54.8359 123.541 54.8385 123.552V123.489C55.6635 120.497 57.5708 118.357 60.5605 117.07C57.5708 115.783 55.6643 113.642 54.8385 110.651ZM81.9624 38.3393V38.2754C81.9598 38.2868 81.9563 38.2964 81.9536 38.3078C81.951 38.2964 81.9475 38.2868 81.9449 38.2754V38.3393C81.1199 41.3307 79.2126 43.4712 76.2229 44.7581C79.2126 46.045 81.1191 48.1855 81.9449 51.177V51.2409C81.9475 51.2295 81.951 51.2198 81.9536 51.2085C81.9563 51.2198 81.9598 51.2295 81.9624 51.2409V51.177C82.7873 48.1855 84.6947 46.045 87.6844 44.7581C84.6947 43.4712 82.7882 41.3307 81.9624 38.3393Z",
+  fill: "#F2BB91"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M49.3076 149.106C49.5096 148.924 49.8322 148.924 50.0342 149.106C50.2444 149.295 50.2443 149.609 50.0342 149.798L41.8711 157.145C41.6691 157.327 41.3465 157.327 41.1445 157.145C40.9344 156.956 40.9342 156.642 41.1445 156.453L49.3076 149.106ZM47.1309 154.494C47.8309 153.864 48.9601 153.864 49.6602 154.494C50.3686 155.131 50.3687 156.171 49.6602 156.809C48.9601 157.439 47.8309 157.439 47.1309 156.809C46.4223 156.171 46.4223 155.131 47.1309 154.494ZM48.9346 155.186C48.6384 154.919 48.1526 154.919 47.8564 155.186C47.5689 155.445 47.5688 155.858 47.8564 156.117C48.1526 156.383 48.6384 156.383 48.9346 156.117C49.2221 155.858 49.222 155.445 48.9346 155.186ZM41.5186 149.442C42.2186 148.812 43.3479 148.812 44.0479 149.442C44.7564 150.08 44.7564 151.121 44.0479 151.758C43.3478 152.388 42.2186 152.388 41.5186 151.758C40.81 151.121 40.81 150.08 41.5186 149.442ZM43.3223 150.134C43.0262 149.868 42.5403 149.868 42.2441 150.134C41.9564 150.393 41.9564 150.807 42.2441 151.066C42.5403 151.332 43.0261 151.332 43.3223 151.066C43.61 150.807 43.61 150.393 43.3223 150.134Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.276243"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M136.808 199.106C137.01 198.924 137.332 198.924 137.534 199.106C137.744 199.295 137.744 199.609 137.534 199.798L129.371 207.145C129.169 207.327 128.846 207.327 128.645 207.145C128.434 206.956 128.434 206.642 128.645 206.453L136.808 199.106ZM134.631 204.494C135.331 203.864 136.46 203.864 137.16 204.494C137.869 205.131 137.869 206.171 137.16 206.809C136.46 207.439 135.331 207.439 134.631 206.809C133.922 206.171 133.922 205.131 134.631 204.494ZM136.435 205.186C136.138 204.919 135.653 204.919 135.356 205.186C135.069 205.445 135.069 205.858 135.356 206.117C135.653 206.383 136.138 206.383 136.435 206.117C136.722 205.858 136.722 205.445 136.435 205.186ZM129.019 199.442C129.719 198.812 130.848 198.812 131.548 199.442C132.256 200.08 132.256 201.121 131.548 201.758C130.848 202.388 129.719 202.388 129.019 201.758C128.31 201.121 128.31 200.08 129.019 199.442ZM130.822 200.134C130.526 199.868 130.04 199.868 129.744 200.134C129.456 200.393 129.456 200.807 129.744 201.066C130.04 201.332 130.526 201.332 130.822 201.066C131.11 200.807 131.11 200.393 130.822 200.134Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.276243"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M147.872 44.6279C148.041 44.4584 148.317 44.4584 148.486 44.6279C148.655 44.7974 148.655 45.0717 148.486 45.2412L142.172 51.5557C142.002 51.725 141.728 51.725 141.558 51.5557C141.389 51.3861 141.389 51.1109 141.558 50.9414L147.872 44.6279ZM146.188 49.2578C146.743 48.703 147.642 48.703 148.197 49.2578C148.752 49.8126 148.752 50.7118 148.197 51.2666C147.642 51.8214 146.743 51.8214 146.188 51.2666C145.633 50.7118 145.633 49.8126 146.188 49.2578ZM147.584 49.8711C147.368 49.6553 147.017 49.6553 146.802 49.8711C146.586 50.0868 146.586 50.4376 146.802 50.6533C147.017 50.8691 147.368 50.8691 147.584 50.6533C147.8 50.4376 147.8 50.0868 147.584 49.8711ZM141.847 44.917C142.402 44.3622 143.301 44.3622 143.856 44.917C144.411 45.4718 144.411 46.371 143.856 46.9258C143.301 47.4805 142.402 47.4804 141.847 46.9258C141.293 46.371 141.293 45.4718 141.847 44.917ZM143.242 45.5303C143.026 45.3148 142.676 45.3146 142.461 45.5303C142.245 45.7459 142.245 46.0957 142.461 46.3115C142.676 46.5273 143.026 46.5273 143.242 46.3115C143.458 46.0958 143.458 45.746 143.242 45.5303Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.276243"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M104.824 204.819V204.853C105.322 206.447 106.47 207.587 108.272 208.272C106.47 208.958 105.321 210.098 104.824 211.691V211.725C104.822 211.719 104.82 211.714 104.819 211.708C104.817 211.714 104.815 211.719 104.813 211.725V211.691C104.316 210.098 103.167 208.958 101.366 208.272C103.167 207.587 104.316 206.447 104.813 204.853V204.819C104.815 204.825 104.817 204.831 104.819 204.837C104.82 204.831 104.822 204.825 104.824 204.819Z",
+  fill: "#F2BB91"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M170.333 116.525H81.4886V168.301C81.4886 172.916 85.0486 176.335 89.0397 176.335H162.782C166.773 176.335 170.333 172.916 170.333 168.301V116.525ZM143.996 91.7463V83.7126H107.825V91.7463C107.824 93.3501 106.49 94.65 104.842 94.65C103.194 94.65 101.859 93.3501 101.858 91.7463V83.7126H89.0397C85.0486 83.7126 81.4886 87.1311 81.4886 91.7463V110.714H170.333V91.7463C170.333 87.1311 166.773 83.7126 162.782 83.7126H149.963V91.7463C149.962 93.3501 148.628 94.65 146.98 94.65C145.332 94.65 143.997 93.3501 143.996 91.7463ZM176.3 168.301C176.3 175.766 170.427 182.142 162.782 182.142H89.0397C81.3947 182.142 75.5217 175.766 75.5217 168.301V91.7463C75.5217 84.2812 81.3947 77.9018 89.0397 77.9018H101.858V69.8715C101.858 68.2671 103.193 66.9678 104.842 66.9678C106.49 66.9678 107.825 68.2671 107.825 69.8715V77.9018H143.996V69.8715C143.996 68.2671 145.331 66.9678 146.98 66.9678C148.628 66.9678 149.963 68.2671 149.963 69.8715V77.9018H162.782C170.427 77.9018 176.3 84.2812 176.3 91.7463V168.301Z",
+  fill: "#519595"
+}), /*#__PURE__*/React$1.createElement("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M114.622 129.954C116.552 129.954 118.356 130.941 119.55 132.411L120.021 133.068L120.039 133.093L120.049 133.117C121.121 135.065 121.132 137.505 120.039 139.391L120.032 139.405C118.863 141.349 116.806 142.537 114.622 142.537C112.644 142.537 110.817 141.634 109.607 140.101L109.129 139.405L109.118 139.391L109.122 139.388C108.03 137.502 108.039 135.064 109.111 133.117L109.122 133.093L109.139 133.068C110.298 131.237 112.341 129.954 114.622 129.954ZM114.622 139.841C116.534 139.841 118.221 138.278 118.221 136.245C118.221 134.315 116.552 132.65 114.622 132.65C112.59 132.65 111.023 134.334 111.023 136.245C111.023 138.26 112.608 139.841 114.622 139.841Z",
+  fill: "#519595"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M138.966 130.358C139.839 129.795 141.08 129.89 141.831 130.639C142.581 131.389 142.675 132.628 142.112 133.5L141.831 133.848L112.137 163.503C111.28 164.359 109.782 164.359 108.925 163.503C108.067 162.646 108.067 161.151 108.925 160.294L138.618 130.639L138.966 130.358Z",
+  fill: "#519595"
+}), /*#__PURE__*/React$1.createElement("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M141.145 153.978C139.951 152.508 138.147 151.521 136.217 151.521C133.936 151.521 131.893 152.804 130.734 154.635L130.717 154.66L130.706 154.684C129.635 156.631 129.622 159.073 130.713 160.958L130.724 160.972C131.896 162.923 133.957 164.104 136.217 164.104C138.402 164.104 140.458 162.916 141.627 160.972L141.634 160.958C142.727 159.072 142.717 156.632 141.644 154.684L141.634 154.66L141.616 154.635L141.145 153.978ZM136.217 161.408C138.129 161.408 139.817 159.845 139.817 157.813C139.817 155.882 138.147 154.217 136.217 154.217C134.185 154.217 132.618 155.901 132.618 157.813C132.618 159.827 134.203 161.408 136.217 161.408Z",
+  fill: "#519595"
+}), /*#__PURE__*/React$1.createElement("circle", {
+  cx: "171.036",
+  cy: "176.668",
+  r: "22.3214",
+  fill: "#F3F7F7",
+  stroke: "#519595",
+  "stroke-width": "5.35714"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M185.4 175.847C185.735 176.182 185.924 176.637 185.924 177.111C185.924 177.585 185.736 178.04 185.4 178.375C185.065 178.711 184.61 178.899 184.136 178.899L173.279 178.897L173.281 189.754C173.273 190.223 173.081 190.67 172.746 190.999C172.412 191.327 171.962 191.511 171.493 191.511C171.024 191.511 170.574 191.327 170.239 190.998C169.905 190.67 169.713 190.223 169.704 189.754L169.703 178.896L158.845 178.894C158.608 178.898 158.372 178.855 158.151 178.767C157.931 178.679 157.73 178.548 157.56 178.381C157.391 178.215 157.256 178.016 157.164 177.797C157.073 177.578 157.025 177.343 157.025 177.106C157.025 176.868 157.072 176.633 157.164 176.414C157.256 176.195 157.39 175.997 157.56 175.83C157.729 175.664 157.93 175.533 158.15 175.445C158.371 175.357 158.607 175.314 158.844 175.318L169.702 175.32L169.7 164.463C169.708 163.994 169.9 163.547 170.234 163.218C170.569 162.89 171.019 162.705 171.488 162.706C171.957 162.706 172.407 162.89 172.741 163.219C173.076 163.547 173.268 163.994 173.276 164.463L173.278 175.321L184.136 175.323C184.61 175.323 185.065 175.511 185.4 175.847Z",
+  fill: "#519595"
+}));
+
+const Table = props => {
+  const {
+    width = '100%',
+    height = 'auto',
+    tableTitle = 'All Events',
+    data = [],
+    onButtonClick = () => {},
+    buttonColor = '#066768',
+    buttonHoverColor = '#388586'
+  } = props;
+  return /*#__PURE__*/React$1.createElement(TableWrapper, {
+    width: width,
+    height: height
+  }, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(Title, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, "No Events"), /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven\u2019t created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let\u2019s get started and create your first one!"), /*#__PURE__*/React$1.createElement(Button$1, {
+    height: "45px",
+    leftIcon: "Plus",
+    text: "New Event",
+    borderRadius: "12px",
+    backgroundColor: buttonColor,
+    hoverBackgroundColor: buttonHoverColor,
+    onClick: onButtonClick
+  })) : /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, data.length, " Events")));
+};
+
+export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, Heatmap, IconButton, Input, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, ModalWithOverlay, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, Table, ToggleSwitch, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
 //# sourceMappingURL=index.esm.js.map