@nulogy/components 14.4.1 → 14.5.0

package/dist/main.module.js

@@ -3,7 +3,7 @@ import React__default, { createContext, useContext, useLayoutEffect, useEffect,
 import styled, { useTheme, keyframes as keyframes$3, createGlobalStyle, ThemeContext as ThemeContext$1, StyleSheetManager, ThemeProvider } from 'styled-components';
 import assign$1 from 'object-assign';
 import icons from '@nulogy/icons';
-import _extends$c from '@babel/runtime/helpers/extends';
+import _extends$d from '@babel/runtime/helpers/extends';
 import _assertThisInitialized$3 from '@babel/runtime/helpers/assertThisInitialized';
 import _inheritsLoose$3 from '@babel/runtime/helpers/inheritsLoose';
 import isEqual$3 from 'react-fast-compare';
@@ -9272,7 +9272,7 @@ var shadow = system({
   }
 });
 
-function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 
 // based on https://github.com/developit/dlv
 var get$1 = function get(obj, key, def, p, undef) {
@@ -9403,7 +9403,7 @@ var positiveOrNegative = function positiveOrNegative(scale, value) {
 var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
   var _extends2;
 
-  return _extends$b({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
+  return _extends$c({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
 }, {});
 var responsive = function responsive(styles) {
   return function (theme) {
@@ -9445,7 +9445,7 @@ var css$3 = function css(args) {
       props = {};
     }
 
-    var theme = _extends$b({}, defaultTheme$1, {}, props.theme || props);
+    var theme = _extends$c({}, defaultTheme$1, {}, props.theme || props);
 
     var result = {};
     var obj = typeof args === 'function' ? args(theme) : args;
@@ -9457,7 +9457,7 @@ var css$3 = function css(args) {
 
       if (key === 'variant') {
         var variant = css(get$1(theme, val))(theme);
-        result = _extends$b({}, result, {}, variant);
+        result = _extends$c({}, result, {}, variant);
         continue;
       }
 
@@ -11020,8 +11020,8 @@ var Button = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   }));
 });
 
-function _extends$a() {
-  _extends$a = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$b() {
+  _extends$b = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -11032,7 +11032,7 @@ function _extends$a() {
     }
     return target;
   };
-  return _extends$a.apply(this, arguments);
+  return _extends$b.apply(this, arguments);
 }
 
 function _assertThisInitialized$2(self) {
@@ -11962,7 +11962,7 @@ function guard(lowerBoundary, upperBoundary, value) {
 function darken(amount, color) {
   if (color === 'transparent') return color;
   var hslColor = parseToHsl(color);
-  return toColorString(_extends$a({}, hslColor, {
+  return toColorString(_extends$b({}, hslColor, {
     lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))
   }));
 } // prettier-ignore
@@ -12007,7 +12007,7 @@ function transparentize(amount, color) {
   var parsedColor = parseToRgb(color);
   var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
 
-  var colorWithAlpha = _extends$a({}, parsedColor, {
+  var colorWithAlpha = _extends$b({}, parsedColor, {
     alpha: guard(0, 1, (alpha * 100 - parseFloat(amount) * 100) / 100)
   });
 
@@ -14666,14 +14666,14 @@ function NulogyLogo$1(_a) {
   }));
 }
 
-function _extends$9() {
-  return _extends$9 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$a() {
+  return _extends$a = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$9.apply(null, arguments);
+  }, _extends$a.apply(null, arguments);
 }
 
 function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true  } = {}) {
@@ -14803,34 +14803,34 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
     return createScope1;
 }
 
-function _extends$8() {
-  return _extends$8 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$9() {
+  return _extends$9 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$8.apply(null, arguments);
+  }, _extends$9.apply(null, arguments);
 }
 
-function _extends$7() {
-  return _extends$7 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$8() {
+  return _extends$8 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$7.apply(null, arguments);
+  }, _extends$8.apply(null, arguments);
 }
 
-function _extends$6() {
-  return _extends$6 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$7() {
+  return _extends$7 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$6.apply(null, arguments);
+  }, _extends$7.apply(null, arguments);
 }
 
 /* -------------------------------------------------------------------------------------------------
@@ -14850,11 +14850,11 @@ function _extends$6() {
                 return /*#__PURE__*/ isValidElement(newElement) ? newElement.props.children : null;
             } else return child;
         });
-        return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone, _extends$6({}, slotProps, {
+        return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone, _extends$7({}, slotProps, {
             ref: forwardedRef
         }), /*#__PURE__*/ isValidElement(newElement) ? /*#__PURE__*/ cloneElement(newElement, undefined, newChildren) : null);
     }
-    return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone, _extends$6({}, slotProps, {
+    return /*#__PURE__*/ createElement($5e63c961fc1ce211$var$SlotClone, _extends$7({}, slotProps, {
         ref: forwardedRef
     }), children);
 });
@@ -14938,7 +14938,7 @@ const $8927f6f2acc4f386$var$NODES = [
         useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
-        return /*#__PURE__*/ createElement(Comp, _extends$7({}, primitiveProps, {
+        return /*#__PURE__*/ createElement(Comp, _extends$8({}, primitiveProps, {
             ref: forwardedRef
         }));
     });
@@ -15122,7 +15122,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((prop
         return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
         ;
     }, []);
-    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$8({}, layerProps, {
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$9({}, layerProps, {
         ref: composedRefs,
         style: {
             pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
@@ -15274,14 +15274,14 @@ function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
     return deterministicId || (id ? `radix-${id}` : '');
 }
 
-function _extends$5() {
-  return _extends$5 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$6() {
+  return _extends$6 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$5.apply(null, arguments);
+  }, _extends$6.apply(null, arguments);
 }
 
 /**
@@ -17687,19 +17687,19 @@ const arrow$3 = (options, deps) => ({
   options: [options, deps]
 });
 
-function _extends$4() {
-  return _extends$4 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$5() {
+  return _extends$5 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$4.apply(null, arguments);
+  }, _extends$5.apply(null, arguments);
 }
 
 const $7e8f5cd07187803e$export$21b07c8f274aebd5 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { children: children , width: width = 10 , height: height = 5 , ...arrowProps } = props;
-    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.svg, _extends$4({}, arrowProps, {
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.svg, _extends$5({}, arrowProps, {
         ref: forwardedRef,
         width: width,
         height: height,
@@ -17786,7 +17786,7 @@ const $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d = /*#__PURE__*/ forwardRef((props
         // `anchorRef` with their virtual ref in this case.
         context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current);
     });
-    return virtualRef ? null : /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$5({}, anchorProps, {
+    return virtualRef ? null : /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$6({}, anchorProps, {
         ref: composedRefs
     }));
 });
@@ -17915,7 +17915,7 @@ const $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc = /*#__PURE__*/ forwardRef((props
         arrowX: arrowX,
         arrowY: arrowY,
         shouldHideArrow: cannotCenterArrow
-    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$5({
+    }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$6({
         "data-side": placedSide,
         "data-align": placedAlign
     }, contentProps, {
@@ -17967,7 +17967,7 @@ const $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0 = /*#__PURE__*/ forwardRef(funct
             }[contentContext.placedSide],
             visibility: contentContext.shouldHideArrow ? 'hidden' : undefined
         }
-    }, /*#__PURE__*/ createElement($7e8f5cd07187803e$export$be92b6f5f03c0fe9, _extends$5({}, arrowProps, {
+    }, /*#__PURE__*/ createElement($7e8f5cd07187803e$export$be92b6f5f03c0fe9, _extends$6({}, arrowProps, {
         ref: forwardedRef,
         style: {
             ...arrowProps.style,
@@ -18033,6 +18033,24 @@ const $cf1ac5d9fe0e8206$export$b688253958b8dfe7 = $cf1ac5d9fe0e8206$export$ecd4e
 const $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 = $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc;
 const $cf1ac5d9fe0e8206$export$21b07c8f274aebd5 = $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0;
 
+function _extends$4() {
+  return _extends$4 = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$4.apply(null, arguments);
+}
+
+const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    var _globalThis$document;
+    const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
+    return container ? /*#__PURE__*/ ReactDOM__default.createPortal(/*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends$4({}, portalProps, {
+        ref: forwardedRef
+    })), container) : null;
+});
+
 function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
     return useReducer((state, event)=>{
         const nextState = machine[state][event];
@@ -18379,9 +18397,9 @@ const $a093c7e1ec25a057$export$8c610744efcf8a1d = /*#__PURE__*/ forwardRef((prop
     }, [
         handlePointerUp
     ]);
-    return /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$b688253958b8dfe7, _extends$9({
+    return /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$b688253958b8dfe7, _extends$a({
         asChild: true
-    }, popperScope), /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends$9({
+    }, popperScope), /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends$a({
         // We purposefully avoid adding `type=button` here because tooltip triggers are also
         // commonly anchors and the anchor `type` attribute signifies MIME type.
         "aria-describedby": context.open ? context.contentId : undefined,
@@ -18418,6 +18436,19 @@ const $a093c7e1ec25a057$export$8c610744efcf8a1d = /*#__PURE__*/ forwardRef((prop
 const [$a093c7e1ec25a057$var$PortalProvider, $a093c7e1ec25a057$var$usePortalContext] = $a093c7e1ec25a057$var$createTooltipContext($a093c7e1ec25a057$var$PORTAL_NAME, {
     forceMount: undefined
 });
+const $a093c7e1ec25a057$export$7b36b8f925ab7497 = (props)=>{
+    const { __scopeTooltip: __scopeTooltip , forceMount: forceMount , children: children , container: container  } = props;
+    const context = $a093c7e1ec25a057$var$useTooltipContext($a093c7e1ec25a057$var$PORTAL_NAME, __scopeTooltip);
+    return /*#__PURE__*/ createElement($a093c7e1ec25a057$var$PortalProvider, {
+        scope: __scopeTooltip,
+        forceMount: forceMount
+    }, /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+        present: forceMount || context.open
+    }, /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, {
+        asChild: true,
+        container: container
+    }, children)));
+};
 /* -------------------------------------------------------------------------------------------------
  * TooltipContent
  * -----------------------------------------------------------------------------------------------*/ const $a093c7e1ec25a057$var$CONTENT_NAME = 'TooltipContent';
@@ -18427,11 +18458,11 @@ const $a093c7e1ec25a057$export$e9003e2be37ec060 = /*#__PURE__*/ forwardRef((prop
     const context = $a093c7e1ec25a057$var$useTooltipContext($a093c7e1ec25a057$var$CONTENT_NAME, props.__scopeTooltip);
     return /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
         present: forceMount || context.open
-    }, context.disableHoverableContent ? /*#__PURE__*/ createElement($a093c7e1ec25a057$var$TooltipContentImpl, _extends$9({
+    }, context.disableHoverableContent ? /*#__PURE__*/ createElement($a093c7e1ec25a057$var$TooltipContentImpl, _extends$a({
         side: side
     }, contentProps, {
         ref: forwardedRef
-    })) : /*#__PURE__*/ createElement($a093c7e1ec25a057$var$TooltipContentHoverable, _extends$9({
+    })) : /*#__PURE__*/ createElement($a093c7e1ec25a057$var$TooltipContentHoverable, _extends$a({
         side: side
     }, contentProps, {
         ref: forwardedRef
@@ -18522,7 +18553,7 @@ const $a093c7e1ec25a057$var$TooltipContentHoverable = /*#__PURE__*/ forwardRef((
         onClose,
         handleRemoveGraceArea
     ]);
-    return /*#__PURE__*/ createElement($a093c7e1ec25a057$var$TooltipContentImpl, _extends$9({}, props, {
+    return /*#__PURE__*/ createElement($a093c7e1ec25a057$var$TooltipContentImpl, _extends$a({}, props, {
         ref: composedRefs
     }));
 });
@@ -18567,7 +18598,7 @@ const $a093c7e1ec25a057$var$TooltipContentImpl = /*#__PURE__*/ forwardRef((props
         onFocusOutside: (event)=>event.preventDefault()
         ,
         onDismiss: onClose
-    }, /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2, _extends$9({
+    }, /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2, _extends$a({
         "data-state": context.stateAttribute
     }, popperScope, contentProps, {
         ref: forwardedRef,
@@ -18595,7 +18626,7 @@ const $a093c7e1ec25a057$export$c27ee0ad710f7559 = /*#__PURE__*/ forwardRef((prop
     const popperScope = $a093c7e1ec25a057$var$usePopperScope(__scopeTooltip);
     const visuallyHiddenContentContext = $a093c7e1ec25a057$var$useVisuallyHiddenContentContext($a093c7e1ec25a057$var$ARROW_NAME, __scopeTooltip); // if the arrow is inside the `VisuallyHidden`, we don't want to render it all to
     // prevent issues in positioning the arrow due to the duplicate
-    return visuallyHiddenContentContext.isInside ? null : /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$21b07c8f274aebd5, _extends$9({}, popperScope, arrowProps, {
+    return visuallyHiddenContentContext.isInside ? null : /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$21b07c8f274aebd5, _extends$a({}, popperScope, arrowProps, {
         ref: forwardedRef
     }));
 });
@@ -18738,6 +18769,7 @@ function $a093c7e1ec25a057$var$getHullPresorted(points) {
 const $a093c7e1ec25a057$export$2881499e37b75b9a = $a093c7e1ec25a057$export$f78649fb9ca566b8;
 const $a093c7e1ec25a057$export$be92b6f5f03c0fe9 = $a093c7e1ec25a057$export$28c660c63b792dea;
 const $a093c7e1ec25a057$export$41fb9f06171c75f4 = $a093c7e1ec25a057$export$8c610744efcf8a1d;
+const $a093c7e1ec25a057$export$602eac185826482c = $a093c7e1ec25a057$export$7b36b8f925ab7497;
 const $a093c7e1ec25a057$export$7c6e2c02157bb7d2 = $a093c7e1ec25a057$export$e9003e2be37ec060;
 const $a093c7e1ec25a057$export$21b07c8f274aebd5 = $a093c7e1ec25a057$export$c27ee0ad710f7559;
 
@@ -18753,9 +18785,9 @@ function Tooltip$2(_ref) {
 
   return /*#__PURE__*/React__default.createElement($a093c7e1ec25a057$export$2881499e37b75b9a, null, /*#__PURE__*/React__default.createElement($a093c7e1ec25a057$export$be92b6f5f03c0fe9, null, /*#__PURE__*/React__default.createElement($a093c7e1ec25a057$export$41fb9f06171c75f4, {
     asChild: true
-  }, children), /*#__PURE__*/React__default.createElement(TooltipContent$1, {
+  }, children), /*#__PURE__*/React__default.createElement($a093c7e1ec25a057$export$602eac185826482c, null, /*#__PURE__*/React__default.createElement(TooltipContent$1, {
     sideOffset: 4
-  }, content)));
+  }, content))));
 }
 var slideUpAndFade$1 = keyframes$3(["from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:translateY(0);}"]);
 var slideRightAndFade$1 = keyframes$3(["from{opacity:0;transform:translateX(-2px);}to{opacity:1;transform:translateX(0);}"]);
@@ -18764,33 +18796,33 @@ var slideLeftAndFade$1 = keyframes$3(["from{opacity:0;transform:translateX(2px);
 var TooltipContent$1 = styled($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
   displayName: "Tooltip__TooltipContent",
   componentId: "sc-1f1p4mx-0"
-})(["font-family:", ";font-weight:", ";white-space:nowrap;font-size:", ";line-height:", ";color:", ";background-color:", ";border-radius:", ";margin-top:", ";padding:", ";pointer-events:none;animation-duration:400ms;animation-timing-function:cubic-bezier(0.16,1,0.3,1);will-change:transform,opacity;&[data-state=\"delayed-open\"][data-side=\"top\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"right\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"bottom\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"left\"]{animation-name:", ";}"], function (_ref2) {
+})(["font-family:", ";white-space:nowrap;font-size:", ";line-height:", ";color:", ";background-color:", ";border-radius:", ";margin-top:", ";padding:", ";z-index:", ";pointer-events:none;animation-duration:400ms;animation-timing-function:cubic-bezier(0.16,1,0.3,1);will-change:transform,opacity;&[data-state=\"delayed-open\"][data-side=\"top\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"right\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"bottom\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"left\"]{animation-name:", ";}"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.fonts.base;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.fontWeights.medium;
+  return theme.fontSizes.smaller;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.fontSizes.smaller;
+  return theme.lineHeights.smallerText;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.lineHeights.smallerText;
+  return theme.colors.whiteGrey;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.colors.whiteGrey;
+  return curriedTransparentize(0.05, theme.colors.blackBlue);
 }, function (_ref7) {
   var theme = _ref7.theme;
-  return curriedTransparentize(0.05, theme.colors.blackBlue);
+  return theme.radii.medium;
 }, function (_ref8) {
   var theme = _ref8.theme;
-  return theme.radii.medium;
+  return theme.space.half;
 }, function (_ref9) {
   var theme = _ref9.theme;
-  return theme.space.half;
+  return theme.space.x0_25 + " " + theme.space.x0_75;
 }, function (_ref10) {
   var theme = _ref10.theme;
-  return theme.space.x0_25 + " " + theme.space.x0_75;
+  return theme.zIndices.aboveOverlay;
 }, slideUpAndFade$1, slideRightAndFade$1, slideDownAndFade$1, slideLeftAndFade$1);
 
 function AppTag(_ref) {
@@ -21975,7 +22007,7 @@ var Menu$2 = function Menu(props) {
   var children = props.children,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'menu', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'menu', {
     menu: true
   }), {
     ref: innerRef
@@ -22006,7 +22038,7 @@ var MenuList$1 = function MenuList(props) {
     innerProps = props.innerProps,
     innerRef = props.innerRef,
     isMulti = props.isMulti;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'menuList', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'menuList', {
     'menu-list': true,
     'menu-list--is-multi': isMulti
   }), {
@@ -22036,7 +22068,7 @@ var NoOptionsMessage = function NoOptionsMessage(_ref6) {
     children = _ref6$children === void 0 ? 'No options' : _ref6$children,
     innerProps = _ref6.innerProps,
     restProps = _objectWithoutProperties(_ref6, _excluded$3$1);
-  return jsx("div", _extends$a({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx("div", _extends$b({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children: children,
     innerProps: innerProps
   }), 'noOptionsMessage', {
@@ -22049,7 +22081,7 @@ var LoadingMessage = function LoadingMessage(_ref7) {
     children = _ref7$children === void 0 ? 'Loading...' : _ref7$children,
     innerProps = _ref7.innerProps,
     restProps = _objectWithoutProperties(_ref7, _excluded2$1);
-  return jsx("div", _extends$a({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx("div", _extends$b({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children: children,
     innerProps: innerProps
   }), 'loadingMessage', {
@@ -22134,7 +22166,7 @@ var MenuPortal = function MenuPortal(props) {
   if (!appendTo && menuPosition !== 'fixed' || !computedPosition) return null;
 
   // same wrapper element whether fixed or portalled
-  var menuWrapper = jsx("div", _extends$a({
+  var menuWrapper = jsx("div", _extends$b({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -22168,7 +22200,7 @@ var SelectContainer$2 = function SelectContainer(props) {
     innerProps = props.innerProps,
     isDisabled = props.isDisabled,
     isRtl = props.isRtl;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'container', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'container', {
     '--is-disabled': isDisabled,
     '--is-rtl': isRtl
   }), innerProps), children);
@@ -22200,7 +22232,7 @@ var ValueContainer = function ValueContainer(props) {
     innerProps = props.innerProps,
     isMulti = props.isMulti,
     hasValue = props.hasValue;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'valueContainer', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'valueContainer', {
     'value-container': true,
     'value-container--is-multi': isMulti,
     'value-container--has-value': hasValue
@@ -22222,7 +22254,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS() {
 var IndicatorsContainer = function IndicatorsContainer(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'indicatorsContainer', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'indicatorsContainer', {
     indicators: true
   }), innerProps), children);
 };
@@ -22247,7 +22279,7 @@ var _ref2$2 = process.env.NODE_ENV === "production" ? {
 var Svg = function Svg(_ref) {
   var size = _ref.size,
     props = _objectWithoutProperties(_ref, _excluded$2$1);
-  return jsx("svg", _extends$a({
+  return jsx("svg", _extends$b({
     height: size,
     width: size,
     viewBox: "0 0 20 20",
@@ -22257,14 +22289,14 @@ var Svg = function Svg(_ref) {
   }, props));
 };
 var CrossIcon = function CrossIcon(props) {
-  return jsx(Svg, _extends$a({
+  return jsx(Svg, _extends$b({
     size: 20
   }, props), jsx("path", {
     d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
   }));
 };
 var DownChevron = function DownChevron(props) {
-  return jsx(Svg, _extends$a({
+  return jsx(Svg, _extends$b({
     size: 20
   }, props), jsx("path", {
     d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
@@ -22296,7 +22328,7 @@ var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'dropdownIndicator', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'dropdownIndicator', {
     indicator: true,
     'dropdown-indicator': true
   }), innerProps), children || jsx(DownChevron, null));
@@ -22305,7 +22337,7 @@ var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'clearIndicator', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'clearIndicator', {
     indicator: true,
     'clear-indicator': true
   }), innerProps), children || jsx(CrossIcon, null));
@@ -22332,7 +22364,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator(props) {
   var innerProps = props.innerProps;
-  return jsx("span", _extends$a({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
+  return jsx("span", _extends$b({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
     'indicator-separator': true
   })));
 };
@@ -22385,7 +22417,7 @@ var LoadingIndicator = function LoadingIndicator(_ref7) {
     _ref7$size = _ref7.size,
     size = _ref7$size === void 0 ? 4 : _ref7$size,
     restProps = _objectWithoutProperties(_ref7, _excluded2$2);
-  return jsx("div", _extends$a({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx("div", _extends$b({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps: innerProps,
     isRtl: isRtl,
     size: size
@@ -22441,7 +22473,7 @@ var Control = function Control(props) {
     innerRef = props.innerRef,
     innerProps = props.innerProps,
     menuIsOpen = props.menuIsOpen;
-  return jsx("div", _extends$a({
+  return jsx("div", _extends$b({
     ref: innerRef
   }, getStyleProps(props, 'control', {
     control: true,
@@ -22473,9 +22505,9 @@ var Group = function Group(props) {
     label = props.label,
     theme = props.theme,
     selectProps = props.selectProps;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'group', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'group', {
     group: true
-  }), innerProps), jsx(Heading, _extends$a({}, headingProps, {
+  }), innerProps), jsx(Heading, _extends$b({}, headingProps, {
     selectProps: selectProps,
     theme: theme,
     getStyles: getStyles,
@@ -22505,7 +22537,7 @@ var GroupHeading = function GroupHeading(props) {
   var _cleanCommonProps = cleanCommonProps(props);
     _cleanCommonProps.data;
     var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1$1);
-  return jsx("div", _extends$a({}, getStyleProps(props, 'groupHeading', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'groupHeading', {
     'group-heading': true
   }), innerProps));
 };
@@ -22568,11 +22600,11 @@ var Input$1 = function Input(props) {
     isHidden = _cleanCommonProps.isHidden,
     inputClassName = _cleanCommonProps.inputClassName,
     innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$6);
-  return jsx("div", _extends$a({}, getStyleProps(props, 'input', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'input', {
     'input-container': true
   }), {
     "data-value": value || ''
-  }), jsx("input", _extends$a({
+  }), jsx("input", _extends$b({
     className: cx({
       input: true
     }, inputClassName),
@@ -22645,7 +22677,7 @@ var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children,
     innerProps = _ref5.innerProps;
-  return jsx("div", _extends$a({
+  return jsx("div", _extends$b({
     role: "button"
   }, innerProps), children || jsx(CrossIcon, {
     size: 14
@@ -22719,7 +22751,7 @@ var Option = function Option(props) {
     isSelected = props.isSelected,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'option', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'option', {
     option: true,
     'option--is-disabled': isDisabled,
     'option--is-focused': isFocused,
@@ -22747,7 +22779,7 @@ var placeholderCSS = function placeholderCSS(_ref, unstyled) {
 var Placeholder = function Placeholder(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'placeholder', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'placeholder', {
     placeholder: true
   }), innerProps), children);
 };
@@ -22775,7 +22807,7 @@ var SingleValue = function SingleValue(props) {
   var children = props.children,
     isDisabled = props.isDisabled,
     innerProps = props.innerProps;
-  return jsx("div", _extends$a({}, getStyleProps(props, 'singleValue', {
+  return jsx("div", _extends$b({}, getStyleProps(props, 'singleValue', {
     'single-value': true,
     'single-value--is-disabled': isDisabled
   }), innerProps), children);
@@ -22876,7 +22908,7 @@ var _ref$1 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText(props) {
-  return jsx("span", _extends$a({
+  return jsx("span", _extends$b({
     css: _ref$1
   }, props));
 };
@@ -23393,7 +23425,7 @@ function DummyInput(_ref) {
     props = _objectWithoutProperties(_ref, _excluded$5);
   // Remove animation props not meant for HTML elements
   var filteredProps = removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
-  return jsx("input", _extends$a({
+  return jsx("input", _extends$b({
     ref: innerRef
   }, filteredProps, {
     css: /*#__PURE__*/css$2({
@@ -24969,7 +25001,7 @@ var Select = /*#__PURE__*/function (_Component) {
       });
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
-        return /*#__PURE__*/React.createElement(DummyInput, _extends$a({
+        return /*#__PURE__*/React.createElement(DummyInput, _extends$b({
           id: id,
           innerRef: this.getInputRef,
           onBlur: this.onInputBlur,
@@ -24982,7 +25014,7 @@ var Select = /*#__PURE__*/function (_Component) {
           value: ""
         }, ariaAttributes));
       }
-      return /*#__PURE__*/React.createElement(Input, _extends$a({}, commonProps, {
+      return /*#__PURE__*/React.createElement(Input, _extends$b({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",
         autoCorrect: "off",
@@ -25023,7 +25055,7 @@ var Select = /*#__PURE__*/function (_Component) {
         focusedValue = _this$state5.focusedValue,
         isFocused = _this$state5.isFocused;
       if (!this.hasValue() || !controlShouldRenderValue) {
-        return inputValue ? null : /*#__PURE__*/React.createElement(Placeholder, _extends$a({}, commonProps, {
+        return inputValue ? null : /*#__PURE__*/React.createElement(Placeholder, _extends$b({}, commonProps, {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
@@ -25036,7 +25068,7 @@ var Select = /*#__PURE__*/function (_Component) {
         return selectValue.map(function (opt, index) {
           var isOptionFocused = opt === focusedValue;
           var key = "".concat(_this3.getOptionLabel(opt), "-").concat(_this3.getOptionValue(opt));
-          return /*#__PURE__*/React.createElement(MultiValue, _extends$a({}, commonProps, {
+          return /*#__PURE__*/React.createElement(MultiValue, _extends$b({}, commonProps, {
             components: {
               Container: MultiValueContainer,
               Label: MultiValueLabel,
@@ -25065,7 +25097,7 @@ var Select = /*#__PURE__*/function (_Component) {
         return null;
       }
       var singleValue = selectValue[0];
-      return /*#__PURE__*/React.createElement(SingleValue, _extends$a({}, commonProps, {
+      return /*#__PURE__*/React.createElement(SingleValue, _extends$b({}, commonProps, {
         data: singleValue,
         isDisabled: isDisabled
       }), this.formatOptionLabel(singleValue, 'value'));
@@ -25088,7 +25120,7 @@ var Select = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React.createElement(ClearIndicator, _extends$a({}, commonProps, {
+      return /*#__PURE__*/React.createElement(ClearIndicator, _extends$b({}, commonProps, {
         innerProps: innerProps,
         isFocused: isFocused
       }));
@@ -25107,7 +25139,7 @@ var Select = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends$a({}, commonProps, {
+      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends$b({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -25125,7 +25157,7 @@ var Select = /*#__PURE__*/function (_Component) {
       var commonProps = this.commonProps;
       var isDisabled = this.props.isDisabled;
       var isFocused = this.state.isFocused;
-      return /*#__PURE__*/React.createElement(IndicatorSeparator, _extends$a({}, commonProps, {
+      return /*#__PURE__*/React.createElement(IndicatorSeparator, _extends$b({}, commonProps, {
         isDisabled: isDisabled,
         isFocused: isFocused
       }));
@@ -25144,7 +25176,7 @@ var Select = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React.createElement(DropdownIndicator, _extends$a({}, commonProps, {
+      return /*#__PURE__*/React.createElement(DropdownIndicator, _extends$b({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -25209,7 +25241,7 @@ var Select = /*#__PURE__*/function (_Component) {
           'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
         };
 
-        return /*#__PURE__*/React.createElement(Option, _extends$a({}, commonProps, {
+        return /*#__PURE__*/React.createElement(Option, _extends$b({}, commonProps, {
           innerProps: innerProps,
           data: data,
           isDisabled: isDisabled,
@@ -25231,7 +25263,7 @@ var Select = /*#__PURE__*/function (_Component) {
               groupIndex = item.index;
             var groupId = "".concat(_this4.getElementId('group'), "-").concat(groupIndex);
             var headingId = "".concat(groupId, "-heading");
-            return /*#__PURE__*/React.createElement(Group, _extends$a({}, commonProps, {
+            return /*#__PURE__*/React.createElement(Group, _extends$b({}, commonProps, {
               key: groupId,
               data: _data,
               options: options,
@@ -25268,12 +25300,12 @@ var Select = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
-      var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends$a({}, commonProps, menuPlacementProps), function (_ref4) {
+      var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends$b({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
           placement = _ref4$placerProps.placement,
           maxHeight = _ref4$placerProps.maxHeight;
-        return /*#__PURE__*/React.createElement(Menu, _extends$a({}, commonProps, menuPlacementProps, {
+        return /*#__PURE__*/React.createElement(Menu, _extends$b({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
@@ -25287,7 +25319,7 @@ var Select = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          return /*#__PURE__*/React.createElement(MenuList, _extends$a({}, commonProps, {
+          return /*#__PURE__*/React.createElement(MenuList, _extends$b({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
               scrollTargetRef(instance);
@@ -25307,7 +25339,7 @@ var Select = /*#__PURE__*/function (_Component) {
       // positioning behaviour is almost identical for portalled and fixed,
       // so we use the same component. the actual portalling logic is forked
       // within the component based on `menuPosition`
-      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React.createElement(MenuPortal, _extends$a({}, commonProps, {
+      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React.createElement(MenuPortal, _extends$b({}, commonProps, {
         appendTo: menuPortalTarget,
         controlElement: this.controlRef,
         menuPlacement: menuPlacement,
@@ -25377,7 +25409,7 @@ var Select = /*#__PURE__*/function (_Component) {
         isFocused = _this$state6.isFocused,
         selectValue = _this$state6.selectValue;
       var focusableOptions = this.getFocusableOptions();
-      return /*#__PURE__*/React.createElement(LiveRegion$1, _extends$a({}, commonProps, {
+      return /*#__PURE__*/React.createElement(LiveRegion$1, _extends$b({}, commonProps, {
         id: this.getElementId('live-region'),
         ariaSelection: ariaSelection,
         focusedOption: focusedOption,
@@ -25403,7 +25435,7 @@ var Select = /*#__PURE__*/function (_Component) {
         menuIsOpen = _this$props14.menuIsOpen;
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
-      return /*#__PURE__*/React.createElement(SelectContainer, _extends$a({}, commonProps, {
+      return /*#__PURE__*/React.createElement(SelectContainer, _extends$b({}, commonProps, {
         className: className,
         innerProps: {
           id: id,
@@ -25411,7 +25443,7 @@ var Select = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends$a({}, commonProps, {
+      }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends$b({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
@@ -25420,9 +25452,9 @@ var Select = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         isFocused: isFocused,
         menuIsOpen: menuIsOpen
-      }), /*#__PURE__*/React.createElement(ValueContainer, _extends$a({}, commonProps, {
+      }), /*#__PURE__*/React.createElement(ValueContainer, _extends$b({}, commonProps, {
         isDisabled: isDisabled
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends$a({}, commonProps, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends$b({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
@@ -25693,7 +25725,7 @@ function useAsync(_ref) {
 var AsyncSelect$1 = /*#__PURE__*/forwardRef(function (props, ref) {
   var stateManagedProps = useAsync(props);
   var selectProps = useStateManager(stateManagedProps);
-  return /*#__PURE__*/React.createElement(Select, _extends$a({
+  return /*#__PURE__*/React.createElement(Select, _extends$b({
     ref: ref
   }, selectProps));
 });
@@ -28742,8 +28774,8 @@ function (_React$Component) {
         placement: _this.props.placement,
         eventsEnabled: _this.props.eventsEnabled,
         positionFixed: _this.props.positionFixed,
-        modifiers: _extends$c({}, _this.props.modifiers, {
-          arrow: _extends$c({}, _this.props.modifiers && _this.props.modifiers.arrow, {
+        modifiers: _extends$d({}, _this.props.modifiers, {
+          arrow: _extends$d({}, _this.props.modifiers && _this.props.modifiers.arrow, {
             enabled: !!_this.arrowNode,
             element: _this.arrowNode
           }),
@@ -28756,7 +28788,7 @@ function (_React$Component) {
     });
 
     _defineProperty$3(_assertThisInitialized$3(_assertThisInitialized$3(_this)), "getPopperStyle", function () {
-      return !_this.popperNode || !_this.state.data ? initialStyle : _extends$c({
+      return !_this.popperNode || !_this.state.data ? initialStyle : _extends$d({
         position: _this.state.data.offsets.popper.position
       }, _this.state.data.styles);
     });
@@ -28864,7 +28896,7 @@ function Popper$2(_ref) {
       props = _objectWithoutPropertiesLoose$4(_ref, ["referenceElement"]);
 
   return React.createElement(ManagerReferenceNodeContext$1.Consumer, null, function (referenceNode) {
-    return React.createElement(InnerPopper, _extends$c({
+    return React.createElement(InnerPopper, _extends$d({
       referenceElement: referenceElement !== undefined ? referenceElement : referenceNode
     }, props));
   });
@@ -28910,7 +28942,7 @@ function (_React$Component) {
 
 function Reference$1(props) {
   return React.createElement(ManagerReferenceNodeSetterContext$1.Consumer, null, function (setReferenceNode) {
-    return React.createElement(InnerReference, _extends$c({
+    return React.createElement(InnerReference, _extends$d({
       setReferenceNode: setReferenceNode
     }, props));
   });
@@ -29723,7 +29755,7 @@ var pick = function pick(o) {
 
 var StateManagedSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   var baseSelectProps = useStateManager(props);
-  return /*#__PURE__*/React.createElement(Select, _extends$a({
+  return /*#__PURE__*/React.createElement(Select, _extends$b({
     ref: ref
   }, baseSelectProps));
 });
@@ -30659,7 +30691,7 @@ var FocusLock$1 = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, pare
       }
     }, []);
   }
-  var lockProps = _extends$a((_extends2 = {}, _extends2[FOCUS_DISABLED] = disabled && 'disabled', _extends2[FOCUS_GROUP] = group, _extends2), containerProps);
+  var lockProps = _extends$b((_extends2 = {}, _extends2[FOCUS_DISABLED] = disabled && 'disabled', _extends2[FOCUS_GROUP] = group, _extends2), containerProps);
   var hasLeadingGuards = noFocusGuards !== true;
   var hasTailingGuards = hasLeadingGuards && noFocusGuards !== 'tail';
   var mergedRef = useMergeRefs([parentRef, setObserveNode]);
@@ -30698,7 +30730,7 @@ var FocusLock$1 = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, pare
     returnFocus: returnFocus,
     focusOptions: focusOptions,
     noFocusGuards: noFocusGuards
-  }), /*#__PURE__*/React.createElement(Container, _extends$a({
+  }), /*#__PURE__*/React.createElement(Container, _extends$b({
     ref: mergedRef
   }, lockProps, {
     className: className,
@@ -32028,7 +32060,7 @@ mediumEffect.assignMedium(function (cb) {
 var FocusTrap = withSideEffect(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);
 
 var FocusLockCombination = /*#__PURE__*/React.forwardRef(function FocusLockUICombination(props, ref) {
-  return /*#__PURE__*/React.createElement(FocusLockUI, _extends$a({
+  return /*#__PURE__*/React.createElement(FocusLockUI, _extends$b({
     sideCar: FocusTrap,
     ref: ref
   }, props));
@@ -34832,7 +34864,7 @@ var BaseNavBarSearch = function BaseNavBarSearch(_ref) {
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
-  return /*#__PURE__*/React__default.createElement("form", _extends$c({}, props, {
+  return /*#__PURE__*/React__default.createElement("form", _extends$d({}, props, {
     onSubmit: handleOnSubmit
   }), /*#__PURE__*/React__default.createElement(Flex, {
     role: "search"
@@ -61341,7 +61373,7 @@ function createListComponent(_ref) {
         className: className,
         onScroll: onScroll,
         ref: this._outerRefSetter,
-        style: _extends$a({
+        style: _extends$b({
           position: 'relative',
           height: height,
           width: width,
@@ -62296,15 +62328,21 @@ var StyledTr = styled.tr.withConfig({
   componentId: "sc-b5sejq-1"
 })(function (_ref2) {
   var rowHovers = _ref2.rowHovers,
+      rowBorder = _ref2.rowBorder,
       theme = _ref2.theme;
-  return {
+  return Object.assign({
     "&:hover": {
       backgroundColor: rowHovers ? theme.colors.whiteGrey : null
     }
-  };
+  }, rowBorder && {
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: theme.colors.lightGrey,
+    borderCollapse: "collapse"
+  });
 });
 
-var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter) {
+var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) {
   return rows.length > 0 ? rows.map(function (row) {
     return /*#__PURE__*/React__default.createElement(TableBodyRow, {
       row: row,
@@ -62325,7 +62363,8 @@ var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, r
           row: row,
           e: e
         });
-      }
+      },
+      rowBorder: rowBorder
     });
   }) : /*#__PURE__*/React__default.createElement(TableMessageContainer, {
     colSpan: columns.length
@@ -62339,7 +62378,8 @@ var TableBodyRow = function TableBodyRow(_ref3) {
       compact = _ref3.compact,
       rowClassName = _ref3.rowClassName,
       onMouseLeave = _ref3.onMouseLeave,
-      onMouseEnter = _ref3.onMouseEnter;
+      onMouseEnter = _ref3.onMouseEnter,
+      rowBorder = _ref3.rowBorder;
 
   var renderAllCells = function renderAllCells() {
     return columns.map(function (column, index) {
@@ -62360,7 +62400,8 @@ var TableBodyRow = function TableBodyRow(_ref3) {
     "data-testid": "table-row",
     className: rowClassName,
     onMouseLeave: onMouseLeave,
-    onMouseEnter: onMouseEnter
+    onMouseEnter: onMouseEnter,
+    rowBorder: rowBorder
   }, row.heading ? /*#__PURE__*/React__default.createElement(TableCell, {
     row: row,
     colSpan: columns.length,
@@ -62405,10 +62446,11 @@ var TableBody = function TableBody(_ref6) {
       rowHovers = _ref6.rowHovers,
       compact = _ref6.compact,
       onRowMouseLeave = _ref6.onRowMouseLeave,
-      onRowMouseEnter = _ref6.onRowMouseEnter;
+      onRowMouseEnter = _ref6.onRowMouseEnter,
+      rowBorder = _ref6.rowBorder;
   return /*#__PURE__*/React__default.createElement("tbody", {
     "data-testid": "table-body"
-  }, !loading ? renderRows$1(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter) : /*#__PURE__*/React__default.createElement(LoadingContent, {
+  }, !loading ? renderRows$1(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) : /*#__PURE__*/React__default.createElement(LoadingContent, {
     colSpan: columns.length
   }));
 };
@@ -62513,7 +62555,9 @@ function BaseTable(_a) {
       rows = _a.rows,
       id = _a.id,
       className = _a.className,
-      props = __rest$3(_a, ["noRowsContent", "keyField", "loading", "footerRows", "rowHovers", "compact", "stickyHeader", "onRowMouseEnter", "onRowMouseLeave", "columns", "rows", "id", "className"]);
+      _a$rowBorder = _a.rowBorder,
+      rowBorder = _a$rowBorder === void 0 ? false : _a$rowBorder,
+      props = __rest$3(_a, ["noRowsContent", "keyField", "loading", "footerRows", "rowHovers", "compact", "stickyHeader", "onRowMouseEnter", "onRowMouseLeave", "columns", "rows", "id", "className", "rowBorder"]);
 
   return /*#__PURE__*/React__default.createElement(StyledTable, Object.assign({
     id: id,
@@ -62531,7 +62575,8 @@ function BaseTable(_a) {
     rowHovers: rowHovers,
     compact: compact,
     onRowMouseLeave: onRowMouseLeave,
-    onRowMouseEnter: onRowMouseEnter
+    onRowMouseEnter: onRowMouseEnter,
+    rowBorder: rowBorder
   }), footerRows && /*#__PURE__*/React__default.createElement(TableFoot, {
     columns: columns,
     rows: footerRows,
@@ -65264,7 +65309,7 @@ var slideLeftAndFade = keyframes$3(["from{opacity:0;transform:translateX(2px);}t
 var StyledContent = styled($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
   displayName: "TooltipComponents__StyledContent",
   componentId: "sc-1fm7xjh-0"
-})(["font-family:", ";font-size:", ";line-height:", ";border-radius:", ";padding:", ";color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ";animation-duration:400ms;animation-timing-function:cubic-bezier(0.16,1,0.3,1);will-change:transform,opacity;&[data-state=\"delayed-open\"][data-side=\"top\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"right\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"bottom\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"left\"]{animation-name:", ";}", ""], function (_ref) {
+})(["font-family:", ";font-size:", ";line-height:", ";border-radius:", ";padding:", ";color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ";z-index:", ";animation-duration:400ms;animation-timing-function:cubic-bezier(0.16,1,0.3,1);will-change:transform,opacity;&[data-state=\"delayed-open\"][data-side=\"top\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"right\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"bottom\"]{animation-name:", ";}&[data-state=\"delayed-open\"][data-side=\"left\"]{animation-name:", ";}", ""], function (_ref) {
   var theme = _ref.theme;
   return theme.fonts.base;
 }, function (_ref2) {
@@ -65291,12 +65336,15 @@ var StyledContent = styled($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig
 }, function (_ref9) {
   var theme = _ref9.theme;
   return theme.shadows.medium;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.zIndices.aboveOverlay;
 }, slideDownAndFade, slideLeftAndFade, slideUpAndFade, slideRightAndFade, maxWidth);
 var StyledArrow = styled($a093c7e1ec25a057$export$21b07c8f274aebd5).withConfig({
   displayName: "TooltipComponents__StyledArrow",
   componentId: "sc-1fm7xjh-1"
-})(function (_ref10) {
-  var theme = _ref10.theme;
+})(function (_ref11) {
+  var theme = _ref11.theme;
   return {
     fill: theme.colors.white,
     filter: "drop-shadow(0px 1px 0px " + theme.colors.grey + ")"
@@ -65346,11 +65394,11 @@ function MaybeTooltip(_ref) {
     supportMobileTap: supportMobileTap
   }, /*#__PURE__*/React__default.createElement(TooltipTrigger, {
     asChild: true
-  }, children), /*#__PURE__*/React__default.createElement(TooltipContent, {
+  }, children), /*#__PURE__*/React__default.createElement($a093c7e1ec25a057$export$602eac185826482c, null, /*#__PURE__*/React__default.createElement(TooltipContent, {
     side: placement,
     className: className,
     maxWidth: maxWidth
-  }, tooltip)));
+  }, tooltip))));
 }
 
 var TruncatedTextFillWidth = function TruncatedTextFillWidth(_a) {