@doist/reactist 22.0.0-beta → 22.0.1-beta

package/dist/reactist.cjs.development.js

@@ -8,19 +8,14 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var classNames = _interopDefault(require('classnames'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
-var tooltip = require('ariakit/tooltip');
-var portal = require('ariakit/portal');
-var ariakitReactUtils = require('ariakit-react-utils');
+var react = require('@ariakit/react');
 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 dialog$1 = require('@reach/dialog');
+var dialog = require('@reach/dialog');
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -456,18 +451,6 @@ const HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually
 
 var modules_95f1407a = {"tooltip":"_487c82cd"};
 
-const SHOW_DELAY = 500;
-const HIDE_DELAY = 100;
-
-function useDelayedTooltipState(initialState) {
-  const tooltipState = tooltip.useTooltipState(initialState);
-  const delay = useDelay();
-  return React.useMemo(() => _objectSpread2(_objectSpread2({}, tooltipState), {}, {
-    show: delay(() => tooltipState.show(), SHOW_DELAY),
-    hide: delay(() => tooltipState.hide(), HIDE_DELAY)
-  }), [delay, tooltipState]);
-}
-
 function Tooltip({
   children,
   content,
@@ -476,10 +459,12 @@ function Tooltip({
   withArrow = false,
   exceptionallySetClassName
 }) {
-  const state = useDelayedTooltipState({
+  const tooltip = react.useTooltipStore({
     placement: position,
-    gutter: gapSize
+    showTimeout: 500,
+    hideTimeout: 100
   });
+  const isOpen = tooltip.useState('open');
   const child = React.Children.only(children);
 
   if (!child) {
@@ -508,7 +493,7 @@ function Tooltip({
       const eventKey = event.key;
 
       if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
-        state.show();
+        tooltip.show();
       }
     }
 
@@ -523,25 +508,23 @@ function Tooltip({
   function handleBlur(event) {
     var _child$props2;
 
-    state.hide();
+    tooltip.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,
-    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(_objectSpread2({}, anchorProps), child.props), {}, {
-      onFocus: handleFocus,
-      onBlur: handleBlur
-    }));
-  }), state.open && content ? /*#__PURE__*/React.createElement(Box, {
-    as: tooltip.Tooltip,
-    state: state,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.TooltipAnchor, {
+    render: anchorProps => {
+      return /*#__PURE__*/React.cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, child.props), anchorProps), {}, {
+        onFocus: handleFocus,
+        onBlur: handleBlur
+      }));
+    },
+    store: tooltip,
+    ref: child.ref
+  }), isOpen && content ? /*#__PURE__*/React.createElement(Box, {
+    as: react.Tooltip,
+    gutter: gapSize,
+    store: tooltip,
     className: [modules_95f1407a.tooltip, exceptionallySetClassName],
     background: "toast",
     borderRadius: "standard",
@@ -551,37 +534,7 @@ function Tooltip({
     width: "fitContent",
     overflow: "hidden",
     textAlign: "center"
-  }, withArrow ? /*#__PURE__*/React.createElement(tooltip.TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
-}
-// Internal helpers
-//
-
-/**
- * Returns a function offering the same interface as setTimeout, but cleans up on unmount.
- *
- * The timeout state is shared, and only one delayed function can be active at any given time. If
- * a new delayed function is called while another one was waiting for its time to run, that older
- * invocation is cleared and it never runs.
- *
- * This is suitable for our use case here, but probably not the most intuitive thing in general.
- * That's why this is not made a shared util or something like it.
- */
-
-function useDelay() {
-  const timeoutRef = React.useRef();
-  const clearTimeouts = React.useCallback(function clearTimeouts() {
-    if (timeoutRef.current != null) {
-      clearTimeout(timeoutRef.current);
-    }
-  }, []); // Runs clearTimeouts when the component is unmounted
-
-  React.useEffect(() => clearTimeouts, [clearTimeouts]);
-  return React.useCallback(function delay(fn, delay) {
-    return () => {
-      clearTimeouts();
-      timeoutRef.current = setTimeout(fn, delay);
-    };
-  }, [clearTimeouts]);
+  }, withArrow ? /*#__PURE__*/React.createElement(react.TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
 }
 
 var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
@@ -1354,7 +1307,7 @@ function ToastsProvider({
   }, [defaultAutoDismissDelay, defaultDismissLabel, removeToast]);
   return /*#__PURE__*/React__default.createElement(ToastsContext.Provider, {
     value: showToast
-  }, children, /*#__PURE__*/React__default.createElement(portal.Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
+  }, children, /*#__PURE__*/React__default.createElement(react.Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
     className: modules_d11e18f0.stackedToastsView,
     position: "fixed",
     width: "full",
@@ -1602,6 +1555,37 @@ function CheckboxIcon(_ref) {
 
 var modules_664a6a80 = {"container":"_84dfdb83","disabled":"_131a2ca4","checked":"_95b1556d","keyFocused":"_49de7ebd","icon":"_6b4b1851","label":"_9047f3bd"};
 
+/**
+ * Sets both a function and object React ref.
+ */
+
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+/**
+ * Merges React Refs into a single memoized function ref so you can pass it to an element.
+ * @example
+ * const Component = React.forwardRef((props, ref) => {
+ *   const internalRef = React.useRef();
+ *   return <div {...props} ref={useForkRef(internalRef, ref)} />;
+ * });
+ */
+
+
+function useForkRef(...refs) {
+  return React.useMemo(() => {
+    if (!refs.some(Boolean)) return;
+    return value => {
+      refs.forEach(ref => setRef(ref, value));
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  refs);
+}
+
 const _excluded$j = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
 const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
@@ -1633,7 +1617,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 = ariakitReactUtils.useForkRef(internalRef, ref);
+  const combinedRef = useForkRef(internalRef, ref);
   React.useEffect(function setIndeterminate() {
     if (internalRef.current && typeof indeterminate === 'boolean') {
       internalRef.current.indeterminate = indeterminate;
@@ -2244,7 +2228,7 @@ function Modal(_ref) {
       onDismiss == null ? void 0 : onDismiss();
     }
   }, [onDismiss]);
-  const state = dialog.useDialogState({
+  const store = react.useDialogStore({
     open: isOpen,
     setOpen
   });
@@ -2278,7 +2262,7 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(portal.Portal, {
+  return /*#__PURE__*/React.createElement(react.Portal, {
     portalRef: portalRef,
     portalElement: portalElement
   }, /*#__PURE__*/React.createElement(Box, {
@@ -2297,10 +2281,10 @@ function Modal(_ref) {
     autoFocus: autoFocus,
     whiteList: isNotInternalFrame,
     returnFocus: true
-  }, /*#__PURE__*/React.createElement(dialog.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
+  }, /*#__PURE__*/React.createElement(react.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: dialogRef,
     as: Box,
-    state: state,
+    store: store,
     hideOnEscape: hideOnEscape,
     preventBodyScroll: true,
     borderRadius: "full",
@@ -2462,28 +2446,6 @@ function ModalActions(_ref5) {
   }, children));
 }
 
-/**
- * usePrevious tracks the change of the given value -
- * when a given value has been changed from a previous call,
- * it will return the value prior to the change.
- *
- * Example:
- *
- * const [x, setX] = useState(1)
- * const prevX = usePrevious(x)
- *
- * Suppose `setX(2)` is called, then in the next component render
- * x = 2 and prevX = 1
- */
-
-function usePrevious(value) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-
 var modules_40c67f5b = {"tab":"e96bf360","track":"_430e252d","tab-neutral":"f631ccbe","tab-themed":"_6ba96acc","track-neutral":"ef4cd8d3","track-themed":"_344b3b10"};
 
 const _excluded$s = ["as", "children", "id", "exceptionallySetClassName"],
@@ -2501,26 +2463,21 @@ function Tabs({
   variant = 'neutral',
   onSelectedIdChange
 }) {
-  const tabState = tab.useTabState({
+  const tabStore = react.useTabStore({
+    defaultSelectedId,
     selectedId,
     setSelectedId: onSelectedIdChange
   });
-  const previousDefaultSelectedId = usePrevious(defaultSelectedId);
-  const {
-    selectedId: actualSelectedId,
-    select
-  } = tabState;
-  React.useEffect(function selectDefaultTab() {
-    if (!selectedId && defaultSelectedId !== previousDefaultSelectedId && defaultSelectedId !== actualSelectedId && defaultSelectedId !== undefined) {
-      select(defaultSelectedId);
-    }
-  }, [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId]);
-  const memoizedTabState = React.useMemo(function memoizeTabState() {
+  const actualSelectedId = tabStore.useState('selectedId');
+  const memoizedTabState = React.useMemo(() => {
+    var _ref;
+
     return {
-      tabState,
-      variant
+      tabStore,
+      variant,
+      selectedId: (_ref = selectedId != null ? selectedId : actualSelectedId) != null ? _ref : null
     };
-  }, [variant, tabState]);
+  }, [variant, tabStore, selectedId, actualSelectedId]);
   return /*#__PURE__*/React.createElement(TabsContext.Provider, {
     value: memoizedTabState
   }, children);
@@ -2530,30 +2487,27 @@ function Tabs({
  */
 
 
-const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
+const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
   let {
     as,
     children,
     id,
     exceptionallySetClassName
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$s);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded$s);
 
   const tabContextValue = React.useContext(TabsContext);
-
-  if (!tabContextValue) {
-    return null;
-  }
-
+  if (!tabContextValue) return null;
   const {
     variant,
-    tabState
+    tabStore
   } = tabContextValue;
-  return /*#__PURE__*/React.createElement(tab.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
+  const className = classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]);
+  return /*#__PURE__*/React.createElement(react.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    className: classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]),
+    className: className,
     id: id,
-    state: tabState,
+    store: tabStore,
     ref: ref
   }), children);
 });
@@ -2561,12 +2515,12 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
  * A component used to group `<Tab>` elements together.
  */
 
-function TabList(_ref2) {
+function TabList(_ref3) {
   let {
     children,
     space
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$2);
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2$2);
 
   const tabContextValue = React.useContext(TabsContext);
 
@@ -2575,15 +2529,15 @@ function TabList(_ref2) {
   }
 
   const {
-    tabState,
+    tabStore,
     variant
   } = tabContextValue;
   return (
     /*#__PURE__*/
     // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
     // which will render the track with the wrong height
-    React.createElement(Box, null, /*#__PURE__*/React.createElement(tab.TabList, _objectSpread2({
-      state: tabState,
+    React.createElement(Box, null, /*#__PURE__*/React.createElement(react.TabList, _objectSpread2({
+      store: tabStore,
       as: Box,
       position: "relative",
       width: "maxContent"
@@ -2595,22 +2549,24 @@ function TabList(_ref2) {
   );
 }
 /**
- * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
+ * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a
+ * corresponding `<Tab>` component.
  */
 
 
-const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref) {
+const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
   let {
     children,
     id,
     as,
     render = 'always'
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3$1);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded3$1);
 
   const tabContextValue = React.useContext(TabsContext);
   const [tabRendered, setTabRendered] = React.useState(false);
-  const tabIsActive = (tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId) === id;
+  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
+  const tabIsActive = selectedId === id;
   React.useEffect(function trackTabRenderedState() {
     if (!tabRendered && tabIsActive) {
       setTabRendered(true);
@@ -2622,43 +2578,37 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref)
   }
 
   const {
-    tabState
+    tabStore
   } = tabContextValue;
   const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
-  return shouldRender ? /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
-    tabId: id
-  }, props), {}, {
-    state: tabState,
+  return shouldRender ? /*#__PURE__*/React.createElement(react.TabPanel, _objectSpread2(_objectSpread2({}, props), {}, {
+    tabId: id,
+    store: tabStore,
     as: as,
     ref: ref
   }), children) : null;
 });
 /**
- * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
- * component. Can be placed freely within the main `<Tabs>` component.
+ * Allows content to be rendered based on the current tab being selected while outside of the
+ * TabPanel component. Can be placed freely within the main `<Tabs>` component.
  */
 
 function TabAwareSlot({
   children
 }) {
   const tabContextValue = React.useContext(TabsContext);
+  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
   return tabContextValue ? children({
-    selectedId: tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId
+    selectedId
   }) : null;
 }
 
-var modules_2befbba6 = {"menuList":"c63e79f3","subMenuList":"_1e89cfc6","iconMenuItem":"_1b808bea","menuItem":"_8607099d","legacyLayout":"_609759d5","menuGroupLabel":"f1730843","menuItemIcon":"_7cec7dce","menuItemLabel":"_91c012d8","menuItemDescription":"bb494fd4","destructive":"_503b074a","menuGroupInfo":"ad6d2e4a","iconsMenuGroup":"_410b11f2"};
-
 const _excluded$t = ["children", "onItemSelect"],
       _excluded2$3 = ["exceptionallySetClassName"],
-      _excluded3$2 = ["exceptionallySetClassName", "label", "icon"],
-      _excluded4$1 = ["as"],
-      _excluded5$1 = ["exceptionallySetClassName", "modal"],
-      _excluded6 = ["exceptionallySetClassName", "modal"],
-      _excluded7 = ["value", "label", "description", "icon", "shortcut", "tone", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
-      _excluded8 = ["label", "info", "children", "exceptionallySetClassName"],
-      _excluded9 = ["value", "label", "description", "icon", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
-      _excluded10 = ["children"];
+      _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
@@ -2670,45 +2620,36 @@ const MenuContext = /*#__PURE__*/React.createContext( // Ariakit gives us no mea
  * management for the menu components inside it.
  */
 
-const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, ref) {
+function Menu(_ref) {
   let {
     children,
     onItemSelect
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$t);
 
-  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
+  const [anchorRect, setAnchorRect] = React.useState(null);
+  const getAnchorRect = React.useMemo(() => anchorRect ? () => anchorRect : null, [anchorRect]);
+  const menuStore = react.useMenuStore(_objectSpread2({
+    focusLoop: true
   }, props));
-  React.useEffect(() => {
-    if (!state.open) handleAnchorRectChange(null);
-  }, [state.open]);
-  React.useImperativeHandle(ref, () => ({
-    open: state.show
-  }));
   const handleItemSelect = React.useCallback(function handleItemSelect(value) {
-    if (onItemSelect) onItemSelect(value);
+    onItemSelect == null ? void 0 : onItemSelect(value);
   }, [onItemSelect]);
   const value = React.useMemo(() => ({
-    state,
+    menuStore,
     handleItemSelect,
-    handleAnchorRectChange
-  }), [state, handleItemSelect]);
+    getAnchorRect,
+    setAnchorRect
+  }), [menuStore, handleItemSelect, getAnchorRect, setAnchorRect]);
   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
@@ -2716,122 +2657,35 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
       props = _objectWithoutProperties(_ref2, _excluded2$3);
 
   const {
-    state
+    menuStore
   } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
+  return /*#__PURE__*/React.createElement(react.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
+    store: menuStore,
     ref: ref,
-    className: exceptionallySetClassName
-  }));
-});
-/**
- * Renders the content inside a standard MenuItem. It is extracted into a component for reuse in
- * the SubMenuItem, which is a MenuItem visually, but semantically it's closer to be a MenuButton.
- * @private
- */
-
-function MenuItemContent({
-  label,
-  description,
-  icon,
-  shortcut,
-  id
-}) {
-  if (!label) return null;
-  return /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    gap: "small",
-    alignItems: "center",
-    width: "full",
-    "aria-hidden": true
-  }, icon ? /*#__PURE__*/React.createElement("div", {
-    className: modules_2befbba6.menuItemIcon
-  }, icon) : null, /*#__PURE__*/React.createElement(Box, {
-    display: "inlineFlex",
-    flexDirection: "column",
-    gap: "xsmall",
-    paddingY: "xsmall",
-    alignItems: "flexStart",
-    overflow: "hidden",
-    flexGrow: 1
-  }, /*#__PURE__*/React.createElement(Text, {
-    id: id + "-label",
-    weight: description ? 'semibold' : 'regular',
-    size: "copy",
-    lineClamp: 1,
-    exceptionallySetClassName: modules_2befbba6.menuItemLabel
-  }, label), description ? /*#__PURE__*/React.createElement(Text, {
-    id: id + "-description",
-    size: "copy",
-    tone: "secondary",
-    exceptionallySetClassName: modules_2befbba6.menuItemDescription
-  }, description) : null), shortcut ? /*#__PURE__*/React.createElement("div", null, shortcut) : null);
-} //
-// SubMenuItem
-//
-
-
-function ArrowRightIcon() {
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M14.243 12L9.646 7.404a.5.5 0 1 1 .708-.707l4.95 4.95a.5.5 0 0 1 0 .707l-4.95 4.95a.5.5 0 0 1-.708-.708L14.243 12z",
-    fill: "currentColor",
-    fillRule: "evenodd"
-  }));
-}
-/**
- * A menu item to toggle a sub-menu open or closed.
- */
-
-
-const SubMenuItem = /*#__PURE__*/polymorphicComponent(function SubMenuItem(_ref3, ref) {
-  let {
-    exceptionallySetClassName,
-    label,
-    icon
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3$2);
-
-  const id = useId(props.id);
-  const {
-    state
-  } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({
-    "aria-labelledby": label && !props['aria-label'] ? id + "-label" : undefined
-  }, props), {}, {
-    state: state,
-    ref: ref,
-    className: classNames(modules_2befbba6.menuItem, exceptionallySetClassName)
-  }), /*#__PURE__*/React.createElement(MenuItemContent, {
-    id: id,
-    icon: icon,
-    label: label,
-    shortcut: /*#__PURE__*/React.createElement(ArrowRightIcon, null)
+    className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
 }); //
 // ContextMenuTrigger
 //
 
-const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref4, ref) {
+const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
   let {
     as: component = 'div'
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded4$1);
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3$2);
 
   const {
-    handleAnchorRectChange,
-    state
+    setAnchorRect,
+    menuStore
   } = React.useContext(MenuContext);
-  const handleContextMenu = React.useCallback(event => {
+  const handleContextMenu = React.useCallback(function handleContextMenu(event) {
     event.preventDefault();
-    handleAnchorRectChange({
+    setAnchorRect({
       x: event.clientX,
       y: event.clientY
     });
-    state.show();
-  }, [handleAnchorRectChange, state]);
+    menuStore.show();
+  }, [setAnchorRect, menuStore]);
   return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     onContextMenu: handleContextMenu,
     ref
@@ -2841,155 +2695,90 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
  * The dropdown menu itself, containing a list of menu items.
  */
 
-const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref5, ref) {
+const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
   let {
     exceptionallySetClassName,
     modal = true
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded5$1);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4$1);
 
   const {
-    state
+    menuStore,
+    getAnchorRect
   } = React.useContext(MenuContext);
-  if (!state.open) return null;
-  return /*#__PURE__*/React.createElement(portal.Portal, {
+  const isOpen = menuStore.useState('open');
+  return isOpen ? /*#__PURE__*/React.createElement(react.Portal, {
     preserveTabOrder: true
-  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
+  }, /*#__PURE__*/React.createElement(react.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
+    store: menuStore,
+    gutter: 8,
+    shift: 4,
     ref: ref,
-    className: classNames(modules_2befbba6.menuList, exceptionallySetClassName),
+    className: classNames('reactist_menulist', exceptionallySetClassName),
+    getAnchorRect: getAnchorRect != null ? getAnchorRect : undefined,
     modal: modal
-  })));
+  }))) : null;
 });
 /**
- * Mostly equivalent to the `MenuList`, but to be used inside a `SubMenu`.
+ * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
+ * callback.
  */
 
-const SubMenuList = /*#__PURE__*/polymorphicComponent(function SubMenuList(_ref6, ref) {
+const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
   let {
+    value,
+    children,
+    onSelect,
+    hideOnSelect = true,
+    onClick,
     exceptionallySetClassName,
-    modal = true
-  } = _ref6,
-      props = _objectWithoutProperties(_ref6, _excluded6);
-
-  const {
-    state
-  } = React.useContext(MenuContext);
-  if (!state.open) return null;
-  return /*#__PURE__*/React.createElement(portal.Portal, {
-    preserveTabOrder: true
-  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
-    ref: ref,
-    className: classNames(modules_2befbba6.menuList, modules_2befbba6.subMenuList, exceptionallySetClassName),
-    modal: modal
-  })));
-}); //
-// MenuItem
-//
+    as = 'button'
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5$1);
 
-function useMenuItemClickHandler({
-  value,
-  hideOnSelect,
-  onClick,
-  onSelect
-}) {
   const {
     handleItemSelect,
-    state
+    menuStore
   } = React.useContext(MenuContext);
   const {
     hide
-  } = state;
-  return React.useCallback(function handleClick(event) {
+  } = menuStore;
+  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]);
-}
-/**
- * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
- * callback.
- */
-
-
-const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref7, ref) {
-  let {
-    value,
-    label,
-    description,
-    icon,
-    shortcut,
-    tone,
-    children,
-    onSelect,
-    hideOnSelect = true,
-    onClick,
-    exceptionallySetClassName,
-    as = 'button'
-  } = _ref7,
-      props = _objectWithoutProperties(_ref7, _excluded7);
-
-  const id = useId(props.id);
-  const {
-    state
-  } = React.useContext(MenuContext);
-  const handleClick = useMenuItemClickHandler({
-    value,
-    onSelect,
-    onClick,
-    hideOnSelect
-  });
-  return /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({
-    "aria-labelledby": label && !props['aria-label'] ? id + "-label" : undefined,
-    "aria-describedby": label && description ? id + "-description" : undefined
-  }, props), {}, {
+  return /*#__PURE__*/React.createElement(react.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    state: state,
+    store: menuStore,
     ref: ref,
     onClick: handleClick,
-    className: classNames(modules_2befbba6.menuItem, tone === 'destructive' ? modules_2befbba6.destructive : null, exceptionallySetClassName),
+    className: exceptionallySetClassName,
     hideOnClick: false
-  }), children ? /*#__PURE__*/React.createElement(Box, {
-    width: "full",
-    className: label ? undefined : modules_2befbba6.legacyLayout
-  }, children) : null, /*#__PURE__*/React.createElement(MenuItemContent, {
-    id: id,
-    icon: icon,
-    label: label,
-    description: description,
-    shortcut: shortcut
-  }));
+  }), children);
 });
 /**
- * This component can be rendered alongside other `MenuItem` elements inside a `MenuList` to show a
- * sub-menu.
+ * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
+ * a sub-menu.
  *
- * Its children are expected to be exactly two elements, in the following order:
- *
- * 1. A `SubMenuItem` element: the menu item that triggers the sub-menu to open.
- * 2. A `SubMenuList` element: the list of menu items that will be shown when the sub-menu is open.
- *
- * ## Usage
+ * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
+ * `MenuList`).
  *
  * ```jsx
- * <Menu>
- *   <MenuButton>Menu</MenuButton>
+ * <MenuItem label="Edit profile" />
+ * <SubMenu>
+ *   <MenuButton>More options</MenuButton>
  *   <MenuList>
- *     <MenuItem label="Item 1" />
- *     <MenuItem label="Item 2" />
- *     <SubMenu>
- *       <SubMenuItem label="Submenu" />
- *       <SubMenuList>
- *         <MenuItem label="Submenu Item 1" />
- *         <MenuItem label="Submenu Item 2" />
- *       </SubMenuList>
- *     </SubMenu>
+ *     <MenuItem label="Preferences" />
+ *     <MenuItem label="Sign out" />
  *   </MenuList>
- * </Menu>
+ * </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({
@@ -2998,11 +2787,11 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
 }, ref) {
   const {
     handleItemSelect: parentMenuItemSelect,
-    state
+    menuStore
   } = React.useContext(MenuContext);
   const {
     hide: parentMenuHide
-  } = state;
+  } = menuStore;
   const handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
     parentMenuItemSelect(value);
@@ -3016,14 +2805,12 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
   }, [button]);
   return /*#__PURE__*/React.createElement(Menu, {
     onItemSelect: handleSubItemSelect
-  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, {
+  }, /*#__PURE__*/React.createElement(react.MenuItem, {
     as: "div",
-    state: state,
+    store: menuStore,
     ref: ref,
     hideOnClick: false
-  }, renderMenuButton), /*#__PURE__*/React.createElement("div", {
-    className: modules_2befbba6.subMenuContainer
-  }, list));
+  }, renderMenuButton), list);
 });
 /**
  * A way to semantically group some menu items.
@@ -3032,100 +2819,25 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
  * before and/or after the group if you so wish.
  */
 
-const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref8, ref) {
+const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
   let {
     label,
-    info,
     children,
     exceptionallySetClassName
-  } = _ref8,
-      props = _objectWithoutProperties(_ref8, _excluded8);
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
 
-  const id = useId(props.id);
   const {
-    state
+    menuStore
   } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({
-    "aria-labelledby": "menugroup-label-" + id
-  }, props), {}, {
-    id: id,
+  return /*#__PURE__*/React.createElement(react.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
-    state: state,
+    store: menuStore,
     className: exceptionallySetClassName
-  }), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    alignItems: "center",
-    gap: "small",
-    className: modules_2befbba6.menuGroupLabel
-  }, /*#__PURE__*/React.createElement(Text, {
-    id: "menugroup-label-" + id,
-    size: "copy",
-    weight: "semibold"
-  }, label), info ? /*#__PURE__*/React.createElement(Box, {
-    flexShrink: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    className: modules_2befbba6.menuGroupInfo
-  }, info) : null), children);
-});
-/**
- * A menu item that visually only shows as an icon. It must be used inside an `IconsMenuGroup`.
- */
-
-const IconMenuItem = /*#__PURE__*/polymorphicComponent(function IconMenuItem(_ref9, ref) {
-  let {
-    value,
-    label,
-    description,
-    icon,
-    onSelect,
-    hideOnSelect = true,
-    onClick,
-    exceptionallySetClassName,
-    as = 'button'
-  } = _ref9,
-      props = _objectWithoutProperties(_ref9, _excluded9);
-
-  const id = useId(props.id);
-  const {
-    state
-  } = React.useContext(MenuContext);
-  const handleClick = useMenuItemClickHandler({
-    value,
-    onSelect,
-    onClick,
-    hideOnSelect
-  });
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    content: label
-  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({
-    "aria-label": label,
-    "aria-describedby": id + "-description"
-  }, props), {}, {
-    as: as,
-    state: state,
-    ref: ref,
-    onClick: handleClick,
-    className: classNames(modules_2befbba6.iconMenuItem, exceptionallySetClassName),
-    hideOnClick: false
-  }), icon));
-});
-/**
- * Semantically equivalent to `MenuGroup`, but meant to group `IconMenuItem`s only.
- */
-
-const IconsMenuGroup = /*#__PURE__*/polymorphicComponent(function IconsMenuGroup(_ref10, ref) {
-  let {
-    children
-  } = _ref10,
-      props = _objectWithoutProperties(_ref10, _excluded10);
-
-  return /*#__PURE__*/React.createElement(MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement("div", {
-    className: modules_2befbba6.iconsMenuGroup
-  }, children));
+  }), label ? /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: "reactist_menugroup__label"
+  }, label) : null, children);
 });
 
 const _excluded$u = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
@@ -4022,7 +3734,7 @@ function DeprecatedModal(_ref) {
     onDismiss,
     height
   }), [onDismiss, height]);
-  return /*#__PURE__*/React.createElement(dialog$1.DialogOverlay, {
+  return /*#__PURE__*/React.createElement(dialog.DialogOverlay, {
     isOpen: isOpen,
     onDismiss: onDismiss,
     dangerouslyBypassFocusLock // We're setting up our own focus lock below
@@ -4033,7 +3745,7 @@ function DeprecatedModal(_ref) {
     autoFocus: autoFocus,
     whiteList: isNotInternalFrame$1,
     returnFocus: true
-  }, /*#__PURE__*/React.createElement(dialog$1.DialogContent, _objectSpread2(_objectSpread2({}, props), {}, {
+  }, /*#__PURE__*/React.createElement(dialog.DialogContent, _objectSpread2(_objectSpread2({}, props), {}, {
     as: Box,
     borderRadius: "full",
     background: "default",
@@ -4212,8 +3924,6 @@ exports.Divider = Divider;
 exports.Heading = Heading;
 exports.Hidden = Hidden;
 exports.HiddenVisually = HiddenVisually;
-exports.IconMenuItem = IconMenuItem;
-exports.IconsMenuGroup = IconsMenuGroup;
 exports.Inline = Inline;
 exports.KeyCapturer = KeyCapturer;
 exports.KeyboardShortcut = KeyboardShortcut;
@@ -4238,8 +3948,6 @@ exports.SelectField = SelectField;
 exports.Stack = Stack;
 exports.StaticToast = StaticToast;
 exports.SubMenu = SubMenu;
-exports.SubMenuItem = SubMenuItem;
-exports.SubMenuList = SubMenuList;
 exports.SwitchField = SwitchField;
 exports.Tab = Tab;
 exports.TabAwareSlot = TabAwareSlot;