@overmap-ai/blocks 1.0.40-overlay.1 → 1.0.40-phone-input.0

package/dist/blocks.js

@@ -1,12 +1,10 @@
 import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cva, cx } from "class-variance-authority";
-import * as React from "react";
-import React__default, { createContext, useContext, memo, useMemo, useState, useCallback, useEffect, useLayoutEffect, use, useRef } from "react";
+import { createContext, useContext, memo, useMemo, useState, useCallback, useEffect, useId, useLayoutEffect, use, useRef } from "react";
 import * as RadixAvatar from "@radix-ui/react-avatar";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
 import { useMediaQuery } from "react-responsive";
-import * as RadixPrimitiveCollapsible from "@radix-ui/react-collapsible";
 import { CommandItem, CommandRoot, CommandEmpty, CommandGroup, CommandInput, useCommandState, CommandList, CommandSeparator } from "cmdk";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import { DialogPortal, DialogContent as DialogContent$1, DialogTitle, DialogDescription, DialogOverlay as DialogOverlay$1, DialogTrigger } from "@radix-ui/react-dialog";
@@ -16,10 +14,13 @@ import * as RadixHoverCard from "@radix-ui/react-hover-card";
 import { CSSTransition } from "react-transition-group";
 import ReactDOM from "react-dom";
 import { Slot } from "@radix-ui/react-slot";
-import { useFloatingNodeId, useFloating, offset, size, flip, shift, hide, autoUpdate, useRole, useDismiss, useClick, useListNavigation, useInteractions, FloatingTree, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList, useHover, safePolygon, useListItem, useMergeRefs } from "@floating-ui/react";
+import { useListItem, useMergeRefs, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList, useFloatingNodeId, useFloating, offset, size, flip, shift, hide, autoUpdate, useRole, useDismiss, useClick, useListNavigation, useInteractions, FloatingTree, useHover, safePolygon } from "@floating-ui/react";
 import * as RadixSeparator from "@radix-ui/react-separator";
 import * as RadixOneTimePasswordField from "@radix-ui/react-one-time-password-field";
 import { useErrorBoundary, ErrorBoundary } from "react-error-boundary";
+import PhoneInput from "react-phone-number-input";
+import { PhoneIcon, ChevronDownIcon } from "lucide-react";
+import { getCountryCallingCode } from "react-phone-number-input/min";
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as RadixProgress from "@radix-ui/react-progress";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
@@ -788,82 +789,6 @@ const Checkbox = {
 };
 const SelectContext = createContext({});
 const MultiSelectContext = createContext({});
-const usePassiveLayoutEffect = React__default[typeof document !== "undefined" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"];
-const useLatest = (current) => {
-  const storedValue = React.useRef(current);
-  React.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] = useState("initial");
@@ -881,33 +806,14 @@ const useViewportSize = (props) => {
   }, [lg, md, sm, xl, xs]);
   return { size: size2, prevSize, xs, sm, md, lg, xl };
 };
-const useStopEventPropagation = () => {
-  return useCallback((event) => {
-    event.stopPropagation();
-  }, []);
-};
-function useTextFilter(values, filterFunction) {
+function useTextFilter(items, filterFunction) {
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [filterValue, setFilterValue] = useState("");
   useEffect(() => {
-    setFilteredOptions(values.filter((value) => filterFunction(value, filterValue)));
-  }, [filterFunction, filterValue, values]);
+    setFilteredOptions(items.filter((value) => filterFunction(value, filterValue)));
+  }, [filterFunction, filterValue, items]);
   return [filteredOptions, filterValue, setFilterValue];
 }
-const useSize = (target) => {
-  const [size2, setSize] = useState();
-  useLayoutEffect(() => {
-    var _a;
-    setSize((_a = target.current) == null ? void 0 : _a.getBoundingClientRect());
-  }, [target]);
-  const handleResize = useCallback((entry) => {
-    const rect = entry.contentRect;
-    setSize(rect);
-  }, []);
-  useResizeObserver(target, handleResize);
-  return size2;
-};
-const genericMemo = memo;
 function useControlledState(initialState, state, setState) {
   const [uncontrolledState, setUncontrolledState] = useState(initialState);
   const handleStateChange = useCallback(
@@ -924,26 +830,34 @@ function useControlledState(initialState, state, setState) {
   }, [state]);
   return [state ?? uncontrolledState, handleStateChange];
 }
+function useFallbackId(id) {
+  const fallbackId = useId();
+  return id ?? fallbackId;
+}
+const genericMemo = 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 {
+    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;
           cleanups2.push(() => {
-            ref(null);
+            ref.current = null;
           });
         }
-      } else if (ref != null) {
-        ref.current = value;
-        cleanups2.push(() => {
-          ref.current = null;
-        });
-      }
-      return cleanups2;
-    }, []);
+        return cleanups2;
+      },
+      []
+    );
     return () => {
       cleanups.forEach((cleanup) => {
         cleanup();
@@ -954,6 +868,21 @@ function mergeRefs(refs) {
 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] = useState(/* @__PURE__ */ new Set());
@@ -1036,8 +965,8 @@ const CheckboxGroupItem = memo((props) => {
     ref,
     className,
     value,
-    accentColor,
     disabled,
+    accentColor = groupContext.accentColor,
     variant = groupContext.variant,
     size: size2 = groupContext.size,
     radius = groupContext.radius,
@@ -1074,9 +1003,6 @@ const CheckboxGroupItemIndicator = memo((props) => {
   return /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: cx("flex items-center justify-center", className), ref, ...rest });
 });
 CheckboxGroupItemIndicator.displayName = "CheckboxGroupItemIndicator";
-function getBooleanState$1(value) {
-  return value ? "true" : "false";
-}
 const CheckboxGroupRoot = memo((props) => {
   const providerContext = useProvider();
   const {
@@ -1099,20 +1025,22 @@ const CheckboxGroupRoot = memo((props) => {
       name,
       required,
       disabled,
+      // style props
+      accentColor,
       size: size2,
       variant,
       radius
     }),
-    [disabled, name, radius, required, size2, variant]
+    [accentColor, disabled, name, radius, required, size2, variant]
   );
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       role: "group",
-      "data-disabled": getBooleanState$1(!!disabled),
+      "data-disabled": getBooleanState(!!disabled),
       "data-accent-color": accentColor,
-      "aria-disabled": getBooleanState$1(!!disabled),
+      "aria-disabled": getBooleanState(!!disabled),
       ...rest,
       children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
         MultiSelectProvider,
@@ -1132,8 +1060,8 @@ const CheckboxGroupSelectAllItem = memo((props) => {
   const {
     ref,
     className,
-    accentColor,
     disabled,
+    accentColor = groupContext.accentColor,
     variant = groupContext.variant,
     size: size2 = groupContext.size,
     radius = groupContext.radius,
@@ -1164,137 +1092,39 @@ const CheckboxGroup = {
   SelectAllItem: CheckboxGroupSelectAllItem,
   ItemIndicator: CheckboxGroupItemIndicator
 };
-const CollapsibleTreeContext = createContext(
-  {}
-);
-function useCollapsibleTreeContext() {
-  return useContext(CollapsibleTreeContext);
-}
-const CollapsibleNode = genericMemo(function(props) {
-  const { meta, nodes, level = 0, disabled } = props;
-  const [controlledOpenState, setControlledOpenState] = useState(false);
-  const {
-    nodeRenderer,
-    disabled: disabledFromContext,
-    onNodeOpen,
-    onNodeClose,
-    onNodeClick,
-    nodeStyles,
-    nodeClassName
-  } = useCollapsibleTreeContext();
-  const isDisabled = disabled ?? disabledFromContext;
-  const handleClick = useCallback(() => {
-    if (onNodeClick) onNodeClick(meta);
-  }, [meta, onNodeClick]);
-  const toggleOpenState = useCallback(() => {
-    setControlledOpenState(!controlledOpenState);
-    if (!controlledOpenState && onNodeOpen) onNodeOpen(meta);
-    if (controlledOpenState && onNodeClose) onNodeClose(meta);
-  }, [meta, onNodeClose, onNodeOpen, controlledOpenState]);
-  const { children, style, className } = useMemo(() => {
-    return nodeRenderer({
-      meta,
-      toggleOpen: toggleOpenState,
-      open: controlledOpenState,
-      disabled: isDisabled
-    });
-  }, [isDisabled, meta, nodeRenderer, toggleOpenState, controlledOpenState]);
-  const combinedStyles = useMemo(
-    () => ({
-      // want node specific styles to overwrite and global node styles
-      ...nodeStyles,
-      ...style
-    }),
-    [nodeStyles, style]
-  );
-  return /* @__PURE__ */ jsx(RadixPrimitiveCollapsible.Root, { asChild: true, open: controlledOpenState, disabled: isDisabled, children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        onClick: handleClick,
-        className: 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__ */ jsx(RadixPrimitiveCollapsible.Content, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "flex h-max w-full flex-col pl-2", children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ 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__ */ jsx(
-    CollapsibleTreeContext.Provider,
-    {
-      value: {
-        nodeRenderer,
-        nodeClassName,
-        nodeStyles,
-        disabled,
-        onNodeClick,
-        onNodeClose,
-        onNodeOpen
-      },
-      children: /* @__PURE__ */ jsx("div", { className: "flex h-max w-full flex-col", ...rest, children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsx(CollapsibleNode, { ...treeNodeProps }, `${0},${index}`)) })
-    }
-  );
-});
-const CommandMenuContext = createContext({});
-const SelectedIndicatorContext$1 = createContext(false);
-const CheckboxIndicatorContext = createContext(false);
-const CommandMenuPageContext = createContext({});
-const CommandMenuDialogContext = 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 = memo((props) => {
-  const { ref, className, children, ...rest } = props;
-  const checkedState = use(CheckboxIndicatorContext);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? children(checkedState) : children;
-  }, [checkedState, children]);
+const CheckedIndicatorContext = createContext({});
+const CheckedIndicator = memo((props) => {
+  const { children, ref, className, ...rest } = props;
+  const checked = useContext(CheckedIndicatorContext);
+  const computedChildren = typeof children === "function" ? children(checked) : children;
   return /* @__PURE__ */ jsx(
     "span",
     {
       ref,
-      "data-state": getCheckedState$1(checkedState),
       className: cx(
-        "inline-block size-max",
+        "flex size-max items-center",
         {
-          invisible: checkedState === false
+          invisible: checked === false
         },
         className
       ),
+      "data-state": getCheckedState(checked),
       ...rest,
       children: computedChildren
     }
   );
 });
+CheckedIndicator.displayName = "CheckedIndicator";
+const CommandMenuCheckboxIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
+});
 CommandMenuCheckboxIndicator.displayName = "CommandMenuCheckboxIndicator";
+const CommandMenuContext = createContext({});
+const SelectedIndicatorContext$1 = createContext(false);
+const CheckboxIndicatorContext = createContext(false);
+const CommandMenuPageContext = createContext({});
+const CommandMenuDialogContext = createContext({});
 const commandMenuContentCva = cva(
   [
     "ring",
@@ -1531,7 +1361,7 @@ const CommandMenuCheckboxItem = memo((props) => {
     onSelect == null ? void 0 : onSelect();
     onCheckedChange(checked !== true);
   }, [checked, onCheckedChange, onSelect]);
-  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState$1(checked), ...rest, children }) });
+  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState(checked), ...rest, children }) });
 });
 CommandMenuCheckboxItem.displayName = "CommandMenuCheckboxItem";
 const CommandMenuContent = memo((props) => {
@@ -1558,9 +1388,10 @@ const CommandMenuContent = memo((props) => {
     return {
       variant,
       size: size2,
-      radius
+      radius,
+      accentColor
     };
-  }, [radius, size2, variant]);
+  }, [accentColor, radius, size2, variant]);
   return /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsx(
     DialogContent$1,
     {
@@ -1647,7 +1478,7 @@ const CommandMenuMultiSelectItem = genericMemo(function(props) {
     {
       ref,
       onSelect: handleSelect,
-      "data-state": getSelectedState$1(isSelected),
+      "data-state": getSelectedState(isSelected),
       "aria-selected": isSelected,
       closeOnSelect,
       ...rest,
@@ -1721,7 +1552,7 @@ const CommandMenuRadioItem = genericMemo(function(props) {
     selectValue(value);
   }, [onSelect, selectValue, value]);
   const isSelected = selected(value);
-  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState$1(isSelected), ...rest, children }) });
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState(isSelected), ...rest, children }) });
 });
 const CommandMenuRoot = memo((props) => {
   const { children, defaultOpen, open: controlledOpen, onOpenChange, modal } = props;
@@ -1749,35 +1580,39 @@ const CommandMenuSelectAllItem = genericMemo(function(props) {
       ref,
       role: "menuitemcheckbox",
       onSelect: handleSelect,
-      "data-state": getCheckedState$1(selectedState),
+      "data-state": getCheckedState(selectedState),
       closeOnSelect,
       ...rest
     }
   ) });
 });
-const CommandMenuSelectedIndicator = memo((props) => {
-  const { ref, className, children, ...rest } = props;
-  const isSelected = use(SelectedIndicatorContext$1);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? children(isSelected) : children;
-  }, [isSelected, children]);
+const SelectedIndicatorContext = createContext(false);
+const SelectedIndicator = memo((props) => {
+  const { ref, children, className, ...rest } = props;
+  const isSelected = use(SelectedIndicatorContext);
+  const computedChildren = typeof children === "function" ? children(isSelected) : children;
   return /* @__PURE__ */ jsx(
     "span",
     {
       ref,
-      "data-state": getSelectedState$1(isSelected),
       className: cx(
-        "inline-block size-max",
+        "flex size-max items-center",
         {
           invisible: !isSelected
         },
         className
       ),
+      "data-state": getSelectedState(isSelected),
       ...rest,
       children: computedChildren
     }
   );
 });
+SelectedIndicator.displayName = "SelectedIndicator";
+const CommandMenuSelectedIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(SelectedIndicator, { ref, ...rest, children });
+});
 CommandMenuSelectedIndicator.displayName = "CommandMenuSelectedIndicator";
 const CommandMenuSeparator = memo((props) => {
   const { className, ref, spacing = false, ...rest } = props;
@@ -2254,7 +2089,7 @@ const HoverCard = {
   Root: RadixHoverCard.Root,
   Trigger: RadixHoverCard.Trigger
 };
-const HoverUtility = memo(function Root({ children, forceHover }) {
+const HoverUtility = memo(({ children, forceHover }) => {
   const [isHovered, setIsHovered] = useState(false);
   const handlePointerEnter = useCallback(() => {
     setIsHovered(true);
@@ -2268,6 +2103,7 @@ const HoverUtility = memo(function Root({ children, forceHover }) {
     onPointerLeave: handlePointerLeave
   });
 });
+HoverUtility.displayName = "HoverUtility";
 const InputContext = createContext({});
 const inputRoot$1 = cva(
   [
@@ -2746,40 +2582,6 @@ const LayoutSlideOutOverlay = memo((props) => {
   return showOverlay && /* @__PURE__ */ jsx("div", { className: 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":
@@ -2875,28 +2677,6 @@ const Link = memo((props) => {
   );
 });
 Link.displayName = "Link";
-const CheckedIndicatorContext = createContext({});
-const CheckedIndicator = (props) => {
-  const { children, ref, className, ...rest } = props;
-  const checked = useContext(CheckedIndicatorContext);
-  const computedChildren = typeof children === "function" ? children(checked === "indeterminate") : children;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref,
-      className: cx(
-        "flex size-max items-center",
-        {
-          invisible: checked === false
-        },
-        className
-      ),
-      "data-state": getCheckedState$1(checked),
-      ...rest,
-      children: computedChildren
-    }
-  );
-};
 const menuItem = cva(
   [
     "select-none",
@@ -3042,100 +2822,115 @@ const inputRoot = cva(
     }
   }
 );
+const MenuContentContext = createContext({});
 const MenuContext = createContext({});
-const useMenuContext = () => useContext(MenuContext);
-const DEFAULT_OFFSET = 5;
-const MenuRoot = memo((props) => {
+const SubContext = createContext({});
+const TRIGGER_SELECT_KEYS = ["Enter", " "];
+const MenuItem = memo((props) => {
+  const rootMenuContext = use(MenuContext);
+  const { getItemProps, activeIndex, setOpen, size: size2, variant, radius } = use(MenuContentContext);
+  const { closeRoot } = use(SubContext);
   const {
+    ref: forwardedRef,
+    className,
     children,
-    side = "bottom",
-    align = "center",
-    offset: offset$1,
-    loop = false,
-    modal = false,
-    // open state related props
-    open: controlledOpen,
-    onOpenChange,
-    defaultOpen
+    onSelect,
+    onClick,
+    onKeyDown,
+    closeOnSelect = true,
+    disabled = false,
+    ...rest
   } = props;
-  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-  const [activeIndex, setActiveIndex] = useState(null);
-  const [triggerType, setTriggerType] = useState(null);
-  const elementsRef = useRef([]);
-  const nodeId = useFloatingNodeId();
-  const { refs, floatingStyles, context, middlewareData } = useFloating({
-    nodeId,
-    strategy: "fixed",
-    placement: side + (align !== "center" ? "-" + align : ""),
-    whileElementsMounted: autoUpdate,
-    open,
-    onOpenChange: setOpen,
-    middleware: [
-      offset({ mainAxis: offset$1 ?? DEFAULT_OFFSET }),
-      size({
-        apply({ availableHeight, elements }) {
-          elements.floating.style.setProperty(
-            "--overmap-menu-available-height",
-            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
-          );
-        },
-        padding: MENU_OVERFLOW_PADDING
-      }),
-      flip({ fallbackStrategy: "initialPlacement" }),
-      shift({ padding: MENU_OVERFLOW_PADDING }),
-      hide()
-    ]
-  });
-  const role = useRole(context, {
-    role: "menu"
-  });
-  const dismiss = useDismiss(context, {
-    capture: true,
-    ancestorScroll: triggerType === "context" || triggerType === "virtual"
-  });
-  const click = useClick(context, {
-    enabled: triggerType === "click"
-  });
-  const listNavigation = useListNavigation(context, {
-    listRef: elementsRef,
-    activeIndex,
-    onNavigate: setActiveIndex,
-    loop
-  });
-  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
-    dismiss,
-    listNavigation,
-    click,
-    role
-  ]);
-  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(
-    MenuContext.Provider,
-    {
-      value: {
-        open,
-        setOpen,
-        refs,
-        context,
-        floatingStyles,
-        elementsRef,
-        getFloatingProps,
-        getItemProps,
-        getReferenceProps,
-        nodeId,
-        activeIndex,
-        setActiveIndex,
-        middlewareData,
-        side,
-        modal,
-        setTriggerType
-      },
+  const { ref, index } = useListItem();
+  const mergeRefs2 = useMergeRefs([ref, forwardedRef]);
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (disabled) return;
+      onClick == null ? void 0 : onClick(e);
+      onSelect == null ? void 0 : onSelect();
+      if (closeOnSelect) setOpen(false);
+      if (closeRoot) rootMenuContext.setOpen(false);
+    },
+    [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      onKeyDown == null ? void 0 : onKeyDown(e);
+      if (TRIGGER_SELECT_KEYS.includes(e.key)) {
+        onSelect == null ? void 0 : onSelect();
+        if (closeOnSelect) setOpen(false);
+      }
+    },
+    [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
+  );
+  const isActive = useMemo(() => index === activeIndex, [activeIndex, index]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
+  }, [children, isActive]);
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: cx(menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
+      ref: mergeRefs2,
+      role: "menuitem",
+      "data-disabled": getBooleanState(disabled),
+      "aria-disabled": disabled,
+      "data-highlighted": isActive ? "" : void 0,
+      ...getItemProps({
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: isActive ? 0 : -1,
+        ...rest
+      }),
+      children: computedChildren
+    }
+  );
+});
+MenuItem.displayName = "MenuItem";
+const MenuCheckboxItem = memo((props) => {
+  const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    switch (checked) {
+      case true:
+        onCheckedChange(false);
+        break;
+      case "indeterminate":
+      case false:
+        onCheckedChange(true);
+        break;
+    }
+  }, [checked, onCheckedChange, onSelect]);
+  return /* @__PURE__ */ jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, ...rest }) });
+});
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+const MenuCheckboxItemIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
+});
+MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
+const MenuClickTrigger = memo((props) => {
+  const { ref: forwardedRef, children, disabled = false } = props;
+  const { getReferenceProps, refs, setTriggerType, open } = use(MenuContext);
+  const mergedRefs = useMergeRefs([refs.setReference, forwardedRef]);
+  useEffect(() => {
+    setTriggerType("click");
+  }, [setTriggerType]);
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref: mergedRefs,
+      "aria-disabled": disabled,
+      "data-disabled": getBooleanState(disabled),
+      "data-state": getOpenState(open),
+      ...getReferenceProps({ disabled }),
       children
     }
-  ) });
+  );
 });
-MenuRoot.displayName = "Root";
-const MenuContentContext = createContext({});
-const useMenuContentContext = () => useContext(MenuContentContext);
+MenuClickTrigger.displayName = "MenuClickTrigger";
 const MenuContent = memo((props) => {
   var _a;
   const providerContext = useProvider();
@@ -3164,7 +2959,7 @@ const MenuContent = memo((props) => {
     floatingStyles,
     modal,
     side
-  } = useMenuContext();
+  } = use(MenuContext);
   const computedFloatingStyles = useMemo(() => {
     var _a2;
     return {
@@ -3236,254 +3031,48 @@ const MenuContent = memo((props) => {
   ) }) });
 });
 MenuContent.displayName = "Menu.Content";
-const SubContext = createContext({});
-const useSubContext = () => useContext(SubContext);
-const MenuSub = 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 = useFloatingNodeId();
-  const { refs, floatingStyles, context } = useFloating({
-    nodeId,
-    strategy: "fixed",
-    whileElementsMounted: autoUpdate,
-    open,
-    onOpenChange: (open2, _event, reason) => {
-      if (reason) setOpen(open2);
+const MenuContextTrigger = memo((props) => {
+  const { ref: forwardedRef, children, disabled = false } = props;
+  const ref = useRef(null);
+  const { setOpen, refs, setTriggerType, open } = use(MenuContext);
+  const mergedRefs = useMergeRefs([forwardedRef, ref]);
+  useEffect(() => {
+    setTriggerType("context");
+  }, [setTriggerType]);
+  const handleContextMenu = useCallback(
+    (e) => {
+      const { clientY, clientX } = e;
+      if (!disabled && ref.current) {
+        e.preventDefault();
+        refs.setPositionReference({
+          getBoundingClientRect() {
+            return {
+              x: clientX,
+              y: clientY,
+              top: clientY,
+              left: clientX,
+              height: 0,
+              width: 0,
+              bottom: clientY,
+              right: clientX
+            };
+          },
+          contextElement: ref.current
+        });
+        setOpen(true);
+      }
     },
-    placement: side + (align !== "center" ? "-" + align : ""),
-    middleware: [
-      offset({ ...computeOffsets(side, align) }),
-      size({
-        padding: MENU_OVERFLOW_PADDING,
-        apply({ availableHeight, elements }) {
-          elements.floating.style.setProperty(
-            "--overmap-menu-available-height",
-            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
-          );
-        }
-      }),
-      flip(),
-      shift({ padding: MENU_OVERFLOW_PADDING }),
-      hide()
-    ]
-  });
-  const dismiss = useDismiss(context, {
-    bubbles: closeRoot,
-    outsidePress: closeRoot
-  });
-  const hover = useHover(context, {
-    restMs: 50,
-    handleClose: safePolygon({
-      blockPointerEvents: true,
-      requireIntent: false
-    }),
-    enabled: !disabled
-  });
-  const click = useClick(context, {
-    enabled: !disabled
-  });
-  const elementsRef = useRef([]);
-  const [activeIndex, setActiveIndex] = useState(null);
-  const listNavigation = useListNavigation(context, {
-    listRef: elementsRef,
-    nested: true,
-    activeIndex,
-    onNavigate: setActiveIndex,
-    loop,
-    rtl: side === "left"
-  });
-  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
-    listNavigation,
-    dismiss,
-    hover,
-    click
-  ]);
+    [disabled, refs, setOpen]
+  );
   return /* @__PURE__ */ jsx(
-    SubContext.Provider,
+    Slot,
     {
-      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 = memo((props) => {
-  const rootMenuContext = useMenuContext();
-  const { getItemProps, activeIndex, setOpen, size: size2, variant, radius } = useMenuContentContext();
-  const { closeRoot } = useSubContext();
-  const {
-    ref: forwardedRef,
-    className,
-    children,
-    onSelect,
-    onClick,
-    onKeyDown,
-    closeOnSelect = true,
-    disabled = false,
-    ...rest
-  } = props;
-  const { ref, index } = useListItem();
-  const mergeRefs2 = useMergeRefs([ref, forwardedRef]);
-  const handleClick = useCallback(
-    (e) => {
-      e.stopPropagation();
-      if (disabled) return;
-      onClick == null ? void 0 : onClick(e);
-      onSelect == null ? void 0 : onSelect();
-      if (closeOnSelect) setOpen(false);
-      if (closeRoot) rootMenuContext.setOpen(false);
-    },
-    [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (disabled) return;
-      onKeyDown == null ? void 0 : onKeyDown(e);
-      if (TRIGGER_SELECT_KEYS.includes(e.key)) {
-        onSelect == null ? void 0 : onSelect();
-        if (closeOnSelect) setOpen(false);
-      }
-    },
-    [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
-  );
-  const isActive = useMemo(() => index === activeIndex, [activeIndex, index]);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
-  }, [children, isActive]);
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      className: cx(menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
-      ref: mergeRefs2,
-      role: "menuitem",
-      "data-disabled": getBooleanState(disabled),
-      "aria-disabled": disabled,
-      "data-highlighted": isActive ? "" : void 0,
-      ...getItemProps({
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        tabIndex: isActive ? 0 : -1,
-        ...rest
-      }),
-      children: computedChildren
-    }
-  );
-});
-MenuItem.displayName = "MenuItem";
-const MenuCheckboxItem = memo((props) => {
-  const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
-  const handleSelect = useCallback(() => {
-    onSelect == null ? void 0 : onSelect();
-    switch (checked) {
-      case true:
-        onCheckedChange(false);
-        break;
-      case "indeterminate":
-      case false:
-        onCheckedChange(true);
-        break;
-    }
-  }, [checked, onCheckedChange, onSelect]);
-  return /* @__PURE__ */ jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, ...rest }) });
-});
-MenuCheckboxItem.displayName = "MenuCheckboxItem";
-const MenuCheckboxItemIndicator = memo((props) => {
-  const { ref, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
-});
-MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
-const MenuClickTrigger = memo((props) => {
-  const { ref: forwardedRef, children, disabled = false } = props;
-  const { getReferenceProps, refs, setTriggerType, open } = useMenuContext();
-  const mergedRefs = useMergeRefs([refs.setReference, forwardedRef]);
-  useEffect(() => {
-    setTriggerType("click");
-  }, [setTriggerType]);
-  return /* @__PURE__ */ jsx(
-    Slot,
-    {
-      ref: mergedRefs,
-      "aria-disabled": disabled,
-      "data-disabled": getBooleanState(disabled),
-      "data-state": getOpenState(open),
-      ...getReferenceProps({ disabled }),
-      children
-    }
-  );
-});
-MenuClickTrigger.displayName = "MenuClickTrigger";
-const MenuContextTrigger = memo((props) => {
-  const { ref: forwardedRef, children, disabled = false } = props;
-  const ref = useRef(null);
-  const { setOpen, refs, setTriggerType, open } = useMenuContext();
-  const mergedRefs = useMergeRefs([forwardedRef, ref]);
-  useEffect(() => {
-    setTriggerType("context");
-  }, [setTriggerType]);
-  const handleContextMenu = useCallback(
-    (e) => {
-      const { clientY, clientX } = e;
-      if (!disabled && ref.current) {
-        e.preventDefault();
-        refs.setPositionReference({
-          getBoundingClientRect() {
-            return {
-              x: clientX,
-              y: clientY,
-              top: clientY,
-              left: clientX,
-              height: 0,
-              width: 0,
-              bottom: clientY,
-              right: clientX
-            };
-          },
-          contextElement: ref.current
-        });
-        setOpen(true);
-      }
-    },
-    [disabled, refs, setOpen]
-  );
-  return /* @__PURE__ */ jsx(
-    Slot,
-    {
-      ref: mergedRefs,
-      style: { WebkitTouchCallout: disabled ? "none" : "unset" },
-      "aria-disabled": disabled,
-      "data-disabled": getBooleanState(disabled),
-      "data-state": getOpenState(open),
-      onContextMenu: handleContextMenu,
+      ref: mergedRefs,
+      style: { WebkitTouchCallout: disabled ? "none" : "unset" },
+      "aria-disabled": disabled,
+      "data-disabled": getBooleanState(disabled),
+      "data-state": getOpenState(open),
+      onContextMenu: handleContextMenu,
       children
     }
   );
@@ -3496,7 +3085,7 @@ const MenuGroup = memo((props) => {
 MenuGroup.displayName = "MenuGroup";
 const MenuInputField = memo((props) => {
   const { ref: forwardedRef, className, onValueChange, onChange, disabled = false, ...rest } = props;
-  const { activeIndex, getItemProps } = useMenuContentContext();
+  const { activeIndex, getItemProps } = use(MenuContentContext);
   const { index, ref } = useListItem();
   const mergedRefs = useMergeRefs([ref, forwardedRef]);
   const handleChange = useCallback(
@@ -3529,7 +3118,7 @@ const MenuInputField = memo((props) => {
 MenuInputField.displayName = "MenuInputField";
 const MenuInputRoot = memo((props) => {
   const { ref, className, ...rest } = props;
-  const { size: size2 } = useMenuContentContext();
+  const { size: size2 } = use(MenuContentContext);
   return /* @__PURE__ */ jsx("div", { className: cx(inputRoot({ size: size2 }), className), ref, ...rest });
 });
 MenuInputRoot.displayName = "MenuInputRoot";
@@ -3540,7 +3129,7 @@ const MenuInputSlot = memo((props) => {
 MenuInputSlot.displayName = "MenuInputSlot";
 const MenuLabel = memo((props) => {
   const { ref, className, ...rest } = props;
-  const { size: size2 } = useMenuContentContext();
+  const { size: size2 } = use(MenuContentContext);
   return /* @__PURE__ */ jsx("div", { ref, className: cx(menuLabelCva({ size: size2 }), className), ...rest });
 });
 MenuLabel.displayName = "MenuLabel";
@@ -3548,29 +3137,6 @@ const MenuMultiSelectGroup = genericMemo(function MenuMultiSelectGroup2(props) {
   const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
   return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: /* @__PURE__ */ jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
 });
-const SelectedIndicatorContext = createContext(false);
-const useSelectedIndicatorContext = () => useContext(SelectedIndicatorContext);
-const MenuSelectedIndicator = memo((props) => {
-  const { ref, children, className, ...rest } = props;
-  const isSelected = useSelectedIndicatorContext();
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref,
-      className: 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 } = use(MultiSelectContext);
@@ -3599,7 +3165,12 @@ const MenuMultiSelectItem = genericMemo(function(props) {
   ) });
 });
 const PagesContext = createContext({});
-const usePagesContext = () => useContext(PagesContext);
+const MenuPageContent = memo((props) => {
+  const { page, children } = props;
+  const { activePage } = use(PagesContext);
+  return activePage === page ? children : null;
+});
+MenuPageContent.displayName = "PageContent";
 const MenuPages = memo((props) => {
   const { children, defaultPage, page, onPageChange } = props;
   const [activePage, setActivePage] = useControlledState(defaultPage ?? "", page, onPageChange);
@@ -3607,16 +3178,10 @@ const MenuPages = memo((props) => {
   return /* @__PURE__ */ jsx(PagesContext.Provider, { value: contextValue, children });
 });
 MenuPages.displayName = "MenuPages";
-const MenuPageContent = (props) => {
-  const { page, children } = props;
-  const { activePage } = usePagesContext();
-  return activePage === page ? children : null;
-};
-MenuPageContent.displayName = "PageContent";
 const MenuPageTrigger = memo((props) => {
   const { ref, onSelect, page, ...rest } = props;
-  const { refs, setActiveIndex } = useMenuContentContext();
-  const { setActivePage } = usePagesContext();
+  const { refs, setActiveIndex } = use(MenuContentContext);
+  const { setActivePage } = use(PagesContext);
   const handleSelect = useCallback(() => {
     var _a;
     onSelect == null ? void 0 : onSelect();
@@ -3627,6 +3192,100 @@ const MenuPageTrigger = memo((props) => {
   return /* @__PURE__ */ 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 = memo((props) => {
+  const {
+    children,
+    side = "bottom",
+    align = "center",
+    offset: offset$1,
+    loop = false,
+    modal = false,
+    // open state related props
+    open: controlledOpen,
+    onOpenChange,
+    defaultOpen
+  } = props;
+  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [triggerType, setTriggerType] = useState(null);
+  const elementsRef = useRef([]);
+  const nodeId = useFloatingNodeId();
+  const { refs, floatingStyles, context, middlewareData } = useFloating({
+    nodeId,
+    strategy: "fixed",
+    // TODO: probably some way with template string types to not need the "as Placement"
+    placement: side + (align !== "center" ? "-" + align : ""),
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: setOpen,
+    middleware: [
+      offset({ mainAxis: offset$1 ?? DEFAULT_OFFSET }),
+      size({
+        apply({ availableHeight, elements }) {
+          elements.floating.style.setProperty(
+            "--overmap-menu-available-height",
+            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
+          );
+        },
+        padding: MENU_OVERFLOW_PADDING
+      }),
+      flip({ fallbackStrategy: "initialPlacement" }),
+      shift({ padding: MENU_OVERFLOW_PADDING }),
+      hide()
+    ]
+  });
+  const role = useRole(context, {
+    role: "menu"
+  });
+  const dismiss = useDismiss(context, {
+    capture: true,
+    ancestorScroll: triggerType === "context" || triggerType === "virtual"
+  });
+  const click = useClick(context, {
+    enabled: triggerType === "click"
+  });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop
+  });
+  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
+    dismiss,
+    listNavigation,
+    click,
+    role
+  ]);
+  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ 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 = memo((props) => {
   const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx(
@@ -3656,18 +3315,821 @@ const MenuSelectAllItem = genericMemo((props) => {
   return /* @__PURE__ */ jsx(CheckedIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsx(
     MenuItem,
     {
-      onSelect: handleSelect,
-      ref,
-      "data-state": getCheckedState(selectedState),
-      closeOnSelect,
+      onSelect: handleSelect,
+      ref,
+      "data-state": getCheckedState(selectedState),
+      closeOnSelect,
+      ...rest,
+      children: computedChildren
+    }
+  ) });
+});
+const MenuSelectedIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ 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__ */ jsx(MenuGroup, { ref, ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
+    SingleSelectNotRequiredProvider,
+    {
+      defaultValue,
+      value,
+      onValueChange,
+      children
+    }
+  ) });
+});
+const MenuSelectItem = genericMemo(function(props) {
+  const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
+  const { selected, selectValue } = use(SelectContext);
+  const isSelected = selected(value);
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    selectValue(value);
+  }, [onSelect, selectValue, value]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
+  }, [children, isSelected]);
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ref,
+      role: "menuitemcheckbox",
+      onSelect: handleSelect,
+      closeOnSelect,
+      "data-state": getSelectedState(isSelected),
+      ...rest,
+      children: computedChildren
+    }
+  ) });
+});
+const MenuSeparator = memo((props) => {
+  const { ref, className, ...rest } = props;
+  const { size: size2 } = use(MenuContentContext);
+  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(menuSeparator({ size: size2 }), 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 = 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 = useFloatingNodeId();
+  const { refs, floatingStyles, context } = useFloating({
+    nodeId,
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: (open2, _event, reason) => {
+      if (reason) setOpen(open2);
+    },
+    placement: side + (align !== "center" ? "-" + align : ""),
+    middleware: [
+      offset({ ...computeOffsets(side, align) }),
+      size({
+        padding: MENU_OVERFLOW_PADDING,
+        apply({ availableHeight, elements }) {
+          elements.floating.style.setProperty(
+            "--overmap-menu-available-height",
+            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
+          );
+        }
+      }),
+      flip(),
+      shift({ padding: MENU_OVERFLOW_PADDING }),
+      hide()
+    ]
+  });
+  const dismiss = useDismiss(context, {
+    bubbles: closeRoot,
+    outsidePress: closeRoot
+  });
+  const hover = useHover(context, {
+    restMs: 50,
+    handleClose: safePolygon({
+      blockPointerEvents: true,
+      requireIntent: false
+    }),
+    enabled: !disabled
+  });
+  const click = useClick(context, {
+    enabled: !disabled
+  });
+  const elementsRef = useRef([]);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    nested: true,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop,
+    rtl: side === "left"
+  });
+  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
+    listNavigation,
+    dismiss,
+    hover,
+    click
+  ]);
+  return /* @__PURE__ */ 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 = memo((props) => {
+  var _a;
+  const { ref: forwardedRef, children, ...rest } = props;
+  const { middlewareData } = use(MenuContext);
+  const { accentColor, radius, variant, size: size2 } = use(MenuContentContext);
+  const {
+    open,
+    nodeId,
+    refs,
+    context,
+    getFloatingProps,
+    getItemProps,
+    activeIndex,
+    setActiveIndex,
+    elementsRef,
+    floatingStyles,
+    setOpen,
+    side
+  } = use(SubContext);
+  const wrapperRef = useRef(null);
+  const mergeRefs2 = useMergeRefs([refs.setFloating, wrapperRef]);
+  const computedFloatingStyles = 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__ */ jsx(FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, initialFocus: wrapperRef, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
+    MenuContentContext.Provider,
+    {
+      value: {
+        getItemProps,
+        activeIndex,
+        setActiveIndex,
+        elementsRef,
+        open,
+        setOpen,
+        refs,
+        size: size2,
+        radius,
+        accentColor,
+        variant
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "outline-none",
+          ref: mergeRefs2,
+          style: computedFloatingStyles,
+          ...getFloatingProps(),
+          children: /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: cx(
+                "overmap-menu-sub-content",
+                menuContent({ size: size2 }),
+                floating({ side, shadow: "3" }),
+                radiusCva({ radius, maxLarge: true }),
+                "max-h-(--overmap-menu-available-height)"
+              ),
+              ref: forwardedRef,
+              "data-state": getOpenState(open),
+              "data-side": side,
+              "data-accent-color": accentColor,
+              ...rest,
+              children
+            }
+          )
+        }
+      )
+    }
+  ) }) }) }) });
+});
+MenuSubContent.displayName = "MenuSubContent";
+const MenuSubTrigger = memo((props) => {
+  const { ref: forwardedRef, children, ...rest } = props;
+  const { refs, getReferenceProps, open, disabled } = use(SubContext);
+  const mergedRefs = useMergeRefs([forwardedRef, refs.setReference]);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ref: mergedRefs,
+      closeOnSelect: false,
+      "aria-haspopup": "menu",
+      "data-state": getOpenState(open),
+      disabled,
+      ...getReferenceProps(rest),
+      children
+    }
+  );
+});
+MenuSubTrigger.displayName = "MenuSubTrigger";
+const MenuVirtualTrigger = memo((props) => {
+  const { virtualElement, disabled } = props;
+  const { refs, setTriggerType, setOpen } = use(MenuContext);
+  useEffect(() => {
+    setTriggerType("virtual");
+  }, [setTriggerType]);
+  useEffect(() => {
+    if (!disabled && virtualElement) {
+      refs.setPositionReference(virtualElement);
+      setOpen(true);
+    } else {
+      refs.setPositionReference(null);
+      setOpen(false);
+    }
+  }, [disabled, refs, setOpen, virtualElement]);
+  return null;
+});
+MenuVirtualTrigger.displayName = "VirtualTrigger";
+const Menu = {
+  Root: MenuRoot,
+  Content: MenuContent,
+  // sub
+  Sub: MenuSub,
+  SubContent: MenuSubContent,
+  SubTrigger: MenuSubTrigger,
+  // pages
+  Pages: MenuPages,
+  PageContent: MenuPageContent,
+  PageTrigger: MenuPageTrigger,
+  // triggers
+  ClickTrigger: MenuClickTrigger,
+  ContextTrigger: MenuContextTrigger,
+  VirtualTrigger: MenuVirtualTrigger,
+  // groups
+  Group: MenuGroup,
+  SelectGroup: MenuSelectGroup,
+  MultiSelectGroup: MenuMultiSelectGroup,
+  // items
+  Item: MenuItem,
+  SelectItem: MenuSelectItem,
+  MultiSelectItem: MenuMultiSelectItem,
+  SelectAllItem: MenuSelectAllItem,
+  CheckboxItem: MenuCheckboxItem,
+  // indicators
+  SelectedIndicator: MenuSelectedIndicator,
+  CheckboxItemIndicator: MenuCheckboxItemIndicator,
+  // input
+  InputRoot: MenuInputRoot,
+  InputField: MenuInputField,
+  InputSlot: MenuInputSlot,
+  // others
+  Label: MenuLabel,
+  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 = createContext({});
+const MenuGroupContext = createContext({});
+const MenuPageContext = createContext({});
+const menuRootCva = 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 = 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 = 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 = 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 = memo((props) => {
+  const {
+    ref,
+    children,
+    className,
+    disabled = false,
+    onClick,
+    onSelect,
+    onPointerEnter,
+    onPointerLeave,
+    onPointerMove,
+    ...rest
+  } = props;
+  const internalRef = useRef(null);
+  const itemId = useId();
+  const { activeItemId, setActiveItemId, size: size2, variant, radius } = use(MenuRootContext);
+  const isActive = itemId === activeItemId;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+    },
+    [onSelect]
+  );
+  const handleClick = useCallback(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      handleSelect(new Event("menu-select"));
+    },
+    [handleSelect, onClick]
+  );
+  const handlePointerEnter = useCallback(
+    (e) => {
+      onPointerEnter == null ? void 0 : onPointerEnter(e);
+      if (e.defaultPrevented) return;
+      setActiveItemId(itemId);
+    },
+    [onPointerEnter, setActiveItemId, itemId]
+  );
+  const handlePointerLeave = useCallback(
+    (e) => {
+      onPointerLeave == null ? void 0 : onPointerLeave(e);
+      if (e.defaultPrevented) return;
+      setActiveItemId(null);
+    },
+    [onPointerLeave, setActiveItemId]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      onPointerMove == null ? void 0 : onPointerMove(e);
+      if (e.defaultPrevented) return;
+      setActiveItemId(itemId);
+    },
+    [onPointerMove, itemId, setActiveItemId]
+  );
+  useEffect(() => {
+    if (!internalRef.current) return;
+    const element = internalRef.current;
+    element.addEventListener("menu-select", handleSelect);
+    return () => {
+      element.removeEventListener("menu-select", handleSelect);
+    };
+  }, [handleSelect]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: mergeRefs([ref, internalRef]),
+      className: cx(menuItemCva({ size: size2, 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 = memo((props) => {
+  const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
+  const handleSelect = 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__ */ jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(MenuV2Item, { ref, onSelect: handleSelect, ...rest }) });
+});
+MenuV2CheckboxItem.displayName = "MenuCheckboxItem";
+const MenuV2CheckedIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
+});
+MenuV2CheckedIndicator.displayName = "MenuCheckboxItemIndicator";
+const MenuV2Group = memo((props) => {
+  const { ref, children, ...rest } = props;
+  const groupId = useId();
+  const [labelId, setLabelId] = useState(null);
+  const contextValue = useMemo(
+    () => ({
+      labelId,
+      setLabelId
+    }),
+    [labelId]
+  );
+  return /* @__PURE__ */ jsx("div", { ref, role: "group", ...{ [GROUP_SELECTOR]: groupId }, "aria-labelledby": labelId ?? void 0, ...rest, children: /* @__PURE__ */ jsx(MenuGroupContext, { value: contextValue, children }) });
+});
+MenuV2Group.displayName = "MenuGroup";
+const MenuV2GroupLabel = memo((props) => {
+  const { ref, children, id, className, ...rest } = props;
+  const labelId = useFallbackId(id);
+  const { size: size2 } = use(MenuRootContext);
+  const { setLabelId } = use(MenuGroupContext);
+  useEffect(() => {
+    setLabelId(labelId);
+  }, [labelId, setLabelId]);
+  return /* @__PURE__ */ jsx("div", { ref, id: labelId, className: cx(menuGroupLabelCva({ size: size2 }), className), ...rest, children });
+});
+MenuV2GroupLabel.displayName = "MenuGroupLabel";
+const MenuV2SelectAllItem = genericMemo((props) => {
+  const { ref, children, onSelect, ...rest } = props;
+  const { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
+  const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      toggleSelectAll();
+    },
+    [onSelect, toggleSelectAll]
+  );
+  return /* @__PURE__ */ jsx(MenuV2Item, { onSelect: handleSelect, ref, "data-state": getCheckedState(selectedState), ...rest, children: /* @__PURE__ */ jsx(CheckedIndicatorContext, { value: selectedState, children }) });
+});
+const MenuV2MultiSelectGroup = genericMemo(function MenuMultiSelectGroup3(props) {
+  const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(MenuV2Group, { ref, ...rest, children: /* @__PURE__ */ jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
+});
+const MenuV2MultiSelectItem = genericMemo(function(props) {
+  const { ref, onSelect, children, value, ...rest } = props;
+  const { selected, selectValue, registerValue } = use(MultiSelectContext);
+  useLayoutEffect(() => {
+    return registerValue(value);
+  }, [registerValue, value]);
+  const isSelected = selected(value);
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      selectValue(value);
+    },
+    [onSelect, selectValue, value]
+  );
+  return /* @__PURE__ */ jsx(
+    MenuV2Item,
+    {
+      ref,
+      role: "menuitemcheckbox",
+      onSelect: handleSelect,
+      "data-state": getSelectedState(isSelected),
+      ...rest,
+      children: /* @__PURE__ */ jsx(SelectedIndicatorContext, { value: isSelected, children })
+    }
+  );
+});
+const MenuV2Page = memo((props) => {
+  const { children, ref, page, ...rest } = props;
+  const { page: activePage } = use(MenuPageContext);
+  const isActive = page === activePage;
+  return /* @__PURE__ */ jsx("div", { ref, "data-active": getActiveState(isActive), hidden: !isActive, ...rest, children: isActive ? children : null });
+});
+MenuV2Page.displayName = "MenuPage";
+const MenuV2Pages = memo((props) => {
+  const { children, defaultPage = "", page: controlledPage, onPageChange } = props;
+  const [page, setPage] = useControlledState(defaultPage, controlledPage, onPageChange);
+  const contextValue = useMemo(
+    () => ({
+      page,
+      setPage
+    }),
+    [page, setPage]
+  );
+  return /* @__PURE__ */ jsx(MenuPageContext, { value: contextValue, children });
+});
+MenuV2Pages.displayName = "MenuPages";
+const MenuV2PageTriggerItem = memo((props) => {
+  const { ref, children, page, onSelect, ...rest } = props;
+  const { page: activePage, setPage } = use(MenuPageContext);
+  const isActive = page === activePage;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      setPage(page);
+    },
+    [onSelect, page, setPage]
+  );
+  return /* @__PURE__ */ jsx(MenuV2Item, { ref, onSelect: handleSelect, "data-state": getActiveState(isActive), ...rest, children: /* @__PURE__ */ 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 = memo((props) => {
+  const providerContext = useProvider();
+  const {
+    ref,
+    children,
+    className,
+    onKeyDown,
+    loop = false,
+    // style props
+    radius = providerContext.radius,
+    accentColor = "base",
+    size: size2 = "md",
+    variant = "soft",
+    ...rest
+  } = props;
+  const internalRef = useRef(null);
+  const [activeItemId, setActiveItemId] = useState(null);
+  const getItems = useCallback((element) => {
+    return Array.from(element.querySelectorAll(`[${ITEM_SELECTOR}]:not([data-disabled=true]`));
+  }, []);
+  const getFirstItem = useCallback(
+    (element) => {
+      return getItems(element).at(0);
+    },
+    [getItems]
+  );
+  const getLastItem = useCallback(
+    (element) => {
+      return getItems(element).at(-1);
+    },
+    [getItems]
+  );
+  const getActiveItem = useCallback(
+    (element) => {
+      return getItems(element).find((itemEle) => itemEle.getAttribute(ITEM_SELECTOR) === activeItemId);
+    },
+    [activeItemId, getItems]
+  );
+  const getNextItem = 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 = useCallback(() => {
+    if (!internalRef.current) return [];
+    return Array.from(internalRef.current.querySelectorAll(`[${GROUP_SELECTOR}]`));
+  }, []);
+  const getActiveGroup = useCallback(() => {
+    var _a;
+    return ((_a = getActiveItem(internalRef.current)) == null ? void 0 : _a.closest(`[${GROUP_SELECTOR}]`)) ?? void 0;
+  }, [getActiveItem]);
+  const getNextGroup = 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 = useCallback(() => {
+    return getGroups().at(0);
+  }, [getGroups]);
+  const getLastGroup = useCallback(() => {
+    return getGroups().at(-1);
+  }, [getGroups]);
+  const handleKeyDown = 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]
+  );
+  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 = useMemo(
+    () => ({
+      activeItemId,
+      setActiveItemId,
+      // style props
+      accentColor,
+      radius,
+      variant,
+      size: size2
+    }),
+    [accentColor, activeItemId, radius, size2, variant]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: mergeRefs([ref, internalRef]),
+      className: cx(menuRootCva({ size: size2 }), radiusCva({ radius, maxLarge: true }), className),
+      role: "menu",
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      "aria-activedescendant": activeItemId ?? void 0,
+      "data-accent-color": accentColor,
       ...rest,
-      children: computedChildren
+      children: /* @__PURE__ */ jsx(MenuRootContext, { value: contextValue, children })
     }
-  ) });
+  );
 });
-const MenuSelectGroup = genericMemo(function MenuSelectGroup2(props) {
+MenuV2Root.displayName = "MenuRoot";
+const MenuV2SelectedIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(SelectedIndicator, { ref, ...rest, children });
+});
+MenuV2SelectedIndicator.displayName = "MenuCheckboxItemIndicator";
+const MenuV2SelectGroup = genericMemo(function MenuSelectGroup3(props) {
   const { ref, children, required, defaultValue, value, onValueChange, ...rest } = props;
-  return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(MenuV2Group, { ref, ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
     SingleSelectNotRequiredProvider,
     {
       defaultValue,
@@ -3677,183 +4139,53 @@ const MenuSelectGroup = genericMemo(function MenuSelectGroup2(props) {
     }
   ) });
 });
-const MenuSelectItem = genericMemo(function(props) {
-  const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
+const MenuV2SelectItem = genericMemo(function(props) {
+  const { ref, value, onSelect, children, ...rest } = props;
   const { selected, selectValue } = use(SelectContext);
-  const isSelected = useMemo(() => selected(value), [selected, value]);
-  const handleSelect = useCallback(() => {
-    onSelect == null ? void 0 : onSelect();
-    selectValue(value);
-  }, [onSelect, selectValue, value]);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
-  }, [children, isSelected]);
-  return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
-    MenuItem,
+  const isSelected = selected(value);
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      selectValue(value);
+    },
+    [onSelect, selectValue, value]
+  );
+  return /* @__PURE__ */ jsx(
+    MenuV2Item,
     {
       ref,
       role: "menuitemcheckbox",
       onSelect: handleSelect,
-      closeOnSelect,
       "data-state": getSelectedState(isSelected),
       ...rest,
-      children: computedChildren
-    }
-  ) });
-});
-const MenuSeparator = memo((props) => {
-  const { ref, className, ...rest } = props;
-  const { size: size2 } = useMenuContentContext();
-  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(menuSeparator({ size: size2 }), className), ref, ...rest });
-});
-MenuSeparator.displayName = "MenuSeparator";
-const MenuSubContent = memo((props) => {
-  var _a;
-  const { ref: forwardedRef, children, ...rest } = props;
-  const { middlewareData } = useMenuContext();
-  const { accentColor, radius, variant, size: size2 } = useMenuContentContext();
-  const {
-    open,
-    nodeId,
-    refs,
-    context,
-    getFloatingProps,
-    getItemProps,
-    activeIndex,
-    setActiveIndex,
-    elementsRef,
-    floatingStyles,
-    setOpen,
-    side
-  } = useSubContext();
-  const wrapperRef = useRef(null);
-  const mergeRefs2 = useMergeRefs([refs.setFloating, wrapperRef]);
-  const computedFloatingStyles = 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__ */ jsx(FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, initialFocus: wrapperRef, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
-    MenuContentContext.Provider,
-    {
-      value: {
-        getItemProps,
-        activeIndex,
-        setActiveIndex,
-        elementsRef,
-        open,
-        setOpen,
-        refs,
-        size: size2,
-        radius,
-        accentColor,
-        variant
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "outline-none",
-          ref: mergeRefs2,
-          style: computedFloatingStyles,
-          ...getFloatingProps(),
-          children: /* @__PURE__ */ jsx(
-            "ul",
-            {
-              className: cx(
-                "overmap-menu-sub-content",
-                menuContent({ size: size2 }),
-                floating({ side, shadow: "3" }),
-                radiusCva({ radius, maxLarge: true }),
-                "max-h-(--overmap-menu-available-height)"
-              ),
-              ref: forwardedRef,
-              "data-state": getOpenState(open),
-              "data-side": side,
-              "data-accent-color": accentColor,
-              ...rest,
-              children
-            }
-          )
-        }
-      )
-    }
-  ) }) }) }) });
-});
-MenuSubContent.displayName = "MenuSubContent";
-const MenuSubTrigger = memo((props) => {
-  const { ref: forwardedRef, children, ...rest } = props;
-  const { refs, getReferenceProps, open, disabled } = useSubContext();
-  const mergedRefs = useMergeRefs([forwardedRef, refs.setReference]);
-  return /* @__PURE__ */ jsx(
-    MenuItem,
-    {
-      ref: mergedRefs,
-      closeOnSelect: false,
-      "aria-haspopup": "menu",
-      "data-state": getOpenState(open),
-      disabled,
-      ...getReferenceProps(rest),
-      children
+      children: /* @__PURE__ */ jsx(SelectedIndicatorContext, { value: isSelected, children })
     }
   );
 });
-MenuSubTrigger.displayName = "MenuSubTrigger";
-const MenuVirtualTrigger = memo((props) => {
-  const { virtualElement, disabled } = props;
-  const { refs, setTriggerType, setOpen } = useMenuContext();
-  useEffect(() => {
-    setTriggerType("virtual");
-  }, [setTriggerType]);
-  useEffect(() => {
-    if (!disabled && virtualElement) {
-      refs.setPositionReference(virtualElement);
-      setOpen(true);
-    } else {
-      refs.setPositionReference(null);
-      setOpen(false);
-    }
-  }, [disabled, refs, setOpen, virtualElement]);
-  return null;
-});
-MenuVirtualTrigger.displayName = "VirtualTrigger";
-const Menu = {
-  Root: MenuRoot,
-  Content: MenuContent,
-  // sub
-  Sub: MenuSub,
-  SubContent: MenuSubContent,
-  SubTrigger: MenuSubTrigger,
-  // pages
-  Pages: MenuPages,
-  PageContent: MenuPageContent,
-  PageTrigger: MenuPageTrigger,
-  // triggers
-  ClickTrigger: MenuClickTrigger,
-  ContextTrigger: MenuContextTrigger,
-  VirtualTrigger: MenuVirtualTrigger,
-  // groups
-  Group: MenuGroup,
-  SelectGroup: MenuSelectGroup,
-  MultiSelectGroup: MenuMultiSelectGroup,
-  // items
-  Item: MenuItem,
-  SelectItem: MenuSelectItem,
-  MultiSelectItem: MenuMultiSelectItem,
-  SelectAllItem: MenuSelectAllItem,
-  CheckboxItem: MenuCheckboxItem,
-  // indicators
-  SelectedIndicator: MenuSelectedIndicator,
-  CheckboxItemIndicator: MenuCheckboxItemIndicator,
-  // input
-  InputRoot: MenuInputRoot,
-  InputField: MenuInputField,
-  InputSlot: MenuInputSlot,
-  // others
-  Label: MenuLabel,
-  Separator: MenuSeparator,
-  Scroll: MenuScroll
+const MenuV2Separator = memo((props) => {
+  const { ref, className, ...rest } = props;
+  const { size: size2 } = use(MenuRootContext);
+  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(menuSeparatorCva({ size: size2 }), 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 = memo((props) => {
   return /* @__PURE__ */ jsx(RadixOneTimePasswordField.HiddenInput, { ...props });
@@ -4050,6 +4382,95 @@ const OvermapErrorBoundary = memo((props) => {
   );
 });
 OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
+const PhoneNumberInputContext = createContext({});
+const FlagComponent = memo((props) => {
+  const { country } = props;
+  return country ? country : /* @__PURE__ */ jsx(PhoneIcon, { size: 16 });
+});
+FlagComponent.displayName = "FlagComponent";
+const CountrySelect = memo((props) => {
+  const { disabled, value, onChange, options } = props;
+  const { radius, size: size2, variant, accentColor } = use(PhoneNumberInputContext);
+  const handleSelect = useCallback(
+    (e) => {
+      onChange(e.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: "relative",
+      accentColor,
+      radius,
+      size: size2,
+      variant,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            disabled,
+            value,
+            onChange: handleSelect,
+            className: "absolute inset-0 text-sm opacity-0",
+            "aria-label": "Select country",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select a country" }, "default"),
+              options.filter((x) => x.value).map((option, i) => /* @__PURE__ */ jsxs("option", { value: option.value, children: [
+                option.label,
+                " ",
+                option.value && `+${getCountryCallingCode(option.value)}`
+              ] }, option.value ?? `empty-${i}`))
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+CountrySelect.displayName = "CountrySelect";
+const InputComponent = memo((props) => {
+  const { accentColor, radius, size: size2, variant } = use(PhoneNumberInputContext);
+  return /* @__PURE__ */ jsx(Input.Root, { variant, size: size2, radius, accentColor, children: /* @__PURE__ */ jsx(Input.Field, { ...props }) });
+});
+InputComponent.displayName = "InputComponent";
+const PhoneNumberInput = memo((props) => {
+  const providerContext = useProvider();
+  const {
+    ref,
+    className,
+    size: size2 = "md",
+    variant = "outline",
+    radius = providerContext.radius,
+    accentColor = providerContext.accentColor,
+    ...rest
+  } = props;
+  const contextValue = useMemo(
+    () => ({
+      size: size2,
+      variant,
+      radius,
+      accentColor
+    }),
+    [accentColor, radius, size2, variant]
+  );
+  return /* @__PURE__ */ jsx(PhoneNumberInputContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    PhoneInput,
+    {
+      ref,
+      className: cx(className, "flex gap-1"),
+      flagComponent: FlagComponent,
+      countrySelectComponent: CountrySelect,
+      inputComponent: InputComponent,
+      "data-accent-color": accentColor,
+      ...rest
+    }
+  ) });
+});
+PhoneNumberInput.displayName = "PhoneNumberInput";
 const PopoverArrow = memo((props) => {
   const { ref, children, className, ...rest } = props;
   return /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest, children });
@@ -4373,6 +4794,65 @@ const RadioGroup = {
   Item: RadioGroupItem,
   Root: RadioGroupRoot
 };
+const RatingRootContext = createContext({});
+const RatingItemContext = createContext({});
+const RatingItem = memo((props) => {
+  const { ref, children, value, ...rest } = props;
+  const { value: activeValue } = use(RatingRootContext);
+  const active = !!activeValue && value <= activeValue;
+  const contextValue = useMemo(() => ({ value }), [value]);
+  return /* @__PURE__ */ jsx(RadixRadioGroup.Item, { ref, value: value.toString(), "data-active": active, ...rest, children: /* @__PURE__ */ jsx(RatingItemContext, { value: contextValue, children }) });
+});
+RatingItem.displayName = "RatingItem";
+const RatingItemIndicator = memo((props) => {
+  const { ref, children, forceMount, ...rest } = props;
+  const { value: activeValue } = use(RatingRootContext);
+  const { value } = use(RatingItemContext);
+  const active = !!activeValue && value <= activeValue;
+  return /* @__PURE__ */ jsx(
+    RadixRadioGroup.Indicator,
+    {
+      ref,
+      forceMount: forceMount ?? (active || void 0),
+      "data-active": active,
+      ...rest,
+      children
+    }
+  );
+});
+RatingItemIndicator.displayName = "RatingItemIndicator";
+const RatingRoot = memo((props) => {
+  const { ref, children, defaultValue, value: controlledValue, onValueChange, ...rest } = props;
+  const [value, setValue] = useControlledState(defaultValue ?? null, controlledValue, onValueChange);
+  const handleValueChange = useCallback(
+    (value2) => {
+      setValue(parseInt(value2));
+    },
+    [setValue]
+  );
+  const contextValue = useMemo(
+    () => ({
+      value
+    }),
+    [value]
+  );
+  return /* @__PURE__ */ jsx(
+    RadixRadioGroup.Root,
+    {
+      ref,
+      value: value ? value.toString() : null,
+      onValueChange: handleValueChange,
+      ...rest,
+      children: /* @__PURE__ */ jsx(RatingRootContext, { value: contextValue, children })
+    }
+  );
+});
+RatingRoot.displayName = "RatingRoot";
+const Rating = {
+  Item: RatingItem,
+  ItemIndicator: RatingItemIndicator,
+  Root: RatingRoot
+};
 const segmentedControlRootCva = cva(
   ["shrink-0", "transition-colors", "inline-flex", "box-border", "min-w-max", "text-center"],
   {
@@ -6150,7 +6630,6 @@ export {
   CheckboxGroupSelectAllItem,
   CheckboxIndicator,
   CheckboxRoot,
-  CollapsibleTree,
   CommandMenu,
   CommandMenuCheckboxIndicator,
   CommandMenuCheckboxItem,
@@ -6225,6 +6704,23 @@ export {
   MenuSub,
   MenuSubContent,
   MenuSubTrigger,
+  MenuV2,
+  MenuV2CheckboxItem,
+  MenuV2CheckedIndicator,
+  MenuV2Group,
+  MenuV2GroupLabel,
+  MenuV2Item,
+  MenuV2MultiSelectGroup,
+  MenuV2MultiSelectItem,
+  MenuV2Page,
+  MenuV2PageTriggerItem,
+  MenuV2Pages,
+  MenuV2Root,
+  MenuV2SelectAllItem,
+  MenuV2SelectGroup,
+  MenuV2SelectItem,
+  MenuV2SelectedIndicator,
+  MenuV2Separator,
   MenuVirtualTrigger,
   OneTimePasswordField,
   OneTimePasswordFieldHiddenInput,
@@ -6238,6 +6734,7 @@ export {
   OverlayTitle,
   OverlayTrigger,
   OvermapErrorBoundary,
+  PhoneNumberInput,
   Popover,
   PopoverArrow,
   PopoverContent,
@@ -6250,6 +6747,10 @@ export {
   RadioGroupIndicator,
   RadioGroupItem,
   RadioGroupRoot,
+  Rating,
+  RatingItem,
+  RatingItemIndicator,
+  RatingRoot,
   SegmentedControl,
   SegmentedControlItem,
   SegmentedControlRoot,
@@ -6257,7 +6758,6 @@ export {
   SegmentedTabsList,
   SegmentedTabsRoot,
   SegmentedTabsTrigger,
-  SelectedIndicatorContext,
   Separator,
   SlideOut,
   Slider,
@@ -6294,6 +6794,12 @@ export {
   badge,
   buttonCva,
   floating,
+  genericMemo,
+  getActiveState,
+  getBooleanState,
+  getCheckedState,
+  getOpenState,
+  getSelectedState,
   mergeRefs,
   radiusCva,
   stopPropagation,
@@ -6301,15 +6807,9 @@ export {
   useAlertDialog,
   useButtonGroup,
   useControlledState,
+  useFallbackId,
   useLayoutContext,
-  useMenuContentContext,
-  useMenuContext,
-  usePagesContext,
   useProvider,
-  useSelectedIndicatorContext,
-  useSize,
-  useStopEventPropagation,
-  useSubContext,
   useTextFilter,
   useToast,
   useViewportSize