sag_components 2.0.0-beta96 → 2.0.0-beta97

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;
@@ -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;
@@ -87,6 +97,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 +160,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 +292,150 @@ 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 Button$1 = props => {
+  const {
+    text = "",
+    type = "primary",
+    size = "small",
+    height = "",
+    width = "",
+    disabled = false,
+    textColor = "",
+    backgroundColor = "",
+    borderColor = "",
+    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
+  };
+  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"
+  }, commonProps)) : /*#__PURE__*/React$1.createElement(ButtonItem, _extends$1({
+    className: clicked ? "ButtonItem-clicked" : "ButtonItem",
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false)
+  }, 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 +1591,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) => {
@@ -2495,7 +2422,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 +2629,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 +2803,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 +2879,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 +3007,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 +3031,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 +3039,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 +3047,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 +3055,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 +3063,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 +3071,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 +3079,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 +3087,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 +3095,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 +3103,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 +3111,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 +3142,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 +3221,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 +3299,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 +3372,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 +3427,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 +3555,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 +3794,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 +3806,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 +8427,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 +8450,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 +8482,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 +8501,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 +8512,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 +8560,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 +8716,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 +8739,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 +8767,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 +8894,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 +8917,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 +8948,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 +8968,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 +8979,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 +9026,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 +9233,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 +9256,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 +9286,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 +9373,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 +9419,7 @@ const DropdownNew = _ref => {
     errorMessage: errorMessage,
     selectedValue: selectedValue,
     xIconShow: xIconShow,
-    onChange: onChange,
+    onChange: handleOnChange,
     showLabelOnTop: showLabelOnTop,
     orderBy: orderBy,
     elementType: elementType
@@ -9521,54 +9438,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 +9480,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 +9492,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 +9522,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 +9539,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 +9559,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 +9568,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 +9919,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 +9929,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 +9938,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 +9954,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 +10014,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 +10051,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 +10068,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 +10088,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 +10097,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 +10352,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 +10362,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 +10371,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 +10387,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 +10440,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 +10477,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 +10495,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 +10515,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 +10524,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 +10809,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 +10819,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 +10828,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 +10844,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 +11490,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 +11518,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 +11558,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 +11896,7 @@ const Loader$1 = styled.span`
   animation: ${rotation$1} 1.5s infinite ease;
   transform: translateZ(0);
 `;
-const TableWrapper$1 = styled.div`
+const TableWrapper$2 = styled.div`
   position: relative;
   width: ${props => `${props.width}`};
   height: ${props => `${props.height}`};
@@ -12031,7 +11906,7 @@ const TableWrapper$1 = styled.div`
   overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden'};
   ${scrollableStyles$9}
 `;
-const Table$1 = styled.table`
+const Table$2 = styled.table`
   font-family: "Poppins", sans-serif;
   width: ${props => `${props.tableWidthSize}%`};
   table-layout: fixed;
@@ -12336,13 +12211,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$2, {
     width: width,
     height: height,
     className: className,
     maxColumnsNumber: getMaxColnumber(),
     columnsNumber: columnsNumber
-  }, /*#__PURE__*/React$1.createElement(Table$1, {
+  }, /*#__PURE__*/React$1.createElement(Table$2, {
     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 +12495,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 +12558,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 +12754,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 +12769,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 +12886,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 +12964,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 +12998,7 @@ const scrollableStyles$8 = `
     border-radius: 5px;
   }
 `;
-const ModalWrapper = styled.dialog`
+const ModalWrapper$1 = styled.dialog`
   width: 100vw;
   height: 100vh;
   padding: 20px;
@@ -13139,23 +13014,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 +13060,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 +23282,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 +23575,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 +23589,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 +23743,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 +23779,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 +23798,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 +23839,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 +23977,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 +24001,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 +24029,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 +24098,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 +24121,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 +24152,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 +24171,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 +24182,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 +24225,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 +24443,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 +24466,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 +24496,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),
@@ -26776,7 +26651,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 +26919,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
@@ -27284,7 +27159,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;
@@ -27525,7 +27400,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",
@@ -29023,7 +28898,7 @@ const DoubleBarSingleLine = props => {
     className: "Controls"
   }, title && title.trim() !== '' && /*#__PURE__*/React$1.createElement(Title$8, 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 +28937,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,
@@ -29177,7 +29052,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 +29132,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)));
@@ -33581,7 +33456,7 @@ const TitleDiv = styled.div`
     font-size: 10px;
   }
 `;
-const TableWrapper = styled.div`
+const TableWrapper$1 = styled.div`
   overflow-x: auto;
   margin-bottom: 22px;
   &::-webkit-scrollbar {
@@ -33598,7 +33473,7 @@ const TableWrapper = styled.div`
     border-radius: 5px;
   }
 `;
-const Table = styled.table`
+const Table$1 = styled.table`
   width: 100%;
   border-collapse: collapse;
   overflow: auto;
@@ -33828,7 +33703,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$1, null, /*#__PURE__*/React$1.createElement(Table$1, null, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement("tr", null, section.table.map((headline, i) => /*#__PURE__*/React$1.createElement(Th, {
       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 +33771,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;
@@ -34106,7 +33981,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, {
     $titleColor: titleColor
   }, /*#__PURE__*/React$1.cloneElement(icon, {
     fill: iconColor
@@ -34404,5 +34279,1373 @@ 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 = styled.div`
+    width: ${props => props.width};
+    height: ${props => props.height};
+    padding: 20px;
+    background-color: #fff;
+    box-sizing: border-box;
+`;
+const Table = 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, {
+    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, 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))));
+};
+
+export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, Heatmap, IconButton, Input, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, ModalWithOverlay, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, ToggleSwitch, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
 //# sourceMappingURL=index.esm.js.map