@overmap-ai/blocks 1.0.40-improvements.1 → 1.0.40

package/dist/blocks.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@radix-ui/react-alert-dialog"), require("react/jsx-runtime"), require("class-variance-authority"), require("react"), require("@radix-ui/react-avatar"), require("@radix-ui/react-checkbox"), require("react-responsive"), require("cmdk"), require("@radix-ui/react-dialog"), require("react-day-picker"), require("lucide-react/dynamic"), require("@radix-ui/react-hover-card"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-slot"), require("@floating-ui/react"), require("@radix-ui/react-separator"), require("@radix-ui/react-one-time-password-field"), require("react-error-boundary"), require("@radix-ui/react-popover"), require("@radix-ui/react-progress"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-tabs"), require("@radix-ui/react-slider"), require("@radix-ui/react-switch"), require("@radix-ui/react-toast"), require("@radix-ui/react-toggle"), require("@radix-ui/react-tooltip")) : typeof define === "function" && define.amd ? define(["exports", "@radix-ui/react-alert-dialog", "react/jsx-runtime", "class-variance-authority", "react", "@radix-ui/react-avatar", "@radix-ui/react-checkbox", "react-responsive", "cmdk", "@radix-ui/react-dialog", "react-day-picker", "lucide-react/dynamic", "@radix-ui/react-hover-card", "react-transition-group", "react-dom", "@radix-ui/react-slot", "@floating-ui/react", "@radix-ui/react-separator", "@radix-ui/react-one-time-password-field", "react-error-boundary", "@radix-ui/react-popover", "@radix-ui/react-progress", "@radix-ui/react-radio-group", "@radix-ui/react-toggle-group", "@radix-ui/react-tabs", "@radix-ui/react-slider", "@radix-ui/react-switch", "@radix-ui/react-toast", "@radix-ui/react-toggle", "@radix-ui/react-tooltip"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.RadixAlertDialog, global.jsxRuntime, global.classVarianceAuthority, global.react, global.RadixAvatar, global.RadixCheckbox, global.reactResponsive, global.cmdk, global.RadixDialog, global.reactDayPicker, global.dynamic, global.RadixHoverCard, global.reactTransitionGroup, global.ReactDOM, global.reactSlot, global.react$1, global.RadixSeparator, global.RadixOneTimePasswordField, global.reactErrorBoundary, global.RadixPopover, global.RadixProgress, global.RadixRadioGroup, global.RadixToggleGroup, global.RadixTabs, global.RadixSlider, global.RadixSwitch, global.RadixToast, global.Toggle, global.RadixTooltip));
-})(this, function(exports2, RadixAlertDialog, jsxRuntime, classVarianceAuthority, react, RadixAvatar, RadixCheckbox, reactResponsive, cmdk, RadixDialog, reactDayPicker, dynamic, RadixHoverCard, reactTransitionGroup, ReactDOM, reactSlot, react$1, RadixSeparator, RadixOneTimePasswordField, reactErrorBoundary, RadixPopover, RadixProgress, RadixRadioGroup, RadixToggleGroup, RadixTabs, RadixSlider, RadixSwitch, RadixToast, Toggle, RadixTooltip) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@radix-ui/react-alert-dialog"), require("react/jsx-runtime"), require("class-variance-authority"), require("react"), require("@radix-ui/react-avatar"), require("@radix-ui/react-checkbox"), require("react-responsive"), require("@radix-ui/react-collapsible"), require("cmdk"), require("@radix-ui/react-dialog"), require("react-day-picker"), require("lucide-react/dynamic"), require("@radix-ui/react-hover-card"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-slot"), require("@floating-ui/react"), require("@radix-ui/react-separator"), require("@radix-ui/react-one-time-password-field"), require("react-error-boundary"), require("@radix-ui/react-popover"), require("@radix-ui/react-progress"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-tabs"), require("@radix-ui/react-slider"), require("@radix-ui/react-switch"), require("@radix-ui/react-toast"), require("@radix-ui/react-toggle"), require("@radix-ui/react-tooltip")) : typeof define === "function" && define.amd ? define(["exports", "@radix-ui/react-alert-dialog", "react/jsx-runtime", "class-variance-authority", "react", "@radix-ui/react-avatar", "@radix-ui/react-checkbox", "react-responsive", "@radix-ui/react-collapsible", "cmdk", "@radix-ui/react-dialog", "react-day-picker", "lucide-react/dynamic", "@radix-ui/react-hover-card", "react-transition-group", "react-dom", "@radix-ui/react-slot", "@floating-ui/react", "@radix-ui/react-separator", "@radix-ui/react-one-time-password-field", "react-error-boundary", "@radix-ui/react-popover", "@radix-ui/react-progress", "@radix-ui/react-radio-group", "@radix-ui/react-toggle-group", "@radix-ui/react-tabs", "@radix-ui/react-slider", "@radix-ui/react-switch", "@radix-ui/react-toast", "@radix-ui/react-toggle", "@radix-ui/react-tooltip"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.RadixAlertDialog, global.jsxRuntime, global.classVarianceAuthority, global.React, global.RadixAvatar, global.RadixCheckbox, global.reactResponsive, global.RadixPrimitiveCollapsible, global.cmdk, global.RadixDialog, global.reactDayPicker, global.dynamic, global.RadixHoverCard, global.reactTransitionGroup, global.ReactDOM, global.reactSlot, global.react, global.RadixSeparator, global.RadixOneTimePasswordField, global.reactErrorBoundary, global.RadixPopover, global.RadixProgress, global.RadixRadioGroup, global.RadixToggleGroup, global.RadixTabs, global.RadixSlider, global.RadixSwitch, global.RadixToast, global.Toggle, global.RadixTooltip));
+})(this, function(exports2, RadixAlertDialog, jsxRuntime, classVarianceAuthority, React, RadixAvatar, RadixCheckbox, reactResponsive, RadixPrimitiveCollapsible, cmdk, RadixDialog, reactDayPicker, dynamic, RadixHoverCard, reactTransitionGroup, ReactDOM, reactSlot, react, RadixSeparator, RadixOneTimePasswordField, reactErrorBoundary, RadixPopover, RadixProgress, RadixRadioGroup, RadixToggleGroup, RadixTabs, RadixSlider, RadixSwitch, RadixToast, Toggle, RadixTooltip) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -19,8 +19,10 @@
     return Object.freeze(n);
   }
   const RadixAlertDialog__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixAlertDialog);
+  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
   const RadixAvatar__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixAvatar);
   const RadixCheckbox__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixCheckbox);
+  const RadixPrimitiveCollapsible__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixPrimitiveCollapsible);
   const RadixDialog__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixDialog);
   const RadixHoverCard__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixHoverCard);
   const RadixSeparator__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixSeparator);
@@ -101,17 +103,17 @@
       }
     ]
   });
-  const ProviderContext = react.createContext({});
+  const ProviderContext = React.createContext({});
   const useProvider = () => {
-    const context = react.useContext(ProviderContext);
+    const context = React.useContext(ProviderContext);
     if (!context) {
       throw new Error("useProvider must be used within a Provider");
     }
     return context;
   };
-  const Provider = react.memo((props) => {
+  const Provider = React.memo((props) => {
     const { accentColor, radius = "md", children } = props;
-    const contextValue = react.useMemo(
+    const contextValue = React.useMemo(
       () => ({
         accentColor,
         radius
@@ -178,7 +180,7 @@
       }
     }
   );
-  const AlertDialogContent = react.memo((props) => {
+  const AlertDialogContent = React.memo((props) => {
     const { radius } = useProvider();
     const { ref, children, className, size, container, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(RadixAlertDialog__namespace.Portal, { container, children: [
@@ -196,18 +198,18 @@
     ] });
   });
   AlertDialogContent.displayName = "AlertDialogContent";
-  const AlertDialogContext = react.createContext(() => {
+  const AlertDialogContext = React.createContext(() => {
     throw new Error("No AlertDialogProvider found");
   });
   const useAlertDialog = () => {
-    const alertDialogContext = react.useContext(AlertDialogContext);
+    const alertDialogContext = React.useContext(AlertDialogContext);
     if (!alertDialogContext) {
       throw new Error("No AlertDialogProvider found");
     }
     return alertDialogContext;
   };
-  const ButtonGroupContext = react.createContext({});
-  const ButtonGroup = react.memo((props) => {
+  const ButtonGroupContext = React.createContext({});
+  const ButtonGroup = React.memo((props) => {
     const providerContext = useProvider();
     const {
       children,
@@ -217,7 +219,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const value = react.useMemo(
+    const value = React.useMemo(
       () => ({
         variant,
         size,
@@ -229,7 +231,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupContext.Provider, { value, children }) });
   });
   ButtonGroup.displayName = "Buttons";
-  const useButtonGroup = () => react.useContext(ButtonGroupContext);
+  const useButtonGroup = () => React.useContext(ButtonGroupContext);
   const buttonCva = classVarianceAuthority.cva(
     [
       "inline-flex",
@@ -383,7 +385,7 @@
       }
     }
   );
-  const Button = react.memo((props) => {
+  const Button = React.memo((props) => {
     const providerContext = useProvider();
     const buttonsContext = useButtonGroup();
     const {
@@ -408,7 +410,7 @@
     );
   });
   Button.displayName = "Button";
-  const IconButton = react.memo((props) => {
+  const IconButton = React.memo((props) => {
     const providerContext = useProvider();
     const buttonsContext = useButtonGroup();
     const {
@@ -433,11 +435,11 @@
     );
   });
   IconButton.displayName = "IconButton";
-  const AlertDialogProvider = react.memo((props) => {
+  const AlertDialogProvider = React.memo((props) => {
     const { children } = props;
-    const [open, setOpen] = react.useState(false);
-    const [options, setOptions] = react.useState(null);
-    const handleOpenChange = react.useCallback(
+    const [open, setOpen] = React.useState(false);
+    const [options, setOptions] = React.useState(null);
+    const handleOpenChange = React.useCallback(
       (open2) => {
         var _a;
         setOpen(open2);
@@ -446,7 +448,7 @@
       },
       [options]
     );
-    const openAlertDialog = react.useCallback(
+    const openAlertDialog = React.useCallback(
       (config) => {
         if (open) throw new Error("AlertDialog is already open");
         setOpen(true);
@@ -483,7 +485,7 @@
     Action: RadixAlertDialog__namespace.Action,
     Cancel: RadixAlertDialog__namespace.Cancel
   };
-  const AvatarContext = react.createContext({});
+  const AvatarContext = React.createContext({});
   const avatar = classVarianceAuthority.cva(["shrink-0", "select-none", "inline-block", "align-middle"], {
     variants: {
       size: {
@@ -511,13 +513,13 @@
       variant: "solid"
     }
   });
-  const AvatarFallback = react.memo((props) => {
+  const AvatarFallback = React.memo((props) => {
     const { ref, children, className, ...rest } = props;
-    const { variant } = react.useContext(AvatarContext);
+    const { variant } = React.useContext(AvatarContext);
     return /* @__PURE__ */ jsxRuntime.jsx(RadixAvatar__namespace.AvatarFallback, { className: classVarianceAuthority.cx(avatarFallback({ variant }), className), ref, ...rest, children });
   });
   AvatarFallback.displayName = "AvatarFallback";
-  const AvatarImage = react.memo((props) => {
+  const AvatarImage = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadixAvatar__namespace.Image,
@@ -529,7 +531,7 @@
     );
   });
   AvatarImage.displayName = "AvatarImage";
-  const AvatarRoot = react.memo((props) => {
+  const AvatarRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -637,7 +639,7 @@
       icon: false
     }
   });
-  const Badge = react.memo((props) => {
+  const Badge = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -682,7 +684,7 @@
       variant: "surface"
     }
   });
-  const Card = react.memo((props) => {
+  const Card = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -706,7 +708,7 @@
     );
   });
   Card.displayName = "Card";
-  const CheckboxIndicator = react.memo((props) => {
+  const CheckboxIndicator = React.memo((props) => {
     const { ref, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadixCheckbox__namespace.CheckboxIndicator,
@@ -762,7 +764,7 @@
       }
     }
   );
-  const CheckboxRoot = react.memo((props) => {
+  const CheckboxRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -790,18 +792,94 @@
     Root: CheckboxRoot,
     Indicator: CheckboxIndicator
   };
-  const SelectContext = react.createContext({});
-  const MultiSelectContext = react.createContext({});
+  const SelectContext = React.createContext({});
+  const MultiSelectContext = React.createContext({});
+  const usePassiveLayoutEffect = React[typeof document !== "undefined" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"];
+  const useLatest = (current) => {
+    const storedValue = React__namespace.useRef(current);
+    React__namespace.useEffect(() => {
+      storedValue.current = current;
+    });
+    return storedValue;
+  };
+  function _ref() {
+  }
+  function useResizeObserver(target, callback, options = {}) {
+    const resizeObserver = getResizeObserver(options.polyfill);
+    const storedCallback = useLatest(callback);
+    usePassiveLayoutEffect(() => {
+      let didUnsubscribe = false;
+      const targetEl = target && "current" in target ? target.current : target;
+      if (!targetEl) return _ref;
+      function cb(entry, observer) {
+        if (didUnsubscribe) return;
+        storedCallback.current(entry, observer);
+      }
+      resizeObserver.subscribe(targetEl, cb);
+      return () => {
+        didUnsubscribe = true;
+        resizeObserver.unsubscribe(targetEl, cb);
+      };
+    }, [target, resizeObserver, storedCallback]);
+    return resizeObserver.observer;
+  }
+  function createResizeObserver(polyfill) {
+    let ticking = false;
+    let allEntries = [];
+    const callbacks = /* @__PURE__ */ new Map();
+    const observer = new (polyfill || window.ResizeObserver)((entries, obs) => {
+      allEntries = allEntries.concat(entries);
+      function _ref2() {
+        const triggered = /* @__PURE__ */ new Set();
+        for (let i = 0; i < allEntries.length; i++) {
+          if (triggered.has(allEntries[i].target)) continue;
+          triggered.add(allEntries[i].target);
+          const cbs = callbacks.get(allEntries[i].target);
+          cbs === null || cbs === void 0 ? void 0 : cbs.forEach((cb) => cb(allEntries[i], obs));
+        }
+        allEntries = [];
+        ticking = false;
+      }
+      if (!ticking) {
+        window.requestAnimationFrame(_ref2);
+      }
+      ticking = true;
+    });
+    return {
+      observer,
+      subscribe(target, callback) {
+        var _callbacks$get;
+        observer.observe(target);
+        const cbs = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
+        cbs.push(callback);
+        callbacks.set(target, cbs);
+      },
+      unsubscribe(target, callback) {
+        var _callbacks$get2;
+        const cbs = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
+        if (cbs.length === 1) {
+          observer.unobserve(target);
+          callbacks.delete(target);
+          return;
+        }
+        const cbIndex = cbs.indexOf(callback);
+        if (cbIndex !== -1) cbs.splice(cbIndex, 1);
+        callbacks.set(target, cbs);
+      }
+    };
+  }
+  let _resizeObserver;
+  const getResizeObserver = (polyfill) => !_resizeObserver ? _resizeObserver = createResizeObserver(polyfill) : _resizeObserver;
   const useViewportSize = (props) => {
     const { xs: xsProps, sm: smProps, md: mdProps, lg: lgProps, xl: xlProps } = props;
-    const [prevSize, setPrevSize] = react.useState("initial");
-    const [size, setSize] = react.useState("initial");
+    const [prevSize, setPrevSize] = React.useState("initial");
+    const [size, setSize] = React.useState("initial");
     const xs = reactResponsive.useMediaQuery({ minWidth: xsProps });
     const sm = reactResponsive.useMediaQuery({ minWidth: smProps });
     const md = reactResponsive.useMediaQuery({ minWidth: mdProps });
     const lg = reactResponsive.useMediaQuery({ minWidth: lgProps });
     const xl = reactResponsive.useMediaQuery({ minWidth: xlProps });
-    react.useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
       setSize((prev) => {
         setPrevSize(prev);
         return xl ? "xl" : lg ? "lg" : md ? "md" : sm ? "sm" : xs ? "xs" : "initial";
@@ -809,58 +887,69 @@
     }, [lg, md, sm, xl, xs]);
     return { size, prevSize, xs, sm, md, lg, xl };
   };
-  function useTextFilter(items, filterFunction) {
-    const [filteredOptions, setFilteredOptions] = react.useState([]);
-    const [filterValue, setFilterValue] = react.useState("");
-    react.useEffect(() => {
-      setFilteredOptions(items.filter((value) => filterFunction(value, filterValue)));
-    }, [filterFunction, filterValue, items]);
+  const useStopEventPropagation = () => {
+    return React.useCallback((event) => {
+      event.stopPropagation();
+    }, []);
+  };
+  function useTextFilter(values, filterFunction) {
+    const [filteredOptions, setFilteredOptions] = React.useState([]);
+    const [filterValue, setFilterValue] = React.useState("");
+    React.useEffect(() => {
+      setFilteredOptions(values.filter((value) => filterFunction(value, filterValue)));
+    }, [filterFunction, filterValue, values]);
     return [filteredOptions, filterValue, setFilterValue];
   }
+  const useSize = (target) => {
+    const [size, setSize] = React.useState();
+    React.useLayoutEffect(() => {
+      var _a;
+      setSize((_a = target.current) == null ? void 0 : _a.getBoundingClientRect());
+    }, [target]);
+    const handleResize = React.useCallback((entry) => {
+      const rect = entry.contentRect;
+      setSize(rect);
+    }, []);
+    useResizeObserver(target, handleResize);
+    return size;
+  };
+  const genericMemo = React.memo;
   function useControlledState(initialState, state, setState) {
-    const [uncontrolledState, setUncontrolledState] = react.useState(initialState);
-    const handleStateChange = react.useCallback(
+    const [uncontrolledState, setUncontrolledState] = React.useState(initialState);
+    const handleStateChange = React.useCallback(
       (state2) => {
         setUncontrolledState(state2);
         setState == null ? void 0 : setState(state2);
       },
       [setState]
     );
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (state !== void 0) {
         setUncontrolledState(state);
       }
     }, [state]);
     return [state ?? uncontrolledState, handleStateChange];
   }
-  function useFallbackId(id) {
-    const fallbackId = react.useId();
-    return id ?? fallbackId;
-  }
-  const genericMemo = react.memo;
   function mergeRefs(refs) {
     return (value) => {
-      const cleanups = refs.reduce(
-        (cleanups2, ref) => {
-          if (typeof ref === "function") {
-            const cleanup = ref(value);
-            if (typeof cleanup === "function") {
-              cleanups2.push(cleanup);
-            } else {
-              cleanups2.push(() => {
-                ref(null);
-              });
-            }
-          } else if (ref != null) {
-            ref.current = value;
+      const cleanups = refs.reduce((cleanups2, ref) => {
+        if (typeof ref === "function") {
+          const cleanup = ref(value);
+          if (typeof cleanup === "function") {
+            cleanups2.push(cleanup);
+          } else {
             cleanups2.push(() => {
-              ref.current = null;
+              ref(null);
             });
           }
-          return cleanups2;
-        },
-        []
-      );
+        } else if (ref != null) {
+          ref.current = value;
+          cleanups2.push(() => {
+            ref.current = null;
+          });
+        }
+        return cleanups2;
+      }, []);
       return () => {
         cleanups.forEach((cleanup) => {
           cleanup();
@@ -871,26 +960,11 @@
   const stopPropagation = (e) => {
     e.stopPropagation();
   };
-  function getSelectedState(selected) {
-    return selected ? "selected" : "unselected";
-  }
-  function getCheckedState(checked) {
-    return checked === true ? "checked" : checked === false ? "unchecked" : "indeterminate";
-  }
-  function getActiveState(active) {
-    return active ? "active" : "inactive";
-  }
-  function getBooleanState(value) {
-    return value ? "true" : "false";
-  }
-  function getOpenState(open) {
-    return open ? "open" : "closed";
-  }
   const MultiSelectProvider = genericMemo(function MultiSelectProvider2(props) {
     const { children, defaultValues, values: controlledValues, onValuesChange } = props;
-    const [itemValueMapping, setItemValueMapping] = react.useState(/* @__PURE__ */ new Set());
+    const [itemValueMapping, setItemValueMapping] = React.useState(/* @__PURE__ */ new Set());
     const [values, setValues] = useControlledState(defaultValues ?? [], controlledValues, onValuesChange);
-    const registerValue = react.useCallback((value) => {
+    const registerValue = React.useCallback((value) => {
       setItemValueMapping((prev) => {
         const newSet = new Set(prev);
         newSet.add(value);
@@ -904,8 +978,8 @@
         });
       };
     }, []);
-    const selected = react.useCallback((value) => values.includes(value), [values]);
-    const selectValue = react.useCallback(
+    const selected = React.useCallback((value) => values.includes(value), [values]);
+    const selectValue = React.useCallback(
       (value) => {
         if (selected(value)) {
           setValues(values.filter((v) => v !== value));
@@ -915,20 +989,20 @@
       },
       [selected, setValues, values]
     );
-    const allSelected = react.useMemo(() => {
+    const allSelected = React.useMemo(() => {
       return Array.from(itemValueMapping.values()).every((value) => values.includes(value));
     }, [itemValueMapping, values]);
-    const someSelected = react.useMemo(() => {
+    const someSelected = React.useMemo(() => {
       return Array.from(itemValueMapping.values()).some((value) => values.includes(value));
     }, [itemValueMapping, values]);
-    const toggleSelectAll = react.useCallback(() => {
+    const toggleSelectAll = React.useCallback(() => {
       if (allSelected) {
         setValues([]);
       } else {
         setValues(Array.from(itemValueMapping.values()));
       }
     }, [allSelected, itemValueMapping, setValues]);
-    const contextValue = react.useMemo(
+    const contextValue = React.useMemo(
       () => ({ selected, selectValue, allSelected, someSelected, toggleSelectAll, registerValue }),
       [allSelected, registerValue, selectValue, selected, someSelected, toggleSelectAll]
     );
@@ -937,51 +1011,51 @@
   const SingleSelectRequiredProvider = genericMemo(function SingleSelectRequiredProvider2(props) {
     const { children, defaultValue, value, onValueChange } = props;
     const [controlledValue, setControlledValue] = useControlledState(defaultValue, value, onValueChange);
-    const selected = react.useCallback((v) => v === controlledValue, [controlledValue]);
-    const selectValue = react.useCallback(
+    const selected = React.useCallback((v) => v === controlledValue, [controlledValue]);
+    const selectValue = React.useCallback(
       (v) => {
         if (selected(v)) return;
         setControlledValue(v);
       },
       [selected, setControlledValue]
     );
-    const contextValue = react.useMemo(() => ({ selected, selectValue }), [selectValue, selected]);
+    const contextValue = React.useMemo(() => ({ selected, selectValue }), [selectValue, selected]);
     return /* @__PURE__ */ jsxRuntime.jsx(SelectContext, { value: contextValue, children });
   });
   const SingleSelectNotRequiredProvider = genericMemo(function SingleSelectNotRequiredProvider2(props) {
     const { children, defaultValue = void 0, value: controlledValue, onValueChange } = props;
     const [value, setValue] = useControlledState(defaultValue, controlledValue, onValueChange);
-    const selected = react.useCallback((v) => v === value, [value]);
-    const selectValue = react.useCallback(
+    const selected = React.useCallback((v) => v === value, [value]);
+    const selectValue = React.useCallback(
       (v) => {
         setValue(selected(v) ? void 0 : v);
       },
       [selected, setValue]
     );
-    const contextValue = react.useMemo(() => ({ selected, selectValue }), [selected, selectValue]);
+    const contextValue = React.useMemo(() => ({ selected, selectValue }), [selected, selectValue]);
     return /* @__PURE__ */ jsxRuntime.jsx(SelectContext, { value: contextValue, children });
   });
-  const CheckboxGroupContext = react.createContext({});
-  const CheckboxGroupItem = react.memo((props) => {
-    const groupContext = react.use(CheckboxGroupContext);
+  const CheckboxGroupContext = React.createContext({});
+  const CheckboxGroupItem = React.memo((props) => {
+    const groupContext = React.use(CheckboxGroupContext);
     const {
       ref,
       className,
       value,
+      accentColor,
       disabled,
-      accentColor = groupContext.accentColor,
       variant = groupContext.variant,
       size = groupContext.size,
       radius = groupContext.radius,
       ...rest
     } = props;
-    const { selected, selectValue, registerValue } = react.use(MultiSelectContext);
-    react.useLayoutEffect(() => {
+    const { selected, selectValue, registerValue } = React.use(MultiSelectContext);
+    React.useLayoutEffect(() => {
       return registerValue(value);
     }, [registerValue, value]);
     const isChecked = selected(value);
     const isDisabled = groupContext.disabled || disabled;
-    const handleCheckedChange = react.useCallback(() => {
+    const handleCheckedChange = React.useCallback(() => {
       selectValue(value);
     }, [selectValue, value]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1001,12 +1075,15 @@
     );
   });
   CheckboxGroupItem.displayName = "CheckboxGroupItem";
-  const CheckboxGroupItemIndicator = react.memo((props) => {
+  const CheckboxGroupItemIndicator = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: classVarianceAuthority.cx("flex items-center justify-center", className), ref, ...rest });
   });
   CheckboxGroupItemIndicator.displayName = "CheckboxGroupItemIndicator";
-  const CheckboxGroupRoot = react.memo((props) => {
+  function getBooleanState$1(value) {
+    return value ? "true" : "false";
+  }
+  const CheckboxGroupRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -1023,27 +1100,25 @@
       size = "md",
       ...rest
     } = props;
-    const contextValue = react.useMemo(
+    const contextValue = React.useMemo(
       () => ({
         name,
         required,
         disabled,
-        // style props
-        accentColor,
         size,
         variant,
         radius
       }),
-      [accentColor, disabled, name, radius, required, size, variant]
+      [disabled, name, radius, required, size, variant]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         role: "group",
-        "data-disabled": getBooleanState(!!disabled),
+        "data-disabled": getBooleanState$1(!!disabled),
         "data-accent-color": accentColor,
-        "aria-disabled": getBooleanState(!!disabled),
+        "aria-disabled": getBooleanState$1(!!disabled),
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
           MultiSelectProvider,
@@ -1058,19 +1133,19 @@
     );
   });
   CheckboxGroupRoot.displayName = "CheckboxGroupRoot";
-  const CheckboxGroupSelectAllItem = react.memo((props) => {
-    const groupContext = react.use(CheckboxGroupContext);
+  const CheckboxGroupSelectAllItem = React.memo((props) => {
+    const groupContext = React.use(CheckboxGroupContext);
     const {
       ref,
       className,
+      accentColor,
       disabled,
-      accentColor = groupContext.accentColor,
       variant = groupContext.variant,
       size = groupContext.size,
       radius = groupContext.radius,
       ...rest
     } = props;
-    const { allSelected, someSelected, toggleSelectAll } = react.use(MultiSelectContext);
+    const { allSelected, someSelected, toggleSelectAll } = React.use(MultiSelectContext);
     const checked = allSelected ? true : someSelected ? "indeterminate" : false;
     const isDisabled = groupContext.disabled || disabled;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1095,39 +1170,137 @@
     SelectAllItem: CheckboxGroupSelectAllItem,
     ItemIndicator: CheckboxGroupItemIndicator
   };
-  const CheckedIndicatorContext = react.createContext({});
-  const CheckedIndicator = react.memo((props) => {
-    const { children, ref, className, ...rest } = props;
-    const checked = react.useContext(CheckedIndicatorContext);
-    const computedChildren = typeof children === "function" ? children(checked) : children;
+  const CollapsibleTreeContext = React.createContext(
+    {}
+  );
+  function useCollapsibleTreeContext() {
+    return React.useContext(CollapsibleTreeContext);
+  }
+  const CollapsibleNode = genericMemo(function(props) {
+    const { meta, nodes, level = 0, disabled } = props;
+    const [controlledOpenState, setControlledOpenState] = React.useState(false);
+    const {
+      nodeRenderer,
+      disabled: disabledFromContext,
+      onNodeOpen,
+      onNodeClose,
+      onNodeClick,
+      nodeStyles,
+      nodeClassName
+    } = useCollapsibleTreeContext();
+    const isDisabled = disabled ?? disabledFromContext;
+    const handleClick = React.useCallback(() => {
+      if (onNodeClick) onNodeClick(meta);
+    }, [meta, onNodeClick]);
+    const toggleOpenState = React.useCallback(() => {
+      setControlledOpenState(!controlledOpenState);
+      if (!controlledOpenState && onNodeOpen) onNodeOpen(meta);
+      if (controlledOpenState && onNodeClose) onNodeClose(meta);
+    }, [meta, onNodeClose, onNodeOpen, controlledOpenState]);
+    const { children, style, className } = React.useMemo(() => {
+      return nodeRenderer({
+        meta,
+        toggleOpen: toggleOpenState,
+        open: controlledOpenState,
+        disabled: isDisabled
+      });
+    }, [isDisabled, meta, nodeRenderer, toggleOpenState, controlledOpenState]);
+    const combinedStyles = React.useMemo(
+      () => ({
+        // want node specific styles to overwrite and global node styles
+        ...nodeStyles,
+        ...style
+      }),
+      [nodeStyles, style]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixPrimitiveCollapsible__namespace.Root, { asChild: true, open: controlledOpenState, disabled: isDisabled, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          onClick: handleClick,
+          className: classVarianceAuthority.cx(nodeClassName, "flex w-full shrink-0 items-center", className),
+          style: combinedStyles,
+          "data-state": controlledOpenState ? "open" : "closed",
+          "data-disabled": isDisabled,
+          children
+        }
+      ),
+      nodes && nodes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(RadixPrimitiveCollapsible__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-max w-full flex-col pl-2", children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        CollapsibleNode,
+        {
+          level: level + 1,
+          ...treeNodeProps
+        },
+        `${level},${index}`
+      )) }) })
+    ] }) });
+  });
+  const CollapsibleTree = genericMemo(function(props) {
+    const {
+      nodes,
+      disabled = false,
+      nodeClassName,
+      nodeStyles,
+      onNodeClick,
+      onNodeClose,
+      onNodeOpen,
+      nodeRenderer,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsibleTreeContext.Provider,
+      {
+        value: {
+          nodeRenderer,
+          nodeClassName,
+          nodeStyles,
+          disabled,
+          onNodeClick,
+          onNodeClose,
+          onNodeOpen
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-max w-full flex-col", ...rest, children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsxRuntime.jsx(CollapsibleNode, { ...treeNodeProps }, `${0},${index}`)) })
+      }
+    );
+  });
+  const CommandMenuContext = React.createContext({});
+  const SelectedIndicatorContext$1 = React.createContext(false);
+  const CheckboxIndicatorContext = React.createContext(false);
+  const CommandMenuPageContext = React.createContext({});
+  const CommandMenuDialogContext = React.createContext({});
+  function getSelectedState$1(selected) {
+    return selected ? "selected" : "unselected";
+  }
+  function getCheckedState$1(checked) {
+    return checked === true ? "checked" : checked === false ? "unchecked" : "indeterminate";
+  }
+  function getActiveState(active) {
+    return active ? "active" : "inactive";
+  }
+  const CommandMenuCheckboxIndicator = React.memo((props) => {
+    const { ref, className, children, ...rest } = props;
+    const checkedState = React.use(CheckboxIndicatorContext);
+    const computedChildren = React.useMemo(() => {
+      return typeof children === "function" ? children(checkedState) : children;
+    }, [checkedState, children]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         ref,
+        "data-state": getCheckedState$1(checkedState),
         className: classVarianceAuthority.cx(
-          "flex size-max items-center",
+          "inline-block size-max",
           {
-            invisible: checked === false
+            invisible: checkedState === false
           },
           className
         ),
-        "data-state": getCheckedState(checked),
         ...rest,
         children: computedChildren
       }
     );
   });
-  CheckedIndicator.displayName = "CheckedIndicator";
-  const CommandMenuCheckboxIndicator = react.memo((props) => {
-    const { ref, children, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicator, { ref, ...rest, children });
-  });
   CommandMenuCheckboxIndicator.displayName = "CommandMenuCheckboxIndicator";
-  const CommandMenuContext = react.createContext({});
-  const SelectedIndicatorContext$1 = react.createContext(false);
-  const CheckboxIndicatorContext = react.createContext(false);
-  const CommandMenuPageContext = react.createContext({});
-  const CommandMenuDialogContext = react.createContext({});
   const commandMenuContentCva = classVarianceAuthority.cva(
     [
       "ring",
@@ -1336,11 +1509,11 @@
       }
     }
   );
-  const CommandMenuItem = react.memo((props) => {
+  const CommandMenuItem = React.memo((props) => {
     const { className, ref, closeOnSelect = true, onSelect, filterValue, ...rest } = props;
-    const { size, variant, radius } = react.use(CommandMenuContext);
-    const { setOpen } = react.use(CommandMenuDialogContext);
-    const handleSelect = react.useCallback(() => {
+    const { size, variant, radius } = React.use(CommandMenuContext);
+    const { setOpen } = React.use(CommandMenuDialogContext);
+    const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       if (closeOnSelect) {
         setOpen(false);
@@ -1358,16 +1531,16 @@
     );
   });
   CommandMenuItem.displayName = "CommandMenuItem";
-  const CommandMenuCheckboxItem = react.memo((props) => {
+  const CommandMenuCheckboxItem = React.memo((props) => {
     const { children, ref, checked, onCheckedChange, onSelect, ...rest } = props;
-    const handleSelect = react.useCallback(() => {
+    const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       onCheckedChange(checked !== true);
     }, [checked, onCheckedChange, onSelect]);
-    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState(checked), ...rest, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState$1(checked), ...rest, children }) });
   });
   CommandMenuCheckboxItem.displayName = "CommandMenuCheckboxItem";
-  const CommandMenuContent = react.memo((props) => {
+  const CommandMenuContent = React.memo((props) => {
     const providerContext = useProvider();
     const {
       children,
@@ -1387,14 +1560,13 @@
       radius = providerContext.radius,
       ...rest
     } = props;
-    const contextValue = react.useMemo(() => {
+    const contextValue = React.useMemo(() => {
       return {
         variant,
         size,
-        radius,
-        accentColor
+        radius
       };
-    }, [accentColor, radius, size, variant]);
+    }, [radius, size, variant]);
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       RadixDialog.DialogContent,
       {
@@ -1424,27 +1596,27 @@
     ) });
   });
   CommandMenuContent.displayName = "CommandMenuContent";
-  const CommandMenuEmpty = react.memo((props) => {
+  const CommandMenuEmpty = React.memo((props) => {
     const { className, ref, ...rest } = props;
-    const { size } = react.use(CommandMenuContext);
+    const { size } = React.use(CommandMenuContext);
     return /* @__PURE__ */ jsxRuntime.jsx(cmdk.CommandEmpty, { className: classVarianceAuthority.cx(commandMenuEmptyCva({ size }), className), ref, ...rest });
   });
   CommandMenuEmpty.displayName = "CommandMenuEmpty";
-  const CommandMenuGroup = react.memo((props) => {
+  const CommandMenuGroup = React.memo((props) => {
     const { className, ref, ...rest } = props;
-    const { size } = react.use(CommandMenuContext);
+    const { size } = React.use(CommandMenuContext);
     return /* @__PURE__ */ jsxRuntime.jsx(cmdk.CommandGroup, { className: classVarianceAuthority.cx(commandMenuGroupCva({ size }), className), ref, ...rest });
   });
   CommandMenuGroup.displayName = "CommandMenuGroup";
-  const CommandMenuInput = react.memo((props) => {
+  const CommandMenuInput = React.memo((props) => {
     const { className, ref, ...rest } = props;
-    const { size } = react.use(CommandMenuContext);
+    const { size } = React.use(CommandMenuContext);
     return /* @__PURE__ */ jsxRuntime.jsx(cmdk.CommandInput, { className: classVarianceAuthority.cx(commandMenuInputCva({ size }), className), ref, ...rest });
   });
   CommandMenuInput.displayName = "CommandMenuInput";
-  const CommandMenuList = react.memo((props) => {
+  const CommandMenuList = React.memo((props) => {
     const { className, ref, ...rest } = props;
-    const { size } = react.use(CommandMenuContext);
+    const { size } = React.use(CommandMenuContext);
     const filterCount = cmdk.useCommandState((state) => state.filtered.count);
     return /* @__PURE__ */ jsxRuntime.jsx(
       cmdk.CommandList,
@@ -1467,11 +1639,11 @@
       selected,
       selectValue: handleSelectValue,
       registerValue
-    } = react.use(MultiSelectContext);
-    react.useLayoutEffect(() => {
+    } = React.use(MultiSelectContext);
+    React.useLayoutEffect(() => {
       return registerValue(value);
     }, [registerValue, value]);
-    const handleSelect = react.useCallback(() => {
+    const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       handleSelectValue(value);
     }, [handleSelectValue, onSelect, value]);
@@ -1481,7 +1653,7 @@
       {
         ref,
         onSelect: handleSelect,
-        "data-state": getSelectedState(isSelected),
+        "data-state": getSelectedState$1(isSelected),
         "aria-selected": isSelected,
         closeOnSelect,
         ...rest,
@@ -1489,29 +1661,29 @@
       }
     ) });
   });
-  const CommandMenuOverlay = react.memo((props) => {
+  const CommandMenuOverlay = React.memo((props) => {
     const { container, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogPortal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogOverlay, { className: classVarianceAuthority.cx(commandMenuOverlayCva(), className), "data-floating-content": "", ...rest }) });
   });
   CommandMenuOverlay.displayName = "CommandMenuOverlay";
-  const CommandMenuPage = react.memo((props) => {
+  const CommandMenuPage = React.memo((props) => {
     const { children, ref, page, ...rest } = props;
-    const { page: activePage } = react.use(CommandMenuPageContext);
-    const isActive = react.useMemo(() => page === activePage, [page, activePage]);
+    const { page: activePage } = React.use(CommandMenuPageContext);
+    const isActive = React.useMemo(() => page === activePage, [page, activePage]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-active": getActiveState(isActive), hidden: !isActive, ...rest, children: isActive ? children : null });
   });
   CommandMenuPage.displayName = "CommandMenuPage";
-  const CommandMenuPages = react.memo((props) => {
+  const CommandMenuPages = React.memo((props) => {
     const { children, defaultPage = "", page: controlledPage, onPageChange } = props;
     const [page, setPage] = useControlledState(defaultPage, controlledPage, onPageChange);
     return /* @__PURE__ */ jsxRuntime.jsx(CommandMenuPageContext, { value: { page, setPage }, children });
   });
   CommandMenuPages.displayName = "CommandMenuPages";
-  const CommandMenuPageTriggerItem = react.memo((props) => {
+  const CommandMenuPageTriggerItem = React.memo((props) => {
     const { ref, page, onSelect, closeOnSelect = false, ...rest } = props;
-    const { page: activePage, setPage } = react.use(CommandMenuPageContext);
-    const isActive = react.useMemo(() => page === activePage, [page, activePage]);
-    const handleSelect = react.useCallback(() => {
+    const { page: activePage, setPage } = React.use(CommandMenuPageContext);
+    const isActive = React.useMemo(() => page === activePage, [page, activePage]);
+    const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       setPage(page);
     }, [onSelect, page, setPage]);
@@ -1549,18 +1721,18 @@
   });
   const CommandMenuRadioItem = genericMemo(function(props) {
     const { children, ref, value, onSelect, ...rest } = props;
-    const { selected, selectValue } = react.use(SelectContext);
-    const handleSelect = react.useCallback(() => {
+    const { selected, selectValue } = React.use(SelectContext);
+    const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       selectValue(value);
     }, [onSelect, selectValue, value]);
     const isSelected = selected(value);
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState(isSelected), ...rest, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState$1(isSelected), ...rest, children }) });
   });
-  const CommandMenuRoot = react.memo((props) => {
+  const CommandMenuRoot = React.memo((props) => {
     const { children, defaultOpen, open: controlledOpen, onOpenChange, modal } = props;
     const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-    const contextValue = react.useMemo(() => {
+    const contextValue = React.useMemo(() => {
       return {
         open,
         setOpen
@@ -1571,8 +1743,8 @@
   CommandMenuRoot.displayName = "CommandMenuRoot";
   const CommandMenuSelectAllItem = genericMemo(function(props) {
     const { ref, onSelect, closeOnSelect = false, ...rest } = props;
-    const { allSelected, someSelected, toggleSelectAll } = react.use(MultiSelectContext);
-    const handleSelect = react.useCallback(() => {
+    const { allSelected, someSelected, toggleSelectAll } = React.use(MultiSelectContext);
+    const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       toggleSelectAll();
     }, [onSelect, toggleSelectAll]);
@@ -1583,47 +1755,43 @@
         ref,
         role: "menuitemcheckbox",
         onSelect: handleSelect,
-        "data-state": getCheckedState(selectedState),
+        "data-state": getCheckedState$1(selectedState),
         closeOnSelect,
         ...rest
       }
     ) });
   });
-  const SelectedIndicatorContext = react.createContext(false);
-  const SelectedIndicator = react.memo((props) => {
-    const { ref, children, className, ...rest } = props;
-    const isSelected = react.use(SelectedIndicatorContext);
-    const computedChildren = typeof children === "function" ? children(isSelected) : children;
+  const CommandMenuSelectedIndicator = React.memo((props) => {
+    const { ref, className, children, ...rest } = props;
+    const isSelected = React.use(SelectedIndicatorContext$1);
+    const computedChildren = React.useMemo(() => {
+      return typeof children === "function" ? children(isSelected) : children;
+    }, [isSelected, children]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         ref,
+        "data-state": getSelectedState$1(isSelected),
         className: classVarianceAuthority.cx(
-          "flex size-max items-center",
+          "inline-block size-max",
           {
             invisible: !isSelected
           },
           className
         ),
-        "data-state": getSelectedState(isSelected),
         ...rest,
         children: computedChildren
       }
     );
   });
-  SelectedIndicator.displayName = "SelectedIndicator";
-  const CommandMenuSelectedIndicator = react.memo((props) => {
-    const { ref, children, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, { ref, ...rest, children });
-  });
   CommandMenuSelectedIndicator.displayName = "CommandMenuSelectedIndicator";
-  const CommandMenuSeparator = react.memo((props) => {
+  const CommandMenuSeparator = React.memo((props) => {
     const { className, ref, spacing = false, ...rest } = props;
-    const { size } = react.use(CommandMenuContext);
+    const { size } = React.use(CommandMenuContext);
     return /* @__PURE__ */ jsxRuntime.jsx(cmdk.CommandSeparator, { ref, className: classVarianceAuthority.cx(commandMenuSeparatorCva({ size, spacing }), className), ...rest });
   });
   CommandMenuSeparator.displayName = "CommandMenuSeparator";
-  const CommandMenuTrigger = react.memo((props) => {
+  const CommandMenuTrigger = React.memo((props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogTrigger, { ...props });
   });
   CommandMenuTrigger.displayName = "CommandMenuTrigger";
@@ -1654,7 +1822,7 @@
     Page: CommandMenuPage,
     PageTriggerItem: CommandMenuPageTriggerItem
   };
-  const LuIcon = react.memo((props) => {
+  const LuIcon = React.memo((props) => {
     const { ref, icon, className, size = "1em", ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(dynamic.DynamicIcon, { ref, className: classVarianceAuthority.cx("shrink-0", className), size, name: icon, ...rest });
   });
@@ -1810,7 +1978,7 @@
       }
     }
   });
-  const DayPicker = react.memo((props) => {
+  const DayPicker = React.memo((props) => {
     const providerContext = useProvider();
     const {
       components,
@@ -1822,7 +1990,7 @@
       showOutsideDays = true,
       ...rest
     } = props;
-    const computedClassNames = react.useMemo(() => {
+    const computedClassNames = React.useMemo(() => {
       return {
         ...classNames,
         root: classVarianceAuthority.cx(classNames == null ? void 0 : classNames.root, rootCva({ size })),
@@ -1852,7 +2020,7 @@
         range_end: classVarianceAuthority.cx(classNames == null ? void 0 : classNames.range_end, "rdp-range-end")
       };
     }, [classNames, radius, size, variant]);
-    const computedComponents = react.useMemo(() => {
+    const computedComponents = React.useMemo(() => {
       return {
         ...components,
         Chevron
@@ -1870,19 +2038,19 @@
     );
   });
   DayPicker.displayName = "DayPicker";
-  const CloseDialogContext = react.createContext({});
+  const CloseDialogContext = React.createContext({});
   const useCloseDialog = () => {
-    const dialogContext = react.useContext(CloseDialogContext);
+    const dialogContext = React.useContext(CloseDialogContext);
     if (!dialogContext) {
       throw new Error("useDialog must be used within a DialogRoot");
     }
     return dialogContext;
   };
-  const DialogContent = react.memo((props) => {
+  const DialogContent = React.memo((props) => {
     const { radius } = useProvider();
     const close = useCloseDialog();
     const { ref, children, container, className, size, ...rest } = props;
-    const computedChildren = react.useMemo(() => {
+    const computedChildren = React.useMemo(() => {
       return typeof children === "function" ? children(close) : children;
     }, [children, close]);
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1897,7 +2065,7 @@
     ) });
   });
   DialogContent.displayName = "DialogContent";
-  const DialogOverlay = react.memo((props) => {
+  const DialogOverlay = React.memo((props) => {
     const { ref, children, className, container, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
       RadixDialog__namespace.Overlay,
@@ -1911,7 +2079,7 @@
     ) });
   });
   DialogOverlay.displayName = "DialogOverlay";
-  const DialogRoot = react.memo((props) => {
+  const DialogRoot = React.memo((props) => {
     const {
       children,
       onOpen,
@@ -1921,9 +2089,9 @@
       open: externalOpen,
       onOpenChange: externalOpenChange
     } = props;
-    const [innerOpen, setInnerOpen] = react.useState(defaultOpen ?? false);
+    const [innerOpen, setInnerOpen] = React.useState(defaultOpen ?? false);
     const open = externalOpen ?? innerOpen;
-    const handleOpenChange = react.useCallback(
+    const handleOpenChange = React.useCallback(
       (next) => {
         if (externalOpenChange) return externalOpenChange(next);
         if (next && onOpen) {
@@ -1941,7 +2109,7 @@
       },
       [externalOpenChange, onOpen, onClose, onCloseInterrupt]
     );
-    const closeDialog = react.useCallback(
+    const closeDialog = React.useCallback(
       (options) => {
         if (options == null ? void 0 : options.force) {
           return setInnerOpen(false);
@@ -2000,7 +2168,7 @@
       }
     }
   });
-  const Heading = react.memo((props) => {
+  const Heading = React.memo((props) => {
     const {
       ref,
       children,
@@ -2033,7 +2201,7 @@
     );
   });
   Heading.displayName = "Heading";
-  const HoverCardArrow = react.memo((props) => {
+  const HoverCardArrow = React.memo((props) => {
     const { ref, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Arrow, { className: classVarianceAuthority.cx("fill-(--base-6)", className), ref, ...rest, children });
   });
@@ -2052,7 +2220,7 @@
       size: "md"
     }
   });
-  const HoverCardContent = react.memo((props) => {
+  const HoverCardContent = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -2092,12 +2260,12 @@
     Root: RadixHoverCard__namespace.Root,
     Trigger: RadixHoverCard__namespace.Trigger
   };
-  const HoverUtility = react.memo(({ children, forceHover }) => {
-    const [isHovered, setIsHovered] = react.useState(false);
-    const handlePointerEnter = react.useCallback(() => {
+  const HoverUtility = React.memo(function Root({ children, forceHover }) {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const handlePointerEnter = React.useCallback(() => {
       setIsHovered(true);
     }, []);
-    const handlePointerLeave = react.useCallback(() => {
+    const handlePointerLeave = React.useCallback(() => {
       setIsHovered(false);
     }, []);
     return children({
@@ -2106,8 +2274,7 @@
       onPointerLeave: handlePointerLeave
     });
   });
-  HoverUtility.displayName = "HoverUtility";
-  const InputContext = react.createContext({});
+  const InputContext = React.createContext({});
   const inputRoot$1 = classVarianceAuthority.cva(
     [
       "flex",
@@ -2182,9 +2349,9 @@
       size: "md"
     }
   });
-  const InputField = react.memo((props) => {
+  const InputField = React.memo((props) => {
     const { ref, children, className, ...rest } = props;
-    const { size, variant } = react.useContext(InputContext);
+    const { size, variant } = React.useContext(InputContext);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -2196,7 +2363,7 @@
     );
   });
   InputField.displayName = "InputField";
-  const InputRoot = react.memo((props) => {
+  const InputRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -2220,9 +2387,9 @@
     ) });
   });
   InputRoot.displayName = "InputRoot";
-  const InputSlot = react.memo((props) => {
+  const InputSlot = React.memo((props) => {
     const { ref, children, className, ...rest } = props;
-    const { size, variant } = react.useContext(InputContext);
+    const { size, variant } = React.useContext(InputContext);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(inputSlot({ size, variant }), "flex items-center", className), ref, ...rest, children });
   });
   InputSlot.displayName = "InputSlot";
@@ -2231,27 +2398,27 @@
     Root: InputRoot,
     Slot: InputSlot
   };
-  const LayoutContext = react.createContext({});
-  const useLayoutContext = () => react.useContext(LayoutContext);
-  const LayoutContainer = react.memo((props) => {
+  const LayoutContext = React.createContext({});
+  const useLayoutContext = () => React.useContext(LayoutContext);
+  const LayoutContainer = React.memo((props) => {
     const { ref, children, className, ...rest } = props;
     const { hideLayout = false } = useLayoutContext();
     return !hideLayout && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classVarianceAuthority.cx("flex h-full grow", className), ref, ...rest, children });
   });
   LayoutContainer.displayName = "LayoutContainer";
-  const LayoutRoot = react.memo((props) => {
+  const LayoutRoot = React.memo((props) => {
     const { children, small = false, hideLayout = false } = props;
-    const [openMapping, setOpenMapping] = react.useState({});
-    const isOpen = react.useCallback(
+    const [openMapping, setOpenMapping] = React.useState({});
+    const isOpen = React.useCallback(
       (id) => {
         return openMapping[id] ?? false;
       },
       [openMapping]
     );
-    const setOpen = react.useCallback((id, open) => {
+    const setOpen = React.useCallback((id, open) => {
       setOpenMapping((prev) => ({ ...prev, [id]: open }));
     }, []);
-    const contextValue = react.useMemo(
+    const contextValue = React.useMemo(
       () => ({
         small,
         hideLayout,
@@ -2265,10 +2432,10 @@
   LayoutRoot.displayName = "LayoutRoot";
   function usePointerDownOutside(onPointerDownOutside, ownerElement = globalThis == null ? void 0 : globalThis.document.body) {
     const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-    const isPointerInsideReactTreeRef = react.useRef(false);
-    const handleClickRef = react.useRef(() => {
+    const isPointerInsideReactTreeRef = React.useRef(false);
+    const handleClickRef = React.useRef(() => {
     });
-    react.useEffect(() => {
+    React.useEffect(() => {
       const handlePointerDown = (event) => {
         if (event.target && !isPointerInsideReactTreeRef.current) {
           const eventDetail = { originalEvent: event };
@@ -2315,17 +2482,17 @@
     }
   }
   function useCallbackRef(callback) {
-    const callbackRef = react.useRef(callback);
-    react.useEffect(() => {
+    const callbackRef = React.useRef(callback);
+    React.useEffect(() => {
       callbackRef.current = callback;
     });
-    return react.useMemo(() => (...args) => {
+    return React.useMemo(() => (...args) => {
       var _a;
       return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
     }, []);
   }
   const TIMEOUT_DURATION = 200;
-  const SlideOut = react.memo((props) => {
+  const SlideOut = React.memo((props) => {
     const {
       ref,
       children,
@@ -2348,25 +2515,25 @@
       ...otherProps
     } = props;
     const isLeft = side === "left";
-    const [parentContainer, setParentContainer] = react.useState(document.body);
-    const childrenContainerRef = react.useRef(null);
-    const localRef = react.useRef(null);
-    const nodeRef = react.useRef(null);
+    const [parentContainer, setParentContainer] = React.useState(document.body);
+    const childrenContainerRef = React.useRef(null);
+    const localRef = React.useRef(null);
+    const nodeRef = React.useRef(null);
     const mergedRefs = mergeRefs([ref, localRef, nodeRef]);
-    const [isResizing, setIsResizing] = react.useState(false);
-    const [computedWidth, setComputedWidth] = react.useState(null);
-    const prevClientX = react.useRef(null);
-    const handleDismiss = react.useCallback(() => {
+    const [isResizing, setIsResizing] = React.useState(false);
+    const [computedWidth, setComputedWidth] = React.useState(null);
+    const prevClientX = React.useRef(null);
+    const handleDismiss = React.useCallback(() => {
       if (modal && onDismiss) {
         onDismiss();
       }
     }, [modal, onDismiss]);
-    const handleAssignParentContainer = react.useCallback((element) => {
+    const handleAssignParentContainer = React.useCallback((element) => {
       if (element) {
         setParentContainer(element);
       }
     }, []);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (!childrenContainerRef.current) return;
       const originalParentPointerEvents = childrenContainerRef.current.style.pointerEvents;
       if (open && modal) {
@@ -2379,7 +2546,7 @@
       };
     }, [modal, open, parentContainer.style]);
     const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(handleDismiss, parentContainer);
-    const CSSTransitionClassNames = react.useMemo(
+    const CSSTransitionClassNames = React.useMemo(
       () => ({
         enter: isLeft ? "-ml-(--slide-out-width)" : "-mr-(--slide-out-width)",
         enterActive: isLeft ? "ease-linear duration-200 transition-[margin-left] ml-0" : "ease-linear duration-200 transition-[margin-right] mr-0",
@@ -2389,12 +2556,12 @@
       }),
       [isLeft]
     );
-    const handleMouseDown = react.useCallback((e) => {
+    const handleMouseDown = React.useCallback((e) => {
       const { clientX } = e;
       prevClientX.current = clientX;
       setIsResizing(true);
     }, []);
-    const handleMouseMove = react.useCallback(
+    const handleMouseMove = React.useCallback(
       (e) => {
         if (!isResizing) return;
         const { clientX } = e;
@@ -2404,12 +2571,12 @@
       },
       [isLeft, isResizing]
     );
-    const handleMouseUp = react.useCallback(() => {
+    const handleMouseUp = React.useCallback(() => {
       if (!isResizing) return;
       prevClientX.current = null;
       setIsResizing(false);
     }, [isResizing]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
       return () => {
@@ -2417,11 +2584,11 @@
         window.removeEventListener("mouseup", handleMouseUp);
       };
     }, [handleMouseMove, handleMouseUp]);
-    react.useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
       if (!open) return;
       setComputedWidth(localRef.current.offsetWidth);
     }, [open]);
-    const resizableStyle = react.useMemo(
+    const resizableStyle = React.useMemo(
       () => ({
         ...style,
         width: computedWidth ?? initialWidth,
@@ -2432,11 +2599,11 @@
       }),
       [computedWidth, initialWidth, maxWidth, minWidth, position, style]
     );
-    const resizableEnable = react.useMemo(
+    const resizableEnable = React.useMemo(
       () => ({ left: resizeable && !isLeft, right: resizeable && isLeft }),
       [isLeft, resizeable]
     );
-    const SlideOut2 = react.useMemo(
+    const SlideOut2 = React.useMemo(
       () => (
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -2531,7 +2698,7 @@
   });
   SlideOut.displayName = "SlideOut";
   const DEFAULT_INITIAL_WIDTH = "30%";
-  const LayoutSlideOut = react.memo((props) => {
+  const LayoutSlideOut = React.memo((props) => {
     const { small, hideLayout, isOpen, setOpen } = useLayoutContext();
     const {
       ref,
@@ -2545,14 +2712,14 @@
       ...rest
     } = props;
     const open = isOpen(id);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (small && (defaultOpen == null ? void 0 : defaultOpen.small) !== void 0) {
         setOpen(id, defaultOpen == null ? void 0 : defaultOpen.small);
       } else if (!small && (defaultOpen == null ? void 0 : defaultOpen.large) !== void 0) {
         setOpen(id, defaultOpen == null ? void 0 : defaultOpen.large);
       }
     }, [defaultOpen, id, setOpen, small]);
-    const handleDismiss = react.useCallback(() => {
+    const handleDismiss = React.useCallback(() => {
       setOpen(id, false);
       onDismiss == null ? void 0 : onDismiss();
     }, [id, onDismiss, setOpen]);
@@ -2573,10 +2740,10 @@
     );
   });
   LayoutSlideOut.displayName = "LayoutSlideOut";
-  const LayoutSlideOutOverlay = react.memo((props) => {
+  const LayoutSlideOutOverlay = React.memo((props) => {
     const { ref, children, className, active, slideOutId, smallModeOnly = false, ...rest } = props;
     const { small, hideLayout, isOpen } = useLayoutContext();
-    const showOverlay = react.useMemo(() => {
+    const showOverlay = React.useMemo(() => {
       if (active !== void 0) return active;
       if (hideLayout) return false;
       if (smallModeOnly && !small) return false;
@@ -2585,6 +2752,40 @@
     return showOverlay && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classVarianceAuthority.cx("overmap-layout-overlay", "fixed inset-0", className), ref, ...rest, children });
   });
   LayoutSlideOutOverlay.displayName = "SlideOutOverlay";
+  const MENU_OVERFLOW_PADDING = 20;
+  const MENU_CONTENT_PADDING = 8;
+  const MENU_MINIMUM_MAX_HEIGHT = 250;
+  const computeOffsets = (side, alignment) => {
+    switch (side) {
+      case "right":
+        if (alignment === "start") {
+          return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -MENU_CONTENT_PADDING };
+        } else if (alignment === "end") {
+          return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
+        }
+        break;
+      case "left":
+        if (alignment === "start") {
+          return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -MENU_CONTENT_PADDING };
+        } else if (alignment === "end") {
+          return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
+        }
+        break;
+    }
+    return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: 0 };
+  };
+  function getSelectedState(selected) {
+    return selected ? "selected" : "unselected";
+  }
+  function getCheckedState(checked) {
+    return checked === true ? "checked" : checked === false ? "unchecked" : "indeterminate";
+  }
+  function getBooleanState(value) {
+    return value ? "true" : "false";
+  }
+  function getOpenState(open) {
+    return open ? "open" : "closed";
+  }
   function nextStateBasedOnType(open, type) {
     switch (type) {
       case "toggle":
@@ -2595,11 +2796,11 @@
         return false;
     }
   }
-  const LayoutSlideOutTrigger = react.memo((props) => {
+  const LayoutSlideOutTrigger = React.memo((props) => {
     const { ref, slideOutId, type = "toggle", children, ...rest } = props;
     const { isOpen, setOpen } = useLayoutContext();
     const open = isOpen(slideOutId);
-    const handleClick = react.useCallback(() => {
+    const handleClick = React.useCallback(() => {
       setOpen(slideOutId, nextStateBasedOnType(open, type));
     }, [open, setOpen, slideOutId, type]);
     return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { "data-state": getOpenState(open), ref, onClick: handleClick, ...rest, children });
@@ -2648,7 +2849,7 @@
       align: "left"
     }
   });
-  const Link = react.memo((props) => {
+  const Link = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -2680,6 +2881,28 @@
     );
   });
   Link.displayName = "Link";
+  const CheckedIndicatorContext = React.createContext({});
+  const CheckedIndicator = (props) => {
+    const { children, ref, className, ...rest } = props;
+    const checked = React.useContext(CheckedIndicatorContext);
+    const computedChildren = typeof children === "function" ? children(checked === "indeterminate") : children;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: classVarianceAuthority.cx(
+          "flex size-max items-center",
+          {
+            invisible: checked === false
+          },
+          className
+        ),
+        "data-state": getCheckedState$1(checked),
+        ...rest,
+        children: computedChildren
+      }
+    );
+  };
   const menuItem = classVarianceAuthority.cva(
     [
       "select-none",
@@ -2825,31 +3048,322 @@
       }
     }
   );
-  const MenuContentContext = react.createContext({});
-  const MenuContext = react.createContext({});
-  const SubContext = react.createContext({});
-  const TRIGGER_SELECT_KEYS = ["Enter", " "];
-  const MenuItem = react.memo((props) => {
-    const rootMenuContext = react.use(MenuContext);
-    const { getItemProps, activeIndex, setOpen, size, variant, radius } = react.use(MenuContentContext);
-    const { closeRoot } = react.use(SubContext);
+  const MenuContext = React.createContext({});
+  const useMenuContext = () => React.useContext(MenuContext);
+  const DEFAULT_OFFSET = 5;
+  const MenuRoot = React.memo((props) => {
+    const {
+      children,
+      side = "bottom",
+      align = "center",
+      offset,
+      loop = false,
+      modal = false,
+      // open state related props
+      open: controlledOpen,
+      onOpenChange,
+      defaultOpen
+    } = props;
+    const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    const [triggerType, setTriggerType] = React.useState(null);
+    const elementsRef = React.useRef([]);
+    const nodeId = react.useFloatingNodeId();
+    const { refs, floatingStyles, context, middlewareData } = react.useFloating({
+      nodeId,
+      strategy: "fixed",
+      placement: side + (align !== "center" ? "-" + align : ""),
+      whileElementsMounted: react.autoUpdate,
+      open,
+      onOpenChange: setOpen,
+      middleware: [
+        react.offset({ mainAxis: offset ?? DEFAULT_OFFSET }),
+        react.size({
+          apply({ availableHeight, elements }) {
+            elements.floating.style.setProperty(
+              "--overmap-menu-available-height",
+              `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
+            );
+          },
+          padding: MENU_OVERFLOW_PADDING
+        }),
+        react.flip({ fallbackStrategy: "initialPlacement" }),
+        react.shift({ padding: MENU_OVERFLOW_PADDING }),
+        react.hide()
+      ]
+    });
+    const role = react.useRole(context, {
+      role: "menu"
+    });
+    const dismiss = react.useDismiss(context, {
+      capture: true,
+      ancestorScroll: triggerType === "context" || triggerType === "virtual"
+    });
+    const click = react.useClick(context, {
+      enabled: triggerType === "click"
+    });
+    const listNavigation = react.useListNavigation(context, {
+      listRef: elementsRef,
+      activeIndex,
+      onNavigate: setActiveIndex,
+      loop
+    });
+    const { getFloatingProps, getItemProps, getReferenceProps } = react.useInteractions([
+      dismiss,
+      listNavigation,
+      click,
+      role
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingTree, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      MenuContext.Provider,
+      {
+        value: {
+          open,
+          setOpen,
+          refs,
+          context,
+          floatingStyles,
+          elementsRef,
+          getFloatingProps,
+          getItemProps,
+          getReferenceProps,
+          nodeId,
+          activeIndex,
+          setActiveIndex,
+          middlewareData,
+          side,
+          modal,
+          setTriggerType
+        },
+        children
+      }
+    ) });
+  });
+  MenuRoot.displayName = "Root";
+  const MenuContentContext = React.createContext({});
+  const useMenuContentContext = () => React.useContext(MenuContentContext);
+  const MenuContent = React.memo((props) => {
+    var _a;
+    const providerContext = useProvider();
     const {
       ref: forwardedRef,
       className,
       children,
-      onSelect,
-      onClick,
-      onKeyDown,
-      closeOnSelect = true,
-      disabled = false,
+      size = "md",
+      variant = "soft",
+      radius = providerContext.radius,
+      accentColor = "base",
       ...rest
     } = props;
-    const { ref, index } = react$1.useListItem();
-    const mergeRefs2 = react$1.useMergeRefs([ref, forwardedRef]);
-    const handleClick = react.useCallback(
+    const {
+      refs,
+      getFloatingProps,
+      middlewareData,
+      elementsRef,
+      activeIndex,
+      setActiveIndex,
+      getItemProps,
+      open,
+      setOpen,
+      nodeId,
+      context,
+      floatingStyles,
+      modal,
+      side
+    } = useMenuContext();
+    const computedFloatingStyles = React.useMemo(() => {
+      var _a2;
+      return {
+        ...floatingStyles,
+        visibility: ((_a2 = middlewareData.hide) == null ? void 0 : _a2.referenceHidden) ? "hidden" : "visible"
+      };
+    }, [floatingStyles, (_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden]);
+    const handleOverlayPointerDown = React.useCallback(
       (e) => {
-        e.stopPropagation();
-        if (disabled) return;
+        if (modal) stopPropagation(e);
+      },
+      [modal]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.FloatingOverlay,
+      {
+        className: menuOverlay({ modal }),
+        onClick: handleOverlayPointerDown,
+        lockScroll: true,
+        "data-floating-content": "",
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context, children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+          MenuContentContext.Provider,
+          {
+            value: {
+              getItemProps,
+              activeIndex,
+              elementsRef,
+              open,
+              setOpen,
+              refs,
+              setActiveIndex,
+              size,
+              variant,
+              accentColor,
+              radius
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "border-box w-max outline-none",
+                ref: refs.setFloating,
+                tabIndex: -1,
+                style: computedFloatingStyles,
+                "data-floating-content": "",
+                ...getFloatingProps(),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "ul",
+                  {
+                    className: classVarianceAuthority.cx(
+                      menuContent({ size }),
+                      floating({ side, shadow: "3" }),
+                      radiusCva({ radius, maxLarge: true }),
+                      "max-h-(--overmap-menu-available-height)",
+                      className
+                    ),
+                    ref: forwardedRef,
+                    "data-state": getOpenState(open),
+                    "data-side": side,
+                    "data-accent-color": accentColor,
+                    ...rest,
+                    children
+                  }
+                )
+              }
+            )
+          }
+        ) }) })
+      }
+    ) }) });
+  });
+  MenuContent.displayName = "Menu.Content";
+  const SubContext = React.createContext({});
+  const useSubContext = () => React.useContext(SubContext);
+  const MenuSub = React.memo((props) => {
+    const {
+      children,
+      disabled = false,
+      side = "right",
+      align = "start",
+      closeRoot = false,
+      loop = false,
+      modal = false,
+      // open state related props
+      open: controlledOpen,
+      onOpenChange,
+      defaultOpen
+    } = props;
+    const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
+    const nodeId = react.useFloatingNodeId();
+    const { refs, floatingStyles, context } = react.useFloating({
+      nodeId,
+      strategy: "fixed",
+      whileElementsMounted: react.autoUpdate,
+      open,
+      onOpenChange: (open2, _event, reason) => {
+        if (reason) setOpen(open2);
+      },
+      placement: side + (align !== "center" ? "-" + align : ""),
+      middleware: [
+        react.offset({ ...computeOffsets(side, align) }),
+        react.size({
+          padding: MENU_OVERFLOW_PADDING,
+          apply({ availableHeight, elements }) {
+            elements.floating.style.setProperty(
+              "--overmap-menu-available-height",
+              `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
+            );
+          }
+        }),
+        react.flip(),
+        react.shift({ padding: MENU_OVERFLOW_PADDING }),
+        react.hide()
+      ]
+    });
+    const dismiss = react.useDismiss(context, {
+      bubbles: closeRoot,
+      outsidePress: closeRoot
+    });
+    const hover = react.useHover(context, {
+      restMs: 50,
+      handleClose: react.safePolygon({
+        blockPointerEvents: true,
+        requireIntent: false
+      }),
+      enabled: !disabled
+    });
+    const click = react.useClick(context, {
+      enabled: !disabled
+    });
+    const elementsRef = React.useRef([]);
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    const listNavigation = react.useListNavigation(context, {
+      listRef: elementsRef,
+      nested: true,
+      activeIndex,
+      onNavigate: setActiveIndex,
+      loop,
+      rtl: side === "left"
+    });
+    const { getFloatingProps, getItemProps, getReferenceProps } = react.useInteractions([
+      listNavigation,
+      dismiss,
+      hover,
+      click
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SubContext.Provider,
+      {
+        value: {
+          open,
+          setOpen,
+          nodeId,
+          refs,
+          floatingStyles,
+          context,
+          elementsRef,
+          activeIndex,
+          setActiveIndex,
+          getFloatingProps,
+          getItemProps,
+          getReferenceProps,
+          disabled,
+          side,
+          closeRoot,
+          modal
+        },
+        children
+      }
+    );
+  });
+  MenuSub.displayName = "SubMenu";
+  const TRIGGER_SELECT_KEYS = ["Enter", " "];
+  const MenuItem = React.memo((props) => {
+    const rootMenuContext = useMenuContext();
+    const { getItemProps, activeIndex, setOpen, size, variant, radius } = useMenuContentContext();
+    const { closeRoot } = useSubContext();
+    const {
+      ref: forwardedRef,
+      className,
+      children,
+      onSelect,
+      onClick,
+      onKeyDown,
+      closeOnSelect = true,
+      disabled = false,
+      ...rest
+    } = props;
+    const { ref, index } = react.useListItem();
+    const mergeRefs2 = react.useMergeRefs([ref, forwardedRef]);
+    const handleClick = React.useCallback(
+      (e) => {
+        e.stopPropagation();
+        if (disabled) return;
         onClick == null ? void 0 : onClick(e);
         onSelect == null ? void 0 : onSelect();
         if (closeOnSelect) setOpen(false);
@@ -2857,7 +3371,7 @@
       },
       [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
     );
-    const handleKeyDown = react.useCallback(
+    const handleKeyDown = React.useCallback(
       (e) => {
         if (disabled) return;
         onKeyDown == null ? void 0 : onKeyDown(e);
@@ -2868,8 +3382,8 @@
       },
       [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
     );
-    const isActive = react.useMemo(() => index === activeIndex, [activeIndex, index]);
-    const computedChildren = react.useMemo(() => {
+    const isActive = React.useMemo(() => index === activeIndex, [activeIndex, index]);
+    const computedChildren = React.useMemo(() => {
       return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
     }, [children, isActive]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2892,9 +3406,9 @@
     );
   });
   MenuItem.displayName = "MenuItem";
-  const MenuCheckboxItem = react.memo((props) => {
+  const MenuCheckboxItem = React.memo((props) => {
     const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
-    const handleSelect = react.useCallback(() => {
+    const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       switch (checked) {
         case true:
@@ -2909,16 +3423,16 @@
     return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { ref, onSelect: handleSelect, ...rest }) });
   });
   MenuCheckboxItem.displayName = "MenuCheckboxItem";
-  const MenuCheckboxItemIndicator = react.memo((props) => {
+  const MenuCheckboxItemIndicator = React.memo((props) => {
     const { ref, children, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicator, { ref, ...rest, children });
   });
   MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
-  const MenuClickTrigger = react.memo((props) => {
+  const MenuClickTrigger = React.memo((props) => {
     const { ref: forwardedRef, children, disabled = false } = props;
-    const { getReferenceProps, refs, setTriggerType, open } = react.use(MenuContext);
-    const mergedRefs = react$1.useMergeRefs([refs.setReference, forwardedRef]);
-    react.useEffect(() => {
+    const { getReferenceProps, refs, setTriggerType, open } = useMenuContext();
+    const mergedRefs = react.useMergeRefs([refs.setReference, forwardedRef]);
+    React.useEffect(() => {
       setTriggerType("click");
     }, [setTriggerType]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2934,115 +3448,15 @@
     );
   });
   MenuClickTrigger.displayName = "MenuClickTrigger";
-  const MenuContent = react.memo((props) => {
-    var _a;
-    const providerContext = useProvider();
-    const {
-      ref: forwardedRef,
-      className,
-      children,
-      size = "md",
-      variant = "soft",
-      radius = providerContext.radius,
-      accentColor = "base",
-      ...rest
-    } = props;
-    const {
-      refs,
-      getFloatingProps,
-      middlewareData,
-      elementsRef,
-      activeIndex,
-      setActiveIndex,
-      getItemProps,
-      open,
-      setOpen,
-      nodeId,
-      context,
-      floatingStyles,
-      modal,
-      side
-    } = react.use(MenuContext);
-    const computedFloatingStyles = react.useMemo(() => {
-      var _a2;
-      return {
-        ...floatingStyles,
-        visibility: ((_a2 = middlewareData.hide) == null ? void 0 : _a2.referenceHidden) ? "hidden" : "visible"
-      };
-    }, [floatingStyles, (_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden]);
-    const handleOverlayPointerDown = react.useCallback(
-      (e) => {
-        if (modal) stopPropagation(e);
-      },
-      [modal]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.FloatingOverlay,
-      {
-        className: menuOverlay({ modal }),
-        onClick: handleOverlayPointerDown,
-        lockScroll: true,
-        "data-floating-content": "",
-        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingList, { elementsRef, children: /* @__PURE__ */ jsxRuntime.jsx(
-          MenuContentContext.Provider,
-          {
-            value: {
-              getItemProps,
-              activeIndex,
-              elementsRef,
-              open,
-              setOpen,
-              refs,
-              setActiveIndex,
-              size,
-              variant,
-              accentColor,
-              radius
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "border-box w-max outline-none",
-                ref: refs.setFloating,
-                tabIndex: -1,
-                style: computedFloatingStyles,
-                "data-floating-content": "",
-                ...getFloatingProps(),
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "ul",
-                  {
-                    className: classVarianceAuthority.cx(
-                      menuContent({ size }),
-                      floating({ side, shadow: "3" }),
-                      radiusCva({ radius, maxLarge: true }),
-                      "max-h-(--overmap-menu-available-height)",
-                      className
-                    ),
-                    ref: forwardedRef,
-                    "data-state": getOpenState(open),
-                    "data-side": side,
-                    "data-accent-color": accentColor,
-                    ...rest,
-                    children
-                  }
-                )
-              }
-            )
-          }
-        ) }) })
-      }
-    ) }) });
-  });
-  MenuContent.displayName = "Menu.Content";
-  const MenuContextTrigger = react.memo((props) => {
+  const MenuContextTrigger = React.memo((props) => {
     const { ref: forwardedRef, children, disabled = false } = props;
-    const ref = react.useRef(null);
-    const { setOpen, refs, setTriggerType, open } = react.use(MenuContext);
-    const mergedRefs = react$1.useMergeRefs([forwardedRef, ref]);
-    react.useEffect(() => {
+    const ref = React.useRef(null);
+    const { setOpen, refs, setTriggerType, open } = useMenuContext();
+    const mergedRefs = react.useMergeRefs([forwardedRef, ref]);
+    React.useEffect(() => {
       setTriggerType("context");
     }, [setTriggerType]);
-    const handleContextMenu = react.useCallback(
+    const handleContextMenu = React.useCallback(
       (e) => {
         const { clientY, clientX } = e;
         if (!disabled && ref.current) {
@@ -3081,24 +3495,24 @@
     );
   });
   MenuContextTrigger.displayName = "MenuContextTrigger";
-  const MenuGroup = react.memo((props) => {
+  const MenuGroup = React.memo((props) => {
     const { ref, children, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "group", ...rest, children });
   });
   MenuGroup.displayName = "MenuGroup";
-  const MenuInputField = react.memo((props) => {
+  const MenuInputField = React.memo((props) => {
     const { ref: forwardedRef, className, onValueChange, onChange, disabled = false, ...rest } = props;
-    const { activeIndex, getItemProps } = react.use(MenuContentContext);
-    const { index, ref } = react$1.useListItem();
-    const mergedRefs = react$1.useMergeRefs([ref, forwardedRef]);
-    const handleChange = react.useCallback(
+    const { activeIndex, getItemProps } = useMenuContentContext();
+    const { index, ref } = react.useListItem();
+    const mergedRefs = react.useMergeRefs([ref, forwardedRef]);
+    const handleChange = React.useCallback(
       (e) => {
         onChange == null ? void 0 : onChange(e);
         onValueChange == null ? void 0 : onValueChange(e.target.value);
       },
       [onChange, onValueChange]
     );
-    react.useEffect(() => {
+    React.useEffect(() => {
       return () => {
         onValueChange == null ? void 0 : onValueChange("");
       };
@@ -3119,20 +3533,20 @@
     );
   });
   MenuInputField.displayName = "MenuInputField";
-  const MenuInputRoot = react.memo((props) => {
+  const MenuInputRoot = React.memo((props) => {
     const { ref, className, ...rest } = props;
-    const { size } = react.use(MenuContentContext);
+    const { size } = useMenuContentContext();
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(inputRoot({ size }), className), ref, ...rest });
   });
   MenuInputRoot.displayName = "MenuInputRoot";
-  const MenuInputSlot = react.memo((props) => {
+  const MenuInputSlot = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classVarianceAuthority.cx("flex", "items-center", "text-(--base-a11)", className), ref, ...rest });
   });
   MenuInputSlot.displayName = "MenuInputSlot";
-  const MenuLabel = react.memo((props) => {
+  const MenuLabel = React.memo((props) => {
     const { ref, className, ...rest } = props;
-    const { size } = react.use(MenuContentContext);
+    const { size } = useMenuContentContext();
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classVarianceAuthority.cx(menuLabelCva({ size }), className), ...rest });
   });
   MenuLabel.displayName = "MenuLabel";
@@ -3140,18 +3554,41 @@
     const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(MenuGroup, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
   });
+  const SelectedIndicatorContext = React.createContext(false);
+  const useSelectedIndicatorContext = () => React.useContext(SelectedIndicatorContext);
+  const MenuSelectedIndicator = React.memo((props) => {
+    const { ref, children, className, ...rest } = props;
+    const isSelected = useSelectedIndicatorContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: classVarianceAuthority.cx(
+          "flex size-max items-center",
+          {
+            invisible: !isSelected
+          },
+          className
+        ),
+        "data-state": getSelectedState(isSelected),
+        ...rest,
+        children
+      }
+    );
+  });
+  MenuSelectedIndicator.displayName = "SelectedIndicator";
   const MenuMultiSelectItem = genericMemo(function(props) {
     const { ref, onSelect, children, closeOnSelect = false, value, ...rest } = props;
-    const { selected, selectValue, registerValue } = react.use(MultiSelectContext);
-    react.useLayoutEffect(() => {
+    const { selected, selectValue, registerValue } = React.use(MultiSelectContext);
+    React.useLayoutEffect(() => {
       return registerValue(value);
     }, [registerValue, value]);
     const isSelected = selected(value);
-    const handleSelect = react.useCallback(() => {
+    const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       selectValue(value);
     }, [onSelect, selectValue, value]);
-    const computedChildren = react.useMemo(() => {
+    const computedChildren = React.useMemo(() => {
       return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
     }, [children, isSelected]);
     return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3167,25 +3604,26 @@
       }
     ) });
   });
-  const PagesContext = react.createContext({});
-  const MenuPageContent = react.memo((props) => {
-    const { page, children } = props;
-    const { activePage } = react.use(PagesContext);
-    return activePage === page ? children : null;
-  });
-  MenuPageContent.displayName = "PageContent";
-  const MenuPages = react.memo((props) => {
+  const PagesContext = React.createContext({});
+  const usePagesContext = () => React.useContext(PagesContext);
+  const MenuPages = React.memo((props) => {
     const { children, defaultPage, page, onPageChange } = props;
     const [activePage, setActivePage] = useControlledState(defaultPage ?? "", page, onPageChange);
-    const contextValue = react.useMemo(() => ({ activePage, setActivePage }), [activePage, setActivePage]);
+    const contextValue = React.useMemo(() => ({ activePage, setActivePage }), [activePage, setActivePage]);
     return /* @__PURE__ */ jsxRuntime.jsx(PagesContext.Provider, { value: contextValue, children });
   });
   MenuPages.displayName = "MenuPages";
-  const MenuPageTrigger = react.memo((props) => {
+  const MenuPageContent = (props) => {
+    const { page, children } = props;
+    const { activePage } = usePagesContext();
+    return activePage === page ? children : null;
+  };
+  MenuPageContent.displayName = "PageContent";
+  const MenuPageTrigger = React.memo((props) => {
     const { ref, onSelect, page, ...rest } = props;
-    const { refs, setActiveIndex } = react.use(MenuContentContext);
-    const { setActivePage } = react.use(PagesContext);
-    const handleSelect = react.useCallback(() => {
+    const { refs, setActiveIndex } = useMenuContentContext();
+    const { setActivePage } = usePagesContext();
+    const handleSelect = React.useCallback(() => {
       var _a;
       onSelect == null ? void 0 : onSelect();
       setActivePage(page);
@@ -3195,101 +3633,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { ref, onSelect: handleSelect, closeOnSelect: false, ...rest });
   });
   MenuPageTrigger.displayName = "MenuPageTrigger";
-  const MENU_OVERFLOW_PADDING = 20;
-  const MENU_CONTENT_PADDING = 8;
-  const MENU_MINIMUM_MAX_HEIGHT = 250;
-  const DEFAULT_OFFSET = 5;
-  const MenuRoot = react.memo((props) => {
-    const {
-      children,
-      side = "bottom",
-      align = "center",
-      offset,
-      loop = false,
-      modal = false,
-      // open state related props
-      open: controlledOpen,
-      onOpenChange,
-      defaultOpen
-    } = props;
-    const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-    const [activeIndex, setActiveIndex] = react.useState(null);
-    const [triggerType, setTriggerType] = react.useState(null);
-    const elementsRef = react.useRef([]);
-    const nodeId = react$1.useFloatingNodeId();
-    const { refs, floatingStyles, context, middlewareData } = react$1.useFloating({
-      nodeId,
-      strategy: "fixed",
-      // TODO: probably some way with template string types to not need the "as Placement"
-      placement: side + (align !== "center" ? "-" + align : ""),
-      whileElementsMounted: react$1.autoUpdate,
-      open,
-      onOpenChange: setOpen,
-      middleware: [
-        react$1.offset({ mainAxis: offset ?? DEFAULT_OFFSET }),
-        react$1.size({
-          apply({ availableHeight, elements }) {
-            elements.floating.style.setProperty(
-              "--overmap-menu-available-height",
-              `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
-            );
-          },
-          padding: MENU_OVERFLOW_PADDING
-        }),
-        react$1.flip({ fallbackStrategy: "initialPlacement" }),
-        react$1.shift({ padding: MENU_OVERFLOW_PADDING }),
-        react$1.hide()
-      ]
-    });
-    const role = react$1.useRole(context, {
-      role: "menu"
-    });
-    const dismiss = react$1.useDismiss(context, {
-      capture: true,
-      ancestorScroll: triggerType === "context" || triggerType === "virtual"
-    });
-    const click = react$1.useClick(context, {
-      enabled: triggerType === "click"
-    });
-    const listNavigation = react$1.useListNavigation(context, {
-      listRef: elementsRef,
-      activeIndex,
-      onNavigate: setActiveIndex,
-      loop
-    });
-    const { getFloatingProps, getItemProps, getReferenceProps } = react$1.useInteractions([
-      dismiss,
-      listNavigation,
-      click,
-      role
-    ]);
-    return /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingTree, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      MenuContext.Provider,
-      {
-        value: {
-          open,
-          setOpen,
-          refs,
-          context,
-          floatingStyles,
-          elementsRef,
-          getFloatingProps,
-          getItemProps,
-          getReferenceProps,
-          nodeId,
-          activeIndex,
-          setActiveIndex,
-          middlewareData,
-          side,
-          modal,
-          setTriggerType
-        },
-        children
-      }
-    ) });
-  });
-  MenuRoot.displayName = "Root";
-  const MenuScroll = react.memo((props) => {
+  const MenuScroll = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -3306,13 +3650,13 @@
   MenuScroll.displayName = "MenuScroll";
   const MenuSelectAllItem = genericMemo((props) => {
     const { ref, children, onSelect, closeOnSelect = false, ...rest } = props;
-    const { allSelected, someSelected, toggleSelectAll } = react.use(MultiSelectContext);
+    const { allSelected, someSelected, toggleSelectAll } = React.use(MultiSelectContext);
     const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
-    const handleSelect = react.useCallback(() => {
+    const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       toggleSelectAll();
     }, [onSelect, toggleSelectAll]);
-    const computedChildren = react.useMemo(() => {
+    const computedChildren = React.useMemo(() => {
       return typeof children === "function" ? ({ active }) => children({ selected: selectedState, active }) : children;
     }, [children, selectedState]);
     return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3327,11 +3671,6 @@
       }
     ) });
   });
-  const MenuSelectedIndicator = react.memo((props) => {
-    const { ref, children, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, { ref, ...rest, children });
-  });
-  MenuSelectedIndicator.displayName = "MenuSelectedIndicator";
   const MenuSelectGroup = genericMemo(function MenuSelectGroup2(props) {
     const { ref, children, required, defaultValue, value, onValueChange, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(MenuGroup, { ref, ...rest, children: required ? /* @__PURE__ */ jsxRuntime.jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -3346,13 +3685,13 @@
   });
   const MenuSelectItem = genericMemo(function(props) {
     const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
-    const { selected, selectValue } = react.use(SelectContext);
-    const isSelected = selected(value);
-    const handleSelect = react.useCallback(() => {
+    const { selected, selectValue } = React.use(SelectContext);
+    const isSelected = React.useMemo(() => selected(value), [selected, value]);
+    const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       selectValue(value);
     }, [onSelect, selectValue, value]);
-    const computedChildren = react.useMemo(() => {
+    const computedChildren = React.useMemo(() => {
       return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
     }, [children, isSelected]);
     return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3366,136 +3705,19 @@
         ...rest,
         children: computedChildren
       }
-    ) });
-  });
-  const MenuSeparator = react.memo((props) => {
-    const { ref, className, ...rest } = props;
-    const { size } = react.use(MenuContentContext);
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixSeparator__namespace.Root, { className: classVarianceAuthority.cx(menuSeparator({ size }), className), ref, ...rest });
-  });
-  MenuSeparator.displayName = "MenuSeparator";
-  const computeOffsets = (side, alignment) => {
-    switch (side) {
-      case "right":
-        if (alignment === "start") {
-          return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -MENU_CONTENT_PADDING };
-        } else if (alignment === "end") {
-          return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
-        }
-        break;
-      case "left":
-        if (alignment === "start") {
-          return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -MENU_CONTENT_PADDING };
-        } else if (alignment === "end") {
-          return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
-        }
-        break;
-    }
-    return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: 0 };
-  };
-  const MenuSub = react.memo((props) => {
-    const {
-      children,
-      disabled = false,
-      side = "right",
-      align = "start",
-      closeRoot = false,
-      loop = false,
-      modal = false,
-      // open state related props
-      open: controlledOpen,
-      onOpenChange,
-      defaultOpen
-    } = props;
-    const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-    const nodeId = react$1.useFloatingNodeId();
-    const { refs, floatingStyles, context } = react$1.useFloating({
-      nodeId,
-      strategy: "fixed",
-      whileElementsMounted: react$1.autoUpdate,
-      open,
-      onOpenChange: (open2, _event, reason) => {
-        if (reason) setOpen(open2);
-      },
-      placement: side + (align !== "center" ? "-" + align : ""),
-      middleware: [
-        react$1.offset({ ...computeOffsets(side, align) }),
-        react$1.size({
-          padding: MENU_OVERFLOW_PADDING,
-          apply({ availableHeight, elements }) {
-            elements.floating.style.setProperty(
-              "--overmap-menu-available-height",
-              `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
-            );
-          }
-        }),
-        react$1.flip(),
-        react$1.shift({ padding: MENU_OVERFLOW_PADDING }),
-        react$1.hide()
-      ]
-    });
-    const dismiss = react$1.useDismiss(context, {
-      bubbles: closeRoot,
-      outsidePress: closeRoot
-    });
-    const hover = react$1.useHover(context, {
-      restMs: 50,
-      handleClose: react$1.safePolygon({
-        blockPointerEvents: true,
-        requireIntent: false
-      }),
-      enabled: !disabled
-    });
-    const click = react$1.useClick(context, {
-      enabled: !disabled
-    });
-    const elementsRef = react.useRef([]);
-    const [activeIndex, setActiveIndex] = react.useState(null);
-    const listNavigation = react$1.useListNavigation(context, {
-      listRef: elementsRef,
-      nested: true,
-      activeIndex,
-      onNavigate: setActiveIndex,
-      loop,
-      rtl: side === "left"
-    });
-    const { getFloatingProps, getItemProps, getReferenceProps } = react$1.useInteractions([
-      listNavigation,
-      dismiss,
-      hover,
-      click
-    ]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SubContext.Provider,
-      {
-        value: {
-          open,
-          setOpen,
-          nodeId,
-          refs,
-          floatingStyles,
-          context,
-          elementsRef,
-          activeIndex,
-          setActiveIndex,
-          getFloatingProps,
-          getItemProps,
-          getReferenceProps,
-          disabled,
-          side,
-          closeRoot,
-          modal
-        },
-        children
-      }
-    );
+    ) });
   });
-  MenuSub.displayName = "SubMenu";
-  const MenuSubContent = react.memo((props) => {
+  const MenuSeparator = React.memo((props) => {
+    const { ref, className, ...rest } = props;
+    const { size } = useMenuContentContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixSeparator__namespace.Root, { className: classVarianceAuthority.cx(menuSeparator({ size }), className), ref, ...rest });
+  });
+  MenuSeparator.displayName = "MenuSeparator";
+  const MenuSubContent = React.memo((props) => {
     var _a;
     const { ref: forwardedRef, children, ...rest } = props;
-    const { middlewareData } = react.use(MenuContext);
-    const { accentColor, radius, variant, size } = react.use(MenuContentContext);
+    const { middlewareData } = useMenuContext();
+    const { accentColor, radius, variant, size } = useMenuContentContext();
     const {
       open,
       nodeId,
@@ -3509,17 +3731,17 @@
       floatingStyles,
       setOpen,
       side
-    } = react.use(SubContext);
-    const wrapperRef = react.useRef(null);
-    const mergeRefs2 = react$1.useMergeRefs([refs.setFloating, wrapperRef]);
-    const computedFloatingStyles = react.useMemo(() => {
+    } = useSubContext();
+    const wrapperRef = React.useRef(null);
+    const mergeRefs2 = react.useMergeRefs([refs.setFloating, wrapperRef]);
+    const computedFloatingStyles = React.useMemo(() => {
       var _a2;
       return {
         ...floatingStyles,
         visibility: ((_a2 = middlewareData.hide) == null ? void 0 : _a2.referenceHidden) ? "hidden" : "visible"
       };
     }, [floatingStyles, (_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden]);
-    return /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context, initialFocus: wrapperRef, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingList, { elementsRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context, initialFocus: wrapperRef, children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, children: /* @__PURE__ */ jsxRuntime.jsx(
       MenuContentContext.Provider,
       {
         value: {
@@ -3566,10 +3788,10 @@
     ) }) }) }) });
   });
   MenuSubContent.displayName = "MenuSubContent";
-  const MenuSubTrigger = react.memo((props) => {
+  const MenuSubTrigger = React.memo((props) => {
     const { ref: forwardedRef, children, ...rest } = props;
-    const { refs, getReferenceProps, open, disabled } = react.use(SubContext);
-    const mergedRefs = react$1.useMergeRefs([forwardedRef, refs.setReference]);
+    const { refs, getReferenceProps, open, disabled } = useSubContext();
+    const mergedRefs = react.useMergeRefs([forwardedRef, refs.setReference]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       MenuItem,
       {
@@ -3584,13 +3806,13 @@
     );
   });
   MenuSubTrigger.displayName = "MenuSubTrigger";
-  const MenuVirtualTrigger = react.memo((props) => {
+  const MenuVirtualTrigger = React.memo((props) => {
     const { virtualElement, disabled } = props;
-    const { refs, setTriggerType, setOpen } = react.use(MenuContext);
-    react.useEffect(() => {
+    const { refs, setTriggerType, setOpen } = useMenuContext();
+    React.useEffect(() => {
       setTriggerType("virtual");
     }, [setTriggerType]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (!disabled && virtualElement) {
         refs.setPositionReference(virtualElement);
         setOpen(true);
@@ -3639,562 +3861,11 @@
     Separator: MenuSeparator,
     Scroll: MenuScroll
   };
-  const KEY_MAPPING = {
-    next: "ArrowDown",
-    prev: "ArrowUp",
-    first: "PageUp",
-    last: "PageDown",
-    selectItem: "Enter"
-  };
-  const ITEM_SELECTOR = "menu-item";
-  const GROUP_SELECTOR = "menu-group";
-  const MenuRootContext = react.createContext({});
-  const MenuGroupContext = react.createContext({});
-  const MenuPageContext = react.createContext({});
-  const menuRootCva = classVarianceAuthority.cva(["w-full", "outline-none"], {
-    variants: {
-      size: {
-        xs: ["p-0.5", "text-xs", "min-w-30"],
-        sm: ["p-0.75", "text-sm", "min-w-35"],
-        md: ["p-1", "text-md", "min-w-40"],
-        lg: ["p-1.25", "text-lg", "min-w-45"],
-        xl: ["p-1.5", "text-xl", "min-w-50"]
-      },
-      radius: {
-        none: ["rounded-none"],
-        xs: ["rounded-xs"],
-        sm: ["rounded-sm"],
-        md: ["rounded-md"],
-        lg: ["rounded-lg"],
-        xl: ["rounded-lg"],
-        full: ["rounded-lg"]
-      }
-    }
-  });
-  const menuItemCva = classVarianceAuthority.cva(
-    [
-      "select-none",
-      "relative",
-      "flex",
-      "items-center",
-      "outline-none",
-      "data-[disabled=true]:text-(--base-a8)",
-      "data-[disabled=true]:pointer-events-none",
-      "shrink-0",
-      "py-1",
-      "text-(--base-12)"
-    ],
-    {
-      variants: {
-        size: {
-          xs: ["gap-1.5", "px-3"],
-          sm: ["gap-1.75", "px-3.5"],
-          md: ["gap-2", "px-4"],
-          lg: ["gap-2.25", "px-4.5"],
-          xl: ["gap-2.5", "px-5"]
-        },
-        variant: {
-          solid: [
-            "data-[active=true]:not-[data-[disabled=true]]:text-(--accent-contrast)",
-            "data-[active=true]:not-[data-[disabled=true]]:bg-(--accent-a9)",
-            "data-[active=true]:not-[data-[disabled=true]]:active:brightness-110"
-          ],
-          soft: [
-            "data-[active=true]:not-[data-[disabled=true]]:bg-(--accent-a3)",
-            "data-[active=true]:not-[data-[disabled=true]]:active:bg-(--accent-a4)"
-          ]
-        }
-      }
-    }
-  );
-  const menuGroupLabelCva = classVarianceAuthority.cva(["text-(--base-a11)", "flex", "items-center", "select-none", "py-1"], {
-    variants: {
-      size: {
-        xs: ["gap-1.5", "px-3", "text-xs"],
-        sm: ["gap-1.75", "px-3.5", "text-xs"],
-        md: ["gap-2", "px-4", "text-sm"],
-        lg: ["gap-2.25", "px-4.5", "text-base"],
-        xl: ["gap-2.5", "px-5", "text-lg"]
-      }
-    }
-  });
-  const menuSeparatorCva = classVarianceAuthority.cva(["h-px", "bg-(--base-a6)", "w-auto", "shrink-0"], {
-    variants: {
-      size: {
-        xs: ["-mx-0.5", "my-0.5"],
-        sm: ["-mx-0.75", "my-0.75"],
-        md: ["-mx-1", "my-1"],
-        lg: ["-mx-1.25", "my-1.25"],
-        xl: ["-mx-1.5", "my-1.5"]
-      }
-    }
-  });
-  const MenuV2Item = react.memo((props) => {
-    const {
-      ref,
-      children,
-      className,
-      disabled = false,
-      onClick,
-      onSelect,
-      onPointerEnter,
-      onPointerLeave,
-      onPointerMove,
-      ...rest
-    } = props;
-    const internalRef = react.useRef(null);
-    const itemId = react.useId();
-    const { activeItemId, setActiveItemId, size, variant, radius } = react.use(MenuRootContext);
-    const isActive = itemId === activeItemId;
-    const handleSelect = react.useCallback(
-      (e) => {
-        onSelect == null ? void 0 : onSelect(e);
-      },
-      [onSelect]
-    );
-    const handleClick = react.useCallback(
-      (e) => {
-        onClick == null ? void 0 : onClick(e);
-        handleSelect(new Event("menu-select"));
-      },
-      [handleSelect, onClick]
-    );
-    const handlePointerEnter = react.useCallback(
-      (e) => {
-        onPointerEnter == null ? void 0 : onPointerEnter(e);
-        if (e.defaultPrevented) return;
-        setActiveItemId(itemId);
-      },
-      [onPointerEnter, setActiveItemId, itemId]
-    );
-    const handlePointerLeave = react.useCallback(
-      (e) => {
-        onPointerLeave == null ? void 0 : onPointerLeave(e);
-        if (e.defaultPrevented) return;
-        setActiveItemId(null);
-      },
-      [onPointerLeave, setActiveItemId]
-    );
-    const handlePointerMove = react.useCallback(
-      (e) => {
-        onPointerMove == null ? void 0 : onPointerMove(e);
-        if (e.defaultPrevented) return;
-        setActiveItemId(itemId);
-      },
-      [onPointerMove, itemId, setActiveItemId]
-    );
-    react.useEffect(() => {
-      if (!internalRef.current) return;
-      const element = internalRef.current;
-      element.addEventListener("menu-select", handleSelect);
-      return () => {
-        element.removeEventListener("menu-select", handleSelect);
-      };
-    }, [handleSelect]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: mergeRefs([ref, internalRef]),
-        className: classVarianceAuthority.cx(menuItemCva({ size, variant }), radiusCva({ radius, maxLarge: true }), className),
-        role: "menuitem",
-        onClick: handleClick,
-        onPointerEnter: handlePointerEnter,
-        onPointerLeave: handlePointerLeave,
-        onPointerMove: handlePointerMove,
-        ...{ [ITEM_SELECTOR]: itemId },
-        "data-active": getBooleanState(isActive),
-        "data-disabled": getBooleanState(disabled),
-        "aria-disabled": getBooleanState(disabled),
-        ...rest,
-        children
-      }
-    );
-  });
-  MenuV2Item.displayName = "MenuItem";
-  const MenuV2CheckboxItem = react.memo((props) => {
-    const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
-    const handleSelect = react.useCallback(
-      (e) => {
-        onSelect == null ? void 0 : onSelect(e);
-        if (e.defaultPrevented) return;
-        switch (checked) {
-          case true:
-            onCheckedChange(false);
-            break;
-          case "indeterminate":
-            onCheckedChange(true);
-            break;
-          case false:
-            onCheckedChange(true);
-            break;
-        }
-      },
-      [checked, onCheckedChange, onSelect]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsxRuntime.jsx(MenuV2Item, { ref, onSelect: handleSelect, ...rest }) });
-  });
-  MenuV2CheckboxItem.displayName = "MenuCheckboxItem";
-  const MenuV2CheckedIndicator = react.memo((props) => {
-    const { ref, children, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicator, { ref, ...rest, children });
-  });
-  MenuV2CheckedIndicator.displayName = "MenuCheckboxItemIndicator";
-  const MenuV2Group = react.memo((props) => {
-    const { ref, children, ...rest } = props;
-    const groupId = react.useId();
-    const [labelId, setLabelId] = react.useState(null);
-    const contextValue = react.useMemo(
-      () => ({
-        labelId,
-        setLabelId
-      }),
-      [labelId]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "group", ...{ [GROUP_SELECTOR]: groupId }, "aria-labelledby": labelId ?? void 0, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(MenuGroupContext, { value: contextValue, children }) });
-  });
-  MenuV2Group.displayName = "MenuGroup";
-  const MenuV2GroupLabel = react.memo((props) => {
-    const { ref, children, id, className, ...rest } = props;
-    const labelId = useFallbackId(id);
-    const { size } = react.use(MenuRootContext);
-    const { setLabelId } = react.use(MenuGroupContext);
-    react.useEffect(() => {
-      setLabelId(labelId);
-    }, [labelId, setLabelId]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, id: labelId, className: classVarianceAuthority.cx(menuGroupLabelCva({ size }), className), ...rest, children });
-  });
-  MenuV2GroupLabel.displayName = "MenuGroupLabel";
-  const MenuV2SelectAllItem = genericMemo((props) => {
-    const { ref, children, onSelect, ...rest } = props;
-    const { allSelected, someSelected, toggleSelectAll } = react.use(MultiSelectContext);
-    const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
-    const handleSelect = react.useCallback(
-      (e) => {
-        onSelect == null ? void 0 : onSelect(e);
-        if (e.defaultPrevented) return;
-        toggleSelectAll();
-      },
-      [onSelect, toggleSelectAll]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(MenuV2Item, { onSelect: handleSelect, ref, "data-state": getCheckedState(selectedState), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicatorContext, { value: selectedState, children }) });
-  });
-  const MenuV2MultiSelectGroup = genericMemo(function MenuMultiSelectGroup2(props) {
-    const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(MenuV2Group, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
-  });
-  const MenuV2MultiSelectItem = genericMemo(function(props) {
-    const { ref, onSelect, children, value, ...rest } = props;
-    const { selected, selectValue, registerValue } = react.use(MultiSelectContext);
-    react.useLayoutEffect(() => {
-      return registerValue(value);
-    }, [registerValue, value]);
-    const isSelected = selected(value);
-    const handleSelect = react.useCallback(
-      (e) => {
-        onSelect == null ? void 0 : onSelect(e);
-        if (e.defaultPrevented) return;
-        selectValue(value);
-      },
-      [onSelect, selectValue, value]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      MenuV2Item,
-      {
-        ref,
-        role: "menuitemcheckbox",
-        onSelect: handleSelect,
-        "data-state": getSelectedState(isSelected),
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext, { value: isSelected, children })
-      }
-    );
-  });
-  const MenuV2Page = react.memo((props) => {
-    const { children, ref, page, ...rest } = props;
-    const { page: activePage } = react.use(MenuPageContext);
-    const isActive = page === activePage;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-active": getActiveState(isActive), hidden: !isActive, ...rest, children: isActive ? children : null });
-  });
-  MenuV2Page.displayName = "MenuPage";
-  const MenuV2Pages = react.memo((props) => {
-    const { children, defaultPage = "", page: controlledPage, onPageChange } = props;
-    const [page, setPage] = useControlledState(defaultPage, controlledPage, onPageChange);
-    const contextValue = react.useMemo(
-      () => ({
-        page,
-        setPage
-      }),
-      [page, setPage]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(MenuPageContext, { value: contextValue, children });
-  });
-  MenuV2Pages.displayName = "MenuPages";
-  const MenuV2PageTriggerItem = react.memo((props) => {
-    const { ref, children, page, onSelect, ...rest } = props;
-    const { page: activePage, setPage } = react.use(MenuPageContext);
-    const isActive = page === activePage;
-    const handleSelect = react.useCallback(
-      (e) => {
-        onSelect == null ? void 0 : onSelect(e);
-        if (e.defaultPrevented) return;
-        setPage(page);
-      },
-      [onSelect, page, setPage]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(MenuV2Item, { ref, onSelect: handleSelect, "data-state": getActiveState(isActive), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext, { value: isActive, children }) });
-  });
-  MenuV2PageTriggerItem.displayName = "CommandMenuPageTriggerItem";
-  const computeNextIndex = (index, length, direction, loop) => {
-    switch (direction) {
-      case "next":
-        return index === length - 1 ? loop ? 0 : index : index + 1;
-      case "prev":
-        return index === 0 ? loop ? length - 1 : index : index - 1;
-    }
-  };
-  const MenuV2Root = react.memo((props) => {
-    const providerContext = useProvider();
-    const {
-      ref,
-      children,
-      className,
-      onKeyDown,
-      loop = false,
-      // style props
-      radius = providerContext.radius,
-      accentColor = "base",
-      size = "md",
-      variant = "soft",
-      ...rest
-    } = props;
-    const internalRef = react.useRef(null);
-    const [activeItemId, setActiveItemId] = react.useState(null);
-    const getItems = react.useCallback((element) => {
-      return Array.from(element.querySelectorAll(`[${ITEM_SELECTOR}]:not([data-disabled=true]`));
-    }, []);
-    const getFirstItem = react.useCallback(
-      (element) => {
-        return getItems(element).at(0);
-      },
-      [getItems]
-    );
-    const getLastItem = react.useCallback(
-      (element) => {
-        return getItems(element).at(-1);
-      },
-      [getItems]
-    );
-    const getActiveItem = react.useCallback(
-      (element) => {
-        return getItems(element).find((itemEle) => itemEle.getAttribute(ITEM_SELECTOR) === activeItemId);
-      },
-      [activeItemId, getItems]
-    );
-    const getNextItem = react.useCallback(
-      (element, direction) => {
-        const items = getItems(element);
-        const activeItem = getActiveItem(element);
-        const activeItemIndex = items.findIndex((itemEle) => itemEle === activeItem);
-        const nextItemIndex = computeNextIndex(activeItemIndex, items.length, direction, loop);
-        return items[nextItemIndex];
-      },
-      [getActiveItem, getItems, loop]
-    );
-    const getGroups = react.useCallback(() => {
-      if (!internalRef.current) return [];
-      return Array.from(internalRef.current.querySelectorAll(`[${GROUP_SELECTOR}]`));
-    }, []);
-    const getActiveGroup = react.useCallback(() => {
-      var _a;
-      return ((_a = getActiveItem(internalRef.current)) == null ? void 0 : _a.closest(`[${GROUP_SELECTOR}]`)) ?? void 0;
-    }, [getActiveItem]);
-    const getNextGroup = react.useCallback(
-      (direction) => {
-        const groups = getGroups();
-        const activeGroup = getActiveGroup();
-        const activeGroupIndex = groups.findIndex((groupEle) => groupEle === activeGroup);
-        const nextGroupIndex = computeNextIndex(activeGroupIndex, groups.length, direction, loop);
-        return groups[nextGroupIndex];
-      },
-      [getActiveGroup, getGroups, loop]
-    );
-    const getFirstGroup = react.useCallback(() => {
-      return getGroups().at(0);
-    }, [getGroups]);
-    const getLastGroup = react.useCallback(() => {
-      return getGroups().at(-1);
-    }, [getGroups]);
-    const handleKeyDown = react.useCallback(
-      (e) => {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        if (e.defaultPrevented) return;
-        switch (e.code) {
-          case KEY_MAPPING.selectItem: {
-            const activeItem = getActiveItem(internalRef.current);
-            if (activeItem) activeItem.dispatchEvent(new Event("menu-select"));
-            break;
-          }
-          case KEY_MAPPING.next: {
-            let nextItem;
-            if (e.shiftKey) {
-              const nextGroup = getNextGroup("next");
-              if (!nextGroup) return;
-              nextItem = getFirstItem(nextGroup);
-            } else {
-              nextItem = getNextItem(internalRef.current, "next");
-            }
-            if (!nextItem) return;
-            setActiveItemId(nextItem.getAttribute(ITEM_SELECTOR));
-            break;
-          }
-          case KEY_MAPPING.prev: {
-            let prevItem;
-            if (e.shiftKey) {
-              const prevGroup = getNextGroup("prev");
-              if (!prevGroup) return;
-              prevItem = getFirstItem(prevGroup);
-            } else {
-              prevItem = getNextItem(internalRef.current, "prev");
-            }
-            if (!prevItem) return;
-            setActiveItemId(prevItem.getAttribute(ITEM_SELECTOR));
-            break;
-          }
-          case KEY_MAPPING.first: {
-            let firstItem;
-            if (e.shiftKey) {
-              const firstGroup = getFirstGroup();
-              if (!firstGroup) return;
-              firstItem = getFirstItem(firstGroup);
-            } else {
-              firstItem = getFirstItem(internalRef.current);
-            }
-            if (!firstItem) return;
-            setActiveItemId(firstItem.getAttribute(ITEM_SELECTOR));
-            break;
-          }
-          case KEY_MAPPING.last: {
-            let lastItem;
-            if (e.shiftKey) {
-              const lastGroup = getLastGroup();
-              if (!lastGroup) return;
-              lastItem = getFirstItem(lastGroup);
-            } else {
-              lastItem = getLastItem(internalRef.current);
-            }
-            if (!lastItem) return;
-            setActiveItemId(lastItem.getAttribute(ITEM_SELECTOR));
-            break;
-          }
-        }
-      },
-      [getActiveItem, getFirstGroup, getFirstItem, getLastGroup, getLastItem, getNextGroup, getNextItem, onKeyDown]
-    );
-    react.useEffect(() => {
-      var _a;
-      const firstItem = getFirstItem(internalRef.current);
-      if (!firstItem) return;
-      (_a = internalRef.current) == null ? void 0 : _a.focus();
-      setActiveItemId(firstItem.getAttribute(ITEM_SELECTOR));
-    }, [getFirstItem]);
-    const contextValue = react.useMemo(
-      () => ({
-        activeItemId,
-        setActiveItemId,
-        // style props
-        accentColor,
-        radius,
-        variant,
-        size
-      }),
-      [accentColor, activeItemId, radius, size, variant]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: mergeRefs([ref, internalRef]),
-        className: classVarianceAuthority.cx(menuRootCva({ size }), radiusCva({ radius, maxLarge: true }), className),
-        role: "menu",
-        onKeyDown: handleKeyDown,
-        tabIndex: 0,
-        "aria-activedescendant": activeItemId ?? void 0,
-        "data-accent-color": accentColor,
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(MenuRootContext, { value: contextValue, children })
-      }
-    );
-  });
-  MenuV2Root.displayName = "MenuRoot";
-  const MenuV2SelectedIndicator = react.memo((props) => {
-    const { ref, children, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, { ref, ...rest, children });
-  });
-  MenuV2SelectedIndicator.displayName = "MenuCheckboxItemIndicator";
-  const MenuV2SelectGroup = genericMemo(function MenuSelectGroup2(props) {
-    const { ref, children, required, defaultValue, value, onValueChange, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(MenuV2Group, { ref, ...rest, children: required ? /* @__PURE__ */ jsxRuntime.jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsxRuntime.jsx(
-      SingleSelectNotRequiredProvider,
-      {
-        defaultValue,
-        value,
-        onValueChange,
-        children
-      }
-    ) });
-  });
-  const MenuV2SelectItem = genericMemo(function(props) {
-    const { ref, value, onSelect, children, ...rest } = props;
-    const { selected, selectValue } = react.use(SelectContext);
-    const isSelected = selected(value);
-    const handleSelect = react.useCallback(
-      (e) => {
-        onSelect == null ? void 0 : onSelect(e);
-        if (e.defaultPrevented) return;
-        selectValue(value);
-      },
-      [onSelect, selectValue, value]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      MenuV2Item,
-      {
-        ref,
-        role: "menuitemcheckbox",
-        onSelect: handleSelect,
-        "data-state": getSelectedState(isSelected),
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext, { value: isSelected, children })
-      }
-    );
-  });
-  const MenuV2Separator = react.memo((props) => {
-    const { ref, className, ...rest } = props;
-    const { size } = react.use(MenuRootContext);
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixSeparator__namespace.Root, { className: classVarianceAuthority.cx(menuSeparatorCva({ size }), className), ref, ...rest });
-  });
-  MenuV2Separator.displayName = "MenuSeparator";
-  const MenuV2 = {
-    Root: MenuV2Root,
-    Group: MenuV2Group,
-    GroupLabel: MenuV2GroupLabel,
-    Item: MenuV2Item,
-    Separator: MenuV2Separator,
-    SelectGroup: MenuV2SelectGroup,
-    SelectItem: MenuV2SelectItem,
-    MultiSelectGroup: MenuV2MultiSelectGroup,
-    MultiSelectItem: MenuV2MultiSelectItem,
-    SelectAllItem: MenuV2SelectAllItem,
-    SelectedIndicator: MenuV2SelectedIndicator,
-    CheckboxItem: MenuV2CheckboxItem,
-    CheckedIndicator: MenuV2CheckedIndicator,
-    Pages: MenuV2Pages,
-    Page: MenuV2Page,
-    PageTriggerItem: MenuV2PageTriggerItem
-  };
-  const OneTimePasswordFieldHiddenInput = react.memo((props) => {
+  const OneTimePasswordFieldHiddenInput = React.memo((props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(RadixOneTimePasswordField__namespace.HiddenInput, { ...props });
   });
   OneTimePasswordFieldHiddenInput.displayName = "OneTimePasswordFieldHiddenInput";
-  const OneTimePasswordFieldContext = react.createContext({});
+  const OneTimePasswordFieldContext = React.createContext({});
   const onetimePasswordFieldInput = classVarianceAuthority.cva(
     [
       "flex",
@@ -4251,9 +3922,9 @@
       }
     }
   );
-  const OneTimePasswordFieldInput = react.memo((props) => {
+  const OneTimePasswordFieldInput = React.memo((props) => {
     const { ref, className, ...rest } = props;
-    const { variant, size, radius, accentColor } = react.use(OneTimePasswordFieldContext);
+    const { variant, size, radius, accentColor } = React.use(OneTimePasswordFieldContext);
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadixOneTimePasswordField__namespace.Input,
       {
@@ -4269,7 +3940,7 @@
     );
   });
   OneTimePasswordFieldInput.displayName = "OneTimePasswordFieldInput";
-  const OneTimePasswordFieldRoot = react.memo((props) => {
+  const OneTimePasswordFieldRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4280,7 +3951,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const contextValue = react.useMemo(() => ({ variant, size, radius, accentColor }), [accentColor, radius, size, variant]);
+    const contextValue = React.useMemo(() => ({ variant, size, radius, accentColor }), [accentColor, radius, size, variant]);
     return /* @__PURE__ */ jsxRuntime.jsx(RadixOneTimePasswordField__namespace.Root, { ref, "data-accent-color": accentColor, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(OneTimePasswordFieldContext, { value: contextValue, children }) });
   });
   OneTimePasswordFieldRoot.displayName = "OneTimePasswordFieldRoot";
@@ -4289,7 +3960,7 @@
     Input: OneTimePasswordFieldInput,
     Root: OneTimePasswordFieldRoot
   };
-  const OverlayClose = react.memo((props) => {
+  const OverlayClose = React.memo((props) => {
     const { ref, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { ref, ...rest });
   });
@@ -4305,7 +3976,7 @@
     "data-[state='open']:fade-in-0",
     "data-[state='open']:zoom-in-95"
   ]);
-  const OverlayContent = react.memo((props) => {
+  const OverlayContent = React.memo((props) => {
     const { ref, container, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
       RadixDialog__namespace.Content,
@@ -4318,21 +3989,21 @@
     ) });
   });
   OverlayContent.displayName = "OverlayContent";
-  const OverlayDescription = react.memo((props) => {
+  const OverlayDescription = React.memo((props) => {
     const { ref, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Description, { ref, ...rest });
   });
   OverlayDescription.displayName = "OverlayDescription";
-  const OverlayRoot = react.memo((props) => {
+  const OverlayRoot = React.memo((props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Root, { ...props });
   });
   OverlayRoot.displayName = "OverlayRoot";
-  const OverlayTitle = react.memo((props) => {
+  const OverlayTitle = React.memo((props) => {
     const { ref, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { ref, ...rest });
   });
   OverlayTitle.displayName = "OverlayTitle";
-  const OverlayTrigger = react.memo((props) => {
+  const OverlayTrigger = React.memo((props) => {
     const { ref, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { ref, ...rest });
   });
@@ -4346,12 +4017,12 @@
     Close: OverlayClose
   };
   const centerStyles = { placeSelf: "center" };
-  const ErrorFallback = react.memo((props) => {
+  const ErrorFallback = React.memo((props) => {
     const { absoluteCentering, message = "Something went wrong", onRetry } = props;
     const { resetBoundary } = reactErrorBoundary.useErrorBoundary();
     const height = "20px";
     const outerFlexStyles = absoluteCentering ? { position: "absolute", top: "50%", transform: "translateY(-50%)" } : void 0;
-    const handleRetry = react.useCallback(() => {
+    const handleRetry = React.useCallback(() => {
       resetBoundary();
       onRetry();
     }, [onRetry, resetBoundary]);
@@ -4364,14 +4035,14 @@
     ] });
   });
   ErrorFallback.displayName = "ErrorFallback";
-  const OvermapErrorBoundary = react.memo((props) => {
+  const OvermapErrorBoundary = React.memo((props) => {
     const { absoluteCentering, message } = props;
-    const [attempt, setAttempt] = react.useState(0);
-    const logError = react.useCallback((error, info) => {
+    const [attempt, setAttempt] = React.useState(0);
+    const logError = React.useCallback((error, info) => {
       console.error("Error in OvermapErrorBoundary:", error, info);
       setAttempt((prev) => prev + 1);
     }, []);
-    const handleRetry = react.useCallback(() => {
+    const handleRetry = React.useCallback(() => {
       setAttempt((prev) => prev + 1);
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4385,7 +4056,7 @@
     );
   });
   OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
-  const PopoverArrow = react.memo((props) => {
+  const PopoverArrow = React.memo((props) => {
     const { ref, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Arrow, { className: classVarianceAuthority.cx("fill-(--base-6)", className), ref, ...rest, children });
   });
@@ -4404,7 +4075,7 @@
       size: "md"
     }
   });
-  const PopoverContent = react.memo((props) => {
+  const PopoverContent = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4479,7 +4150,7 @@
       }
     }
   );
-  const Progress = react.memo((props) => {
+  const Progress = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4491,7 +4162,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const computedStyle = react.useMemo(
+    const computedStyle = React.useMemo(
       () => ({
         ...style,
         "--progress-value": rest.value ?? 0,
@@ -4512,7 +4183,7 @@
     );
   });
   Progress.displayName = "Progress";
-  const RadioCardsContext = react.createContext({});
+  const RadioCardsContext = React.createContext({});
   const radioCardsRootCva = classVarianceAuthority.cva([], {
     variants: {
       size: {
@@ -4572,8 +4243,8 @@
       }
     }
   );
-  const RadioCardsItem = react.memo((props) => {
-    const { variant, size, radius } = react.use(RadioCardsContext);
+  const RadioCardsItem = React.memo((props) => {
+    const { variant, size, radius } = React.use(RadioCardsContext);
     const { className, accentColor, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadixRadioGroup__namespace.Item,
@@ -4585,7 +4256,7 @@
     );
   });
   RadioCardsItem.displayName = "RadioCardsItem";
-  const RadioCardsRoot = react.memo((props) => {
+  const RadioCardsRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       className,
@@ -4596,7 +4267,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const contextValue = react.useMemo(
+    const contextValue = React.useMemo(
       () => ({
         variant,
         size,
@@ -4619,7 +4290,7 @@
     Root: RadioCardsRoot,
     Item: RadioCardsItem
   };
-  const RadioGroupIndicator = react.memo((props) => {
+  const RadioGroupIndicator = React.memo((props) => {
     const { ref, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadixRadioGroup__namespace.Indicator,
@@ -4632,7 +4303,7 @@
     );
   });
   RadioGroupIndicator.displayName = "RadioGroupIndicator";
-  const RadioGroupContext = react.createContext({});
+  const RadioGroupContext = React.createContext({});
   const radioGroupItem = classVarianceAuthority.cva(
     [
       "inline-flex",
@@ -4676,8 +4347,8 @@
       }
     }
   );
-  const RadioGroupItem = react.memo((props) => {
-    const radioGroupContext = react.useContext(RadioGroupContext);
+  const RadioGroupItem = React.memo((props) => {
+    const radioGroupContext = React.useContext(RadioGroupContext);
     const {
       ref,
       children,
@@ -4689,7 +4360,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Item, { className: classVarianceAuthority.cx(radioGroupItem({ size, variant }), className), ref, ...rest, children });
   });
   RadioGroupItem.displayName = "RadioGroupItem";
-  const RadioGroupRoot = react.memo((props) => {
+  const RadioGroupRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4708,6 +4379,65 @@
     Item: RadioGroupItem,
     Root: RadioGroupRoot
   };
+  const RatingRootContext = React.createContext({});
+  const RatingItemContext = React.createContext({});
+  const RatingItem = React.memo((props) => {
+    const { ref, children, value, ...rest } = props;
+    const { value: activeValue } = React.use(RatingRootContext);
+    const active = !!activeValue && value <= activeValue;
+    const contextValue = React.useMemo(() => ({ value }), [value]);
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Item, { ref, value: value.toString(), "data-active": active, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(RatingItemContext, { value: contextValue, children }) });
+  });
+  RatingItem.displayName = "RatingItem";
+  const RatingItemIndicator = React.memo((props) => {
+    const { ref, children, forceMount, ...rest } = props;
+    const { value: activeValue } = React.use(RatingRootContext);
+    const { value } = React.use(RatingItemContext);
+    const active = !!activeValue && value <= activeValue;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadixRadioGroup__namespace.Indicator,
+      {
+        ref,
+        forceMount: forceMount ?? (active || void 0),
+        "data-active": active,
+        ...rest,
+        children
+      }
+    );
+  });
+  RatingItemIndicator.displayName = "RatingItemIndicator";
+  const RatingRoot = React.memo((props) => {
+    const { ref, children, defaultValue, value: controlledValue, onValueChange, ...rest } = props;
+    const [value, setValue] = useControlledState(defaultValue ?? null, controlledValue, onValueChange);
+    const handleValueChange = React.useCallback(
+      (value2) => {
+        setValue(parseInt(value2));
+      },
+      [setValue]
+    );
+    const contextValue = React.useMemo(
+      () => ({
+        value
+      }),
+      [value]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadixRadioGroup__namespace.Root,
+      {
+        ref,
+        value: value ? value.toString() : null,
+        onValueChange: handleValueChange,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(RatingRootContext, { value: contextValue, children })
+      }
+    );
+  });
+  RatingRoot.displayName = "RatingRoot";
+  const Rating = {
+    Item: RatingItem,
+    ItemIndicator: RatingItemIndicator,
+    Root: RatingRoot
+  };
   const segmentedControlRootCva = classVarianceAuthority.cva(
     ["shrink-0", "transition-colors", "inline-flex", "box-border", "min-w-max", "text-center"],
     {
@@ -4851,15 +4581,15 @@
       }
     }
   );
-  const SegmentedControlContext = react.createContext({});
+  const SegmentedControlContext = React.createContext({});
   const useSegmentedControl = () => {
-    const segmentedControlContext = react.useContext(SegmentedControlContext);
+    const segmentedControlContext = React.useContext(SegmentedControlContext);
     if (!segmentedControlContext) {
       throw new Error("useSegmentedControl must be used within a SegmentedControlProvider");
     }
     return segmentedControlContext;
   };
-  const SegmentedControlItem = react.memo((props) => {
+  const SegmentedControlItem = React.memo((props) => {
     const { ref, className, ...rest } = props;
     const { size, radius, variant, icon } = useSegmentedControl();
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4872,7 +4602,7 @@
     );
   });
   SegmentedControlItem.displayName = "SegmentedControlItem";
-  const SegmentedControlRoot = react.memo((props) => {
+  const SegmentedControlRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4906,7 +4636,7 @@
     Item: SegmentedControlItem,
     Root: SegmentedControlRoot
   };
-  const SegmentedTabsListContext = react.createContext({});
+  const SegmentedTabsListContext = React.createContext({});
   const segmentedTabsListCva = classVarianceAuthority.cva(
     ["shrink-0", "transition-colors", "inline-flex", "box-border", "min-w-max", "text-center"],
     {
@@ -5054,7 +4784,7 @@
       }
     }
   );
-  const SegmentedTabsList = react.memo((props) => {
+  const SegmentedTabsList = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -5066,7 +4796,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const contextValue = react.useMemo(
+    const contextValue = React.useMemo(
       () => ({
         size,
         variant,
@@ -5086,14 +4816,14 @@
     );
   });
   SegmentedTabsList.displayName = "TabsList";
-  const SegmentedTabsRoot = react.memo((props) => {
+  const SegmentedTabsRoot = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Root, { ref, className: classVarianceAuthority.cx("flex flex-col", className), ...rest });
   });
   SegmentedTabsRoot.displayName = "TabsRoot";
-  const SegmentedTabsTrigger = react.memo((props) => {
+  const SegmentedTabsTrigger = React.memo((props) => {
     const { ref, children, className, ...rest } = props;
-    const { size, radius, variant } = react.use(SegmentedTabsListContext);
+    const { size, radius, variant } = React.use(SegmentedTabsListContext);
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadixTabs__namespace.Trigger,
       {
@@ -5193,7 +4923,7 @@
       orientation: "horizontal"
     }
   });
-  const Separator = react.memo((props) => {
+  const Separator = React.memo((props) => {
     const { ref, className, accentColor = "base", orientation, size, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadixSeparator__namespace.Root,
@@ -5415,7 +5145,7 @@
       }
     }
   );
-  const Slider = react.memo((props) => {
+  const Slider = React.memo((props) => {
     const providerContext = useProvider();
     const {
       className,
@@ -5453,11 +5183,11 @@
     );
   });
   Slider.displayName = "Slider";
-  const Spinner = react.memo(() => {
+  const Spinner = React.memo(() => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 animate-spin rounded-full border-2 border-(--base-a12) border-b-transparent" });
   });
   Spinner.displayName = "Spinner";
-  const SwitchContext = react.createContext({});
+  const SwitchContext = React.createContext({});
   const switchRoot = classVarianceAuthority.cva(
     [
       "shrink-0",
@@ -5517,7 +5247,7 @@
       }
     }
   );
-  const SwitchRoot = react.memo((props) => {
+  const SwitchRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -5540,9 +5270,9 @@
     );
   });
   SwitchRoot.displayName = "SwitchRoot";
-  const SwitchThumb = react.memo((props) => {
+  const SwitchThumb = React.memo((props) => {
     const { ref, className, ...rest } = props;
-    const { size, radius } = react.useContext(SwitchContext);
+    const { size, radius } = React.useContext(SwitchContext);
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadixSwitch__namespace.Thumb,
       {
@@ -5557,12 +5287,12 @@
     Root: SwitchRoot,
     Thumb: SwitchThumb
   };
-  const TableBody = react.memo((props) => {
+  const TableBody = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: classVarianceAuthority.cx(className), ...rest });
   });
   TableBody.displayName = "TableBody";
-  const TableContext = react.createContext({});
+  const TableContext = React.createContext({});
   const tableRootCva = classVarianceAuthority.cva(["border-collapse text-left"], {
     variants: {
       variant: {
@@ -5603,29 +5333,29 @@
       }
     }
   });
-  const TableCell = react.memo((props) => {
+  const TableCell = React.memo((props) => {
     const { ref, className, ...rest } = props;
-    const { size, border, variant } = react.useContext(TableContext);
+    const { size, border, variant } = React.useContext(TableContext);
     return /* @__PURE__ */ jsxRuntime.jsx("td", { ref, className: classVarianceAuthority.cx(tableCellCva({ size, border, cell: true, variant }), className), ...rest });
   });
   TableCell.displayName = "TableCell";
-  const TableColumnHeaderCell = react.memo((props) => {
+  const TableColumnHeaderCell = React.memo((props) => {
     const { ref, className, ...rest } = props;
-    const { size, border, variant } = react.useContext(TableContext);
+    const { size, border, variant } = React.useContext(TableContext);
     return /* @__PURE__ */ jsxRuntime.jsx("th", { ref, className: classVarianceAuthority.cx(tableCellCva({ size, border, cell: false, variant }), className), ...rest });
   });
   TableColumnHeaderCell.displayName = "TableColumnHeaderCell";
-  const TableFooter = react.memo((props) => {
+  const TableFooter = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("tfoot", { ref, className: classVarianceAuthority.cx(className), ...rest });
   });
   TableFooter.displayName = "TableFooter";
-  const TableHeader = react.memo((props) => {
+  const TableHeader = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: classVarianceAuthority.cx(className), ...rest });
   });
   TableHeader.displayName = "TableHeader";
-  const TableRoot = react.memo((props) => {
+  const TableRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -5653,14 +5383,14 @@
     );
   });
   TableRoot.displayName = "TableRoot";
-  const TableRow = react.memo((props) => {
+  const TableRow = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: classVarianceAuthority.cx(className), ...rest });
   });
   TableRow.displayName = "TableRow";
-  const TableRowHeaderCell = react.memo((props) => {
+  const TableRowHeaderCell = React.memo((props) => {
     const { ref, className, ...rest } = props;
-    const { size, border, variant } = react.useContext(TableContext);
+    const { size, border, variant } = React.useContext(TableContext);
     return /* @__PURE__ */ jsxRuntime.jsx("th", { ref, className: classVarianceAuthority.cx(tableCellCva({ size, border, cell: true, variant }), className), ...rest });
   });
   TableRowHeaderCell.displayName = "TableRow";
@@ -5674,7 +5404,7 @@
     RowHeaderCell: TableRowHeaderCell,
     ColumnHeaderCell: TableColumnHeaderCell
   };
-  const TabsListContext = react.createContext({});
+  const TabsListContext = React.createContext({});
   const tabsListCva = classVarianceAuthority.cva(["flex", "border-box", "inset-shadow-[0_-1px_0_0_var(--base-a6)]"], {
     variants: {
       size: {
@@ -5724,7 +5454,7 @@
       }
     }
   );
-  const TabsList = react.memo((props) => {
+  const TabsList = React.memo((props) => {
     const providerContext = useProvider();
     const { ref, children, className, size = "md", accentColor = providerContext.accentColor, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5739,19 +5469,19 @@
     );
   });
   TabsList.displayName = "TabsList";
-  const TabsRoot = react.memo((props) => {
+  const TabsRoot = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Root, { ref, className: classVarianceAuthority.cx("flex flex-col", className), ...rest });
   });
   TabsRoot.displayName = "TabsRoot";
   const useTabsList = () => {
-    const tabsListContext = react.useContext(TabsListContext);
+    const tabsListContext = React.useContext(TabsListContext);
     if (!tabsListContext) {
       throw new Error("useTabsList must be used within a TabsList component");
     }
     return tabsListContext;
   };
-  const TabsTrigger = react.memo((props) => {
+  const TabsTrigger = React.memo((props) => {
     const { ref, children, className, ...rest } = props;
     const { size } = useTabsList();
     return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { ref, className: classVarianceAuthority.cx(tabsTriggerCva({ size }), className), ...rest, children });
@@ -5793,7 +5523,7 @@
       }
     }
   });
-  const Text = react.memo((props) => {
+  const Text = React.memo((props) => {
     const { ref, className, size, weight, align, accentColor, highContrast = false, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -5874,7 +5604,7 @@
       }
     }
   );
-  const TextArea = react.memo((props) => {
+  const TextArea = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -5942,8 +5672,8 @@
       action,
       ...rest
     } = props;
-    const [open, setOpen] = react.useState(true);
-    const handleOpenChange = react.useCallback(
+    const [open, setOpen] = React.useState(true);
+    const handleOpenChange = React.useCallback(
       (open2) => {
         if (!open2 && onClose) onClose();
         setOpen(open2);
@@ -5981,11 +5711,11 @@
       }
     );
   };
-  const Toast = react.memo(_Toast);
+  const Toast = React.memo(_Toast);
   Toast.displayName = "Toast";
-  const ToastContext = react.createContext({});
+  const ToastContext = React.createContext({});
   const useToast = () => {
-    const context = react.useContext(ToastContext);
+    const context = React.useContext(ToastContext);
     if (!context) {
       throw new Error("useToast must be used within a ToastProvider");
     }
@@ -5999,15 +5729,15 @@
     return MIN_DURATION + words / WORDS_PER_SECOND;
   };
   exports2.unsafeShowToast = void 0;
-  const ToastProvider = react.memo(function ToastContextProvider({
+  const ToastProvider = React.memo(function ToastContextProvider({
     children,
     // Use this class to change where the viewport for the toasts should be
     className,
     hotkey,
     ...rest
   }) {
-    const [toasts, setToasts] = react.useState([]);
-    const handleCloseToast = react.useCallback((id, reason, callback) => {
+    const [toasts, setToasts] = React.useState([]);
+    const handleCloseToast = React.useCallback((id, reason, callback) => {
       setToasts((prevToasts) => {
         const toast = prevToasts.find((toast2) => toast2.id === id);
         if (toast && reason === 0) clearTimeout(toast.timeout);
@@ -6015,7 +5745,7 @@
       });
       if (callback) callback();
     }, []);
-    const toastContextValue = react.useMemo(() => {
+    const toastContextValue = React.useMemo(() => {
       let counter = 0;
       const showToast = (toastProps) => {
         const duration = calculatedDuration(toastProps);
@@ -6039,7 +5769,7 @@
         showWarning
       };
     }, [handleCloseToast]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       return () => {
         for (const { timeout } of toasts) clearTimeout(timeout);
       };
@@ -6180,7 +5910,7 @@
       }
     }
   );
-  const BaseToggleButton = react.memo((props) => {
+  const BaseToggleButton = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -6203,15 +5933,15 @@
     );
   });
   BaseToggleButton.displayName = "BaseToggleButton";
-  const IconToggleButton = react.memo((props) => {
+  const IconToggleButton = React.memo((props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(BaseToggleButton, { icon: true, ...props });
   });
   IconToggleButton.displayName = "IconToggleButton";
-  const ToggleButton = react.memo((props) => {
+  const ToggleButton = React.memo((props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(BaseToggleButton, { icon: false, ...props });
   });
   ToggleButton.displayName = "ToggleButton";
-  const ToggleGroupContext = react.createContext({});
+  const ToggleGroupContext = React.createContext({});
   const toggleGroupItemCva = classVarianceAuthority.cva(
     [
       "flex",
@@ -6327,8 +6057,8 @@
       ]
     }
   );
-  const ToggleGroupBaseItem = react.memo((props) => {
-    const toggleGroupContext = react.use(ToggleGroupContext);
+  const ToggleGroupBaseItem = React.memo((props) => {
+    const toggleGroupContext = React.use(ToggleGroupContext);
     const {
       ref,
       className,
@@ -6354,15 +6084,15 @@
     );
   });
   ToggleGroupBaseItem.displayName = "ToggleGroupBaseItem";
-  const ToggleGroupIconItem = react.memo((props) => {
+  const ToggleGroupIconItem = React.memo((props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupBaseItem, { icon: true, ...props });
   });
   ToggleGroupIconItem.displayName = "ToggleGroupIconItem";
-  const ToggleGroupItem = react.memo((props) => {
+  const ToggleGroupItem = React.memo((props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupBaseItem, { icon: false, ...props });
   });
   ToggleGroupItem.displayName = "ToggleGroupItem";
-  const ToggleGroupRoot = react.memo((props) => {
+  const ToggleGroupRoot = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -6373,7 +6103,7 @@
       size = "md",
       ...rest
     } = props;
-    const contextValue = react.useMemo(
+    const contextValue = React.useMemo(
       () => ({
         variant,
         size,
@@ -6390,7 +6120,7 @@
     Item: ToggleGroupItem,
     IconItem: ToggleGroupIconItem
   };
-  const TooltipArrow = react.memo((props) => {
+  const TooltipArrow = React.memo((props) => {
     const { ref, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Arrow, { className: classVarianceAuthority.cx("fill-(--base-6)", className), ref, ...rest });
   });
@@ -6432,7 +6162,7 @@
       }
     }
   );
-  const TooltipContent = react.memo((props) => {
+  const TooltipContent = React.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -6484,6 +6214,7 @@
   exports2.CheckboxGroupSelectAllItem = CheckboxGroupSelectAllItem;
   exports2.CheckboxIndicator = CheckboxIndicator;
   exports2.CheckboxRoot = CheckboxRoot;
+  exports2.CollapsibleTree = CollapsibleTree;
   exports2.CommandMenu = CommandMenu;
   exports2.CommandMenuCheckboxIndicator = CommandMenuCheckboxIndicator;
   exports2.CommandMenuCheckboxItem = CommandMenuCheckboxItem;
@@ -6558,23 +6289,6 @@
   exports2.MenuSub = MenuSub;
   exports2.MenuSubContent = MenuSubContent;
   exports2.MenuSubTrigger = MenuSubTrigger;
-  exports2.MenuV2 = MenuV2;
-  exports2.MenuV2CheckboxItem = MenuV2CheckboxItem;
-  exports2.MenuV2CheckedIndicator = MenuV2CheckedIndicator;
-  exports2.MenuV2Group = MenuV2Group;
-  exports2.MenuV2GroupLabel = MenuV2GroupLabel;
-  exports2.MenuV2Item = MenuV2Item;
-  exports2.MenuV2MultiSelectGroup = MenuV2MultiSelectGroup;
-  exports2.MenuV2MultiSelectItem = MenuV2MultiSelectItem;
-  exports2.MenuV2Page = MenuV2Page;
-  exports2.MenuV2PageTriggerItem = MenuV2PageTriggerItem;
-  exports2.MenuV2Pages = MenuV2Pages;
-  exports2.MenuV2Root = MenuV2Root;
-  exports2.MenuV2SelectAllItem = MenuV2SelectAllItem;
-  exports2.MenuV2SelectGroup = MenuV2SelectGroup;
-  exports2.MenuV2SelectItem = MenuV2SelectItem;
-  exports2.MenuV2SelectedIndicator = MenuV2SelectedIndicator;
-  exports2.MenuV2Separator = MenuV2Separator;
   exports2.MenuVirtualTrigger = MenuVirtualTrigger;
   exports2.OneTimePasswordField = OneTimePasswordField;
   exports2.OneTimePasswordFieldHiddenInput = OneTimePasswordFieldHiddenInput;
@@ -6600,6 +6314,10 @@
   exports2.RadioGroupIndicator = RadioGroupIndicator;
   exports2.RadioGroupItem = RadioGroupItem;
   exports2.RadioGroupRoot = RadioGroupRoot;
+  exports2.Rating = Rating;
+  exports2.RatingItem = RatingItem;
+  exports2.RatingItemIndicator = RatingItemIndicator;
+  exports2.RatingRoot = RatingRoot;
   exports2.SegmentedControl = SegmentedControl;
   exports2.SegmentedControlItem = SegmentedControlItem;
   exports2.SegmentedControlRoot = SegmentedControlRoot;
@@ -6607,6 +6325,7 @@
   exports2.SegmentedTabsList = SegmentedTabsList;
   exports2.SegmentedTabsRoot = SegmentedTabsRoot;
   exports2.SegmentedTabsTrigger = SegmentedTabsTrigger;
+  exports2.SelectedIndicatorContext = SelectedIndicatorContext;
   exports2.Separator = Separator;
   exports2.SlideOut = SlideOut;
   exports2.Slider = Slider;
@@ -6643,21 +6362,21 @@
   exports2.badge = badge;
   exports2.buttonCva = buttonCva;
   exports2.floating = floating;
-  exports2.genericMemo = genericMemo;
-  exports2.getActiveState = getActiveState;
-  exports2.getBooleanState = getBooleanState;
-  exports2.getCheckedState = getCheckedState;
-  exports2.getOpenState = getOpenState;
-  exports2.getSelectedState = getSelectedState;
   exports2.mergeRefs = mergeRefs;
   exports2.radiusCva = radiusCva;
   exports2.stopPropagation = stopPropagation;
   exports2.useAlertDialog = useAlertDialog;
   exports2.useButtonGroup = useButtonGroup;
   exports2.useControlledState = useControlledState;
-  exports2.useFallbackId = useFallbackId;
   exports2.useLayoutContext = useLayoutContext;
+  exports2.useMenuContentContext = useMenuContentContext;
+  exports2.useMenuContext = useMenuContext;
+  exports2.usePagesContext = usePagesContext;
   exports2.useProvider = useProvider;
+  exports2.useSelectedIndicatorContext = useSelectedIndicatorContext;
+  exports2.useSize = useSize;
+  exports2.useStopEventPropagation = useStopEventPropagation;
+  exports2.useSubContext = useSubContext;
   exports2.useTextFilter = useTextFilter;
   exports2.useToast = useToast;
   exports2.useViewportSize = useViewportSize;