@bigbinary/neetoui 6.0.5 → 6.1.0

package/index.js

@@ -1,8 +1,8 @@
 import * as React$3 from 'react';
 import React__default, { createContext, useLayoutEffect, useEffect, useContext, useRef, useInsertionEffect as useInsertionEffect$1, useCallback, useMemo, forwardRef as forwardRef$1, createElement, useId as useId$1, useState, cloneElement as cloneElement$1, Children, isValidElement, useSyncExternalStore, Fragment, Component, memo as memo$1 } from 'react';
-import { isEmpty, equals, complement, toPairs, pipe as pipe$1, omit, isNil, mergeLeft, replace as replace$2, assoc, pluck, prop, flatten, move } from 'ramda';
-import { Right, Down, Close, Info, Focus, Left, Calendar, Check, MenuHorizontal, Clock as Clock$1, CheckCircle, Warning, CloseCircle } from '@bigbinary/neeto-icons';
-import { preprocessForSerialization, isPresent, _existsBy, camelToSnakeCase, modifyBy, snakeToCamelCase, dynamicArray } from '@bigbinary/neeto-cist';
+import { isEmpty, equals, complement, toPairs, pipe as pipe$1, omit, isNil, mergeLeft, replace as replace$2, assoc, pluck, prop, flatten, move, props } from 'ramda';
+import { Right, Down, Close, Info, Focus, Left, Calendar, Check, UpArrow, DownArrow, MenuHorizontal, Clock as Clock$1, CheckCircle, Warning, CloseCircle } from '@bigbinary/neeto-icons';
+import { preprocessForSerialization, isPresent, _existsBy, noop as noop$5, camelToSnakeCase, modifyBy, snakeToCamelCase, dynamicArray } from '@bigbinary/neeto-cist';
 import require$$0 from 'util';
 import { Link, useLocation, useHistory, NavLink } from 'react-router-dom';
 import ReactDOM, { createPortal, findDOMNode as findDOMNode$1 } from 'react-dom';
@@ -9382,14 +9382,14 @@ function _objectWithoutProperties$1(source, excluded) {
   return target;
 }
 
-var _excluded$J = ["open", "children", "className"];
+var _excluded$M = ["open", "children", "className"];
 var Collapse = function Collapse(_ref) {
   var _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$J);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$M);
   return /*#__PURE__*/React__default.createElement(AnimatePresence, null, open && /*#__PURE__*/React__default.createElement(motion.div, _extends$4({
     animate: {
       opacity: 1,
@@ -11728,10 +11728,10 @@ var buildUrl = function buildUrl(route, params) {
   return isEmpty(queryParams) ? route : "".concat(route, "?").concat(queryParams);
 };
 
-var _excluded$I = ["children"];
+var _excluded$L = ["children"];
 var Portal$1 = function Portal(_ref, ref) {
   var children = _ref.children,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$I);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$L);
   return /*#__PURE__*/React__default.createElement("div", _extends$4({
     "data-cy": "neeto-backdrop",
     "data-testid": "neeto-backdrop",
@@ -15685,7 +15685,7 @@ var index$1 = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 
 var ARROW = "<svg width='12' height='6' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10 5H0.926697L3.95208 1.63847C4.74227 0.760478 6.11722 0.754951 6.91445 1.62656L10 5Z' /></svg>";
 
-var _excluded$H = ["content", "children", "theme", "disabled", "position", "interactive", "hideAfter", "hideOnTargetExit"];
+var _excluded$K = ["content", "children", "theme", "disabled", "position", "interactive", "hideAfter", "hideOnTargetExit"];
 var Tooltip = function Tooltip(_ref) {
   var content = _ref.content,
     children = _ref.children,
@@ -15701,7 +15701,7 @@ var Tooltip = function Tooltip(_ref) {
     hideAfter = _ref$hideAfter === void 0 ? -1 : _ref$hideAfter,
     _ref$hideOnTargetExit = _ref.hideOnTargetExit,
     hideOnTargetExit = _ref$hideOnTargetExit === void 0 ? false : _ref$hideOnTargetExit,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$H);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$K);
   var _useState = useState(null),
     _useState2 = _slicedToArray$3(_useState, 2),
     instance = _useState2[0],
@@ -15748,9 +15748,9 @@ var Tooltip = function Tooltip(_ref) {
   }, localProps, otherProps), /*#__PURE__*/React__default.isValidElement(children) ? children : /*#__PURE__*/React__default.createElement("span", null, children));
 };
 
-var _excluded$G = ["icon", "iconPosition", "iconSize", "label", "loading", "onClick", "to", "type", "style", "fullWidth", "className", "disabled", "size", "href", "tooltipProps", "children"];
-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$m(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$7(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 _excluded$J = ["icon", "iconPosition", "iconSize", "label", "loading", "onClick", "to", "type", "style", "fullWidth", "className", "disabled", "size", "href", "tooltipProps", "children"];
+function ownKeys$p(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$p(Object(source), !0).forEach(function (key) { _defineProperty$7(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BUTTON_STYLES = {
   primary: "primary",
   secondary: "secondary",
@@ -15805,7 +15805,7 @@ var Button = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$tooltipProps = _ref.tooltipProps,
     tooltipProps = _ref$tooltipProps === void 0 ? null : _ref$tooltipProps,
     children = _ref.children,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$G);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$J);
   var Parent = motion.button;
   var elementSpecificProps = {
     type: type
@@ -15852,7 +15852,7 @@ var Button = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       disabled: disabled
     }),
     onClick: handleClick
-  }, _objectSpread$m(_objectSpread$m({
+  }, _objectSpread$o(_objectSpread$o({
     disabled: disabled,
     ref: ref
   }, elementSpecificProps), otherProps)), renderLabel && /*#__PURE__*/React__default.createElement("span", null, renderLabel), icon ? loading ? /*#__PURE__*/React__default.createElement(Spinner$1, {
@@ -15895,22 +15895,22 @@ var Divider$1 = function Divider(props) {
   }, props));
 };
 
-var _excluded$F = ["children", "className"];
-var Menu$2 = function Menu(_ref) {
+var _excluded$I = ["children", "className"];
+var Menu$3 = function Menu(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$F);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$I);
   return /*#__PURE__*/React__default.createElement("ul", _extends$4({
     className: classnames$1("neeto-ui-dropdown__popup-menu", className)
   }, otherProps), children);
 };
 
-var _excluded$E = ["children", "className", "tooltipProps"];
-var MenuItem = function MenuItem(_ref) {
+var _excluded$H = ["children", "className", "tooltipProps"];
+var MenuItem$1 = function MenuItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
     tooltipProps = _ref.tooltipProps,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$E);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$H);
   var renderMenuItem = function renderMenuItem() {
     return /*#__PURE__*/React__default.createElement("li", _extends$4({
       className: classnames$1("neeto-ui-dropdown__popup-menu-item", className)
@@ -15922,7 +15922,9 @@ var MenuItem = function MenuItem(_ref) {
   return renderMenuItem();
 };
 
-var _excluded$D = ["children", "className", "isActive", "isDisabled", "style", "prefix", "suffix", "type", "to", "href", "tooltipProps"];
+var _excluded$G = ["children", "className", "isActive", "isDisabled", "style", "prefix", "suffix", "type", "to", "href", "tooltipProps"];
+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$n(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$7(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 ITEM_BTN_STYLES = {
   "default": "default",
   danger: "danger"
@@ -15932,7 +15934,7 @@ var BUTTON_TYPES = {
   reset: "reset",
   submit: "submit"
 };
-var MenuItemButton = function MenuItemButton(_ref) {
+var MenuItemButton = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     isActive = _ref.isActive,
@@ -15948,7 +15950,7 @@ var MenuItemButton = function MenuItemButton(_ref) {
     _ref$href = _ref.href,
     href = _ref$href === void 0 ? "" : _ref$href,
     tooltipProps = _ref.tooltipProps,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$D);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$G);
   var Parent, elementSpecificProps;
   if (to) {
     Parent = Link;
@@ -15966,7 +15968,7 @@ var MenuItemButton = function MenuItemButton(_ref) {
       type: type
     };
   }
-  return /*#__PURE__*/React__default.createElement(MenuItem, {
+  return /*#__PURE__*/React__default.createElement(MenuItem$1, {
     tooltipProps: tooltipProps
   }, /*#__PURE__*/React__default.createElement(Parent, _extends$4({
     disabled: isDisabled,
@@ -15975,17 +15977,20 @@ var MenuItemButton = function MenuItemButton(_ref) {
       "neeto-ui-dropdown__popup-menu-item-btn--disabled": isDisabled,
       "neeto-ui-dropdown__popup-menu-item-btn--style-danger": style === ITEM_BTN_STYLES.danger
     })
-  }, otherProps, elementSpecificProps), prefix && /*#__PURE__*/React__default.createElement("div", {
+  }, _objectSpread$n(_objectSpread$n({
+    ref: ref
+  }, otherProps), elementSpecificProps)), prefix && /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-dropdown__popup-menu-item-btn__prefix"
   }, prefix), children, suffix && /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-dropdown__popup-menu-item-btn__suffix"
   }, suffix)));
-};
+});
+MenuItemButton.displayName = "MenuItemButton";
 
-MenuItem.Button = MenuItemButton;
+MenuItem$1.Button = MenuItemButton;
 
-var _excluded$C = ["style", "size"],
-  _excluded2$5 = ["icon", "label", "isOpen", "onClose", "dropdownProps", "position", "children", "className", "buttonStyle", "buttonSize", "buttonProps", "customTarget", "disabled", "closeOnEsc", "closeOnSelect", "closeOnOutsideClick", "dropdownModifiers", "trigger", "strategy", "onClick"],
+var _excluded$F = ["style", "size"],
+  _excluded2$4 = ["icon", "label", "isOpen", "onClose", "dropdownProps", "position", "children", "className", "buttonStyle", "buttonSize", "buttonProps", "customTarget", "disabled", "closeOnEsc", "closeOnSelect", "closeOnOutsideClick", "dropdownModifiers", "trigger", "strategy", "onClick"],
   _excluded3 = ["classNames"];
 var BTN_STYLES$1 = {
   primary: "primary",
@@ -16066,7 +16071,7 @@ var Dropdown = function Dropdown(_ref2) {
     _ref2$buttonProps2 = _ref2$buttonProps === void 0 ? {} : _ref2$buttonProps,
     style = _ref2$buttonProps2.style,
     size = _ref2$buttonProps2.size,
-    buttonProps = _objectWithoutProperties$1(_ref2$buttonProps2, _excluded$C),
+    buttonProps = _objectWithoutProperties$1(_ref2$buttonProps2, _excluded$F),
     customTarget = _ref2.customTarget,
     _ref2$disabled = _ref2.disabled,
     disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
@@ -16083,7 +16088,7 @@ var Dropdown = function Dropdown(_ref2) {
     _ref2$strategy = _ref2.strategy,
     strategy = _ref2$strategy === void 0 ? STRATEGY.absolute : _ref2$strategy,
     onClick = _ref2.onClick,
-    otherProps = _objectWithoutProperties$1(_ref2, _excluded2$5);
+    otherProps = _objectWithoutProperties$1(_ref2, _excluded2$4);
   var _useState = useState(null),
     _useState2 = _slicedToArray$3(_useState, 2),
     instance = _useState2[0],
@@ -16155,11 +16160,11 @@ var Dropdown = function Dropdown(_ref2) {
     onClick: onClick
   }, buttonProps)));
 };
-Dropdown.Menu = Menu$2;
-Dropdown.MenuItem = MenuItem;
+Dropdown.Menu = Menu$3;
+Dropdown.MenuItem = MenuItem$1;
 Dropdown.Divider = Divider$1;
 
-var _excluded$B = ["style", "size"];
+var _excluded$E = ["style", "size"];
 var BTN_STYLES = {
   primary: "primary",
   secondary: "secondary"
@@ -16184,7 +16189,7 @@ var ActionDropdown = function ActionDropdown(_ref) {
     _ref$buttonProps2 = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
     style = _ref$buttonProps2.style,
     size = _ref$buttonProps2.size,
-    buttonProps = _objectWithoutProperties$1(_ref$buttonProps2, _excluded$B),
+    buttonProps = _objectWithoutProperties$1(_ref$buttonProps2, _excluded$E),
     _ref$dropdownProps = _ref.dropdownProps,
     dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
     _ref$className = _ref.className,
@@ -20294,12 +20299,12 @@ var useOverlayManager = function useOverlayManager(ref, isOpen) {
   }, [isOpen, ref]);
 };
 
-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$l(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$7(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; }
+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$m(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$7(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 useQueryParams = function useQueryParams() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var location = useLocation();
-  return lib.parse(location.search, _objectSpread$l({
+  return lib.parse(location.search, _objectSpread$m({
     ignoreQueryPrefix: true
   }, options));
 };
@@ -20355,7 +20360,7 @@ var Footer$1 = function Footer(_ref) {
   }, children);
 };
 
-var _excluded$A = ["style", "weight", "lineHeight", "component", "children", "textTransform", "className"];
+var _excluded$D = ["style", "weight", "lineHeight", "component", "children", "textTransform", "className"];
 var FONT_WEIGHTS = {
   thin: "thin",
   extralight: "extralight",
@@ -20443,7 +20448,7 @@ var Typography = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     textTransform = _ref.textTransform,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$A);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$D);
   var Component = component ? COMPONENTS[component] : style ? DEFAULT_COMPONENTS[style] : "p";
   return /*#__PURE__*/React__default.createElement(Component, _extends$4({
     ref: ref,
@@ -20506,7 +20511,7 @@ var Header$1 = function Header(_ref) {
   }, description)));
 };
 
-var _excluded$z = ["size", "isOpen", "onClose", "children", "finalFocusRef", "initialFocusRef", "className", "closeOnEsc", "closeButton", "backdropClassName", "blockScrollOnMount", "closeOnOutsideClick"];
+var _excluded$C = ["size", "isOpen", "onClose", "children", "finalFocusRef", "initialFocusRef", "className", "closeOnEsc", "closeButton", "backdropClassName", "blockScrollOnMount", "closeOnOutsideClick"];
 var SIZES$7 = {
   small: "small",
   medium: "medium",
@@ -20535,7 +20540,7 @@ var Modal = function Modal(_ref) {
     blockScrollOnMount = _ref$blockScrollOnMou === void 0 ? true : _ref$blockScrollOnMou,
     _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
     closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$z);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$C);
   var _useState = useState(false),
     _useState2 = _slicedToArray$3(_useState, 2),
     hasTransitionCompleted = _useState2[0],
@@ -20702,7 +20707,7 @@ var FallbackAvatar = /*@__PURE__*/getDefaultExportFromCjs$1(build.exports);
 var COLOR_PALLETE = ["#ffb5a7", "#fcd5ce", "#f8edeb", "#f9dcc4", "#fec89a"];
 var AVATAR_VARIANT = "beam";
 
-var _excluded$y = ["size", "user", "status", "onClick", "className", "showTooltip", "tooltipProps"];
+var _excluded$B = ["size", "user", "status", "onClick", "className", "showTooltip", "tooltipProps"];
 var SIZE = {
   small: 24,
   medium: 32,
@@ -20724,7 +20729,7 @@ var Avatar = function Avatar(_ref) {
     showTooltip = _ref$showTooltip === void 0 ? false : _ref$showTooltip,
     _ref$tooltipProps = _ref.tooltipProps,
     tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$y);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$B);
   var _useState = useState(false),
     _useState2 = _slicedToArray$3(_useState, 2),
     isLoadingFailed = _useState2[0],
@@ -20783,7 +20788,7 @@ var Avatar = function Avatar(_ref) {
   })));
 };
 
-var _excluded$x = ["icon", "style", "className", "children"];
+var _excluded$A = ["icon", "style", "className", "children"];
 var STYLES$2 = {
   info: "info",
   warning: "warning",
@@ -20798,7 +20803,7 @@ var Callout = function Callout(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     children = _ref.children,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$x);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$A);
   var Icon = icon;
   return /*#__PURE__*/React__default.createElement("div", _extends$4({
     className: classnames$1("neeto-ui-callout", _defineProperty$7({
@@ -20813,8 +20818,8 @@ var Callout = function Callout(_ref) {
   }, /*#__PURE__*/React__default.createElement(Icon, null)), children);
 };
 
-var _excluded$w = ["children", "className", "required", "helpIconProps"],
-  _excluded2$4 = ["onClick", "icon", "tooltipProps", "className"];
+var _excluded$z = ["children", "className", "required", "helpIconProps"],
+  _excluded2$3 = ["onClick", "icon", "tooltipProps", "className"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
@@ -20823,13 +20828,13 @@ var Label = function Label(_ref) {
     required = _ref$required === void 0 ? false : _ref$required,
     _ref$helpIconProps = _ref.helpIconProps,
     helpIconProps = _ref$helpIconProps === void 0 ? null : _ref$helpIconProps,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$w);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$z);
   var _ref2 = helpIconProps || {},
     onClick = _ref2.onClick,
     icon = _ref2.icon,
     tooltipProps = _ref2.tooltipProps,
     helpIconClassName = _ref2.className,
-    otherHelpIconProps = _objectWithoutProperties$1(_ref2, _excluded2$4);
+    otherHelpIconProps = _objectWithoutProperties$1(_ref2, _excluded2$3);
   var HelpIcon = icon || Info;
   return /*#__PURE__*/React__default.createElement("label", _extends$4({
     className: classnames$1("neeto-ui-label neeto-ui-flex neeto-ui-items-center", className)
@@ -20845,7 +20850,7 @@ var Label = function Label(_ref) {
   }, otherHelpIconProps)))));
 };
 
-var _excluded$v = ["label", "error", "className", "required", "labelProps", "children"];
+var _excluded$y = ["label", "error", "className", "required", "labelProps", "children"];
 var Checkbox = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,
@@ -20857,7 +20862,7 @@ var Checkbox = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
     required = _ref$required === void 0 ? false : _ref$required,
     labelProps = _ref.labelProps,
     children = _ref.children,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$v);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$y);
   var id = useId(otherProps.id);
   var errorId = "error_".concat(id);
   var renderLabel = label || children;
@@ -22645,9 +22650,9 @@ var ColorPicker = function ColorPicker(_ref) {
   }, /*#__PURE__*/React__default.createElement(Palette, colorPaletteProps))));
 };
 
-var _excluded$u = ["className", "label", "size", "dropdownClassName", "popupClassName", "dateFormat", "timeFormat", "onChange", "onOk", "picker", "showTime", "type", "nakedInput", "error", "defaultValue", "value", "labelProps", "required"];
-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$k(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$7(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 _excluded$x = ["className", "label", "size", "dropdownClassName", "popupClassName", "dateFormat", "timeFormat", "onChange", "onOk", "picker", "showTime", "type", "nakedInput", "error", "defaultValue", "value", "labelProps", "required"];
+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$l(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$7(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 INPUT_SIZES$2 = {
   small: "small",
   medium: "medium",
@@ -22701,7 +22706,7 @@ var DatePicker = /*#__PURE__*/forwardRef$1(function (_ref2, ref) {
     labelProps = _ref2.labelProps,
     _ref2$required = _ref2.required,
     required = _ref2$required === void 0 ? false : _ref2$required,
-    otherProps = _objectWithoutProperties$1(_ref2, _excluded$u);
+    otherProps = _objectWithoutProperties$1(_ref2, _excluded$x);
   var id = useId(otherProps.id);
   var datePickerRef = useSyncedRef(ref);
   var Component = datePickerTypes[type === null || type === void 0 ? void 0 : type.toLowerCase()];
@@ -22712,7 +22717,7 @@ var DatePicker = /*#__PURE__*/forwardRef$1(function (_ref2, ref) {
   };
   return /*#__PURE__*/React__default.createElement(_ConfigProvider, {
     theme: {
-      token: _objectSpread$k({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
+      token: _objectSpread$l({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
       components: {
         DatePicker: {
           activeBg: "rgb(var(--neeto-ui-white))",
@@ -22763,7 +22768,7 @@ var DatePicker = /*#__PURE__*/forwardRef$1(function (_ref2, ref) {
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-input__wrapper"
-  }, label && /*#__PURE__*/React__default.createElement(Label, _objectSpread$k({
+  }, label && /*#__PURE__*/React__default.createElement(Label, _objectSpread$l({
     required: required
   }, labelProps), label), /*#__PURE__*/React__default.createElement(Component, _extends$4({
     format: format,
@@ -22826,9 +22831,9 @@ var customParseFormat$1 = {exports: {}};
 
 var customParseFormat = customParseFormat$1.exports;
 
-var _excluded$t = ["className", "label", "size", "dropdownClassName", "popupClassName", "dateFormat", "onChange", "nakedInput", "error", "defaultValue", "value", "labelProps", "required"];
-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$j(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$7(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 _excluded$w = ["className", "label", "size", "dropdownClassName", "popupClassName", "dateFormat", "onChange", "nakedInput", "error", "defaultValue", "value", "labelProps", "required"];
+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$k(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$7(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; }
 dayjs.extend(customParseFormat);
 var DateTimePicker = function DateTimePicker(_ref) {
   var _ref$className = _ref.className,
@@ -22850,7 +22855,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     labelProps = _ref.labelProps,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$t);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$w);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray$3(_React$useState, 2),
     open = _React$useState2[0],
@@ -22882,7 +22887,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-input__wrapper"
-  }, label && /*#__PURE__*/React__default.createElement(Label, _objectSpread$j({
+  }, label && /*#__PURE__*/React__default.createElement(Label, _objectSpread$k({
     required: required
   }, labelProps), label), /*#__PURE__*/React__default.createElement("div", {
     className: classnames$1("neeto-ui-date-time-input", className)
@@ -22918,9 +22923,9 @@ var DateTimePicker = function DateTimePicker(_ref) {
 };
 DateTimePicker.displayName = "DateTimePicker";
 
-var _excluded$s = ["size", "type", "label", "error", "suffix", "prefix", "disabled", "helpText", "className", "nakedInput", "contentSize", "required", "maxLength", "unlimitedChars", "labelProps", "rejectCharsRegex", "onBlur", "disableTrimOnBlur"];
-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$i(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$7(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; }
+var _excluded$v = ["size", "type", "label", "error", "suffix", "prefix", "disabled", "helpText", "className", "nakedInput", "contentSize", "required", "maxLength", "unlimitedChars", "labelProps", "rejectCharsRegex", "onBlur", "disableTrimOnBlur"];
+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$j(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$7(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 SIZES$5 = {
   small: "small",
   medium: "medium",
@@ -22960,7 +22965,7 @@ var Input$3 = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
     onBlur = _ref.onBlur,
     _ref$disableTrimOnBlu = _ref.disableTrimOnBlur,
     disableTrimOnBlur = _ref$disableTrimOnBlu === void 0 ? false : _ref$disableTrimOnBlu,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$s);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$v);
   var _useState = useState(otherProps.value),
     _useState2 = _slicedToArray$3(_useState, 2),
     valueInternal = _useState2[0],
@@ -23025,7 +23030,7 @@ var Input$3 = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
     "data-cy": "".concat(hyphenize(label), "-input-field"),
     size: contentSize,
     "aria-describedby": classnames$1(_defineProperty$7(_defineProperty$7({}, errorId, !!error), helpTextId, helpText))
-  }, _objectSpread$i(_objectSpread$i(_objectSpread$i({
+  }, _objectSpread$j(_objectSpread$j(_objectSpread$j({
     disabled: disabled,
     id: id,
     ref: ref,
@@ -23052,12 +23057,12 @@ var Input$3 = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
 });
 Input$3.displayName = "Input";
 
-var _excluded$r = ["keyName", "className", "tooltipProps"];
+var _excluded$u = ["keyName", "className", "tooltipProps"];
 var Kbd = function Kbd(_ref) {
   var keyName = _ref.keyName,
     className = _ref.className,
     tooltipProps = _ref.tooltipProps,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$r);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$u);
   return /*#__PURE__*/React__default.createElement(Tooltip, _extends$4({
     disabled: !tooltipProps
   }, tooltipProps), /*#__PURE__*/React__default.createElement("span", _extends$4({
@@ -23110,7 +23115,7 @@ function _defineProperty$6(obj, key, value) {
   return obj;
 }
 
-function ownKeys$i(object, enumerableOnly) {
+function ownKeys$j(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -23123,9 +23128,9 @@ function ownKeys$i(object, enumerableOnly) {
 function _objectSpread2(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) {
+    i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) {
       _defineProperty$6(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -26089,7 +26094,7 @@ var MenuPlacer = function MenuPlacer(props) {
     })
   });
 };
-var Menu$1 = function Menu(props) {
+var Menu$2 = function Menu(props) {
   var children = props.children,
     className = props.className,
     cx = props.cx,
@@ -26677,7 +26682,7 @@ var GroupHeading = function GroupHeading(props) {
   }, innerProps));
 };
 
-var _excluded$q = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
+var _excluded$t = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
 var inputCSS = function inputCSS(_ref) {
   var isDisabled = _ref.isDisabled,
     value = _ref.value,
@@ -26734,7 +26739,7 @@ var Input$2 = function Input(props) {
     isDisabled = _cleanCommonProps.isDisabled,
     isHidden = _cleanCommonProps.isHidden,
     inputClassName = _cleanCommonProps.inputClassName,
-    innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$q);
+    innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$t);
   return jsx("div", {
     className: cx({
       'input-container': true
@@ -26982,7 +26987,7 @@ var components = {
   IndicatorSeparator: IndicatorSeparator,
   Input: Input$2,
   LoadingIndicator: LoadingIndicator,
-  Menu: Menu$1,
+  Menu: Menu$2,
   MenuList: MenuList$1,
   MenuPortal: MenuPortal,
   LoadingMessage: LoadingMessage,
@@ -27557,10 +27562,10 @@ var createFilter = function createFilter(config) {
   };
 };
 
-var _excluded$p = ["innerRef"];
+var _excluded$s = ["innerRef"];
 function DummyInput(_ref) {
   var innerRef = _ref.innerRef,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   // Remove animation props not meant for HTML elements
   var filteredProps = removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
   return jsx("input", _extends$2({
@@ -29556,7 +29561,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
 }(Component);
 Select$1.defaultProps = defaultProps;
 
-var _excluded$o = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
+var _excluded$r = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
 function useStateManager(_ref) {
   var _ref$defaultInputValu = _ref.defaultInputValue,
     defaultInputValue = _ref$defaultInputValu === void 0 ? '' : _ref$defaultInputValu,
@@ -29571,7 +29576,7 @@ function useStateManager(_ref) {
     propsOnMenuClose = _ref.onMenuClose,
     propsOnMenuOpen = _ref.onMenuOpen,
     propsValue = _ref.value,
-    restSelectProps = _objectWithoutProperties(_ref, _excluded$o);
+    restSelectProps = _objectWithoutProperties(_ref, _excluded$r);
   var _useState = useState(propsInputValue !== undefined ? propsInputValue : defaultInputValue),
     _useState2 = _slicedToArray$1(_useState, 2),
     stateInputValue = _useState2[0],
@@ -29623,7 +29628,7 @@ function useStateManager(_ref) {
   });
 }
 
-var _excluded$n = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
+var _excluded$q = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
 var compareOption = function compareOption() {
   var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var option = arguments.length > 1 ? arguments[1] : undefined;
@@ -29667,7 +29672,7 @@ function useCreatable(_ref) {
     _ref$options = _ref.options,
     propsOptions = _ref$options === void 0 ? [] : _ref$options,
     propsOnChange = _ref.onChange,
-    restSelectProps = _objectWithoutProperties(_ref, _excluded$n);
+    restSelectProps = _objectWithoutProperties(_ref, _excluded$q);
   var _restSelectProps$getO = restSelectProps.getOptionValue,
     getOptionValue$1$1 = _restSelectProps$getO === void 0 ? getOptionValue$1 : _restSelectProps$getO,
     _restSelectProps$getO2 = restSelectProps.getOptionLabel,
@@ -29730,7 +29735,7 @@ var StateManagedSelect = /*#__PURE__*/forwardRef$1(function (props, ref) {
   }, baseSelectProps));
 });
 
-var _excluded$m = ["style", "indicatorStyle", "label", "icon", "className", "onClose", "disabled", "size", "type", "children"];
+var _excluded$p = ["style", "indicatorStyle", "label", "icon", "className", "onClose", "disabled", "size", "type", "children"];
 var SIZES$4 = {
   small: "small",
   large: "large"
@@ -29766,7 +29771,7 @@ var Tag = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? TYPES.outline : _ref$type,
     children = _ref.children,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$m);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$p);
   var Icon = typeof icon === "string" ? function () {
     return /*#__PURE__*/React__default.createElement("i", {
       className: icon
@@ -29810,10 +29815,10 @@ var Tag = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
 });
 Tag.displayName = "Tag";
 
-var _excluded$l = ["children"],
-  _excluded2$3 = ["children"];
-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$7(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 _excluded$o = ["children"],
+  _excluded2$2 = ["children"];
+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$7(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 STYLES = {
   border: {
     "default": "1px solid rgb(var(--neeto-ui-gray-400))",
@@ -29826,7 +29831,7 @@ var STYLES = {
 };
 var CustomControl = function CustomControl(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties$1(_ref, _excluded$l);
+    props = _objectWithoutProperties$1(_ref, _excluded$o);
   var prefix = props.selectProps.prefix;
   return /*#__PURE__*/React__default.createElement(components.Control, props, prefix && /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-email-input__prefix"
@@ -29840,14 +29845,14 @@ var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
 };
 var MultiValueRemove$1 = function MultiValueRemove(props) {
   return /*#__PURE__*/React__default.createElement(components.MultiValueRemove, _extends$4({}, props, {
-    innerProps: _objectSpread$h(_objectSpread$h({}, props.innerProps), {}, _defineProperty$7({}, "data-cy", "".concat(hyphenize(props.data.label), "-remove-icon")))
+    innerProps: _objectSpread$i(_objectSpread$i({}, props.innerProps), {}, _defineProperty$7({}, "data-cy", "".concat(hyphenize(props.data.label), "-remove-icon")))
   }), /*#__PURE__*/React__default.createElement(Close, {
     size: 16
   }));
 };
 var CustomValueContainer = function CustomValueContainer(_ref2) {
   var children = _ref2.children,
-    props = _objectWithoutProperties$1(_ref2, _excluded2$3);
+    props = _objectWithoutProperties$1(_ref2, _excluded2$2);
   var getValue = props.getValue,
     _props$selectProps = props.selectProps,
     isFocused = _props$selectProps.isFocused,
@@ -29858,7 +29863,7 @@ var CustomValueContainer = function CustomValueContainer(_ref2) {
     rest = _children.slice(1);
   var shouldCollapse = !isFocused && value.length > visibleEmailsCount;
   return /*#__PURE__*/React__default.createElement(components.ValueContainer, _extends$4({}, props, {
-    innerProps: _objectSpread$h(_objectSpread$h({}, props.innerProps), {}, _defineProperty$7({}, "data-cy", "multi-email-input-container"))
+    innerProps: _objectSpread$i(_objectSpread$i({}, props.innerProps), {}, _defineProperty$7({}, "data-cy", "multi-email-input-container"))
   }), shouldCollapse ? firstChild.slice(0, visibleEmailsCount) : firstChild, shouldCollapse && /*#__PURE__*/React__default.createElement(Tag, {
     label: "".concat(value.length - visibleEmailsCount, " more"),
     style: "secondary"
@@ -29866,7 +29871,7 @@ var CustomValueContainer = function CustomValueContainer(_ref2) {
 };
 var CustomClearIndicator = function CustomClearIndicator(props) {
   return /*#__PURE__*/React__default.createElement(components.ClearIndicator, _extends$4({}, props, {
-    innerProps: _objectSpread$h(_objectSpread$h({}, props.innerProps), {}, _defineProperty$7({}, "data-cy", "clear-all-button"))
+    innerProps: _objectSpread$i(_objectSpread$i({}, props.innerProps), {}, _defineProperty$7({}, "data-cy", "clear-all-button"))
   }), /*#__PURE__*/React__default.createElement(Close, {
     className: "cursor-pointer",
     size: 16
@@ -29874,7 +29879,7 @@ var CustomClearIndicator = function CustomClearIndicator(props) {
 };
 var SelectContainer = function SelectContainer(props) {
   return /*#__PURE__*/React__default.createElement(components.SelectContainer, _extends$4({}, props, {
-    innerProps: _objectSpread$h(_objectSpread$h({}, props.innerProps), {}, _defineProperty$7({}, "data-cy", "multi-email-select-container"))
+    innerProps: _objectSpread$i(_objectSpread$i({}, props.innerProps), {}, _defineProperty$7({}, "data-cy", "multi-email-select-container"))
   }));
 };
 var Input$1 = function Input(props) {
@@ -29889,7 +29894,7 @@ var CUSTOM_STYLES = {
   input: assoc("overflow", "hidden"),
   multiValue: function multiValue(styles, _ref3) {
     var valid = _ref3.data.valid;
-    return _objectSpread$h(_objectSpread$h({}, styles), {}, {
+    return _objectSpread$i(_objectSpread$i({}, styles), {}, {
       border: valid ? STYLES.border["default"] : STYLES.border.error,
       color: valid ? STYLES.color["default"] : STYLES.color.error
     });
@@ -29931,9 +29936,9 @@ var renderDefaultText = function renderDefaultText(count) {
   return count === 1 ? "email" : "emails";
 };
 
-var _excluded$k = ["label", "placeholder", "helpText", "value", "onChange", "error", "onBlur", "filterInvalidEmails", "counter", "disabled", "maxHeight", "required", "labelProps", "visibleEmailsCount"];
-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$7(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; }
+var _excluded$n = ["label", "placeholder", "helpText", "value", "onChange", "error", "onBlur", "filterInvalidEmails", "counter", "disabled", "maxHeight", "required", "labelProps", "visibleEmailsCount"];
+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$7(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 MultiEmailInput = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "Email(s)" : _ref$label,
@@ -29960,7 +29965,7 @@ var MultiEmailInput = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
     labelProps = _ref.labelProps,
     _ref$visibleEmailsCou = _ref.visibleEmailsCount,
     visibleEmailsCount = _ref$visibleEmailsCou === void 0 ? 3 : _ref$visibleEmailsCou,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$k);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$n);
   var _useState = useState(""),
     _useState2 = _slicedToArray$3(_useState, 2),
     inputValue = _useState2[0],
@@ -30049,7 +30054,7 @@ var MultiEmailInput = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
     className: classnames$1("neeto-ui-react-select__container neeto-ui-react-select__container--medium neeto-ui-email-input__select", {
       "neeto-ui-react-select__container--error": !!error
     }),
-    styles: _objectSpread$g(_objectSpread$g({}, CUSTOM_STYLES), {}, {
+    styles: _objectSpread$h(_objectSpread$h({}, CUSTOM_STYLES), {}, {
       control: mergeLeft({
         maxHeight: "".concat(maxHeight, "px"),
         overflowY: "auto"
@@ -30063,7 +30068,7 @@ var MultiEmailInput = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
       return setInputValue(inputValue);
     },
     onKeyDown: handleKeyDown
-  }, _objectSpread$g(_objectSpread$g(_objectSpread$g({
+  }, _objectSpread$h(_objectSpread$h(_objectSpread$h({
     inputValue: inputValue,
     isFocused: isFocused,
     onChange: onChange,
@@ -30093,7 +30098,7 @@ var renderImage = function renderImage(image) {
   }) : image;
 };
 
-var _excluded$j = ["image", "title", "description", "helpText", "className", "primaryButtonProps", "secondaryButtonProps", "buttonSeparatorText"];
+var _excluded$m = ["image", "title", "description", "helpText", "className", "primaryButtonProps", "secondaryButtonProps", "buttonSeparatorText"];
 var NoData = function NoData(_ref) {
   var _ref$image = _ref.image,
     image = _ref$image === void 0 ? null : _ref$image,
@@ -30111,7 +30116,7 @@ var NoData = function NoData(_ref) {
     secondaryButtonProps = _ref$secondaryButtonP === void 0 ? {} : _ref$secondaryButtonP,
     _ref$buttonSeparatorT = _ref.buttonSeparatorText,
     buttonSeparatorText = _ref$buttonSeparatorT === void 0 ? "" : _ref$buttonSeparatorT,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$j);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$m);
   var hasPrimaryButtonProps = !isEmpty(primaryButtonProps);
   var hasSecondaryButtonProps = !isEmpty(secondaryButtonProps);
   var hasButtonSeparatorText = !isEmpty(buttonSeparatorText);
@@ -30345,7 +30350,7 @@ var getHeaderHeight = function getHeaderHeight(paneWrapper) {
   return header ? header.offsetHeight : DEFAULT_PANE_HEADER_HEIGHT;
 };
 
-var _excluded$i = ["size", "isOpen", "onClose", "children", "className", "closeOnEsc", "closeButton", "backdropClassName", "closeOnOutsideClick", "initialFocusRef", "finalFocusRef"];
+var _excluded$l = ["size", "isOpen", "onClose", "children", "className", "closeOnEsc", "closeButton", "backdropClassName", "closeOnOutsideClick", "initialFocusRef", "finalFocusRef"];
 var SIZES$3 = {
   small: "small",
   large: "large"
@@ -30370,7 +30375,7 @@ var Pane = function Pane(_ref) {
     closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl,
     initialFocusRef = _ref.initialFocusRef,
     finalFocusRef = _ref.finalFocusRef,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$i);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$l);
   var _useState = useState(false),
     _useState2 = _slicedToArray$3(_useState, 2),
     hasTransitionCompleted = _useState2[0],
@@ -30455,23 +30460,25 @@ var Title = function Title(_ref) {
   }, children);
 };
 
-var _excluded$h = ["children", "theme"];
+var _excluded$k = ["children", "className", "theme"];
 var Popover = function Popover(_ref) {
   var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? "light" : _ref$theme,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$h);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$k);
   return /*#__PURE__*/React__default.createElement(Tooltip, _extends$4({
     theme: theme,
+    arrow: true,
     interactive: true,
-    arrow: false,
-    className: "neeto-ui-popover",
+    className: classnames$1("neeto-ui-popover", className),
     content: children
   }, otherProps));
 };
 Popover.Title = Title;
 
-var _excluded$g = ["name", "label", "className", "labelProps"];
+var _excluded$j = ["name", "label", "className", "labelProps"];
 var Item$1 = function Item(_ref) {
   var _ref$name = _ref.name,
     name = _ref$name === void 0 ? "" : _ref$name,
@@ -30480,7 +30487,7 @@ var Item$1 = function Item(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     labelProps = _ref.labelProps,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$g);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$j);
   var id = useId(otherProps.id);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classnames$1(["neeto-ui-radio__item", className])
@@ -30496,9 +30503,9 @@ var Item$1 = function Item(_ref) {
 };
 Item$1.displayName = "Radio.Item";
 
-var _excluded$f = ["label", "children", "stacked", "className", "containerClassName", "error", "onChange", "labelProps"];
-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$7(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 _excluded$i = ["label", "children", "stacked", "className", "containerClassName", "error", "onChange", "labelProps"];
+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$7(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; }
 var Radio = function Radio(_ref) {
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,
@@ -30513,7 +30520,7 @@ var Radio = function Radio(_ref) {
     error = _ref$error === void 0 ? "" : _ref$error,
     onChange = _ref.onChange,
     labelProps = _ref.labelProps,
-    props = _objectWithoutProperties$1(_ref, _excluded$f);
+    props = _objectWithoutProperties$1(_ref, _excluded$i);
   var _useState = useState(""),
     _useState2 = _slicedToArray$3(_useState, 2),
     internalValue = _useState2[0],
@@ -30534,7 +30541,7 @@ var Radio = function Radio(_ref) {
     }, containerClassName, containerClassName))
   }, Children.map(children, function (child) {
     var _child$props$checked, _ref2, _child$props$onChange;
-    return /*#__PURE__*/cloneElement$1(child, _objectSpread$f(_objectSpread$f(_objectSpread$f({}, child.props), props), {}, {
+    return /*#__PURE__*/cloneElement$1(child, _objectSpread$g(_objectSpread$g(_objectSpread$g({}, child.props), props), {}, {
       value: child.props.value,
       checked: (_child$props$checked = child.props.checked) !== null && _child$props$checked !== void 0 ? _child$props$checked : [internalValue, props.value].includes(child.props.value),
       onChange: (_ref2 = (_child$props$onChange = child.props.onChange) !== null && _child$props$onChange !== void 0 ? _child$props$onChange : onChange) !== null && _ref2 !== void 0 ? _ref2 : internalOnChange
@@ -30547,7 +30554,7 @@ var Radio = function Radio(_ref) {
 };
 Radio.Item = Item$1;
 
-var _excluded$e = ["defaultOptions", "cacheOptions", "loadOptions", "options", "isLoading", "onInputChange", "filterOption"];
+var _excluded$h = ["defaultOptions", "cacheOptions", "loadOptions", "options", "isLoading", "onInputChange", "filterOption"];
 function useAsync(_ref) {
   var _ref$defaultOptions = _ref.defaultOptions,
     propsDefaultOptions = _ref$defaultOptions === void 0 ? false : _ref$defaultOptions,
@@ -30560,7 +30567,7 @@ function useAsync(_ref) {
     propsOnInputChange = _ref.onInputChange,
     _ref$filterOption = _ref.filterOption,
     filterOption = _ref$filterOption === void 0 ? null : _ref$filterOption,
-    restSelectProps = _objectWithoutProperties(_ref, _excluded$e);
+    restSelectProps = _objectWithoutProperties(_ref, _excluded$h);
   var propsInputValue = restSelectProps.inputValue;
   var lastRequest = useRef(undefined);
   var mounted = useRef(false);
@@ -30726,10 +30733,10 @@ var Spinner = function Spinner(_ref) {
   }));
 };
 
-var _excluded$d = ["children"],
-  _excluded2$2 = ["size", "label", "required", "error", "helpText", "className", "innerRef", "isCreateable", "strategy", "id", "labelProps", "value", "defaultValue", "components", "optionRemapping"];
-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$7(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 _excluded$g = ["children"],
+  _excluded2$1 = ["size", "label", "required", "error", "helpText", "className", "innerRef", "isCreateable", "strategy", "id", "labelProps", "value", "defaultValue", "components", "optionRemapping"];
+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$7(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 SIZES$2 = {
   small: "small",
   medium: "medium",
@@ -30741,7 +30748,7 @@ var STRATEGIES = {
 };
 var Control = function Control(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties$1(_ref, _excluded$d);
+    props = _objectWithoutProperties$1(_ref, _excluded$g);
   var selectProps = props.selectProps,
     hasValue = props.hasValue;
   return /*#__PURE__*/React__default.createElement(components.Control, props, hasValue && selectProps.isMulti && /*#__PURE__*/React__default.createElement("span", {
@@ -30750,14 +30757,14 @@ var Control = function Control(_ref) {
 };
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, _extends$4({}, props, {
-    innerProps: _objectSpread$e(_objectSpread$e({}, props.innerProps), {}, _defineProperty$7({}, "data-cy", "action-select-indicator"))
+    innerProps: _objectSpread$f(_objectSpread$f({}, props.innerProps), {}, _defineProperty$7({}, "data-cy", "action-select-indicator"))
   }), /*#__PURE__*/React__default.createElement(Down, {
     size: 16
   }));
 };
 var ClearIndicator = function ClearIndicator(props) {
   return /*#__PURE__*/React__default.createElement(components.ClearIndicator, _extends$4({}, props, {
-    innerProps: _objectSpread$e(_objectSpread$e({}, props.innerProps), {}, {
+    innerProps: _objectSpread$f(_objectSpread$f({}, props.innerProps), {}, {
       "data-cy": "clear-select-indicator"
     })
   }), /*#__PURE__*/React__default.createElement(Close, {
@@ -30779,7 +30786,7 @@ var CustomInput = function CustomInput(props) {
 };
 var CustomOption = function CustomOption(props) {
   return /*#__PURE__*/React__default.createElement(components.Option, _extends$4({}, props, {
-    innerProps: _objectSpread$e(_objectSpread$e({}, props.innerProps), {}, {
+    innerProps: _objectSpread$f(_objectSpread$f({}, props.innerProps), {}, {
       "data-cy": "".concat(hyphenize(props.label), "-select-option")
     })
   }));
@@ -30787,22 +30794,22 @@ var CustomOption = function CustomOption(props) {
 var Placeholder = function Placeholder(props) {
   var selectProps = props.selectProps;
   return /*#__PURE__*/React__default.createElement(components.Placeholder, _extends$4({}, props, {
-    innerProps: _objectSpread$e(_objectSpread$e({}, props.innerProps), {}, {
+    innerProps: _objectSpread$f(_objectSpread$f({}, props.innerProps), {}, {
       "data-cy": selectProps ? "".concat(hyphenize(selectProps.label), "-select-placeholder") : "select-placeholder"
     })
   }));
 };
-var Menu = function Menu(props) {
+var Menu$1 = function Menu(props) {
   var selectProps = props.selectProps;
   return /*#__PURE__*/React__default.createElement(components.Menu, _extends$4({}, props, {
-    innerProps: _objectSpread$e(_objectSpread$e({}, props.innerProps), {}, {
+    innerProps: _objectSpread$f(_objectSpread$f({}, props.innerProps), {}, {
       "data-cy": selectProps ? "".concat(hyphenize(selectProps.label), "-select-menu") : "select-menu"
     })
   }));
 };
 var SingleValue = function SingleValue(props) {
   return /*#__PURE__*/React__default.createElement(components.SingleValue, _extends$4({}, props, {
-    innerProps: _objectSpread$e(_objectSpread$e({}, props.innerProps), {}, {
+    innerProps: _objectSpread$f(_objectSpread$f({}, props.innerProps), {}, {
       "data-cy": "select-single-value"
     })
   }));
@@ -30810,7 +30817,7 @@ var SingleValue = function SingleValue(props) {
 var ValueContainer = function ValueContainer(props) {
   var selectProps = props.selectProps;
   return /*#__PURE__*/React__default.createElement(components.ValueContainer, _extends$4({}, props, {
-    innerProps: _objectSpread$e(_objectSpread$e({}, props.innerProps), {}, {
+    innerProps: _objectSpread$f(_objectSpread$f({}, props.innerProps), {}, {
       name: selectProps.name,
       "data-cy": selectProps ? "".concat(hyphenize(selectProps.label), "-select-value-container") : "select-value-container"
     })
@@ -30843,7 +30850,7 @@ var MenuList = function MenuList(props) {
     };
   }, [hasMore]);
   return /*#__PURE__*/React__default.createElement(components.MenuList, _extends$4({}, props, {
-    innerProps: _objectSpread$e(_objectSpread$e({}, props.innerProps), {}, _defineProperty$7({}, "data-testid", "menu-list"))
+    innerProps: _objectSpread$f(_objectSpread$f({}, props.innerProps), {}, _defineProperty$7({}, "data-testid", "menu-list"))
   }), props.children, hasMore && /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-full items-center justify-center py-3",
     "data-testid": "loader",
@@ -30875,7 +30882,7 @@ var Select = function Select(_ref2) {
     componentOverrides = _ref2.components,
     _ref2$optionRemapping = _ref2.optionRemapping,
     optionRemapping = _ref2$optionRemapping === void 0 ? {} : _ref2$optionRemapping,
-    otherProps = _objectWithoutProperties$1(_ref2, _excluded2$2);
+    otherProps = _objectWithoutProperties$1(_ref2, _excluded2$1);
   var inputId = useId(id);
   var Parent = StateManagedSelect;
   if (isCreateable) {
@@ -30946,20 +30953,20 @@ var Select = function Select(_ref2) {
       "neeto-ui-react-select__container--medium": size === SIZES$2.medium,
       "neeto-ui-react-select__container--large": size === SIZES$2.large
     }),
-    components: _objectSpread$e({
+    components: _objectSpread$f({
       Input: CustomInput,
       Option: CustomOption,
       DropdownIndicator: DropdownIndicator,
       ClearIndicator: ClearIndicator,
       MultiValueRemove: MultiValueRemove,
       Placeholder: Placeholder,
-      Menu: Menu,
+      Menu: Menu$1,
       ValueContainer: ValueContainer,
       MenuList: MenuList,
       SingleValue: SingleValue,
       Control: Control
     }, componentOverrides)
-  }, _objectSpread$e(_objectSpread$e({
+  }, _objectSpread$f(_objectSpread$f({
     inputId: inputId,
     label: label
   }, portalProps), otherProps))), !!error && /*#__PURE__*/React__default.createElement("p", {
@@ -30975,9 +30982,9 @@ var Select = function Select(_ref2) {
 
 var NEETO_UI_PRIMARY_500 = "#4558f9";
 
-var _excluded$c = ["min", "max", "defaultValue", "onChange", "value", "label", "required", "labelProps", "error", "helpText"];
-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$7(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 _excluded$f = ["min", "max", "defaultValue", "onChange", "value", "label", "required", "labelProps", "error", "helpText"];
+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$7(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 Slider = function Slider(_ref) {
   var _ref$min = _ref.min,
     min = _ref$min === void 0 ? 0 : _ref$min,
@@ -30996,13 +31003,13 @@ var Slider = function Slider(_ref) {
     labelProps = _ref$labelProps === void 0 ? {} : _ref$labelProps,
     error = _ref.error,
     helpText = _ref.helpText,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$c);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$f);
   var id = useId(otherProps.id);
   var errorId = "error_".concat(id);
   var helpTextId = "helpText_".concat(id);
   return /*#__PURE__*/React__default.createElement(_ConfigProvider, {
     theme: {
-      token: _objectSpread$d({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
+      token: _objectSpread$e({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
       components: {
         Slider: {
           dotActiveBorderColor: "rgb(var(--neeto-ui-primary-500))",
@@ -31038,7 +31045,7 @@ var Slider = function Slider(_ref) {
     trackStyle: {
       backgroundColor: NEETO_UI_PRIMARY_500
     }
-  }, _objectSpread$d(_objectSpread$d({
+  }, _objectSpread$e(_objectSpread$e({
     defaultValue: defaultValue,
     max: max,
     min: min,
@@ -31087,7 +31094,7 @@ var Stepper = function Stepper(_ref) {
   }));
 };
 
-var _excluded$b = ["label", "required", "className", "error", "onChange", "labelProps", "children"];
+var _excluded$e = ["label", "required", "className", "error", "onChange", "labelProps", "children"];
 var Switch = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,
@@ -31101,7 +31108,7 @@ var Switch = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
     onChange = _ref$onChange === void 0 ? noop$3 : _ref$onChange,
     labelProps = _ref.labelProps,
     children = _ref.children,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$b);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$e);
   var id = useId(otherProps.id);
   var errorId = "error_".concat(id);
   var checked = otherProps.checked,
@@ -31147,9 +31154,9 @@ var Switch = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
 });
 Switch.displayName = "Switch";
 
-var _excluded$a = ["active", "className", "children", "icon", "onClick", "activeClassName"];
-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$7(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 _excluded$d = ["active", "className", "children", "icon", "onClick", "activeClassName"];
+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$7(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 Item = function Item(_ref) {
   var active = _ref.active,
     _ref$className = _ref.className,
@@ -31161,7 +31168,7 @@ var Item = function Item(_ref) {
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     _ref$activeClassName = _ref.activeClassName,
     activeClassName = _ref$activeClassName === void 0 ? "" : _ref$activeClassName,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$a);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$d);
   var Icon = typeof icon === "string" ? function () {
     return /*#__PURE__*/React__default.createElement("i", {
       className: icon,
@@ -31179,13 +31186,13 @@ var Item = function Item(_ref) {
       active: active
     }),
     onClick: onClick
-  }, _objectSpread$c(_objectSpread$c({}, otherProps), buttonAttributes)), icon && /*#__PURE__*/React__default.createElement(Icon, {
+  }, _objectSpread$d(_objectSpread$d({}, otherProps), buttonAttributes)), icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: "neeto-ui-tab__icon"
   }), children);
 };
 Item.displayName = "Tab.Item";
 
-var _excluded$9 = ["size", "noUnderline", "children", "className"];
+var _excluded$c = ["size", "noUnderline", "children", "className"];
 var SIZES$1 = {
   large: "large",
   small: "small"
@@ -31198,7 +31205,7 @@ var Tab = function Tab(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
-    otherProps = _objectWithoutProperties$1(_ref, _excluded$9);
+    otherProps = _objectWithoutProperties$1(_ref, _excluded$c);
   return /*#__PURE__*/React__default.createElement("div", _extends$4({
     "data-cy": "tab-container",
     className: classnames$1({
@@ -33005,6 +33012,343 @@ var TABLE_SORT_ORDERS = {
   asc: "ascend",
   desc: "descend"
 };
+var COLUMN_ADD_DIRECTION = {
+  left: 0,
+  right: 1
+};
+
+var useReorderColumns = function useReorderColumns(_ref) {
+  var isEnabled = _ref.isEnabled,
+    columns = _ref.columns,
+    setColumns = _ref.setColumns,
+    onColumnUpdate = _ref.onColumnUpdate,
+    rowSelection = _ref.rowSelection;
+  if (!isEnabled) return {
+    dragProps: {},
+    columns: columns
+  };
+  var isColumnFixed = function isColumnFixed(column) {
+    return !!column.fixed;
+  };
+  var dragProps = {
+    onDragEnd: function onDragEnd(fromIndex, toIndex) {
+      var from = fromIndex;
+      var to = toIndex;
+      if (rowSelection) {
+        from = fromIndex - 1;
+        to = toIndex - 1;
+      }
+      if (isColumnFixed(columns[from]) || isColumnFixed(columns[to])) return;
+      var newColumns = move(from, to, columns);
+      setColumns(newColumns);
+      onColumnUpdate(newColumns);
+    },
+    nodeSelector: "th",
+    handleSelector: ".drag-handler",
+    ignoreSelector: ".react-resizable-handle"
+  };
+  return {
+    dragProps: dragProps,
+    columns: columns
+  };
+};
+
+var SortIcon = function SortIcon(_ref) {
+  var sortOrder = _ref.sortOrder;
+  if (sortOrder === TABLE_SORT_ORDERS.asc || sortOrder === URL_SORT_ORDERS.ascend) {
+    return /*#__PURE__*/React__default.createElement(UpArrow, {
+      size: 14
+    });
+  }
+  if (sortOrder === TABLE_SORT_ORDERS.desc || sortOrder === URL_SORT_ORDERS.descend) {
+    return /*#__PURE__*/React__default.createElement(DownArrow, {
+      size: 14
+    });
+  }
+  return null;
+};
+
+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$7(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 useResizableColumns = function useResizableColumns(_ref) {
+  var columns = _ref.columns,
+    setColumns = _ref.setColumns,
+    isEnabled = _ref.isEnabled,
+    isAddEnabled = _ref.isAddEnabled,
+    onColumnAdd = _ref.onColumnAdd,
+    onColumnUpdate = _ref.onColumnUpdate,
+    onColumnDelete = _ref.onColumnDelete,
+    handleSort = _ref.handleSort,
+    sortedInfo = _ref.sortedInfo,
+    onColumnHide = _ref.onColumnHide,
+    tableOnChangeProps = _ref.tableOnChangeProps;
+  var handleResize = function handleResize(index) {
+    return function (_, _ref2) {
+      var size = _ref2.size;
+      var nextColumns = _toConsumableArray$1(columns);
+      nextColumns[index] = _objectSpread$c(_objectSpread$c({}, nextColumns[index]), {}, {
+        width: size.width
+      });
+      setColumns(nextColumns);
+    };
+  };
+  var computedColumnsData = useMemo(function () {
+    return columns.map(function (col, index) {
+      var modifiedColumn = _objectSpread$c(_objectSpread$c({}, col), {}, {
+        onHeaderCell: function onHeaderCell(column) {
+          return {
+            width: column.width,
+            onResize: isEnabled ? handleResize(index) : noop$5,
+            onResizeStop: function onResizeStop() {
+              return isEnabled ? onColumnUpdate(columns) : noop$5;
+            },
+            isSortable: isPresent(col.sorter),
+            onSort: handleSort,
+            sortedInfo: sortedInfo,
+            onColumnHide: onColumnHide,
+            isAddEnabled: isAddEnabled && !col.fixed,
+            onAddColumn: function onAddColumn(positionOffset) {
+              return onColumnAdd(index + positionOffset);
+            },
+            onColumnDelete: onColumnDelete,
+            isHidable: col.isHidable,
+            isDeletable: col.isDeletable,
+            column: col
+          };
+        },
+        sortIcon: SortIcon,
+        sortOrder: sortedInfo.field === col.dataIndex || sortedInfo.field === col.key ? sortedInfo.order : null
+      });
+      if (!col.ellipsis) {
+        modifiedColumn.ellipsis = true;
+      }
+      return modifiedColumn;
+    });
+  }, [columns, sortedInfo, tableOnChangeProps]);
+  return {
+    columns: computedColumnsData
+  };
+};
+
+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$7(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 useColumns = function useColumns(_ref) {
+  var columns = _ref.columns,
+    setColumns = _ref.setColumns,
+    isResizeEnabled = _ref.isResizeEnabled,
+    isReorderEnabled = _ref.isReorderEnabled,
+    isAddEnabled = _ref.isAddEnabled,
+    onColumnAdd = _ref.onColumnAdd,
+    onColumnUpdate = _ref.onColumnUpdate,
+    onColumnDelete = _ref.onColumnDelete,
+    rowSelection = _ref.rowSelection,
+    sortedInfo = _ref.sortedInfo,
+    setSortedInfo = _ref.setSortedInfo,
+    onColumnHide = _ref.onColumnHide,
+    onTableChange = _ref.onTableChange,
+    tableOnChangeProps = _ref.tableOnChangeProps,
+    handleTableSortChange = _ref.handleTableSortChange,
+    isDefaultPageChangeHandler = _ref.isDefaultPageChangeHandler;
+  var _useReorderColumns = useReorderColumns({
+      isEnabled: isReorderEnabled,
+      columns: columns,
+      setColumns: setColumns,
+      onColumnUpdate: onColumnUpdate,
+      rowSelection: rowSelection
+    }),
+    dragProps = _useReorderColumns.dragProps;
+  var handleSort = function handleSort(sorter) {
+    var _tableOnChangeProps$c, _tableOnChangeProps$c2, _tableOnChangeProps$c3;
+    var newSortedInfo = _objectSpread$b({}, sorter);
+    if (equals(props(["field", "order"], newSortedInfo), props(["field", "order"], sortedInfo))) {
+      newSortedInfo = {
+        field: null,
+        order: null,
+        column: null,
+        columnKey: null
+      };
+    }
+    setSortedInfo(newSortedInfo);
+    onTableChange === null || onTableChange === void 0 || onTableChange(((_tableOnChangeProps$c = tableOnChangeProps.current) === null || _tableOnChangeProps$c === void 0 ? void 0 : _tableOnChangeProps$c.pagination) || {}, ((_tableOnChangeProps$c2 = tableOnChangeProps.current) === null || _tableOnChangeProps$c2 === void 0 ? void 0 : _tableOnChangeProps$c2.filters) || {}, _objectSpread$b({}, newSortedInfo));
+    isDefaultPageChangeHandler && handleTableSortChange(((_tableOnChangeProps$c3 = tableOnChangeProps.current) === null || _tableOnChangeProps$c3 === void 0 ? void 0 : _tableOnChangeProps$c3.pagination) || {}, newSortedInfo);
+  };
+  var _useResizableColumns = useResizableColumns({
+      columns: columns,
+      setColumns: setColumns,
+      isEnabled: isResizeEnabled,
+      isAddEnabled: isAddEnabled,
+      onColumnAdd: onColumnAdd,
+      onColumnUpdate: onColumnUpdate,
+      onColumnDelete: onColumnDelete,
+      handleSort: handleSort,
+      sortedInfo: sortedInfo,
+      onColumnHide: onColumnHide,
+      tableOnChangeProps: tableOnChangeProps
+    }),
+    computedColumnsData = _useResizableColumns.columns;
+  return {
+    dragProps: dragProps,
+    columns: computedColumnsData
+  };
+};
+
+var useTableSort = function useTableSort() {
+  var queryParams = useQueryParams();
+  var history = useHistory();
+  var handleTableChange = function handleTableChange(pagination, sorter) {
+    var params = {
+      sort_by: sorter.order && camelToSnakeCase(sorter.field),
+      order_by: URL_SORT_ORDERS[sorter.order],
+      page: pagination.current
+    };
+    var pathname = window.location.pathname;
+    history.push(buildUrl(pathname, mergeLeft(params, queryParams)));
+  };
+  return {
+    handleTableChange: handleTableChange
+  };
+};
+
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
+var HeaderCellMenu = function HeaderCellMenu(_ref) {
+  var onSort = _ref.onSort,
+    _ref$column = _ref.column,
+    column = _ref$column === void 0 ? {} : _ref$column,
+    sortedInfo = _ref.sortedInfo,
+    isSortable = _ref.isSortable,
+    isAddEnabled = _ref.isAddEnabled,
+    isColumnDeletable = _ref.isColumnDeletable,
+    isHidable = _ref.isHidable,
+    onColumnHide = _ref.onColumnHide,
+    onAddColumn = _ref.onAddColumn,
+    onColumnDelete = _ref.onColumnDelete,
+    _ref$columnTitle = _ref.columnTitle,
+    columnTitle = _ref$columnTitle === void 0 ? null : _ref$columnTitle;
+  var columnInfoButtonReference = useRef();
+  return /*#__PURE__*/React__default.createElement("div", {
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement(Dropdown, {
+    appendTo: function appendTo() {
+      return document.body;
+    },
+    className: "flex",
+    icon: MenuHorizontal,
+    position: "auto",
+    strategy: "fixed",
+    buttonProps: {
+      className: "min-h-0 flex-shrink-0",
+      style: "text",
+      size: "medium",
+      "data-testid": "column-menu-button"
+    }
+  }, /*#__PURE__*/React__default.createElement(Menu, {
+    className: "cursor-auto",
+    onMouseDown: function onMouseDown(event) {
+      return event.preventDefault();
+    }
+  }, isSortable && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MenuItem.Button, {
+    className: "flex items-center justify-between",
+    onClick: function onClick() {
+      return onSort({
+        column: column,
+        columnKey: column.key,
+        field: column.dataIndex || column.key,
+        order: TABLE_SORT_ORDERS.asc
+      });
+    }
+  }, /*#__PURE__*/React__default.createElement("span", null, "Ascending"), sortedInfo.order === TABLE_SORT_ORDERS.asc && sortedInfo.field === column.dataIndex && /*#__PURE__*/React__default.createElement(Check, {
+    className: "neeto-ui-text-success-500",
+    size: 20
+  })), /*#__PURE__*/React__default.createElement(MenuItem.Button, {
+    className: "flex items-center justify-between",
+    onClick: function onClick() {
+      return onSort({
+        column: column,
+        columnKey: column.key,
+        field: column.dataIndex,
+        order: TABLE_SORT_ORDERS.desc
+      });
+    }
+  }, /*#__PURE__*/React__default.createElement("span", null, "Descending"), sortedInfo.order === TABLE_SORT_ORDERS.desc && sortedInfo.field === column.dataIndex && /*#__PURE__*/React__default.createElement(Check, {
+    className: "neeto-ui-text-success-500",
+    size: 20
+  }))), isAddEnabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MenuItem.Button, {
+    onClick: function onClick() {
+      return onAddColumn(COLUMN_ADD_DIRECTION.right);
+    }
+  }, "Insert column right"), /*#__PURE__*/React__default.createElement(MenuItem.Button, {
+    onClick: function onClick() {
+      return onAddColumn(COLUMN_ADD_DIRECTION.left);
+    }
+  }, "Insert column left")), isPresent(column === null || column === void 0 ? void 0 : column.description) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MenuItem.Button, {
+    ref: columnInfoButtonReference
+  }, "Column info"), /*#__PURE__*/React__default.createElement(Popover, {
+    className: "cursor-auto",
+    hideOnClick: false,
+    interactiveDebounce: 20,
+    offset: [0, 0],
+    position: "right",
+    reference: columnInfoButtonReference,
+    strategy: "fixed"
+  }, columnTitle && /*#__PURE__*/React__default.createElement(Popover.Title, null, columnTitle), /*#__PURE__*/React__default.createElement(Typography, {
+    className: "w-72 max-w-full whitespace-normal normal-case",
+    lineHeight: "normal",
+    style: "body2",
+    weight: "normal"
+  }, column === null || column === void 0 ? void 0 : column.description))), isHidable && /*#__PURE__*/React__default.createElement(MenuItem.Button, {
+    onClick: function onClick() {
+      return onColumnHide(column);
+    }
+  }, "Hide column"), isColumnDeletable && /*#__PURE__*/React__default.createElement(MenuItem.Button, {
+    onClick: function onClick() {
+      return onColumnDelete(column.id);
+    }
+  }, "Delete column"))));
+};
+
+var _excluded$b = ["children", "isSortable", "isAddEnabled", "sortedInfo", "onSort", "isHidable", "isDeletable", "onColumnHide", "onAddColumn", "onColumnDelete", "column"];
+var CellContent = function CellContent(_ref) {
+  var children = _ref.children,
+    isSortable = _ref.isSortable,
+    isAddEnabled = _ref.isAddEnabled,
+    sortedInfo = _ref.sortedInfo,
+    onSort = _ref.onSort,
+    _ref$isHidable = _ref.isHidable,
+    isHidable = _ref$isHidable === void 0 ? true : _ref$isHidable,
+    _ref$isDeletable = _ref.isDeletable,
+    isDeletable = _ref$isDeletable === void 0 ? false : _ref$isDeletable,
+    onColumnHide = _ref.onColumnHide,
+    onAddColumn = _ref.onAddColumn,
+    onColumnDelete = _ref.onColumnDelete,
+    column = _ref.column,
+    headerProps = _objectWithoutProperties$1(_ref, _excluded$b);
+  var isColumnHidable = isHidable && isPresent(onColumnHide);
+  var isColumnDeletable = isDeletable && isPresent(onColumnDelete);
+  var hasMoreMenu = isSortable || isPresent(column === null || column === void 0 ? void 0 : column.description) || isColumnHidable || isAddEnabled;
+  return /*#__PURE__*/React__default.createElement("th", _extends$4({}, headerProps, {
+    title: "",
+    onClick: isSortable ? noop$5 : headerProps.onClick
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center justify-between"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "min-w-0 flex-grow"
+  }, children), hasMoreMenu && /*#__PURE__*/React__default.createElement(HeaderCellMenu, {
+    column: column,
+    isAddEnabled: isAddEnabled,
+    isColumnDeletable: isColumnDeletable,
+    isSortable: isSortable,
+    onAddColumn: onAddColumn,
+    onColumnDelete: onColumnDelete,
+    onColumnHide: onColumnHide,
+    onSort: onSort,
+    sortedInfo: sortedInfo,
+    columnTitle: headerProps.title,
+    isHidable: isColumnHidable
+  })));
+};
 
 var reactResizable = {exports: {}};
 
@@ -33207,9 +33551,9 @@ function _getRequireWildcardCache$3(nodeInterop) { if (typeof WeakMap !== "funct
 
 function _interopRequireWildcard$3(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof$1(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$3(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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 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$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$4(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; }
+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$4(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; }
 
 function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -33270,7 +33614,7 @@ function addEvent(el
 {
   if (!el) return;
 
-  var options = _objectSpread$b({
+  var options = _objectSpread$a({
     capture: true
   }, inputOptions); // $FlowIgnore[method-unbinding]
 
@@ -33298,7 +33642,7 @@ function removeEvent(el
 {
   if (!el) return;
 
-  var options = _objectSpread$b({
+  var options = _objectSpread$a({
     capture: true
   }, inputOptions); // $FlowIgnore[method-unbinding]
 
@@ -34798,16 +35142,16 @@ var _react = _interopRequireDefault$2(React__default);
 
 function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 // React.addons.cloneWithProps look-alike that merges style & className.
 function cloneElement(element, props) {
   if (props.style && element.props.style) {
-    props.style = _objectSpread$a(_objectSpread$a({}, element.props.style), props.style);
+    props.style = _objectSpread$9(_objectSpread$9({}, element.props.style), props.style);
   }
 
   if (props.className && element.props.className) {
@@ -34939,7 +35283,7 @@ var _utils = utils;
 
 var _propTypes$1 = propTypes;
 
-var _excluded$8 = ["children", "className", "draggableOpts", "width", "height", "handle", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles", "transformScale"];
+var _excluded$a = ["children", "className", "draggableOpts", "width", "height", "handle", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles", "transformScale"];
 
 function _getRequireWildcardCache$1(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$1 = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -34949,9 +35293,9 @@ function _extends$1() { _extends$1 = Object.assign || function (target) { for (v
 
 function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -35141,7 +35485,7 @@ var Resizable$1 = /*#__PURE__*/function (_React$Component) {
 
     var isDOMElement = typeof handle.type === 'string';
 
-    var props = _objectSpread$9({
+    var props = _objectSpread$8({
       ref: ref
     }, isDOMElement ? {} : {
       handleAxis: handleAxis
@@ -35172,13 +35516,13 @@ var Resizable$1 = /*#__PURE__*/function (_React$Component) {
         _this$props2.onResizeStart;
         var resizeHandles = _this$props2.resizeHandles;
         _this$props2.transformScale;
-        var p = _objectWithoutPropertiesLoose$1(_this$props2, _excluded$8); // What we're doing here is getting the child of this element, and cloning it with this element's props.
+        var p = _objectWithoutPropertiesLoose$1(_this$props2, _excluded$a); // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
     // 1. Its original children (resizable's child's children), and
     // 2. One or more draggable handles.
 
 
-    return (0, _utils.cloneElement)(children, _objectSpread$9(_objectSpread$9({}, p), {}, {
+    return (0, _utils.cloneElement)(children, _objectSpread$8(_objectSpread$8({}, p), {}, {
       className: (className ? className + " " : '') + "react-resizable",
       children: [].concat(children.props.children, resizeHandles.map(function (handleAxis) {
         var _this3$handleRefs$han;
@@ -35224,7 +35568,7 @@ var _Resizable = _interopRequireDefault(Resizable$2);
 
 var _propTypes2 = propTypes;
 
-var _excluded$7 = ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"];
+var _excluded$9 = ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -35234,9 +35578,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -35317,7 +35661,7 @@ var ResizableBox = /*#__PURE__*/function (_React$Component) {
         var resizeHandles = _this$props.resizeHandles,
         style = _this$props.style,
         transformScale = _this$props.transformScale,
-        props = _objectWithoutPropertiesLoose(_this$props, _excluded$7);
+        props = _objectWithoutPropertiesLoose(_this$props, _excluded$9);
 
     return /*#__PURE__*/React.createElement(_Resizable.default, {
       axis: axis,
@@ -35335,7 +35679,7 @@ var ResizableBox = /*#__PURE__*/function (_React$Component) {
       transformScale: transformScale,
       width: this.state.width
     }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-      style: _objectSpread$8(_objectSpread$8({}, style), {}, {
+      style: _objectSpread$7(_objectSpread$7({}, style), {}, {
         width: this.state.width + 'px',
         height: this.state.height + 'px'
       })
@@ -35346,7 +35690,7 @@ var ResizableBox = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 ResizableBox$1.default = ResizableBox;
-ResizableBox.propTypes = _objectSpread$8(_objectSpread$8({}, _propTypes2.resizableProps), {}, {
+ResizableBox.propTypes = _objectSpread$7(_objectSpread$7({}, _propTypes2.resizableProps), {}, {
   children: _propTypes.default.element
 });
 
@@ -35357,17 +35701,16 @@ reactResizable.exports = function() {
 var Resizable = reactResizable.exports.Resizable = Resizable$2.default;
 reactResizable.exports.ResizableBox = ResizableBox$1.default;
 
-var _excluded$6 = ["onResize", "width", "onResizeStop", "className"],
-  _excluded2$1 = ["onResize", "width", "onResizeStop"];
+var _excluded$8 = ["onResize", "width", "onResizeStop", "className"];
 var HeaderCell = function HeaderCell(props) {
   var onResize = props.onResize,
     width = props.width,
     onResizeStop = props.onResizeStop,
     className = props.className,
-    restProps = _objectWithoutProperties$1(props, _excluded$6);
+    restProps = _objectWithoutProperties$1(props, _excluded$8);
   if (!width) {
-    return /*#__PURE__*/React__default.createElement("th", _extends$4({}, restProps, {
-      className: "drag-handler"
+    return /*#__PURE__*/React__default.createElement(CellContent, _extends$4({}, restProps, {
+      className: classnames$1(className, "drag-handler")
     }));
   }
   return /*#__PURE__*/React__default.createElement(Resizable, {
@@ -35384,17 +35727,19 @@ var HeaderCell = function HeaderCell(props) {
         return e.stopPropagation();
       }
     })
-  }, /*#__PURE__*/React__default.createElement("th", _extends$4({}, restProps, {
+  }, /*#__PURE__*/React__default.createElement(CellContent, _extends$4({}, restProps, {
     className: classnames$1(className, "drag-handler")
   })));
 };
+
+var _excluded$7 = ["onResize", "width", "onResizeStop"];
 var ResizableHeaderCell = function ResizableHeaderCell(props) {
   var onResize = props.onResize,
     width = props.width,
     onResizeStop = props.onResizeStop,
-    restProps = _objectWithoutProperties$1(props, _excluded2$1);
+    restProps = _objectWithoutProperties$1(props, _excluded$7);
   if (!width) {
-    return /*#__PURE__*/React__default.createElement("th", restProps);
+    return /*#__PURE__*/React__default.createElement(CellContent, restProps);
   }
   return /*#__PURE__*/React__default.createElement(Resizable, {
     onResize: onResize,
@@ -35410,117 +35755,36 @@ var ResizableHeaderCell = function ResizableHeaderCell(props) {
         return e.stopPropagation();
       }
     })
-  }, /*#__PURE__*/React__default.createElement("th", restProps));
-};
-var ReorderableHeaderCell = function ReorderableHeaderCell(props) {
-  return /*#__PURE__*/React__default.createElement("th", _extends$4({}, props, {
-    className: "drag-handler"
-  }));
+  }, /*#__PURE__*/React__default.createElement(CellContent, restProps));
 };
 
-var useReorderColumns = function useReorderColumns(_ref) {
-  var isEnabled = _ref.isEnabled,
-    columns = _ref.columns,
-    setColumns = _ref.setColumns,
-    onColumnUpdate = _ref.onColumnUpdate,
-    rowSelection = _ref.rowSelection;
-  if (!isEnabled) return {
-    dragProps: {},
-    columns: columns
-  };
-  var isColumnFixed = function isColumnFixed(column) {
-    return !!column.fixed;
-  };
-  var dragProps = {
-    onDragEnd: function onDragEnd(fromIndex, toIndex) {
-      var from = fromIndex;
-      var to = toIndex;
-      if (rowSelection) {
-        from = fromIndex - 1;
-        to = toIndex - 1;
-      }
-      if (isColumnFixed(columns[from]) || isColumnFixed(columns[to])) return;
-      var newColumns = move(from, to, columns);
-      setColumns(newColumns);
-      onColumnUpdate(newColumns);
-    },
-    nodeSelector: "th",
-    handleSelector: ".drag-handler",
-    ignoreSelector: ".react-resizable-handle"
-  };
-  return {
-    dragProps: dragProps,
-    columns: columns
-  };
+var _excluded$6 = ["className"];
+var ReorderableHeaderCell = function ReorderableHeaderCell(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties$1(_ref, _excluded$6);
+  return /*#__PURE__*/React__default.createElement(CellContent, _extends$4({}, props, {
+    className: classnames$1(className, "drag-handler")
+  }));
 };
 
-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$7(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 useResizableColumns = function useResizableColumns(_ref) {
-  var columns = _ref.columns,
-    setColumns = _ref.setColumns,
-    isEnabled = _ref.isEnabled,
-    onColumnUpdate = _ref.onColumnUpdate;
-  if (!isEnabled) {
-    return {
-      components: {},
-      columns: columns
-    };
-  }
-  var handleResize = function handleResize(index) {
-    return function (_, _ref2) {
-      var size = _ref2.size;
-      var nextColumns = _toConsumableArray$1(columns);
-      nextColumns[index] = _objectSpread$7(_objectSpread$7({}, nextColumns[index]), {}, {
-        width: size.width
-      });
-      setColumns(nextColumns);
-    };
+var getHeaderCell = function getHeaderCell(_ref) {
+  var enableColumnResize = _ref.enableColumnResize,
+    enableColumnReorder = _ref.enableColumnReorder;
+  if (enableColumnReorder && enableColumnResize) return {
+    cell: HeaderCell
   };
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  var computedColumnsData = useMemo(function () {
-    return columns.map(function (col, index) {
-      var modifiedColumn = _objectSpread$7(_objectSpread$7({}, col), {}, {
-        onHeaderCell: function onHeaderCell(column) {
-          return {
-            width: column.width,
-            onResize: handleResize(index),
-            onResizeStop: function onResizeStop() {
-              return onColumnUpdate(columns);
-            }
-          };
-        }
-      });
-      if (!col.ellipsis) {
-        modifiedColumn.ellipsis = true;
-      }
-      return modifiedColumn;
-    });
-  }, [columns]);
-  return {
-    columns: computedColumnsData
+  if (enableColumnResize) return {
+    cell: ResizableHeaderCell
   };
-};
-
-var useTableSort = function useTableSort() {
-  var queryParams = useQueryParams();
-  var history = useHistory();
-  var handleTableChange = function handleTableChange(pagination, sorter) {
-    var params = {
-      sort_by: sorter.order && camelToSnakeCase(sorter.field),
-      order_by: URL_SORT_ORDERS[sorter.order],
-      page: pagination.current
-    };
-    var pathname = window.location.pathname;
-    history.push(buildUrl(pathname, mergeLeft(params, queryParams)));
+  if (enableColumnReorder) return {
+    cell: ReorderableHeaderCell
   };
   return {
-    handleTableChange: handleTableChange
+    cell: CellContent
   };
 };
 
-var _excluded$5 = ["allowRowClick", "enableColumnResize", "enableColumnReorder", "className", "columnData", "currentPageNumber", "defaultPageSize", "handlePageChange", "loading", "onRowClick", "onRowSelect", "rowData", "totalCount", "selectedRowKeys", "fixedHeight", "paginationProps", "scroll", "rowSelection", "shouldDynamicallyRenderRowSize", "bordered", "onColumnUpdate", "components"];
+var _excluded$5 = ["allowRowClick", "enableColumnResize", "enableColumnReorder", "enableAddColumn", "className", "columnData", "currentPageNumber", "defaultPageSize", "handlePageChange", "loading", "onRowClick", "onRowSelect", "rowData", "totalCount", "selectedRowKeys", "fixedHeight", "paginationProps", "scroll", "rowSelection", "shouldDynamicallyRenderRowSize", "bordered", "onColumnUpdate", "components", "onColumnHide", "onColumnAdd", "onColumnDelete", "onChange"];
 function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$7(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TABLE_PAGINATION_HEIGHT = 64;
@@ -35533,6 +35797,8 @@ var Table = function Table(_ref) {
     enableColumnResize = _ref$enableColumnResi === void 0 ? false : _ref$enableColumnResi,
     _ref$enableColumnReor = _ref.enableColumnReorder,
     enableColumnReorder = _ref$enableColumnReor === void 0 ? false : _ref$enableColumnReor,
+    _ref$enableAddColumn = _ref.enableAddColumn,
+    enableAddColumn = _ref$enableAddColumn === void 0 ? false : _ref$enableAddColumn,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     _ref$columnData = _ref.columnData,
@@ -35567,6 +35833,11 @@ var Table = function Table(_ref) {
     onColumnUpdate = _ref$onColumnUpdate === void 0 ? noop$3 : _ref$onColumnUpdate,
     _ref$components = _ref.components,
     components = _ref$components === void 0 ? {} : _ref$components,
+    onColumnHide = _ref.onColumnHide,
+    _ref$onColumnAdd = _ref.onColumnAdd,
+    onColumnAdd = _ref$onColumnAdd === void 0 ? noop$3 : _ref$onColumnAdd,
+    onColumnDelete = _ref.onColumnDelete,
+    onChange = _ref.onChange,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$5);
   var _useState = useState(null),
     _useState2 = _slicedToArray$3(_useState, 2),
@@ -35580,9 +35851,14 @@ var Table = function Table(_ref) {
     _useState6 = _slicedToArray$3(_useState5, 2),
     columns = _useState6[0],
     setColumns = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray$3(_useState7, 2),
+    sortedInfo = _useState8[0],
+    setSortedInfo = _useState8[1];
   var isDefaultPageChangeHandler = handlePageChange === noop$3;
   var history = useHistory();
   var headerRef = useRef();
+  var tableOnChangeProps = useRef({});
   var resizeObserver = useRef(new ResizeObserver(function (_ref2) {
     var _ref3 = _slicedToArray$3(_ref2, 1),
       entry = _ref3[0];
@@ -35601,24 +35877,28 @@ var Table = function Table(_ref) {
     var headerHeight = headerRef.current ? headerRef.current.offsetHeight : TABLE_DEFAULT_HEADER_HEIGHT;
     setHeaderHeight(headerHeight);
   }, 10);
-  var _useReorderColumns = useReorderColumns({
-      isEnabled: enableColumnReorder,
+  var _useTableSort = useTableSort(),
+    handleTableSortChange = _useTableSort.handleTableChange;
+  var _useColumns = useColumns({
+      isReorderEnabled: enableColumnReorder,
+      isResizeEnabled: enableColumnResize,
+      isAddEnabled: enableAddColumn,
+      onTableChange: onChange,
       columns: columns,
       setColumns: setColumns,
       onColumnUpdate: onColumnUpdate,
-      rowSelection: rowSelection
+      rowSelection: rowSelection,
+      sortedInfo: sortedInfo,
+      setSortedInfo: setSortedInfo,
+      onColumnHide: onColumnHide,
+      onColumnAdd: onColumnAdd,
+      onColumnDelete: onColumnDelete,
+      tableOnChangeProps: tableOnChangeProps,
+      handleTableSortChange: handleTableSortChange,
+      isDefaultPageChangeHandler: isDefaultPageChangeHandler
     }),
-    dragProps = _useReorderColumns.dragProps,
-    columnsWithReorderProps = _useReorderColumns.columns;
-  var _useResizableColumns = useResizableColumns({
-      isEnabled: enableColumnResize,
-      columns: columnsWithReorderProps,
-      setColumns: setColumns,
-      onColumnUpdate: onColumnUpdate
-    }),
-    curatedColumnsData = _useResizableColumns.columns;
-  var _useTableSort = useTableSort(),
-    handleTableChange = _useTableSort.handleTableChange;
+    dragProps = _useColumns.dragProps,
+    curatedColumnsData = _useColumns.columns;
   var queryParams = useQueryParams();
   var setSortFromURL = function setSortFromURL(columnData) {
     var _queryParams$sort_by;
@@ -35650,11 +35930,23 @@ var Table = function Table(_ref) {
     },
     selectedRowKeys: selectedRowKeys
   }) : false;
-  var reordableHeader = {
-    header: {
-      cell: enableColumnResize ? enableColumnReorder ? HeaderCell : ResizableHeaderCell : enableColumnReorder ? ReorderableHeaderCell : null
-    }
+
+  // eslint-disable-next-line @bigbinary/neeto/no-excess-function-arguments
+  var handleTableChange = function handleTableChange(pagination, filters, sorter, extras) {
+    setSortedInfo(sorter);
+    isDefaultPageChangeHandler && handleTableSortChange(pagination, sorter);
+    onChange === null || onChange === void 0 || onChange(pagination, filters, sorter, extras);
+    tableOnChangeProps.current = {
+      pagination: pagination,
+      filters: filters
+    };
   };
+  var componentOverrides = _objectSpread$6(_objectSpread$6({}, components), {}, {
+    header: getHeaderCell({
+      enableColumnResize: enableColumnResize,
+      enableColumnReorder: enableColumnReorder
+    })
+  });
   var calculateRowsPerPage = function calculateRowsPerPage() {
     var viewportHeight = window.innerHeight;
     var rowsPerPage = Math.floor((viewportHeight - TABLE_PAGINATION_HEIGHT) / TABLE_ROW_HEIGHT * 3);
@@ -35724,7 +36016,7 @@ var Table = function Table(_ref) {
           Table: {
             headerBorderRadius: 0,
             bodySortBg: "rgb(var(--neeto-ui-gray-100))",
-            borderColor: "rgb(var(--neeto-ui-gray-200))",
+            borderColor: "rgb(var(--neeto-ui-gray-300))",
             expandIconBg: "rgb(var(--neeto-ui-white))",
             filterDropdownBg: "rgb(var(--neeto-ui-white))",
             filterDropdownMenuBg: "rgb(var(--neeto-ui-white))",
@@ -35735,7 +36027,7 @@ var Table = function Table(_ref) {
             headerColor: "rgb(var(--neeto-ui-gray-700))",
             headerFilterHoverBg: "rgb(var(--neeto-ui-gray-100))",
             headerSortActiveBg: "rgb(var(--neeto-ui-gray-200))",
-            headerSortHoverBg: "rgb(var(--neeto-ui-gray-200))",
+            headerSortHoverBg: "rgb(var(--neeto-ui-gray-100))",
             headerSplitColor: "rgb(var(--neeto-ui-gray-200))",
             rowExpandedBg: "rgb(var(--neeto-ui-gray-200))",
             rowHoverBg: "rgb(var(--neeto-ui-gray-100))",
@@ -35756,7 +36048,7 @@ var Table = function Table(_ref) {
       loading: loading,
       locale: locale,
       columns: sortedColumnsWithAlignment,
-      components: _objectSpread$6(_objectSpread$6({}, components), reordableHeader),
+      components: componentOverrides,
       dataSource: rowData,
       ref: tableRef,
       rowKey: "id",
@@ -35780,9 +36072,7 @@ var Table = function Table(_ref) {
         x: "max-content",
         y: calculateTableContainerHeight()
       }, scroll),
-      onChange: function onChange(pagination, _, sorter) {
-        isDefaultPageChangeHandler && handleTableChange(pagination, sorter);
-      },
+      onChange: handleTableChange,
       onHeaderRow: function onHeaderRow() {
         return {
           ref: headerRef,