@doist/reactist 22.0.2-beta → 22.2.0

package/dist/reactist.cjs.development.js

@@ -8,10 +8,15 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var classNames = _interopDefault(require('classnames'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
-var react = require('@ariakit/react');
+var tooltip = require('ariakit/tooltip');
+var portal = require('ariakit/portal');
+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'));
@@ -450,6 +455,18 @@ 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,
@@ -458,12 +475,10 @@ function Tooltip({
   withArrow = false,
   exceptionallySetClassName
 }) {
-  const tooltip = react.useTooltipStore({
+  const state = useDelayedTooltipState({
     placement: position,
-    showTimeout: 500,
-    hideTimeout: 100
+    gutter: gapSize
   });
-  const isOpen = tooltip.useState('open');
   const child = React.Children.only(children);
 
   if (!child) {
@@ -492,7 +507,7 @@ function Tooltip({
       const eventKey = event.key;
 
       if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
-        tooltip.show();
+        state.show();
       }
     }
 
@@ -507,23 +522,25 @@ function Tooltip({
   function handleBlur(event) {
     var _child$props2;
 
-    tooltip.hide();
+    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(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,
+  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,
     className: [modules_95f1407a.tooltip, exceptionallySetClassName],
     background: "toast",
     borderRadius: "standard",
@@ -533,7 +550,37 @@ function Tooltip({
     width: "fitContent",
     overflow: "hidden",
     textAlign: "center"
-  }, withArrow ? /*#__PURE__*/React.createElement(react.TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
+  }, 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]);
 }
 
 var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
@@ -678,56 +725,56 @@ function AlertIcon(_ref) {
 
 function AlertInfoIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1.18-11.84a.84.84 0 1 1-1.68 0 .84.84 0 0 1 1.68 0zM12.5 10a.5.5 0 0 1 .5.5V15h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-4h-1a.5.5 0 0 1 0-1h1.5z",
+    d: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM10.25 10a.75.75 0 0 0 0 1.5h1.25V15h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13v-4.25a.75.75 0 0 0-.75-.75h-2Z",
     fill: "currentColor"
   }));
 }
 
 function AlertPositiveIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-4.354-8.104a.5.5 0 0 1 .708 0l2.146 2.147 5.146-5.147a.5.5 0 0 1 .708.708l-5.5 5.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708z",
+    d: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.304a.748.748 0 0 1-1.061 0l-2.475-2.475a.75.75 0 0 1 1.06-1.06l1.945 1.944 4.774-4.773Z",
     fill: "currentColor"
   }));
 }
 
 function AlertCautionIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "m3.254 16.992 7.018-12.03a2 2 0 0 1 3.455 0l7.018 12.03A2 2 0 0 1 19.018 20H4.982a2 2 0 0 1-1.728-3.008zm8.242-11.887a1 1 0 0 0-.36.36l-7.018 12.03A1 1 0 0 0 4.982 19h14.036a1 1 0 0 0 .864-1.504l-7.018-12.03a1 1 0 0 0-1.368-.36zM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014a.987.987 0 1 0-1.971.055l.236 4.25c.053.945 1.445.945 1.498 0l.236-4.25.001-.027v-.028z",
+    d: "m10.272 4.962-7.018 12.03A2 2 0 0 0 4.982 20h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.013A.987.987 0 0 0 12 8.5h-.028l-.027.002a.987.987 0 0 0-.93 1.04l.236 4.25c.052.944 1.445.944 1.498 0l.236-4.25a1.925 1.925 0 0 0 .001-.055Z",
     fill: "currentColor"
   }));
 }
 
 function AlertCriticalIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2.5 12a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zM13 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014A.987.987 0 0 0 12 7.5h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.027z",
+    d: "M12.9866 2.25049C12.3729 1.91683 11.6271 1.91683 11.0134 2.25049L4.04793 6.03744C3.40122 6.38904 2.99999 7.05702 2.99999 7.78208V15.2184C2.99999 15.9435 3.40122 16.6115 4.04793 16.963L11.0134 20.75C11.6271 21.0837 12.3729 21.0837 12.9866 20.75L19.9521 16.963C20.5988 16.6114 21 15.9435 21 15.2184V7.78208C21 7.05701 20.5988 6.38904 19.9521 6.03744L12.9866 2.25049ZM12 7.00024C12.5448 7.00024 12.9865 7.44191 12.9865 7.98674C12.9864 8.00043 12.9863 8.00727 12.9861 8.01411C12.9859 8.02095 12.9856 8.02779 12.985 8.04146L12.7489 12.2918C12.6964 13.2364 11.3036 13.2364 11.2512 12.2918L11.015 8.04146C10.9848 7.49747 11.4013 7.03198 11.9453 7.00176L11.9726 7.00062L12 7.00024ZM13 15.0002C13 15.5525 12.5523 16.0002 12 16.0002C11.4477 16.0002 11 15.5525 11 15.0002C11 14.448 11.4477 14.0002 12 14.0002C12.5523 14.0002 13 14.448 13 15.0002Z",
     fill: "currentColor"
   }));
 }
@@ -743,7 +790,7 @@ function CloseIcon(props) {
   }));
 }
 
-var modules_6205a58e = {"container":"eb665121","tone-info":"d0373ff9","tone-positive":"bb18dcab","tone-caution":"_0af02331","tone-critical":"f76146f9"};
+var modules_6205a58e = {"container":"_51a84fb3","tone-info":"_5649104a","icon":"_79fa06e2","tone-positive":"c67632e4","tone-caution":"_654ff216","tone-critical":"b1ee4ff1"};
 
 function Alert({
   id,
@@ -756,15 +803,16 @@ function Alert({
     id: id,
     role: "alert",
     "aria-live": "polite",
-    borderRadius: "standard",
+    borderRadius: "full",
     className: [modules_6205a58e.container, getClassNames(modules_6205a58e, 'tone', tone)]
   }, /*#__PURE__*/React.createElement(Columns, {
     space: "small",
-    alignY: "top"
+    alignY: "center"
   }, /*#__PURE__*/React.createElement(Column, {
     width: "content"
   }, /*#__PURE__*/React.createElement(AlertIcon, {
-    tone: tone
+    tone: tone,
+    className: modules_6205a58e.icon
   })), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Box, {
     paddingY: "xsmall",
     paddingRight: onClose != null && closeLabel != null ? undefined : 'small'
@@ -1307,7 +1355,7 @@ function ToastsProvider({
   }, [defaultAutoDismissDelay, defaultDismissLabel, removeToast]);
   return /*#__PURE__*/React__default.createElement(ToastsContext.Provider, {
     value: showToast
-  }, children, /*#__PURE__*/React__default.createElement(react.Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
+  }, children, /*#__PURE__*/React__default.createElement(portal.Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
     className: [modules_d11e18f0.stackedToastsView, containerClassName],
     position: "fixed",
     width: "full",
@@ -1556,37 +1604,6 @@ 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;
@@ -1618,7 +1635,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 = useForkRef(internalRef, ref);
+  const combinedRef = ariakitReactUtils.useForkRef(internalRef, ref);
   React.useEffect(function setIndeterminate() {
     if (internalRef.current && typeof indeterminate === 'boolean') {
       internalRef.current.indeterminate = indeterminate;
@@ -1708,7 +1725,7 @@ function PasswordHiddenIcon(props) {
   })));
 }
 
-var modules_540a88ff = {"container":"_616a033e","auxiliaryLabel":"_0b88d85e","bordered":"c466cda3","error":"_4156d9cb","primaryLabel":"_274ef80a","secondaryLabel":"_2c4a8aed","messageIcon":"cd105f69"};
+var modules_540a88ff = {"container":"_7acdc928","auxiliaryLabel":"_815bad88","bordered":"e35886fe","error":"_6c7b5dc8","primaryLabel":"ec74af87","secondaryLabel":"_6db0ec44","messageIcon":"_05c35af8"};
 
 function FieldHint(props) {
   return /*#__PURE__*/React.createElement(Text, _objectSpread2({
@@ -1810,7 +1827,7 @@ function BaseField({
   }, hint) : null);
 }
 
-var modules_aaf25250 = {"inputWrapper":"_483abe7b","bordered":"fce9399c","error":"_603b8c4b","slot":"_79ca0da5"};
+var modules_aaf25250 = {"inputWrapper":"dea25485","bordered":"_80b6b376","error":"_1a32867a","slot":"dbbd207e"};
 
 const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startSlot", "endSlot"];
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
@@ -1899,7 +1916,7 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
   }));
 });
 
-var modules_1fa9b208 = {"selectWrapper":"a9cbb3a6","bordered":"f3869290","error":"aefdbdaa"};
+var modules_1fa9b208 = {"selectWrapper":"b930bb07","bordered":"e1f620b6","error":"_7e87474e"};
 
 const _excluded$m = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
 const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
@@ -2029,7 +2046,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
   }, hint) : null);
 });
 
-var modules_2728c236 = {"textAreaContainer":"_29503131","innerContainer":"_6ea894ce","bordered":"e1e8b6a7","error":"_1b94ff46","autoExpand":"e82223c4"};
+var modules_2728c236 = {"textAreaContainer":"_55ccf266","innerContainer":"_89bb7098","bordered":"_02a47358","error":"_704ff540","autoExpand":"_145ca8f0"};
 
 const _excluded$o = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
@@ -2229,7 +2246,7 @@ function Modal(_ref) {
       onDismiss == null ? void 0 : onDismiss();
     }
   }, [onDismiss]);
-  const store = react.useDialogStore({
+  const state = dialog.useDialogState({
     open: isOpen,
     setOpen
   });
@@ -2263,7 +2280,7 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(react.Portal, {
+  return /*#__PURE__*/React.createElement(portal.Portal, {
     portalRef: portalRef,
     portalElement: portalElement
   }, /*#__PURE__*/React.createElement(Box, {
@@ -2282,10 +2299,10 @@ function Modal(_ref) {
     autoFocus: autoFocus,
     whiteList: isNotInternalFrame,
     returnFocus: true
-  }, /*#__PURE__*/React.createElement(react.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
+  }, /*#__PURE__*/React.createElement(dialog.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: dialogRef,
     as: Box,
-    store: store,
+    state: state,
     hideOnEscape: hideOnEscape,
     preventBodyScroll: true,
     borderRadius: "full",
@@ -2447,6 +2464,28 @@ 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"],
@@ -2464,21 +2503,26 @@ function Tabs({
   variant = 'neutral',
   onSelectedIdChange
 }) {
-  const tabStore = react.useTabStore({
-    defaultSelectedId,
+  const tabState = tab.useTabState({
     selectedId,
     setSelectedId: onSelectedIdChange
   });
-  const actualSelectedId = tabStore.useState('selectedId');
-  const memoizedTabState = React.useMemo(() => {
-    var _ref;
-
+  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() {
     return {
-      tabStore,
-      variant,
-      selectedId: (_ref = selectedId != null ? selectedId : actualSelectedId) != null ? _ref : null
+      tabState,
+      variant
     };
-  }, [variant, tabStore, selectedId, actualSelectedId]);
+  }, [variant, tabState]);
   return /*#__PURE__*/React.createElement(TabsContext.Provider, {
     value: memoizedTabState
   }, children);
@@ -2488,27 +2532,30 @@ function Tabs({
  */
 
 
-const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
+const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
   let {
     as,
     children,
     id,
     exceptionallySetClassName
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded$s);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$s);
 
   const tabContextValue = React.useContext(TabsContext);
-  if (!tabContextValue) return null;
+
+  if (!tabContextValue) {
+    return null;
+  }
+
   const {
     variant,
-    tabStore
+    tabState
   } = tabContextValue;
-  const className = classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]);
-  return /*#__PURE__*/React.createElement(react.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(tab.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    className: className,
+    className: classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]),
     id: id,
-    store: tabStore,
+    state: tabState,
     ref: ref
   }), children);
 });
@@ -2516,12 +2563,12 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
  * A component used to group `<Tab>` elements together.
  */
 
-function TabList(_ref3) {
+function TabList(_ref2) {
   let {
     children,
     space
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded2$2);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   const tabContextValue = React.useContext(TabsContext);
 
@@ -2530,15 +2577,15 @@ function TabList(_ref3) {
   }
 
   const {
-    tabStore,
+    tabState,
     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(react.TabList, _objectSpread2({
-      store: tabStore,
+    React.createElement(Box, null, /*#__PURE__*/React.createElement(tab.TabList, _objectSpread2({
+      state: tabState,
       as: Box,
       position: "relative",
       width: "maxContent"
@@ -2550,24 +2597,22 @@ function TabList(_ref3) {
   );
 }
 /**
- * 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(_ref4, ref) {
+const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref) {
   let {
     children,
     id,
     as,
     render = 'always'
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded3$1);
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3$1);
 
   const tabContextValue = React.useContext(TabsContext);
   const [tabRendered, setTabRendered] = React.useState(false);
-  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
-  const tabIsActive = selectedId === id;
+  const tabIsActive = (tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId) === id;
   React.useEffect(function trackTabRenderedState() {
     if (!tabRendered && tabIsActive) {
       setTabRendered(true);
@@ -2579,28 +2624,28 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref)
   }
 
   const {
-    tabStore
+    tabState
   } = tabContextValue;
   const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
-  return shouldRender ? /*#__PURE__*/React.createElement(react.TabPanel, _objectSpread2(_objectSpread2({}, props), {}, {
-    tabId: id,
-    store: tabStore,
+  return shouldRender ? /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
+    tabId: id
+  }, props), {}, {
+    state: tabState,
     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
+    selectedId: tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId
   }) : null;
 }
 
@@ -2628,20 +2673,27 @@ function Menu(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$t);
 
-  const [anchorRect, setAnchorRect] = React.useState(null);
-  const getAnchorRect = React.useMemo(() => anchorRect ? () => anchorRect : null, [anchorRect]);
-  const menuStore = react.useMenuStore(_objectSpread2({
-    focusLoop: true
+  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));
+  React.useEffect(() => {
+    if (!state.open) handleAnchorRectChange(null);
+  }, [state.open]);
   const handleItemSelect = React.useCallback(function handleItemSelect(value) {
-    onItemSelect == null ? void 0 : onItemSelect(value);
+    if (onItemSelect) onItemSelect(value);
   }, [onItemSelect]);
   const value = React.useMemo(() => ({
-    menuStore,
+    state,
     handleItemSelect,
-    getAnchorRect,
-    setAnchorRect
-  }), [menuStore, handleItemSelect, getAnchorRect, setAnchorRect]);
+    handleAnchorRectChange
+  }), [state, handleItemSelect]);
   return /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: value
   }, children);
@@ -2658,10 +2710,10 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
       props = _objectWithoutProperties(_ref2, _excluded2$3);
 
   const {
-    menuStore
+    state
   } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(react.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
-    store: menuStore,
+  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
     ref: ref,
     className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
@@ -2676,17 +2728,17 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
       props = _objectWithoutProperties(_ref3, _excluded3$2);
 
   const {
-    setAnchorRect,
-    menuStore
+    handleAnchorRectChange,
+    state
   } = React.useContext(MenuContext);
-  const handleContextMenu = React.useCallback(function handleContextMenu(event) {
+  const handleContextMenu = React.useCallback(event => {
     event.preventDefault();
-    setAnchorRect({
+    handleAnchorRectChange({
       x: event.clientX,
       y: event.clientY
     });
-    menuStore.show();
-  }, [setAnchorRect, menuStore]);
+    state.show();
+  }, [handleAnchorRectChange, state]);
   return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     onContextMenu: handleContextMenu,
     ref
@@ -2704,19 +2756,14 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
       props = _objectWithoutProperties(_ref4, _excluded4$1);
 
   const {
-    menuStore,
-    getAnchorRect
+    state
   } = React.useContext(MenuContext);
-  const isOpen = menuStore.useState('open');
-  return isOpen ? /*#__PURE__*/React.createElement(react.Portal, {
+  return state.open ? /*#__PURE__*/React.createElement(portal.Portal, {
     preserveTabOrder: true
-  }, /*#__PURE__*/React.createElement(react.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
-    store: menuStore,
-    gutter: 8,
-    shift: 4,
+  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
     ref: ref,
     className: classNames('reactist_menulist', exceptionallySetClassName),
-    getAnchorRect: getAnchorRect != null ? getAnchorRect : undefined,
     modal: modal
   }))) : null;
 });
@@ -2739,11 +2786,11 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
 
   const {
     handleItemSelect,
-    menuStore
+    state
   } = React.useContext(MenuContext);
   const {
     hide
-  } = menuStore;
+  } = state;
   const handleClick = React.useCallback(function handleClick(event) {
     onClick == null ? void 0 : onClick(event);
     const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
@@ -2751,9 +2798,9 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
     handleItemSelect(value);
     if (shouldClose) hide();
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
-  return /*#__PURE__*/React.createElement(react.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    store: menuStore,
+    state: state,
     ref: ref,
     onClick: handleClick,
     className: exceptionallySetClassName,
@@ -2788,11 +2835,11 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
 }, ref) {
   const {
     handleItemSelect: parentMenuItemSelect,
-    menuStore
+    state
   } = React.useContext(MenuContext);
   const {
     hide: parentMenuHide
-  } = menuStore;
+  } = state;
   const handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
     parentMenuItemSelect(value);
@@ -2806,9 +2853,9 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
   }, [button]);
   return /*#__PURE__*/React.createElement(Menu, {
     onItemSelect: handleSubItemSelect
-  }, /*#__PURE__*/React.createElement(react.MenuItem, {
+  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, {
     as: "div",
-    store: menuStore,
+    state: state,
     ref: ref,
     hideOnClick: false
   }, renderMenuButton), list);
@@ -2829,11 +2876,11 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, re
       props = _objectWithoutProperties(_ref6, _excluded6);
 
   const {
-    menuStore
+    state
   } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(react.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
-    store: menuStore,
+    state: state,
     className: exceptionallySetClassName
   }), label ? /*#__PURE__*/React.createElement("div", {
     role: "presentation",