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

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("@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) {
+  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("react-phone-number-input"), require("lucide-react"), require("react-phone-number-input/min"), 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", "react-phone-number-input", "lucide-react", "react-phone-number-input/min", "@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.PhoneInput, global.lucideReact, global.min, 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, PhoneInput, lucideReact, min, 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,10 +19,8 @@
     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);
@@ -103,17 +101,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
@@ -180,7 +178,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: [
@@ -198,18 +196,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,
@@ -219,7 +217,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const value = React.useMemo(
+    const value = react.useMemo(
       () => ({
         variant,
         size,
@@ -231,7 +229,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",
@@ -385,7 +383,7 @@
       }
     }
   );
-  const Button = React.memo((props) => {
+  const Button = react.memo((props) => {
     const providerContext = useProvider();
     const buttonsContext = useButtonGroup();
     const {
@@ -410,7 +408,7 @@
     );
   });
   Button.displayName = "Button";
-  const IconButton = React.memo((props) => {
+  const IconButton = react.memo((props) => {
     const providerContext = useProvider();
     const buttonsContext = useButtonGroup();
     const {
@@ -435,11 +433,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);
@@ -448,7 +446,7 @@
       },
       [options]
     );
-    const openAlertDialog = React.useCallback(
+    const openAlertDialog = react.useCallback(
       (config) => {
         if (open) throw new Error("AlertDialog is already open");
         setOpen(true);
@@ -485,7 +483,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: {
@@ -513,13 +511,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,
@@ -531,7 +529,7 @@
     );
   });
   AvatarImage.displayName = "AvatarImage";
-  const AvatarRoot = React.memo((props) => {
+  const AvatarRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -639,7 +637,7 @@
       icon: false
     }
   });
-  const Badge = React.memo((props) => {
+  const Badge = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -684,7 +682,7 @@
       variant: "surface"
     }
   });
-  const Card = React.memo((props) => {
+  const Card = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -708,7 +706,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,
@@ -764,7 +762,7 @@
       }
     }
   );
-  const CheckboxRoot = React.memo((props) => {
+  const CheckboxRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -792,94 +790,18 @@
     Root: CheckboxRoot,
     Indicator: CheckboxIndicator
   };
-  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 SelectContext = react.createContext({});
+  const MultiSelectContext = react.createContext({});
   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";
@@ -887,69 +809,58 @@
     }, [lg, md, sm, xl, xs]);
     return { size, prevSize, xs, sm, md, lg, xl };
   };
-  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]);
+  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]);
     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 {
+      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();
@@ -960,11 +871,26 @@
   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);
@@ -978,8 +904,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));
@@ -989,20 +915,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]
     );
@@ -1011,51 +937,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(
@@ -1075,15 +1001,12 @@
     );
   });
   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";
-  function getBooleanState$1(value) {
-    return value ? "true" : "false";
-  }
-  const CheckboxGroupRoot = React.memo((props) => {
+  const CheckboxGroupRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -1100,25 +1023,27 @@
       size = "md",
       ...rest
     } = props;
-    const contextValue = React.useMemo(
+    const contextValue = react.useMemo(
       () => ({
         name,
         required,
         disabled,
+        // style props
+        accentColor,
         size,
         variant,
         radius
       }),
-      [disabled, name, radius, required, size, variant]
+      [accentColor, disabled, name, radius, required, size, variant]
     );
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
           MultiSelectProvider,
@@ -1133,19 +1058,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(
@@ -1170,137 +1095,39 @@
     SelectAllItem: CheckboxGroupSelectAllItem,
     ItemIndicator: CheckboxGroupItemIndicator
   };
-  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]);
+  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;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         ref,
-        "data-state": getCheckedState$1(checkedState),
         className: classVarianceAuthority.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 = 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",
@@ -1509,11 +1336,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);
@@ -1531,16 +1358,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$1(checked), ...rest, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState(checked), ...rest, children }) });
   });
   CommandMenuCheckboxItem.displayName = "CommandMenuCheckboxItem";
-  const CommandMenuContent = React.memo((props) => {
+  const CommandMenuContent = react.memo((props) => {
     const providerContext = useProvider();
     const {
       children,
@@ -1560,13 +1387,14 @@
       radius = providerContext.radius,
       ...rest
     } = props;
-    const contextValue = React.useMemo(() => {
+    const contextValue = react.useMemo(() => {
       return {
         variant,
         size,
-        radius
+        radius,
+        accentColor
       };
-    }, [radius, size, variant]);
+    }, [accentColor, radius, size, variant]);
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       RadixDialog.DialogContent,
       {
@@ -1596,27 +1424,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,
@@ -1639,11 +1467,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]);
@@ -1653,7 +1481,7 @@
       {
         ref,
         onSelect: handleSelect,
-        "data-state": getSelectedState$1(isSelected),
+        "data-state": getSelectedState(isSelected),
         "aria-selected": isSelected,
         closeOnSelect,
         ...rest,
@@ -1661,29 +1489,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]);
@@ -1721,18 +1549,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$1(isSelected), ...rest, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState(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
@@ -1743,8 +1571,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]);
@@ -1755,43 +1583,47 @@
         ref,
         role: "menuitemcheckbox",
         onSelect: handleSelect,
-        "data-state": getCheckedState$1(selectedState),
+        "data-state": getCheckedState(selectedState),
         closeOnSelect,
         ...rest
       }
     ) });
   });
-  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]);
+  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;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         ref,
-        "data-state": getSelectedState$1(isSelected),
         className: classVarianceAuthority.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 = 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";
@@ -1822,7 +1654,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 });
   });
@@ -1978,7 +1810,7 @@
       }
     }
   });
-  const DayPicker = React.memo((props) => {
+  const DayPicker = react.memo((props) => {
     const providerContext = useProvider();
     const {
       components,
@@ -1990,7 +1822,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 })),
@@ -2020,7 +1852,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
@@ -2038,19 +1870,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(
@@ -2065,7 +1897,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,
@@ -2079,7 +1911,7 @@
     ) });
   });
   DialogOverlay.displayName = "DialogOverlay";
-  const DialogRoot = React.memo((props) => {
+  const DialogRoot = react.memo((props) => {
     const {
       children,
       onOpen,
@@ -2089,9 +1921,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) {
@@ -2109,7 +1941,7 @@
       },
       [externalOpenChange, onOpen, onClose, onCloseInterrupt]
     );
-    const closeDialog = React.useCallback(
+    const closeDialog = react.useCallback(
       (options) => {
         if (options == null ? void 0 : options.force) {
           return setInnerOpen(false);
@@ -2168,7 +2000,7 @@
       }
     }
   });
-  const Heading = React.memo((props) => {
+  const Heading = react.memo((props) => {
     const {
       ref,
       children,
@@ -2201,7 +2033,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 });
   });
@@ -2220,7 +2052,7 @@
       size: "md"
     }
   });
-  const HoverCardContent = React.memo((props) => {
+  const HoverCardContent = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -2260,12 +2092,12 @@
     Root: RadixHoverCard__namespace.Root,
     Trigger: RadixHoverCard__namespace.Trigger
   };
-  const HoverUtility = React.memo(function Root({ children, forceHover }) {
-    const [isHovered, setIsHovered] = React.useState(false);
-    const handlePointerEnter = React.useCallback(() => {
+  const HoverUtility = react.memo(({ 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({
@@ -2274,7 +2106,8 @@
       onPointerLeave: handlePointerLeave
     });
   });
-  const InputContext = React.createContext({});
+  HoverUtility.displayName = "HoverUtility";
+  const InputContext = react.createContext({});
   const inputRoot$1 = classVarianceAuthority.cva(
     [
       "flex",
@@ -2349,9 +2182,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",
       {
@@ -2363,7 +2196,7 @@
     );
   });
   InputField.displayName = "InputField";
-  const InputRoot = React.memo((props) => {
+  const InputRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -2387,9 +2220,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";
@@ -2398,27 +2231,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,
@@ -2432,10 +2265,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 };
@@ -2482,17 +2315,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,
@@ -2515,25 +2348,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) {
@@ -2546,7 +2379,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",
@@ -2556,12 +2389,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;
@@ -2571,12 +2404,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 () => {
@@ -2584,11 +2417,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,
@@ -2599,11 +2432,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
@@ -2698,7 +2531,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,
@@ -2712,14 +2545,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]);
@@ -2740,10 +2573,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;
@@ -2752,40 +2585,6 @@
     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":
@@ -2796,11 +2595,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 });
@@ -2849,7 +2648,7 @@
       align: "left"
     }
   });
-  const Link = React.memo((props) => {
+  const Link = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -2881,28 +2680,6 @@
     );
   });
   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",
@@ -3048,319 +2825,28 @@
       }
     }
   );
-  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 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 {
       ref: forwardedRef,
       className,
       children,
-      size = "md",
-      variant = "soft",
-      radius = providerContext.radius,
-      accentColor = "base",
+      onSelect,
+      onClick,
+      onKeyDown,
+      closeOnSelect = true,
+      disabled = false,
       ...rest
     } = props;
-    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) => {
-        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(
+    const { ref, index } = react$1.useListItem();
+    const mergeRefs2 = react$1.useMergeRefs([ref, forwardedRef]);
+    const handleClick = react.useCallback(
       (e) => {
         e.stopPropagation();
         if (disabled) return;
@@ -3371,7 +2857,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);
@@ -3382,8 +2868,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(
@@ -3406,9 +2892,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:
@@ -3423,16 +2909,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 } = useMenuContext();
-    const mergedRefs = react.useMergeRefs([refs.setReference, forwardedRef]);
-    React.useEffect(() => {
+    const { getReferenceProps, refs, setTriggerType, open } = react.use(MenuContext);
+    const mergedRefs = react$1.useMergeRefs([refs.setReference, forwardedRef]);
+    react.useEffect(() => {
       setTriggerType("click");
     }, [setTriggerType]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3448,15 +2934,115 @@
     );
   });
   MenuClickTrigger.displayName = "MenuClickTrigger";
-  const MenuContextTrigger = React.memo((props) => {
+  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 { ref: forwardedRef, children, disabled = false } = props;
-    const ref = React.useRef(null);
-    const { setOpen, refs, setTriggerType, open } = useMenuContext();
-    const mergedRefs = react.useMergeRefs([forwardedRef, ref]);
-    React.useEffect(() => {
+    const ref = react.useRef(null);
+    const { setOpen, refs, setTriggerType, open } = react.use(MenuContext);
+    const mergedRefs = react$1.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) {
@@ -3495,24 +3081,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 } = useMenuContentContext();
-    const { index, ref } = react.useListItem();
-    const mergedRefs = react.useMergeRefs([ref, forwardedRef]);
-    const handleChange = React.useCallback(
+    const { activeIndex, getItemProps } = react.use(MenuContentContext);
+    const { index, ref } = react$1.useListItem();
+    const mergedRefs = react$1.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("");
       };
@@ -3533,20 +3119,20 @@
     );
   });
   MenuInputField.displayName = "MenuInputField";
-  const MenuInputRoot = React.memo((props) => {
+  const MenuInputRoot = react.memo((props) => {
     const { ref, className, ...rest } = props;
-    const { size } = useMenuContentContext();
+    const { size } = react.use(MenuContentContext);
     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 } = useMenuContentContext();
+    const { size } = react.use(MenuContentContext);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classVarianceAuthority.cx(menuLabelCva({ size }), className), ...rest });
   });
   MenuLabel.displayName = "MenuLabel";
@@ -3554,41 +3140,18 @@
     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(
@@ -3604,26 +3167,25 @@
       }
     ) });
   });
-  const PagesContext = React.createContext({});
-  const usePagesContext = () => React.useContext(PagesContext);
-  const MenuPages = React.memo((props) => {
+  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 { 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 MenuPageContent = (props) => {
-    const { page, children } = props;
-    const { activePage } = usePagesContext();
-    return activePage === page ? children : null;
-  };
-  MenuPageContent.displayName = "PageContent";
-  const MenuPageTrigger = React.memo((props) => {
+  const MenuPageTrigger = react.memo((props) => {
     const { ref, onSelect, page, ...rest } = props;
-    const { refs, setActiveIndex } = useMenuContentContext();
-    const { setActivePage } = usePagesContext();
-    const handleSelect = React.useCallback(() => {
+    const { refs, setActiveIndex } = react.use(MenuContentContext);
+    const { setActivePage } = react.use(PagesContext);
+    const handleSelect = react.useCallback(() => {
       var _a;
       onSelect == null ? void 0 : onSelect();
       setActivePage(page);
@@ -3633,47 +3195,944 @@
     return /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { ref, onSelect: handleSelect, closeOnSelect: false, ...rest });
   });
   MenuPageTrigger.displayName = "MenuPageTrigger";
-  const MenuScroll = React.memo((props) => {
+  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 { ref, className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: classVarianceAuthority.cx(
+          "h-full overflow-x-hidden overflow-y-auto [scrollbar-color:var(--base-6)_transparent] [scrollbar-width:thin]",
+          className
+        ),
+        ...rest
+      }
+    );
+  });
+  MenuScroll.displayName = "MenuScroll";
+  const MenuSelectAllItem = genericMemo((props) => {
+    const { ref, children, onSelect, closeOnSelect = false, ...rest } = props;
+    const { allSelected, someSelected, toggleSelectAll } = react.use(MultiSelectContext);
+    const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
+    const handleSelect = react.useCallback(() => {
+      onSelect == null ? void 0 : onSelect();
+      toggleSelectAll();
+    }, [onSelect, toggleSelectAll]);
+    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(
+      MenuItem,
+      {
+        onSelect: handleSelect,
+        ref,
+        "data-state": getCheckedState(selectedState),
+        closeOnSelect,
+        ...rest,
+        children: computedChildren
+      }
+    ) });
+  });
+  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(
+      SingleSelectNotRequiredProvider,
+      {
+        defaultValue,
+        value,
+        onValueChange,
+        children
+      }
+    ) });
+  });
+  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(() => {
+      onSelect == null ? void 0 : onSelect();
+      selectValue(value);
+    }, [onSelect, selectValue, value]);
+    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(
+      MenuItem,
+      {
+        ref,
+        role: "menuitemcheckbox",
+        onSelect: handleSelect,
+        closeOnSelect,
+        "data-state": getSelectedState(isSelected),
+        ...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) => {
+    var _a;
+    const { ref: forwardedRef, children, ...rest } = props;
+    const { middlewareData } = react.use(MenuContext);
+    const { accentColor, radius, variant, size } = react.use(MenuContentContext);
+    const {
+      open,
+      nodeId,
+      refs,
+      context,
+      getFloatingProps,
+      getItemProps,
+      activeIndex,
+      setActiveIndex,
+      elementsRef,
+      floatingStyles,
+      setOpen,
+      side
+    } = react.use(SubContext);
+    const wrapperRef = react.useRef(null);
+    const mergeRefs2 = react$1.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(
+      MenuContentContext.Provider,
+      {
+        value: {
+          getItemProps,
+          activeIndex,
+          setActiveIndex,
+          elementsRef,
+          open,
+          setOpen,
+          refs,
+          size,
+          radius,
+          accentColor,
+          variant
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "outline-none",
+            ref: mergeRefs2,
+            style: computedFloatingStyles,
+            ...getFloatingProps(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "ul",
+              {
+                className: classVarianceAuthority.cx(
+                  "overmap-menu-sub-content",
+                  menuContent({ size }),
+                  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 = 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]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItem,
+      {
+        ref: mergedRefs,
+        closeOnSelect: false,
+        "aria-haspopup": "menu",
+        "data-state": getOpenState(open),
+        disabled,
+        ...getReferenceProps(rest),
+        children
+      }
+    );
+  });
+  MenuSubTrigger.displayName = "MenuSubTrigger";
+  const MenuVirtualTrigger = react.memo((props) => {
+    const { virtualElement, disabled } = props;
+    const { refs, setTriggerType, setOpen } = react.use(MenuContext);
+    react.useEffect(() => {
+      setTriggerType("virtual");
+    }, [setTriggerType]);
+    react.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 = 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,
-        className: classVarianceAuthority.cx(
-          "h-full overflow-x-hidden overflow-y-auto [scrollbar-color:var(--base-6)_transparent] [scrollbar-width:thin]",
-          className
-        ),
-        ...rest
+        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 })
       }
     );
   });
-  MenuScroll.displayName = "MenuScroll";
-  const MenuSelectAllItem = genericMemo((props) => {
-    const { ref, children, onSelect, closeOnSelect = false, ...rest } = props;
-    const { allSelected, someSelected, toggleSelectAll } = React.use(MultiSelectContext);
-    const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
-    const handleSelect = React.useCallback(() => {
-      onSelect == null ? void 0 : onSelect();
-      toggleSelectAll();
-    }, [onSelect, toggleSelectAll]);
-    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(
-      MenuItem,
-      {
-        onSelect: handleSelect,
-        ref,
-        "data-state": getCheckedState(selectedState),
-        closeOnSelect,
-        ...rest,
-        children: computedChildren
-      }
-    ) });
+  MenuV2Root.displayName = "MenuRoot";
+  const MenuV2SelectedIndicator = react.memo((props) => {
+    const { ref, children, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, { ref, ...rest, children });
   });
-  const MenuSelectGroup = genericMemo(function MenuSelectGroup2(props) {
+  MenuV2SelectedIndicator.displayName = "MenuCheckboxItemIndicator";
+  const MenuV2SelectGroup = 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(
+    return /* @__PURE__ */ jsxRuntime.jsx(MenuV2Group, { ref, ...rest, children: required ? /* @__PURE__ */ jsxRuntime.jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsxRuntime.jsx(
       SingleSelectNotRequiredProvider,
       {
         defaultValue,
@@ -3683,189 +4142,59 @@
       }
     ) });
   });
-  const MenuSelectItem = genericMemo(function(props) {
-    const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
-    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(() => {
-      return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
-    }, [children, isSelected]);
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(
-      MenuItem,
+  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,
-        closeOnSelect,
         "data-state": getSelectedState(isSelected),
         ...rest,
-        children: computedChildren
-      }
-    ) });
-  });
-  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 } = useMenuContext();
-    const { accentColor, radius, variant, size } = useMenuContentContext();
-    const {
-      open,
-      nodeId,
-      refs,
-      context,
-      getFloatingProps,
-      getItemProps,
-      activeIndex,
-      setActiveIndex,
-      elementsRef,
-      floatingStyles,
-      setOpen,
-      side
-    } = 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.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: {
-          getItemProps,
-          activeIndex,
-          setActiveIndex,
-          elementsRef,
-          open,
-          setOpen,
-          refs,
-          size,
-          radius,
-          accentColor,
-          variant
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "outline-none",
-            ref: mergeRefs2,
-            style: computedFloatingStyles,
-            ...getFloatingProps(),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "ul",
-              {
-                className: classVarianceAuthority.cx(
-                  "overmap-menu-sub-content",
-                  menuContent({ size }),
-                  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 = React.memo((props) => {
-    const { ref: forwardedRef, children, ...rest } = props;
-    const { refs, getReferenceProps, open, disabled } = useSubContext();
-    const mergedRefs = react.useMergeRefs([forwardedRef, refs.setReference]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      MenuItem,
-      {
-        ref: mergedRefs,
-        closeOnSelect: false,
-        "aria-haspopup": "menu",
-        "data-state": getOpenState(open),
-        disabled,
-        ...getReferenceProps(rest),
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext, { value: isSelected, children })
       }
     );
   });
-  MenuSubTrigger.displayName = "MenuSubTrigger";
-  const MenuVirtualTrigger = React.memo((props) => {
-    const { virtualElement, disabled } = props;
-    const { refs, setTriggerType, setOpen } = useMenuContext();
-    React.useEffect(() => {
-      setTriggerType("virtual");
-    }, [setTriggerType]);
-    React.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 = 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",
@@ -3922,9 +4251,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,
       {
@@ -3940,7 +4269,7 @@
     );
   });
   OneTimePasswordFieldInput.displayName = "OneTimePasswordFieldInput";
-  const OneTimePasswordFieldRoot = React.memo((props) => {
+  const OneTimePasswordFieldRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -3951,7 +4280,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";
@@ -3960,7 +4289,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 });
   });
@@ -3976,7 +4305,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,
@@ -3989,21 +4318,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 });
   });
@@ -4017,12 +4346,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]);
@@ -4035,14 +4364,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(
@@ -4056,7 +4385,96 @@
     );
   });
   OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
-  const PopoverArrow = React.memo((props) => {
+  const PhoneNumberInputContext = react.createContext({});
+  const FlagComponent = react.memo((props) => {
+    const { country } = props;
+    return country ? country : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneIcon, { size: 16 });
+  });
+  FlagComponent.displayName = "FlagComponent";
+  const CountrySelect = react.memo((props) => {
+    const { disabled, value, onChange, options } = props;
+    const { radius, size, variant, accentColor } = react.use(PhoneNumberInputContext);
+    const handleSelect = react.useCallback(
+      (e) => {
+        onChange(e.target.value);
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        className: "relative",
+        accentColor,
+        radius,
+        size,
+        variant,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { size: 16, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              disabled,
+              value,
+              onChange: handleSelect,
+              className: "absolute inset-0 text-sm opacity-0",
+              "aria-label": "Select country",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select a country" }, "default"),
+                options.filter((x) => x.value).map((option, i) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: option.value, children: [
+                  option.label,
+                  " ",
+                  option.value && `+${min.getCountryCallingCode(option.value)}`
+                ] }, option.value ?? `empty-${i}`))
+              ]
+            }
+          )
+        ]
+      }
+    );
+  });
+  CountrySelect.displayName = "CountrySelect";
+  const InputComponent = react.memo((props) => {
+    const { accentColor, radius, size, variant } = react.use(PhoneNumberInputContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(Input.Root, { variant, size, radius, accentColor, children: /* @__PURE__ */ jsxRuntime.jsx(Input.Field, { ...props }) });
+  });
+  InputComponent.displayName = "InputComponent";
+  const PhoneNumberInput = react.memo((props) => {
+    const providerContext = useProvider();
+    const {
+      ref,
+      className,
+      size = "md",
+      variant = "outline",
+      radius = providerContext.radius,
+      accentColor = providerContext.accentColor,
+      ...rest
+    } = props;
+    const contextValue = react.useMemo(
+      () => ({
+        size,
+        variant,
+        radius,
+        accentColor
+      }),
+      [accentColor, radius, size, variant]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(PhoneNumberInputContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      PhoneInput,
+      {
+        ref,
+        className: classVarianceAuthority.cx(className, "flex gap-1"),
+        flagComponent: FlagComponent,
+        countrySelectComponent: CountrySelect,
+        inputComponent: InputComponent,
+        "data-accent-color": accentColor,
+        ...rest
+      }
+    ) });
+  });
+  PhoneNumberInput.displayName = "PhoneNumberInput";
+  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 });
   });
@@ -4075,7 +4493,7 @@
       size: "md"
     }
   });
-  const PopoverContent = React.memo((props) => {
+  const PopoverContent = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4150,7 +4568,7 @@
       }
     }
   );
-  const Progress = React.memo((props) => {
+  const Progress = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4162,7 +4580,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const computedStyle = React.useMemo(
+    const computedStyle = react.useMemo(
       () => ({
         ...style,
         "--progress-value": rest.value ?? 0,
@@ -4183,7 +4601,7 @@
     );
   });
   Progress.displayName = "Progress";
-  const RadioCardsContext = React.createContext({});
+  const RadioCardsContext = react.createContext({});
   const radioCardsRootCva = classVarianceAuthority.cva([], {
     variants: {
       size: {
@@ -4243,8 +4661,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,
@@ -4256,7 +4674,7 @@
     );
   });
   RadioCardsItem.displayName = "RadioCardsItem";
-  const RadioCardsRoot = React.memo((props) => {
+  const RadioCardsRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       className,
@@ -4267,7 +4685,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const contextValue = React.useMemo(
+    const contextValue = react.useMemo(
       () => ({
         variant,
         size,
@@ -4290,7 +4708,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,
@@ -4303,7 +4721,7 @@
     );
   });
   RadioGroupIndicator.displayName = "RadioGroupIndicator";
-  const RadioGroupContext = React.createContext({});
+  const RadioGroupContext = react.createContext({});
   const radioGroupItem = classVarianceAuthority.cva(
     [
       "inline-flex",
@@ -4347,8 +4765,8 @@
       }
     }
   );
-  const RadioGroupItem = React.memo((props) => {
-    const radioGroupContext = React.useContext(RadioGroupContext);
+  const RadioGroupItem = react.memo((props) => {
+    const radioGroupContext = react.useContext(RadioGroupContext);
     const {
       ref,
       children,
@@ -4360,7 +4778,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,
@@ -4379,6 +4797,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"],
     {
@@ -4522,15 +4999,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(
@@ -4543,7 +5020,7 @@
     );
   });
   SegmentedControlItem.displayName = "SegmentedControlItem";
-  const SegmentedControlRoot = React.memo((props) => {
+  const SegmentedControlRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4577,7 +5054,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"],
     {
@@ -4725,7 +5202,7 @@
       }
     }
   );
-  const SegmentedTabsList = React.memo((props) => {
+  const SegmentedTabsList = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4737,7 +5214,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const contextValue = React.useMemo(
+    const contextValue = react.useMemo(
       () => ({
         size,
         variant,
@@ -4757,14 +5234,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,
       {
@@ -4864,7 +5341,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,
@@ -5086,7 +5563,7 @@
       }
     }
   );
-  const Slider = React.memo((props) => {
+  const Slider = react.memo((props) => {
     const providerContext = useProvider();
     const {
       className,
@@ -5124,11 +5601,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",
@@ -5188,7 +5665,7 @@
       }
     }
   );
-  const SwitchRoot = React.memo((props) => {
+  const SwitchRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -5211,9 +5688,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,
       {
@@ -5228,12 +5705,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: {
@@ -5274,29 +5751,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,
@@ -5324,14 +5801,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";
@@ -5345,7 +5822,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: {
@@ -5395,7 +5872,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(
@@ -5410,19 +5887,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 });
@@ -5464,7 +5941,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",
@@ -5545,7 +6022,7 @@
       }
     }
   );
-  const TextArea = React.memo((props) => {
+  const TextArea = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -5613,8 +6090,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);
@@ -5652,11 +6129,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");
     }
@@ -5670,15 +6147,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);
@@ -5686,7 +6163,7 @@
       });
       if (callback) callback();
     }, []);
-    const toastContextValue = React.useMemo(() => {
+    const toastContextValue = react.useMemo(() => {
       let counter = 0;
       const showToast = (toastProps) => {
         const duration = calculatedDuration(toastProps);
@@ -5710,7 +6187,7 @@
         showWarning
       };
     }, [handleCloseToast]);
-    React.useEffect(() => {
+    react.useEffect(() => {
       return () => {
         for (const { timeout } of toasts) clearTimeout(timeout);
       };
@@ -5851,7 +6328,7 @@
       }
     }
   );
-  const BaseToggleButton = React.memo((props) => {
+  const BaseToggleButton = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -5874,15 +6351,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",
@@ -5998,8 +6475,8 @@
       ]
     }
   );
-  const ToggleGroupBaseItem = React.memo((props) => {
-    const toggleGroupContext = React.use(ToggleGroupContext);
+  const ToggleGroupBaseItem = react.memo((props) => {
+    const toggleGroupContext = react.use(ToggleGroupContext);
     const {
       ref,
       className,
@@ -6025,15 +6502,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,
@@ -6044,7 +6521,7 @@
       size = "md",
       ...rest
     } = props;
-    const contextValue = React.useMemo(
+    const contextValue = react.useMemo(
       () => ({
         variant,
         size,
@@ -6061,7 +6538,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 });
   });
@@ -6103,7 +6580,7 @@
       }
     }
   );
-  const TooltipContent = React.memo((props) => {
+  const TooltipContent = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -6155,7 +6632,6 @@
   exports2.CheckboxGroupSelectAllItem = CheckboxGroupSelectAllItem;
   exports2.CheckboxIndicator = CheckboxIndicator;
   exports2.CheckboxRoot = CheckboxRoot;
-  exports2.CollapsibleTree = CollapsibleTree;
   exports2.CommandMenu = CommandMenu;
   exports2.CommandMenuCheckboxIndicator = CommandMenuCheckboxIndicator;
   exports2.CommandMenuCheckboxItem = CommandMenuCheckboxItem;
@@ -6230,6 +6706,23 @@
   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;
@@ -6243,6 +6736,7 @@
   exports2.OverlayTitle = OverlayTitle;
   exports2.OverlayTrigger = OverlayTrigger;
   exports2.OvermapErrorBoundary = OvermapErrorBoundary;
+  exports2.PhoneNumberInput = PhoneNumberInput;
   exports2.Popover = Popover;
   exports2.PopoverArrow = PopoverArrow;
   exports2.PopoverContent = PopoverContent;
@@ -6255,6 +6749,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;
@@ -6262,7 +6760,6 @@
   exports2.SegmentedTabsList = SegmentedTabsList;
   exports2.SegmentedTabsRoot = SegmentedTabsRoot;
   exports2.SegmentedTabsTrigger = SegmentedTabsTrigger;
-  exports2.SelectedIndicatorContext = SelectedIndicatorContext;
   exports2.Separator = Separator;
   exports2.SlideOut = SlideOut;
   exports2.Slider = Slider;
@@ -6299,21 +6796,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;