@doist/reactist 17.10.1 → 19.0.0

package/dist/reactist.cjs.development.js

@@ -10,16 +10,16 @@ var classNames = _interopDefault(require('classnames'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
 var tooltip = require('ariakit/tooltip');
 var portal = require('ariakit/portal');
-var ariakitUtils = require('ariakit-utils');
+var ariakitReactUtils = require('ariakit-react-utils');
 var useCallbackRef = require('use-callback-ref');
 var FocusLock = _interopDefault(require('react-focus-lock'));
 var ariaHidden = require('aria-hidden');
 var dialog = require('ariakit/dialog');
 var tab = require('ariakit/tab');
+var Ariakit = require('ariakit/menu');
 var ReactDOM = _interopDefault(require('react-dom'));
 var dayjs = _interopDefault(require('dayjs'));
 var LocalizedFormat = _interopDefault(require('dayjs/plugin/localizedFormat'));
-var Ariakit = require('ariakit/menu');
 var dialog$1 = require('@reach/dialog');
 
 function ownKeys(object, enumerableOnly) {
@@ -196,7 +196,7 @@ function mapResponsiveProp(fromValue, mapper) {
   };
 }
 
-var modules_54d944f2 = {"box":"c6a2474f","position-absolute":"_49e2264f","position-fixed":"a2c9755f","position-relative":"_1986121c","position-sticky":"c5be4e70","tablet-position-absolute":"c6d09c38","tablet-position-fixed":"_2bb75a11","tablet-position-relative":"e992df42","tablet-position-sticky":"d693740c","desktop-position-absolute":"a9f2e68e","desktop-position-fixed":"fca89ad4","desktop-position-relative":"_84913029","desktop-position-sticky":"_1f54b76e","display-block":"_78a04f11","display-flex":"_04f32a92","display-inline":"_00982f96","display-inlineBlock":"_9be0cd8f","display-inlineFlex":"_7ff24869","display-none":"e85f798b","tablet-display-block":"cc7d9996","tablet-display-flex":"aec740e8","tablet-display-inline":"_5eb29888","tablet-display-inlineBlock":"_7399782e","tablet-display-inlineFlex":"_2a4eeb4a","tablet-display-none":"cbd91c8d","desktop-display-block":"d830ca47","desktop-display-flex":"_48cb59a8","desktop-display-inline":"cd0008da","desktop-display-inlineBlock":"_9826a4c8","desktop-display-inlineFlex":"_3e3e729b","desktop-display-none":"_183faf15","flexDirection-column":"eb8408ce","flexDirection-row":"cc313af7","tablet-flexDirection-column":"_571a8cb5","tablet-flexDirection-row":"_03a092d9","desktop-flexDirection-column":"_28991a11","desktop-flexDirection-row":"_7de969fe","flexWrap-wrap":"a6716a2d","flexWrap-nowrap":"_80a7d7fe","flexShrink-0":"_88012354","flexGrow-0":"_6cce36ca","flexGrow-1":"ee7114e6","alignItems-flexStart":"d482b846","alignItems-center":"b7b3664a","alignItems-flexEnd":"_3ca6f2cc","alignItems-baseline":"f97f2803","tablet-alignItems-flexStart":"_57269e2f","tablet-alignItems-center":"_1104d48d","tablet-alignItems-flexEnd":"_86b85059","tablet-alignItems-baseline":"_884972d7","desktop-alignItems-flexStart":"_55026d8f","desktop-alignItems-center":"_49c0fe6f","desktop-alignItems-flexEnd":"_7f55b215","desktop-alignItems-baseline":"da3d398e","justifyContent-flexStart":"f64f71c8","justifyContent-center":"_85286fa2","justifyContent-flexEnd":"cf4ec4c9","justifyContent-spaceAround":"bd407abb","justifyContent-spaceBetween":"a6ae7538","justifyContent-spaceEvenly":"_0e4d97f7","tablet-justifyContent-flexStart":"f2417980","tablet-justifyContent-center":"_5dab5532","tablet-justifyContent-flexEnd":"_4f8d866f","tablet-justifyContent-spaceAround":"_2090c016","tablet-justifyContent-spaceBetween":"ecde71f9","tablet-justifyContent-spaceEvenly":"d779c879","desktop-justifyContent-flexStart":"eb59e0ec","desktop-justifyContent-center":"_4be33fff","desktop-justifyContent-flexEnd":"_14f5eeab","desktop-justifyContent-spaceBetween":"_6fc4e2ed","alignSelf-stretch":"ac494732","alignSelf-flexStart":"_32b61baa","alignSelf-center":"_757c3504","alignSelf-flexEnd":"_539c72bc","alignSelf-baseline":"_2c0ed225","tablet-alignSelf-stretch":"f5896cb5","tablet-alignSelf-flexStart":"_2313a9cc","tablet-alignSelf-center":"_2cbc3335","tablet-alignSelf-flexEnd":"_5b1e6221","tablet-alignSelf-baseline":"fd0f9da4","desktop-alignSelf-stretch":"bef42d6a","desktop-alignSelf-flexStart":"_73620997","desktop-alignSelf-center":"_4eeafebd","desktop-alignSelf-flexEnd":"_944043da","desktop-alignSelf-baseline":"_18913c93","overflow-hidden":"_57850d52","overflow-auto":"bcc25aac","overflow-visible":"eabdf554","overflow-scroll":"_382f77d7","height-full":"e7a8b591","bg-default":"_64eb02c8","bg-aside":"_4bc1d066","bg-highlight":"_7a672ba1","bg-selected":"_3191f73c","bg-toast":"_2b535d30","borderRadius-standard":"_75e98b4e","borderRadius-full":"_51ff4c0f","border-primary":"b9c6f2a1","border-secondary":"_54355849","border-tertiary":"_6199baf2","textAlign-start":"a144300d","textAlign-center":"_48affbca","textAlign-end":"_6bfe8b19","textAlign-justify":"a1168ad5","tablet-textAlign-start":"_00a122fe","tablet-textAlign-center":"_440cb970","tablet-textAlign-end":"_7d161401","tablet-textAlign-justify":"_09dfcdd3","desktop-textAlign-start":"_3ad9923a","desktop-textAlign-center":"_1b158a32","desktop-textAlign-end":"_9255e83c","desktop-textAlign-justify":"_2138258d"};
+var modules_54d944f2 = {"box":"_2a3b75a1","position-absolute":"_2286072d","position-fixed":"_0847ebf3","position-relative":"_9015266f","position-sticky":"_572136cd","tablet-position-absolute":"dec0da3c","tablet-position-fixed":"eb3f61a4","tablet-position-relative":"_6a9d01dd","tablet-position-sticky":"cf9268ba","desktop-position-absolute":"_6579cc9c","desktop-position-fixed":"_3a6a421f","desktop-position-relative":"_3a6950ac","desktop-position-sticky":"_142cd372","display-block":"_9a084bff","display-flex":"_509a57b4","display-inline":"_4a786bb9","display-inlineBlock":"_5d644b40","display-inlineFlex":"_973d00d0","display-none":"_3e4f26a6","tablet-display-block":"d525fe3a","tablet-display-flex":"_316c9f4b","tablet-display-inline":"_5e788d98","tablet-display-inlineBlock":"_851fc6b8","tablet-display-inlineFlex":"c16ba46a","tablet-display-none":"_759c0c1a","desktop-display-block":"c374b455","desktop-display-flex":"_8a854d8f","desktop-display-inline":"_805fa8dc","desktop-display-inlineBlock":"ab26af05","desktop-display-inlineFlex":"_9bd12ba4","desktop-display-none":"_581476ce","flexDirection-column":"_1fb9d90e","flexDirection-row":"e5a9206f","tablet-flexDirection-column":"_3e6a0be1","tablet-flexDirection-row":"e9e2e53a","desktop-flexDirection-column":"c7d6b073","desktop-flexDirection-row":"_935269b4","flexWrap-wrap":"_3692f9c2","flexWrap-nowrap":"_55f6f487","flexShrink-0":"d5d0d34a","flexGrow-0":"d8ff7933","flexGrow-1":"_4a93668a","alignItems-flexStart":"_5a8c5a77","alignItems-center":"_50ba6b6b","alignItems-flexEnd":"_3963f790","alignItems-baseline":"_55ef2d4e","tablet-alignItems-flexStart":"_3e2bfb5d","tablet-alignItems-center":"a99be1ab","tablet-alignItems-flexEnd":"fa8221fe","tablet-alignItems-baseline":"e83669a0","desktop-alignItems-flexStart":"_65e6b537","desktop-alignItems-center":"db356482","desktop-alignItems-flexEnd":"acc08587","desktop-alignItems-baseline":"ad033867","justifyContent-flexStart":"_985b733f","justifyContent-center":"_95a98d2a","justifyContent-flexEnd":"be9bf31a","justifyContent-spaceAround":"a89d8798","justifyContent-spaceBetween":"_904ef8fe","justifyContent-spaceEvenly":"_489975d5","tablet-justifyContent-flexStart":"a7175ae7","tablet-justifyContent-center":"_7334dead","tablet-justifyContent-flexEnd":"_746de733","tablet-justifyContent-spaceAround":"_6d09398a","tablet-justifyContent-spaceBetween":"c2324c1d","tablet-justifyContent-spaceEvenly":"_04bd6e07","desktop-justifyContent-flexStart":"_39b310de","desktop-justifyContent-center":"_0dc77292","desktop-justifyContent-flexEnd":"_96c15bd8","desktop-justifyContent-spaceBetween":"_096111a6","alignSelf-stretch":"_35d69587","alignSelf-flexStart":"f46f3a67","alignSelf-center":"fb6a8035","alignSelf-flexEnd":"d3193acd","alignSelf-baseline":"_1154f656","tablet-alignSelf-stretch":"_298e04af","tablet-alignSelf-flexStart":"_2c729d24","tablet-alignSelf-center":"_9ea5e943","tablet-alignSelf-flexEnd":"_02266425","tablet-alignSelf-baseline":"c16a5800","desktop-alignSelf-stretch":"_2ec9eb74","desktop-alignSelf-flexStart":"_34f1fb03","desktop-alignSelf-center":"_77c58550","desktop-alignSelf-flexEnd":"_9ffa429f","desktop-alignSelf-baseline":"_6cc14c5d","overflow-hidden":"f6342c26","overflow-auto":"_10a2f952","overflow-visible":"f20b8b87","overflow-scroll":"_4954f87c","height-full":"a83fb2f5","bg-default":"d85cf739","bg-aside":"_4eb1d749","bg-highlight":"da1ccaa5","bg-selected":"_82dc28e7","bg-toast":"_63ba3dfa","borderRadius-standard":"_34cd2b5e","borderRadius-full":"_5fe4d5e3","border-primary":"_1b34ffd9","border-secondary":"_705519b0","border-tertiary":"_67adc238","textAlign-start":"fff8bff0","textAlign-center":"f973eed0","textAlign-end":"_225acbd7","textAlign-justify":"dea1e8ba","tablet-textAlign-start":"_919d6c8f","tablet-textAlign-center":"ab9d970e","tablet-textAlign-end":"b5b45e0e","tablet-textAlign-justify":"bd6e42e0","desktop-textAlign-start":"_15120506","desktop-textAlign-center":"_337333b5","desktop-textAlign-end":"_221db0fb","desktop-textAlign-justify":"_29ea9711"};
 
 var modules_b537a8ee = {"paddingTop-xsmall":"c4803194","paddingTop-small":"_4e9ab24b","paddingTop-medium":"_1d226e27","paddingTop-large":"eb6097f1","paddingTop-xlarge":"d3229ba4","paddingTop-xxlarge":"_47978ba4","tablet-paddingTop-xsmall":"f987719c","tablet-paddingTop-small":"_8dbc4b4d","tablet-paddingTop-medium":"ae44fe07","tablet-paddingTop-large":"ffe9548d","tablet-paddingTop-xlarge":"f2b76a44","tablet-paddingTop-xxlarge":"c6eb8f43","desktop-paddingTop-xsmall":"_8699b560","desktop-paddingTop-small":"_02c374b7","desktop-paddingTop-medium":"_0dd0332f","desktop-paddingTop-large":"da55f1f6","desktop-paddingTop-xlarge":"_8ef2a278","desktop-paddingTop-xxlarge":"_8b493b28","paddingRight-xsmall":"_211eebc7","paddingRight-small":"ad0ccf15","paddingRight-medium":"a03e39af","paddingRight-large":"f0941ead","paddingRight-xlarge":"e47c5a43","paddingRight-xxlarge":"e849a5cf","tablet-paddingRight-xsmall":"_85374228","tablet-paddingRight-small":"_89df37b9","tablet-paddingRight-medium":"_1cc50ebe","tablet-paddingRight-large":"_1060982b","tablet-paddingRight-xlarge":"be58847d","tablet-paddingRight-xxlarge":"_45093484","desktop-paddingRight-xsmall":"f8d99d6a","desktop-paddingRight-small":"efa076d9","desktop-paddingRight-medium":"e59caa64","desktop-paddingRight-large":"da42f46a","desktop-paddingRight-xlarge":"b3ee2580","desktop-paddingRight-xxlarge":"_3ef94658","paddingBottom-xsmall":"b0e6eab4","paddingBottom-small":"_9510d053","paddingBottom-medium":"d7af60c9","paddingBottom-large":"b75f86cd","paddingBottom-xlarge":"fbd4ce29","paddingBottom-xxlarge":"_33e3ad63","tablet-paddingBottom-xsmall":"f0302da7","tablet-paddingBottom-small":"_4f9b8012","tablet-paddingBottom-medium":"_4333e20e","tablet-paddingBottom-large":"_30bbc76c","tablet-paddingBottom-xlarge":"ba5a4008","tablet-paddingBottom-xxlarge":"_423a3b1a","desktop-paddingBottom-xsmall":"b40139b7","desktop-paddingBottom-small":"f96071fa","desktop-paddingBottom-medium":"fe803c9a","desktop-paddingBottom-large":"_01686eb9","desktop-paddingBottom-xlarge":"afa763d8","desktop-paddingBottom-xxlarge":"a95785f1","paddingLeft-xsmall":"cad4e2ec","paddingLeft-small":"d70b3c17","paddingLeft-medium":"_8c851bd6","paddingLeft-large":"_078feb3c","paddingLeft-xlarge":"_76ab968c","paddingLeft-xxlarge":"aaca85d7","tablet-paddingLeft-xsmall":"_5eb0e5aa","tablet-paddingLeft-small":"_0384fb4f","tablet-paddingLeft-medium":"edffff6f","tablet-paddingLeft-large":"_873b9a46","tablet-paddingLeft-xlarge":"_89105db5","tablet-paddingLeft-xxlarge":"db1966fe","desktop-paddingLeft-xsmall":"b17f826b","desktop-paddingLeft-small":"_6dc83610","desktop-paddingLeft-medium":"_3421b8b2","desktop-paddingLeft-large":"_68cec7a6","desktop-paddingLeft-xlarge":"_94bde020","desktop-paddingLeft-xxlarge":"b94ee579"};
 
@@ -454,7 +454,7 @@ const HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually
   }));
 });
 
-const _excluded$6 = ["children", "content", "position", "gapSize", "className"];
+var modules_95f1407a = {"tooltip":"_2b075a8d"};
 
 const SHOW_DELAY = 500;
 const HIDE_DELAY = 100;
@@ -468,16 +468,14 @@ function useDelayedTooltipState(initialState) {
   }), [delay, tooltipState]);
 }
 
-function Tooltip(_ref) {
-  let {
-    children,
-    content,
-    position = 'top',
-    gapSize = 3,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$6);
-
+function Tooltip({
+  children,
+  content,
+  position = 'top',
+  gapSize = 3,
+  withArrow = false,
+  exceptionallySetClassName
+}) {
   const state = useDelayedTooltipState({
     placement: position,
     gutter: gapSize
@@ -495,19 +493,19 @@ function Tooltip(_ref) {
    * Prevents the tooltip from automatically firing on focus all the time. This is to prevent
    * tooltips from showing when the trigger element is focused back after a popover or dialog that
    * it opened was closed. See link below for more details.
-   * @see https://github.com/reakit/reakit/discussions/749
+   * @see https://github.com/ariakit/ariakit/discussions/749
    */
 
 
   function handleFocus(event) {
     var _child$props;
 
-    // If focus is not followed by a key up event, does it mean that it's not
-    // an intentional keyboard focus? Not sure but it seems to work.
-    // This may be resolved soon in an upcoming version of reakit:
-    // https://github.com/reakit/reakit/issues/750
-    function handleKeyUp(e) {
-      const eventKey = e.key;
+    // If focus is not followed by a key up event, does it mean that it's not an intentional
+    // keyboard focus? Not sure but it seems to work.
+    // This may be resolved soon in an upcoming version of ariakit:
+    // https://github.com/ariakit/ariakit/issues/750
+    function handleKeyUp(event) {
+      const eventKey = event.key;
 
       if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
         state.show();
@@ -516,25 +514,44 @@ function Tooltip(_ref) {
 
     event.currentTarget.addEventListener('keyup', handleKeyUp, {
       once: true
-    }); // Prevent tooltip.show from being called by TooltipReference
+    });
+    event.preventDefault(); // Prevent tooltip.show from being called by TooltipReference
 
-    event.preventDefault();
     child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.onFocus == null ? void 0 : _child$props.onFocus(event);
   }
 
+  function handleBlur(event) {
+    var _child$props2;
+
+    state.hide();
+    child == null ? void 0 : (_child$props2 = child.props) == null ? void 0 : _child$props2.onBlur == null ? void 0 : _child$props2.onBlur(event);
+  }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(tooltip.TooltipAnchor, {
     state: state,
     ref: child.ref,
-    onFocus: handleFocus
+    described: true
   }, anchorProps => {
     // Let child props override anchor props so user can specify attributes like tabIndex
     // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
     // by applying the replacement component/element twice
-    return /*#__PURE__*/React.cloneElement(child, _objectSpread2(_objectSpread2({}, anchorProps), child.props));
-  }), state.visible ? /*#__PURE__*/React.createElement(tooltip.Tooltip, _objectSpread2(_objectSpread2({}, props), {}, {
+    return /*#__PURE__*/React.cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, anchorProps), child.props), {}, {
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }));
+  }), state.open ? /*#__PURE__*/React.createElement(Box, {
+    as: tooltip.Tooltip,
     state: state,
-    className: classNames('reactist_tooltip', className)
-  }), typeof content === 'function' ? content() : content) : null);
+    className: [modules_95f1407a.tooltip, exceptionallySetClassName],
+    background: "toast",
+    borderRadius: "standard",
+    paddingX: "small",
+    paddingY: "xsmall",
+    maxWidth: "medium",
+    width: "fitContent",
+    overflow: "hidden",
+    textAlign: "center"
+  }, withArrow ? /*#__PURE__*/React.createElement(tooltip.TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
 }
 // Internal helpers
 //
@@ -592,7 +609,7 @@ function Spinner({
 
 var modules_b9569bce = {"baseButton":"_8313bd46","label":"_0051d171","shape-rounded":"_8eb8f0fa","size-small":"_8b7f1a82","size-normal":"_5e45d59f","size-large":"_95951888","disabled":"_43792df1","iconButton":"_8644eccb","startIcon":"a44d4350","endIcon":"_073e1aa4","variant-primary":"_7a4dbd5f","variant-secondary":"_54d56775","variant-tertiary":"_907a61ca","variant-quaternary":"f169a390","tone-destructive":"ccb3eb8c"};
 
-const _excluded$7 = ["as", "variant", "tone", "size", "shape", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon", "width", "align"];
+const _excluded$6 = ["as", "variant", "tone", "size", "shape", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon", "width", "align"];
 
 function preventDefault(event) {
   event.preventDefault();
@@ -625,7 +642,7 @@ const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, r
     width = 'auto',
     align = 'center'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$6);
 
   const isDisabled = loading || disabled;
   const buttonElement = /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -657,7 +674,7 @@ const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, r
   }, buttonElement) : buttonElement;
 });
 
-const _excluded$8 = ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"];
+const _excluded$7 = ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"];
 /**
  * A semantic button that also looks like a button, and provides all the necessary visual variants.
  * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
@@ -674,7 +691,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
     disabled = false,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   return /*#__PURE__*/React.createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
     as: "button",
@@ -688,7 +705,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   }));
 });
 
-const _excluded$9 = ["tone"];
+const _excluded$8 = ["tone"];
 const alertIconForTone = {
   info: AlertInfoIcon,
   positive: AlertPositiveIcon,
@@ -700,7 +717,7 @@ function AlertIcon(_ref) {
   let {
     tone
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   const Icon = alertIconForTone[tone];
   return Icon ? /*#__PURE__*/React.createElement(Icon, _objectSpread2({}, props)) : null;
@@ -813,7 +830,7 @@ function Alert({
   })) : null));
 }
 
-const _excluded$a = ["size", "exceptionallySetClassName"];
+const _excluded$9 = ["size", "exceptionallySetClassName"];
 const sizeMapping = {
   xsmall: 16,
   small: 24,
@@ -828,7 +845,7 @@ function Loading(_ref) {
     size = 'small',
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   const numericSize = (_sizeMapping$size = sizeMapping[size]) != null ? _sizeMapping$size : sizeMapping.small;
   const ariaLabel = props['aria-label'] ? props['aria-label'] : !props['aria-labelledby'] ? 'Loading…' : undefined;
@@ -871,7 +888,7 @@ function Notice({
 
 var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
 
-const _excluded$b = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
+const _excluded$a = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
 const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
   let {
     as,
@@ -883,7 +900,7 @@ const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
     lineClamp,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp != null ? lineClamp : 1) > 1;
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -899,7 +916,7 @@ const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
 
 var modules_d11e18f0 = {"stackedToastsView":"_8e9f0a55","toastContainer":"_121b9429","slot":"_6a2a04c5"};
 
-const _excluded$c = ["message", "description", "icon", "action", "onDismiss", "dismissLabel"];
+const _excluded$b = ["message", "description", "icon", "action", "onDismiss", "dismissLabel"];
 /**
  * A toast that shows a message, and an optional action associated with it.
  *
@@ -924,7 +941,7 @@ const StaticToast = /*#__PURE__*/React__default.forwardRef(function Toast(_ref,
     onDismiss,
     dismissLabel = 'Close'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   return /*#__PURE__*/React__default.createElement(Box, _objectSpread2({
     ref: ref,
@@ -1165,7 +1182,7 @@ function useToastsAnimation() {
   };
 }
 
-const _excluded$d = ["toastId"];
+const _excluded$c = ["toastId"];
 /** @private */
 
 const InternalToast = /*#__PURE__*/React__default.forwardRef(function InternalToast({
@@ -1274,7 +1291,7 @@ function ToastsProvider({
     let {
       toastId
     } = _ref,
-        props = _objectWithoutProperties(_ref, _excluded$d);
+        props = _objectWithoutProperties(_ref, _excluded$c);
 
     return /*#__PURE__*/React__default.createElement(InternalToast, _objectSpread2({
       key: toastId,
@@ -1350,7 +1367,7 @@ function Toast(props) {
 
 var modules_949d2ff4 = {"heading":"_71a1610c","weight-light":"_63750f40","tone-secondary":"_9ce984cf","tone-danger":"_1acad35e","size-largest":"_3da27a00","size-larger":"df220733","size-smaller":"eb373739","lineClampMultipleLines":"f53cfd2b","lineClamp-1":"e4819fc9","lineClamp-2":"a0ed6177","lineClamp-3":"_180d433e","lineClamp-4":"_40826ad9","lineClamp-5":"_5999b247"};
 
-const _excluded$e = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
+const _excluded$d = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
 const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   let {
     level,
@@ -1362,7 +1379,7 @@ const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
     align,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   // In TypeScript v4.1, this would be properly recognized without needing the type assertion
   // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
@@ -1379,7 +1396,7 @@ const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   }), children);
 });
 
-const _excluded$f = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
+const _excluded$e = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
 /**
  * A semantic link that looks like a button, exactly matching the `Button` component in all visual
  * aspects.
@@ -1396,7 +1413,7 @@ const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, r
     exceptionallySetClassName,
     openInNewTab = false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   return /*#__PURE__*/React.createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
@@ -1412,14 +1429,14 @@ const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, r
 
 var modules_3d05deee = {"container":"fdc181b3"};
 
-const _excluded$g = ["as", "openInNewTab", "exceptionallySetClassName"];
+const _excluded$f = ["as", "openInNewTab", "exceptionallySetClassName"];
 const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
   let {
     as = 'a',
     openInNewTab = false,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
@@ -1431,7 +1448,7 @@ const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref)
   }));
 });
 
-const _excluded$h = ["checked", "indeterminate", "disabled"];
+const _excluded$g = ["checked", "indeterminate", "disabled"];
 const svgPath = {
   checked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
   unchecked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
@@ -1470,7 +1487,7 @@ function CheckboxIcon(_ref) {
     indeterminate,
     disabled
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
   const pathKey = getPathKey({
     checked,
@@ -1491,7 +1508,7 @@ function CheckboxIcon(_ref) {
 
 var modules_664a6a80 = {"container":"_84dfdb83","disabled":"_131a2ca4","checked":"_95b1556d","keyFocused":"_49de7ebd","icon":"_6b4b1851","label":"_9047f3bd"};
 
-const _excluded$i = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
+const _excluded$h = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
 const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
@@ -1503,7 +1520,7 @@ const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref,
     defaultChecked,
     onChange
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   const isControlledComponent = typeof props.checked === 'boolean';
 
@@ -1522,7 +1539,7 @@ const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref,
   const [checkedState, setChecked] = React.useState((_ref2 = (_props$checked = props.checked) != null ? _props$checked : defaultChecked) != null ? _ref2 : false);
   const isChecked = (_props$checked2 = props.checked) != null ? _props$checked2 : checkedState;
   const internalRef = React.useRef(null);
-  const combinedRef = ariakitUtils.useForkRef(internalRef, ref);
+  const combinedRef = ariakitReactUtils.useForkRef(internalRef, ref);
   React.useEffect(function setIndeterminate() {
     if (internalRef.current && typeof indeterminate === 'boolean') {
       internalRef.current.indeterminate = indeterminate;
@@ -1718,7 +1735,7 @@ var modules_3f03ead6 = {"inputWrapper":"_66b448b3"};
 
 var modules_aaf25250 = {"inputWrapper":"fb09cd05","bordered":"f65f40dd","error":"_29118bf0","startIcon":"a40eb111"};
 
-const _excluded$j = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
+const _excluded$i = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
 const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   let {
     variant = 'default',
@@ -1733,11 +1750,11 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
     hidden,
     'aria-describedby': ariaDescribedBy
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
   const id = useId(props.id);
   const internalRef = React.useRef(null);
-  const inputRef = ariakitUtils.useForkRef(internalRef, ref);
+  const inputRef = ariakitReactUtils.useForkRef(internalRef, ref);
   const [isPasswordVisible, setPasswordVisible] = React.useState(false);
 
   function togglePasswordVisibility() {
@@ -1782,7 +1799,7 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
 
 var modules_1fa9b208 = {"selectWrapper":"a804edbf","bordered":"_50a3655f","error":"a6d38abf"};
 
-const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded$j = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
 const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   let {
     variant = 'default',
@@ -1798,7 +1815,7 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     hidden,
     'aria-describedby': ariaDescribedBy
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+      props = _objectWithoutProperties(_ref, _excluded$j);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     variant: variant,
@@ -1836,7 +1853,7 @@ function SelectChevron(props) {
 
 var modules_8e05f7c9 = {"container":"ec63c3f1","disabled":"_7de9c06d","checked":"a37981fc","toggle":"_2a17ac45","label":"_68cc9707","handle":"_91409c7f","keyFocused":"a6490371"};
 
-const _excluded$l = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+const _excluded$k = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
 const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
@@ -1852,7 +1869,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
     'aria-labelledby': originalAriaLabelledby,
     onChange
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   const id = useId(originalId);
   const hintId = useId();
@@ -1912,7 +1929,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
 
 var modules_2728c236 = {"textAreaContainer":"_21dbfa84","innerContainer":"_43588660","bordered":"f081b428","error":"a862f0e5","autoExpand":"_46360b15"};
 
-const _excluded$m = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
+const _excluded$l = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   let {
     variant = 'default',
@@ -1929,7 +1946,7 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
     rows,
     autoExpand = false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$l);
 
   const containerRef = React.useRef(null);
   const internalRef = React.useRef(null);
@@ -1973,7 +1990,7 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   }))));
 });
 
-const _excluded$n = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startIcon"];
+const _excluded$m = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startIcon"];
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
@@ -1990,7 +2007,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     'aria-describedby': ariaDescribedBy,
     startIcon
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$n);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   const internalRef = React.useRef(null);
   const combinedRef = useCallbackRef.useMergeRefs([ref, internalRef]);
@@ -2059,7 +2076,7 @@ function emailToIndex(email, maxIndex) {
 
 var modules_08f3eeac = {"avatar":"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
 
-const _excluded$o = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
+const _excluded$n = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
 const AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
 
 function Avatar(_ref) {
@@ -2071,7 +2088,7 @@ function Avatar(_ref) {
     colorList = AVATAR_COLORS,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
   const userInitials = getInitials(user.name) || getInitials(user.email);
   const avatarSize = size ? size : 'l';
@@ -2091,27 +2108,28 @@ function Avatar(_ref) {
 
 Avatar.displayName = 'Avatar';
 
-var modules_33c7c985 = {"badge":"_1eb9b834","badge-neutral":"e02d9b99","badge-positive":"_0243fb89","badge-color":"_85c0ffa3"};
+var modules_33c7c985 = {"badge":"c717b894","badge-info":"_0fddcc47","badge-positive":"_62550d9b","badge-promote":"_5fdf5bab","badge-attention":"_2d52906f"};
+
+const _excluded$o = ["tone", "label"];
 
-const _excluded$p = ["variant", "children", "exceptionallySetClassName"];
-const Badge = /*#__PURE__*/polymorphicComponent(function Badge(_ref, ref) {
+function Badge(_ref) {
   let {
-    variant = 'neutral',
-    children,
-    exceptionallySetClassName
+    tone,
+    label
   } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded$p);
+      props = _objectWithoutProperties(_ref, _excluded$o);
 
-  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, rest), {}, {
-    ref: ref,
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    as: "span" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)
+    ,
     display: "inline",
-    className: [modules_33c7c985.badge, modules_33c7c985["badge-" + variant], exceptionallySetClassName]
-  }), children);
-});
+    className: [modules_33c7c985.badge, modules_33c7c985["badge-" + tone]]
+  }), label);
+}
 
 var modules_8f59d13b = {"overlay":"_868392ae","fadein":"_63d7ee15","fitContent":"b8548bf2","container":"_31956461","full":"_1007df83","large":"_10c275aa","medium":"_0ac526b4","small":"_30f38fdb","xlarge":"_54868e8b","expand":"c0bc68bc","buttonContainer":"_6527332a","headerContent":"_4750dc1b"};
 
-const _excluded$q = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement"],
+const _excluded$p = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement"],
       _excluded2$1 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
@@ -2149,16 +2167,16 @@ function Modal(_ref) {
     children,
     portalElement
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$q);
+      props = _objectWithoutProperties(_ref, _excluded$p);
 
-  const setVisible = React.useCallback(visible => {
+  const setOpen = React.useCallback(visible => {
     if (!visible) {
       onDismiss == null ? void 0 : onDismiss();
     }
   }, [onDismiss]);
   const state = dialog.useDialogState({
-    visible: isOpen,
-    setVisible
+    open: isOpen,
+    setOpen
   });
   const contextValue = React.useMemo(() => ({
     onDismiss,
@@ -2190,9 +2208,7 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(portal.Portal // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null
-  , {
-    // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null
+  return /*#__PURE__*/React.createElement(portal.Portal, {
     portalRef: portalRef,
     portalElement: portalElement
   }, /*#__PURE__*/React.createElement(Box, {
@@ -2400,7 +2416,7 @@ function usePrevious(value) {
 
 var modules_40c67f5b = {"tab":"e96bf360","track":"_430e252d","tab-neutral":"f631ccbe","tab-themed":"_6ba96acc","track-neutral":"ef4cd8d3","track-themed":"_344b3b10"};
 
-const _excluded$r = ["as", "children", "id", "exceptionallySetClassName"],
+const _excluded$q = ["as", "children", "id", "exceptionallySetClassName"],
       _excluded2$2 = ["children", "space"],
       _excluded3$1 = ["children", "id", "as", "render"];
 const TabsContext = /*#__PURE__*/React.createContext(null);
@@ -2451,7 +2467,7 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
     id,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$r);
+      props = _objectWithoutProperties(_ref, _excluded$q);
 
   const tabContextValue = React.useContext(TabsContext);
 
@@ -2561,101 +2577,337 @@ function TabAwareSlot({
   }) : null;
 }
 
-const _excluded$s = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
+const _excluded$r = ["children", "onItemSelect"],
+      _excluded2$3 = ["exceptionallySetClassName"],
+      _excluded3$2 = ["as"],
+      _excluded4$1 = ["exceptionallySetClassName", "modal"],
+      _excluded5$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
+      _excluded6 = ["label", "children", "exceptionallySetClassName"];
+const MenuContext = /*#__PURE__*/React.createContext( // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
+// (it is normally obtained by calling useMenuState but we can't call hooks outside components).
+// This is however of little consequence since this value is only used if some of the components
+// are used outside Menu, something that should not happen and we do not support.
+// @ts-expect-error
+{});
 /**
- * @deprecated
+ * Wrapper component to control a menu. It does not render anything, only providing the state
+ * management for the menu components inside it.
  */
 
-const Button$1 = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
+function Menu(_ref) {
   let {
-    type = 'button',
-    variant,
-    size = 'default',
-    loading = false,
-    disabled = false,
-    tooltip,
-    onClick,
-    children
+    children,
+    onItemSelect
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$s);
-
-  const className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
-    'reactist_button--loading': loading
-  }, props.className);
-  const button = /*#__PURE__*/React.createElement("button", _objectSpread2(_objectSpread2({}, props), {}, {
-    ref: ref,
-    type: type,
-    className: className,
-    "aria-disabled": disabled || loading,
-    onClick: disabled || loading ? undefined : onClick
-  }), children);
-  return tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-    content: tooltip
-  }, button) : button;
-});
-Button$1.displayName = 'Button';
-Button$1.defaultProps = {
-  size: 'default',
-  loading: false,
-  disabled: false
-};
-
-const _excluded$t = ["children", "onClick", "tooltip", "className"];
+      props = _objectWithoutProperties(_ref, _excluded$r);
 
-class Box$1 extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-    this._timeout = void 0;
+  const [anchorRect, handleAnchorRectChange] = React.useState(null);
+  const getAnchorRect = React.useMemo(() => {
+    return anchorRect ? () => anchorRect : undefined;
+  }, [anchorRect]);
+  const state = Ariakit.useMenuState(_objectSpread2({
+    focusLoop: true,
+    gutter: 8,
+    shift: 4,
+    getAnchorRect
+  }, props));
+  const handleItemSelect = React.useCallback(function handleItemSelect(value) {
+    if (onItemSelect) onItemSelect(value);
+  }, [onItemSelect]);
+  const value = React.useMemo(() => ({
+    state,
+    handleItemSelect,
+    handleAnchorRectChange
+  }), [state, handleItemSelect]);
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: value
+  }, children);
+}
+/**
+ * A button to toggle a dropdown menu open or closed.
+ */
 
-    this._handleClickOutside = event => {
-      const dropdownDOMNode = ReactDOM.findDOMNode(this);
-      if (dropdownDOMNode && !dropdownDOMNode.contains(event.target)) this._toggleShowBody();else if (!this.props.allowBodyInteractions) {
-        // won't close when body interactions are allowed
-        this._timeout = setTimeout(() => {
-          if (this.state.showBody) {
-            this._toggleShowBody();
-          }
-        }, 100);
-      }
-    };
 
-    this._toggleShowBody = () => {
-      if (!this.state.showBody) {
-        // will show
-        if (this.props.onShowBody) this.props.onShowBody();
-        document.addEventListener('click', this._handleClickOutside, true);
-      } else {
-        // will hide
-        if (this.props.onHideBody) this.props.onHideBody();
-        document.removeEventListener('click', this._handleClickOutside, true);
-      }
+const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
+  let {
+    exceptionallySetClassName
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$3);
 
-      this.setState({
-        showBody: !this.state.showBody
-      });
-    };
+  const {
+    state
+  } = React.useContext(MenuContext);
+  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
+    ref: ref,
+    className: classNames('reactist_menubutton', exceptionallySetClassName)
+  }));
+}); //
+// ContextMenuTrigger
+//
 
-    this._setPosition = body => {
-      if (body) {
-        const scrollingParent = document.getElementById(this.props.scrolling_parent ? this.props.scrolling_parent : '');
+const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
+  let {
+    as: component = 'div'
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3$2);
 
-        if (scrollingParent) {
-          const dropdown = ReactDOM.findDOMNode(this);
+  const {
+    handleAnchorRectChange,
+    state
+  } = React.useContext(MenuContext);
+  const handleContextMenu = React.useCallback(event => {
+    event.preventDefault();
+    handleAnchorRectChange({
+      x: event.clientX,
+      y: event.clientY
+    });
+    state.show();
+  }, [handleAnchorRectChange, state]);
+  return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
+    onContextMenu: handleContextMenu,
+    ref
+  }));
+});
+/**
+ * The dropdown menu itself, containing a list of menu items.
+ */
 
-          if (!dropdown) {
-            return;
-          }
+const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
+  let {
+    exceptionallySetClassName,
+    modal = true
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4$1);
 
-          const dropdownVerticalPosition = ReactDOM.findDOMNode(this).offsetTop;
-          const dropdownTrigger = dropdown.querySelector('.trigger');
+  const {
+    state
+  } = React.useContext(MenuContext);
+  return state.open ? /*#__PURE__*/React.createElement(portal.Portal, {
+    preserveTabOrder: true
+  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
+    ref: ref,
+    className: classNames('reactist_menulist', exceptionallySetClassName),
+    modal: modal
+  }))) : null;
+});
+/**
+ * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
+ * callback.
+ */
 
-          if (!dropdownTrigger) {
-            return;
-          }
+const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
+  let {
+    value,
+    children,
+    onSelect,
+    hideOnSelect = true,
+    onClick,
+    exceptionallySetClassName,
+    as = 'button'
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5$1);
 
-          const dropdownTriggerHeight = dropdownTrigger.clientHeight;
-          const dropdownBodyHeight = body.clientHeight;
-          const scrollingParentHeight = scrollingParent.clientHeight;
+  const {
+    handleItemSelect,
+    state
+  } = React.useContext(MenuContext);
+  const {
+    hide
+  } = state;
+  const handleClick = React.useCallback(function handleClick(event) {
+    onClick == null ? void 0 : onClick(event);
+    const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
+    const shouldClose = onSelectResult !== false && hideOnSelect;
+    handleItemSelect(value);
+    if (shouldClose) hide();
+  }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
+  return /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
+    as: as,
+    state: state,
+    ref: ref,
+    onClick: handleClick,
+    className: exceptionallySetClassName,
+    hideOnClick: false
+  }), children);
+});
+/**
+ * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
+ * a sub-menu.
+ *
+ * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
+ * `MenuList`).
+ *
+ * ```jsx
+ * <MenuItem label="Edit profile" />
+ * <SubMenu>
+ *   <MenuButton>More options</MenuButton>
+ *   <MenuList>
+ *     <MenuItem label="Preferences" />
+ *     <MenuItem label="Sign out" />
+ *   </MenuList>
+ * </SubMenu>
+ * ```
+ *
+ * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
+ * opening a sub-menu with the menu items list below it.
+ */
+
+const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
+  children,
+  onItemSelect
+}, ref) {
+  const {
+    handleItemSelect: parentMenuItemSelect,
+    state
+  } = React.useContext(MenuContext);
+  const {
+    hide: parentMenuHide
+  } = state;
+  const handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
+    if (onItemSelect) onItemSelect(value);
+    parentMenuItemSelect(value);
+    parentMenuHide();
+  }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
+  const [button, list] = React.Children.toArray(children); // Ariakit needs to be able to pass props to the MenuButton
+  // and combine it with the MenuItem component
+
+  const renderMenuButton = React.useCallback(function renderMenuButton(props) {
+    return /*#__PURE__*/React.cloneElement(button, props);
+  }, [button]);
+  return /*#__PURE__*/React.createElement(Menu, {
+    onItemSelect: handleSubItemSelect
+  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, {
+    as: "div",
+    state: state,
+    ref: ref,
+    hideOnClick: false
+  }, renderMenuButton), list);
+});
+/**
+ * A way to semantically group some menu items.
+ *
+ * This group does not add any visual separator. You can do that yourself adding `<hr />` elements
+ * before and/or after the group if you so wish.
+ */
+
+const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
+  let {
+    label,
+    children,
+    exceptionallySetClassName
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
+
+  const {
+    state
+  } = React.useContext(MenuContext);
+  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref,
+    state: state,
+    className: exceptionallySetClassName
+  }), label ? /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: "reactist_menugroup__label"
+  }, label) : null, children);
+});
+
+const _excluded$s = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
+/**
+ * @deprecated
+ */
+
+const Button$1 = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
+  let {
+    type = 'button',
+    variant,
+    size = 'default',
+    loading = false,
+    disabled = false,
+    tooltip,
+    onClick,
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$s);
+
+  const className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
+    'reactist_button--loading': loading
+  }, props.className);
+  const button = /*#__PURE__*/React.createElement("button", _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref,
+    type: type,
+    className: className,
+    "aria-disabled": disabled || loading,
+    onClick: disabled || loading ? undefined : onClick
+  }), children);
+  return tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: tooltip
+  }, button) : button;
+});
+Button$1.displayName = 'Button';
+Button$1.defaultProps = {
+  size: 'default',
+  loading: false,
+  disabled: false
+};
+
+const _excluded$t = ["children", "onClick", "tooltip", "className"];
+
+class Box$1 extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this._timeout = void 0;
+
+    this._handleClickOutside = event => {
+      const dropdownDOMNode = ReactDOM.findDOMNode(this);
+      if (dropdownDOMNode && !dropdownDOMNode.contains(event.target)) this._toggleShowBody();else if (!this.props.allowBodyInteractions) {
+        // won't close when body interactions are allowed
+        this._timeout = setTimeout(() => {
+          if (this.state.showBody) {
+            this._toggleShowBody();
+          }
+        }, 100);
+      }
+    };
+
+    this._toggleShowBody = () => {
+      if (!this.state.showBody) {
+        // will show
+        if (this.props.onShowBody) this.props.onShowBody();
+        document.addEventListener('click', this._handleClickOutside, true);
+      } else {
+        // will hide
+        if (this.props.onHideBody) this.props.onHideBody();
+        document.removeEventListener('click', this._handleClickOutside, true);
+      }
+
+      this.setState({
+        showBody: !this.state.showBody
+      });
+    };
+
+    this._setPosition = body => {
+      if (body) {
+        const scrollingParent = document.getElementById(this.props.scrolling_parent ? this.props.scrolling_parent : '');
+
+        if (scrollingParent) {
+          const dropdown = ReactDOM.findDOMNode(this);
+
+          if (!dropdown) {
+            return;
+          }
+
+          const dropdownVerticalPosition = ReactDOM.findDOMNode(this).offsetTop;
+          const dropdownTrigger = dropdown.querySelector('.trigger');
+
+          if (!dropdownTrigger) {
+            return;
+          }
+
+          const dropdownTriggerHeight = dropdownTrigger.clientHeight;
+          const dropdownBodyHeight = body.clientHeight;
+          const scrollingParentHeight = scrollingParent.clientHeight;
           const scrollingParentOffset = scrollingParent.scrollTop;
           const bottomOffset = scrollingParentHeight + scrollingParentOffset - dropdownVerticalPosition - dropdownTriggerHeight;
           const top = bottomOffset < dropdownBodyHeight;
@@ -3368,241 +3620,6 @@ Time.defaultProps = {
   }
 };
 
-const _excluded$v = ["children", "onItemSelect"],
-      _excluded2$3 = ["exceptionallySetClassName"],
-      _excluded3$2 = ["as"],
-      _excluded4$1 = ["exceptionallySetClassName"],
-      _excluded5$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
-      _excluded6 = ["label", "children", "exceptionallySetClassName"];
-const MenuContext = /*#__PURE__*/React.createContext( // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
-// (it is normally obtained by calling useMenuState but we can't call hooks outside components).
-// This is however of little consequence since this value is only used if some of the components
-// are used outside Menu, something that should not happen and we do not support.
-// @ts-expect-error
-{});
-/**
- * Wrapper component to control a menu. It does not render anything, only providing the state
- * management for the menu components inside it. Note that if you are relying on the `[role='menu']`
- * attribute to style the menu list, it is applied a `menubar` role instead in Safari.
- */
-
-function Menu(_ref) {
-  let {
-    children,
-    onItemSelect
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$v);
-
-  const [anchorRect, handleAnchorRectChange] = React.useState(null);
-  const getAnchorRect = React.useMemo(() => {
-    return anchorRect ? () => anchorRect : undefined;
-  }, [anchorRect]);
-  const state = Ariakit.useMenuState(_objectSpread2({
-    focusLoop: true,
-    gutter: 8,
-    shift: 4,
-    getAnchorRect
-  }, props));
-  const handleItemSelect = React.useCallback(function handleItemSelect(value) {
-    if (onItemSelect) onItemSelect(value);
-  }, [onItemSelect]);
-  const value = React.useMemo(() => ({
-    state,
-    handleItemSelect,
-    handleAnchorRectChange
-  }), [state, handleItemSelect]);
-  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
-    value: value
-  }, children);
-}
-/**
- * A button to toggle a dropdown menu open or closed.
- */
-
-
-const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
-  let {
-    exceptionallySetClassName
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$3);
-
-  const {
-    state
-  } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
-    ref: ref,
-    className: classNames('reactist_menubutton', exceptionallySetClassName)
-  }));
-}); //
-// ContextMenuTrigger
-//
-
-const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
-  let {
-    as: component = 'div'
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3$2);
-
-  const {
-    handleAnchorRectChange,
-    state
-  } = React.useContext(MenuContext);
-  const handleContextMenu = React.useCallback(event => {
-    event.preventDefault();
-    handleAnchorRectChange({
-      x: event.clientX,
-      y: event.clientY
-    });
-    state.show();
-  }, [handleAnchorRectChange, state]);
-  return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
-    onContextMenu: handleContextMenu,
-    ref
-  }));
-});
-/**
- * The dropdown menu itself, containing a list of menu items.
- */
-
-const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
-  let {
-    exceptionallySetClassName
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded4$1);
-
-  const {
-    state
-  } = React.useContext(MenuContext);
-  return state.visible ? /*#__PURE__*/React.createElement(portal.Portal, {
-    preserveTabOrder: true
-  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
-    ref: ref,
-    className: classNames('reactist_menulist', exceptionallySetClassName)
-  }))) : null;
-});
-/**
- * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
- * callback.
- */
-
-const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
-  let {
-    value,
-    children,
-    onSelect,
-    hideOnSelect = true,
-    onClick,
-    exceptionallySetClassName,
-    as = 'button'
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded5$1);
-
-  const {
-    handleItemSelect,
-    state
-  } = React.useContext(MenuContext);
-  const {
-    hide
-  } = state;
-  const handleClick = React.useCallback(function handleClick(event) {
-    onClick == null ? void 0 : onClick(event);
-    const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
-    const shouldClose = onSelectResult !== false && hideOnSelect;
-    handleItemSelect(value);
-    if (shouldClose) hide();
-  }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
-    state: state,
-    ref: ref,
-    onClick: handleClick,
-    className: exceptionallySetClassName,
-    hideOnClick: false
-  }), children);
-});
-/**
- * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
- * a sub-menu.
- *
- * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
- * `MenuList`).
- *
- * ```jsx
- * <MenuItem label="Edit profile" />
- * <SubMenu>
- *   <MenuButton>More options</MenuButton>
- *   <MenuList>
- *     <MenuItem label="Preferences" />
- *     <MenuItem label="Sign out" />
- *   </MenuList>
- * </SubMenu>
- * ```
- *
- * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
- * opening a sub-menu with the menu items list below it.
- */
-
-const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
-  children,
-  onItemSelect
-}, ref) {
-  const {
-    handleItemSelect: parentMenuItemSelect,
-    state
-  } = React.useContext(MenuContext);
-  const {
-    hide: parentMenuHide
-  } = state;
-  const handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
-    if (onItemSelect) onItemSelect(value);
-    parentMenuItemSelect(value);
-    parentMenuHide();
-  }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
-  const [button, list] = React.Children.toArray(children); // Ariakit needs to be able to pass props to the MenuButton
-  // and combine it with the MenuItem component
-
-  const renderMenuButton = React.useCallback(function renderMenuButton(props) {
-    return /*#__PURE__*/React.cloneElement(button, props);
-  }, [button]);
-  return /*#__PURE__*/React.createElement(Menu, {
-    onItemSelect: handleSubItemSelect
-  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, {
-    as: "div",
-    state: state,
-    ref: ref,
-    hideOnClick: false
-  }, renderMenuButton), list);
-});
-/**
- * A way to semantically group some menu items.
- *
- * This group does not add any visual separator. You can do that yourself adding `<hr />` elements
- * before and/or after the group if you so wish.
- */
-
-const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
-  let {
-    label,
-    children,
-    exceptionallySetClassName
-  } = _ref6,
-      props = _objectWithoutProperties(_ref6, _excluded6);
-
-  const {
-    state
-  } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
-    ref: ref,
-    state: state,
-    className: exceptionallySetClassName
-  }), label ? /*#__PURE__*/React.createElement("div", {
-    role: "presentation",
-    className: "reactist_menugroup__label"
-  }, label) : null, children);
-});
-
 const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
   const className = classNames('reactist_input', props.className);
   return /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -3612,7 +3629,7 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 Input.displayName = 'Input';
 
-const _excluded$w = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
+const _excluded$v = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
 
 function Select(_ref) {
   let {
@@ -3623,7 +3640,7 @@ function Select(_ref) {
     className = '',
     defaultValue
   } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded$w);
+      otherProps = _objectWithoutProperties(_ref, _excluded$v);
 
   const selectClassName = classNames('reactist_select', {
     disabled
@@ -3657,7 +3674,7 @@ const CloseIcon$1 = () => /*#__PURE__*/React.createElement("svg", {
   d: "M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z"
 }));
 
-const _excluded$x = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
+const _excluded$w = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
 
 function DeprecatedNotification(_ref) {
   let {
@@ -3673,7 +3690,7 @@ function DeprecatedNotification(_ref) {
     className,
     'aria-live': ariaLive = 'polite'
   } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded$x);
+      rest = _objectWithoutProperties(_ref, _excluded$w);
 
   const titleId = title ? id + "-title" : null;
   const titleIdAttribute = titleId ? {
@@ -3725,7 +3742,7 @@ function DeprecatedNotification(_ref) {
 
 var modules_8f59d13b$1 = {"reach-portal":"_37bef8d8","fadein":"_77f9687f","fitContent":"bcc4e0a5","container":"d4832c2d","full":"b0c3b021","large":"_573d6aa5","medium":"_8550d996","small":"_43bb18f5","xlarge":"_57b4159d","overlay":"cb63f300","expand":"e741893e","buttonContainer":"bb1ce281","headerContent":"c5ef989c"};
 
-const _excluded$y = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
+const _excluded$x = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
       _excluded2$4 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3$3 = ["exceptionallySetClassName", "children"],
       _excluded4$2 = ["exceptionallySetClassName", "withDivider"],
@@ -3760,7 +3777,7 @@ function DeprecatedModal(_ref) {
     autoFocus = true,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$y);
+      props = _objectWithoutProperties(_ref, _excluded$x);
 
   const contextValue = React.useMemo(() => ({
     onDismiss,