@banyan_cloud/roots 1.0.32 → 1.0.34

package/dist/cjs/index.js

@@ -2325,24 +2325,16 @@ MagnifyingGlass.defaultProps = {
 
 var Columns$1 = function Columns(props) {
   var className = props.className;
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", {
     className: className,
-    viewBox: "0 0 26 26",
-    fill: "none",
+    width: "14",
+    height: "15",
+    viewBox: "0 0 14 15",
+    fill: "#2A2A2A",
     xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M11.5935 21.0107L11.5935 4.98934C11.5935 4.54693 11.2393 4.18828 10.8024 4.18828H6.84694C6.41003 4.18828 6.05584 4.54693 6.05584 4.98934L6.05584 21.0107C6.05584 21.4531 6.41003 21.8117 6.84694 21.8117H10.8024C11.2393 21.8117 11.5935 21.4531 11.5935 21.0107Z",
-      stroke: "#333333",
-      strokeWidth: "1.91877",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M20.2955 21.0107V4.98934C20.2955 4.54693 19.9413 4.18828 19.5044 4.18828H15.549C15.1121 4.18828 14.758 4.54693 14.758 4.98934V21.0107C14.758 21.4531 15.1121 21.8117 15.549 21.8117H19.5044C19.9413 21.8117 20.2955 21.4531 20.2955 21.0107Z",
-      stroke: "#333333",
-      strokeWidth: "1.91877",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M12.25 1.17167H1.75002C1.59531 1.17167 1.44694 1.23313 1.33754 1.34252C1.22815 1.45192 1.16669 1.60029 1.16669 1.755V12.255C1.16669 12.4097 1.22815 12.5581 1.33754 12.6675C1.44694 12.7769 1.59531 12.8383 1.75002 12.8383H12.25C12.4047 12.8383 12.5531 12.7769 12.6625 12.6675C12.7719 12.5581 12.8334 12.4097 12.8334 12.255V1.755C12.8334 1.60029 12.7719 1.45192 12.6625 1.34252C12.5531 1.23313 12.4047 1.17167 12.25 1.17167ZM6.41669 11.6717H2.33335V2.33833H6.41669V11.6717ZM11.6667 11.6717H7.58335V2.33833H11.6667V11.6717Z"
+    })
   });
 };
 Columns$1.defaultProps = {
@@ -2461,6 +2453,52 @@ Reset.defaultProps = {
   className: ''
 };
 
+var Settings = function Settings(props) {
+  var className = props.className;
+  return /*#__PURE__*/jsxRuntime.jsx("svg", {
+    className: className,
+    width: "14",
+    height: "15",
+    viewBox: "0 0 14 15",
+    fill: "#2A2A2A",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M11.6084 7.38999C11.5148 7.28354 11.4633 7.14669 11.4633 7.00499C11.4633 6.8633 11.5148 6.72645 11.6084 6.61999L12.355 5.77999C12.4373 5.68822 12.4884 5.57274 12.501 5.45012C12.5135 5.32751 12.487 5.20406 12.425 5.09749L11.2584 3.07916C11.197 2.97272 11.1037 2.88834 10.9916 2.83806C10.8795 2.78778 10.7545 2.77417 10.6342 2.79916L9.53752 3.02083C9.39798 3.04966 9.25271 3.02642 9.12912 2.95549C9.00554 2.88457 8.91219 2.77086 8.86669 2.63583L8.51085 1.56833C8.47172 1.45247 8.39716 1.35183 8.29772 1.28065C8.19828 1.20947 8.07898 1.17135 7.95669 1.17166H5.62335C5.49615 1.16502 5.37027 1.2002 5.26493 1.27183C5.1596 1.34345 5.08061 1.44759 5.04002 1.56833L4.71335 2.63583C4.66786 2.77086 4.5745 2.88457 4.45092 2.95549C4.32734 3.02642 4.18206 3.04966 4.04252 3.02083L2.91669 2.79916C2.80268 2.78305 2.68645 2.80104 2.58264 2.85087C2.47883 2.90069 2.3921 2.98013 2.33335 3.07916L1.16669 5.09749C1.1032 5.20287 1.07465 5.32563 1.08513 5.44821C1.0956 5.57079 1.14457 5.68692 1.22502 5.77999L1.96585 6.61999C2.05937 6.72645 2.11095 6.8633 2.11095 7.00499C2.11095 7.14669 2.05937 7.28354 1.96585 7.38999L1.22502 8.22999C1.14457 8.32307 1.0956 8.4392 1.08513 8.56178C1.07465 8.68436 1.1032 8.80712 1.16669 8.91249L2.33335 10.9308C2.39466 11.0373 2.48801 11.1216 2.60008 11.1719C2.71216 11.2222 2.83725 11.2358 2.95752 11.2108L4.05419 10.9892C4.19373 10.9603 4.339 10.9836 4.46259 11.0545C4.58617 11.1254 4.67952 11.2391 4.72502 11.3742L5.08085 12.4417C5.12144 12.5624 5.20044 12.6665 5.30577 12.7382C5.4111 12.8098 5.53698 12.845 5.66419 12.8383H7.99752C8.11981 12.8386 8.23911 12.8005 8.33855 12.7293C8.438 12.6582 8.51255 12.5575 8.55169 12.4417L8.90752 11.3742C8.95302 11.2391 9.04637 11.1254 9.16996 11.0545C9.29354 10.9836 9.43881 10.9603 9.57835 10.9892L10.675 11.2108C10.7953 11.2358 10.9204 11.2222 11.0325 11.1719C11.1445 11.1216 11.2379 11.0373 11.2992 10.9308L12.4659 8.91249C12.5278 8.80593 12.5544 8.68248 12.5418 8.55986C12.5292 8.43725 12.4781 8.32177 12.3959 8.22999L11.6084 7.38999ZM10.7392 8.17166L11.2059 8.69666L10.4592 9.99166L9.77085 9.85166C9.35073 9.76578 8.91369 9.83715 8.5427 10.0522C8.17172 10.2673 7.89261 10.6111 7.75835 11.0183L7.53669 11.6717H6.04335L5.83335 11.0067C5.6991 10.5994 5.41999 10.2556 5.04901 10.0405C4.67802 9.82548 4.24098 9.75412 3.82085 9.83999L3.13252 9.97999L2.37419 8.69083L2.84085 8.16583C3.12783 7.84498 3.28648 7.42962 3.28648 6.99916C3.28648 6.5687 3.12783 6.15334 2.84085 5.83249L2.37419 5.30749L3.12085 4.02416L3.80919 4.16416C4.22932 4.25004 4.66635 4.17867 5.03734 3.96361C5.40833 3.74855 5.68744 3.40475 5.82169 2.99749L6.04335 2.33833H7.53669L7.75835 3.00333C7.89261 3.41059 8.17172 3.75438 8.5427 3.96944C8.91369 4.18451 9.35073 4.25587 9.77085 4.16999L10.4592 4.02999L11.2059 5.32499L10.7392 5.84999C10.4554 6.1701 10.2988 6.58306 10.2988 7.01083C10.2988 7.4386 10.4554 7.85155 10.7392 8.17166ZM6.79002 4.67166C6.32853 4.67166 5.87741 4.80851 5.49369 5.0649C5.10998 5.32129 4.81091 5.68571 4.6343 6.11207C4.4577 6.53843 4.41149 7.00758 4.50152 7.46021C4.59155 7.91283 4.81378 8.32859 5.14011 8.65491C5.46643 8.98123 5.88219 9.20346 6.33481 9.29349C6.78743 9.38353 7.25659 9.33732 7.68295 9.16071C8.10931 8.98411 8.47373 8.68504 8.73012 8.30132C8.98651 7.91761 9.12335 7.46648 9.12335 7.00499C9.12335 6.38616 8.87752 5.79266 8.43994 5.35508C8.00235 4.91749 7.40886 4.67166 6.79002 4.67166ZM6.79002 8.17166C6.55928 8.17166 6.33371 8.10324 6.14186 7.97504C5.95 7.84685 5.80046 7.66464 5.71216 7.45146C5.62386 7.23828 5.60076 7.0037 5.64577 6.77739C5.69079 6.55108 5.8019 6.3432 5.96506 6.18004C6.12822 6.01688 6.3361 5.90576 6.56242 5.86074C6.78873 5.81573 7.0233 5.83883 7.23649 5.92713C7.44967 6.01544 7.63187 6.16497 7.76007 6.35683C7.88826 6.54869 7.95669 6.77425 7.95669 7.00499C7.95669 7.31441 7.83377 7.61116 7.61498 7.82995C7.39619 8.04874 7.09944 8.17166 6.79002 8.17166Z"
+    })
+  });
+};
+
+var Trash = function Trash(props) {
+  var className = props.className;
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    className: className,
+    width: "14",
+    height: "15",
+    viewBox: "0 0 14 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsxRuntime.jsx("g", {
+      clipPath: "url(#clip0_3863_19293)",
+      children: /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M1.75 3.50499H2.91667M2.91667 3.50499H12.25M2.91667 3.50499V11.6717C2.91667 11.9811 3.03958 12.2778 3.25838 12.4966C3.47717 12.7154 3.77391 12.8383 4.08333 12.8383H9.91667C10.2261 12.8383 10.5228 12.7154 10.7416 12.4966C10.9604 12.2778 11.0833 11.9811 11.0833 11.6717V3.50499H2.91667ZM4.66667 3.50499V2.33833C4.66667 2.02891 4.78958 1.73216 5.00838 1.51337C5.22717 1.29458 5.52391 1.17166 5.83333 1.17166H8.16667C8.47609 1.17166 8.77283 1.29458 8.99162 1.51337C9.21042 1.73216 9.33333 2.02891 9.33333 2.33833V3.50499M5.83333 6.42166V9.92166M8.16667 6.42166V9.92166",
+        stroke: "#FF626A",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("defs", {
+      children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
+        id: "clip0_3863_19293",
+        children: /*#__PURE__*/jsxRuntime.jsx("rect", {
+          width: "14",
+          height: "14",
+          fill: "white",
+          transform: "translate(0 0.00500488)"
+        })
+      })
+    })]
+  });
+};
+
 var css$O = ".Accordion_module_root__a63f6f55 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] > [data-elem=component1] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] > [data-elem=component1] .Accordion_module_icon__a63f6f55 {\n  transform: rotate(-90deg);\n  width: 1rem;\n  height: 1rem;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] .Accordion_module_title__a63f6f55 {\n  flex: 1 1 auto;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell]:hover {\n  background: var(--background);\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell]:hover .Accordion_module_icon__a63f6f55,\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell]:hover .Accordion_module_title__a63f6f55 {\n  color: var(--highlight);\n  fill: var(--highlight);\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_body__a63f6f55 {\n  display: none;\n  padding: 0.5rem 2.5rem;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] [data-elem=component1] .Accordion_module_icon__a63f6f55 {\n  transform: none;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_body__a63f6f55 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_body__a63f6f55 > button[data-elem=base-cell] {\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  align-self: flex-end;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_body__a63f6f55 > button[data-elem=base-cell] .Accordion_module_expand__a63f6f55 {\n  height: 1.5rem;\n  width: 1.5rem;\n}";
 var modules_8207625f = {"root":"Accordion_module_root__a63f6f55","header":"Accordion_module_header__a63f6f55","icon":"Accordion_module_icon__a63f6f55","title":"Accordion_module_title__a63f6f55","body":"Accordion_module_body__a63f6f55","open":"Accordion_module_open__a63f6f55","expand":"Accordion_module_expand__a63f6f55"};
 n(css$O,{});
@@ -2836,6 +2874,79 @@ function within(min$1, value, max$1) {
   return max$3(min$1, min$3(value, max$1));
 }
 
+/**
+ * Positions an inner element of the floating element such that it is centered
+ * to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow$1 = options => ({
+  name: 'arrow',
+  options,
+
+  async fn(middlewareArguments) {
+    // Since `element` is required, we don't Partial<> the type
+    const {
+      element,
+      padding = 0
+    } = options != null ? options : {};
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform
+    } = middlewareArguments;
+
+    if (element == null) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn('Floating UI: No `element` was passed to the `arrow` middleware.');
+      }
+
+      return {};
+    }
+
+    const paddingObject = getSideObjectFromPadding(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getMainAxisFromPlacement(placement);
+    const alignment = getAlignment(placement);
+    const length = getLengthFromAxis(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const minProp = axis === 'y' ? 'top' : 'left';
+    const maxProp = axis === 'y' ? 'bottom' : 'right';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
+
+    if (clientSize === 0) {
+      clientSize = rects.floating[length];
+    }
+
+    const centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds
+
+    const min = paddingObject[minProp];
+    const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = within(min, center, max); // Make sure that arrow points at the reference
+
+    const alignmentPadding = alignment === 'start' ? paddingObject[minProp] : paddingObject[maxProp];
+    const shouldAddOffset = alignmentPadding > 0 && center !== offset && rects.reference[length] <= rects.floating[length];
+    const alignmentOffset = shouldAddOffset ? center < min ? min - center : max - center : 0;
+    return {
+      [axis]: coords[axis] - alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset
+      }
+    };
+  }
+
+});
+
 const hash$1 = {
   left: 'right',
   right: 'left',
@@ -4024,6 +4135,50 @@ function useFloating$1(_temp) {
   }), [data, update, refs, setReference, setFloating]);
 }
 
+/**
+ * Positions an inner element of the floating element such that it is centered
+ * to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+
+const arrow = options => {
+  const {
+    element,
+    padding
+  } = options;
+
+  function isRef(value) {
+    return Object.prototype.hasOwnProperty.call(value, 'current');
+  }
+
+  return {
+    name: 'arrow',
+    options,
+
+    fn(args) {
+      if (isRef(element)) {
+        if (element.current != null) {
+          return arrow$1({
+            element: element.current,
+            padding
+          }).fn(args);
+        }
+
+        return {};
+      } else if (element) {
+        return arrow$1({
+          element,
+          padding
+        }).fn(args);
+      }
+
+      return {};
+    }
+
+  };
+};
+
 var getDefaultParent = function (originalTarget) {
     if (typeof document === 'undefined') {
         return null;
@@ -4895,6 +5050,313 @@ function usePrevious(value) {
   return ref.current;
 }
 
+function getDelay(value, prop, pointerType) {
+  if (pointerType && pointerType !== 'mouse') {
+    return 0;
+  }
+
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  return value == null ? void 0 : value[prop];
+}
+
+/**
+ * Adds hover event listeners that change the open state, like CSS :hover.
+ * @see https://floating-ui.com/docs/useHover
+ */
+const useHover = function (context, _temp) {
+  let {
+    enabled = true,
+    delay = 0,
+    handleClose = null,
+    mouseOnly = false,
+    restMs = 0,
+    move = true
+  } = _temp === void 0 ? {} : _temp;
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    events,
+    refs,
+    _
+  } = context;
+  const tree = useFloatingTree();
+  const parentId = useFloatingParentNodeId();
+  const handleCloseRef = useLatestRef(handleClose);
+  const delayRef = useLatestRef(delay);
+  const previousOpen = usePrevious(open);
+  const pointerTypeRef = React__namespace.useRef();
+  const timeoutRef = React__namespace.useRef();
+  const handlerRef = React__namespace.useRef();
+  const restTimeoutRef = React__namespace.useRef();
+  const blockMouseMoveRef = React__namespace.useRef(true);
+  const performedPointerEventsMutationRef = React__namespace.useRef(false);
+  const isHoverOpen = React__namespace.useCallback(() => {
+    var _dataRef$current$open;
+
+    const type = (_dataRef$current$open = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open.type;
+    return (type == null ? void 0 : type.includes('mouse')) && type !== 'mousedown';
+  }, [dataRef]);
+  React__namespace.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    function onDismiss() {
+      clearTimeout(timeoutRef.current);
+      clearTimeout(restTimeoutRef.current);
+      blockMouseMoveRef.current = true;
+    }
+
+    events.on('dismiss', onDismiss);
+    return () => {
+      events.off('dismiss', onDismiss);
+    };
+  }, [enabled, events, refs]);
+  React__namespace.useEffect(() => {
+    if (!enabled || !handleCloseRef.current) {
+      return;
+    }
+
+    function onLeave() {
+      if (isHoverOpen()) {
+        onOpenChange(false);
+      }
+    }
+
+    const html = getDocument(refs.floating.current).documentElement;
+    html.addEventListener('mouseleave', onLeave);
+    return () => {
+      html.removeEventListener('mouseleave', onLeave);
+    };
+  }, [refs, onOpenChange, enabled, handleCloseRef, dataRef, isHoverOpen]);
+  const closeWithDelay = React__namespace.useCallback(function (runElseBranch) {
+    if (runElseBranch === void 0) {
+      runElseBranch = true;
+    }
+
+    const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
+
+    if (closeDelay && !handlerRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => onOpenChange(false), closeDelay);
+    } else if (runElseBranch) {
+      clearTimeout(timeoutRef.current);
+      onOpenChange(false);
+    }
+  }, [delayRef, onOpenChange]);
+  const cleanupPointerMoveHandler = React__namespace.useCallback(() => {
+    if (handlerRef.current) {
+      getDocument(refs.floating.current).removeEventListener('pointermove', handlerRef.current);
+      handlerRef.current = undefined;
+    }
+  }, [refs]);
+  const clearPointerEvents = React__namespace.useCallback(() => {
+    getDocument(refs.floating.current).body.style.pointerEvents = '';
+    performedPointerEventsMutationRef.current = false;
+  }, [refs]); // Registering the mouse events on the reference directly to bypass React's
+  // delegation system. If the cursor was on a disabled element and then entered
+  // the reference (no gap), `mouseenter` doesn't fire in the delegation system.
+
+  React__namespace.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    function isClickLikeOpenEvent() {
+      return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
+    }
+
+    function onMouseEnter(event) {
+      clearTimeout(timeoutRef.current);
+      blockMouseMoveRef.current = false;
+
+      if (mouseOnly && pointerTypeRef.current !== 'mouse' || restMs > 0 && getDelay(delayRef.current, 'open') === 0) {
+        return;
+      }
+
+      dataRef.current.openEvent = event;
+      const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
+
+      if (openDelay) {
+        timeoutRef.current = setTimeout(() => {
+          onOpenChange(true);
+        }, openDelay);
+      } else {
+        onOpenChange(true);
+      }
+    }
+
+    function onMouseLeave(event) {
+      if (isClickLikeOpenEvent()) {
+        return;
+      }
+
+      const doc = getDocument(refs.floating.current);
+      clearTimeout(restTimeoutRef.current);
+
+      if (handleCloseRef.current) {
+        clearTimeout(timeoutRef.current);
+        handlerRef.current && doc.removeEventListener('pointermove', handlerRef.current);
+        handlerRef.current = handleCloseRef.current({ ...context,
+          tree,
+          x: event.clientX,
+          y: event.clientY,
+
+          onClose() {
+            clearPointerEvents();
+            cleanupPointerMoveHandler();
+            closeWithDelay();
+          }
+
+        });
+        doc.addEventListener('pointermove', handlerRef.current);
+        return;
+      }
+
+      closeWithDelay();
+    } // Ensure the floating element closes after scrolling even if the pointer
+    // did not move.
+    // https://github.com/floating-ui/floating-ui/discussions/1692
+
+
+    function onScrollMouseLeave(event) {
+      if (isClickLikeOpenEvent()) {
+        return;
+      }
+
+      handleCloseRef.current == null ? void 0 : handleCloseRef.current({ ...context,
+        tree,
+        x: event.clientX,
+        y: event.clientY,
+        leave: true,
+
+        onClose() {
+          clearPointerEvents();
+          cleanupPointerMoveHandler();
+          closeWithDelay();
+        }
+
+      })(event);
+    }
+
+    const floating = refs.floating.current;
+    const reference = refs.domReference.current;
+
+    if (isElement(reference)) {
+      open && reference.addEventListener('mouseleave', onScrollMouseLeave);
+      floating == null ? void 0 : floating.addEventListener('mouseleave', onScrollMouseLeave);
+      move && reference.addEventListener('mousemove', onMouseEnter, {
+        once: true
+      });
+      reference.addEventListener('mouseenter', onMouseEnter);
+      reference.addEventListener('mouseleave', onMouseLeave);
+      return () => {
+        open && reference.removeEventListener('mouseleave', onScrollMouseLeave);
+        floating == null ? void 0 : floating.removeEventListener('mouseleave', onScrollMouseLeave);
+        move && reference.removeEventListener('mousemove', onMouseEnter);
+        reference.removeEventListener('mouseenter', onMouseEnter);
+        reference.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+  }, [// Ensure the effect is re-run when the reference changes.
+  // https://github.com/floating-ui/floating-ui/issues/1833
+  _.domReference, enabled, context, mouseOnly, restMs, move, closeWithDelay, cleanupPointerMoveHandler, clearPointerEvents, onOpenChange, open, tree, refs, delayRef, handleCloseRef, dataRef]); // Block pointer-events of every element other than the reference and floating
+  // while the floating element is open and has a `handleClose` handler. Also
+  // handles nested floating elements.
+  // https://github.com/floating-ui/floating-ui/issues/1722
+
+  index(() => {
+    if (!enabled) {
+      return;
+    }
+
+    if (open && handleCloseRef.current && handleCloseRef.current.__options.blockPointerEvents && isHoverOpen()) {
+      getDocument(refs.floating.current).body.style.pointerEvents = 'none';
+      performedPointerEventsMutationRef.current = true;
+      const reference = refs.domReference.current;
+      const floating = refs.floating.current;
+
+      if (isElement(reference) && floating) {
+        var _tree$nodesRef$curren, _tree$nodesRef$curren2;
+
+        const parentFloating = tree == null ? void 0 : (_tree$nodesRef$curren = tree.nodesRef.current.find(node => node.id === parentId)) == null ? void 0 : (_tree$nodesRef$curren2 = _tree$nodesRef$curren.context) == null ? void 0 : _tree$nodesRef$curren2.refs.floating.current;
+
+        if (parentFloating) {
+          parentFloating.style.pointerEvents = '';
+        }
+
+        reference.style.pointerEvents = 'auto';
+        floating.style.pointerEvents = 'auto';
+        return () => {
+          reference.style.pointerEvents = '';
+          floating.style.pointerEvents = '';
+        };
+      }
+    }
+  }, [enabled, open, parentId, refs, tree, handleCloseRef, dataRef, isHoverOpen]);
+  index(() => {
+    if (previousOpen && !open) {
+      pointerTypeRef.current = undefined;
+      cleanupPointerMoveHandler();
+      clearPointerEvents();
+    }
+  });
+  React__namespace.useEffect(() => {
+    return () => {
+      cleanupPointerMoveHandler();
+      clearTimeout(timeoutRef.current);
+      clearTimeout(restTimeoutRef.current);
+
+      if (performedPointerEventsMutationRef.current) {
+        clearPointerEvents();
+      }
+    };
+  }, [enabled, cleanupPointerMoveHandler, clearPointerEvents]);
+
+  if (!enabled) {
+    return {};
+  }
+
+  function setPointerRef(event) {
+    pointerTypeRef.current = event.pointerType;
+  }
+
+  return {
+    reference: {
+      onPointerDown: setPointerRef,
+      onPointerEnter: setPointerRef,
+
+      onMouseMove() {
+        if (open || restMs === 0) {
+          return;
+        }
+
+        clearTimeout(restTimeoutRef.current);
+        restTimeoutRef.current = setTimeout(() => {
+          if (!blockMouseMoveRef.current) {
+            onOpenChange(true);
+          }
+        }, restMs);
+      }
+
+    },
+    floating: {
+      onMouseEnter() {
+        clearTimeout(timeoutRef.current);
+      },
+
+      onMouseLeave() {
+        closeWithDelay(false);
+      }
+
+    }
+  };
+};
+
 /**
  * Adds relevant screen reader props for a given element `role`.
  * @see https://floating-ui.com/docs/useRole
@@ -5259,6 +5721,123 @@ const useDismiss = function (_ref, _temp) {
   };
 };
 
+/**
+ * Adds focus event listeners that change the open state, like CSS :focus.
+ * @see https://floating-ui.com/docs/useFocus
+ */
+const useFocus = function (_ref, _temp) {
+  let {
+    open,
+    onOpenChange,
+    dataRef,
+    refs,
+    events
+  } = _ref;
+  let {
+    enabled = true,
+    keyboardOnly = true
+  } = _temp === void 0 ? {} : _temp;
+  const pointerTypeRef = React__namespace.useRef('');
+  const blockFocusRef = React__namespace.useRef(false);
+  const timeoutRef = React__namespace.useRef();
+  React__namespace.useEffect(() => {
+    var _doc$defaultView;
+
+    if (!enabled) {
+      return;
+    }
+
+    const doc = getDocument(refs.floating.current);
+    const win = (_doc$defaultView = doc.defaultView) != null ? _doc$defaultView : window;
+
+    function onBlur() {
+      if (!open && isHTMLElement(refs.domReference.current)) {
+        refs.domReference.current.blur();
+      }
+    }
+
+    win.addEventListener('blur', onBlur);
+    return () => {
+      win.removeEventListener('blur', onBlur);
+    };
+  }, [refs, open, enabled]);
+  React__namespace.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    function onDismiss() {
+      blockFocusRef.current = true;
+    }
+
+    events.on('dismiss', onDismiss);
+    return () => {
+      events.off('dismiss', onDismiss);
+    };
+  }, [events, enabled]);
+  React__namespace.useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  if (!enabled) {
+    return {};
+  }
+
+  return {
+    reference: {
+      onPointerDown(_ref2) {
+        let {
+          pointerType
+        } = _ref2;
+        pointerTypeRef.current = pointerType;
+        blockFocusRef.current = !!(pointerType && keyboardOnly);
+      },
+
+      onPointerLeave() {
+        blockFocusRef.current = false;
+      },
+
+      onFocus(event) {
+        var _dataRef$current$open, _refs$domReference$cu, _dataRef$current$open2;
+
+        if (blockFocusRef.current) {
+          return;
+        } // Dismiss with click should ignore the subsequent `focus` trigger, but
+        // only if the click originated inside the reference element.
+
+
+        if (event.type === 'focus' && ((_dataRef$current$open = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open.type) === 'mousedown' && (_refs$domReference$cu = refs.domReference.current) != null && _refs$domReference$cu.contains((_dataRef$current$open2 = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open2.target)) {
+          return;
+        }
+
+        dataRef.current.openEvent = event.nativeEvent;
+        onOpenChange(true);
+      },
+
+      onBlur(event) {
+        const target = event.relatedTarget; // Wait for the window blur listener to fire.
+
+        timeoutRef.current = setTimeout(() => {
+          var _refs$floating$curren, _refs$domReference$cu2;
+
+          // When focusing the reference element (e.g. regular click), then
+          // clicking into the floating element, prevent it from hiding.
+          // Note: it must be focusable, e.g. `tabindex="-1"`.
+          if ((_refs$floating$curren = refs.floating.current) != null && _refs$floating$curren.contains(target) || (_refs$domReference$cu2 = refs.domReference.current) != null && _refs$domReference$cu2.contains(target)) {
+            return;
+          }
+
+          blockFocusRef.current = false;
+          onOpenChange(false);
+        });
+      }
+
+    }
+  };
+};
+
 const ARROW_UP = 'ArrowUp';
 const ARROW_DOWN = 'ArrowDown';
 const ARROW_LEFT = 'ArrowLeft';
@@ -34227,8 +34806,8 @@ DatePicker.defaultProps = {
   onClear: function onClear() {}
 };
 
-var css$z = ".HierarchyItem_module_root__d7b2e7cd {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  flex: 1;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.25rem;\n  min-height: 2rem;\n  height: auto;\n  padding: 0.25rem;\n  cursor: pointer;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component1], .HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component3] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component1] .HierarchyItem_module_icon__d7b2e7cd, .HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component3] .HierarchyItem_module_icon__d7b2e7cd {\n  transform: rotate(-90deg);\n  width: 1rem;\n  height: 1rem;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component2] {\n  flex: 1 1 auto;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component2] .HierarchyItem_module_title__d7b2e7cd {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd:hover {\n  background: var(--background);\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd:hover .HierarchyItem_module_icon__d7b2e7cd,\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd:hover .HierarchyItem_module_title__d7b2e7cd,\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd:hover .HierarchyItem_module_title__d7b2e7cd svg {\n  color: var(--highlight);\n  fill: var(--highlight);\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd {\n  display: none;\n  flex: 1 0 auto;\n  padding: 0px 0rem 0px 0.25rem;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd > [data-elem=component1] {\n  flex: 0 0 1.6rem;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd > [data-elem=component1] .HierarchyItem_module_tail__d7b2e7cd {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  width: 1.6rem;\n  height: 100%;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd > [data-elem=component1] .HierarchyItem_module_tail__d7b2e7cd::after {\n  content: \"\";\n  display: block;\n  margin: auto;\n  width: 1px;\n  flex: 1;\n  background: var(--grey1);\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd > [data-elem=component2] {\n  flex: 1 0 auto;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd > [data-elem=component2] .HierarchyItem_module_children__d7b2e7cd {\n  flex: 1 0 auto;\n}\n.HierarchyItem_module_root__d7b2e7cd.HierarchyItem_module_open__d7b2e7cd > .HierarchyItem_module_header__d7b2e7cd .HierarchyItem_module_icon__d7b2e7cd {\n  transform: none;\n}\n.HierarchyItem_module_root__d7b2e7cd.HierarchyItem_module_open__d7b2e7cd > .HierarchyItem_module_body__d7b2e7cd {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.25rem;\n  height: auto;\n}";
-var modules_6d03d164 = {"root":"HierarchyItem_module_root__d7b2e7cd","header":"HierarchyItem_module_header__d7b2e7cd","icon":"HierarchyItem_module_icon__d7b2e7cd","title":"HierarchyItem_module_title__d7b2e7cd","body":"HierarchyItem_module_body__d7b2e7cd","tail":"HierarchyItem_module_tail__d7b2e7cd","children":"HierarchyItem_module_children__d7b2e7cd","open":"HierarchyItem_module_open__d7b2e7cd"};
+var css$z = ".HierarchyItem_module_root__c993ecd0 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  flex: 1;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.25rem;\n  min-height: 2rem;\n  height: auto;\n  padding: 0rem 0.5rem;\n  cursor: pointer;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component1], .HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component3] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component1] .HierarchyItem_module_expand__c993ecd0, .HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component3] .HierarchyItem_module_expand__c993ecd0 {\n  padding: 0;\n  height: auto;\n  width: 1rem;\n  height: 1rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component1] .HierarchyItem_module_expand__c993ecd0 .HierarchyItem_module_icon__c993ecd0, .HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component3] .HierarchyItem_module_expand__c993ecd0 .HierarchyItem_module_icon__c993ecd0 {\n  transform: rotate(-90deg);\n  width: 1rem;\n  height: 1rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component2] {\n  flex: 1 1 auto;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component2] .HierarchyItem_module_title__c993ecd0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: auto;\n  padding: 0.25rem 0rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover {\n  background: var(--background);\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover .HierarchyItem_module_icon__c993ecd0,\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover .HierarchyItem_module_title__c993ecd0,\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover .HierarchyItem_module_title__c993ecd0 svg {\n  color: var(--highlight);\n  fill: var(--highlight);\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 {\n  display: none;\n  flex: 1 0 auto;\n  padding: 0px 0rem 0px 0.25rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component1] {\n  flex: 0 0 1.6rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component1] .HierarchyItem_module_tail__c993ecd0 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  width: 1.6rem;\n  height: 100%;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component1] .HierarchyItem_module_tail__c993ecd0::after {\n  content: \"\";\n  display: block;\n  margin: auto;\n  width: 1px;\n  flex: 1;\n  background: var(--grey1);\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component2] {\n  flex: 1 0 auto;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component2] .HierarchyItem_module_children__c993ecd0 {\n  flex: 1 0 auto;\n}\n.HierarchyItem_module_root__c993ecd0.HierarchyItem_module_open__c993ecd0 > .HierarchyItem_module_header__c993ecd0 .HierarchyItem_module_expand__c993ecd0 .HierarchyItem_module_icon__c993ecd0 {\n  transform: none;\n}\n.HierarchyItem_module_root__c993ecd0.HierarchyItem_module_open__c993ecd0 > .HierarchyItem_module_body__c993ecd0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.25rem;\n  height: auto;\n}";
+var modules_6d03d164 = {"root":"HierarchyItem_module_root__c993ecd0","header":"HierarchyItem_module_header__c993ecd0","expand":"HierarchyItem_module_expand__c993ecd0","icon":"HierarchyItem_module_icon__c993ecd0","title":"HierarchyItem_module_title__c993ecd0","body":"HierarchyItem_module_body__c993ecd0","tail":"HierarchyItem_module_tail__c993ecd0","children":"HierarchyItem_module_children__c993ecd0","open":"HierarchyItem_module_open__c993ecd0"};
 n(css$z,{});
 
 var HierarchyItem = function HierarchyItem(props) {
@@ -34236,37 +34815,64 @@ var HierarchyItem = function HierarchyItem(props) {
     iconPlacement = props.iconPlacement,
     title = props.title,
     children = props.children,
-    _onClick = props.onClick;
+    _onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick;
   var _useState = React.useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  var icon = /*#__PURE__*/jsxRuntime.jsx(Button, {
+    className: modules_6d03d164.expand,
+    size: "auto",
+    variant: "text",
+    color: "default",
+    onClick: function onClick() {
+      setOpen(function (prevState) {
+        var newState = !prevState;
+        _onClick === null || _onClick === void 0 ? void 0 : _onClick(newState);
+        onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(newState);
+        return newState;
+      });
+    },
+    leftComponent: function leftComponent() {
+      return /*#__PURE__*/jsxRuntime.jsx(Caret, {
+        className: modules_6d03d164.icon
+      });
+    }
+  });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: classes(modules_6d03d164.root, open ? modules_6d03d164.open : ''),
     children: [/*#__PURE__*/jsxRuntime.jsx(BaseCell, {
       flexible: true,
       size: "auto",
-      rootDOM: "button",
       className: modules_6d03d164.header,
-      attrs: {
-        onClick: function onClick() {
-          setOpen(function (prevState) {
-            var newState = !prevState;
-            _onClick(newState);
-            return newState;
-          });
-        }
-      },
-      component1: iconPlacement === 'left' && /*#__PURE__*/jsxRuntime.jsx(Caret, {
-        className: modules_6d03d164.icon
-      }),
-      component2: /*#__PURE__*/jsxRuntime.jsx("span", {
+      component1: iconPlacement === 'left' && icon,
+      component2: /*#__PURE__*/jsxRuntime.jsx(Button, {
         className: modules_6d03d164.title,
-        children: title
+        flexible: true,
+        size: "auto",
+        variant: "text",
+        color: "default",
+        onClick: function onClick(event) {
+          var detail = event.detail;
+
+          // single click
+          if (detail === 1) {
+            _onClick === null || _onClick === void 0 ? void 0 : _onClick(open);
+            // double click
+          } else if (detail === 2) {
+            setOpen(function (prevState) {
+              var newState = !prevState;
+              onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(newState);
+              return newState;
+            });
+          }
+        },
+        leftComponent: function leftComponent() {
+          return title;
+        }
       }),
-      component3: iconPlacement === 'right' && /*#__PURE__*/jsxRuntime.jsx(Caret, {
-        className: modules_6d03d164.icon
-      })
+      component3: iconPlacement === 'right' && icon
     }), /*#__PURE__*/jsxRuntime.jsx(BaseCell, {
       size: "auto",
       className: modules_6d03d164.body,
@@ -34324,6 +34930,7 @@ var HierarchyBrowser = function HierarchyBrowser(props) {
   var className = props.className,
     metadata = props.metadata,
     onItemClick = props.onItemClick,
+    onItemDoubleClick = props.onItemDoubleClick,
     minWidth = props.minWidth,
     maxWidth = props.maxWidth,
     borderSize = props.borderSize,
@@ -34345,6 +34952,11 @@ var HierarchyBrowser = function HierarchyBrowser(props) {
       onItemClick(item, pathString, open);
     };
   };
+  var handleItemDoubleClick = function handleItemDoubleClick(item, pathString) {
+    return function (open) {
+      onItemDoubleClick(item, pathString, open);
+    };
+  };
   var renderTree = function renderTree(data) {
     var _data$list$map, _data$list, _data$list$map2;
     var pathString = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -34357,7 +34969,8 @@ var HierarchyBrowser = function HierarchyBrowser(props) {
         item: data
       }),
       iconPlacement: hasChildren ? 'left' : 'none',
-      onClick: handleItemClick(data, pathString)
+      onClick: handleItemClick(data, pathString),
+      onDoubleClick: handleItemDoubleClick(data, pathString)
     }, setItemProps(data, pathString)), {}, {
       children: hasChildren && ((_data$list$map = (_data$list = data.list) === null || _data$list === void 0 ? void 0 : (_data$list$map2 = _data$list.map) === null || _data$list$map2 === void 0 ? void 0 : _data$list$map2.call(_data$list, function (item, idx) {
         return renderTree(item, "".concat(pathString).concat(pathString.length > 0 ? '.' : '', "list[").concat(idx, "]"));
@@ -34387,6 +35000,7 @@ HierarchyBrowser.propTypes = {
     list: propTypes$1.exports.array
   }),
   onItemClick: propTypes$1.exports.func,
+  onItemDoubleClick: propTypes$1.exports.func,
   borderSize: propTypes$1.exports.number,
   minWidth: propTypes$1.exports.number,
   maxWidth: propTypes$1.exports.number,
@@ -34398,6 +35012,7 @@ HierarchyBrowser.defaultProps = {
   className: '',
   metadata: {},
   onItemClick: function onItemClick() {},
+  onItemDoubleClick: function onItemDoubleClick() {},
   borderSize: 4,
   minWidth: 220,
   maxWidth: null,
@@ -36175,14 +36790,15 @@ var TableChipsSkeleton = function TableChipsSkeleton() {
   });
 };
 
-var css$e = ".TableChips_module_root__ed8402e9[data-elem=base-cell] {\n  padding: 0.5rem 1.5rem;\n  width: 100%;\n  background: var(--grey8);\n  border-radius: 0.25rem 0.25rem 0 0;\n}\n.TableChips_module_root__ed8402e9[data-elem=base-cell] > [data-elem=component1] .TableChips_module_back__ed8402e9 {\n  height: 2rem;\n  width: 2rem;\n}\n.TableChips_module_root__ed8402e9[data-elem=base-cell] > [data-elem=component1] .TableChips_module_back__ed8402e9 [data-elem=component1] .TableChips_module_icon__ed8402e9 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--white);\n}\n.TableChips_module_root__ed8402e9[data-elem=base-cell] > [data-elem=component2] {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n  overflow-x: auto;\n  flex: 1;\n}\n.TableChips_module_root__ed8402e9[data-elem=base-cell] > [data-elem=component2]::-webkit-scrollbar {\n  display: none;\n}\n.TableChips_module_root__ed8402e9[data-elem=base-cell] > [data-elem=component2] .TableChips_module_chip__ed8402e9 .TableChips_module_chipIcon__ed8402e9 {\n  width: 1rem;\n  height: 1rem;\n}";
-var modules_016d9b3e = {"root":"TableChips_module_root__ed8402e9","back":"TableChips_module_back__ed8402e9","icon":"TableChips_module_icon__ed8402e9","chip":"TableChips_module_chip__ed8402e9","chip-icon":"TableChips_module_chipIcon__ed8402e9"};
+var css$e = ".TableChips_module_root__dfc60d0e[data-elem=base-cell] {\n  padding: 0.5rem 1.5rem;\n  width: 100%;\n  background: var(--grey8);\n  border-radius: 0.25rem 0.25rem 0 0;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component1] .TableChips_module_back__dfc60d0e {\n  height: 2rem;\n  width: 2rem;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component1] .TableChips_module_back__dfc60d0e [data-elem=component1] .TableChips_module_icon__dfc60d0e {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--white);\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component2] {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n  overflow-x: auto;\n  flex: 1;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component2]::-webkit-scrollbar {\n  display: none;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component2] .TableChips_module_chip__dfc60d0e .TableChips_module_chipIcon__dfc60d0e {\n  width: 1rem;\n  height: 1rem;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component3] {\n  height: 100%;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component3] .TableChips_module_clear__dfc60d0e {\n  height: 100%;\n}";
+var modules_016d9b3e = {"root":"TableChips_module_root__dfc60d0e","back":"TableChips_module_back__dfc60d0e","icon":"TableChips_module_icon__dfc60d0e","chip":"TableChips_module_chip__dfc60d0e","chip-icon":"TableChips_module_chipIcon__dfc60d0e","clear":"TableChips_module_clear__dfc60d0e"};
 n(css$e,{});
 
 var TableChips = function TableChips(props) {
   var _chips$filter;
   var showBack = props.showBack,
     onBack = props.onBack,
+    onClear = props.onClear,
     chips = props.chips,
     className = props.className,
     style = props.style,
@@ -36230,7 +36846,20 @@ var TableChips = function TableChips(props) {
         },
         onClick: onBack
       }),
-      component2: (chipsDOM === null || chipsDOM === void 0 ? void 0 : chipsDOM.length) > 0 ? chipsDOM : null
+      component2: (chipsDOM === null || chipsDOM === void 0 ? void 0 : chipsDOM.length) > 0 ? chipsDOM : null,
+      component3: (chipsDOM === null || chipsDOM === void 0 ? void 0 : chipsDOM.length) > 0 ? /*#__PURE__*/jsxRuntime.jsx(Button, {
+        size: "auto",
+        variant: "outlined",
+        color: "danger",
+        title: "Clear All",
+        className: modules_016d9b3e.clear,
+        leftComponent: function leftComponent() {
+          return /*#__PURE__*/jsxRuntime.jsx(Trash, {
+            className: modules_016d9b3e.icon
+          });
+        },
+        onClick: onClear
+      }) : ''
     });
   }
   return null;
@@ -36241,6 +36870,7 @@ TableChips.propTypes = {
   style: propTypes$1.exports.object,
   showBack: propTypes$1.exports.bool,
   onBack: propTypes$1.exports.func,
+  onClear: propTypes$1.exports.func,
   chips: propTypes$1.exports.arrayOf(propTypes$1.exports.shape({
     key: propTypes$1.exports.string,
     icon: propTypes$1.exports.func,
@@ -36256,6 +36886,7 @@ TableChips.defaultProps = {
   style: {},
   showBack: false,
   onBack: function onBack() {},
+  onClear: function onClear() {},
   chips: [],
   loading: null
 };
@@ -36357,8 +36988,8 @@ Popover.defaultProps = {
   onClose: function onClose() {}
 };
 
-var css$c = ".Columns_module_popover__680b100e {\n  height: 100%;\n}\n\n.Columns_module_root__680b100e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 1rem;\n  position: relative;\n  height: 100%;\n  max-width: 100%;\n}\n.Columns_module_root__680b100e .Columns_module_header__680b100e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 1.5rem;\n  width: 100%;\n  padding: 0;\n  height: auto;\n}\n.Columns_module_root__680b100e .Columns_module_header__680b100e > [data-elem=component1] {\n  font-weight: 500;\n}\n.Columns_module_root__680b100e .Columns_module_header__680b100e > [data-elem=component2] .Columns_module_search__680b100e {\n  width: 100%;\n}\n.Columns_module_root__680b100e .Columns_module_close__680b100e {\n  position: absolute;\n  top: -1rem;\n  right: -1rem;\n}\n.Columns_module_root__680b100e .Columns_module_close__680b100e .Columns_module_icon__680b100e {\n  width: 1rem;\n  height: 1rem;\n}\n.Columns_module_root__680b100e .Columns_module_body__680b100e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.5rem;\n  overflow-y: auto;\n  flex: 1 1 auto;\n}\n.Columns_module_root__680b100e .Columns_module_body__680b100e .Columns_module_item__680b100e {\n  height: 3rem;\n}\n.Columns_module_root__680b100e .Columns_module_body__680b100e .Columns_module_item__680b100e > [data-elem=title] {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.Columns_module_root__680b100e .Columns_module_footer__680b100e .Columns_module_expand__680b100e .Columns_module_icon__680b100e {\n  width: 1.5rem;\n  height: 1.5rem;\n  transform: rotate(180deg);\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_header__680b100e {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding-right: 2rem;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_header__680b100e > [data-elem=component2] {\n  flex: 1;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_close__680b100e {\n  top: -0.25rem;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_body__680b100e {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  flex: 0 1 auto;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_body__680b100e .Columns_module_item__680b100e {\n  overflow: hidden;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_footer__680b100e {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin-top: auto;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_footer__680b100e .Columns_module_expand__680b100e .Columns_module_icon__680b100e {\n  transform: rotate(0deg);\n}";
-var modules_48c02c99 = {"popover":"Columns_module_popover__680b100e","root":"Columns_module_root__680b100e","header":"Columns_module_header__680b100e","search":"Columns_module_search__680b100e","close":"Columns_module_close__680b100e","icon":"Columns_module_icon__680b100e","body":"Columns_module_body__680b100e","item":"Columns_module_item__680b100e","footer":"Columns_module_footer__680b100e","expand":"Columns_module_expand__680b100e","expanded":"Columns_module_expanded__680b100e"};
+var css$c = ".Columns_module_popover__078e5868 {\n  height: 32rem;\n  padding: 0;\n  overflow: hidden;\n}\n\n.Columns_module_root__078e5868 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  position: relative;\n  height: 100%;\n  min-width: 18rem;\n  max-width: 100%;\n}\n.Columns_module_root__078e5868 .Columns_module_header__078e5868 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid var(--grey4);\n  padding: 0.75rem 2.5rem;\n}\n.Columns_module_root__078e5868 .Columns_module_header__078e5868 > [data-elem=component1] {\n  font-weight: 500;\n}\n.Columns_module_root__078e5868 .Columns_module_header__078e5868 > [data-elem=component2] .Columns_module_close__078e5868 {\n  height: auto;\n  padding: 0;\n}\n.Columns_module_root__078e5868 .Columns_module_header__078e5868 > [data-elem=component2] .Columns_module_close__078e5868 .Columns_module_icon__078e5868 {\n  width: 1rem;\n  height: 1rem;\n}\n.Columns_module_root__078e5868 .Columns_module_body__078e5868 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.5rem;\n  padding: 0.75rem 2.5rem;\n  max-height: 28rem;\n  overflow-y: auto;\n  flex: 1 1 auto;\n}\n.Columns_module_root__078e5868 .Columns_module_body__078e5868 .Columns_module_search__078e5868 {\n  position: -webkit-sticky;\n  position: sticky;\n  top: 0;\n}\n.Columns_module_root__078e5868 .Columns_module_body__078e5868 .Columns_module_columns__078e5868 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.5rem;\n  overflow-y: auto;\n}\n.Columns_module_root__078e5868 .Columns_module_body__078e5868 .Columns_module_columns__078e5868 .Columns_module_item__078e5868 {\n  height: 3rem;\n}\n.Columns_module_root__078e5868 .Columns_module_body__078e5868 .Columns_module_columns__078e5868 .Columns_module_item__078e5868 > [data-elem=title] {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.Columns_module_root__078e5868 .Columns_module_footer__078e5868 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  height: auto;\n  margin-top: auto;\n  padding: 0.5rem 2.5rem;\n  border-top: 1px solid var(--grey4);\n}\n.Columns_module_root__078e5868 .Columns_module_footer__078e5868 button.Columns_module_expand__078e5868 {\n  height: auto;\n  background: var(--grey8);\n  border: 1px solid var(--grey4);\n  color: var(--black);\n}\n.Columns_module_root__078e5868 .Columns_module_footer__078e5868 button.Columns_module_expand__078e5868 .Columns_module_icon__078e5868 {\n  width: 1.5rem;\n  height: 1.5rem;\n  transform: rotate(180deg);\n}\n.Columns_module_root__078e5868.Columns_module_expanded__078e5868 .Columns_module_body__078e5868 {\n  flex: 0 1 auto;\n}\n.Columns_module_root__078e5868.Columns_module_expanded__078e5868 .Columns_module_body__078e5868 .Columns_module_columns__078e5868 {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n}\n.Columns_module_root__078e5868.Columns_module_expanded__078e5868 .Columns_module_body__078e5868 .Columns_module_columns__078e5868 .Columns_module_item__078e5868 {\n  overflow: hidden;\n}\n.Columns_module_root__078e5868.Columns_module_expanded__078e5868 .Columns_module_footer__078e5868 button.Columns_module_expand__078e5868 .Columns_module_icon__078e5868 {\n  transform: none;\n}";
+var modules_48c02c99 = {"popover":"Columns_module_popover__078e5868","root":"Columns_module_root__078e5868","header":"Columns_module_header__078e5868","close":"Columns_module_close__078e5868","icon":"Columns_module_icon__078e5868","body":"Columns_module_body__078e5868","search":"Columns_module_search__078e5868","columns":"Columns_module_columns__078e5868","item":"Columns_module_item__078e5868","footer":"Columns_module_footer__078e5868","expand":"Columns_module_expand__078e5868","expanded":"Columns_module_expanded__078e5868"};
 n(css$c,{});
 
 var Columns = function Columns(props) {
@@ -36387,61 +37018,68 @@ var Columns = function Columns(props) {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classes(modules_48c02c99.root, expanded ? modules_48c02c99.expanded : ''),
       children: [/*#__PURE__*/jsxRuntime.jsx(BaseCell, {
+        size: "auto",
         className: modules_48c02c99.header,
         component1: "Columns",
-        component2: /*#__PURE__*/jsxRuntime.jsx(TextField, {
+        component2: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          className: modules_48c02c99.close,
+          size: "auto",
+          radius: "round",
+          variant: "text",
+          leftComponent: function leftComponent() {
+            return /*#__PURE__*/jsxRuntime.jsx(Cross$1, {
+              className: modules_48c02c99.icon
+            });
+          },
+          onClick: function onClick() {
+            setOpen(false);
+          }
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: modules_48c02c99.body,
+        children: [/*#__PURE__*/jsxRuntime.jsx(TextField, {
           className: modules_48c02c99.search,
-          placeholder: "Search Column name",
+          placeholder: "Search",
           value: search,
           onChange: function onChange(e) {
             var _inputHelper = inputHelper(e),
               fieldValue = _inputHelper.fieldValue;
             setSearch(fieldValue);
           }
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-        className: modules_48c02c99.close,
-        size: "auto",
-        radius: "round",
-        variant: "text",
-        leftComponent: function leftComponent() {
-          return /*#__PURE__*/jsxRuntime.jsx(Cross$1, {
-            className: modules_48c02c99.icon
-          });
-        },
-        onClick: function onClick() {
-          setOpen(false);
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: modules_48c02c99.body,
-        children: columns === null || columns === void 0 ? void 0 : columns.filter(function (col) {
-          var _col$id;
-          return (col === null || col === void 0 ? void 0 : (_col$id = col.id) === null || _col$id === void 0 ? void 0 : _col$id.toLowerCase().indexOf(search === null || search === void 0 ? void 0 : search.toLowerCase())) !== -1 && search != null && search !== '' || search == null || search === '';
-        }).map(function (col) {
-          var selected = [null, false, undefined].includes(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns[col === null || col === void 0 ? void 0 : col.id]);
-          return /*#__PURE__*/jsxRuntime.jsx(DropdownItem, {
-            className: modules_48c02c99.item,
-            selected: selected,
-            title: col.title,
-            variant: "checkbox",
-            onClick: function onClick() {
-              if (selected) {
-                setHiddenColumns(_objectSpread2(_objectSpread2({}, hiddenColumns), {}, _defineProperty$1({}, col.id, true)));
-              } else {
-                setHiddenColumns(_objectSpread2(_objectSpread2({}, hiddenColumns), {}, _defineProperty$1({}, col.id, false)));
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: modules_48c02c99.columns,
+          children: columns === null || columns === void 0 ? void 0 : columns.filter(function (col) {
+            var _col$id;
+            return (col === null || col === void 0 ? void 0 : (_col$id = col.id) === null || _col$id === void 0 ? void 0 : _col$id.toLowerCase().indexOf(search === null || search === void 0 ? void 0 : search.toLowerCase())) !== -1 && search != null && search !== '' || search == null || search === '';
+          }).map(function (col) {
+            var selected = [null, false, undefined].includes(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns[col === null || col === void 0 ? void 0 : col.id]);
+            return /*#__PURE__*/jsxRuntime.jsx(DropdownItem, {
+              className: modules_48c02c99.item,
+              selected: selected,
+              title: col.title,
+              variant: "checkbox",
+              onClick: function onClick() {
+                if (selected) {
+                  setHiddenColumns(_objectSpread2(_objectSpread2({}, hiddenColumns), {}, _defineProperty$1({}, col.id, true)));
+                } else {
+                  setHiddenColumns(_objectSpread2(_objectSpread2({}, hiddenColumns), {}, _defineProperty$1({}, col.id, false)));
+                }
               }
-            }
-          }, col.id);
-        })
+            }, col.id);
+          })
+        })]
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: modules_48c02c99.footer,
-        children: /*#__PURE__*/jsxRuntime.jsx(Chip, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
           className: modules_48c02c99.expand,
-          size: "sm",
-          radius: "ellipse",
           color: "default",
           title: expanded ? 'See Less' : 'See More',
-          rightComponent: function rightComponent() {
+          rightComponent: !expanded && function () {
+            return /*#__PURE__*/jsxRuntime.jsx(AngleDouble, {
+              className: modules_48c02c99.icon
+            });
+          },
+          leftComponent: expanded && function () {
             return /*#__PURE__*/jsxRuntime.jsx(AngleDouble, {
               className: modules_48c02c99.icon
             });
@@ -36457,12 +37095,12 @@ var Columns = function Columns(props) {
   });
 };
 
-var css$b = ".TableFilters_module_root__8fb9adbb[data-elem=base-cell] {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-x: auto;\n  padding: 0.5rem;\n  gap: 1.25rem;\n  width: 100%;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell]::-webkit-scrollbar {\n  display: none;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_icon__8fb9adbb {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_iconButton__8fb9adbb {\n  padding: 0rem;\n  height: 100%;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem*=component] {\n  height: 100%;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_left__8fb9adbb,\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_center__8fb9adbb,\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_right__8fb9adbb {\n  height: 100%;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__8fb9adbb {\n  gap: 1rem;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__8fb9adbb [data-elem=left] {\n  gap: 1rem;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__8fb9adbb .TableFilters_module_filterValue__8fb9adbb {\n  color: var(--white);\n  background: var(--highlight);\n  padding: 0.125rem 0.5rem;\n  border-radius: 50%;\n  font-size: 0.813rem;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component2] {\n  flex: 1;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__8fb9adbb {\n  width: 100%;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__8fb9adbb [data-elem=base-cell] {\n  background: var(--grey7);\n  border-color: var(--grey3);\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__8fb9adbb .TableFilters_module_icon__8fb9adbb {\n  width: 1.25rem;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_right__8fb9adbb {\n  width: auto;\n  padding: 0;\n  min-width: 0rem;\n  gap: 2.5rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_right__8fb9adbb > [data-elem*=component] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}";
-var modules_a0fe63f9 = {"root":"TableFilters_module_root__8fb9adbb","icon":"TableFilters_module_icon__8fb9adbb","icon-button":"TableFilters_module_iconButton__8fb9adbb","left":"TableFilters_module_left__8fb9adbb","center":"TableFilters_module_center__8fb9adbb","right":"TableFilters_module_right__8fb9adbb","filter-value":"TableFilters_module_filterValue__8fb9adbb"};
+var css$b = ".TableFilters_module_root__3c1e35fb[data-elem=base-cell] {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-x: auto;\n  padding: 0.5rem;\n  gap: 1.25rem;\n  width: 100%;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell]::-webkit-scrollbar {\n  display: none;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_icon__3c1e35fb {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] button.TableFilters_module_iconButton__3c1e35fb {\n  height: 100%;\n  background: var(--grey8);\n  border: 1px solid var(--grey4);\n  color: var(--black);\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem*=component] {\n  height: 100%;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_left__3c1e35fb,\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_center__3c1e35fb,\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_right__3c1e35fb {\n  height: 100%;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__3c1e35fb {\n  gap: 1rem;\n  background: var(--grey8);\n  border: 1px solid var(--grey4);\n  color: var(--black);\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__3c1e35fb [data-elem=left] {\n  gap: 1rem;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__3c1e35fb .TableFilters_module_icon__3c1e35fb {\n  fill: var(--black);\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__3c1e35fb .TableFilters_module_filterValue__3c1e35fb {\n  color: var(--white);\n  background: var(--highlight);\n  padding: 0.125rem 0.5rem;\n  border-radius: 50%;\n  font-size: 0.813rem;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component2] {\n  flex: 1;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__3c1e35fb {\n  width: 100%;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__3c1e35fb [data-elem=base-cell] {\n  border-color: var(--grey4);\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__3c1e35fb .TableFilters_module_icon__3c1e35fb {\n  width: 1.25rem;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_right__3c1e35fb {\n  width: auto;\n  padding: 0;\n  min-width: 0rem;\n  gap: 0.5rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_right__3c1e35fb > [data-elem*=component] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n}";
+var modules_a0fe63f9 = {"root":"TableFilters_module_root__3c1e35fb","icon":"TableFilters_module_icon__3c1e35fb","icon-button":"TableFilters_module_iconButton__3c1e35fb","left":"TableFilters_module_left__3c1e35fb","center":"TableFilters_module_center__3c1e35fb","right":"TableFilters_module_right__3c1e35fb","filter-value":"TableFilters_module_filterValue__3c1e35fb"};
 n(css$b,{});
 
-var css$a = ".Skeleton_module_root__d0937f9d[data-elem=base-cell] {\n  width: 100%;\n  gap: 1.25rem;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component1] {\n  flex: 1;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component2] {\n  flex: 6;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component3] {\n  flex: 1;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] {\n  padding: 0;\n  align-items: flex-start;\n  height: auto;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] > [data-elem*=component] {\n  flex: 1;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] > [data-elem*=component] > [data-elem=skeleton] {\n  height: 1.5rem;\n}";
-var modules_37a5ff73 = {"root":"Skeleton_module_root__d0937f9d"};
+var css$a = ".Skeleton_module_root__bdc934d4[data-elem=base-cell] {\n  width: 100%;\n  gap: 1.25rem;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component1] {\n  flex: 1;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component2] {\n  flex: 6;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component3] {\n  flex: 3;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] {\n  padding: 0;\n  align-items: flex-start;\n  height: auto;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] > [data-elem*=component] {\n  flex: 1;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] > [data-elem*=component] > [data-elem=skeleton] {\n  height: 1.5rem;\n}";
+var modules_37a5ff73 = {"root":"Skeleton_module_root__bdc934d4"};
 n(css$a,{});
 
 var TableFiltersSkeleton = function TableFiltersSkeleton() {
@@ -36476,16 +37114,15 @@ var TableFiltersSkeleton = function TableFiltersSkeleton() {
       className: modules_37a5ff73.search
     }),
     component3: /*#__PURE__*/jsxRuntime.jsx(BaseCell, {
+      flexible: true,
+      size: "auto",
       component1: /*#__PURE__*/jsxRuntime.jsx(Skeleton, {
-        variant: "circle",
         className: modules_37a5ff73.columns
       }),
       component2: /*#__PURE__*/jsxRuntime.jsx(Skeleton, {
-        variant: "circle",
         className: modules_37a5ff73.refresh
       }),
       component3: /*#__PURE__*/jsxRuntime.jsx(Skeleton, {
-        variant: "circle",
         className: modules_37a5ff73.settings
       })
     })
@@ -36566,12 +37203,13 @@ var TableFilters = function TableFilters(props) {
           },
           size: "auto",
           className: modules_a0fe63f9['icon-button'],
-          variant: "text",
+          color: "default",
           leftComponent: function leftComponent() {
             return /*#__PURE__*/jsxRuntime.jsx(Columns$1, {
               className: modules_a0fe63f9.icon
             });
           },
+          title: "Columns",
           onClick: function onClick() {
             setOpenColumns(function (prev) {
               return !prev;
@@ -36589,7 +37227,8 @@ var TableFilters = function TableFilters(props) {
       component2: !disabledRefresh && /*#__PURE__*/jsxRuntime.jsx(Button, {
         size: "auto",
         className: modules_a0fe63f9['icon-button'],
-        variant: "text",
+        color: "default",
+        title: "Refresh",
         onClick: onRefresh,
         leftComponent: function leftComponent() {
           return /*#__PURE__*/jsxRuntime.jsx(Refresh, {
@@ -36600,9 +37239,10 @@ var TableFilters = function TableFilters(props) {
       component3: !disabledSettings && /*#__PURE__*/jsxRuntime.jsx(Button, {
         size: "auto",
         className: modules_a0fe63f9['icon-button'],
-        variant: "text",
+        color: "default",
+        title: "Settings",
         leftComponent: function leftComponent() {
-          return /*#__PURE__*/jsxRuntime.jsx(Nut, {
+          return /*#__PURE__*/jsxRuntime.jsx(Settings, {
             className: modules_a0fe63f9.icon
           });
         }
@@ -36620,7 +37260,13 @@ TableFilters.propTypes = {
   filterValue: propTypes$1.exports.shape({
     applied: propTypes$1.exports.number
   }),
-  loading: propTypes$1.exports.bool
+  loading: propTypes$1.exports.bool,
+  disabledFilterOptions: propTypes$1.exports.shape({
+    filterButton: propTypes$1.exports.bool,
+    refresh: propTypes$1.exports.bool,
+    columnFilter: propTypes$1.exports.bool,
+    settings: propTypes$1.exports.bool
+  })
 };
 TableFilters.defaultProps = {
   className: '',
@@ -36631,7 +37277,13 @@ TableFilters.defaultProps = {
   filterValue: {
     applied: null
   },
-  loading: null
+  loading: null,
+  disabledFilterOptions: {
+    filterButton: false,
+    refresh: false,
+    columnFilter: false,
+    settings: false
+  }
 };
 
 var css$9 = ".Table_module_root__d17cb64f {\n  position: relative;\n  border-style: solid;\n  border-color: var(--grey4);\n  border-width: 1px 1px 0px 1px;\n  border-radius: 0.25rem;\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.Table_module_root__d17cb64f .Table_module_table__d17cb64f {\n  height: calc(100% - 6rem);\n  padding-bottom: 3.5rem;\n}\n.Table_module_root__d17cb64f .Table_module_pagination__d17cb64f {\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.Table_module_root__d17cb64f .Table_module_pagination__d17cb64f.Table_module_floating__d17cb64f {\n  bottom: 1rem;\n}\n.Table_module_root__d17cb64f .Table_module_chips__d17cb64f,\n.Table_module_root__d17cb64f .Table_module_filters__d17cb64f,\n.Table_module_root__d17cb64f .Table_module_table__d17cb64f > [data-elem=table-header] {\n  position: -webkit-sticky;\n  position: sticky;\n  z-index: 1;\n  top: 0;\n}";
@@ -36816,17 +37468,14 @@ Table.defaultProps = {
   }
 };
 
-var css$8 = ".Tabs_module_root__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.Tabs_module_tabView__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 {\n  cursor: pointer;\n  margin-right: 0.25rem;\n  padding: 0.5rem 0rem 0.5rem 0.5rem;\n  text-align: left;\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--dark-grey);\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--dark-grey);\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_saperator__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_saperator__df3be7a0 {\n  border-right: 0.031rem solid var(--grey3);\n  border-radius: 0.625rem;\n  height: 1.438rem;\n  margin: 0rem 0rem 0rem 1rem;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--dark-grey);\n}\n.Tabs_module_tabView__df3be7a0:hover, .Tabs_module_tabViewSelected__df3be7a0:hover {\n  background-color: var(--background);\n  border-radius: 0.25rem;\n  color: var(--highlight);\n}\n.Tabs_module_tabView__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--highlight);\n}\n.Tabs_module_tabView__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_saperator__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_saperator__df3be7a0 {\n  border-right: 0.031rem solid var(--highlight);\n  border-radius: 0.625rem;\n  height: 1.438rem;\n  margin: 0rem 0rem 0rem 1rem;\n}\n.Tabs_module_tabView__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--highlight);\n}\n\n.Tabs_module_tabViewSelected__df3be7a0 {\n  color: var(--highlight);\n  border-bottom: 0.125rem solid var(--highlight);\n}\n.Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--highlight);\n}\n.Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_saperator__df3be7a0 {\n  border-right: 0.031rem solid var(--highlight);\n  border-radius: 0.625rem;\n  height: 1.438rem;\n  margin: 0rem 0rem 0rem 1rem;\n}\n.Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--highlight);\n}";
-var modules_78ab5066 = {"root":"Tabs_module_root__df3be7a0","tab-view":"Tabs_module_tabView__df3be7a0","tab-view-selected":"Tabs_module_tabViewSelected__df3be7a0","content":"Tabs_module_content__df3be7a0","left":"Tabs_module_left__df3be7a0","icon-container":"Tabs_module_iconContainer__df3be7a0","icon":"Tabs_module_icon__df3be7a0","right":"Tabs_module_right__df3be7a0","saperator":"Tabs_module_saperator__df3be7a0"};
+var css$8 = ".Tabs_module_root__83feec3e {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e {\n  padding: 0.75rem;\n  gap: 0.75rem;\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e > [data-elem=component1] > .Tabs_module_icon__83feec3e,\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e > [data-elem=component3] > .Tabs_module_icon__83feec3e {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--black);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e > [data-elem=component2] {\n  color: var(--black);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e.Tabs_module_active__83feec3e {\n  border-bottom: 2px solid var(--highlight);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e.Tabs_module_active__83feec3e > [data-elem=component1] > .Tabs_module_icon__83feec3e,\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e.Tabs_module_active__83feec3e > [data-elem=component3] > .Tabs_module_icon__83feec3e {\n  fill: var(--highlight);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e.Tabs_module_active__83feec3e > [data-elem=component2] {\n  color: var(--highlight);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e:hover {\n  background: var(--info-bg);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e:hover > [data-elem=component1] > .Tabs_module_icon__83feec3e,\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e:hover > [data-elem=component3] > .Tabs_module_icon__83feec3e {\n  fill: var(--highlight);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e:hover > [data-elem=component2] {\n  color: var(--highlight);\n}";
+var modules_78ab5066 = {"root":"Tabs_module_root__83feec3e","tab":"Tabs_module_tab__83feec3e","icon":"Tabs_module_icon__83feec3e","active":"Tabs_module_active__83feec3e"};
 n(css$8,{});
 
 var Tabs = function Tabs(props) {
   var tabs = props.tabs,
     selectedTab = props.selectedTab,
     setSelectedTab = props.setSelectedTab;
-  var tabViewClassName = function tabViewClassName(id) {
-    return id === selectedTab ? "".concat(modules_78ab5066['tab-view-selected']) : "".concat(modules_78ab5066['tab-view']);
-  };
   var onTabClick = function onTabClick(id) {
     setSelectedTab(id);
   };
@@ -36837,44 +37486,27 @@ var Tabs = function Tabs(props) {
         title = tab.title,
         LeftIcon = tab.leftIcon,
         RightIcon = tab.rightIcon;
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
+      return /*#__PURE__*/jsxRuntime.jsx(Button, {
+        size: "auto",
+        color: "default",
+        radius: "none",
+        variant: "text",
         onClick: function onClick() {
-          return onTabClick(id);
+          onTabClick(id);
         },
-        className: tabViewClassName(id),
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: modules_78ab5066.content,
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: modules_78ab5066.left,
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              style: {
-                paddingRight: LeftIcon ? 5 : 0
-              },
-              children: /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: modules_78ab5066['icon-container'],
-                children: LeftIcon && /*#__PURE__*/jsxRuntime.jsx(LeftIcon, {
-                  className: classes(modules_78ab5066.icon)
-                })
-              })
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              style: {
-                paddingRight: !RightIcon ? 8 : 0
-              },
-              children: title
-            })]
-          }), RightIcon && /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: modules_78ab5066.right,
-            children: [/*#__PURE__*/jsxRuntime.jsx("vl", {
-              className: modules_78ab5066.saperator
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: modules_78ab5066['icon-container'],
-              children: /*#__PURE__*/jsxRuntime.jsx(RightIcon, {
-                className: classes(modules_78ab5066.icon)
-              })
-            })]
-          })]
-        })
-      }, tab);
+        title: title,
+        className: classes(modules_78ab5066.tab, selectedTab === id ? modules_78ab5066.active : ''),
+        leftComponent: LeftIcon && function () {
+          return /*#__PURE__*/jsxRuntime.jsx(LeftIcon, {
+            className: modules_78ab5066.icon
+          });
+        },
+        rightComponent: RightIcon && function () {
+          return /*#__PURE__*/jsxRuntime.jsx(RightIcon, {
+            className: modules_78ab5066.icon
+          });
+        }
+      }, id);
     })
   });
 };
@@ -36909,92 +37541,102 @@ Tabs.defaultProps = {
   setSelectedTab: 'None'
 };
 
-var css$7 = ".Tooltip_module_root__c909817e {\n  display: inline-block;\n  position: relative;\n}\n.Tooltip_module_tooltip__c909817e {\n  text-align: center;\n  position: fixed;\n  border-radius: 0.25rem;\n  min-width: auto;\n  max-width: 12rem;\n  padding: 0.375rem;\n  font-size: 0.875rem;\n  font-family: sans-serif;\n  line-height: 1;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_light__c909817e {\n  color: var(--black);\n  background: var(--grey7);\n  border-color: var(--black);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_dark__c909817e {\n  color: var(--white);\n  background: var(--black);\n  border-color: var(--white);\n}\n.Tooltip_module_tooltip__c909817e::before {\n  content: \"\";\n  border: solid transparent;\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n  border-width: 0.375rem;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_top__c909817e::before {\n  top: 100%;\n  left: 50%;\n  transform: translate(-50%, 0%);\n  border-top-style: solid;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_top__c909817e.Tooltip_module_light__c909817e::before {\n  border-top-color: var(--grey7);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_top__c909817e.Tooltip_module_dark__c909817e::before {\n  border-top-color: var(--black);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_bottom__c909817e::before {\n  top: 0%;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  border-bottom-style: solid;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_bottom__c909817e.Tooltip_module_light__c909817e::before {\n  border-bottom-color: var(--grey7);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_bottom__c909817e.Tooltip_module_dark__c909817e::before {\n  border-bottom-color: var(--black);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_left__c909817e::before {\n  top: 50%;\n  left: 100%;\n  transform: translate(0%, -50%);\n  border-left-style: solid;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_left__c909817e.Tooltip_module_light__c909817e::before {\n  border-left-color: var(--grey7);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_left__c909817e.Tooltip_module_dark__c909817e::before {\n  border-left-color: var(--black);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_right__c909817e::before {\n  top: 50%;\n  left: 0%;\n  transform: translate(-100%, -50%);\n  border-right-style: solid;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_right__c909817e.Tooltip_module_light__c909817e::before {\n  border-right-color: var(--grey7);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_right__c909817e.Tooltip_module_dark__c909817e::before {\n  border-right-color: var(--black);\n}";
-var modules_e4619b04 = {"root":"Tooltip_module_root__c909817e","tooltip":"Tooltip_module_tooltip__c909817e","light":"Tooltip_module_light__c909817e","dark":"Tooltip_module_dark__c909817e","top":"Tooltip_module_top__c909817e","bottom":"Tooltip_module_bottom__c909817e","left":"Tooltip_module_left__c909817e","right":"Tooltip_module_right__c909817e"};
+function o(f){return r=>{f.forEach(n=>{typeof n=="function"?n(r):n!=null&&(n.current=r);});}}
+
+var css$7 = ".Tooltip_module_tooltip__1cb07177 {\n  text-align: center;\n  position: fixed;\n  border-radius: 0.25rem;\n  min-width: auto;\n  max-width: 12rem;\n  padding: 0.375rem;\n  font-size: 0.875rem;\n  font-family: sans-serif;\n  line-height: 1;\n}\n.Tooltip_module_tooltip__1cb07177.Tooltip_module_light__1cb07177 {\n  color: var(--black);\n  background: var(--grey7);\n  border-color: var(--black);\n}\n.Tooltip_module_tooltip__1cb07177.Tooltip_module_light__1cb07177 .Tooltip_module_arrow__1cb07177 {\n  background: var(--grey7);\n}\n.Tooltip_module_tooltip__1cb07177.Tooltip_module_dark__1cb07177 {\n  color: var(--white);\n  background: var(--black);\n  border-color: var(--white);\n}\n.Tooltip_module_tooltip__1cb07177.Tooltip_module_dark__1cb07177 .Tooltip_module_arrow__1cb07177 {\n  background: var(--black);\n}\n.Tooltip_module_tooltip__1cb07177 .Tooltip_module_arrow__1cb07177 {\n  position: absolute;\n  width: 1rem;\n  height: 1rem;\n  z-index: -1;\n  pointer-events: none;\n  transform: rotate(45deg);\n}";
+var modules_e4619b04 = {"tooltip":"Tooltip_module_tooltip__1cb07177","light":"Tooltip_module_light__1cb07177","arrow":"Tooltip_module_arrow__1cb07177","dark":"Tooltip_module_dark__1cb07177"};
 n(css$7,{});
 
-var getPositionStyles = function getPositionStyles(_ref) {
-  var _anchor$current$getBo, _anchor$current, _anchor$current$getBo2, _anchor$current$getBo3, _anchor$current$getBo4, _anchor$current2, _anchor$current2$getB, _anchor$current2$getB2, _anchor$current$getBo5, _anchor$current3, _anchor$current3$getB, _anchor$current3$getB2, _anchor$current$getBo6, _anchor$current4, _anchor$current4$getB, _anchor$current4$getB2, _anchor$current$getBo7, _anchor$current5, _anchor$current5$getB, _anchor$current5$getB2, _anchor$current$getBo8, _anchor$current6, _anchor$current6$getB, _anchor$current6$getB2, _anchor$current$getBo9, _anchor$current7, _anchor$current7$getB, _anchor$current7$getB2, _anchor$current$getBo10, _anchor$current8, _anchor$current8$getB, _anchor$current8$getB2, _anchor$current$getBo11, _anchor$current9, _anchor$current9$getB, _anchor$current9$getB2, _anchor$current$getBo12, _anchor$current10, _anchor$current10$get, _anchor$current10$get2, _anchor$current$getBo13, _anchor$current11, _anchor$current11$get, _anchor$current11$get2, _anchor$current$getBo14, _anchor$current12, _anchor$current12$get, _anchor$current12$get2;
-  var position = _ref.position,
-    anchor = _ref.anchor,
-    content = _ref.content;
-  var style = {
-    width: "calc(".concat(content.length / 2, "rem + 0.75rem)")
-  };
-  switch (position) {
-    case 'top':
-      return _objectSpread2(_objectSpread2({}, style), {}, {
-        top: "calc(".concat((_anchor$current$getBo = anchor === null || anchor === void 0 ? void 0 : (_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : (_anchor$current$getBo2 = _anchor$current.getBoundingClientRect) === null || _anchor$current$getBo2 === void 0 ? void 0 : (_anchor$current$getBo3 = _anchor$current$getBo2.call(_anchor$current)) === null || _anchor$current$getBo3 === void 0 ? void 0 : _anchor$current$getBo3.top) !== null && _anchor$current$getBo !== void 0 ? _anchor$current$getBo : 0, "px - 0.375rem)"),
-        left: "calc(".concat(((_anchor$current$getBo4 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current2 = anchor.current) === null || _anchor$current2 === void 0 ? void 0 : (_anchor$current2$getB = _anchor$current2.getBoundingClientRect) === null || _anchor$current2$getB === void 0 ? void 0 : (_anchor$current2$getB2 = _anchor$current2$getB.call(_anchor$current2)) === null || _anchor$current2$getB2 === void 0 ? void 0 : _anchor$current2$getB2.left) !== null && _anchor$current$getBo4 !== void 0 ? _anchor$current$getBo4 : 0) + ((_anchor$current$getBo5 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current3 = anchor.current) === null || _anchor$current3 === void 0 ? void 0 : (_anchor$current3$getB = _anchor$current3.getBoundingClientRect) === null || _anchor$current3$getB === void 0 ? void 0 : (_anchor$current3$getB2 = _anchor$current3$getB.call(_anchor$current3)) === null || _anchor$current3$getB2 === void 0 ? void 0 : _anchor$current3$getB2.width) !== null && _anchor$current$getBo5 !== void 0 ? _anchor$current$getBo5 : 0) / 2, "px"),
-        transform: 'translate(-50%, -100%)'
-      });
-    case 'bottom':
-      return _objectSpread2(_objectSpread2({}, style), {}, {
-        top: "calc(".concat((_anchor$current$getBo6 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current4 = anchor.current) === null || _anchor$current4 === void 0 ? void 0 : (_anchor$current4$getB = _anchor$current4.getBoundingClientRect) === null || _anchor$current4$getB === void 0 ? void 0 : (_anchor$current4$getB2 = _anchor$current4$getB.call(_anchor$current4)) === null || _anchor$current4$getB2 === void 0 ? void 0 : _anchor$current4$getB2.bottom) !== null && _anchor$current$getBo6 !== void 0 ? _anchor$current$getBo6 : 0, "px + 0.375rem)"),
-        left: "calc(".concat(((_anchor$current$getBo7 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current5 = anchor.current) === null || _anchor$current5 === void 0 ? void 0 : (_anchor$current5$getB = _anchor$current5.getBoundingClientRect) === null || _anchor$current5$getB === void 0 ? void 0 : (_anchor$current5$getB2 = _anchor$current5$getB.call(_anchor$current5)) === null || _anchor$current5$getB2 === void 0 ? void 0 : _anchor$current5$getB2.left) !== null && _anchor$current$getBo7 !== void 0 ? _anchor$current$getBo7 : 0) + ((_anchor$current$getBo8 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current6 = anchor.current) === null || _anchor$current6 === void 0 ? void 0 : (_anchor$current6$getB = _anchor$current6.getBoundingClientRect) === null || _anchor$current6$getB === void 0 ? void 0 : (_anchor$current6$getB2 = _anchor$current6$getB.call(_anchor$current6)) === null || _anchor$current6$getB2 === void 0 ? void 0 : _anchor$current6$getB2.width) !== null && _anchor$current$getBo8 !== void 0 ? _anchor$current$getBo8 : 0) / 2, "px"),
-        transform: 'translate(-50%, 0%)'
-      });
-    case 'left':
-      return _objectSpread2(_objectSpread2({}, style), {}, {
-        top: "calc(".concat(((_anchor$current$getBo9 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current7 = anchor.current) === null || _anchor$current7 === void 0 ? void 0 : (_anchor$current7$getB = _anchor$current7.getBoundingClientRect) === null || _anchor$current7$getB === void 0 ? void 0 : (_anchor$current7$getB2 = _anchor$current7$getB.call(_anchor$current7)) === null || _anchor$current7$getB2 === void 0 ? void 0 : _anchor$current7$getB2.top) !== null && _anchor$current$getBo9 !== void 0 ? _anchor$current$getBo9 : 0) + ((_anchor$current$getBo10 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current8 = anchor.current) === null || _anchor$current8 === void 0 ? void 0 : (_anchor$current8$getB = _anchor$current8.getBoundingClientRect) === null || _anchor$current8$getB === void 0 ? void 0 : (_anchor$current8$getB2 = _anchor$current8$getB.call(_anchor$current8)) === null || _anchor$current8$getB2 === void 0 ? void 0 : _anchor$current8$getB2.height) !== null && _anchor$current$getBo10 !== void 0 ? _anchor$current$getBo10 : 0) / 2, "px)"),
-        left: "calc(".concat((_anchor$current$getBo11 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current9 = anchor.current) === null || _anchor$current9 === void 0 ? void 0 : (_anchor$current9$getB = _anchor$current9.getBoundingClientRect) === null || _anchor$current9$getB === void 0 ? void 0 : (_anchor$current9$getB2 = _anchor$current9$getB.call(_anchor$current9)) === null || _anchor$current9$getB2 === void 0 ? void 0 : _anchor$current9$getB2.left) !== null && _anchor$current$getBo11 !== void 0 ? _anchor$current$getBo11 : 0, "px - 0.375rem"),
-        transform: 'translate(-100%, -50%)'
-      });
-    case 'right':
-      return _objectSpread2(_objectSpread2({}, style), {}, {
-        top: "calc(".concat(((_anchor$current$getBo12 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current10 = anchor.current) === null || _anchor$current10 === void 0 ? void 0 : (_anchor$current10$get = _anchor$current10.getBoundingClientRect) === null || _anchor$current10$get === void 0 ? void 0 : (_anchor$current10$get2 = _anchor$current10$get.call(_anchor$current10)) === null || _anchor$current10$get2 === void 0 ? void 0 : _anchor$current10$get2.top) !== null && _anchor$current$getBo12 !== void 0 ? _anchor$current$getBo12 : 0) + ((_anchor$current$getBo13 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current11 = anchor.current) === null || _anchor$current11 === void 0 ? void 0 : (_anchor$current11$get = _anchor$current11.getBoundingClientRect) === null || _anchor$current11$get === void 0 ? void 0 : (_anchor$current11$get2 = _anchor$current11$get.call(_anchor$current11)) === null || _anchor$current11$get2 === void 0 ? void 0 : _anchor$current11$get2.height) !== null && _anchor$current$getBo13 !== void 0 ? _anchor$current$getBo13 : 0) / 2, "px)"),
-        left: "calc(".concat((_anchor$current$getBo14 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current12 = anchor.current) === null || _anchor$current12 === void 0 ? void 0 : (_anchor$current12$get = _anchor$current12.getBoundingClientRect) === null || _anchor$current12$get === void 0 ? void 0 : (_anchor$current12$get2 = _anchor$current12$get.call(_anchor$current12)) === null || _anchor$current12$get2 === void 0 ? void 0 : _anchor$current12$get2.right) !== null && _anchor$current$getBo14 !== void 0 ? _anchor$current$getBo14 : 0, "px + 0.375rem"),
-        transform: 'translate(0%, -50%)'
-      });
-    default:
-      return {};
-  }
-};
-var Tooltip = function Tooltip(props) {
+var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, propRef) {
+  var _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$arrow4;
   var children = props.children,
     position = props.position,
     content = props.content,
     variant = props.variant,
     className = props.className;
-  var timeoutRef = React.useRef(null);
-  var tooltipRef = React.useRef(null);
+  var arrowEl = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var showTip = function showTip() {
-    timeoutRef.current = setTimeout(function () {
-      setOpen(true);
-    }, 0);
-  };
-  var hideTip = function hideTip() {
-    clearTimeout(timeoutRef.current);
-    setOpen(false);
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    ref: tooltipRef,
-    className: classes(modules_e4619b04.root, modules_e4619b04[variant])
-    // When to show the tooltip
-    ,
-    onMouseEnter: showTip,
-    onMouseLeave: hideTip,
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(Popper, {
+
+  // eslint-disable-next-line object-curly-newline
+  var _useFloating = useFloating({
+      open: open,
+      onOpenChange: setOpen,
+      placement: position,
+      // Make sure the tooltip stays on the screen
+      whileElementsMounted: autoUpdate,
+      middleware: [offset(12), flip(), shift(), arrow({
+        element: arrowEl
+      })]
+    }),
+    x = _useFloating.x,
+    y = _useFloating.y,
+    reference = _useFloating.reference,
+    floating = _useFloating.floating,
+    strategy = _useFloating.strategy,
+    context = _useFloating.context,
+    middlewareData = _useFloating.middlewareData,
+    placement = _useFloating.placement;
+
+  // Event listeners to change the open state
+  var hover = useHover(context, {
+    move: true
+  });
+  var focus = useFocus(context);
+  var dismiss = useDismiss(context);
+  // Role props for screen readers
+  var role = useRole(context, {
+    role: 'tooltip'
+  });
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = useInteractions([hover, focus, dismiss, role]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var childrenRef = children.ref;
+  var ref = React.useMemo(function () {
+    return o([reference, childrenRef, propRef]);
+  }, [reference, childrenRef]);
+  var clonedChildren = /*#__PURE__*/React.cloneElement(children, getReferenceProps(_objectSpread2({
+    ref: ref
+  }, children.props)));
+  var side = placement.split('-')[0];
+  var staticSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+  }[side];
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [clonedChildren, /*#__PURE__*/jsxRuntime.jsx(Popper, {
       open: open,
       backdrop: false,
-      anchorEl: tooltipRef,
-      wrapperId: "tooltip-popper",
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classes(modules_e4619b04.tooltip, modules_e4619b04[position], modules_e4619b04[variant], className),
-        style: _objectSpread2({}, getPositionStyles({
-          position: position,
-          anchor: tooltipRef,
-          content: content
-        })),
-        children: content
-      })
+      wrapperId: "tooltip",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, getFloatingProps({
+        ref: floating,
+        className: classes(modules_e4619b04.tooltip, modules_e4619b04[variant], className),
+        style: {
+          position: strategy,
+          top: y !== null && y !== void 0 ? y : 0,
+          left: x !== null && x !== void 0 ? x : 0
+        }
+      })), {}, {
+        children: [content, /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: modules_e4619b04.arrow,
+          ref: arrowEl,
+          style: _defineProperty$1({
+            left: (_middlewareData$arrow = middlewareData === null || middlewareData === void 0 ? void 0 : (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.x) !== null && _middlewareData$arrow !== void 0 ? _middlewareData$arrow : '',
+            top: (_middlewareData$arrow3 = middlewareData === null || middlewareData === void 0 ? void 0 : (_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.y) !== null && _middlewareData$arrow3 !== void 0 ? _middlewareData$arrow3 : '',
+            right: '',
+            bottom: ''
+          }, staticSide, '-0.5rem')
+        })]
+      }))
     })]
   });
-};
+});
 Tooltip.propTypes = {
   variant: propTypes$1.exports.oneOf(['light', 'dark']),
   content: propTypes$1.exports.string,
@@ -86725,6 +87367,7 @@ exports.RadioIcon = RadioIcon;
 exports.RefreshIcon = Refresh;
 exports.ResetIcon = Reset;
 exports.ServerIcon = Server;
+exports.SettingsIcon = Settings;
 exports.Stepper = Stepper;
 exports.Table = Table;
 exports.TableCell = TableCell;
@@ -86737,6 +87380,7 @@ exports.TextField = TextField;
 exports.TickIcon = Tick;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
+exports.TrashIcon = Trash;
 exports.ViewIcon = View;
 exports.classes = classes;
 exports.cloneDeep = cloneDeep;