impact-ui 0.1.41 → 0.1.45

package/dist/index.js

@@ -128,6 +128,8 @@
 
 	var ChevronImage = "data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201.5L5%205.5L9%201.5%22%20stroke%3D%22%23394960%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E";
 
+	var RightChevronImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAYAAACzkJeoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADFSURBVHgBbY89DoJAEIXfItHWAxiD0RgTm7Xzp8EOrbyBS2frDfAG3EBaSxu1QzsTCug1sdAD0GIkOGsgQXGKfZv5Znfegz4T1b4hNPwpJYpgMwZ/OBW8AJMEFmlI6o8Mc56Hpcc1CGstvlUU6AmwqLc57pfg9IHykAPNLt/EMTrIDbDfPYOJuJFotGasZk3pmsytU7A6H5yjmoFnBJeu0vGSgC37TGakKG76wiTgZL+pBCwwVF9Az9s7QSFnpYyGt/sGst55EkiF00BPfQAAAABJRU5ErkJggg==";
+
 	var DisabledChevron = "data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201.5L5%205.5L9%201.5%22%20stroke%3D%22%23C7C7C7%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E";
 
 	var SearchIcon = "data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.6875%207.75H8.19375L8.01875%207.58125C8.63125%206.86875%209%205.94375%209%204.9375C9%202.69375%207.18125%200.875%204.9375%200.875C2.69375%200.875%200.875%202.69375%200.875%204.9375C0.875%207.18125%202.69375%209%204.9375%209C5.94375%209%206.86875%208.63125%207.58125%208.01875L7.75%208.19375V8.6875L10.875%2011.8062L11.8062%2010.875L8.6875%207.75ZM4.9375%207.75C3.38125%207.75%202.125%206.49375%202.125%204.9375C2.125%203.38125%203.38125%202.125%204.9375%202.125C6.49375%202.125%207.75%203.38125%207.75%204.9375C7.75%206.49375%206.49375%207.75%204.9375%207.75Z%22%20fill%3D%22%23AFAFAF%22%2F%3E%3C%2Fsvg%3E";
@@ -191,6 +193,8 @@
 	var FocusBackgroundColor = "#E5EDF7";
 	var PanelFooterBg = "#EEF0F7";
 	var AGInputColor = "#c4c4c4";
+	var AgCellRendererBackground = "#F3F9FF";
+	var SelectOptionFocusBackground = "#eef5fd";
 
 	var NORMAL_BUTTON_HEIGHT = "37px";
 	var SMALL_BUTTON_HEIGHT = "26px";
@@ -1273,7 +1277,7 @@
 
 	function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Button = function Button(_ref) {
+	var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var children = _ref.children,
 	    variant = _ref.variant,
 	    Icon = _ref.icon,
@@ -1284,16 +1288,21 @@
 	    variant: variant,
 	    size: size,
 	    icon: Icon,
-	    isChildren: children
+	    isChildren: children,
+	    ref: ref
 	  }, props), {}, {
 	    children: [Icon && /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer, {
 	      size: size,
-	      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
+	      className: "button-icon-container",
+	      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+	        className: "button-icon"
+	      })
 	    }), children && /*#__PURE__*/jsxRuntime.jsx(StyledIconTextContainer, {
+	      className: "button-children-container",
 	      children: children
 	    })]
 	  }));
-	};
+	});
 
 	function _templateObject22() {
 	  var data = _taggedTemplateLiteral([""]);
@@ -1490,7 +1499,7 @@
 
 	function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Alerts = function Alerts(_ref) {
+	var Alerts = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var variant = _ref.variant,
 	    message = _ref.message,
 	    description = _ref.description,
@@ -1498,34 +1507,46 @@
 	    onClose = _ref.onClose,
 	    onAction = _ref.onAction,
 	    actionName = _ref.actionName,
-	    props = _objectWithoutProperties(_ref, ["variant", "message", "description", "url", "onClose", "onAction", "actionName"]);
-	  return /*#__PURE__*/jsxRuntime.jsx(StyledAlertContainer, {
-	    children: /*#__PURE__*/jsxRuntime.jsx(StyledNotificationContainer, {
-	      children: /*#__PURE__*/jsxRuntime.jsxs(StyledNotification, _objectSpread$1(_objectSpread$1({
-	        variant: variant
-	      }, props), {}, {
-	        children: [/*#__PURE__*/jsxRuntime.jsxs(StyledIconMessageContainer, {
-	          children: [/*#__PURE__*/jsxRuntime.jsxs(StyledIconMessageTopContainer, {
-	            children: [/*#__PURE__*/jsxRuntime.jsx(StyledAlertIcon, {}), /*#__PURE__*/jsxRuntime.jsx(StyledAlertMessage, {
-	              children: message
-	            })]
-	          }), /*#__PURE__*/jsxRuntime.jsx(StyledDescriptionMainContainer, {
-	            children: /*#__PURE__*/jsxRuntime.jsx(StyledAlertDescription, {
-	              children: description
-	            })
-	          })]
-	        }), /*#__PURE__*/jsxRuntime.jsxs(StyledActionMainContainer, {
-	          children: [/*#__PURE__*/jsxRuntime.jsx(StyledActionUrl, {
-	            onClick: onAction,
-	            children: actionName
-	          }), /*#__PURE__*/jsxRuntime.jsx(StyledInfoCloseIcon, {
-	            onClick: onClose
+	    className = _ref.className,
+	    props = _objectWithoutProperties(_ref, ["variant", "message", "description", "url", "onClose", "onAction", "actionName", "className"]);
+	  return /*#__PURE__*/jsxRuntime.jsx(StyledNotificationContainer, _objectSpread$1(_objectSpread$1({
+	    ref: ref,
+	    className: "".concat(className ? className : "", " alert-container")
+	  }, props), {}, {
+	    children: /*#__PURE__*/jsxRuntime.jsxs(StyledNotification, {
+	      variant: variant,
+	      className: "alert",
+	      children: [/*#__PURE__*/jsxRuntime.jsxs(StyledIconMessageContainer, {
+	        className: "alert-icon-container",
+	        children: [/*#__PURE__*/jsxRuntime.jsxs(StyledIconMessageTopContainer, {
+	          className: "alert-message-container",
+	          children: [/*#__PURE__*/jsxRuntime.jsx(StyledAlertIcon, {
+	            className: "alert-icon"
+	          }), /*#__PURE__*/jsxRuntime.jsx(StyledAlertMessage, {
+	            className: "alert-message",
+	            children: message
 	          })]
+	        }), /*#__PURE__*/jsxRuntime.jsx(StyledDescriptionMainContainer, {
+	          className: "alert-description-container",
+	          children: /*#__PURE__*/jsxRuntime.jsx(StyledAlertDescription, {
+	            className: "alert-description-container",
+	            children: description
+	          })
 	        })]
-	      }))
+	      }), /*#__PURE__*/jsxRuntime.jsxs(StyledActionMainContainer, {
+	        className: "alert-action-container",
+	        children: [/*#__PURE__*/jsxRuntime.jsx(StyledActionUrl, {
+	          onClick: onAction,
+	          className: "alert-action-button",
+	          children: actionName
+	        }), /*#__PURE__*/jsxRuntime.jsx(StyledInfoCloseIcon, {
+	          onClick: onClose,
+	          className: "alert-close-icon"
+	        })]
+	      })]
 	    })
-	  });
-	};
+	  }));
+	});
 
 	function _templateObject11$2() {
 	  var data = _taggedTemplateLiteral(["\n          width: 24px;\n          height: 24px;\n        "]);
@@ -1633,7 +1654,7 @@
 
 	function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Avatar = function Avatar(_ref) {
+	var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var image = _ref.image,
 	    _ref$size = _ref.size,
 	    size = _ref$size === void 0 ? "big" : _ref$size,
@@ -1641,19 +1662,22 @@
 	    props = _objectWithoutProperties(_ref, ["image", "size", "initials"]);
 	  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
 	    children: image ? /*#__PURE__*/jsxRuntime.jsx(StyledAvatar, _objectSpread$2(_objectSpread$2({
-	      size: size
+	      size: size,
+	      ref: ref,
+	      className: ""
 	    }, props), {}, {
 	      children: /*#__PURE__*/jsxRuntime.jsx(StyledAvatarImage, {
 	        src: image,
 	        size: size
 	      })
 	    })) : /*#__PURE__*/jsxRuntime.jsx(StyledAvatar, _objectSpread$2(_objectSpread$2({
-	      size: size
+	      size: size,
+	      ref: ref
 	    }, props), {}, {
 	      children: initials
 	    }))
 	  });
-	};
+	});
 
 	function _templateObject3$3() {
 	  var data = _taggedTemplateLiteral(["\n      color: ", ";\n      font-weight: 400;\n      cursor: default;\n    "]);
@@ -1681,9 +1705,12 @@
 	  return props.active && styled.css(_templateObject3$3(), CheckBoxBorder);
 	});
 
-	var Breadcrumbs = function Breadcrumbs(_ref) {
-	  var paths = _ref.paths;
+	var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+	  var paths = _ref.paths,
+	    className = _ref.className;
 	  return /*#__PURE__*/jsxRuntime.jsx(StyledBreadcrumbsContainer, {
+	    className: "".concat(className ? className : "", " breadcrumbs-container"),
+	    ref: ref,
 	    children: paths.map(function (_ref2, index) {
 	      var to = _ref2.to,
 	        label = _ref2.label,
@@ -1692,11 +1719,12 @@
 	        to: to,
 	        active: index === paths.length - 1 ? 1 : undefined,
 	        onClick: onClick ? onClick : undefined,
+	        className: "breadcrumb-link breadcrumb-link-".concat(index),
 	        children: label
 	      }, index);
 	    })
 	  });
-	};
+	});
 
 	function _templateObject5$3() {
 	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  &:hover ", " {\n    display: block;\n  }\n"]);
@@ -1743,16 +1771,22 @@
 
 	function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Checkbox = function Checkbox(_ref) {
+	var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var label = _ref.label,
 	    props = _objectWithoutProperties(_ref, ["label"]);
+	  console.log(ref);
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledCheckBoxContainer, {
-	    children: [!props.disabled && /*#__PURE__*/jsxRuntime.jsx(StyledHoverBg, {}), /*#__PURE__*/jsxRuntime.jsx(StyledCheckbox, _objectSpread$3({}, props)), /*#__PURE__*/jsxRuntime.jsx(StyledCheckboxLabel, {
+	    className: "checkbox-container",
+	    ref: ref === null || ref === void 0 ? void 0 : ref.containerRef,
+	    children: [!props.disabled && /*#__PURE__*/jsxRuntime.jsx(StyledHoverBg, {}), /*#__PURE__*/jsxRuntime.jsx(StyledCheckbox, _objectSpread$3({
+	      ref: ref === null || ref === void 0 ? void 0 : ref.checkboxRef
+	    }, props)), /*#__PURE__*/jsxRuntime.jsx(StyledCheckboxLabel, {
 	      htmlFor: props.id,
+	      className: "checkbox-label",
 	      children: label
 	    })]
 	  });
-	};
+	});
 
 	function _templateObject10$3() {
 	  var data = _taggedTemplateLiteral([""]);
@@ -1783,7 +1817,7 @@
 	  return data;
 	}
 	function _templateObject6$3() {
-	  var data = _taggedTemplateLiteral(["\n          &:focus {\n            border: 1px solid ", ";\n          }\n        "]);
+	  var data = _taggedTemplateLiteral(["\n          &:focus {\n            border: 1px solid\n              ", ";\n          }\n        "]);
 	  _templateObject6$3 = function _templateObject6() {
 	    return data;
 	  };
@@ -1804,7 +1838,7 @@
 	  return data;
 	}
 	function _templateObject3$5() {
-	  var data = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 0px 16px;\n  box-sizing: border-box;\n  height: 37px;\n  font-size: 14px;\n  color: ", ";\n\n  //Low Resolution CSS starts\n\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    height: 28px;\n    font-size: 12px;\n  }\n\n  &:focus {\n    border: 1px solid ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n  &:hover {\n    border: 1px solid ", ";\n  }\n  &:disabled {\n    background: ", ";\n    border: none;\n    cursor: no-drop;\n    pointer-events: none;\n  }\n\n  ", "\n"]);
+	  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 4px;\n  padding: 0px 16px;\n  box-sizing: border-box;\n  height: 37px;\n  font-size: 14px;\n  color: ", ";\n  background-color: ", ";\n\n  //Low Resolution CSS starts\n\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    height: 28px;\n    font-size: 12px;\n  }\n\n  &:focus {\n    border: 1px solid\n      ", ";\n    box-shadow: ", ";\n    background-color: ", ";\n  }\n  &:hover {\n    border: 1px solid\n      ", ";\n  }\n  &:disabled {\n    background: ", ";\n    border: none;\n    cursor: no-drop;\n    pointer-events: none;\n  }\n\n  ", "\n"]);
 	  _templateObject3$5 = function _templateObject3() {
 	    return data;
 	  };
@@ -1826,14 +1860,26 @@
 	}
 	var StyledInputBoxContainer = styled__default.div(_templateObject$5());
 	var StyledInputLabelContainer = styled__default.label(_templateObject2$5(), LabelColor);
-	var StyledInputBox = styled__default.input(_templateObject3$5(), DefaultColorButton, BodyFontColor, PrimaryBlueColor, FocusBackgroundColor, PrimaryBlueColor, DisabledTextareaBg, function (props) {
+	var StyledInputBox = styled__default.input(_templateObject3$5(), function (props) {
+	  return props.isAgGridCellRenderer ? "transparent" : DefaultColorButton;
+	}, BodyFontColor, function (props) {
+	  return props.isAgGridCellRenderer ? AgCellRendererBackground : WhiteColor;
+	}, function (props) {
+	  return props.isAgGridCellRenderer ? "transparent" : PrimaryBlueColor;
+	}, function (props) {
+	  return props.isAgGridCellRenderer ? "unset" : "0 0 0 3px FocusBackgroundColor";
+	}, WhiteColor, function (props) {
+	  return props.isAgGridCellRenderer ? "transparent" : PrimaryBlueColor;
+	}, DisabledTextareaBg, function (props) {
 	  switch (props.status) {
 	    case "success":
 	      return styled.css(_templateObject4$4(), AlertGreenSuccessStroke, AlertGreenSuccessStroke);
 	    case "error":
 	      return styled.css(_templateObject5$4(), AlertRedErrorStroke, AlertRedErrorStroke, AlertRedErrorStroke);
 	    default:
-	      return styled.css(_templateObject6$3(), AlertBlueInfoStroke);
+	      return styled.css(_templateObject6$3(), function (props) {
+	        return props.isAgGridCellRenderer ? "transparent" : AlertBlueInfoStroke;
+	      });
 	  }
 	});
 	var StyledHelperText = styled__default.span(_templateObject7$3(), LabelColor, function (props) {
@@ -1853,16 +1899,22 @@
 	  var label = _ref.label,
 	    status = _ref.status,
 	    helperText = _ref.helperText,
-	    props = _objectWithoutProperties(_ref, ["label", "status", "helperText"]);
+	    isAgGridCellRenderer = _ref.isAgGridCellRenderer,
+	    props = _objectWithoutProperties(_ref, ["label", "status", "helperText", "isAgGridCellRenderer"]);
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledInputBoxContainer, {
+	    className: "input-container",
+	    ref: ref === null || ref === void 0 ? void 0 : ref.containerRef,
 	    children: [label && /*#__PURE__*/jsxRuntime.jsx(StyledInputLabelContainer, {
+	      className: "input-label",
 	      children: label
 	    }), /*#__PURE__*/jsxRuntime.jsx(StyledInputBox, _objectSpread$4({
-	      ref: ref ? ref : null,
-	      status: status
-	    }, props)), helperText && /*#__PURE__*/jsxRuntime.jsxs(StyledHelperText, {
+	      ref: ref === null || ref === void 0 ? void 0 : ref.inputRef,
+	      status: status,
+	      isAgGridCellRenderer: isAgGridCellRenderer
+	    }, props)), helperText && /*#__PURE__*/jsxRuntime.jsx(StyledHelperText, {
 	      status: status,
-	      children: [" ", helperText]
+	      className: "input-helper-text",
+	      children: helperText
 	    })]
 	  });
 	});
@@ -1910,18 +1962,23 @@
 
 	function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Radio = function Radio(_ref) {
+	var Radio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var label = _ref.label,
 	    props = _objectWithoutProperties(_ref, ["label"]);
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledRadioButtonContainer, {
+	    className: "radio-container",
+	    ref: ref === null || ref === void 0 ? void 0 : ref.containerRef,
 	    children: [!props.disabled && /*#__PURE__*/jsxRuntime.jsx(StyledHoverBg$1, {}), /*#__PURE__*/jsxRuntime.jsx(StyledRadioButton, _objectSpread$5({
-	      type: "radio"
+	      type: "radio",
+	      className: "radio",
+	      ref: ref === null || ref === void 0 ? void 0 : ref.radioRef
 	    }, props)), /*#__PURE__*/jsxRuntime.jsx(StyledRadioButtonLabel, {
+	      className: "radio-label",
 	      htmlFor: props.id,
 	      children: label
 	    })]
 	  });
-	};
+	});
 
 	var arrayWithHoles = createCommonjsModule(function (module) {
 	function _arrayWithHoles(arr) {
@@ -2129,10 +2186,13 @@
 	    value = _ref.value,
 	    onChange = _ref.onChange,
 	    vertical = _ref.vertical,
-	    children = _ref.children;
+	    children = _ref.children,
+	    className = _ref.className;
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledTabMainContainer, {
 	    vertical: vertical,
+	    className: "".concat(className, " tab-main-container"),
 	    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledTabContainer, {
+	      className: "tab-container",
 	      children: [tabs.map(function (tab, index) {
 	        return /*#__PURE__*/jsxRuntime.jsx(StyledTabList, {
 	          active: value === tab.value,
@@ -2141,12 +2201,15 @@
 	          },
 	          vertical: vertical,
 	          disabled: tab.disabled,
+	          className: "tab-item",
 	          children: tab.label
 	        }, index);
 	      }), children]
 	    }), /*#__PURE__*/jsxRuntime.jsx(StyledTabContentContainer, {
+	      className: "tab-content-container",
 	      children: tabs.map(function (tab) {
 	        return /*#__PURE__*/jsxRuntime.jsx(StyledTabPanelContainer, {
+	          className: "tab-panel-container",
 	          active: tab.value === value,
 	          children: tab.element
 	        });
@@ -2203,14 +2266,14 @@
 	  return data;
 	}
 	function _templateObject3$8() {
-	  var data = _taggedTemplateLiteral(["\n  width: max-content;\n"]);
+	  var data = _taggedTemplateLiteral([""]);
 	  _templateObject3$8 = function _templateObject3() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject2$8() {
-	  var data = _taggedTemplateLiteral(["\n  min-height: 70px;\n  padding: 12px 16px;\n  margin-top: 4px;\n  resize: none;\n  min-width: 800px;\n  box-sizing: border-box;\n  font-size: 14px;\n  line-height: 21px;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  //Low Resolution CSS starts\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n  &:hover {\n    border: 1px solid ", ";\n  }\n  &:focus {\n    box-shadow: 0 0 0 3px ", ";\n    border: 1px solid ", ";\n  }\n  &:disabled {\n    background: ", ";\n    border: 1px solid ", ";\n  }\n"]);
+	  var data = _taggedTemplateLiteral(["\n  min-height: 70px;\n  padding: 12px 16px;\n  margin-top: 4px;\n  resize: none;\n  width: 100%;\n  box-sizing: border-box;\n  font-size: 14px;\n  line-height: 21px;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  //Low Resolution CSS starts\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n  &:hover {\n    border: 1px solid ", ";\n  }\n  &:focus {\n    box-shadow: 0 0 0 3px ", ";\n    border: 1px solid ", ";\n  }\n  &:disabled {\n    background: ", ";\n    border: 1px solid ", ";\n  }\n"]);
 	  _templateObject2$8 = function _templateObject2() {
 	    return data;
 	  };
@@ -2230,25 +2293,30 @@
 
 	function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Textarea = function Textarea(_ref) {
+	var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var label = _ref.label,
 	    maxLength = _ref.maxLength,
 	    value = _ref.value,
 	    disabled = _ref.disabled,
 	    props = _objectWithoutProperties(_ref, ["label", "maxLength", "value", "disabled"]);
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledTextAreaContainer, {
+	    ref: ref === null || ref === void 0 ? void 0 : ref.containerRef,
+	    className: "textarea-container",
 	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledLabelText, {
+	      className: "textarea-label",
 	      children: label
 	    }), /*#__PURE__*/jsxRuntime.jsx(StyledTextArea, _objectSpread$7(_objectSpread$7({
 	      value: value
 	    }, props), {}, {
-	      maxLength: maxLength,
-	      disabled: disabled
-	    })), !disabled && /*#__PURE__*/jsxRuntime.jsxs(StyledRemainingText, {
+	      maxLength: maxLength ? maxLength : undefined,
+	      disabled: disabled,
+	      ref: ref === null || ref === void 0 ? void 0 : ref.textareaRef
+	    })), !disabled && maxLength && /*#__PURE__*/jsxRuntime.jsxs(StyledRemainingText, {
+	      className: "textarea-remaining-characters-text",
 	      children: [maxLength - value.length, " characters left"]
 	    })]
 	  });
-	};
+	});
 
 	var arrayWithoutHoles = createCommonjsModule(function (module) {
 	function _arrayWithoutHoles(arr) {
@@ -2290,43 +2358,122 @@
 
 	var _toConsumableArray = unwrapExports(toConsumableArray);
 
-	function _templateObject18$1() {
+	function _templateObject8$5() {
+	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 12px;\n"]);
+	  _templateObject8$5 = function _templateObject8() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject7$5() {
+	  var data = _taggedTemplateLiteral(["\n      background: url(", ") no-repeat;\n      pointer-events: none;\n    "]);
+	  _templateObject7$5 = function _templateObject7() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject6$5() {
+	  var data = _taggedTemplateLiteral(["\n  background: url(", ") no-repeat;\n  width: 10px;\n  height: 10px;\n  background-size: 10px;\n  display: inline-block;\n  margin-left: 8px;\n\n  //Low Resolution CSS starts\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    background-size: 8px;\n  }\n  ", "\n"]);
+	  _templateObject6$5 = function _templateObject6() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject5$7() {
+	  var data = _taggedTemplateLiteral(["\n  font-size: 12px;\n  //Low Resolution CSS starts\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    font-size: 10px;\n  }\n"]);
+	  _templateObject5$7 = function _templateObject5() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject4$8() {
+	  var data = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      &:hover {\n        background: ", " !important;\n        cursor: default !important;\n      }\n    "]);
+	  _templateObject4$8 = function _templateObject4() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject3$9() {
+	  var data = _taggedTemplateLiteral(["\n          height: 26px;\n          padding: 0px 8px;\n          //Low Resolution CSS starts\n          @media screen and (max-width: 1399px) and (min-width: 1200px) {\n            height: 22px;\n          }\n        "]);
+	  _templateObject3$9 = function _templateObject3() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject2$9() {
+	  var data = _taggedTemplateLiteral(["\n          height: 22px;\n          padding: 0px 4px;\n          //Low Resolution CSS starts\n          @media screen and (max-width: 1399px) and (min-width: 1200px) {\n            height: 18px;\n          }\n        "]);
+	  _templateObject2$9 = function _templateObject2() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject$9() {
+	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  align-items: center;\n  color: ", ";\n  ", "\n\n  ", "\n\n  &:hover {\n    background: ", ";\n  }\n  &:focus {\n    background: ", ";\n  }\n"]);
+	  _templateObject$9 = function _templateObject() {
+	    return data;
+	  };
+	  return data;
+	}
+	var StyledTagGroupMainContainer = styled__default.div(_templateObject$9(), AvatarBgColor, LabelColor, function (props) {
+	  switch (props.size) {
+	    case "small":
+	      return styled.css(_templateObject2$9());
+	    case "default":
+	      return styled.css(_templateObject3$9());
+	  }
+	}, function (props) {
+	  return props.disabled && styled.css(_templateObject4$8(), DisabledTextareaBg, DisabledButtonFontColor, DisabledTextareaBg);
+	}, TabHoverBackgroundColor, DisabledButtonFontColor);
+	var StyledTagTextContainer = styled__default.span(_templateObject5$7());
+	var StyledCloseIcon = styled__default.i(_templateObject6$5(), NotificationClose, function (props) {
+	  return props.disabled && styled.css(_templateObject7$5(), DisabledClose);
+	});
+	var StyledTagGroupOuterContainer = styled__default.div(_templateObject8$5());
+
+	function _templateObject19$1() {
 	  var data = _taggedTemplateLiteral(["\n  height: 37px;\n  padding: 8px 16px;\n  box-sizing: border-box;\n\n  &:hover {\n    background: ", ";\n  }\n"]);
+	  _templateObject19$1 = function _templateObject19() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject18$1() {
+	  var data = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: none;\n  padding: 4px 0;\n  height: 26px;\n  box-sizing: border-box;\n  padding-left: 34px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  cursor: pointer;\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-size: 10px;\n  background-position: 18px center;\n"]);
 	  _templateObject18$1 = function _templateObject18() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject17$1() {
-	  var data = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: none;\n  padding: 4px 0;\n  height: 26px;\n  box-sizing: border-box;\n  padding-left: 34px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  cursor: pointer;\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-size: 10px;\n  background-position: 18px center;\n"]);
+	  var data = _taggedTemplateLiteral(["\n  border: none;\n  height: 37px;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0px 16px;\n  font-size: 14px;\n  border-bottom: 1px solid ", ";\n  font-family: \"Poppins\", sans-serif;\n  background: url(", ") no-repeat;\n  background-size: 12px;\n  background-position: 16px center;\n  padding-left: 34px;\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    height: 28px;\n  }\n"]);
 	  _templateObject17$1 = function _templateObject17() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject16$1() {
-	  var data = _taggedTemplateLiteral(["\n  border: none;\n  height: 37px;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0px 16px;\n  font-size: 14px;\n  border-bottom: 1px solid ", ";\n  font-family: \"Poppins\", sans-serif;\n  background: url(", ") no-repeat;\n  background-size: 12px;\n  background-position: 16px center;\n  padding-left: 34px;\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    height: 28px;\n  }\n"]);
+	  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"]);
 	  _templateObject16$1 = function _templateObject16() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject15$1() {
-	  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"]);
+	  var data = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    "]);
 	  _templateObject15$1 = function _templateObject15() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject14$2() {
-	  var data = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    "]);
+	  var data = _taggedTemplateLiteral(["\n  ", "\n"]);
 	  _templateObject14$2 = function _templateObject14() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject13$2() {
-	  var data = _taggedTemplateLiteral(["\n  ", "\n"]);
+	  var data = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "]);
 	  _templateObject13$2 = function _templateObject13() {
 	    return data;
 	  };
@@ -2340,7 +2487,7 @@
 	  return data;
 	}
 	function _templateObject11$4() {
-	  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px solid ", ";\n  font-size: 14px;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  height: 37px;\n  border-radius: 4px;\n  color: ", ";\n  text-align: left;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  min-width: 232px;\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    font-size: 12px;\n    height: 28px;\n  }\n  ", "\n  &:hover {\n    border: 1px solid ", ";\n  }\n  &:focus {\n    box-shadow: 0 0 0 3px ", ";\n    border: 1px solid ", ";\n  }\n\n  &:disabled {\n    background: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n    cursor: default;\n    ", " {\n      background: url(", ") no-repeat;\n      background-position: center;\n      background-size: 10px;\n    }\n  }\n"]);
+	  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px solid\n    ", ";\n  font-size: 14px;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  height: 37px;\n  border-radius: 4px;\n  color: ", ";\n  text-align: left;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  min-width: 232px;\n  width: 100%;\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    font-size: 12px;\n    height: 28px;\n  }\n  ", "\n  ", "\n  &:hover {\n    border: 1px solid\n      ", ";\n  }\n  &:focus {\n    box-shadow: ", ";\n    border: 1px solid\n      ", ";\n  }\n\n  &:disabled {\n    background: ", ";\n    border: 1px solid\n      ", ";\n    color: ", ";\n    cursor: default;\n    ", " {\n      background: url(", ") no-repeat;\n      background-position: center;\n      background-size: 10px;\n    }\n  }\n"]);
 	  _templateObject11$4 = function _templateObject11() {
 	    return data;
 	  };
@@ -2360,84 +2507,100 @@
 	  };
 	  return data;
 	}
-	function _templateObject8$5() {
+	function _templateObject8$6() {
 	  var data = _taggedTemplateLiteral([""]);
-	  _templateObject8$5 = function _templateObject8() {
+	  _templateObject8$6 = function _templateObject8() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject7$5() {
+	function _templateObject7$6() {
 	  var data = _taggedTemplateLiteral(["\n      top: ", "px;\n      left: ", "px;\n    "]);
-	  _templateObject7$5 = function _templateObject7() {
+	  _templateObject7$6 = function _templateObject7() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject6$5() {
-	  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 4px;\n  margin-top: 4px;\n  position: absolute;\n  z-index: ", ";\n  min-width: 232px;\n  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);\n  padding: 8px 0px;\n\n  ", "\n"]);
-	  _templateObject6$5 = function _templateObject6() {
+	function _templateObject6$6() {
+	  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 4px;\n  margin-top: 4px;\n  position: absolute;\n  z-index: ", ";\n  min-width: 232px;\n  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);\n  padding: 8px 0px;\n  width: ", ";\n  ", "\n"]);
+	  _templateObject6$6 = function _templateObject6() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject5$7() {
+	function _templateObject5$8() {
 	  var data = _taggedTemplateLiteral(["\n  bottom: 0;\n  left: 0;\n  top: 0;\n  right: 0;\n  position: fixed;\n  z-index: ", ";\n"]);
-	  _templateObject5$7 = function _templateObject5() {
+	  _templateObject5$8 = function _templateObject5() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject4$8() {
-	  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: max-content;\n"]);
-	  _templateObject4$8 = function _templateObject4() {
+	function _templateObject4$9() {
+	  var data = _taggedTemplateLiteral(["\n  position: relative;\n"]);
+	  _templateObject4$9 = function _templateObject4() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject3$9() {
-	  var data = _taggedTemplateLiteral(["\n  .multi-select__control {\n    display: none;\n  }\n  .multi-select__option {\n    font-size: 14px;\n    padding: 8px 16px;\n    @media screen and (max-width: 1399px) and (min-width: 1200px) {\n      padding: 5px 16px;\n      font-size: 12px;\n    }\n  }\n  .multi-select__option--is-focused {\n    background-color: ", ";\n  }\n  .multi-select__option--is-selected {\n    background-color: ", ";\n    color: #1d1d1d;\n  }\n  .multi-select__option--is-selected:active {\n    background-color: ", ";\n  }\n\n  .loading-option {\n    color: ", ";\n    pointer-events: none;\n  }\n  .loading-option-multi label {\n    color: ", ";\n    pointer-events: none;\n  }\n"]);
-	  _templateObject3$9 = function _templateObject3() {
+	function _templateObject3$a() {
+	  var data = _taggedTemplateLiteral(["\n  .multi-select__control {\n    display: none;\n  }\n  .multi-select__option {\n    font-size: 14px;\n    padding: 8px 16px;\n    @media screen and (max-width: 1399px) and (min-width: 1200px) {\n      padding: 5px 16px;\n      font-size: 12px;\n    }\n  }\n  .multi-select__option--is-selected {\n    background-color: ", ";\n    color: #1d1d1d;\n  }\n  .multi-select__option--is-selected:active {\n    background-color: ", ";\n  }\n  .multi-select__option--is-focused {\n    background-color: ", ";\n  }\n\n  .loading-option {\n    color: ", ";\n    pointer-events: none;\n  }\n  .loading-option-multi label {\n    color: ", ";\n    pointer-events: none;\n  }\n"]);
+	  _templateObject3$a = function _templateObject3() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject2$9() {
-	  var data = _taggedTemplateLiteral(["\n  width: 91px;\n  position: absolute;\n"]);
-	  _templateObject2$9 = function _templateObject2() {
+	function _templateObject2$a() {
+	  var data = _taggedTemplateLiteral(["\n  width: 91px;\n  position: absolute;\n  padding: 4px 8px;\n  background: ", ";\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  ", " {\n    width: 60px;\n  }\n"]);
+	  _templateObject2$a = function _templateObject2() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject$9() {
-	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 4px;\n  margin-top: 4px;\n  position: absolute;\n"]);
-	  _templateObject$9 = function _templateObject() {
+	function _templateObject$a() {
+	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 4px;\n  margin-top: 4px;\n  position: absolute;\n\n  ", " {\n    display: block;\n    font-size: 12px;\n    width: 40px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    &:last-child {\n      width: 14px;\n      height: 20px;\n      background: url(", ") no-repeat;\n      transform: rotate(90deg);\n      background-position: center;\n    }\n  }\n"]);
+	  _templateObject$a = function _templateObject() {
 	    return data;
 	  };
 	  return data;
 	}
-	var SelectedOptionsTagGroup = styled__default.div(_templateObject$9());
-	var SelectedOptionsTagListContainer = styled__default.div(_templateObject2$9());
-	var StyledSelect = styled__default(Select$1__default)(_templateObject3$9(), FocusBackgroundColor, FocusBackgroundColor, FocusBackgroundColor, DisabledButtonFontColor, PrimaryBlueColor);
-	var StyledDropdown = styled__default.div(_templateObject4$8());
-	var Blanket = styled__default.div(_templateObject5$7(), LOW_1);
-	var StyledMenu = styled__default.div(_templateObject6$5(), WhiteColor, LOW_2, function (props) {
-	  return props.position && styled.css(_templateObject7$5(), props.position.top, props.position.left);
+	var SelectedOptionsTagGroup = styled__default.div(_templateObject$a(), StyledTagTextContainer, menuExtended);
+	var SelectedOptionsTagListContainer = styled__default.div(_templateObject2$a(), WhiteColor, StyledTagTextContainer);
+	var StyledSelect = styled__default(Select$1__default)(_templateObject3$a(), FocusBackgroundColor, FocusBackgroundColor, SelectOptionFocusBackground, DisabledButtonFontColor, PrimaryBlueColor);
+	var StyledDropdown = styled__default.div(_templateObject4$9());
+	var Blanket = styled__default.div(_templateObject5$8(), LOW_1);
+	var StyledMenu = styled__default.div(_templateObject6$6(), WhiteColor, LOW_2, function (props) {
+	  return props.width && props.width + "px";
+	}, function (props) {
+	  return props.position && styled.css(_templateObject7$6(), props.position.top, props.position.left);
 	});
-	var SearchContainer = styled__default.div(_templateObject8$5());
+	var SearchContainer = styled__default.div(_templateObject8$6());
 	var StyledChevronIcon = styled__default.i(_templateObject9$5(), ChevronImage, function (props) {
 	  return props.isOpen && styled.css(_templateObject10$5());
 	});
-	var StyledDropdownMainButton = styled__default.button(_templateObject11$4(), WhiteColor, DefaultColorButton, DefaultButtonText, function (props) {
+	var StyledDropdownMainButton = styled__default.button(_templateObject11$4(), function (props) {
+	  return props.isAgGridCellRenderer ? AgCellRendererBackground : WhiteColor;
+	}, function (props) {
+	  return props.isAgGridCellRenderer ? "transparent" : DefaultColorButton;
+	}, DefaultButtonText, function (props) {
 	  return props.isSelected && styled.css(_templateObject12$3());
-	}, PrimaryBlueColor, FocusBackgroundColor, PrimaryBlueColor, DisabledTextareaBg, FocusDisableBorderColor, DisabledButtonFontColor, StyledChevronIcon, DisabledChevron);
-	var StyledDDMainContainer = styled__default.div(_templateObject13$2(), function (props) {
-	  return props.labelOrientation === "left" && styled.css(_templateObject14$2());
+	}, function (props) {
+	  return props.isOpen && props.isAgGridCellRenderer && styled.css(_templateObject13$2(), WhiteColor);
+	}, function (props) {
+	  return props.isAgGridCellRenderer ? "transparent" : PrimaryBlueColor;
+	}, function (props) {
+	  return props.isAgGridCellRenderer ? "unset" : "0 0 0 3px FocusBackgroundColor";
+	}, function (props) {
+	  return props.isAgGridCellRenderer ? "transparent" : PrimaryBlueColor;
+	}, DisabledTextareaBg, function (props) {
+	  return props.isAgGridCellRenderer ? "transparent" : FocusDisableBorderColor;
+	}, DisabledButtonFontColor, StyledChevronIcon, DisabledChevron);
+	var StyledDDMainContainer = styled__default.div(_templateObject14$2(), function (props) {
+	  return props.labelOrientation === "left" && styled.css(_templateObject15$1());
 	});
-	var StyledDDLabelContainer = styled__default.label(_templateObject15$1(), LabelColor);
-	var StyledDDSearchBox = styled__default.input(_templateObject16$1(), AvatarBgColor, SearchIcon);
-	var StyledButtonURLClear = styled__default.button(_templateObject17$1(), LabelColor, NotificationClose);
-	var StyledSelectAllContainer = styled__default.div(_templateObject18$1(), FocusBackgroundColor);
+	var StyledDDLabelContainer = styled__default.label(_templateObject16$1(), LabelColor);
+	var StyledDDSearchBox = styled__default.input(_templateObject17$1(), AvatarBgColor, SearchIcon);
+	var StyledButtonURLClear = styled__default.button(_templateObject18$1(), LabelColor, NotificationClose);
+	var StyledSelectAllContainer = styled__default.div(_templateObject19$1(), FocusBackgroundColor);
 
 	var Portal = function Portal(props) {
 	  return /*#__PURE__*/ReactDOM.createPortal(props.children, props.container);
@@ -2452,36 +2615,29 @@
 	    containerRef = _ref.containerRef,
 	    withPortal = _ref.withPortal,
 	    portalContainer = _ref.portalContainer,
-	    onMenuScrollToBottom = _ref.onMenuScrollToBottom;
+	    dropdownButtonRef = _ref.dropdownButtonRef;
 	  var x = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().x;
 	  var y = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().y;
 	  var offsetHeight = (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight;
-	  var onMenuScroll = function onMenuScroll(e) {
-	    var _e$target = e.target,
-	      scrollHeight = _e$target.scrollHeight,
-	      scrollTop = _e$target.scrollTop,
-	      clientHeight = _e$target.clientHeight;
-	    if (scrollHeight - scrollTop === clientHeight && onMenuScrollToBottom) {
-	      onMenuScrollToBottom();
-	    }
-	  };
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledDropdown, {
+	    className: "select-container",
 	    children: [target, !disabled && isOpen ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
 	      children: withPortal ? /*#__PURE__*/jsxRuntime.jsxs(Portal, {
 	        container: portalContainer,
 	        children: [/*#__PURE__*/jsxRuntime.jsx(StyledMenu, {
+	          className: "select-dropdown-container",
 	          position: {
 	            top: y + offsetHeight + 4,
 	            left: x
 	          },
-	          onScroll: onMenuScroll,
+	          width: dropdownButtonRef.current.offsetWidth,
 	          children: children
 	        }), /*#__PURE__*/jsxRuntime.jsx(Blanket, {
 	          onClick: onClose
 	        })]
 	      }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
 	        children: [/*#__PURE__*/jsxRuntime.jsx(StyledMenu, {
-	          onScroll: onMenuScroll,
+	          className: "select-dropdown-container",
 	          children: children
 	        }), /*#__PURE__*/jsxRuntime.jsx(Blanket, {
 	          onClick: onClose
@@ -2499,105 +2655,39 @@
 	    isSelectAll = _ref.isSelectAll,
 	    selectedOptions = _ref.selectedOptions,
 	    isWithSelectAll = _ref.isWithSelectAll,
-	    isWithSearch = _ref.isWithSearch;
+	    isWithSearch = _ref.isWithSearch,
+	    onKeyDown = _ref.onKeyDown;
 	  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
 	    children: [isWithSearch && /*#__PURE__*/jsxRuntime.jsx(StyledDDSearchBox, {
 	      placeholder: "Search",
 	      ref: ref,
-	      onChange: onSearch
+	      onChange: onSearch,
+	      onKeyDown: onKeyDown,
+	      className: "select-search-input"
 	    }), isMulti && isWithSelectAll && /*#__PURE__*/jsxRuntime.jsxs(SearchContainer, {
 	      children: [!isSelectAll && selectedOptions.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(StyledButtonURLClear, {
 	        variant: "url",
 	        onClick: onClearAll,
+	        className: "select-clear-all-button",
 	        children: "Clear Selection"
 	      }) : null, /*#__PURE__*/jsxRuntime.jsx(StyledSelectAllContainer, {
+	        className: "select-selectAll-container",
 	        children: /*#__PURE__*/jsxRuntime.jsx(Checkbox, {
 	          name: "select-all",
 	          id: "select-all",
 	          label: isSelectAll ? "Deselect All" : "Select All",
 	          onChange: onSelectAll,
-	          checked: isSelectAll
+	          checked: isSelectAll,
+	          className: "select-selectAll-checkbox"
 	        })
 	      })]
 	    })]
 	  });
 	});
 
-	function _templateObject8$6() {
-	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 12px;\n"]);
-	  _templateObject8$6 = function _templateObject8() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject7$6() {
-	  var data = _taggedTemplateLiteral(["\n      background: url(", ") no-repeat;\n      pointer-events: none;\n    "]);
-	  _templateObject7$6 = function _templateObject7() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject6$6() {
-	  var data = _taggedTemplateLiteral(["\n  background: url(", ") no-repeat;\n  width: 10px;\n  height: 10px;\n  background-size: 10px;\n  display: inline-block;\n  margin-left: 8px;\n\n  //Low Resolution CSS starts\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    background-size: 8px;\n  }\n  ", "\n"]);
-	  _templateObject6$6 = function _templateObject6() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject5$8() {
-	  var data = _taggedTemplateLiteral(["\n  font-size: 12px;\n  //Low Resolution CSS starts\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    font-size: 10px;\n  }\n"]);
-	  _templateObject5$8 = function _templateObject5() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject4$9() {
-	  var data = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      &:hover {\n        background: ", " !important;\n        cursor: default !important;\n      }\n    "]);
-	  _templateObject4$9 = function _templateObject4() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject3$a() {
-	  var data = _taggedTemplateLiteral(["\n          height: 26px;\n          padding: 0px 8px;\n          //Low Resolution CSS starts\n          @media screen and (max-width: 1399px) and (min-width: 1200px) {\n            height: 22px;\n          }\n        "]);
-	  _templateObject3$a = function _templateObject3() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject2$a() {
-	  var data = _taggedTemplateLiteral(["\n          height: 22px;\n          padding: 0px 4px;\n          //Low Resolution CSS starts\n          @media screen and (max-width: 1399px) and (min-width: 1200px) {\n            height: 18px;\n          }\n        "]);
-	  _templateObject2$a = function _templateObject2() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject$a() {
-	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  background: ", ";\n  border-radius: 4px;\n  cursor: pointer;\n  align-items: center;\n  color: ", ";\n  ", "\n\n  ", "\n\n  &:hover {\n    background: ", ";\n  }\n  &:focus {\n    background: ", ";\n  }\n"]);
-	  _templateObject$a = function _templateObject() {
-	    return data;
-	  };
-	  return data;
-	}
-	var StyledTagGroupMainContainer = styled__default.div(_templateObject$a(), AvatarBgColor, LabelColor, function (props) {
-	  switch (props.size) {
-	    case "small":
-	      return styled.css(_templateObject2$a());
-	    case "default":
-	      return styled.css(_templateObject3$a());
-	  }
-	}, function (props) {
-	  return props.disabled && styled.css(_templateObject4$9(), DisabledTextareaBg, DisabledButtonFontColor, DisabledTextareaBg);
-	}, TabHoverBackgroundColor, DisabledButtonFontColor);
-	var StyledTagTextContainer = styled__default.span(_templateObject5$8());
-	var StyledCloseIcon = styled__default.i(_templateObject6$6(), NotificationClose, function (props) {
-	  return props.disabled && styled.css(_templateObject7$6(), DisabledClose);
-	});
-	var StyledTagGroupOuterContainer = styled__default.div(_templateObject8$6());
-
 	function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Tag = function Tag(_ref) {
+	var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var children = _ref.children,
 	    _ref$size = _ref.size,
 	    size = _ref$size === void 0 ? "default" : _ref$size,
@@ -2607,16 +2697,20 @@
 	    props = _objectWithoutProperties(_ref, ["children", "size", "isRemovable", "onClose", "disabled"]);
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledTagGroupMainContainer, _objectSpread$8(_objectSpread$8({
 	    size: size,
-	    disabled: disabled
+	    disabled: disabled,
+	    className: "".concat(props.className, " tag-container"),
+	    ref: ref
 	  }, props), {}, {
 	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledTagTextContainer, {
+	      className: "tag-text",
 	      children: children
 	    }), isRemovable && /*#__PURE__*/jsxRuntime.jsx(StyledCloseIcon, {
 	      disabled: disabled,
-	      onClick: onClose
+	      onClick: onClose,
+	      className: "tag-remove-icon"
 	    })]
 	  }));
-	};
+	});
 
 	var eventTypeMapping = {
 	  click: "onClick",
@@ -2687,29 +2781,395 @@
 	  return React__default.Children.only( /*#__PURE__*/React.cloneElement(children, (_cloneElement = {}, _defineProperty(_cloneElement, mappedFocusEvent, handleBubbledEvents(mappedFocusEvent)), _defineProperty(_cloneElement, mappedMouseEvent, handleBubbledEvents(mappedMouseEvent)), _defineProperty(_cloneElement, mappedTouchEvent, handleBubbledEvents(mappedTouchEvent)), _cloneElement)));
 	};
 
-	var SelectedOptionTag = function SelectedOptionTag(_ref) {
-	  var onClose = _ref.onClose,
-	    label = _ref.label;
-	  return /*#__PURE__*/jsxRuntime.jsx(Tag, {
-	    size: "small",
-	    isRemovable: true,
-	    onClose: onClose,
-	    children: label
-	  });
-	};
-	var SelectedOptionsTagList = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-	  var _ref$current, _ref$current2;
-	  var selectedOptions = _ref2.selectedOptions,
-	    handleOptionTagRemove = _ref2.handleOptionTagRemove;
-	  return /*#__PURE__*/jsxRuntime.jsx(SelectedOptionsTagListContainer, {
-	    style: {
-	      top: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetTop) + 25,
-	      left: (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetLeft
-	    },
-	    children: selectedOptions.slice(3, selectedOptions.length).map(function (option) {
-	      return /*#__PURE__*/jsxRuntime.jsx(SelectedOptionTag, {
-	        label: option.label,
-	        onClose: function onClose() {
+	function _templateObject17$2() {
+	  var data = _taggedTemplateLiteral([""]);
+	  _templateObject17$2 = function _templateObject17() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject16$2() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: 10px;\n            top: auto;\n            bottom: -6px;\n            transform: rotate(-180deg);\n          }\n        "]);
+	  _templateObject16$2 = function _templateObject16() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject15$2() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: 10px;\n            top: auto;\n            bottom: -6px;\n            transform: rotate(-180deg);\n          }\n        "]);
+	  _templateObject15$2 = function _templateObject15() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject14$3() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: 0px;\n            right: 0px;\n          }\n        "]);
+	  _templateObject14$3 = function _templateObject14() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject13$3() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: 10px;\n            right: auto;\n            top: auto;\n            bottom: -6px;\n            transform: rotate(-180deg);\n          }\n        "]);
+	  _templateObject13$3 = function _templateObject13() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject12$4() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: -9px;\n            top: auto;\n            bottom: 10px;\n            transform: rotate(90deg);\n          }\n        "]);
+	  _templateObject12$4 = function _templateObject12() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject11$5() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: -9px;\n            right: auto;\n            top: 0px;\n            bottom: 0;\n            transform: rotate(-90deg);\n          }\n        "]);
+	  _templateObject11$5 = function _templateObject11() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject10$6() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: -9px;\n            top: 10px;\n            bottom: auto;\n            transform: rotate(90deg);\n          }\n        "]);
+	  _templateObject10$6 = function _templateObject10() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject9$6() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: -9px;\n            right: auto;\n            top: auto;\n            bottom: 10px;\n            transform: rotate(-90deg);\n          }\n        "]);
+	  _templateObject9$6 = function _templateObject9() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject8$7() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: -9px;\n            top: 0px;\n            bottom: 0px;\n            transform: rotate(90deg);\n          }\n        "]);
+	  _templateObject8$7 = function _templateObject8() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject7$7() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: -9px;\n            right: auto;\n            top: 10px;\n            transform: rotate(-90deg);\n          }\n        "]);
+	  _templateObject7$7 = function _templateObject7() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject6$7() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: 10px;\n          }\n        "]);
+	  _templateObject6$7 = function _templateObject6() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject5$9() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: 0px;\n            right: 0px;\n            top: auto;\n            bottom: -6px;\n            transform: rotate(-180deg);\n          }\n        "]);
+	  _templateObject5$9 = function _templateObject5() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject4$a() {
+	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: 10px;\n            right: auto;\n          }\n        "]);
+	  _templateObject4$a = function _templateObject4() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject3$b() {
+	  var data = _taggedTemplateLiteral([""]);
+	  _templateObject3$b = function _templateObject3() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject2$b() {
+	  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: 8px 16px;\n  border-radius: 4px;\n  max-width: 300px;\n  width: max-content;\n  position: ", ";\n  color: ", ";\n  z-index: ", ";\n  font-size: 14px;\n  line-height: 21px;\n  visibility: ", ";\n  top: ", "px;\n  left: ", "px;\n  &::after {\n    width: 0;\n    height: 0;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-bottom: 6px solid ", ";\n    content: \" \";\n    position: absolute;\n    left: 0;\n    right: 0;\n    margin: auto;\n    top: -6px;\n  }\n  ", "\n"]);
+	  _templateObject2$b = function _templateObject2() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject$b() {
+	  var data = _taggedTemplateLiteral(["\n  position: relative;\n"]);
+	  _templateObject$b = function _templateObject() {
+	    return data;
+	  };
+	  return data;
+	}
+	var StyledTooltipContainer = styled__default.div(_templateObject$b());
+	var StyledTooltip = styled__default.div(_templateObject2$b(), TooltipBackgroundColor, function (props) {
+	  return props.isPortal ? "fixed" : "absolute";
+	}, WhiteColor, function (props) {
+	  return props.zIndex;
+	}, function (props) {
+	  return props.displayTooltip ? "visible" : "hidden";
+	}, function (props) {
+	  return props.positionRef.current.y;
+	}, function (props) {
+	  return props.positionRef.current.x;
+	}, TooltipBackgroundColor, function (props) {
+	  switch (props.placement) {
+	    case "default":
+	      return styled.css(_templateObject3$b());
+	    case "bottom-start":
+	      return styled.css(_templateObject4$a());
+	    case "top":
+	      return styled.css(_templateObject5$9());
+	    case "bottom-end":
+	      return styled.css(_templateObject6$7());
+	    case "right-start":
+	      return styled.css(_templateObject7$7());
+	    case "left":
+	      return styled.css(_templateObject8$7());
+	    case "right-end":
+	      return styled.css(_templateObject9$6());
+	    case "left-start":
+	      return styled.css(_templateObject10$6());
+	    case "right":
+	      return styled.css(_templateObject11$5());
+	    case "left-end":
+	      return styled.css(_templateObject12$4());
+	    case "top-start":
+	      return styled.css(_templateObject13$3());
+	    case "bottom":
+	      return styled.css(_templateObject14$3());
+	    case "bottom-end":
+	      return styled.css(_templateObject15$2());
+	    case "top-end":
+	      return styled.css(_templateObject16$2());
+	    default:
+	      return styled.css(_templateObject17$2());
+	  }
+	});
+
+	function Portal$1(props) {
+	  return /*#__PURE__*/ReactDOM.createPortal(props.children, props.container);
+	}
+	var point = function point() {
+	  return {
+	    x: null,
+	    y: null
+	  };
+	};
+	var getTooltipCoordinates = function getTooltipCoordinates(tooltipElement,
+	//element on which tooltip is renderTooltip
+	tooltipRef, placement, space, isPortal) {
+	  var tooltipPosition = point();
+	  var tooltipArrowHeight = 14;
+	  var tooltipElementRect = tooltipElement.getBoundingClientRect();
+	  switch (placement) {
+	    case "left":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.left - (tooltipRef.offsetWidth + space);
+	        tooltipPosition.y = tooltipElementRect.top + (tooltipElement.offsetHeight - tooltipRef.offsetHeight) / 2;
+	      } else {
+	        tooltipPosition.x = -tooltipRef.offsetWidth - tooltipArrowHeight;
+	        tooltipPosition.y = 0;
+	      }
+	      break;
+	    case "left-start":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.left - (tooltipRef.offsetWidth + space);
+	        tooltipPosition.y = tooltipElementRect.top;
+	      } else {
+	        tooltipPosition.x = -tooltipRef.offsetWidth - tooltipArrowHeight;
+	        tooltipPosition.y = 0;
+	      }
+	      break;
+	    case "left-end":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.left - (tooltipRef.offsetWidth + space);
+	        tooltipPosition.y = tooltipElementRect.bottom - tooltipRef.offsetHeight;
+	      } else {
+	        tooltipPosition.x = -tooltipRef.offsetWidth - tooltipArrowHeight;
+	        tooltipPosition.y = 0;
+	      }
+	      break;
+	    case "right":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.right + space;
+	        tooltipPosition.y = tooltipElementRect.top + (tooltipElement.offsetHeight - tooltipRef.offsetHeight) / 2;
+	      } else {
+	        tooltipPosition.x = tooltipElement.offsetWidth + tooltipArrowHeight;
+	        tooltipPosition.y = 0;
+	      }
+	      break;
+	    case "right-start":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.right + space;
+	        tooltipPosition.y = tooltipElementRect.top;
+	      } else {
+	        tooltipPosition.x = tooltipElement.offsetWidth + tooltipArrowHeight;
+	        tooltipPosition.y = 0;
+	      }
+	      break;
+	    case "right-end":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.right + space;
+	        tooltipPosition.y = tooltipElementRect.bottom - tooltipRef.offsetHeight;
+	      } else {
+	        tooltipPosition.x = tooltipElement.offsetWidth + tooltipArrowHeight;
+	        tooltipPosition.y = 0;
+	      }
+	      break;
+	    case "top":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.left + (tooltipElement.offsetWidth - tooltipRef.offsetWidth) / 2;
+	        tooltipPosition.y = tooltipElementRect.top - (tooltipRef.offsetHeight + space);
+	      } else {
+	        tooltipPosition.x = (tooltipElement.offsetWidth - tooltipRef.offsetWidth) / 2;
+	        tooltipPosition.y = -tooltipRef.offsetHeight - tooltipArrowHeight;
+	      }
+	      break;
+	    case "top-start":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.left;
+	        tooltipPosition.y = tooltipElementRect.top - (tooltipRef.offsetHeight + space);
+	      } else {
+	        tooltipPosition.x = 0;
+	        tooltipPosition.y = -tooltipRef.offsetHeight - tooltipArrowHeight;
+	      }
+	      break;
+	    case "top-end":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.right - tooltipRef.offsetWidth;
+	        tooltipPosition.y = tooltipElementRect.top - (tooltipRef.offsetHeight + space);
+	      } else {
+	        tooltipPosition.x = tooltipElement.offsetWidth - tooltipRef.offsetWidth;
+	        tooltipPosition.y = -tooltipRef.offsetHeight - tooltipArrowHeight;
+	      }
+	      break;
+	    case "bottom":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.left + (tooltipElement.offsetWidth - tooltipRef.offsetWidth) / 2;
+	        tooltipPosition.y = tooltipElementRect.bottom + space;
+	      } else {
+	        tooltipPosition.x = (tooltipElement.offsetWidth - tooltipRef.offsetWidth) / 2;
+	        tooltipPosition.y = tooltipRef.offsetHeight + tooltipArrowHeight;
+	      }
+	      break;
+	    case "bottom-start":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.left;
+	        tooltipPosition.y = tooltipElementRect.bottom + space;
+	      } else {
+	        tooltipPosition.x = 0;
+	        tooltipPosition.y = tooltipRef.offsetHeight + tooltipArrowHeight;
+	      }
+	      break;
+	    case "bottom-end":
+	      if (isPortal) {
+	        tooltipPosition.x = tooltipElementRect.right - tooltipRef.offsetWidth;
+	        tooltipPosition.y = tooltipElementRect.bottom + space;
+	      } else {
+	        tooltipPosition.x = tooltipElement.offsetWidth - tooltipRef.offsetWidth;
+	        tooltipPosition.y = tooltipRef.offsetHeight + tooltipArrowHeight;
+	      }
+	      break;
+	  }
+	  return tooltipPosition;
+	};
+	var Tooltip = function Tooltip(_ref) {
+	  var text = _ref.text,
+	    _ref$placement = _ref.placement,
+	    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
+	    _ref$space = _ref.space,
+	    space = _ref$space === void 0 ? 15 : _ref$space,
+	    children = _ref.children,
+	    _ref$disabled = _ref.disabled,
+	    disabled = _ref$disabled === void 0 ? 0 : _ref$disabled,
+	    _ref$container = _ref.container,
+	    container = _ref$container === void 0 ? document.body : _ref$container,
+	    _ref$zIndex = _ref.zIndex,
+	    zIndex = _ref$zIndex === void 0 ? VERY_HIGH : _ref$zIndex,
+	    isPortal = _ref.isPortal,
+	    className = _ref.className;
+	  var _useState = React.useState(false),
+	    _useState2 = _slicedToArray(_useState, 2),
+	    renderTooltip = _useState2[0],
+	    setRenderTooltip = _useState2[1]; // render the tooltip so that its coords can be set
+	  var _useState3 = React.useState(false),
+	    _useState4 = _slicedToArray(_useState3, 2),
+	    displayTooltip = _useState4[0],
+	    setDisplayTooltip = _useState4[1]; // display tooltip only after the coords are set to avoid display at x=0, y=0 (default tooltipRef value)
+	  var positionRef = React.useRef({
+	    x: null,
+	    y: null
+	  });
+	  var tooltipRef = React.useRef();
+	  var containerRef = React.useRef(null);
+	  React.useEffect(function () {
+	    if (renderTooltip && tooltipRef.current) {
+	      positionRef.current = getTooltipCoordinates(containerRef.current, tooltipRef.current, placement, space, isPortal);
+	      setDisplayTooltip(true);
+	    }
+	  }, [renderTooltip]);
+	  var handleMouseOver = function handleMouseOver(e) {
+	    if (disabled) return;
+	    setRenderTooltip(true);
+	  };
+	  var handleMouseLeave = function handleMouseLeave() {
+	    if (disabled) return;
+	    setRenderTooltip(false);
+	    setDisplayTooltip(false);
+	  };
+	  return /*#__PURE__*/jsxRuntime.jsxs(StyledTooltipContainer, {
+	    onMouseOver: handleMouseOver,
+	    onMouseLeave: handleMouseLeave,
+	    ref: containerRef,
+	    className: "tooltip-container",
+	    children: [children, renderTooltip && !disabled && (isPortal ? /*#__PURE__*/jsxRuntime.jsx(Portal$1, {
+	      container: container,
+	      children: /*#__PURE__*/jsxRuntime.jsx(StyledTooltip, {
+	        ref: tooltipRef,
+	        positionRef: positionRef,
+	        displayTooltip: displayTooltip,
+	        placement: placement,
+	        zIndex: zIndex,
+	        isPortal: isPortal,
+	        className: "".concat(className, " tooltip"),
+	        children: text
+	      })
+	    }) : /*#__PURE__*/jsxRuntime.jsx(StyledTooltip, {
+	      ref: tooltipRef,
+	      positionRef: positionRef,
+	      displayTooltip: displayTooltip,
+	      placement: placement,
+	      zIndex: zIndex,
+	      isPortal: isPortal,
+	      className: "".concat(className, " tooltip"),
+	      children: text
+	    }))]
+	  });
+	};
+
+	var SelectedOptionTag = function SelectedOptionTag(_ref) {
+	  var onClose = _ref.onClose,
+	    label = _ref.label;
+	  return /*#__PURE__*/jsxRuntime.jsx(Tag, {
+	    size: "small",
+	    isRemovable: true,
+	    onClose: onClose,
+	    children: label
+	  });
+	};
+	var SelectedOptionsTagList = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+	  var _ref$current, _ref$current2;
+	  var selectedOptions = _ref2.selectedOptions,
+	    handleOptionTagRemove = _ref2.handleOptionTagRemove;
+	  return /*#__PURE__*/jsxRuntime.jsx(SelectedOptionsTagListContainer, {
+	    style: {
+	      top: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetTop) + 25,
+	      left: (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetLeft
+	    },
+	    children: selectedOptions.slice(3, selectedOptions.length).map(function (option) {
+	      return /*#__PURE__*/jsxRuntime.jsx(SelectedOptionTag, {
+	        label: option.label,
+	        onClose: function onClose() {
 	          return handleOptionTagRemove(option);
 	        }
 	      });
@@ -2731,14 +3191,19 @@
 	    onChange(updatedOptions);
 	  };
 	  return /*#__PURE__*/jsxRuntime.jsx(SelectedOptionsTagGroup, {
+	    className: "select-options-tag-group",
 	    children: selectedOptions.length > 0 ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
 	      children: [selectedOptions.slice(0, 3).map(function (option, index) {
-	        return /*#__PURE__*/jsxRuntime.jsx(SelectedOptionTag, {
-	          label: option.label,
-	          onClose: function onClose() {
-	            return handleOptionTagRemove(option);
-	          }
-	        }, index);
+	        return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+	          text: option.label,
+	          children: /*#__PURE__*/jsxRuntime.jsx(SelectedOptionTag, {
+	            label: option.label,
+	            onClose: function onClose() {
+	              return handleOptionTagRemove(option);
+	            },
+	            className: "selected-option-tag"
+	          }, index)
+	        });
 	      }), selectedOptions.length > 3 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
 	        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
 	          ref: optionListTagRef,
@@ -2748,8 +3213,7 @@
 	              setSelectedOptionsTagListOpen(function (prevState) {
 	                return !prevState;
 	              });
-	            },
-	            children: "...."
+	            }
 	          })
 	        }), isSelectedOptionsTagListOpen && /*#__PURE__*/jsxRuntime.jsx(ClickAwayListener, {
 	          onClickAway: function onClickAway() {
@@ -2758,7 +3222,8 @@
 	          children: /*#__PURE__*/jsxRuntime.jsx(SelectedOptionsTagList, {
 	            selectedOptions: selectedOptions,
 	            ref: optionListTagRef,
-	            handleOptionTagRemove: handleOptionTagRemove
+	            handleOptionTagRemove: handleOptionTagRemove,
+	            className: "selected-option-tag"
 	          })
 	        })]
 	      })]
@@ -2808,12 +3273,17 @@
 	    onMenuScrollToBottom = _ref.onMenuScrollToBottom,
 	    _ref$portalContainer = _ref.portalContainer,
 	    portalContainer = _ref$portalContainer === void 0 ? document.body : _ref$portalContainer,
-	    props = _objectWithoutProperties(_ref, ["label", "placeholder", "initialOptions", "isMulti", "isOpen", "setIsOpen", "currentOptions", "setCurrentOptions", "selectedOptions", "setSelectedOptions", "isSelectAll", "setIsSelectAll", "isWithSelectAll", "isWithSearch", "isWithSelectedOptionTags", "labelOrientation", "withPortal", "onMenuScrollToBottom", "portalContainer"]);
+	    isAgGridCellRenderer = _ref.isAgGridCellRenderer,
+	    props = _objectWithoutProperties(_ref, ["label", "placeholder", "initialOptions", "isMulti", "isOpen", "setIsOpen", "currentOptions", "setCurrentOptions", "selectedOptions", "setSelectedOptions", "isSelectAll", "setIsSelectAll", "isWithSelectAll", "isWithSearch", "isWithSelectedOptionTags", "labelOrientation", "withPortal", "onMenuScrollToBottom", "portalContainer", "isAgGridCellRenderer"]);
 	  var searchBarRef = React.useRef(null);
 	  var containerRef = React.useRef(null);
+	  var focusedIndex = React.useRef(0);
+	  var dropdownButtonRef = React.useRef(null);
 	  React.useEffect(function () {
 	    if (isOpen) {
 	      isWithSearch && searchBarRef.current.focus();
+	      var optionElements = Array.from(document.getElementsByClassName("multi-select__option"));
+	      if (optionElements.length > 0) optionElements[0].classList.add("multi-select__option--is-focused");
 	    }
 	  }, [isOpen]);
 	  var onChange = function onChange(selectedOptions) {
@@ -2886,578 +3356,339 @@
 	  };
 	  var onDropdownOpen = function onDropdownOpen() {
 	    if (props.onDropdownOpen) {
-	      props.onDropdownOpen();
-	    } else {
-	      setIsOpen(function (prev) {
-	        return !prev;
-	      });
-	    }
-	  };
-	  return /*#__PURE__*/jsxRuntime.jsxs(StyledDDMainContainer, {
-	    labelOrientation: labelOrientation,
-	    ref: containerRef,
-	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledDDLabelContainer, {
-	      children: label
-	    }), /*#__PURE__*/jsxRuntime.jsxs(Dropdown, {
-	      isOpen: isOpen,
-	      onClose: onDropdownClose,
-	      disabled: props.disabled,
-	      containerRef: containerRef,
-	      withPortal: withPortal,
-	      portalContainer: portalContainer,
-	      onMenuScrollToBottom: onMenuScrollToBottom,
-	      target: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-	        children: [/*#__PURE__*/jsxRuntime.jsxs(StyledDropdownMainButton, {
-	          variant: "primary",
-	          disabled: props.disabled,
-	          onClick: isOpen ? onDropdownClose : onDropdownOpen,
-	          isSelected: Object.entries(selectedOptions).length > 0,
-	          children: [getPlaceholder(), /*#__PURE__*/jsxRuntime.jsx(StyledChevronIcon, {
-	            isOpen: isOpen
-	          })]
-	        }), isMulti && isWithSelectedOptionTags && /*#__PURE__*/jsxRuntime.jsx(SelectedOptionsTags, {
-	          selectedOptions: selectedOptions,
-	          onChange: onChange
-	        })]
-	      }),
-	      children: [/*#__PURE__*/jsxRuntime.jsx(Filters, {
-	        ref: searchBarRef,
-	        onSearch: onSearch,
-	        isMulti: isMulti,
-	        onSelectAll: onSelectAll,
-	        onClearAll: onClearAll,
-	        isSelectAll: isSelectAll,
-	        selectedOptions: selectedOptions,
-	        isWithSelectAll: isWithSelectAll,
-	        isWithSearch: isWithSearch
-	      }), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, _objectSpread$9({
-	        isMulti: isMulti,
-	        classNamePrefix: "multi-select",
-	        autoFocus: true,
-	        backspaceRemovesValue: false,
-	        components: {
-	          IndicatorSeparator: null,
-	          Option: Option,
-	          MenuList: MenuList
-	        },
-	        controlShouldRenderValue: true,
-	        hideSelectedOptions: false,
-	        isClearable: false,
-	        menuIsOpen: true,
-	        tabSelectsValue: false,
-	        onChange: onChange,
-	        options: currentOptions,
-	        placeholder: "Search...",
-	        value: selectedOptions,
-	        styles: selectStyles
-	      }, props))]
-	    })]
-	  });
-	};
-	var Option = function Option(_ref2) {
-	  var isLoadingOption = _ref2.isLoadingOption,
-	    props = _objectWithoutProperties(_ref2, ["isLoadingOption"]);
-	  return /*#__PURE__*/jsxRuntime.jsx(Select$1.components.Option, _objectSpread$9(_objectSpread$9({}, props), {}, {
-	    children: props.selectProps.isMulti ? /*#__PURE__*/jsxRuntime.jsx(Checkbox, {
-	      label: props.label,
-	      checked: props.isSelected,
-	      onChange: function onChange() {
-	        return null;
-	      },
-	      disabled: isLoadingOption
-	    }) : props.label
-	  }));
-	};
-
-	function _templateObject12$4() {
-	  var data = _taggedTemplateLiteral(["\n      display: none;\n    "]);
-	  _templateObject12$4 = function _templateObject12() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject11$5() {
-	  var data = _taggedTemplateLiteral(["\n  padding-top: 8px;\n  ", "\n"]);
-	  _templateObject11$5 = function _templateObject11() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject10$6() {
-	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);
-	  _templateObject10$6 = function _templateObject10() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject9$6() {
-	  var data = _taggedTemplateLiteral(["\n      transform: rotate(0deg);\n    "]);
-	  _templateObject9$6 = function _templateObject9() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject8$7() {
-	  var data = _taggedTemplateLiteral(["\n  background: url(", ") no-repeat;\n  width: 10px;\n  background-size: 10px;\n  height: 10px;\n  display: inline-block;\n  transform: rotate(180deg);\n  background-position: center;\n  margin-left: 10px;\n  ", "\n"]);
-	  _templateObject8$7 = function _templateObject8() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject7$7() {
-	  var data = _taggedTemplateLiteral(["\n      font-weight: 400;\n    "]);
-	  _templateObject7$7 = function _templateObject7() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject6$7() {
-	  var data = _taggedTemplateLiteral(["\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 500;\n  //Low Resolution CSS starts\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    font-size: 14px;\n  }\n  ", "\n"]);
-	  _templateObject6$7 = function _templateObject6() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject5$9() {
-	  var data = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  padding-top: 8px;\n"]);
-	  _templateObject5$9 = function _templateObject5() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject4$a() {
-	  var data = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n    "]);
-	  _templateObject4$a = function _templateObject4() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject3$b() {
-	  var data = _taggedTemplateLiteral(["\n      background: ", ";\n      border: 1px solid ", " !important;\n      cursor: default !important;\n      pointer-events: none;\n      &:hover {\n        border: 1px solid ", ";\n      }\n    "]);
-	  _templateObject3$b = function _templateObject3() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject2$b() {
-	  var data = _taggedTemplateLiteral(["\n          background: ", ";\n          border: 1px solid ", " !important;\n          cursor: default !important;\n          pointer-events: none;\n          &:hover {\n            border: 1px solid ", ";\n          }\n        "]);
-	  _templateObject2$b = function _templateObject2() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject$b() {
-	  var data = _taggedTemplateLiteral(["\n  padding: 12px 24px;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  width: 100%;\n  &:hover {\n    border: 1px solid ", ";\n  }\n  &:focus {\n    box-shadow: 0 0 0 3px ", ";\n  }\n\n  //Low Resolution CSS starts\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    padding: 8px 14px;\n    font-size: 12px;\n  }\n\n  ", "\n\n  ", "\n  ", "\n"]);
-	  _templateObject$b = function _templateObject() {
-	    return data;
-	  };
-	  return data;
-	}
-	var StyledAccordionMainContainer = styled__default.div(_templateObject$b(), PrimaryBlueColor, PrimaryBlueColor, FocusBackgroundColor, function (props) {
-	  switch (props.variant) {
-	    case "disabled":
-	      return styled.css(_templateObject2$b(), DisabledTextareaBg, FocusDisableBorderColor, FocusDisableBorderColor);
-	  }
-	}, function (props) {
-	  return props.disabled && styled.css(_templateObject3$b(), DisabledTextareaBg, FocusDisableBorderColor, FocusDisableBorderColor);
-	}, function (props) {
-	  return !props.isOpen && styled.css(_templateObject4$a(), DefaultColorButton);
-	});
-	var StyledAccordionContainerText = styled__default.div(_templateObject5$9(), DefaultColorButton);
-	var StyledAccordionLabel = styled__default.span(_templateObject6$7(), function (props) {
-	  return !props.isOpen && styled.css(_templateObject7$7());
-	});
-	var StyledAccordionChevron = styled__default.i(_templateObject8$7(), ChevronImage, function (props) {
-	  return !props.isOpen && styled.css(_templateObject9$6());
-	});
-	var StyledAccordionHeading = styled__default.div(_templateObject10$6());
-	var StyledAccordionBodyContainer = styled__default.div(_templateObject11$5(), function (props) {
-	  return !props.isOpen && styled.css(_templateObject12$4());
-	});
-
-	function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var AccordionComponent = function AccordionComponent(_ref) {
-	  var isOpen = _ref.isOpen,
-	    label = _ref.label,
-	    onChange = _ref.onChange,
-	    disabled = _ref.disabled,
-	    children = _ref.children;
-	  return /*#__PURE__*/jsxRuntime.jsxs(StyledAccordionMainContainer, {
-	    isOpen: isOpen,
-	    disabled: disabled,
-	    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledAccordionHeading, {
-	      onClick: function onClick() {
-	        return onChange();
-	      },
-	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledAccordionLabel, {
-	        isOpen: isOpen,
-	        children: label
-	      }), /*#__PURE__*/jsxRuntime.jsx(StyledAccordionChevron, {
-	        isOpen: isOpen
-	      })]
-	    }), /*#__PURE__*/jsxRuntime.jsx(StyledAccordionBodyContainer, {
-	      isOpen: isOpen,
-	      children: /*#__PURE__*/jsxRuntime.jsx(StyledAccordionContainerText, {
-	        children: children
-	      })
-	    })]
-	  });
-	};
-	var Accordion = function Accordion(_ref2) {
-	  var isExpanded = _ref2.isExpanded,
-	    defaultExpanded = _ref2.defaultExpanded,
-	    onChange = _ref2.onChange,
-	    props = _objectWithoutProperties(_ref2, ["isExpanded", "defaultExpanded", "onChange"]);
-	  var _useState = React.useState(defaultExpanded),
-	    _useState2 = _slicedToArray(_useState, 2),
-	    isOpen = _useState2[0],
-	    setIsOpen = _useState2[1];
-	  var initialRender = React.useRef(true);
-	  React.useEffect(function () {
-	    if (initialRender.current) {
-	      initialRender.current = false;
+	      props.onDropdownOpen();
 	    } else {
-	      if (onChange) {
-	        onChange(isOpen);
-	      }
+	      setIsOpen(function (prev) {
+	        return !prev;
+	      });
 	    }
-	  }, [isOpen]);
-	  var handleAccordionAction = function handleAccordionAction() {
-	    setIsOpen(function (prevState) {
-	      return !prevState;
+	  };
+	  var onKeyDown = function onKeyDown(e) {
+	    var searchResults = Array.from(document.getElementsByClassName("multi-select__option"));
+	    if (e.keyCode === 40 && focusedIndex.current + 1 < currentOptions.length) {
+	      focusedIndex.current = focusedIndex.current + 1;
+	    }
+	    if (e.keyCode === 38 && focusedIndex.current - 1 >= 0) {
+	      focusedIndex.current = focusedIndex.current - 1;
+	    }
+	    searchResults.forEach(function (element, index) {
+	      var classList = element.classList.value;
+	      if (index === focusedIndex.current) {
+	        element.className = "multi-select__option--is-focused " + classList;
+	      } else {
+	        element.classList.remove("multi-select__option--is-focused");
+	      }
 	    });
+	    if (e.keyCode === 13) {
+	      //When a enter key is pressed, currently focused element would be selected
+	      if (focusedIndex.current > 0) {
+	        searchResults[focusedIndex.current].click();
+	      } else if (focusedIndex.current === 0) {
+	        searchResults[0].click();
+	      }
+	    }
 	  };
-	  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-	    children: isExpanded !== undefined ?
-	    /*#__PURE__*/
-	    // controlled
-	    jsxRuntime.jsx(AccordionComponent, _objectSpread$a({
-	      isOpen: isExpanded,
-	      onChange: onChange
-	    }, props)) :
-	    /*#__PURE__*/
-	    // uncontrolled
-	    jsxRuntime.jsx(AccordionComponent, _objectSpread$a({
+	  return /*#__PURE__*/jsxRuntime.jsxs(StyledDDMainContainer, {
+	    className: "select-main-container",
+	    labelOrientation: labelOrientation,
+	    ref: containerRef,
+	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledDDLabelContainer, {
+	      className: "select-label",
+	      children: label
+	    }), /*#__PURE__*/jsxRuntime.jsxs(Dropdown, {
 	      isOpen: isOpen,
-	      onChange: handleAccordionAction
-	    }, props))
+	      onClose: onDropdownClose,
+	      disabled: props.disabled,
+	      containerRef: containerRef,
+	      withPortal: withPortal,
+	      portalContainer: portalContainer,
+	      dropdownButtonRef: dropdownButtonRef,
+	      target: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+	        children: [/*#__PURE__*/jsxRuntime.jsxs(StyledDropdownMainButton, {
+	          variant: "primary",
+	          disabled: props.disabled,
+	          onClick: isOpen ? onDropdownClose : onDropdownOpen,
+	          isSelected: Object.entries(selectedOptions).length > 0,
+	          isAgGridCellRenderer: isAgGridCellRenderer,
+	          isOpen: isOpen,
+	          onKeyDown: !isWithSearch ? onKeyDown : undefined,
+	          className: "select-button",
+	          ref: dropdownButtonRef,
+	          children: [getPlaceholder(), /*#__PURE__*/jsxRuntime.jsx(StyledChevronIcon, {
+	            isOpen: isOpen
+	          })]
+	        }), isMulti && isWithSelectedOptionTags && /*#__PURE__*/jsxRuntime.jsx(SelectedOptionsTags, {
+	          selectedOptions: selectedOptions,
+	          onChange: onChange
+	        })]
+	      }),
+	      children: [/*#__PURE__*/jsxRuntime.jsx(Filters, {
+	        ref: searchBarRef,
+	        onSearch: onSearch,
+	        isMulti: isMulti,
+	        onSelectAll: onSelectAll,
+	        onClearAll: onClearAll,
+	        isSelectAll: isSelectAll,
+	        selectedOptions: selectedOptions,
+	        isWithSelectAll: isWithSelectAll,
+	        isWithSearch: isWithSearch,
+	        onKeyDown: onKeyDown
+	      }), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, _objectSpread$9({
+	        isMulti: isMulti,
+	        classNamePrefix: "multi-select",
+	        autoFocus: true,
+	        backspaceRemovesValue: false,
+	        components: {
+	          IndicatorSeparator: null,
+	          Option: Option,
+	          MenuList: MenuList
+	        },
+	        controlShouldRenderValue: true,
+	        hideSelectedOptions: false,
+	        isClearable: false,
+	        menuIsOpen: true,
+	        tabSelectsValue: false,
+	        onChange: onChange,
+	        options: currentOptions,
+	        placeholder: "Search...",
+	        value: selectedOptions,
+	        styles: selectStyles,
+	        onMenuScrollToBottom: onMenuScrollToBottom
+	      }, props))]
+	    })]
 	  });
 	};
-
-	function _templateObject$c() {
-	  var data = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: 4px;\n  height: 37px;\n  display: flex;\n  width: max-content;\n\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    height: ", ";\n  }\n\n  ", " {\n    /* color: ", "; */\n    border-radius: 0px;\n    /* background: ", "; */\n    border: none;\n    border-right: 1px solid ", ";\n    &:focus {\n      box-shadow: none;\n    }\n    /* &:hover {\n      background: ", ";\n    } */\n    &:first-child {\n      border-radius: 3px 0 0 3px;\n    }\n    &:last-child {\n      border-right: none;\n      border-radius: 0px 3px 3px 0px;\n    }\n  }\n"]);
-	  _templateObject$c = function _templateObject() {
-	    return data;
-	  };
-	  return data;
-	}
-	var StyledButtonGroup = styled__default.div(_templateObject$c(), DefaultColorButton, LOW_RES_NORMAL_BUTTON_HEIGHT, StyledButton, CheckBoxBorder, WhiteColor, DefaultColorButton, FocusBackgroundColor);
-
-	var ButtonGroup = function ButtonGroup(_ref) {
-	  var children = _ref.children,
-	    activeIndex = _ref.activeIndex;
-	  return /*#__PURE__*/jsxRuntime.jsx(StyledButtonGroup, {
-	    children: children.map(function (child, index) {
-	      return /*#__PURE__*/React__default.isValidElement(child) && /*#__PURE__*/React__default.cloneElement(child, {
-	        variant: "secondary",
-	        key: index
-	      });
-	    })
-	  });
+	var Option = function Option(_ref2) {
+	  var isLoadingOption = _ref2.isLoadingOption,
+	    props = _objectWithoutProperties(_ref2, ["isLoadingOption"]);
+	  return /*#__PURE__*/jsxRuntime.jsx(Select$1.components.Option, _objectSpread$9(_objectSpread$9({}, props), {}, {
+	    children: props.selectProps.isMulti ? /*#__PURE__*/jsxRuntime.jsx(Checkbox, {
+	      label: props.label,
+	      checked: props.isSelected,
+	      onChange: function onChange() {
+	        return null;
+	      },
+	      disabled: isLoadingOption
+	    }) : props.label
+	  }));
 	};
 
-	function _templateObject17$2() {
-	  var data = _taggedTemplateLiteral([""]);
-	  _templateObject17$2 = function _templateObject17() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject16$2() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: 10px;\n            top: auto;\n            bottom: -6px;\n            transform: rotate(-180deg);\n          }\n        "]);
-	  _templateObject16$2 = function _templateObject16() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject15$2() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: 10px;\n            top: auto;\n            bottom: -6px;\n            transform: rotate(-180deg);\n          }\n        "]);
-	  _templateObject15$2 = function _templateObject15() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject14$3() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: 0px;\n            right: 0px;\n          }\n        "]);
-	  _templateObject14$3 = function _templateObject14() {
-	    return data;
-	  };
-	  return data;
-	}
-	function _templateObject13$3() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: 10px;\n            right: auto;\n            top: auto;\n            bottom: -6px;\n            transform: rotate(-180deg);\n          }\n        "]);
-	  _templateObject13$3 = function _templateObject13() {
-	    return data;
-	  };
-	  return data;
-	}
 	function _templateObject12$5() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: -9px;\n            top: auto;\n            bottom: 10px;\n            transform: rotate(90deg);\n          }\n        "]);
+	  var data = _taggedTemplateLiteral(["\n      display: none;\n    "]);
 	  _templateObject12$5 = function _templateObject12() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject11$6() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: -9px;\n            right: auto;\n            top: 0px;\n            bottom: 0;\n            transform: rotate(-90deg);\n          }\n        "]);
+	  var data = _taggedTemplateLiteral(["\n  padding: 0 24px 12px;\n  padding-top: 8px;\n  ", "\n"]);
 	  _templateObject11$6 = function _templateObject11() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject10$7() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: -9px;\n            top: 10px;\n            bottom: auto;\n            transform: rotate(90deg);\n          }\n        "]);
+	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 12px 24px 0px 24px;\n  padding-bottom: ", ";\n  z-index: 1;\n  position: relative;\n  cursor: pointer;\n"]);
 	  _templateObject10$7 = function _templateObject10() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject9$7() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: -9px;\n            right: auto;\n            top: auto;\n            bottom: 10px;\n            transform: rotate(-90deg);\n          }\n        "]);
+	  var data = _taggedTemplateLiteral(["\n      transform: rotate(0deg);\n    "]);
 	  _templateObject9$7 = function _templateObject9() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject8$8() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: -9px;\n            top: 0px;\n            bottom: 0px;\n            transform: rotate(90deg);\n          }\n        "]);
+	  var data = _taggedTemplateLiteral(["\n  background: url(", ") no-repeat;\n  width: 10px;\n  background-size: 10px;\n  height: 10px;\n  display: inline-block;\n  transform: rotate(180deg);\n  background-position: center;\n  margin-left: 10px;\n  ", "\n"]);
 	  _templateObject8$8 = function _templateObject8() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject7$8() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: -9px;\n            right: auto;\n            top: 10px;\n            transform: rotate(-90deg);\n          }\n        "]);
+	  var data = _taggedTemplateLiteral(["\n      font-weight: 400;\n    "]);
 	  _templateObject7$8 = function _templateObject7() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject6$8() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: auto;\n            right: 10px;\n          }\n        "]);
+	  var data = _taggedTemplateLiteral(["\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 500;\n  //Low Resolution CSS starts\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    font-size: 14px;\n  }\n  ", "\n"]);
 	  _templateObject6$8 = function _templateObject6() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject5$a() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: 0px;\n            right: 0px;\n            top: auto;\n            bottom: -6px;\n            transform: rotate(-180deg);\n          }\n        "]);
+	  var data = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  padding-top: 8px;\n"]);
 	  _templateObject5$a = function _templateObject5() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject4$b() {
-	  var data = _taggedTemplateLiteral(["\n          &::after {\n            left: 10px;\n            right: auto;\n          }\n        "]);
+	  var data = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n    "]);
 	  _templateObject4$b = function _templateObject4() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject3$c() {
-	  var data = _taggedTemplateLiteral([""]);
+	  var data = _taggedTemplateLiteral(["\n      background: ", ";\n      border: 1px solid ", " !important;\n      cursor: default !important;\n      pointer-events: none;\n      &:hover {\n        border: 1px solid ", ";\n      }\n    "]);
 	  _templateObject3$c = function _templateObject3() {
 	    return data;
 	  };
 	  return data;
 	}
 	function _templateObject2$c() {
-	  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: 8px 16px;\n  border-radius: 4px;\n  max-width: 300px;\n  position: fixed;\n  color: ", ";\n  z-index: ", ";\n  font-size: 14px;\n  line-height: 21px;\n  visibility: ", ";\n  top: ", "px;\n  left: ", "px;\n  &::after {\n    width: 0;\n    height: 0;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-bottom: 6px solid ", ";\n    content: \" \";\n    position: absolute;\n    left: 0;\n    right: 0;\n    margin: auto;\n    top: -6px;\n  }\n  ", "\n"]);
+	  var data = _taggedTemplateLiteral(["\n          background: ", ";\n          border: 1px solid ", " !important;\n          cursor: default !important;\n          pointer-events: none;\n          &:hover {\n            border: 1px solid ", ";\n          }\n        "]);
 	  _templateObject2$c = function _templateObject2() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject$d() {
-	  var data = _taggedTemplateLiteral([""]);
-	  _templateObject$d = function _templateObject() {
+	function _templateObject$c() {
+	  var data = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  border: 1px solid ", ";\n  width: 100%;\n  &:hover {\n    border: 1px solid ", ";\n  }\n  &:focus {\n    box-shadow: 0 0 0 3px ", ";\n  }\n\n  //Low Resolution CSS starts\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    padding: 8px 14px;\n    font-size: 12px;\n  }\n\n  ", "\n\n  ", "\n  ", "\n"]);
+	  _templateObject$c = function _templateObject() {
 	    return data;
 	  };
 	  return data;
 	}
-	var StyledTooltipContainer = styled__default.div(_templateObject$d());
-	var StyledTooltip = styled__default.div(_templateObject2$c(), TooltipBackgroundColor, WhiteColor, function (props) {
-	  return props.zIndex;
-	}, function (props) {
-	  return props.displayTooltip ? "visible" : "hidden";
+	var StyledAccordionMainContainer = styled__default.div(_templateObject$c(), PrimaryBlueColor, PrimaryBlueColor, FocusBackgroundColor, function (props) {
+	  switch (props.variant) {
+	    case "disabled":
+	      return styled.css(_templateObject2$c(), DisabledTextareaBg, FocusDisableBorderColor, FocusDisableBorderColor);
+	  }
 	}, function (props) {
-	  return props.positionRef.current.y;
+	  return props.disabled && styled.css(_templateObject3$c(), DisabledTextareaBg, FocusDisableBorderColor, FocusDisableBorderColor);
 	}, function (props) {
-	  return props.positionRef.current.x;
-	}, TooltipBackgroundColor, function (props) {
-	  switch (props.placement) {
-	    case "default":
-	      return styled.css(_templateObject3$c());
-	    case "bottom-start":
-	      return styled.css(_templateObject4$b());
-	    case "top":
-	      return styled.css(_templateObject5$a());
-	    case "bottom-end":
-	      return styled.css(_templateObject6$8());
-	    case "right-start":
-	      return styled.css(_templateObject7$8());
-	    case "left":
-	      return styled.css(_templateObject8$8());
-	    case "right-end":
-	      //changed
-	      return styled.css(_templateObject9$7());
-	    case "left-start":
-	      return styled.css(_templateObject10$7());
-	    case "right":
-	      return styled.css(_templateObject11$6());
-	    case "left-end":
-	      //changed
-	      return styled.css(_templateObject12$5());
-	    case "top-start":
-	      //changed
-	      return styled.css(_templateObject13$3());
-	    case "bottom":
-	      return styled.css(_templateObject14$3());
-	    case "bottom-end":
-	      return styled.css(_templateObject15$2());
-	    case "top-end":
-	      return styled.css(_templateObject16$2());
-	    default:
-	      return styled.css(_templateObject17$2());
-	  }
+	  return !props.isOpen && styled.css(_templateObject4$b(), DefaultColorButton);
 	});
-
-	function Portal$1(props) {
-	  return /*#__PURE__*/ReactDOM.createPortal(props.children, props.container);
-	}
-	var point = function point() {
-	  return {
-	    x: null,
-	    y: null
-	  };
-	};
-	var getTooltipCoordinates = function getTooltipCoordinates(tooltipElement,
-	//element on which tooltip is renderTooltip
-	tooltipRef, placement, space) {
-	  var tooltipPosition = point();
-	  var tooltipElementRect = tooltipElement.getBoundingClientRect();
-	  switch (placement) {
-	    case "left":
-	      tooltipPosition.x = tooltipElementRect.left - (tooltipRef.offsetWidth + space);
-	      tooltipPosition.y = tooltipElementRect.top + (tooltipElement.offsetHeight - tooltipRef.offsetHeight) / 2;
-	      break;
-	    case "left-start":
-	      tooltipPosition.x = tooltipElementRect.left - (tooltipRef.offsetWidth + space);
-	      tooltipPosition.y = tooltipElementRect.top;
-	      break;
-	    case "left-end":
-	      tooltipPosition.x = tooltipElementRect.left - (tooltipRef.offsetWidth + space);
-	      tooltipPosition.y = tooltipElementRect.bottom - tooltipRef.offsetHeight;
-	      break;
-	    case "right":
-	      tooltipPosition.x = tooltipElementRect.right + space;
-	      tooltipPosition.y = tooltipElementRect.top + (tooltipElement.offsetHeight - tooltipRef.offsetHeight) / 2;
-	      break;
-	    case "right-start":
-	      tooltipPosition.x = tooltipElementRect.right + space;
-	      tooltipPosition.y = tooltipElementRect.top;
-	      break;
-	    case "right-end":
-	      tooltipPosition.x = tooltipElementRect.right + space;
-	      tooltipPosition.y = tooltipElementRect.bottom - tooltipRef.offsetHeight;
-	      break;
-	    case "top":
-	      tooltipPosition.x = tooltipElementRect.left + (tooltipElement.offsetWidth - tooltipRef.offsetWidth) / 2;
-	      tooltipPosition.y = tooltipElementRect.top - (tooltipRef.offsetHeight + space);
-	      break;
-	    case "top-start":
-	      tooltipPosition.x = tooltipElementRect.left;
-	      tooltipPosition.y = tooltipElementRect.top - (tooltipRef.offsetHeight + space);
-	      break;
-	    case "top-end":
-	      tooltipPosition.x = tooltipElementRect.right - tooltipRef.offsetWidth;
-	      tooltipPosition.y = tooltipElementRect.top - (tooltipRef.offsetHeight + space);
-	      break;
-	    case "bottom":
-	      tooltipPosition.x = tooltipElementRect.left + (tooltipElement.offsetWidth - tooltipRef.offsetWidth) / 2;
-	      tooltipPosition.y = tooltipElementRect.bottom + space;
-	      break;
-	    case "bottom-start":
-	      tooltipPosition.x = tooltipElementRect.left;
-	      tooltipPosition.y = tooltipElementRect.bottom + space;
-	      break;
-	    case "bottom-end":
-	      tooltipPosition.x = tooltipElementRect.right - tooltipRef.offsetWidth;
-	      tooltipPosition.y = tooltipElementRect.bottom + space;
-	      break;
-	  }
-	  return tooltipPosition;
-	};
-	var Tooltip = function Tooltip(_ref) {
-	  var text = _ref.text,
-	    _ref$placement = _ref.placement,
-	    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
-	    _ref$space = _ref.space,
-	    space = _ref$space === void 0 ? 15 : _ref$space,
+	var StyledAccordionContainerText = styled__default.div(_templateObject5$a(), DefaultColorButton);
+	var StyledAccordionLabel = styled__default.span(_templateObject6$8(), function (props) {
+	  return !props.isOpen && styled.css(_templateObject7$8());
+	});
+	var StyledAccordionChevron = styled__default.i(_templateObject8$8(), ChevronImage, function (props) {
+	  return !props.isOpen && styled.css(_templateObject9$7());
+	});
+	var StyledAccordionHeading = styled__default.div(_templateObject10$7(), function (props) {
+	  return !props.isOpen ? "12px" : "0px";
+	});
+	var StyledAccordionBodyContainer = styled__default.div(_templateObject11$6(), function (props) {
+	  return !props.isOpen && styled.css(_templateObject12$5());
+	});
+
+	function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	var AccordionComponent = function AccordionComponent(_ref) {
+	  var isOpen = _ref.isOpen,
+	    label = _ref.label,
+	    onChange = _ref.onChange,
+	    disabled = _ref.disabled,
 	    children = _ref.children,
-	    _ref$disabled = _ref.disabled,
-	    disabled = _ref$disabled === void 0 ? 0 : _ref$disabled,
-	    _ref$container = _ref.container,
-	    container = _ref$container === void 0 ? document.body : _ref$container,
-	    _ref$zIndex = _ref.zIndex,
-	    zIndex = _ref$zIndex === void 0 ? VERY_HIGH : _ref$zIndex;
-	  var _useState = React.useState(false),
+	    accRef = _ref.accRef,
+	    className = _ref.className,
+	    props = _objectWithoutProperties(_ref, ["isOpen", "label", "onChange", "disabled", "children", "accRef", "className"]);
+	  return /*#__PURE__*/jsxRuntime.jsxs(StyledAccordionMainContainer, _objectSpread$a(_objectSpread$a({
+	    isOpen: isOpen,
+	    disabled: disabled,
+	    ref: accRef,
+	    className: "".concat(className ? className : "", " accordion-container")
+	  }, props), {}, {
+	    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledAccordionHeading, {
+	      onClick: function onClick() {
+	        return onChange();
+	      },
+	      isOpen: isOpen,
+	      className: "accordion-heading",
+	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledAccordionLabel, {
+	        isOpen: isOpen,
+	        className: "accordion-label",
+	        children: label
+	      }), /*#__PURE__*/jsxRuntime.jsx(StyledAccordionChevron, {
+	        isOpen: isOpen
+	      })]
+	    }), /*#__PURE__*/jsxRuntime.jsx(StyledAccordionBodyContainer, {
+	      isOpen: isOpen,
+	      className: "accordion-body-container",
+	      children: /*#__PURE__*/jsxRuntime.jsx(StyledAccordionContainerText, {
+	        className: "accordion-body",
+	        children: children
+	      })
+	    })]
+	  }));
+	};
+	var Accordion = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+	  var isExpanded = _ref2.isExpanded,
+	    defaultExpanded = _ref2.defaultExpanded,
+	    onChange = _ref2.onChange,
+	    props = _objectWithoutProperties(_ref2, ["isExpanded", "defaultExpanded", "onChange"]);
+	  var _useState = React.useState(defaultExpanded),
 	    _useState2 = _slicedToArray(_useState, 2),
-	    renderTooltip = _useState2[0],
-	    setRenderTooltip = _useState2[1]; // render the tooltip so that its coords can be set
-	  var _useState3 = React.useState(false),
-	    _useState4 = _slicedToArray(_useState3, 2),
-	    displayTooltip = _useState4[0],
-	    setDisplayTooltip = _useState4[1]; // display tooltip only after the coords are set to avoid display at x=0, y=0 (default tooltipRef value)
-	  var positionRef = React.useRef({
-	    x: null,
-	    y: null
-	  });
-	  var tooltipRef = React.useRef();
-	  var containerRef = React.useRef(null);
+	    isOpen = _useState2[0],
+	    setIsOpen = _useState2[1];
+	  var initialRender = React.useRef(true);
 	  React.useEffect(function () {
-	    if (renderTooltip) {
-	      positionRef.current = getTooltipCoordinates(containerRef.current, tooltipRef.current, placement, space);
-	      setDisplayTooltip(true);
+	    if (initialRender.current) {
+	      initialRender.current = false;
+	    } else {
+	      if (onChange) {
+	        onChange(isOpen);
+	      }
 	    }
-	  }, [renderTooltip]);
-	  var handleMouseOver = function handleMouseOver(e) {
-	    if (disabled) return;
-	    setRenderTooltip(true);
-	  };
-	  var handleMouseLeave = function handleMouseLeave() {
-	    if (disabled) return;
-	    setRenderTooltip(false);
-	    setDisplayTooltip(false);
+	  }, [isOpen]);
+	  var handleAccordionAction = function handleAccordionAction() {
+	    setIsOpen(function (prevState) {
+	      return !prevState;
+	    });
 	  };
-	  return /*#__PURE__*/jsxRuntime.jsxs(StyledTooltipContainer, {
-	    onMouseOver: handleMouseOver,
-	    onMouseLeave: handleMouseLeave,
-	    ref: containerRef,
-	    children: [children, renderTooltip && !disabled && /*#__PURE__*/jsxRuntime.jsx(Portal$1, {
-	      container: container,
-	      children: /*#__PURE__*/jsxRuntime.jsx(StyledTooltip, {
-	        ref: tooltipRef,
-	        positionRef: positionRef,
-	        displayTooltip: displayTooltip,
-	        placement: placement,
-	        zIndex: zIndex,
-	        children: text
-	      })
-	    })]
+	  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+	    children: isExpanded !== undefined ?
+	    /*#__PURE__*/
+	    // controlled
+	    jsxRuntime.jsx(AccordionComponent, _objectSpread$a({
+	      isOpen: isExpanded,
+	      onChange: onChange,
+	      accRef: ref
+	    }, props)) :
+	    /*#__PURE__*/
+	    // uncontrolled
+	    jsxRuntime.jsx(AccordionComponent, _objectSpread$a({
+	      isOpen: isOpen,
+	      onChange: handleAccordionAction,
+	      accRef: ref
+	    }, props))
 	  });
-	};
+	});
+
+	function _templateObject$d() {
+	  var data = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: 4px;\n  height: 37px;\n  display: flex;\n  width: max-content;\n\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    height: ", ";\n  }\n\n  ", " {\n    /* color: ", "; */\n    border-radius: 0px;\n    /* background: ", "; */\n    border: none;\n    border-right: 1px solid ", ";\n    &:focus {\n      box-shadow: none;\n    }\n    /* &:hover {\n      background: ", ";\n    } */\n    &:first-child {\n      border-radius: 3px 0 0 3px;\n    }\n    &:last-child {\n      border-right: none;\n      border-radius: 0px 3px 3px 0px;\n    }\n  }\n"]);
+	  _templateObject$d = function _templateObject() {
+	    return data;
+	  };
+	  return data;
+	}
+	var StyledButtonGroup = styled__default.div(_templateObject$d(), DefaultColorButton, LOW_RES_NORMAL_BUTTON_HEIGHT, StyledButton, CheckBoxBorder, WhiteColor, DefaultColorButton, FocusBackgroundColor);
+
+	function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+	  var children = _ref.children,
+	    props = _objectWithoutProperties(_ref, ["children"]);
+	  return /*#__PURE__*/jsxRuntime.jsx(StyledButtonGroup, _objectSpread$b(_objectSpread$b({
+	    ref: ref
+	  }, props), {}, {
+	    children: children.map(function (child, index) {
+	      return /*#__PURE__*/React__default.isValidElement(child) && /*#__PURE__*/React__default.cloneElement(child, {
+	        variant: "secondary",
+	        key: index
+	      });
+	    })
+	  }));
+	});
 
 	function _templateObject9$8() {
 	  var data = _taggedTemplateLiteral(["\n          ", " {\n            background: ", ";\n          }\n          ", " {\n            color: ", ";\n          }\n        "]);
@@ -3544,7 +3775,7 @@
 	  }
 	});
 
-	var ProgressBar = function ProgressBar(_ref) {
+	var ProgressBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var label = _ref.label,
 	    progress = _ref.progress,
 	    _ref$variant = _ref.variant,
@@ -3555,17 +3786,23 @@
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledProgressBarMainContainer, {
 	    variant: variant,
 	    status: status,
+	    className: "progressBar-main-container",
+	    ref: ref,
 	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledProgressBarLabel, {
+	      className: "progressBar-label",
 	      children: label
 	    }), /*#__PURE__*/jsxRuntime.jsx(StyledProgressBarContainer, {
+	      className: "progressBar-container",
 	      children: /*#__PURE__*/jsxRuntime.jsx(StyledProgressStatusBar, {
-	        progress: progress
+	        progress: progress,
+	        className: "progressBar-status"
 	      })
 	    }), /*#__PURE__*/jsxRuntime.jsx(StyledCompletedProgressText, {
+	      className: "progressBar-progress-test",
 	      children: status === "error" ? errorMessage : "".concat(progress, " % Completed")
 	    })]
 	  });
-	};
+	});
 
 	function _templateObject$f() {
 	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 12px;\n"]);
@@ -3576,14 +3813,19 @@
 	}
 	var StyledTagGroupOuterContainer$1 = styled__default.div(_templateObject$f());
 
-	var TagGroup = function TagGroup(_ref) {
-	  var children = _ref.children;
-	  return /*#__PURE__*/jsxRuntime.jsx("div", {
-	    children: /*#__PURE__*/jsxRuntime.jsx(StyledTagGroupOuterContainer$1, {
+	function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	var TagGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+	  var children = _ref.children,
+	    props = _objectWithoutProperties(_ref, ["children"]);
+	  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+	    children: /*#__PURE__*/jsxRuntime.jsx(StyledTagGroupOuterContainer$1, _objectSpread$c(_objectSpread$c({
+	      ref: ref
+	    }, props), {}, {
 	      children: children
-	    })
+	    }))
 	  });
-	};
+	});
 
 	var moment = createCommonjsModule(function (module, exports) {
 	(function (global, factory) {
@@ -9271,9 +9513,9 @@
 	  };
 	  return data;
 	}
-	function _templateObject19$1() {
+	function _templateObject19$2() {
 	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  background: ", ";\n  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  padding-top: 10px;\n  padding-bottom: 20px;\n  height: 282px;\n  top: 41px;\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    top: 33px;\n  }\n  ", "\n\n  .PresetDateRangePicker_panel {\n    padding: 0 22px 11px;\n  }\n  .PresetDateRangePicker_button {\n    position: relative;\n    height: 100%;\n    text-align: center;\n    background: 0 0;\n    border: 2px solid #00a699;\n    color: #00a699;\n    padding: 4px 12px;\n    margin-right: 8px;\n    font: inherit;\n    font-weight: 700;\n    line-height: normal;\n    overflow: visible;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n    cursor: pointer;\n  }\n  .PresetDateRangePicker_button:active {\n    outline: 0;\n  }\n  .PresetDateRangePicker_button__selected {\n    color: #fff;\n    background: #00a699;\n  }\n  .SingleDatePickerInput {\n    display: inline-block;\n    background-color: #fff;\n  }\n  .SingleDatePickerInput__withBorder {\n    border-radius: 2px;\n    border: 1px solid #dbdbdb;\n  }\n  .SingleDatePickerInput__rtl {\n    direction: rtl;\n  }\n  .SingleDatePickerInput__disabled {\n    background-color: #f2f2f2;\n  }\n  .SingleDatePickerInput__block {\n    display: block;\n  }\n  .SingleDatePickerInput__showClearDate {\n    padding-right: 30px;\n  }\n  .SingleDatePickerInput_clearDate {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    padding: 10px;\n    margin: 0 10px 0 5px;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    -webkit-transform: translateY(-50%);\n    -ms-transform: translateY(-50%);\n    transform: translateY(-50%);\n  }\n  .SingleDatePickerInput_clearDate__default:focus,\n  .SingleDatePickerInput_clearDate__default:hover {\n    background: #dbdbdb;\n    border-radius: 50%;\n  }\n  .SingleDatePickerInput_clearDate__small {\n    padding: 6px;\n  }\n  .SingleDatePickerInput_clearDate__hide {\n    visibility: hidden;\n  }\n  .SingleDatePickerInput_clearDate_svg {\n    fill: #82888a;\n    height: 12px;\n    width: 15px;\n    vertical-align: middle;\n  }\n  .SingleDatePickerInput_clearDate_svg__small {\n    height: 9px;\n  }\n  .SingleDatePickerInput_calendarIcon {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    display: inline-block;\n    vertical-align: middle;\n    padding: 10px;\n    margin: 0 5px 0 10px;\n  }\n  .SingleDatePickerInput_calendarIcon_svg {\n    fill: #82888a;\n    height: 15px;\n    width: 14px;\n    vertical-align: middle;\n  }\n  .SingleDatePicker {\n    position: relative;\n    display: inline-block;\n  }\n  .SingleDatePicker__block {\n    display: block;\n  }\n  .SingleDatePicker_picker {\n    z-index: 1;\n    background-color: #fff;\n    position: absolute;\n  }\n  .SingleDatePicker_picker__rtl {\n    direction: rtl;\n  }\n  .SingleDatePicker_picker__directionLeft {\n    left: 0;\n  }\n  .SingleDatePicker_picker__directionRight {\n    right: 0;\n  }\n  .SingleDatePicker_picker__portal {\n    background-color: rgba(0, 0, 0, 0.3);\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n  }\n  .SingleDatePicker_picker__fullScreenPortal {\n    background-color: #fff;\n  }\n  .SingleDatePicker_closeButton {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    right: 0;\n    padding: 15px;\n    z-index: 2;\n  }\n  .SingleDatePicker_closeButton:focus,\n  .SingleDatePicker_closeButton:hover {\n    color: darken(#cacccd, 10%);\n    text-decoration: none;\n  }\n  .SingleDatePicker_closeButton_svg {\n    height: 15px;\n    width: 15px;\n    fill: #cacccd;\n  }\n  .DayPickerKeyboardShortcuts_buttonReset {\n    background: 0 0;\n    border: 0;\n    border-radius: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    padding: 0;\n    cursor: pointer;\n    font-size: 14px;\n  }\n  .DayPickerKeyboardShortcuts_buttonReset:active {\n    outline: 0;\n  }\n  .DayPickerKeyboardShortcuts_show {\n    width: 33px;\n    height: 26px;\n    position: absolute;\n    z-index: 2;\n  }\n  .DayPickerKeyboardShortcuts_show::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n  }\n  .DayPickerKeyboardShortcuts_show__bottomRight {\n    bottom: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__bottomRight::before {\n    border-top: 26px solid transparent;\n    border-right: 33px solid #00a699;\n    bottom: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__bottomRight:hover::before {\n    border-right: 33px solid #008489;\n  }\n  .DayPickerKeyboardShortcuts_show__topRight {\n    top: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topRight::before {\n    border-bottom: 26px solid transparent;\n    border-right: 33px solid #00a699;\n    top: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topRight:hover::before {\n    border-right: 33px solid #008489;\n  }\n  .DayPickerKeyboardShortcuts_show__topLeft {\n    top: 0;\n    left: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topLeft::before {\n    border-bottom: 26px solid transparent;\n    border-left: 33px solid #00a699;\n    top: 0;\n    left: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topLeft:hover::before {\n    border-left: 33px solid #008489;\n  }\n  .DayPickerKeyboardShortcuts_showSpan {\n    color: #fff;\n    position: absolute;\n  }\n  .DayPickerKeyboardShortcuts_showSpan__bottomRight {\n    bottom: 0;\n    right: 5px;\n  }\n  .DayPickerKeyboardShortcuts_showSpan__topRight {\n    top: 1px;\n    right: 5px;\n  }\n  .DayPickerKeyboardShortcuts_showSpan__topLeft {\n    top: 1px;\n    left: 5px;\n  }\n  .DayPickerKeyboardShortcuts_panel {\n    overflow: auto;\n    background: #fff;\n    border: 1px solid #dbdbdb;\n    border-radius: 2px;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    z-index: 2;\n    padding: 22px;\n    margin: 33px;\n    text-align: left;\n  }\n  .DayPickerKeyboardShortcuts_title {\n    font-size: 16px;\n    font-weight: 700;\n    margin: 0;\n  }\n  .DayPickerKeyboardShortcuts_list {\n    list-style: none;\n    padding: 0;\n    font-size: 14px;\n  }\n  .DayPickerKeyboardShortcuts_close {\n    position: absolute;\n    right: 22px;\n    top: 22px;\n    z-index: 2;\n  }\n  .DayPickerKeyboardShortcuts_close:active {\n    outline: 0;\n  }\n  .DayPickerKeyboardShortcuts_closeSvg {\n    height: 15px;\n    width: 15px;\n    fill: #cacccd;\n  }\n  .DayPickerKeyboardShortcuts_closeSvg:focus,\n  .DayPickerKeyboardShortcuts_closeSvg:hover {\n    fill: #82888a;\n  }\n  .CalendarDay {\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n    cursor: pointer;\n    font-size: 14px;\n    text-align: center;\n    position: relative;\n  }\n\n  .CalendarDay .CalendarDayWeekNumber {\n    position: absolute;\n    left: -20px;\n    top: 5px;\n    display: none;\n    color: #1d1d1d;\n    display: block;\n    border-right: 0.5px solid #1d1d1d;\n    width: 18px;\n  }\n\n  .CalendarDay:active {\n    outline: 0;\n  }\n  .CalendarDay__defaultCursor {\n    cursor: default;\n  }\n  .CalendarDay__default {\n    color: #1d1d1d;\n    font-size: 12px;\n    background: #fff;\n  }\n  .CalendarDay__default:hover {\n    background: #0055af;\n    color: #fff;\n    border-radius: 50%;\n  }\n  .CalendarDay__hovered_offset {\n    /* background: #f4f5f5; */\n  }\n  .CalendarDay__outside {\n    border: 0;\n    background: #fff;\n    color: #484848;\n  }\n  .CalendarDay__outside:hover {\n    border: 0;\n  }\n  .CalendarDay__blocked_minimum_nights {\n  }\n  .CalendarDay__blocked_minimum_nights:active,\n  .CalendarDay__blocked_minimum_nights:hover {\n    background: #fff;\n    color: #cacccd;\n  }\n  .CalendarDay__highlighted_calendar {\n    background: #ffe8bc;\n    color: #484848;\n  }\n  .CalendarDay__highlighted_calendar:active,\n  .CalendarDay__highlighted_calendar:hover {\n    background: #ffce71;\n    color: #484848;\n  }\n  .CalendarDay__selected_span {\n    background: #e5edf7;\n  }\n  .CalendarDay__selected_span:active,\n  .CalendarDay__selected_span:hover {\n    background: #0055af;\n    color: #fff;\n  }\n  .CalendarDay__selected,\n  .CalendarDay__selected:active,\n  .CalendarDay__selected:hover {\n    background: #0055af;\n    color: #fff;\n    border-radius: 50%;\n  }\n\n  .CalendarDay__hovered_span,\n  .CalendarDay__hovered_span:hover {\n    background: #e5edf7;\n    color: #1d1d1d;\n  }\n  .CalendarDay__hovered_span:active {\n    /* background: #80e8e0 green color;\n    border: 1px double #80e8e0;\n    color: #007a87; */\n  }\n  .CalendarDay__blocked_calendar,\n  .CalendarDay__blocked_calendar:active,\n  .CalendarDay__blocked_calendar:hover {\n    background: #cacccd;\n    border: 1px solid #cacccd;\n    color: #82888a;\n  }\n  .CalendarDay__blocked_out_of_range,\n  .CalendarDay__blocked_out_of_range:active,\n  .CalendarDay__blocked_out_of_range:hover {\n    background: #fff;\n    border: 1px solid #e4e7e7;\n    color: #cacccd;\n  }\n  .CalendarDay__hovered_start_first_possible_end {\n    background: #eceeee;\n    border: 1px double #eceeee;\n  }\n  .CalendarDay__hovered_start_blocked_min_nights {\n    background: #eceeee;\n    border: 1px double #e4e7e7;\n  }\n  .CalendarMonth {\n    background: #fff;\n    text-align: center;\n    vertical-align: top;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .CalendarMonth_table {\n    border-collapse: collapse;\n    border-spacing: 0;\n    margin-top: 12px;\n  }\n  .CalendarMonth_verticalSpacing {\n    border-collapse: separate;\n  }\n  .CalendarMonth_caption {\n    color: #1d1d1d;\n    font-size: 12px;\n    text-align: center;\n    padding-top: 22px;\n    padding-bottom: 37px;\n    caption-side: initial;\n    font-weight: 500;\n  }\n  .CalendarMonth_caption__verticalScrollable {\n    padding-bottom: 7px;\n  }\n  .CalendarMonthGrid {\n    background: #fff;\n    text-align: left;\n    z-index: 0;\n  }\n  .CalendarMonthGrid__animating {\n    z-index: 1;\n  }\n  .CalendarMonthGrid__horizontal {\n    position: absolute;\n    left: 9px;\n  }\n  .CalendarMonthGrid__vertical,\n  .CalendarMonthGrid__vertical_scrollable {\n    margin: 0 auto;\n  }\n  .CalendarMonthGrid_month__horizontal {\n    display: inline-block;\n    vertical-align: top;\n    min-height: 100%;\n  }\n  .CalendarMonthGrid_month__hideForAnimation {\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .CalendarMonthGrid_month__hidden {\n    visibility: hidden;\n  }\n  .DayPickerNavigation {\n    position: relative;\n    z-index: 2;\n  }\n  .DayPickerNavigation__horizontal {\n    height: 0;\n  }\n  .DayPickerNavigation__verticalScrollable_prevNav {\n    z-index: 1;\n  }\n  .DayPickerNavigation__verticalDefault {\n    position: absolute;\n    width: 100%;\n    height: 52px;\n    bottom: 0;\n    left: 0;\n  }\n  .DayPickerNavigation__verticalScrollableDefault {\n    position: relative;\n  }\n  .DayPickerNavigation__bottom {\n    height: auto;\n  }\n  .DayPickerNavigation__bottomDefault {\n    -webkit-box-pack: justify;\n    -ms-flex-pack: justify;\n    display: -webkit-box;\n    display: -moz-box;\n    display: -ms-flexbox;\n    display: -webkit-flex;\n    display: flex;\n    -webkit-justify-content: space-between;\n    justify-content: space-between;\n  }\n  .DayPickerNavigation_button {\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    border: 0;\n    padding: 0;\n    margin: 0;\n  }\n  .DayPickerNavigation_button__default {\n    background: url(", ") no-repeat;\n    /* width: 16px;\n  height: 16px; */\n    background-size: 12px;\n    transform: rotate(90deg);\n  }\n  .DayPickerNavigation_button__default svg {\n    display: none;\n  }\n  .DayPickerNavigation_button__default:focus,\n  .DayPickerNavigation_button__default:hover {\n    /* border: 1px solid #c4c4c4 */\n  }\n  .DayPickerNavigation_button__default:active {\n    /* background: #f2f2f2 */\n  }\n  .DayPickerNavigation_button__disabled {\n    /* cursor: default;\n    border: 1px solid #f2f2f2 */\n    opacity: 0.8;\n  }\n  .DayPickerNavigation_button__disabled:focus,\n  .DayPickerNavigation_button__disabled:hover {\n    /* border: 1px solid #f2f2f2 */\n  }\n  .DayPickerNavigation_button__disabled:active {\n    /* background: 0 0 */\n  }\n  .DayPickerNavigation_button__horizontalDefault {\n    position: absolute;\n    top: 25px;\n    line-height: 0.78;\n    border-radius: 3px;\n    padding: 6px 6px;\n  }\n  .DayPickerNavigation_bottomButton__horizontalDefault {\n    position: static;\n    margin: -10px 22px 30px;\n  }\n  .DayPickerNavigation_leftButton__horizontalDefault {\n    left: 22px;\n  }\n  .DayPickerNavigation_rightButton__horizontalDefault {\n    transform: rotate(-90deg);\n    right: 22px;\n  }\n  .DayPickerNavigation_button__verticalDefault {\n    padding: 5px;\n    background: #fff;\n    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);\n    position: relative;\n    display: inline-block;\n    text-align: center;\n    height: 100%;\n    width: 50%;\n  }\n  .DayPickerNavigation_nextButton__verticalDefault {\n    border-left: 0;\n  }\n  .DayPickerNavigation_nextButton__verticalScrollableDefault,\n  .DayPickerNavigation_prevButton__verticalScrollableDefault {\n    width: 100%;\n  }\n  .DayPickerNavigation_svg__horizontal {\n  }\n  .DayPickerNavigation_svg__vertical {\n    height: 42px;\n    width: 42px;\n    fill: #484848;\n  }\n  .DayPickerNavigation_svg__disabled {\n    fill: #f2f2f2;\n  }\n  .DayPicker {\n    background: #fff;\n    position: relative;\n    text-align: left;\n  }\n  .DayPicker__horizontal {\n    background: #fff;\n  }\n  .DayPicker__verticalScrollable {\n    height: 100%;\n  }\n  .DayPicker__hidden {\n    visibility: hidden;\n  }\n  .DayPicker__withBorder {\n    /* box-shadow: 0 2px 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.07);\n    border-radius: 3px */\n  }\n  .DayPicker_portal__horizontal {\n    box-shadow: none;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n  }\n  .DayPicker_portal__vertical {\n    position: initial;\n  }\n  .DayPicker_focusRegion {\n    outline: 0;\n  }\n  .DayPicker_calendarInfo__horizontal,\n  .DayPicker_wrapper__horizontal {\n    display: inline-block;\n    vertical-align: top;\n  }\n  .DayPicker_weekHeaders {\n    position: relative;\n  }\n  .DayPicker_weekHeaders__horizontal {\n    margin-left: 9px;\n  }\n  .DayPicker_weekHeader {\n    color: #757575;\n    position: absolute;\n    top: 62px;\n    z-index: 2;\n    text-align: left;\n  }\n  .DayPicker_weekHeader__vertical {\n    left: 50%;\n  }\n  .DayPicker_weekHeader__verticalScrollable {\n    top: 0;\n    display: table-row;\n    border-bottom: 1px solid #dbdbdb;\n    background: #fff;\n    margin-left: 0;\n    left: 0;\n    width: 100%;\n    text-align: center;\n  }\n  .DayPicker_weekHeader_ul {\n    list-style: none;\n    margin: 1px 0;\n    padding-left: 0;\n    padding-right: 0;\n    font-size: 14px;\n  }\n  .DayPicker_weekHeader_li {\n    display: inline-block;\n    text-align: center;\n  }\n  .DayPicker_weekHeader_li small {\n    font-size: 12px;\n    color: #758490;\n    line-height: 18px;\n  }\n  .DayPicker_transitionContainer {\n    position: relative;\n    overflow: hidden;\n    border-radius: 3px;\n  }\n  .DayPicker_transitionContainer__horizontal {\n    -webkit-transition: height 0.2s ease-in-out;\n    -moz-transition: height 0.2s ease-in-out;\n    transition: height 0.2s ease-in-out;\n  }\n  .DayPicker_transitionContainer__vertical {\n    width: 100%;\n  }\n  .DayPicker_transitionContainer__verticalScrollable {\n    padding-top: 20px;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    overflow-y: scroll;\n  }\n  .DateInput {\n    margin: 0;\n    padding: 0;\n    background: #fff;\n    position: relative;\n    display: inline-block;\n    width: 130px;\n    vertical-align: middle;\n  }\n  .DateInput__small {\n    width: 97px;\n  }\n  .DateInput__block {\n    width: 100%;\n  }\n  .DateInput__disabled {\n    background: #f2f2f2;\n    color: #dbdbdb;\n  }\n  .DateInput_input {\n    font-weight: 200;\n    font-size: 19px;\n    line-height: 24px;\n    color: #484848;\n    background-color: #fff;\n    width: 100%;\n    padding: 11px 11px 9px;\n    border: 0;\n    border-top: 0;\n    border-right: 0;\n    border-bottom: 2px solid transparent;\n    border-left: 0;\n    border-radius: 0;\n  }\n  .DateInput_input__small {\n    font-size: 15px;\n    line-height: 18px;\n    letter-spacing: 0.2px;\n    padding: 7px 7px 5px;\n  }\n  .DateInput_input__regular {\n    font-weight: auto;\n  }\n  .DateInput_input__readOnly {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .DateInput_input__focused {\n    outline: 0;\n    background: #fff;\n    border: 0;\n    border-top: 0;\n    border-right: 0;\n    border-bottom: 2px solid #008489;\n    border-left: 0;\n  }\n  .DateInput_input__disabled {\n    background: #f2f2f2;\n    font-style: italic;\n  }\n  .DateInput_screenReaderMessage {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n  .DateInput_fang {\n    position: absolute;\n    width: 20px;\n    height: 10px;\n    left: 22px;\n    z-index: 2;\n  }\n  .DateInput_fangShape {\n    fill: #fff;\n  }\n  .DateInput_fangStroke {\n    stroke: #dbdbdb;\n    fill: transparent;\n  }\n  .DateRangePickerInput {\n    background-color: #fff;\n    display: inline-block;\n  }\n  .DateRangePickerInput__disabled {\n    background: #f2f2f2;\n  }\n  .DateRangePickerInput__withBorder {\n    border-radius: 2px;\n    border: 1px solid #dbdbdb;\n  }\n  .DateRangePickerInput__rtl {\n    direction: rtl;\n  }\n  .DateRangePickerInput__block {\n    display: block;\n  }\n  .DateRangePickerInput__showClearDates {\n    padding-right: 30px;\n  }\n  .DateRangePickerInput_arrow {\n    display: inline-block;\n    vertical-align: middle;\n    color: #484848;\n  }\n  .DateRangePickerInput_arrow_svg {\n    vertical-align: middle;\n    fill: #484848;\n    height: 24px;\n    width: 24px;\n  }\n  .DateRangePickerInput_clearDates {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    padding: 10px;\n    margin: 0 10px 0 5px;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    -webkit-transform: translateY(-50%);\n    -ms-transform: translateY(-50%);\n    transform: translateY(-50%);\n  }\n  .DateRangePickerInput_clearDates__small {\n    padding: 6px;\n  }\n  .DateRangePickerInput_clearDates_default:focus,\n  .DateRangePickerInput_clearDates_default:hover {\n    background: #dbdbdb;\n    border-radius: 50%;\n  }\n  .DateRangePickerInput_clearDates__hide {\n    visibility: hidden;\n  }\n  .DateRangePickerInput_clearDates_svg {\n    fill: #82888a;\n    height: 12px;\n    width: 15px;\n    vertical-align: middle;\n  }\n  .DateRangePickerInput_clearDates_svg__small {\n    height: 9px;\n  }\n  .DateRangePickerInput_calendarIcon {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    display: inline-block;\n    vertical-align: middle;\n    padding: 10px;\n    margin: 0 5px 0 10px;\n  }\n  .DateRangePickerInput_calendarIcon_svg {\n    fill: #82888a;\n    height: 15px;\n    width: 14px;\n    vertical-align: middle;\n  }\n  .DateRangePicker {\n    position: relative;\n    display: inline-block;\n  }\n  .DateRangePicker__block {\n    display: block;\n  }\n  .DateRangePicker_picker {\n    z-index: 1;\n    background-color: #fff;\n    position: absolute;\n  }\n  .DateRangePicker_picker__rtl {\n    direction: rtl;\n  }\n  .DateRangePicker_picker__directionLeft {\n    left: 0;\n  }\n  .DateRangePicker_picker__directionRight {\n    right: 0;\n  }\n  .DateRangePicker_picker__portal {\n    background-color: rgba(0, 0, 0, 0.3);\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n  }\n  .DateRangePicker_picker__fullScreenPortal {\n    background-color: #fff;\n  }\n  .DateRangePicker_closeButton {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    right: 0;\n    padding: 15px;\n    z-index: 2;\n  }\n  .DateRangePicker_closeButton:focus,\n  .DateRangePicker_closeButton:hover {\n    color: darken(#cacccd, 10%);\n    text-decoration: none;\n  }\n  .DateRangePicker_closeButton_svg {\n    height: 15px;\n    width: 15px;\n    fill: #cacccd;\n  }\n"]);
-	  _templateObject19$1 = function _templateObject19() {
+	  _templateObject19$2 = function _templateObject19() {
 	    return data;
 	  };
 	  return data;
@@ -9423,15 +9665,15 @@
 	  return props.isDatesSelected && styled.css(_templateObject17$3(), StyledInputEndDate, PrimaryBlueColor, StyledInputStartDate, PrimaryBlueColor);
 	}, StyledInputEndDate, PrimaryBlueColor, StyledInputStartDate, PrimaryBlueColor);
 	var StyledInputStartDateSingle = styled__default.input(_templateObject18$2(), calendarIcon, DefaultColorButton, PrimaryBlueColor, PrimaryBlueColor, FocusBackgroundColor);
-	var StyledDatepickerMainContainer = styled__default.div(_templateObject19$1(), WhiteColor, function (props) {
+	var StyledDatepickerMainContainer = styled__default.div(_templateObject19$2(), WhiteColor, function (props) {
 	  if (!props.showOnlyCalender) {
 	    return styled.css(_templateObject20$1(), LOW_4);
 	  }
 	}, ChevronImage);
 
-	function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var DateRangePicker = function DateRangePicker(_ref) {
+	function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	var DateRangePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var label = _ref.label,
 	    showRangeSelector = _ref.showRangeSelector,
 	    showInputs = _ref.showInputs,
@@ -9446,7 +9688,9 @@
 	    setEndDate = _ref.setEndDate,
 	    showOnlyCalender = _ref.showOnlyCalender,
 	    showWeekNumbers = _ref.showWeekNumbers,
-	    props = _objectWithoutProperties(_ref, ["label", "showRangeSelector", "showInputs", "initialStartDate", "initialEndDate", "disabled", "startDateInputProps", "endDateInputProps", "startDate", "setStartDate", "endDate", "setEndDate", "showOnlyCalender", "showWeekNumbers"]);
+	    primaryButtonProps = _ref.primaryButtonProps,
+	    tertiaryButtonProps = _ref.tertiaryButtonProps,
+	    props = _objectWithoutProperties(_ref, ["label", "showRangeSelector", "showInputs", "initialStartDate", "initialEndDate", "disabled", "startDateInputProps", "endDateInputProps", "startDate", "setStartDate", "endDate", "setEndDate", "showOnlyCalender", "showWeekNumbers", "primaryButtonProps", "tertiaryButtonProps"]);
 	  var _useState = React.useState(showOnlyCalender),
 	    _useState2 = _slicedToArray(_useState, 2),
 	    isOpen = _useState2[0],
@@ -9569,36 +9813,45 @@
 	      })]
 	    });
 	  }, []);
-	  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+	  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+	    ref: ref === null || ref === void 0 ? void 0 : ref.containerRef,
 	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledLabelContainer, {
+	      className: "dateRangePicker-label",
 	      children: label
 	    }), /*#__PURE__*/jsxRuntime.jsx(ClickAwayListener, {
 	      onClickAway: handleClickAway,
 	      children: /*#__PURE__*/jsxRuntime.jsxs(StyledContainer, {
+	        className: "dateRangePicker-input-main-container",
 	        children: [!showOnlyCalender && /*#__PURE__*/jsxRuntime.jsxs(StyledInputDateRangPickerContainer, {
 	          isDatesSelected: startDate !== null && endDate !== null,
-	          children: [/*#__PURE__*/jsxRuntime.jsx(StyledInputStartDate, _objectSpread$b(_objectSpread$b({
+	          className: "dateRangePicker-input-container",
+	          ref: ref === null || ref === void 0 ? void 0 : ref.inputContainerRef,
+	          children: [/*#__PURE__*/jsxRuntime.jsx(StyledInputStartDate, _objectSpread$d(_objectSpread$d({
 	            type: "text",
 	            placeholder: "Start Date",
 	            value: startDateString || "",
 	            onFocus: handleStartDateFocus,
 	            ref: starDateInputRef
 	          }, startDateInputProps), {}, {
-	            readOnly: true
-	          })), /*#__PURE__*/jsxRuntime.jsx(StyledInputEndDate, _objectSpread$b(_objectSpread$b({
+	            readOnly: true,
+	            className: "dateRangePicker-input-start-date"
+	          })), /*#__PURE__*/jsxRuntime.jsx(StyledInputEndDate, _objectSpread$d(_objectSpread$d({
 	            type: "text",
 	            placeholder: "End Date",
 	            value: endDateString || "",
 	            onFocus: handleEndDateFocus,
 	            ref: endDateInputRef
 	          }, endDateInputProps), {}, {
-	            readOnly: true
+	            readOnly: true,
+	            className: "dateRangePicker-input-end-date"
 	          }))]
 	        }), isOpen && /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
 	          children: /*#__PURE__*/jsxRuntime.jsxs(StyledDatepickerMainContainer, {
 	            showOnlyCalender: showOnlyCalender,
+	            className: "dateRangePicker-main-container",
 	            children: [/*#__PURE__*/jsxRuntime.jsxs(StyledDatePickerLeftContainer, {
-	              children: [/*#__PURE__*/jsxRuntime.jsx(reactDates.DayPickerRangeController, _objectSpread$b({
+	              className: "dateRangePicker-left-container",
+	              children: [/*#__PURE__*/jsxRuntime.jsx(reactDates.DayPickerRangeController, _objectSpread$d({
 	                onDatesChange: onDatesChange,
 	                onFocusChange: onFocusChange,
 	                focusedInput: focusedInput,
@@ -9611,7 +9864,9 @@
 	                endDateOffset: selectedRange === "custom" ? undefined : setEndDateOffset,
 	                renderDayContents: renderDayContents
 	              }, props)), /*#__PURE__*/jsxRuntime.jsxs(StyledBottomCTAContainer, {
+	                className: "dateRangePicker-buttons-container",
 	                children: [props.numberOfMonths > 1 ? /*#__PURE__*/jsxRuntime.jsxs(StyledLeftCTAContainer, {
+	                  className: "dateRangePicker-buttons-left-container",
 	                  children: [/*#__PURE__*/jsxRuntime.jsxs(StyledLabelContainer, {
 	                    children: [selectedDaysNumber, " Days Selected"]
 	                  }), /*#__PURE__*/jsxRuntime.jsx(Button, {
@@ -9621,30 +9876,38 @@
 	                    children: "Reset"
 	                  })]
 	                }) : null, /*#__PURE__*/jsxRuntime.jsxs(StyledRightCTAContainer, {
-	                  children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+	                  className: "dateRangePicker-buttons-right-container",
+	                  children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$d(_objectSpread$d({
 	                    variant: "url",
-	                    size: "small",
+	                    size: "small"
+	                  }, tertiaryButtonProps), {}, {
 	                    children: "Cancel"
-	                  }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+	                  })), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$d(_objectSpread$d({
 	                    variant: "primary",
-	                    size: "small",
+	                    size: "small"
+	                  }, primaryButtonProps), {}, {
 	                    children: "Apply"
-	                  })]
+	                  }))]
 	                })]
 	              })]
 	            }), showRangeSelector && /*#__PURE__*/jsxRuntime.jsxs(StyledShortcutMainContainer, {
+	              className: "dateRangePicker-shortcut-main-container",
 	              children: [/*#__PURE__*/jsxRuntime.jsx(StyledShortcutHeading, {
+	                className: "dateRangePicker-shortcut-heading",
 	                children: "Date Range"
 	              }), /*#__PURE__*/jsxRuntime.jsx(StyledRadioListUl, {
+	                className: "dateRangePicker-shortcut-list",
 	                children: rangeSelectorTypes.map(function (range, i) {
 	                  return /*#__PURE__*/jsxRuntime.jsx(StyledRadioListLi, {
+	                    className: "dateRangePicker-shortcut-list-item",
 	                    children: /*#__PURE__*/jsxRuntime.jsx(Radio, {
 	                      id: range.id,
 	                      value: range.id,
 	                      name: "range",
 	                      label: range.label,
 	                      checked: selectedRange === range.id,
-	                      onChange: handleRangeSelectorChange
+	                      onChange: handleRangeSelectorChange,
+	                      className: "dateRangePicker-shortcut-radio"
 	                    })
 	                  }, i);
 	                })
@@ -9655,11 +9918,11 @@
 	      })
 	    })]
 	  });
-	};
+	});
 
-	function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var DatePicker = function DatePicker(_ref) {
+	function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var label = _ref.label,
 	    showRangeSelector = _ref.showRangeSelector,
 	    showInputs = _ref.showInputs,
@@ -9671,7 +9934,9 @@
 	    setSelectedDate = _ref.setSelectedDate,
 	    showOnlyCalender = _ref.showOnlyCalender,
 	    showWeekNumbers = _ref.showWeekNumbers,
-	    props = _objectWithoutProperties(_ref, ["label", "showRangeSelector", "showInputs", "closeOnDateSelect", "placeholder", "initialDate", "inputProps", "selectedDate", "setSelectedDate", "showOnlyCalender", "showWeekNumbers"]);
+	    primaryButtonProps = _ref.primaryButtonProps,
+	    tertiaryButtonProps = _ref.tertiaryButtonProps,
+	    props = _objectWithoutProperties(_ref, ["label", "showRangeSelector", "showInputs", "closeOnDateSelect", "placeholder", "initialDate", "inputProps", "selectedDate", "setSelectedDate", "showOnlyCalender", "showWeekNumbers", "primaryButtonProps", "tertiaryButtonProps"]);
 	  var _useState = React.useState(showOnlyCalender),
 	    _useState2 = _slicedToArray(_useState, 2),
 	    isOpen = _useState2[0],
@@ -9680,7 +9945,6 @@
 	    _useState4 = _slicedToArray(_useState3, 2),
 	    focused = _useState4[0],
 	    setFocused = _useState4[1];
-	  var dateInputRef = React.useRef();
 	  var onDatesChange = function onDatesChange(date) {
 	    setSelectedDate(date);
 	    closeOnDateSelect && setIsOpen(false);
@@ -9707,30 +9971,38 @@
 	      })]
 	    });
 	  }, []);
-	  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+	  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+	    ref: ref === null || ref === void 0 ? void 0 : ref.containerRef,
 	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledLabelContainer, {
+	      className: "datePicker-label",
 	      children: label
 	    }), /*#__PURE__*/jsxRuntime.jsx(ClickAwayListener, {
 	      onClickAway: handleClickAway,
 	      children: /*#__PURE__*/jsxRuntime.jsxs(StyledContainer, {
+	        className: "datePicker-container",
 	        children: [!showOnlyCalender && /*#__PURE__*/jsxRuntime.jsx(StyledInputContainer, {
+	          className: "datePicker-input-container",
+	          ref: ref === null || ref === void 0 ? void 0 : ref.inputContainerRef,
 	          children: /*#__PURE__*/jsxRuntime.jsx(StyledInputDateRangPickerContainer, {
 	            isDatesSelected: selectedDate !== null,
-	            children: /*#__PURE__*/jsxRuntime.jsx(StyledInputStartDateSingle, _objectSpread$c(_objectSpread$c({
+	            children: /*#__PURE__*/jsxRuntime.jsx(StyledInputStartDateSingle, _objectSpread$e(_objectSpread$e({
 	              type: "text",
 	              placeholder: "Select Dates",
 	              value: (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format("YYYY-MM-DD")) || "",
 	              onFocus: handleDateInputFocus,
-	              ref: dateInputRef
+	              ref: ref === null || ref === void 0 ? void 0 : ref.inputRef
 	            }, inputProps), {}, {
-	              readOnly: true
+	              readOnly: true,
+	              className: "datePicker-date-input"
 	            }))
 	          })
 	        }), isOpen && /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
 	          children: /*#__PURE__*/jsxRuntime.jsx(StyledDatepickerMainContainer, {
 	            showOnlyCalender: showOnlyCalender,
+	            className: "datePicker-main-container",
 	            children: /*#__PURE__*/jsxRuntime.jsxs(StyledDatePickerLeftContainer, {
-	              children: [/*#__PURE__*/jsxRuntime.jsx(reactDates.DayPickerSingleDateController, _objectSpread$c({
+	              className: "datePicker-left-container",
+	              children: [/*#__PURE__*/jsxRuntime.jsx(reactDates.DayPickerSingleDateController, _objectSpread$e({
 	                onDateChange: onDatesChange,
 	                onFocusChange: handleOnFocusChange,
 	                focused: focused,
@@ -9740,16 +10012,20 @@
 	                horizontalMonthPadding: showWeekNumbers ? 24 : 12,
 	                renderDayContents: renderDayContents
 	              }, props)), /*#__PURE__*/jsxRuntime.jsx(StyledBottomCTAContainer, {
+	                className: "datePicker-buttons-container",
 	                children: /*#__PURE__*/jsxRuntime.jsxs(StyledRightCTAContainer, {
-	                  children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+	                  className: "datePicker-buttons-right-container",
+	                  children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$e(_objectSpread$e({
 	                    variant: "url",
-	                    size: "small",
+	                    size: "small"
+	                  }, tertiaryButtonProps), {}, {
 	                    children: "Cancel"
-	                  }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+	                  })), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$e(_objectSpread$e({
 	                    variant: "primary",
-	                    size: "small",
+	                    size: "small"
+	                  }, primaryButtonProps), {}, {
 	                    children: "Apply"
-	                  })]
+	                  }))]
 	                })
 	              })]
 	            })
@@ -9758,7 +10034,7 @@
 	      })
 	    })]
 	  });
-	};
+	});
 
 	function _templateObject11$8() {
 	  var data = _taggedTemplateLiteral(["\n      flex-direction: column;\n      ", " {\n        margin-bottom: 60px;\n        &:last-child {\n          margin-bottom: 0px;\n        }\n        &::after {\n          content: \" \";\n          height: 40px;\n          width: 1px;\n          position: absolute;\n          right: auto;\n          top: 48px;\n          bottom: auto;\n          margin: auto;\n          left: 18px;\n        }\n      }\n    "]);
@@ -9875,6 +10151,7 @@
 	  };
 	  return /*#__PURE__*/jsxRuntime.jsx(StyledStepper, {
 	    vertical: vertical,
+	    className: "".concat(props.className, " stepper"),
 	    children: steps.map(function (_ref2, index) {
 	      var _steps2;
 	      var label = _ref2.label,
@@ -9882,6 +10159,7 @@
 	        isEditable = _ref2.isEditable,
 	        isCompleted = _ref2.isCompleted;
 	      return /*#__PURE__*/jsxRuntime.jsxs(StyledStepperChildrenContainer, {
+	        className: "stepper-step-container",
 	        isEditable: isEditable,
 	        isCompleted: isCompleted,
 	        isActive: activeIndex === index,
@@ -9890,11 +10168,15 @@
 	        },
 	        disabled: !(isEditable && isCompleted || index > 0 && ((_steps2 = steps[index - 1]) === null || _steps2 === void 0 ? void 0 : _steps2.isCompleted)),
 	        children: [/*#__PURE__*/jsxRuntime.jsx(StyledCircleContainer, {
+	          className: "stepper-step-icon",
 	          children: !isCompleted && index + 1
 	        }), /*#__PURE__*/jsxRuntime.jsxs(StyledLabelMainContainer, {
+	          className: "stepper-step-container",
 	          children: [/*#__PURE__*/jsxRuntime.jsx(StyledLabel, {
+	            className: "stepper-step-label",
 	            children: label
 	          }), /*#__PURE__*/jsxRuntime.jsx(StyledDescription, {
+	            className: "stepper-step-description",
 	            children: description
 	          })]
 	        })]
@@ -9953,9 +10235,9 @@
 	  return props.disabled && styled.css(_templateObject6$c(), CheckBoxLabel, DisabledButtonFontColor, DefaultColorButton, StyledLabelText$1, DisabledButtonFontColor);
 	});
 
-	function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Switch = function Switch(_ref) {
+	function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var leftLabel = _ref.leftLabel,
 	    rightLabel = _ref.rightLabel,
 	    disabled = _ref.disabled,
@@ -9964,25 +10246,33 @@
 	    name = _ref.name,
 	    props = _objectWithoutProperties(_ref, ["leftLabel", "rightLabel", "disabled", "label", "id", "name"]);
 	  return /*#__PURE__*/jsxRuntime.jsx("div", {
+	    ref: ref === null || ref === void 0 ? void 0 : ref.containerRef,
 	    children: /*#__PURE__*/jsxRuntime.jsxs(StyledSwitch, {
 	      disabled: disabled,
+	      className: "".concat(props.className, " switch-container"),
 	      children: [leftLabel ? /*#__PURE__*/jsxRuntime.jsx(StyledLabelText$1, {
+	        className: "switch-left-label",
 	        children: leftLabel
 	      }) : null, /*#__PURE__*/jsxRuntime.jsxs(CheckBoxWrapper, {
-	        children: [/*#__PURE__*/jsxRuntime.jsx(CheckBox, _objectSpread$d({
+	        className: "switch-checkbox-container",
+	        children: [/*#__PURE__*/jsxRuntime.jsx(CheckBox, _objectSpread$f({
 	          id: id,
 	          name: name,
 	          type: "checkbox",
-	          disabled: disabled
+	          disabled: disabled,
+	          className: "".concat(props.className, " switch-checkbox"),
+	          ref: ref === null || ref === void 0 ? void 0 : ref.checkboxRef
 	        }, props)), /*#__PURE__*/jsxRuntime.jsx(CheckBoxLabel, {
+	          className: "switch-label",
 	          htmlFor: id
 	        })]
 	      }), rightLabel ? /*#__PURE__*/jsxRuntime.jsx(StyledLabelText$1, {
+	        className: "switch-right-label",
 	        children: rightLabel
 	      }) : null]
 	    })
 	  });
-	};
+	});
 
 	function _templateObject11$9() {
 	  var data = _taggedTemplateLiteral(["\n  background: url(", ") no-repeat;\n  background-size: 16px;\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    background-size: 13px;\n  }\n"]);
@@ -10079,11 +10369,13 @@
 	});
 	var StyledCloseIcon$1 = styled__default.i(_templateObject11$9(), CloseIconWhite);
 
-	function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Modal = function Modal(_ref) {
-	  var isOpen = _ref.isOpen,
-	    _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
+	function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	function Portal$2(props) {
+	  return /*#__PURE__*/ReactDOM.createPortal(props.children, props.container);
+	}
+	var InternalModal = function InternalModal(_ref) {
+	  var _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
 	    closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
 	    onClose = _ref.onClose,
 	    children = _ref.children,
@@ -10091,33 +10383,56 @@
 	    size = _ref.size,
 	    primaryButtonProps = _ref.primaryButtonProps,
 	    tertiaryButtonProps = _ref.tertiaryButtonProps,
-	    props = _objectWithoutProperties(_ref, ["isOpen", "closeOnOverlayClick", "onClose", "children", "heading", "size", "primaryButtonProps", "tertiaryButtonProps"]);
-	  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-	    children: isOpen ? /*#__PURE__*/jsxRuntime.jsx(StyledModalContainer, {
-	      onClick: closeOnOverlayClick ? onClose : nul,
-	      children: /*#__PURE__*/jsxRuntime.jsxs(StyledModalBodyContainer, _objectSpread$e(_objectSpread$e({
-	        size: size
-	      }, props), {}, {
-	        onClick: function onClick(e) {
-	          return e.stopPropagation();
-	        },
-	        children: [/*#__PURE__*/jsxRuntime.jsxs(StyledModalHeader, {
-	          children: [/*#__PURE__*/jsxRuntime.jsx(StyledModalHeadingText, {
-	            children: heading
-	          }), /*#__PURE__*/jsxRuntime.jsx(StyledCloseIcon$1, {
-	            onClick: onClose
-	          })]
-	        }), /*#__PURE__*/jsxRuntime.jsx(StyledModalContentContainer, {
-	          children: children
-	        }), /*#__PURE__*/jsxRuntime.jsxs(StyledBottomButtonContainer, {
-	          children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$e(_objectSpread$e({}, tertiaryButtonProps), {}, {
-	            variant: "url"
-	          })), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$e(_objectSpread$e({}, primaryButtonProps), {}, {
-	            variant: "primary"
-	          }))]
+	    props = _objectWithoutProperties(_ref, ["closeOnOverlayClick", "onClose", "children", "heading", "size", "primaryButtonProps", "tertiaryButtonProps"]);
+	  return /*#__PURE__*/jsxRuntime.jsx(StyledModalContainer, {
+	    onClick: closeOnOverlayClick ? onClose : nul,
+	    className: "modal-container",
+	    children: /*#__PURE__*/jsxRuntime.jsxs(StyledModalBodyContainer, _objectSpread$g(_objectSpread$g({
+	      size: size
+	    }, props), {}, {
+	      onClick: function onClick(e) {
+	        return e.stopPropagation();
+	      },
+	      className: "modal-body-container",
+	      children: [/*#__PURE__*/jsxRuntime.jsxs(StyledModalHeader, {
+	        className: "modal-header-container",
+	        children: [/*#__PURE__*/jsxRuntime.jsx(StyledModalHeadingText, {
+	          className: "modal-header-text",
+	          children: heading
+	        }), /*#__PURE__*/jsxRuntime.jsx(StyledCloseIcon$1, {
+	          onClick: onClose,
+	          className: "modal-close-button"
 	        })]
+	      }), /*#__PURE__*/jsxRuntime.jsx(StyledModalContentContainer, {
+	        className: "modal-content-container",
+	        children: children
+	      }), /*#__PURE__*/jsxRuntime.jsxs(StyledBottomButtonContainer, {
+	        className: "modal-buttons-container",
+	        children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$g({
+	          variant: "url"
+	        }, tertiaryButtonProps)), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$g({
+	          variant: "primary"
+	        }, primaryButtonProps))]
+	      })]
+	    }))
+	  });
+	};
+	var Modal = function Modal(_ref2) {
+	  var isOpen = _ref2.isOpen,
+	    _ref2$container = _ref2.container,
+	    container = _ref2$container === void 0 ? document.body : _ref2$container,
+	    children = _ref2.children,
+	    isPortal = _ref2.isPortal,
+	    props = _objectWithoutProperties(_ref2, ["isOpen", "container", "children", "isPortal"]);
+	  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+	    children: isOpen ? isPortal ? /*#__PURE__*/jsxRuntime.jsx(Portal$2, {
+	      container: container,
+	      children: /*#__PURE__*/jsxRuntime.jsx(InternalModal, _objectSpread$g(_objectSpread$g({}, props), {}, {
+	        children: children
 	      }))
-	    }) : null
+	    }) : /*#__PURE__*/jsxRuntime.jsx(InternalModal, _objectSpread$g(_objectSpread$g({}, props), {}, {
+	      children: children
+	    })) : null
 	  });
 	};
 
@@ -10217,41 +10532,60 @@
 	var StyledLiListContent = styled__default.li(_templateObject10$b(), CheckBoxBorder);
 	var StyledBottomCTAContainer$1 = styled__default.div(_templateObject11$a());
 
-	function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Prompt = function Prompt(_ref) {
-	  var isOpen = _ref.isOpen,
-	    _ref$variant = _ref.variant,
+	function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	function Portal$3(props) {
+	  return /*#__PURE__*/ReactDOM.createPortal(props.children, props.container);
+	}
+	var InternalPrompt = function InternalPrompt(_ref) {
+	  var _ref$variant = _ref.variant,
 	    variant = _ref$variant === void 0 ? "default" : _ref$variant,
 	    title = _ref.title,
 	    subHeading = _ref.subHeading,
 	    infoList = _ref.infoList,
 	    primaryButtonProps = _ref.primaryButtonProps,
-	    tertiaryButtonProps = _ref.tertiaryButtonProps,
-	    props = _objectWithoutProperties(_ref, ["isOpen", "variant", "title", "subHeading", "infoList", "primaryButtonProps", "tertiaryButtonProps"]);
+	    tertiaryButtonProps = _ref.tertiaryButtonProps;
+	  return /*#__PURE__*/jsxRuntime.jsx(StyledPromptOverlay, {
+	    className: "prompt-overlay",
+	    children: /*#__PURE__*/jsxRuntime.jsxs(StyledPrompt, {
+	      variant: variant,
+	      className: "prompt",
+	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledPromptHeading, {
+	        className: "prompt-heading",
+	        children: title
+	      }), /*#__PURE__*/jsxRuntime.jsx(StyledPromptSubheading, {
+	        className: "prompt-sub-heading",
+	        children: subHeading
+	      }), /*#__PURE__*/jsxRuntime.jsx(StyledUlListContent, {
+	        className: "prompt-content-list",
+	        children: infoList && infoList.map(function (info, i) {
+	          return /*#__PURE__*/jsxRuntime.jsx(StyledLiListContent, {
+	            className: "prompt-content-item",
+	            children: info
+	          }, i);
+	        })
+	      }), /*#__PURE__*/jsxRuntime.jsxs(StyledBottomCTAContainer$1, {
+	        className: "prompt-button-container",
+	        children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$h(_objectSpread$h({}, tertiaryButtonProps), {}, {
+	          variant: "url"
+	        })), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$h(_objectSpread$h({}, primaryButtonProps), {}, {
+	          variant: "primary"
+	        }))]
+	      })]
+	    })
+	  });
+	};
+	var Prompt = function Prompt(_ref2) {
+	  var isOpen = _ref2.isOpen,
+	    isPortal = _ref2.isPortal,
+	    _ref2$container = _ref2.container,
+	    container = _ref2$container === void 0 ? document.body : _ref2$container,
+	    props = _objectWithoutProperties(_ref2, ["isOpen", "isPortal", "container"]);
 	  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-	    children: isOpen ? /*#__PURE__*/jsxRuntime.jsx(StyledPromptOverlay, {
-	      children: /*#__PURE__*/jsxRuntime.jsxs(StyledPrompt, {
-	        variant: variant,
-	        children: [/*#__PURE__*/jsxRuntime.jsx(StyledPromptHeading, {
-	          children: title
-	        }), /*#__PURE__*/jsxRuntime.jsx(StyledPromptSubheading, {
-	          children: subHeading
-	        }), /*#__PURE__*/jsxRuntime.jsx(StyledUlListContent, {
-	          children: infoList && infoList.map(function (info, i) {
-	            return /*#__PURE__*/jsxRuntime.jsx(StyledLiListContent, {
-	              children: info
-	            }, i);
-	          })
-	        }), /*#__PURE__*/jsxRuntime.jsxs(StyledBottomCTAContainer$1, {
-	          children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$f(_objectSpread$f({}, tertiaryButtonProps), {}, {
-	            variant: "url"
-	          })), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$f(_objectSpread$f({}, primaryButtonProps), {}, {
-	            variant: "primary"
-	          }))]
-	        })]
-	      })
-	    }) : null
+	    children: isOpen ? isPortal ? /*#__PURE__*/jsxRuntime.jsx(Portal$3, {
+	      container: container,
+	      children: /*#__PURE__*/jsxRuntime.jsx(InternalPrompt, _objectSpread$h({}, props))
+	    }) : /*#__PURE__*/jsxRuntime.jsx(InternalPrompt, _objectSpread$h({}, props)) : null
 	  });
 	};
 
@@ -10696,8 +11030,8 @@
 
 	var uniqueId_1 = uniqueId;
 
-	function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 	var Dropzone = function Dropzone(_ref) {
 	  var setFiles = _ref.setFiles,
 	    _ref$accept = _ref.accept,
@@ -10718,10 +11052,10 @@
 	        errorMessage: ""
 	      };
 	    }).reduce(function (a, v) {
-	      return _objectSpread$g(_objectSpread$g({}, a), {}, _defineProperty({}, uniqueId_1(), v));
+	      return _objectSpread$i(_objectSpread$i({}, a), {}, _defineProperty({}, uniqueId_1(), v));
 	    }, {});
 	    setFiles(function (files) {
-	      return _objectSpread$g(_objectSpread$g({}, files), filesArray);
+	      return _objectSpread$i(_objectSpread$i({}, files), filesArray);
 	    });
 	  };
 	  var handleDrop = function handleDrop(event) {
@@ -10737,17 +11071,25 @@
 	  return /*#__PURE__*/jsxRuntime.jsx(StyledDropZone, {
 	    onDragOver: handleDragOver,
 	    onDrop: handleDrop,
+	    className: "fileSelector-dropzone",
 	    children: /*#__PURE__*/jsxRuntime.jsxs(StyledCenterAlignedZone, {
-	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledUploadImage, {}), /*#__PURE__*/jsxRuntime.jsx(StyledDropZoneLabel, {
+	      className: "fileSelector-dropzone-container",
+	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledUploadImage, {
+	        className: "fileSelector-dropzone-upload-image"
+	      }), /*#__PURE__*/jsxRuntime.jsx(StyledDropZoneLabel, {
+	        className: "fileSelector-dropzone-label",
 	        children: "Drag and drop file here"
 	      }), /*#__PURE__*/jsxRuntime.jsx(StyledCenterDividerContainer, {
+	        className: "fileSelector-dropzone-divider",
 	        children: "OR"
 	      }), /*#__PURE__*/jsxRuntime.jsx(StyledFileUploadButton, {
+	        className: "fileSelector-dropzone-upload-button",
 	        children: /*#__PURE__*/jsxRuntime.jsx(StyledBrowseFIleURL, {
 	          type: "file",
 	          multiple: "multiple",
 	          onChange: handleChange,
-	          accept: accept.join(",")
+	          accept: accept.join(","),
+	          className: "fileSelector-dropzone-browse-file-url"
 	        })
 	      })]
 	    })
@@ -10761,20 +11103,26 @@
 	    return !file.isCompleted;
 	  }).length;
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledUploadingZoneContainer, {
+	    className: "fileSelector-uploading-zone-container",
 	    children: [pendingUploads > 0 ? /*#__PURE__*/jsxRuntime.jsxs(StyledSubHeadingContainer, {
+	      className: "fileSelector-subHeading-container",
 	      children: ["Uploading ", pendingUploads, "/", Object.values(files).length]
 	    }) : null, Object.keys(files).map(function (key, index) {
 	      return !files[key].isCompleted ? /*#__PURE__*/jsxRuntime.jsx(StyledFileUploadContainer, {
+	        className: "fileSelector-file-container",
 	        children: /*#__PURE__*/jsxRuntime.jsxs(StyledProgressMainContainer, {
+	          className: "fileSelector-progressBar-container",
 	          children: [/*#__PURE__*/jsxRuntime.jsx(ProgressBar, {
 	            progress: files[key].progress,
 	            label: files[key].file.name,
 	            status: files[key].isError && "error",
-	            errorMessage: files[key].isError ? files[key].errorMessage : ""
+	            errorMessage: files[key].isError ? files[key].errorMessage : "",
+	            className: "fileSelector-progressBar"
 	          }), /*#__PURE__*/jsxRuntime.jsx(StyledClearIcon, {
 	            onClick: function onClick() {
 	              return onUploadCancel(key);
-	            }
+	            },
+	            className: "fileSelector-clear-button"
 	          })]
 	        })
 	      }, files[key].file.name) : null;
@@ -10782,17 +11130,23 @@
 	      return file.isCompleted;
 	    }) ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
 	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledSubHeadingContainer, {
+	        className: "fileSelector-uploaded-heading",
 	        children: "Uploaded"
 	      }), /*#__PURE__*/jsxRuntime.jsx(StyledFileUploadContainer, {
+	        className: "fileSelector-file-uploaded-container",
 	        children: Object.values(files).filter(function (file) {
 	          return file.isCompleted;
 	        }).map(function (file, index) {
 	          return /*#__PURE__*/jsxRuntime.jsxs(StyledProgressMainContainer, {
+	            className: "fileSelector-uploaded-progressBar-container",
 	            children: [/*#__PURE__*/jsxRuntime.jsx(ProgressBar, {
 	              progress: 100,
 	              label: file.file.name,
-	              status: "success"
-	            }), /*#__PURE__*/jsxRuntime.jsx(StyledDeleteIcon, {})]
+	              status: "success",
+	              className: "fileSelector-uploaded-progressBar"
+	            }), /*#__PURE__*/jsxRuntime.jsx(StyledDeleteIcon, {
+	              className: "fileSelector-delete-icon"
+	            })]
 	          }, file.file.name);
 	        })
 	      })]
@@ -10800,15 +11154,18 @@
 	  });
 	};
 
-	var FileSelector = function FileSelector(_ref) {
+	var FileSelector = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var files = _ref.files,
 	    setFiles = _ref.setFiles,
 	    onFileUpload = _ref.onFileUpload,
 	    onUploadCancel = _ref.onUploadCancel,
 	    onCancelAllUploads = _ref.onCancelAllUploads;
-	  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+	  return /*#__PURE__*/jsxRuntime.jsx("div", {
+	    ref: ref,
 	    children: /*#__PURE__*/jsxRuntime.jsxs(StyledFileSelector, {
+	      className: "fileSelector",
 	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledFileHeading, {
+	        className: "fileSelector-file-heading",
 	        children: "Upload Files"
 	      }), /*#__PURE__*/jsxRuntime.jsx(Dropzone, {
 	        setFiles: setFiles
@@ -10817,20 +11174,120 @@
 	        setFiles: setFiles,
 	        onUploadCancel: onUploadCancel
 	      }), /*#__PURE__*/jsxRuntime.jsxs(StyledButtonContainer, {
+	        className: "fileSelector-button-container",
 	        children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
 	          variant: "primary",
+	          className: "fileSelector-upload-button",
 	          onClick: onFileUpload,
 	          children: "Upload"
 	        }), /*#__PURE__*/jsxRuntime.jsx(Button, {
 	          variant: "url",
+	          className: "fileSelector-cancel-button",
 	          onClick: onCancelAllUploads,
 	          children: "Cancel"
 	        })]
 	      })]
 	    })
 	  });
-	};
+	});
+
+	var _path;
+	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); }
+	const SvgCollapseFirst = props => /*#__PURE__*/React.createElement("svg", _extends({
+	  width: 12,
+	  height: 20,
+	  fill: "none",
+	  xmlns: "http://www.w3.org/2000/svg"
+	}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+	  d: "M1.65 19.729 0 18.079l5.646-5.646 5.645 5.646-1.65 1.65-3.995-3.996L1.65 19.73ZM5.646 7.567 0 1.92 1.65.27l3.996 3.996L9.642.27l1.65 1.65-5.646 5.646Z",
+	  fill: "#0055AF"
+	})));
+
+	var _path$1;
+	function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+	const SvgCollapseAll = props => /*#__PURE__*/React.createElement("svg", _extends$1({
+	  width: 9,
+	  height: 23,
+	  fill: "none",
+	  xmlns: "http://www.w3.org/2000/svg"
+	}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+	  d: "M1.481 22.99.34 21.82l4.16-4.184 4.222 4.222-1.155 1.155-3.043-3.042L1.48 22.99Zm0-4.792L.34 17.043l4.16-4.185 4.222 4.222-1.155 1.142-3.043-3.043-3.043 3.019Zm3.03-8.07L.315 5.933 1.48 4.778 4.5 7.783l3.043-3.005 1.179 1.166-4.212 4.184Zm0-4.765L.315 1.155 1.48.013 4.5 3.02 7.543.013l1.179 1.153L4.51 5.363Z",
+	  fill: "#0055AF"
+	})));
+
+	var _g, _defs;
+	function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
+	const SvgExpandAll = props => /*#__PURE__*/React.createElement("svg", _extends$2({
+	  width: 23,
+	  height: 23,
+	  fill: "none",
+	  xmlns: "http://www.w3.org/2000/svg"
+	}, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+	  clipPath: "url(#expand-all_svg__a)"
+	}, /*#__PURE__*/React.createElement("path", {
+	  d: "m11.5 23.014-4.16-4.198L8.48 17.66l3.043 3.019 3.043-3.043 1.155 1.142-4.222 4.236Zm0-4.792-4.16-4.185 1.141-1.155 3.043 3.019 3.043-3.043L15.722 14 11.5 18.222Zm-3.019-8.094L7.316 8.986l4.194-4.208 4.212 4.198-1.18 1.152L11.5 7.123l-3.019 3.005Zm0-4.765L7.316 4.208 11.51.013l4.212 4.185-1.18 1.165L11.5 2.358 8.481 5.363Z",
+	  fill: "#0055AF"
+	}))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+	  id: "expand-all_svg__a"
+	}, /*#__PURE__*/React.createElement("path", {
+	  fill: "#fff",
+	  d: "M0 0h23v23H0z"
+	})))));
+
+	var _path$2;
+	function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
+	const SvgExpandFirst = props => /*#__PURE__*/React.createElement("svg", _extends$3({
+	  width: 10,
+	  height: 20,
+	  fill: "none",
+	  xmlns: "http://www.w3.org/2000/svg"
+	}, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+	  d: "m5 20-5-5.232 1.478-1.547L5 16.921l3.522-3.7L10 14.768 5 20ZM1.478 6.764 0 5.232 5 0l5 5.232-1.478 1.532L5 3.079 1.478 6.764Z",
+	  fill: "#0055AF"
+	})));
 
+	function _templateObject20$2() {
+	  var data = _taggedTemplateLiteral([""]);
+	  _templateObject20$2 = function _templateObject20() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject19$3() {
+	  var data = _taggedTemplateLiteral(["\n  margin: 10px 0;\n  border-top: 1px solid #d4d4d4;\n"]);
+	  _templateObject19$3 = function _templateObject19() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject18$3() {
+	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-left: 10px;\n  margin-top: 10px;\n"]);
+	  _templateObject18$3 = function _templateObject18() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject17$5() {
+	  var data = _taggedTemplateLiteral(["\n  font-size: 12px;\n  font-weight: 500;\n"]);
+	  _templateObject17$5 = function _templateObject17() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject16$5() {
+	  var data = _taggedTemplateLiteral(["\n  font-family: \"Poppins\", sans-serif !important;\n\n  .font-size {\n    padding-left: 10px;\n    margin-top: 10px;\n  }\n"]);
+	  _templateObject16$5 = function _templateObject16() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject15$5() {
+	  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: row-reverse;\n  padding: 16px 0px;\n  gap: 16px;\n"]);
+	  _templateObject15$5 = function _templateObject15() {
+	    return data;
+	  };
+	  return data;
+	}
 	function _templateObject14$6() {
 	  var data = _taggedTemplateLiteral(["\n      background: ", ";\n      border-radius: 4px;\n      cursor: default;\n      color: ", ";\n    "]);
 	  _templateObject14$6 = function _templateObject14() {
@@ -10916,7 +11373,7 @@
 	  return data;
 	}
 	function _templateObject2$k() {
-	  var data = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n\n  /* &.ag-theme-alpine .ag-cell {\n    font-size: ", ";\n  } */\n\n  .common_table > div {\n    font-family: \"Poppins\", sans-serif !important;\n  }\n\n  .ag-header-cell,\n  .ag-header-viewport {\n    background: ", ";\n  }\n\n  .ag-theme-alpine,\n  .ag-theme-alpine-dark {\n    --ag-border-color: ", ";\n  }\n  .ag-header-cell-resize::after {\n    --ag-border-color: ", ";\n    bottom: 0;\n    height: auto;\n    width: 1px;\n    top: 0;\n    display: none;\n  }\n\n  .ag-header {\n    height: 40px !important;\n    /* min-height: auto !important; */\n  }\n  .ag-cell-label-container {\n    padding: 0px;\n  }\n\n  .ag-header-row {\n    height: 40px !important;\n  }\n  .ag-header-cell,\n  .ag-header-group-cell {\n    padding: 0px 12px !important;\n    border-right: 1px solid ", ";\n  }\n  .ag-header-cell:last-child,\n  .ag-header-group-cell:last-child {\n    border-right: none;\n  }\n\n  .ag-ltr .ag-cell {\n    border-right: 1px solid ", ";\n  }\n\n  .ag-ltr .ag-cell:last-child {\n    border-right: none;\n  }\n\n  .ag-row {\n    border-bottom: 1px solid ", ";\n  }\n\n  .ag-ltr .ag-header-cell-resize {\n    right: -5px;\n  }\n  .ag-header-cell-text {\n    font-size: 14px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  .ag-ltr .ag-cell {\n    height: 44px;\n    font-size: 14px;\n    color: ", ";\n    padding-left: 12px;\n  }\n  .ag-row-hover {\n    --ag-row-hover-color: ", ";\n  }\n\n  .ag-checkbox-input-wrapper.ag-checked::after {\n    content: var(--ag-icon-font-code-checkbox-checked, \"\f106\");\n    color: ", ";\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n  }\n  .ag-checkbox-input-wrapper::after {\n    color: ", ";\n  }\n\n  .ag-theme-alpine,\n  .ag-theme-alpine-dark {\n    --ag-selected-row-background-color: ", ";\n  }\n  .ag-icon.ag-icon-menu::before {\n    content: \"\";\n    background: url(", ") no-repeat;\n    width: 5px;\n    height: 15px;\n    background-size: 5px;\n    display: block;\n    cursor: pointer;\n  }\n\n  .ag-pinned-left-cols-container,\n  .ag-pinned-right-cols-container {\n    z-index: 9999;\n    box-shadow: 0px 3px 4px #00000029;\n  }\n\n  .ag-header-active {\n    --ag-selected-row-background-color: ", " !important;\n  }\n\n  .ag-menu-option-active {\n    background: ", " !important;\n  }\n\n  .ag-text-field-input {\n    border: 1px solid ", " !important;\n    border-radius: 4px !important;\n    padding: 4px 12px;\n    padding-right: 31px;\n    height: 29px;\n    box-sizing: border-box;\n    background: url(", ") no-repeat;\n    background-size: 16px;\n    font-size: 14px !important;\n    background-position: center right 11px;\n  }\n  .ag-icon-tree-closed {\n    transform: rotate(90deg);\n  }\n  .ag-details-row {\n    padding: 15px;\n  }\n  .ag-row.ag-row-footer {\n    background: ", " !important;\n  }\n\n  .ag-tabs-header {\n    display: none;\n  }\n  .ag-menu-option-icon,\n  .ag-menu-option-shortcut {\n    display: none;\n  }\n  .settings_main_container .ag-menu-option-text {\n    background: url(", ") no-repeat;\n    width: 14px;\n    height: 14px;\n    background-size: 14px;\n    background-position: 0 center;\n    padding-left: 20px;\n    color: ", ";\n    font-weight: 600;\n  }\n  .format_main_container .ag-menu-option-text {\n    background: url(", ") no-repeat;\n    width: 14px;\n    height: 14px;\n    background-size: 14px;\n    background-position: 0 center;\n    padding-left: 20px;\n    color: ", ";\n    font-weight: 600;\n  }\n  .ag-menu-option-active {\n    background: ", " !important;\n  }\n  .ag-theme-alpine .ag-menu {\n    background-color: ", ";\n  }\n  .ag-menu-option-text {\n    padding-left: 0px;\n  }\n\n  .ag-menu-body {\n    padding: 0 12px;\n  }\n  .ag-menu-option-popup-pointer {\n    display: flex;\n    justify-content: flex-end;\n    padding-right: 0;\n  }\n  .ag-popup-child {\n    padding-left: 12px;\n  }\n  .ag-theme-alpine .ag-side-buttons {\n    width: 24px;\n  }\n  .ag-theme-alpine .ag-side-buttons {\n    width: 24px;\n    padding-top: 0px;\n  }\n  .ag-side-button-button {\n    justify-content: flex-start;\n  }\n  .ag-theme-alpine .ag-side-button-button {\n    color: ", ";\n  }\n  .ag-theme-alpine .ag-side-button-button:hover {\n    color: ", ";\n  }\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    .ag-header-row {\n      height: 30px !important;\n      display: flex;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .ag-header-container,\n    element.style {\n      width: 200px;\n      left: 0px;\n    }\n    .ag-header-cell,\n    .ag-header-group-cell {\n      height: 30px !important;\n    }\n    .ag-header {\n      min-height: 30px !important;\n      height: 30px !important;\n    }\n    .ag-ltr .ag-cell,\n    .ag-row {\n      height: 30px !important;\n      display: flex;\n      align-items: center;\n      font-size: 12px;\n    }\n    .ag-header-cell-text {\n      font-size: 12px;\n    }\n    .ag-icon.ag-icon-menu::before {\n      content: \"\";\n      width: 4px;\n      height: 12px;\n      background-size: 4px;\n      display: block;\n      cursor: pointer;\n    }\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n\n  /* &.ag-theme-alpine .ag-cell {\n    font-size: ", ";\n  } */\n\n  .common_table > div {\n    font-family: \"Poppins\", sans-serif !important;\n  }\n\n  .ag-header-cell,\n  .ag-header-viewport {\n    background: ", ";\n  }\n\n  .ag-theme-alpine,\n  .ag-theme-alpine-dark {\n    --ag-border-color: ", ";\n  }\n  .ag-header-cell-resize::after {\n    --ag-border-color: ", ";\n    bottom: 0;\n    height: auto;\n    width: 1px;\n    top: 0;\n    display: none;\n  }\n\n  .ag-header {\n    height: 40px !important;\n    /* min-height: auto !important; */\n  }\n  .ag-cell-label-container {\n    padding: 0px;\n  }\n\n  .ag-header-row {\n    height: 40px !important;\n  }\n  .ag-header-cell,\n  .ag-header-group-cell {\n    padding: 0px 12px !important;\n    border-right: 1px solid ", ";\n  }\n  .ag-header-cell:last-child,\n  .ag-header-group-cell:last-child {\n    border-right: none;\n  }\n\n  .ag-ltr .ag-cell {\n    border-right: 1px solid ", ";\n  }\n\n  .ag-ltr .ag-cell:last-child {\n    border-right: none;\n  }\n\n  .ag-row {\n    border-bottom: 1px solid ", ";\n  }\n\n  .ag-ltr .ag-header-cell-resize {\n    right: -5px;\n  }\n  .ag-header-cell-text {\n    font-size: 14px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  .ag-ltr .ag-cell {\n    height: 44px;\n    font-size: 14px;\n    color: ", ";\n    padding-left: 12px;\n  }\n  .ag-row-hover {\n    --ag-row-hover-color: ", ";\n  }\n\n  .ag-checkbox-input-wrapper.ag-checked::after {\n    content: var(--ag-icon-font-code-checkbox-checked, \"\\f106\");\n    color: ", ";\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n  }\n  .ag-checkbox-input-wrapper::after {\n    color: ", ";\n  }\n\n  .ag-theme-alpine,\n  .ag-theme-alpine-dark {\n    --ag-selected-row-background-color: ", ";\n  }\n  .ag-icon.ag-icon-menu::before {\n    content: \"\";\n    background: url(", ") no-repeat;\n    width: 5px;\n    height: 15px;\n    background-size: 5px;\n    display: block;\n    cursor: pointer;\n  }\n\n  .ag-pinned-left-cols-container,\n  .ag-pinned-right-cols-container {\n    z-index: 9999;\n    box-shadow: 0px 3px 4px #00000029;\n  }\n\n  .ag-header-active {\n    --ag-selected-row-background-color: ", " !important;\n  }\n\n  .ag-menu-option-active {\n    background: ", " !important;\n  }\n\n  .ag-text-field-input {\n    border: 1px solid ", " !important;\n    border-radius: 4px !important;\n    padding: 4px 12px;\n    padding-right: 31px;\n    height: 29px;\n    box-sizing: border-box;\n    background: url(", ") no-repeat;\n    background-size: 16px;\n    font-size: 14px !important;\n    background-position: center right 11px;\n  }\n  .ag-icon-tree-closed {\n    transform: rotate(90deg);\n  }\n  .ag-details-row {\n    padding: 15px;\n  }\n  .ag-row.ag-row-footer {\n    background: ", " !important;\n  }\n\n  .ag-tabs-header {\n    display: none;\n  }\n  .ag-menu-option-icon,\n  .ag-menu-option-shortcut {\n    display: none;\n  }\n  .settings_main_container .ag-menu-option-text {\n    background: url(", ") no-repeat;\n    width: 14px;\n    height: 14px;\n    background-size: 14px;\n    background-position: 0 center;\n    padding-left: 20px;\n    color: ", ";\n    font-weight: 600;\n  }\n  .format_main_container .ag-menu-option-text {\n    background: url(", ") no-repeat;\n    width: 14px;\n    height: 14px;\n    background-size: 14px;\n    background-position: 0 center;\n    padding-left: 20px;\n    color: ", ";\n    font-weight: 600;\n  }\n  .ag-menu-option-active {\n    background: ", " !important;\n  }\n  .ag-theme-alpine .ag-menu {\n    background-color: ", ";\n  }\n  .ag-menu-option-text {\n    padding-left: 0px;\n  }\n\n  .ag-menu-body {\n    padding: 0 12px;\n  }\n  .ag-menu-option-popup-pointer {\n    display: flex;\n    justify-content: flex-end;\n    padding-right: 0;\n  }\n  .ag-popup-child {\n    padding-left: 12px;\n  }\n  .ag-theme-alpine .ag-side-buttons {\n    width: 24px;\n  }\n  .ag-theme-alpine .ag-side-buttons {\n    width: 24px;\n    padding-top: 0px;\n  }\n  .ag-side-button-button {\n    justify-content: flex-start;\n  }\n  .ag-theme-alpine .ag-side-button-button {\n    color: ", ";\n  }\n  .ag-theme-alpine .ag-side-button-button:hover {\n    color: ", ";\n  }\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    .ag-header-row {\n      height: 30px !important;\n      display: flex;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .ag-header-container,\n    element.style {\n      width: 200px;\n      left: 0px;\n    }\n    .ag-header-cell,\n    .ag-header-group-cell {\n      height: 30px !important;\n    }\n    .ag-header {\n      min-height: 30px !important;\n      height: 30px !important;\n    }\n    .ag-ltr .ag-cell,\n    .ag-row {\n      height: 30px !important;\n      display: flex;\n      align-items: center;\n      font-size: 12px;\n    }\n    .ag-header-cell-text {\n      font-size: 12px;\n    }\n    .ag-icon.ag-icon-menu::before {\n      content: \"\";\n      width: 4px;\n      height: 12px;\n      background-size: 4px;\n      display: block;\n      cursor: pointer;\n    }\n  }\n"]);
+	  var data = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n\n  /* &.ag-theme-alpine .ag-cell {\n    font-size: ", ";\n  } */\n\n  .common_table > div {\n    font-family: \"Poppins\", sans-serif !important;\n    --ag-font-family: \"Poppins\", sans-serif !important;\n  }\n\n  .ag-header-cell,\n  .ag-header-viewport {\n    background: ", ";\n  }\n\n  .ag-theme-alpine,\n  .ag-theme-alpine-dark {\n    --ag-border-color: ", ";\n  }\n  .ag-header-cell-resize::after {\n    --ag-border-color: ", ";\n    bottom: 0;\n    height: auto;\n    width: 1px;\n    top: 0;\n    display: none;\n  }\n\n  .ag-cell-label-container {\n    padding: 0px;\n  }\n\n  .ag-header-row {\n    height: 40px !important;\n  }\n  .ag-header-cell,\n  .ag-header-group-cell {\n    padding: 0px 12px !important;\n    border-right: 1px solid ", ";\n  }\n  .ag-header-cell:last-child,\n  .ag-header-group-cell:last-child {\n    border-right: none;\n  }\n\n  .ag-ltr .ag-cell {\n    border-right: 1px solid ", ";\n  }\n\n  .ag-ltr .ag-cell:last-child {\n    border-right: none;\n  }\n\n  .ag-row {\n    border-bottom: 1px solid ", ";\n  }\n\n  .ag-ltr .ag-header-cell-resize {\n    right: -5px;\n  }\n  .ag-header-cell-text {\n    font-size: 14px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  .ag-ltr .ag-cell {\n    font-size: 14px;\n    color: ", ";\n    padding-left: 12px;\n  }\n  .ag-row-hover {\n    --ag-row-hover-color: ", ";\n  }\n\n  .ag-checkbox-input-wrapper.ag-checked::after {\n    content: var(--ag-icon-font-code-checkbox-checked, \"\f106\");\n    color: ", ";\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n  }\n  .ag-checkbox-input-wrapper::after {\n    color: ", ";\n  }\n\n  .ag-theme-alpine,\n  .ag-theme-alpine-dark {\n    --ag-selected-row-background-color: ", ";\n  }\n  .ag-icon.ag-icon-menu::before {\n    content: \"\";\n    background: url(", ") no-repeat;\n    width: 5px;\n    height: 15px;\n    background-size: 5px;\n    display: block;\n    cursor: pointer;\n  }\n\n  .ag-pinned-left-cols-container,\n  .ag-pinned-right-cols-container {\n    z-index: 9999;\n    box-shadow: 0px 3px 4px #00000029;\n  }\n\n  .ag-header-active {\n    --ag-selected-row-background-color: ", " !important;\n  }\n\n  .ag-menu-option-active:not(.format_main_container, .settings_main_container) {\n    background: ", " !important;\n    cursor: pointer;\n  }\n  .ag-menu-option-active {\n    background: none;\n  }\n\n  .ag-row-selected {\n    --ag-selected-row-background-color: ", " !important;\n  }\n  .ag-text-field-input {\n    border: 1px solid ", " !important;\n    border-radius: 4px !important;\n    padding: 4px 12px;\n    padding-right: 31px;\n    height: 29px;\n    box-sizing: border-box;\n    background: url(", ") no-repeat;\n    background-size: 16px;\n    font-size: 14px !important;\n    background-position: center right 11px;\n  }\n  .ag-icon-tree-closed {\n    transform: rotate(0deg);\n  }\n  .ag-icon:hover {\n    color: ", " !important;\n  }\n  .ag-details-row {\n    padding: 16px;\n  }\n  .ag-row.ag-row-footer {\n    background: ", " !important;\n  }\n\n  .ag-tabs-header {\n    display: none;\n  }\n  .ag-menu-option-icon {\n    padding-left: 10px;\n    width: 10px;\n  }\n  .ag-menu-option-shortcut {\n    padding: 0;\n    width: 0;\n  }\n  .ag-icon-tick::before {\n    padding-right: 4px;\n    width: 4px;\n  }\n  .settings_main_container .ag-menu-option-text {\n    background: url(", ") no-repeat;\n    width: 14px;\n    height: 14px;\n    background-size: 14px;\n    background-position: 0 center;\n    padding-left: 20px;\n    color: ", ";\n    font-weight: 600;\n  }\n  .format_main_container .ag-menu-option-text {\n    background: url(", ") no-repeat;\n    width: 14px;\n    height: 14px;\n    background-size: 14px;\n    background-position: 0 center;\n    padding-left: 20px;\n    color: ", ";\n    font-weight: 600;\n  }\n  .ag-theme-alpine .ag-menu {\n    background-color: ", ";\n  }\n\n  .ag-menu-option-popup-pointer {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .ag-theme-alpine .ag-side-buttons {\n    width: 24px;\n  }\n  .ag-virtual-list-item {\n    height: 26px !important;\n  }\n  .ag-theme-alpine .ag-side-buttons {\n    width: 24px;\n    padding-top: 0px;\n  }\n  .ag-side-button-button {\n    justify-content: flex-start;\n  }\n  .ag-theme-alpine .ag-side-button-button {\n    color: ", ";\n  }\n  .ag-theme-alpine .ag-side-button-button:hover {\n    color: ", ";\n  }\n  .ag-pinned-left-cols-container,\n  .ag-pinned-right-cols-container {\n    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12) !important;\n    z-index: 1 !important;\n  }\n\n  .ag-pinned-left-cols-container {\n    border-right: 1px solid #d4d4d4;\n  }\n  .ag-pinned-right-cols-container {\n    border-left: 1px solid #d4d4d4;\n  }\n  .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(\n      .ag-cell-range-single-cell\n    ) {\n    border-left: none;\n  }\n  .ag-theme-alpine .ag-side-buttons,\n  .ag-theme-alpine-dark .ag-side-buttons,\n  .ag-side-buttons {\n  }\n  .ag-side-buttons {\n    width: 24px !important;\n    padding: 0px;\n  }\n  .ag-side-button {\n  }\n  button.ag-side-button-button {\n    padding: 0px;\n    min-height: auto;\n    padding: 8px 0;\n  }\n  .ag-side-button-icon-wrapper {\n    margin-bottom: 0px;\n  }\n\n  .ag-side-button-button:hover,\n  .ag-selected .ag-side-button-button {\n    color: ", " !important;\n  }\n\n  .ag-ltr .ag-side-bar-right .ag-selected .ag-side-button-button {\n    border-left-color: #fff;\n  }\n\n  .ag-tool-panel-wrapper {\n    position: absolute;\n    width: 241px;\n    right: 24px;\n    top: 0;\n    bottom: 0;\n    background: #fff;\n    border-left: 1px solid #d4d4d4;\n    box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.08);\n    overflow: auto;\n    padding: 8px 12px;\n    box-sizing: border-box;\n  }\n\n  .ag-header-expand-icon:hover {\n    color: ", ";\n  }\n\n  .ag-menu-list {\n  }\n  .ag-menu-option {\n    /* padding: 0 10px; */\n  }\n  .ag-menu-body {\n    /* padding: 0 12px; */\n  }\n\n  .ag-set-filter-item {\n    margin: 0px;\n  }\n  .ag-mini-filter {\n    margin: 16px 0 10px 0;\n  }\n\n  .ag-row-odd {\n    background: ", " !important;\n  }\n\n  .number-header * .ag-cell-label-container {\n    display: flex;\n    flex-direction: row;\n\n    .ag-header-cell-label {\n      flex-direction: row-reverse;\n    }\n  }\n\n  .number-cell {\n    text-align: right;\n  }\n\n  .cell-renderer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ", ";\n  }\n\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    .ag-header-row {\n      height: 30px !important;\n      display: flex;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .ag-header-container,\n    element.style {\n      width: 200px;\n      left: 0px;\n    }\n    .ag-header-cell,\n    .ag-header-group-cell {\n      height: 30px !important;\n    }\n    .ag-header {\n      min-height: 30px !important;\n      height: 30px !important;\n    }\n    .ag-ltr .ag-cell,\n    .ag-row {\n      height: 30px !important;\n      display: flex;\n      align-items: center;\n      font-size: 12px;\n    }\n    .ag-header-cell-text {\n      font-size: 12px;\n    }\n    .ag-icon.ag-icon-menu::before {\n      content: \"\";\n      width: 4px;\n      height: 12px;\n      background-size: 4px;\n      display: block;\n      cursor: pointer;\n    }\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n\n  /* &.ag-theme-alpine .ag-cell {\n    font-size: ", ";\n  } */\n\n  .common_table > div {\n    font-family: \"Poppins\", sans-serif !important;\n    --ag-font-family: \"Poppins\", sans-serif !important;\n  }\n\n  .ag-header-cell,\n  .ag-header-viewport {\n    background: ", ";\n  }\n\n  .ag-theme-alpine,\n  .ag-theme-alpine-dark {\n    --ag-border-color: ", ";\n  }\n  .ag-header-cell-resize::after {\n    --ag-border-color: ", ";\n    bottom: 0;\n    height: auto;\n    width: 1px;\n    top: 0;\n    display: none;\n  }\n\n  .ag-cell-label-container {\n    padding: 0px;\n  }\n\n  .ag-header-row {\n    height: 40px !important;\n  }\n  .ag-header-cell,\n  .ag-header-group-cell {\n    padding: 0px 12px !important;\n    border-right: 1px solid ", ";\n  }\n  .ag-header-cell:last-child,\n  .ag-header-group-cell:last-child {\n    border-right: none;\n  }\n\n  .ag-ltr .ag-cell {\n    border-right: 1px solid ", ";\n  }\n\n  .ag-ltr .ag-cell:last-child {\n    border-right: none;\n  }\n\n  .ag-row {\n    border-bottom: 1px solid ", ";\n  }\n\n  .ag-ltr .ag-header-cell-resize {\n    right: -5px;\n  }\n  .ag-header-cell-text {\n    font-size: 14px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  .ag-ltr .ag-cell {\n    font-size: 14px;\n    color: ", ";\n    padding-left: 12px;\n  }\n  .ag-row-hover {\n    --ag-row-hover-color: ", ";\n  }\n\n  .ag-checkbox-input-wrapper.ag-checked::after {\n    content: var(--ag-icon-font-code-checkbox-checked, \"\\f106\");\n    color: ", ";\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n  }\n  .ag-checkbox-input-wrapper::after {\n    color: ", ";\n  }\n\n  .ag-theme-alpine,\n  .ag-theme-alpine-dark {\n    --ag-selected-row-background-color: ", ";\n  }\n  .ag-icon.ag-icon-menu::before {\n    content: \"\";\n    background: url(", ") no-repeat;\n    width: 5px;\n    height: 15px;\n    background-size: 5px;\n    display: block;\n    cursor: pointer;\n  }\n\n  .ag-pinned-left-cols-container,\n  .ag-pinned-right-cols-container {\n    z-index: 9999;\n    box-shadow: 0px 3px 4px #00000029;\n  }\n\n  .ag-header-active {\n    --ag-selected-row-background-color: ", " !important;\n  }\n\n  .ag-menu-option-active:not(.format_main_container, .settings_main_container) {\n    background: ", " !important;\n    cursor: pointer;\n  }\n  .ag-menu-option-active {\n    background: none;\n  }\n\n  .ag-row-selected {\n    --ag-selected-row-background-color: ", " !important;\n  }\n  .ag-text-field-input {\n    border: 1px solid ", " !important;\n    border-radius: 4px !important;\n    padding: 4px 12px;\n    padding-right: 31px;\n    height: 29px;\n    box-sizing: border-box;\n    background: url(", ") no-repeat;\n    background-size: 16px;\n    font-size: 14px !important;\n    background-position: center right 11px;\n  }\n  .ag-icon-tree-closed {\n    transform: rotate(0deg);\n  }\n  .ag-icon:hover {\n    color: ", " !important;\n  }\n  .ag-details-row {\n    padding: 16px;\n  }\n  .ag-row.ag-row-footer {\n    background: ", " !important;\n  }\n\n  .ag-tabs-header {\n    display: none;\n  }\n  .ag-menu-option-icon {\n    padding-left: 10px;\n    width: 10px;\n  }\n  .ag-menu-option-shortcut {\n    padding: 0;\n    width: 0;\n  }\n  .ag-icon-tick::before {\n    padding-right: 4px;\n    width: 4px;\n  }\n  .settings_main_container .ag-menu-option-text {\n    background: url(", ") no-repeat;\n    width: 14px;\n    height: 14px;\n    background-size: 14px;\n    background-position: 0 center;\n    padding-left: 20px;\n    color: ", ";\n    font-weight: 600;\n  }\n  .format_main_container .ag-menu-option-text {\n    background: url(", ") no-repeat;\n    width: 14px;\n    height: 14px;\n    background-size: 14px;\n    background-position: 0 center;\n    padding-left: 20px;\n    color: ", ";\n    font-weight: 600;\n  }\n  .ag-theme-alpine .ag-menu {\n    background-color: ", ";\n  }\n\n  .ag-menu-option-popup-pointer {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .ag-theme-alpine .ag-side-buttons {\n    width: 24px;\n  }\n  .ag-virtual-list-item {\n    height: 26px !important;\n  }\n  .ag-theme-alpine .ag-side-buttons {\n    width: 24px;\n    padding-top: 0px;\n  }\n  .ag-side-button-button {\n    justify-content: flex-start;\n  }\n  .ag-theme-alpine .ag-side-button-button {\n    color: ", ";\n  }\n  .ag-theme-alpine .ag-side-button-button:hover {\n    color: ", ";\n  }\n  .ag-pinned-left-cols-container,\n  .ag-pinned-right-cols-container {\n    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12) !important;\n    z-index: 1 !important;\n  }\n\n  .ag-pinned-left-cols-container {\n    border-right: 1px solid #d4d4d4;\n  }\n  .ag-pinned-right-cols-container {\n    border-left: 1px solid #d4d4d4;\n  }\n  .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(\n      .ag-cell-range-single-cell\n    ) {\n    border-left: none;\n  }\n  .ag-theme-alpine .ag-side-buttons,\n  .ag-theme-alpine-dark .ag-side-buttons,\n  .ag-side-buttons {\n  }\n  .ag-side-buttons {\n    width: 24px !important;\n    padding: 0px;\n  }\n  .ag-side-button {\n  }\n  button.ag-side-button-button {\n    padding: 0px;\n    min-height: auto;\n    padding: 8px 0;\n  }\n  .ag-side-button-icon-wrapper {\n    margin-bottom: 0px;\n  }\n\n  .ag-side-button-button:hover,\n  .ag-selected .ag-side-button-button {\n    color: ", " !important;\n  }\n\n  .ag-ltr .ag-side-bar-right .ag-selected .ag-side-button-button {\n    border-left-color: #fff;\n  }\n\n  .ag-tool-panel-wrapper {\n    position: absolute;\n    width: 241px;\n    right: 24px;\n    top: 0;\n    bottom: 0;\n    background: #fff;\n    border-left: 1px solid #d4d4d4;\n    box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.08);\n    overflow: auto;\n    padding: 8px 12px;\n    box-sizing: border-box;\n  }\n\n  .ag-header-expand-icon:hover {\n    color: ", ";\n  }\n\n  .ag-menu-list {\n  }\n  .ag-menu-option {\n    /* padding: 0 10px; */\n  }\n  .ag-menu-body {\n    /* padding: 0 12px; */\n  }\n\n  .ag-set-filter-item {\n    margin: 0px;\n  }\n  .ag-mini-filter {\n    margin: 16px 0 10px 0;\n  }\n\n  .ag-row-odd {\n    background: ", " !important;\n  }\n\n  .number-header * .ag-cell-label-container {\n    display: flex;\n    flex-direction: row;\n\n    .ag-header-cell-label {\n      flex-direction: row-reverse;\n    }\n  }\n\n  .number-cell {\n    text-align: right;\n  }\n\n  .cell-renderer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ", ";\n  }\n\n  @media screen and (max-width: 1399px) and (min-width: 1200px) {\n    .ag-header-row {\n      height: 30px !important;\n      display: flex;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .ag-header-container,\n    element.style {\n      width: 200px;\n      left: 0px;\n    }\n    .ag-header-cell,\n    .ag-header-group-cell {\n      height: 30px !important;\n    }\n    .ag-header {\n      min-height: 30px !important;\n      height: 30px !important;\n    }\n    .ag-ltr .ag-cell,\n    .ag-row {\n      height: 30px !important;\n      display: flex;\n      align-items: center;\n      font-size: 12px;\n    }\n    .ag-header-cell-text {\n      font-size: 12px;\n    }\n    .ag-icon.ag-icon-menu::before {\n      content: \"\";\n      width: 4px;\n      height: 12px;\n      background-size: 4px;\n      display: block;\n      cursor: pointer;\n    }\n  }\n"]);
 	  _templateObject2$k = function _templateObject2() {
 	    return data;
 	  };
@@ -10932,7 +11389,7 @@
 	var StyledTable = styled__default.div(_templateObject$m());
 	var StyledTableContainer = styled__default.div(_templateObject2$k(), function (props) {
 	  return props.isCompact ? COMPACT_TABLE_FONT_SIZE : DEFAULT_TABLE_FONT_SIZE;
-	}, DisabledTextareaBg, FocusDisableBorderColor, FocusDisableBorderColor, FocusDisableBorderColor, FocusDisableBorderColor, FocusDisableBorderColor, BodyFontColor, BodyFontColor, LightBgColorButton, PrimaryBlueColor, DefaultColorButton, LightBgColorButton, menuExtended, LightBgColorButton, LightBgColorButton, AGInputColor, agGridSearch, PanelFooterBg, agGridSetting, CheckBoxBorder, agGridFormatIcon, CheckBoxBorder, WhiteColor, WhiteColor, LabelColor, PrimaryBlueColor);
+	}, DisabledTextareaBg, FocusDisableBorderColor, FocusDisableBorderColor, FocusDisableBorderColor, FocusDisableBorderColor, FocusDisableBorderColor, BodyFontColor, BodyFontColor, LightBgColorButton, PrimaryBlueColor, DefaultColorButton, LightBgColorButton, menuExtended, LightBgColorButton, LightBgColorButton, LightBgColorButton, AGInputColor, agGridSearch, PrimaryBlueColor, PanelFooterBg, agGridSetting, CheckBoxBorder, agGridFormatIcon, CheckBoxBorder, WhiteColor, LabelColor, PrimaryBlueColor, PrimaryBlueColor, PrimaryBlueColor, WhiteColor, AgCellRendererBackground);
 	var PaginationContainer = styled__default.div(_templateObject3$k());
 	var StyledLeftPaginationContainer = styled__default.div(_templateObject4$j(), StyledMenu, StyledDropdownMainButton);
 	var StyledShowRecLabel = styled__default.label(_templateObject5$i(), LabelColor);
@@ -10949,6 +11406,12 @@
 	}, function (props) {
 	  return props.active && styled.css(_templateObject14$6(), PrimaryBlueColor, WhiteColor);
 	});
+	var ExpandCollapseButtonContainer = styled__default.div(_templateObject15$5());
+	var StyledTableSideNavContainer = styled__default.div(_templateObject16$5());
+	var StyledTabHeading = styled__default.h2(_templateObject17$5());
+	var StyledTableOptionsList = styled__default.ul(_templateObject18$3());
+	var StyledHRLine = styled__default.hr(_templateObject19$3());
+	var StyledTableOption = styled__default.li(_templateObject20$2());
 
 	var Pagination = function Pagination(_ref) {
 	  var gridApi = _ref.gridApi,
@@ -11069,6 +11532,190 @@
 	  });
 	};
 
+	function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	/**
+	 *
+	 * @param {object} params // table instance
+	 * Ability to pin/unpin columns based on current state
+	 */
+	var onColMenuFreezeClick = function onColMenuFreezeClick(params) {
+	  var pinned = params.column.pinned; // if column is pinned then unpin, vice-versa
+	  if (pinned) {
+	    freezeColumn(params, false);
+	  } else {
+	    freezeColumn(params, true);
+	  }
+	};
+
+	/**
+	 *
+	 * @param {object} params // table instance
+	 * @param {boolean} isPinned // is column pinned or not
+	 * By default column is pinned to left
+	 */
+	var freezeColumn = function freezeColumn(params, isPinned) {
+	  var colId = params.column.colId;
+	  params.columnApi.applyColumnState({
+	    state: [{
+	      colId: colId,
+	      pinned: isPinned ? "left" : null
+	    }]
+	  });
+	};
+
+	/**
+	 *
+	 * @param {object} params // table instance
+	 * Remove the extra.width property to make column as auto adjust
+	 */
+	var onColMenuAutoAdjustClick = function onColMenuAutoAdjustClick(params) {
+	  var colDefExtra = _objectSpread$j({}, params.column.colDef.extra);
+	  // delete colDefExtra.width;
+	  params.column.colDef.extra = colDefExtra;
+	  params.columnApi.autoSizeColumn(params.column);
+	};
+	var sortFunc = function sortFunc(columnData, sortBy, api) {
+	  // applyColumnState - to manually set the sort order for a particular column
+	  api.columnApi.applyColumnState({
+	    state: [{
+	      colId: columnData.colId,
+	      sort: sortBy
+	    }],
+	    defaultState: {
+	      sort: null
+	    }
+	  });
+	};
+	var getMainMenuItems = function getMainMenuItems(params) {
+	  var _colDef$extra, _colDef$extra3, _colDef$extra4;
+	  var onFontSizeChange = params.onFontSizeChange,
+	    onNumberFormatChange = params.onNumberFormatChange;
+	  var _params$column = params.column,
+	    colDef = _params$column.colDef,
+	    pinned = _params$column.pinned,
+	    sort = _params$column.sort,
+	    actualWidth = _params$column.actualWidth;
+	  var columnMenuItems = [];
+
+	  // grid column menu title
+	  columnMenuItems.push({
+	    name: "Column Settings",
+	    cssClasses: ["settings_main_container"]
+	  }, "separator");
+
+	  // ability to sort column
+	  columnMenuItems.push({
+	    name: "Sort",
+	    subMenu: [{
+	      name: "Sort A to Z",
+	      action: function action() {
+	        return sortFunc(params.column, "asc", params);
+	      },
+	      checked: sort === "asc"
+	    }, {
+	      name: "Sort Z to A",
+	      checked: sort === "desc",
+	      action: function action() {
+	        return sortFunc(params.column, "desc", params);
+	      }
+	    }, {
+	      name: "Reset",
+	      action: function action() {
+	        return sortFunc(params.column, null, params);
+	      }
+	    }],
+	    disabled: false
+	  });
+
+	  // ability to pin/unpin columns based on current state
+	  columnMenuItems.push({
+	    name: pinned ? "Unfreeze Column" : "Freeze Column",
+	    action: function action() {
+	      onColMenuFreezeClick(params);
+	    }
+	  });
+
+	  // ability to adjust column width to custom or auto
+	  columnMenuItems.push({
+	    name: "Column width",
+	    subMenu: [{
+	      name: "Auto Adjust",
+	      action: function action() {
+	        onColMenuAutoAdjustClick(params);
+	      },
+	      // if extra.width property is not present- column is auto adjusted
+	      checked: actualWidth !== (colDef === null || colDef === void 0 ? void 0 : (_colDef$extra = colDef.extra) === null || _colDef$extra === void 0 ? void 0 : _colDef$extra.width)
+	    }, {
+	      name: "Custom width",
+	      action: function action() {
+	        var _colDef$extra2;
+	        // add extra.width property for custom width
+	        params.columnApi.setColumnWidth(params.column.colDef, colDef === null || colDef === void 0 ? void 0 : (_colDef$extra2 = colDef.extra) === null || _colDef$extra2 === void 0 ? void 0 : _colDef$extra2.width);
+	      },
+	      // if extra.width property is present- column has custom width
+	      checked: (colDef === null || colDef === void 0 ? void 0 : (_colDef$extra3 = colDef.extra) === null || _colDef$extra3 === void 0 ? void 0 : _colDef$extra3.width) === actualWidth,
+	      disabled: !(colDef === null || colDef === void 0 ? void 0 : (_colDef$extra4 = colDef.extra) === null || _colDef$extra4 === void 0 ? void 0 : _colDef$extra4.width)
+	    }]
+	  });
+
+	  // text wrap action
+	  columnMenuItems.push({
+	    name: "Wrap Text",
+	    disabled: true
+	  });
+	  columnMenuItems.push({
+	    name: "Format",
+	    cssClasses: ["format_main_container"]
+	  }, "separator");
+	  columnMenuItems.push({
+	    name: "Numeric Values",
+	    subMenu: [{
+	      name: "Full Number",
+	      action: function action() {
+	        return onFontSizeChange("full");
+	      }
+	    }, {
+	      name: "In K",
+	      action: function action() {
+	        return onFontSizeChange("thousand");
+	      }
+	    }, {
+	      name: "In Mn",
+	      action: function action() {
+	        return onFontSizeChange("million");
+	      }
+	    }, {
+	      name: "In Bn",
+	      action: function action() {
+	        return onFontSizeChange("billion");
+	      }
+	    }],
+	    disabled: !onFontSizeChange
+	  });
+	  columnMenuItems.push({
+	    name: "Font Size",
+	    subMenu: [{
+	      name: "Small Font",
+	      action: function action() {
+	        return onNumberFormatChange("small");
+	      }
+	    }, {
+	      name: "Medium Font",
+	      action: function action() {
+	        return onNumberFormatChange("medium");
+	      }
+	    }, {
+	      name: "Large Font",
+	      action: function action() {
+	        return onNumberFormatChange("large");
+	      }
+	    }],
+	    disabled: !onNumberFormatChange
+	  });
+	  return columnMenuItems;
+	};
+
 	function styleInject(css, ref) {
 	  if ( ref === void 0 ) ref = {};
 	  var insertAt = ref.insertAt;
@@ -11096,20 +11743,32 @@
 	  }
 	}
 
-	var css_248z = "@import \"ag-grid-community/styles/ag-grid.css\";\n@import \"ag-grid-community/styles/ag-theme-alpine.css\";\n";
+	var css_248z = "@import \"ag-grid-community/dist/styles/ag-grid.css\";\n@import \"ag-grid-community/dist/styles/ag-theme-alpine.css\";\n";
 	styleInject(css_248z);
 
-	function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var Table = /*#__PURE__*/React.forwardRef(function (_ref, refs) {
-	  var rowData = _ref.rowData,
-	    columnDefs = _ref.columnDefs,
-	    isCompact = _ref.isCompact,
+	function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+	  var isCompact = _ref.isCompact,
 	    pagination = _ref.pagination,
 	    pageSizeList = _ref.pageSizeList,
-	    props = _objectWithoutProperties(_ref, ["rowData", "columnDefs", "isCompact", "pagination", "pageSizeList"]);
+	    isExpandCollapseAll = _ref.isExpandCollapseAll,
+	    _ref$customSideBar = _ref.customSideBar,
+	    customSideBar = _ref$customSideBar === void 0 ? [] : _ref$customSideBar,
+	    onFontSizeChange = _ref.onFontSizeChange,
+	    onNumberFormatChange = _ref.onNumberFormatChange,
+	    props = _objectWithoutProperties(_ref, ["isCompact", "pagination", "pageSizeList", "isExpandCollapseAll", "customSideBar", "onFontSizeChange", "onNumberFormatChange"]);
+	  var _useState = React.useState(false),
+	    _useState2 = _slicedToArray(_useState, 2),
+	    isAllExpanded = _useState2[0],
+	    setIsAllExpanded = _useState2[1];
+	  var _useState3 = React.useState(false),
+	    _useState4 = _slicedToArray(_useState3, 2),
+	    isFirstGroupExpanded = _useState4[0],
+	    setIsFirstGroupExpanded = _useState4[1];
 	  agGridEnterprise.LicenseManager.setLicenseKey("CompanyName=Impact Analytics,LicensedGroup=31Jan22 Purchase,LicenseType=MultipleApplications,LicensedConcurrentDeveloperCount=1,LicensedProductionInstancesCount=0,AssetReference=AG-025014,ExpiryDate=31_January_2023_[v2]_MTY3NTEyMzIwMDAwMA==e4f58ef1fe10261cf66aa1e5a5cb2da6");
-	  var gridRef = React.useRef();
+	  var gridRef = React.useRef(null);
+	  var fontSize = React.useRef("small");
 	  var getRowHeight = function getRowHeight() {
 	    var defaultHeight = 45;
 	    var compactHeight = 25;
@@ -11117,32 +11776,88 @@
 	  };
 	  var columnTypes = {
 	    number: {
-	      width: 100,
-	      cellStyle: {
-	        textAlign: "right"
-	      }
+	      cellClass: ["number-cell"],
+	      headerClass: ["number-header"]
 	    },
 	    cellRenderer: {
-	      cellStyle: {
-	        display: "flex",
-	        alignItems: "center",
-	        justifyContent: "center"
+	      cellClass: ["cell-renderer"]
+	    }
+	  };
+	  var expandCollapseAll = function expandCollapseAll() {
+	    if (props.masterDetail) {
+	      gridRef.current.api.forEachNode(function (node) {
+	        gridRef.current.api.setRowNodeExpanded(node, !isAllExpanded);
+	      });
+	    } else {
+	      if (!isAllExpanded) {
+	        gridRef.current.api.expandAll();
+	      } else {
+	        gridRef.current.api.collapseAll();
 	      }
 	    }
+	    setIsAllExpanded(function (prev) {
+	      return !prev;
+	    });
+	  };
+	  var expandFirstGroup = function expandFirstGroup() {
+	    gridRef.current.api.forEachNode(function (node) {
+	      if (node.level === 0) {
+	        gridRef.current.api.setRowNodeExpanded(node, !isFirstGroupExpanded);
+	      }
+	    });
+	    setIsFirstGroupExpanded(function (prev) {
+	      return !prev;
+	    });
+	  };
+	  var sideBar = {
+	    toolPanels: [
+	      // {
+	      //   id: "format-columns",
+	      //   labelDefault: "",
+	      //   iconKey: "columns",
+	      //   labelKey: "formatColumns",
+	      //   toolPanel: FormatColumns,
+	      //   minWidth: 225,
+	      //   maxWidth: 225,
+	      //   width: 225,
+	      //   toolPanelParams: {
+	      //     fontSize: fontSize,
+	      //   },
+	      // },
+	    ].concat(customSideBar),
+	    defaultToolPanel: ""
 	  };
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledTableContainer, {
 	    className: "ag-theme-alpine",
 	    isCompact: isCompact,
-	    children: [/*#__PURE__*/jsxRuntime.jsx(agGridReact.AgGridReact, _objectSpread$h({
-	      ref: refs ? refs : gridRef,
-	      rowData: rowData,
-	      columnDefs: columnDefs,
+	    children: [isExpandCollapseAll && /*#__PURE__*/jsxRuntime.jsxs(ExpandCollapseButtonContainer, {
+	      children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+	        onClick: expandCollapseAll,
+	        icon: isAllExpanded ? SvgCollapseAll : SvgExpandAll,
+	        variant: "secondary",
+	        disabled: isFirstGroupExpanded
+	      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+	        onClick: expandFirstGroup,
+	        icon: isFirstGroupExpanded ? SvgCollapseFirst : SvgExpandFirst,
+	        variant: "secondary",
+	        disabled: isAllExpanded
+	      })]
+	    }), /*#__PURE__*/jsxRuntime.jsx(agGridReact.AgGridReact, _objectSpread$k({
+	      ref: ref ? ref : gridRef,
 	      columnTypes: columnTypes,
 	      getRowHeight: getRowHeight,
+	      suppressMenuHide: true,
 	      pagination: pagination,
-	      suppressPaginationPanel: true
-	    }, props)), pagination && (refs.current || gridRef.current) && /*#__PURE__*/jsxRuntime.jsx(Pagination, {
-	      gridApi: refs ? refs.current.api : gridRef.current.api,
+	      suppressPaginationPanel: true,
+	      getMainMenuItems: function getMainMenuItems$1(params) {
+	        return getMainMenuItems(_objectSpread$k(_objectSpread$k({}, params), {}, {
+	          onFontSizeChange: onFontSizeChange,
+	          onNumberFormatChange: onNumberFormatChange
+	        }));
+	      },
+	      sideBar: sideBar
+	    }, props)), pagination && gridRef.current && /*#__PURE__*/jsxRuntime.jsx(Pagination, {
+	      gridApi: gridRef.current.api,
 	      pageSizeList: pageSizeList
 	    })]
 	  });
@@ -11243,8 +11958,8 @@
 	var StyledPanelFooter = styled__default.div(_templateObject10$e(), PanelFooterBg);
 	var StyledPanelCTAContainer = styled__default.div(_templateObject11$d());
 
-	function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 	var Panel = function Panel(_ref) {
 	  var isOpen = _ref.isOpen,
 	    size = _ref.size,
@@ -11258,21 +11973,29 @@
 	    children: isOpen && /*#__PURE__*/jsxRuntime.jsx(ClickAwayListener, {
 	      onClickAway: onClose,
 	      children: /*#__PURE__*/jsxRuntime.jsx(StyledPanel, {
+	        className: "panel",
 	        children: /*#__PURE__*/jsxRuntime.jsxs(StyledPanelContentContainer, {
 	          size: size,
+	          className: "panel-container",
 	          children: [/*#__PURE__*/jsxRuntime.jsxs(StyledPanelHeader, {
+	            className: "panel-header",
 	            children: [/*#__PURE__*/jsxRuntime.jsx(StyledPanelHeading, {
+	              className: "panel-heading",
 	              children: title
 	            }), /*#__PURE__*/jsxRuntime.jsx(StyledPanelCloseIcon, {
-	              onClick: onClose
+	              onClick: onClose,
+	              className: "panel-close-button"
 	            })]
 	          }), /*#__PURE__*/jsxRuntime.jsx(StyledPanelBodyContainer, {
+	            className: "panel-body-container",
 	            children: children
 	          }), /*#__PURE__*/jsxRuntime.jsx(StyledPanelFooter, {
+	            className: "panel-footer",
 	            children: /*#__PURE__*/jsxRuntime.jsxs(StyledPanelCTAContainer, {
-	              children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$i(_objectSpread$i({}, tertiaryButtonProps), {}, {
+	              className: "panel-buttons-container",
+	              children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$l(_objectSpread$l({}, tertiaryButtonProps), {}, {
 	                variant: "url"
-	              })), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$i(_objectSpread$i({}, primaryButtonProps), {}, {
+	              })), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$l(_objectSpread$l({}, primaryButtonProps), {}, {
 	                variant: "primary"
 	              }))]
 	            })
@@ -11298,7 +12021,7 @@
 	  return data;
 	}
 	function _templateObject4$l() {
-	  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: max-content;\n  ", " {\n    width: 140px;\n    box-sizing: border-box;\n    padding-right: 35px;\n  }\n  ", "\n\n  ", "\n"]);
+	  var data = _taggedTemplateLiteral(["\n  position: relative;\n  /* width: max-content; */\n  ", " {\n    width: 140px;\n    box-sizing: border-box;\n    padding-right: 35px;\n  }\n  ", "\n\n  ", "\n"]);
 	  _templateObject4$l = function _templateObject4() {
 	    return data;
 	  };
@@ -11334,7 +12057,7 @@
 	  return props.stepper && styled.css(_templateObject6$i(), StyledInputBox, StyledArrowContainer, StyledUpBottomContainer, DisabledTextareaBg, minusIcon, FocusBackgroundColor, minusIcon, StyledUpArrowContainer, DisabledTextareaBg, plusIcon, FocusBackgroundColor, plusIcon);
 	});
 
-	var Counter = function Counter(_ref) {
+	var Counter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var label = _ref.label,
 	    placeholder = _ref.placeholder,
 	    value = _ref.value,
@@ -11346,7 +12069,8 @@
 	    _ref$min = _ref.min,
 	    min = _ref$min === void 0 ? 0 : _ref$min,
 	    _ref$max = _ref.max,
-	    max = _ref$max === void 0 ? 100 : _ref$max;
+	    max = _ref$max === void 0 ? 100 : _ref$max,
+	    className = _ref.className;
 	  var handleIncrement = function handleIncrement() {
 	    setValue(function (prevValue) {
 	      var prevValueNum = Number(prevValue);
@@ -11369,6 +12093,8 @@
 	  return /*#__PURE__*/jsxRuntime.jsxs(StyledCounter, {
 	    disabled: disabled,
 	    stepper: stepper,
+	    className: "".concat(className, " counter-container"),
+	    ref: ref === null || ref === void 0 ? void 0 : ref.containerRef,
 	    children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
 	      type: "number",
 	      label: label,
@@ -11377,16 +12103,20 @@
 	      helperText: label,
 	      min: min,
 	      max: max,
-	      onChange: handleInputChange
+	      onChange: handleInputChange,
+	      className: "counter-input",
+	      ref: ref === null || ref === void 0 ? void 0 : ref.inputRef
 	    }), /*#__PURE__*/jsxRuntime.jsxs(StyledArrowContainer, {
 	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledUpArrowContainer, {
-	        onClick: handleIncrement
+	        onClick: handleIncrement,
+	        className: "counter-increment-button"
 	      }), /*#__PURE__*/jsxRuntime.jsx(StyledUpBottomContainer, {
-	        onClick: handleDecrement
+	        onClick: handleDecrement,
+	        className: "counter-decrement-button"
 	      })]
 	    })]
 	  });
-	};
+	});
 
 	function _templateObject7$h() {
 	  var data = _taggedTemplateLiteral(["\n  height: 50px;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 16px;\n"]);
@@ -11445,14 +12175,15 @@
 	var StyledBodyContainer = styled__default.p(_templateObject6$j());
 	var StyledBottomCTAContainer$2 = styled__default.div(_templateObject7$h());
 
-	var Card = function Card(_ref) {
+	var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var children = _ref.children;
 	  return /*#__PURE__*/jsxRuntime.jsx(StyledCardContainer, {
+	    ref: ref,
 	    children: /*#__PURE__*/jsxRuntime.jsx(StyledCard, {
 	      children: children
 	    })
 	  });
-	};
+	});
 
 	function _templateObject13$7() {
 	  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  position: absolute;\n  width: 30%;\n  left: 0%;\n  height: 6px;\n  border-radius: 4px;\n"]);
@@ -11561,7 +12292,7 @@
 	var StyledSliderRange = styled__default.div(_templateObject12$9(), PrimaryBlueColor);
 	var StyledSliderActive = styled__default.div(_templateObject13$7(), PrimaryBlueColor);
 
-	var Slider = function Slider(_ref) {
+	var Slider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var min = _ref.min,
 	    max = _ref.max,
 	    onChange = _ref.onChange,
@@ -11569,7 +12300,8 @@
 	    minDiff = _ref$minDiff === void 0 ? 1 : _ref$minDiff,
 	    disabled = _ref.disabled,
 	    label = _ref.label,
-	    isRangeSelector = _ref.isRangeSelector;
+	    isRangeSelector = _ref.isRangeSelector,
+	    className = _ref.className;
 	  var _useState = React.useState(min),
 	    _useState2 = _slicedToArray(_useState, 2),
 	    currentMinValue = _useState2[0],
@@ -11650,11 +12382,15 @@
 	  };
 	  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
 	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledSliderLabel, {
+	      className: "slider-label",
 	      children: label
 	    }), /*#__PURE__*/jsxRuntime.jsxs(StyledMainContainer, {
 	      disabled: disabled,
 	      isRangeSelector: isRangeSelector,
+	      className: "".concat(className, " slider-main-container"),
 	      children: [/*#__PURE__*/jsxRuntime.jsxs(StyledSliderContainer, {
+	        className: "slider-container",
+	        ref: ref,
 	        children: [isRangeSelector && /*#__PURE__*/jsxRuntime.jsx(StyledSliderLeft, {
 	          type: "range",
 	          min: min,
@@ -11666,39 +12402,48 @@
 	            zIndex: currentMinValue > max - max * 0.1 && "5"
 	          } // increase z-index of left thumb if it is closer than 10% of max value to avoid left thumb going below right thumb
 	          ,
-	          disabled: disabled
+	          disabled: disabled,
+	          className: "slider-left-thumb"
 	        }), /*#__PURE__*/jsxRuntime.jsx(StyledSliderRight, {
 	          type: "range",
 	          min: min,
 	          max: max,
 	          value: currentMaxValue,
 	          onChange: handleRightSliderChange,
-	          disabled: disabled
+	          disabled: disabled,
+	          className: "slider-right-thumb"
 	        }), /*#__PURE__*/jsxRuntime.jsxs(StyledSlider, {
-	          children: [/*#__PURE__*/jsxRuntime.jsx(StyledSliderTrack, {}), /*#__PURE__*/jsxRuntime.jsx(StyledSliderRange, {
-	            ref: range
+	          className: "slider",
+	          children: [/*#__PURE__*/jsxRuntime.jsx(StyledSliderTrack, {
+	            className: "slider-track"
+	          }), /*#__PURE__*/jsxRuntime.jsx(StyledSliderRange, {
+	            ref: range,
+	            className: "slider-range"
 	          })]
 	        })]
 	      }), /*#__PURE__*/jsxRuntime.jsxs(StyledInputContainer$1, {
+	        className: "slider-input-container",
 	        children: [isRangeSelector && /*#__PURE__*/jsxRuntime.jsx(Input, {
 	          type: "number",
 	          ref: minInputRef,
 	          placeholder: 0,
 	          disabled: disabled,
 	          onBlur: handleMinInputBlur,
-	          defaultValue: min
+	          defaultValue: min,
+	          className: "slider-min-input"
 	        }), /*#__PURE__*/jsxRuntime.jsx(Input, {
 	          type: "number",
 	          ref: maxInputRef,
 	          placeholder: 0,
 	          disabled: disabled,
 	          onBlur: handleMaxInputBlur,
-	          defaultValue: max
+	          defaultValue: max,
+	          className: "slider-max-input"
 	        })]
 	      })]
 	    })]
 	  });
-	};
+	});
 
 	function _templateObject12$a() {
 	  var data = _taggedTemplateLiteral(["\n            display: none;\n          "]);
@@ -11811,19 +12556,24 @@
 	  }
 	});
 
-	function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 	var Spinner = function Spinner(_ref) {
 	  var size = _ref.size,
 	    progress = _ref.progress,
 	    showLoadingText = _ref.showLoadingText,
 	    props = _objectWithoutProperties(_ref, ["size", "progress", "showLoadingText"]);
-	  return /*#__PURE__*/jsxRuntime.jsxs(StyledSpinnerMainContainer, _objectSpread$j(_objectSpread$j({
-	    size: size
+	  return /*#__PURE__*/jsxRuntime.jsxs(StyledSpinnerMainContainer, _objectSpread$m(_objectSpread$m({
+	    size: size,
+	    className: "".concat(props.className, " spinner-container")
 	  }, props), {}, {
-	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledSpinner, {}), progress && /*#__PURE__*/jsxRuntime.jsxs(SpinnerPercentage, {
+	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledSpinner, {
+	      className: "spinner"
+	    }), progress && /*#__PURE__*/jsxRuntime.jsxs(SpinnerPercentage, {
+	      className: "spinner-container",
 	      children: [progress, "%"]
 	    }), showLoadingText && /*#__PURE__*/jsxRuntime.jsx(StyledSpinnerText, {
+	      className: "spinner-loading-text",
 	      children: "Loading..."
 	    })]
 	  }));
@@ -11928,9 +12678,9 @@
 	  return props.hideImage && styled.css(_templateObject11$g(), StyledImageContainer, StyledContentContainer);
 	});
 
-	function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-	function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-	var EmptyState = function EmptyState(_ref) {
+	function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	var EmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var heading = _ref.heading,
 	    info = _ref.info,
 	    variant = _ref.variant,
@@ -11940,28 +12690,37 @@
 	    primaryButtonProps = _ref.primaryButtonProps,
 	    secondaryButtonProps = _ref.secondaryButtonProps,
 	    props = _objectWithoutProperties(_ref, ["heading", "info", "variant", "layout", "hideImage", "hideButtons", "primaryButtonProps", "secondaryButtonProps"]);
-	  return /*#__PURE__*/jsxRuntime.jsx(StyledEmptyState, _objectSpread$k(_objectSpread$k({
+	  return /*#__PURE__*/jsxRuntime.jsx(StyledEmptyState, _objectSpread$n(_objectSpread$n({
 	    variant: variant,
 	    layout: layout,
-	    hideImage: hideImage
+	    hideImage: hideImage,
+	    className: "emptyState-container",
+	    ref: ref
 	  }, props), {}, {
 	    children: /*#__PURE__*/jsxRuntime.jsxs(StyledImageContentContainer, {
-	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledImageContainer, {}), /*#__PURE__*/jsxRuntime.jsxs(StyledContentContainer, {
+	      className: "emptyState-main-container",
+	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledImageContainer, {
+	        className: "emptyState-image-container"
+	      }), /*#__PURE__*/jsxRuntime.jsxs(StyledContentContainer, {
+	        className: "emptyState-content-container",
 	        children: [/*#__PURE__*/jsxRuntime.jsx(StyledStateHeading, {
+	          className: "emptyState-heading",
 	          children: heading
 	        }), /*#__PURE__*/jsxRuntime.jsx(StyledInfoText, {
+	          className: "emptyState-info-text",
 	          children: info
 	        }), !hideButtons && /*#__PURE__*/jsxRuntime.jsxs(StyledCTAContainer, {
-	          children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$k({
+	          className: "emptyState-button-container",
+	          children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$n({
 	            variant: "primary"
-	          }, primaryButtonProps)), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$k({
+	          }, primaryButtonProps)), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$n({
 	            variant: "secondary"
 	          }, secondaryButtonProps))]
 	        })]
 	      })]
 	    })
 	  }));
-	};
+	});
 
 	function _templateObject27() {
 	  var data = _taggedTemplateLiteral(["\n              border-radius: 17px;\n              padding: 2px 12px;\n              height: 22px;\n            "]);
@@ -12012,44 +12771,44 @@
 	  };
 	  return data;
 	}
-	function _templateObject20$2() {
+	function _templateObject20$3() {
 	  var data = _taggedTemplateLiteral(["\n              padding-left: 24px;\n              background: ", ";\n              border: 1px solid ", ";\n              color: ", ";\n              &::before {\n                content: \" \";\n                width: 8px;\n                height: 8px;\n                background: ", ";\n                position: absolute;\n                left: 8px;\n                top: 0;\n                bottom: 0%;\n                margin: auto;\n                border-radius: 50%;\n              }\n            "]);
-	  _templateObject20$2 = function _templateObject20() {
+	  _templateObject20$3 = function _templateObject20() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject19$2() {
+	function _templateObject19$4() {
 	  var data = _taggedTemplateLiteral(["\n              background: ", ";\n              border: 1px solid ", ";\n              color: ", ";\n            "]);
-	  _templateObject19$2 = function _templateObject19() {
+	  _templateObject19$4 = function _templateObject19() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject18$3() {
+	function _templateObject18$4() {
 	  var data = _taggedTemplateLiteral(["\n          background: ", ";\n          ", "\n\n          ", "\n            ", "\n            ", "\n        "]);
-	  _templateObject18$3 = function _templateObject18() {
+	  _templateObject18$4 = function _templateObject18() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject17$5() {
+	function _templateObject17$6() {
 	  var data = _taggedTemplateLiteral(["\n              border-radius: 17px;\n              padding: 2px 12px;\n              height: 22px;\n            "]);
-	  _templateObject17$5 = function _templateObject17() {
+	  _templateObject17$6 = function _templateObject17() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject16$5() {
+	function _templateObject16$6() {
 	  var data = _taggedTemplateLiteral(["\n              background: ", ";\n              border: 1px solid ", ";\n              color: ", ";\n            "]);
-	  _templateObject16$5 = function _templateObject16() {
+	  _templateObject16$6 = function _templateObject16() {
 	    return data;
 	  };
 	  return data;
 	}
-	function _templateObject15$5() {
+	function _templateObject15$6() {
 	  var data = _taggedTemplateLiteral(["\n              padding-left: 24px;\n              background: ", ";\n              border: 1px solid ", ";\n              color: ", ";\n              &::before {\n                content: \" \";\n                width: 8px;\n                height: 8px;\n                background: ", ";\n                position: absolute;\n                left: 8px;\n                top: 0;\n                bottom: 0%;\n                margin: auto;\n                border-radius: 50%;\n              }\n            "]);
-	  _templateObject15$5 = function _templateObject15() {
+	  _templateObject15$6 = function _templateObject15() {
 	    return data;
 	  };
 	  return data;
@@ -12179,17 +12938,17 @@
 	      return styled.css(_templateObject13$8(), AlertRedErrorStroke, function (props) {
 	        return props.outline && styled.css(_templateObject14$7(), WhiteColor, AlertRedErrorStroke, AlertRedErrorStroke);
 	      }, function (props) {
-	        return props.outlineDot && styled.css(_templateObject15$5(), WhiteColor, AlertRedErrorStroke, AlertRedErrorStroke, AlertRedErrorStroke);
+	        return props.outlineDot && styled.css(_templateObject15$6(), WhiteColor, AlertRedErrorStroke, AlertRedErrorStroke, AlertRedErrorStroke);
 	      }, function (props) {
-	        return props.secondary && styled.css(_templateObject16$5(), AlertRedErrorBackground, AlertRedErrorStroke, AlertRedErrorStroke);
+	        return props.secondary && styled.css(_templateObject16$6(), AlertRedErrorBackground, AlertRedErrorStroke, AlertRedErrorStroke);
 	      }, function (props) {
-	        return props.rounded && styled.css(_templateObject17$5());
+	        return props.rounded && styled.css(_templateObject17$6());
 	      });
 	    case "warning":
-	      return styled.css(_templateObject18$3(), AlertOrangeWarningStroke, function (props) {
-	        return props.outline && styled.css(_templateObject19$2(), WhiteColor, AlertOrangeWarningStroke, AlertOrangeWarningStroke);
+	      return styled.css(_templateObject18$4(), AlertOrangeWarningStroke, function (props) {
+	        return props.outline && styled.css(_templateObject19$4(), WhiteColor, AlertOrangeWarningStroke, AlertOrangeWarningStroke);
 	      }, function (props) {
-	        return props.outlineDot && styled.css(_templateObject20$2(), WhiteColor, AlertOrangeWarningStroke, AlertOrangeWarningStroke, AlertOrangeWarningStroke);
+	        return props.outlineDot && styled.css(_templateObject20$3(), WhiteColor, AlertOrangeWarningStroke, AlertOrangeWarningStroke, AlertOrangeWarningStroke);
 	      }, function (props) {
 	        return props.secondary && styled.css(_templateObject21$1(), AlertOrangeWarningBackground, AlertOrangeWarningStroke, AlertOrangeWarningStroke);
 	      }, function (props) {
@@ -12208,7 +12967,9 @@
 	  }
 	});
 
-	var Badge = function Badge(_ref) {
+	function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+	function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+	var Badge = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var label = _ref.label,
 	    _ref$variant = _ref.variant,
 	    variant = _ref$variant === void 0 ? "default" : _ref$variant,
@@ -12216,65 +12977,288 @@
 	    outlineDot = _ref.outlineDot,
 	    secondary = _ref.secondary,
 	    rounded = _ref.rounded,
-	    onClick = _ref.onClick;
-	  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-	    children: /*#__PURE__*/jsxRuntime.jsx(StyledBadgeContainer, {
-	      onClick: onClick,
-	      children: /*#__PURE__*/jsxRuntime.jsx(StyledBadge, {
-	        variant: variant,
-	        outline: outline,
-	        outlineDot: outlineDot,
-	        secondary: secondary,
-	        rounded: rounded,
-	        active: true,
-	        children: label
-	      })
-	    })
-	  });
-	};
+	    onClick = _ref.onClick,
+	    props = _objectWithoutProperties(_ref, ["label", "variant", "outline", "outlineDot", "secondary", "rounded", "onClick"]);
+	  return /*#__PURE__*/jsxRuntime.jsx(StyledBadge, _objectSpread$o(_objectSpread$o({
+	    variant: variant,
+	    outline: outline,
+	    outlineDot: outlineDot,
+	    secondary: secondary,
+	    rounded: rounded,
+	    onClick: onClick,
+	    ref: ref
+	  }, props), {}, {
+	    children: label
+	  }));
+	});
 
+	function _templateObject10$j() {
+	  var data = _taggedTemplateLiteral(["\n      background: url(", ") no-repeat;\n      background-position: center right 12px;\n      &:hover {\n        background: ", " url(", ") no-repeat;\n        background-position: center right 12px;\n        ", " {\n          display: block;\n        }\n      }\n    "]);
+	  _templateObject10$j = function _templateObject10() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject9$k() {
+	  var data = _taggedTemplateLiteral(["\n      pointer-events: none;\n      color: ", ";\n      font-size: 12px;\n      line-height: 18px;\n    "]);
+	  _templateObject9$k = function _templateObject9() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject8$l() {
+	  var data = _taggedTemplateLiteral(["\n      pointer-events: none;\n      color: ", ";\n    "]);
+	  _templateObject8$l = function _templateObject8() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject7$m() {
+	  var data = _taggedTemplateLiteral(["\n  padding: 8px 12px;\n  font-size: 14px;\n  line-height: 21px;\n  cursor: pointer;\n  max-width: 160px;\n  align-items: center;\n  min-width: 120px;\n  box-sizing: border-box;\n  gap: 8px;\n  position: relative;\n  display: flex;\n  ", "\n  ", "\n    &:hover {\n    background: ", ";\n  }\n  ", "\n"]);
+	  _templateObject7$m = function _templateObject7() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject6$o() {
+	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  background: ", ";\n  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);\n  border-radius: 4px;\n  padding: 12px 0;\n  min-width: 120px;\n  max-width: 180px;\n  top: 0;\n  left: calc(100% + 10px);\n\n  ", ":before {\n    width: 0;\n    content: \" \";\n    height: 0;\n    border-left: 7px solid transparent;\n    border-right: 7px solid transparent;\n    border-bottom: 7px solid ", ";\n    left: -10px;\n    top: 2px;\n    position: absolute;\n    transform: rotate(270deg);\n  }\n"]);
+	  _templateObject6$o = function _templateObject6() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject5$q() {
+	  var data = _taggedTemplateLiteral(["\n  width: 16px;\n  height: 16px;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"]);
+	  _templateObject5$q = function _templateObject5() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject4$r() {
+	  var data = _taggedTemplateLiteral(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: flex;\n  display: block;\n  overflow: hidden;\n"]);
+	  _templateObject4$r = function _templateObject4() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject3$s() {
+	  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);\n  border-radius: 4px;\n  padding: 12px 0;\n  max-width: 180px;\n  position: absolute;\n\n  &:before {\n    width: 0;\n    content: \" \";\n    height: 0;\n    border-left: 7px solid transparent;\n    border-right: 7px solid transparent;\n    border-bottom: 7px solid ", ";\n    left: 10px;\n    top: -7px;\n    position: absolute;\n  }\n\n  ", ":not(:first-child) {\n    border-top: 1px solid ", ";\n  }\n"]);
+	  _templateObject3$s = function _templateObject3() {
+	    return data;
+	  };
+	  return data;
+	}
+	function _templateObject2$s() {
+	  var data = _taggedTemplateLiteral(["\n  position: relative;\n"]);
+	  _templateObject2$s = function _templateObject2() {
+	    return data;
+	  };
+	  return data;
+	}
 	function _templateObject$u() {
-	  var data = _taggedTemplateLiteral([""]);
+	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"]);
 	  _templateObject$u = function _templateObject() {
 	    return data;
 	  };
 	  return data;
 	}
-	var StyledMenu$1 = styled__default.div(_templateObject$u());
+	var StyledListUL = styled__default.ul(_templateObject$u());
+	var StyledContainer$1 = styled__default.div(_templateObject2$s());
+	var StyledMenuContainer = styled__default.div(_templateObject3$s(), WhiteColor, WhiteColor, StyledListUL, AvatarBgColor);
+	var StyledOptionText = styled__default.span(_templateObject4$r());
+	var StyledListIcon = styled__default.span(_templateObject5$q());
+	var StyledSubListContainer = styled__default.div(_templateObject6$o(), WhiteColor, StyledListUL, WhiteColor);
+	var StyledListLi = styled__default.li(_templateObject7$m(), function (props) {
+	  return props.disabled && styled.css(_templateObject8$l(), DisabledButtonFontColor);
+	}, function (props) {
+	  return props.listHeading && styled.css(_templateObject9$k(), LabelColor);
+	}, FocusBackgroundColor, function (props) {
+	  return props.newList && styled.css(_templateObject10$j(), RightChevronImage, FocusBackgroundColor, RightChevronImage, StyledSubListContainer);
+	});
 
-	var Menu = function Menu() {
-	  return /*#__PURE__*/jsxRuntime.jsx("div", {
-	    children: /*#__PURE__*/jsxRuntime.jsx(StyledMenu$1, {})
+	var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+	  var label = _ref.label,
+	    onClick = _ref.onClick,
+	    disabled = _ref.disabled,
+	    icon = _ref.icon,
+	    children = _ref.children;
+	  var _useState = React.useState(false),
+	    _useState2 = _slicedToArray(_useState, 2),
+	    isSubMenuOpen = _useState2[0],
+	    setIsSubMenuOpen = _useState2[1];
+	  var timeoutRef = React.useRef(null);
+	  var handleMouseEnter = function handleMouseEnter() {
+	    clearTimeout(timeoutRef.current);
+	    setIsSubMenuOpen(true);
+	  };
+	  var handleMouseLeave = function handleMouseLeave() {
+	    clearTimeout(timeoutRef.current);
+	    timeoutRef.current = setTimeout(function () {
+	      setIsSubMenuOpen(false);
+	    }, 200); // Delay in milliseconds before closing the submenu
+	  };
+
+	  var handleSubMenuMouseEnter = function handleSubMenuMouseEnter() {
+	    clearTimeout(timeoutRef.current);
+	    setIsSubMenuOpen(true);
+	  };
+	  var handleSubMenuMouseLeave = function handleSubMenuMouseLeave() {
+	    clearTimeout(timeoutRef.current);
+	    timeoutRef.current = setTimeout(function () {
+	      setIsSubMenuOpen(false);
+	    }, 200); // Delay in milliseconds before closing the submenu
+	  };
+
+	  React.useEffect(function () {
+	    return function () {
+	      clearTimeout(timeoutRef.current);
+	    };
+	  }, []);
+	  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+	    children: [!children && /*#__PURE__*/jsxRuntime.jsxs(StyledListLi, {
+	      onClick: onClick,
+	      disabled: disabled,
+	      className: "menu-item",
+	      ref: ref,
+	      children: [icon && /*#__PURE__*/jsxRuntime.jsx(StyledListIcon, {
+	        className: "menu-item-icon",
+	        children: icon
+	      }), /*#__PURE__*/jsxRuntime.jsx(StyledOptionText, {
+	        className: "menu-item-text",
+	        children: label
+	      })]
+	    }), children && /*#__PURE__*/jsxRuntime.jsxs(StyledListLi, {
+	      newList: true,
+	      onMouseEnter: handleMouseEnter,
+	      onMouseLeave: handleMouseLeave,
+	      className: "menu-item",
+	      ref: ref,
+	      children: [/*#__PURE__*/jsxRuntime.jsx(StyledOptionText, {
+	        className: "menu-item-text",
+	        children: label
+	      }), isSubMenuOpen && /*#__PURE__*/jsxRuntime.jsx(StyledSubListContainer, {
+	        onClick: function onClick(e) {
+	          return e.stopPropagation();
+	        },
+	        onMouseEnter: handleSubMenuMouseEnter,
+	        onMouseLeave: handleSubMenuMouseLeave,
+	        className: "menu-subMenu",
+	        children: /*#__PURE__*/jsxRuntime.jsx(StyledListUL, {
+	          className: "menu-subMenu-list",
+	          children: children
+	        })
+	      })]
+	    })]
 	  });
-	};
+	});
+
+	var MenuSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+	  var label = _ref.label,
+	    children = _ref.children;
+	  return /*#__PURE__*/jsxRuntime.jsxs(StyledListUL, {
+	    newSection: true,
+	    className: "menu-list",
+	    ref: ref,
+	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledListLi, {
+	      listHeading: true,
+	      className: "menu-list-heading",
+	      children: /*#__PURE__*/jsxRuntime.jsx(StyledOptionText, {
+	        className: "menu-heading-text",
+	        children: label
+	      })
+	    }), children]
+	  });
+	});
+
+	var Menu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+	  var _anchorRef$current;
+	  var disabled = _ref.disabled,
+	    children = _ref.children,
+	    anchorElement = _ref.anchorElement,
+	    anchorRef = _ref.anchorRef,
+	    props = _objectWithoutProperties(_ref, ["disabled", "children", "anchorElement", "anchorRef"]);
+	  var _useState = React.useState(false),
+	    _useState2 = _slicedToArray(_useState, 2),
+	    isMenuOpen = _useState2[0],
+	    setIsMenuOpen = _useState2[1];
+	  return /*#__PURE__*/jsxRuntime.jsxs(StyledContainer$1, {
+	    className: "menu-container",
+	    children: [/*#__PURE__*/React__default.cloneElement(anchorElement, {
+	      onClick: function onClick() {
+	        return setIsMenuOpen(true);
+	      },
+	      ref: anchorRef,
+	      className: "menu-anchor-element"
+	    }), isMenuOpen && /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+	      children: /*#__PURE__*/jsxRuntime.jsx(ClickAwayListener, {
+	        onClickAway: function onClickAway() {
+	          return setIsMenuOpen(false);
+	        },
+	        children: /*#__PURE__*/jsxRuntime.jsx(StyledMenuContainer, {
+	          onClick: function onClick(e) {
+	            e.stopPropagation();
+	          },
+	          style: {
+	            top: ((_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.offsetHeight) + 12,
+	            left: 0
+	          },
+	          className: "menu-popup-container",
+	          children: children
+	        })
+	      })
+	    })]
+	  });
+	});
 
+	function _templateObject2$t() {
+	  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"]);
+	  _templateObject2$t = function _templateObject2() {
+	    return data;
+	  };
+	  return data;
+	}
 	function _templateObject$v() {
-	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 5px;\n\n  flex-direction: column;\n"]);
+	  var data = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 10px;\n\n  flex-direction: ", ";\n"]);
 	  _templateObject$v = function _templateObject() {
 	    return data;
 	  };
 	  return data;
 	}
-	var StyledRadioGroup = styled__default.div(_templateObject$v());
+	var StyledRadioGroup = styled__default.div(_templateObject$v(), function (props) {
+	  return props.layout === "vertical" ? "column" : "row";
+	});
+	var StyledRadioGroupLabel = styled__default.label(_templateObject2$t(), LabelColor);
 
-	var RadioGroup = function RadioGroup(_ref) {
+	var RadioGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 	  var children = _ref.children,
 	    value = _ref.value,
 	    name = _ref.name,
-	    _onChange = _ref.onChange;
-	  return /*#__PURE__*/jsxRuntime.jsx(StyledRadioGroup, {
-	    children: children.map(function (child) {
-	      var radioValue = child.props.value;
-	      return /*#__PURE__*/React__default.cloneElement(child, {
-	        onChange: function onChange(event) {
-	          return _onChange(event.target.value);
-	        },
-	        checked: radioValue === value,
-	        name: name
-	      });
-	    })
+	    _onChange = _ref.onChange,
+	    _ref$layout = _ref.layout,
+	    layout = _ref$layout === void 0 ? "vertical" : _ref$layout,
+	    className = _ref.className,
+	    label = _ref.label;
+	  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+	    ref: ref,
+	    children: [/*#__PURE__*/jsxRuntime.jsx(StyledRadioGroupLabel, {
+	      className: "radioGroup-label",
+	      children: label
+	    }), /*#__PURE__*/jsxRuntime.jsx(StyledRadioGroup, {
+	      layout: layout,
+	      className: "".concat(className, " radioGroup"),
+	      children: children.map(function (child) {
+	        var radioValue = child.props.value;
+	        return /*#__PURE__*/React__default.cloneElement(child, {
+	          onChange: function onChange(event) {
+	            return _onChange(event.target.value);
+	          },
+	          checked: radioValue === value,
+	          name: name
+	        });
+	      })
+	    })]
 	  });
-	};
+	});
 
 	exports.Accordion = Accordion;
 	exports.Alerts = Alerts;
@@ -12292,6 +13276,8 @@
 	exports.FileSelector = FileSelector;
 	exports.Input = Input;
 	exports.Menu = Menu;
+	exports.MenuItem = MenuItem;
+	exports.MenuSection = MenuSection;
 	exports.Modal = Modal;
 	exports.Panel = Panel;
 	exports.ProgressBar = ProgressBar;