@overmap-ai/blocks 1.0.39 → 1.0.40-TableStyling.1

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("react-icons/ri"), 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("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("react-icons/hi"), 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", "react-icons/ri", "@radix-ui/react-hover-card", "react-transition-group", "react-dom", "@radix-ui/react-slot", "@floating-ui/react", "@radix-ui/react-separator", "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", "react-icons/hi", "@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.RiIcons, global.RadixHoverCard, global.reactTransitionGroup, global.ReactDOM, global.reactSlot, global.react, global.RadixSeparator, global.reactErrorBoundary, global.RadixPopover, global.RadixProgress, global.RadixRadioGroup, global.RadixToggleGroup, global.RadixTabs, global.RadixSlider, global.RadixSwitch, global.RadixToast, global.hi, global.Toggle, global.RadixTooltip));
-})(this, function(exports2, RadixAlertDialog, jsxRuntime, classVarianceAuthority, React, RadixAvatar, RadixCheckbox, reactResponsive, RadixPrimitiveCollapsible, cmdk, RadixDialog, reactDayPicker, RiIcons, RadixHoverCard, reactTransitionGroup, ReactDOM, reactSlot, react, RadixSeparator, reactErrorBoundary, RadixPopover, RadixProgress, RadixRadioGroup, RadixToggleGroup, RadixTabs, RadixSlider, RadixSwitch, RadixToast, hi, 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"), require("@radix-ui/react-hover-card"), require("@radix-ui/react-slot"), require("react-transition-group"), require("react-transition-group/CSSTransition"), require("react-dom"), 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("sonner"), 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", "@radix-ui/react-hover-card", "@radix-ui/react-slot", "react-transition-group", "react-transition-group/CSSTransition", "react-dom", "@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", "sonner", "@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.lucideReact, global.RadixHoverCard, global.reactSlot, global.reactTransitionGroup, null, global.ReactDOM, global.react$1, global.RadixSeparator, global.RadixOneTimePasswordField, global.reactErrorBoundary, global.RadixPopover, global.RadixProgress, global.RadixRadioGroup, global.RadixToggleGroup, global.RadixTabs, global.RadixSlider, global.RadixSwitch, global.sonner, global.Toggle, global.RadixTooltip));
+})(this, function(exports2, RadixAlertDialog, jsxRuntime, classVarianceAuthority, react, RadixAvatar, RadixCheckbox, reactResponsive, cmdk, RadixDialog, reactDayPicker, lucideReact, RadixHoverCard, reactSlot, reactTransitionGroup, CSSTransition, ReactDOM, react$1, RadixSeparator, RadixOneTimePasswordField, reactErrorBoundary, RadixPopover, RadixProgress, RadixRadioGroup, RadixToggleGroup, RadixTabs, RadixSlider, RadixSwitch, sonner, Toggle, RadixTooltip) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -19,14 +19,12 @@
     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 RiIcons__namespace = /* @__PURE__ */ _interopNamespaceDefault(RiIcons);
   const RadixHoverCard__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixHoverCard);
   const RadixSeparator__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixSeparator);
+  const RadixOneTimePasswordField__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixOneTimePasswordField);
   const RadixPopover__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixPopover);
   const RadixProgress__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixProgress);
   const RadixRadioGroup__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixRadioGroup);
@@ -34,7 +32,6 @@
   const RadixTabs__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixTabs);
   const RadixSlider__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixSlider);
   const RadixSwitch__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixSwitch);
-  const RadixToast__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixToast);
   const Toggle__namespace = /* @__PURE__ */ _interopNamespaceDefault(Toggle);
   const RadixTooltip__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixTooltip);
   const floating = classVarianceAuthority.cva(
@@ -103,17 +100,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 +177,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 +195,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 +216,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const value = React.useMemo(
+    const value = react.useMemo(
       () => ({
         variant,
         size,
@@ -231,7 +228,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 +382,7 @@
       }
     }
   );
-  const Button = React.memo((props) => {
+  const Button = react.memo((props) => {
     const providerContext = useProvider();
     const buttonsContext = useButtonGroup();
     const {
@@ -410,7 +407,7 @@
     );
   });
   Button.displayName = "Button";
-  const IconButton = React.memo((props) => {
+  const IconButton = react.memo((props) => {
     const providerContext = useProvider();
     const buttonsContext = useButtonGroup();
     const {
@@ -435,11 +432,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 +445,7 @@
       },
       [options]
     );
-    const openAlertDialog = React.useCallback(
+    const openAlertDialog = react.useCallback(
       (config) => {
         if (open) throw new Error("AlertDialog is already open");
         setOpen(true);
@@ -485,7 +482,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 +510,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 +528,7 @@
     );
   });
   AvatarImage.displayName = "AvatarImage";
-  const AvatarRoot = React.memo((props) => {
+  const AvatarRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -639,7 +636,7 @@
       icon: false
     }
   });
-  const Badge = React.memo((props) => {
+  const Badge = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -684,7 +681,7 @@
       variant: "surface"
     }
   });
-  const Card = React.memo((props) => {
+  const Card = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -708,7 +705,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 +761,7 @@
       }
     }
   );
-  const CheckboxRoot = React.memo((props) => {
+  const CheckboxRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -792,94 +789,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 +808,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 +870,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 +903,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 +914,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 +936,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 +1000,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 +1022,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 +1057,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 +1094,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 +1335,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 +1357,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 +1386,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 +1423,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 +1466,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 +1480,7 @@
       {
         ref,
         onSelect: handleSelect,
-        "data-state": getSelectedState$1(isSelected),
+        "data-state": getSelectedState(isSelected),
         "aria-selected": isSelected,
         closeOnSelect,
         ...rest,
@@ -1661,29 +1488,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 +1548,25 @@
   });
   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 { children, defaultOpen, open: controlledOpen, onOpenChange, modal } = props;
+  const CommandMenuRoot = react.memo((props) => {
+    const {
+      children,
+      defaultOpen,
+      open: controlledOpen,
+      // oxlint-disable-next-line typescript/unbound-method
+      onOpenChange,
+      modal
+    } = props;
     const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-    const contextValue = React.useMemo(() => {
+    const contextValue = react.useMemo(() => {
       return {
         open,
         setOpen
@@ -1743,8 +1577,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 +1589,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,17 +1660,22 @@
     Page: CommandMenuPage,
     PageTriggerItem: CommandMenuPageTriggerItem
   };
+  const LuIcon = react.memo((props) => {
+    const { ref, icon: Icon, className, size = "1em", ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { ref, className: classVarianceAuthority.cx("shrink-0", className), size, ...rest });
+  });
+  LuIcon.displayName = "LuIcon";
   const Chevron = (props) => {
     const { orientation, ...rest } = props;
     switch (orientation) {
       case "up":
-        return /* @__PURE__ */ jsxRuntime.jsx(RiIcons.RiArrowUpSLine, { ...rest });
+        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.ChevronUp, ...rest });
       case "down":
-        return /* @__PURE__ */ jsxRuntime.jsx(RiIcons.RiArrowDownSLine, { ...rest });
+        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.ChevronDown, ...rest });
       case "left":
-        return /* @__PURE__ */ jsxRuntime.jsx(RiIcons.RiArrowLeftSLine, { ...rest });
+        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.ChevronLeft, ...rest });
       default:
-        return /* @__PURE__ */ jsxRuntime.jsx(RiIcons.RiArrowRightSLine, { ...rest });
+        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.ChevronRight, ...rest });
     }
   };
   const rootCva = classVarianceAuthority.cva(["relative", "size-max"], {
@@ -1973,7 +1816,7 @@
       }
     }
   });
-  const DayPicker = React.memo((props) => {
+  const DayPicker = react.memo((props) => {
     const providerContext = useProvider();
     const {
       components,
@@ -1985,7 +1828,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 })),
@@ -2015,7 +1858,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
@@ -2033,19 +1876,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(
@@ -2060,7 +1903,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,
@@ -2074,7 +1917,7 @@
     ) });
   });
   DialogOverlay.displayName = "DialogOverlay";
-  const DialogRoot = React.memo((props) => {
+  const DialogRoot = react.memo((props) => {
     const {
       children,
       onOpen,
@@ -2082,11 +1925,12 @@
       defaultOpen,
       onCloseInterrupt,
       open: externalOpen,
+      // oxlint-disable-next-line typescript/unbound-method
       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) {
@@ -2104,7 +1948,7 @@
       },
       [externalOpenChange, onOpen, onClose, onCloseInterrupt]
     );
-    const closeDialog = React.useCallback(
+    const closeDialog = react.useCallback(
       (options) => {
         if (options == null ? void 0 : options.force) {
           return setInnerOpen(false);
@@ -2163,7 +2007,7 @@
       }
     }
   });
-  const Heading = React.memo((props) => {
+  const Heading = react.memo((props) => {
     const {
       ref,
       children,
@@ -2196,7 +2040,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 });
   });
@@ -2215,7 +2059,7 @@
       size: "md"
     }
   });
-  const HoverCardContent = React.memo((props) => {
+  const HoverCardContent = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -2255,12 +2099,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({
@@ -2269,7 +2113,8 @@
       onPointerLeave: handlePointerLeave
     });
   });
-  const InputContext = React.createContext({});
+  HoverUtility.displayName = "HoverUtility";
+  const InputContext = react.createContext({});
   const inputRoot$1 = classVarianceAuthority.cva(
     [
       "flex",
@@ -2344,21 +2189,20 @@
       size: "md"
     }
   });
-  const InputField = React.memo((props) => {
-    const { ref, children, className, ...rest } = props;
-    const { size, variant } = React.useContext(InputContext);
+  const InputField = react.memo((props) => {
+    const { ref, className, ...rest } = props;
+    const { size, variant } = react.useContext(InputContext);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         className: classVarianceAuthority.cx(inputField({ size, variant }), "grow bg-transparent outline-0", className),
         ref,
-        ...rest,
-        children
+        ...rest
       }
     );
   });
   InputField.displayName = "InputField";
-  const InputRoot = React.memo((props) => {
+  const InputRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -2382,9 +2226,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";
@@ -2393,27 +2237,27 @@
     Root: InputRoot,
     Slot: InputSlot
   };
-  const LayoutContext = React.createContext({});
-  const useLayoutContext = () => React.useContext(LayoutContext);
-  const LayoutContainer = React.memo((props) => {
-    const { ref, children, className, ...rest } = props;
+  const LayoutContext = react.createContext({});
+  const useLayoutContext = () => react.useContext(LayoutContext);
+  const LayoutContainer = react.memo((props) => {
+    const { ref, children, ...rest } = props;
     const { hideLayout = false } = useLayoutContext();
-    return !hideLayout && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classVarianceAuthority.cx("flex h-full grow", className), ref, ...rest, children });
+    return !hideLayout && /* @__PURE__ */ jsxRuntime.jsx("div", { 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,
@@ -2425,12 +2269,29 @@
     return /* @__PURE__ */ jsxRuntime.jsx(LayoutContext.Provider, { value: contextValue, children });
   });
   LayoutRoot.displayName = "LayoutRoot";
+  const SlideOutRootContext = react.createContext({});
+  const SlideOutContextContext = react.createContext({});
+  const SlideOutClose = react.memo((props) => {
+    const { ref, onClick, disabled, ...rest } = props;
+    const { setOpen } = react.use(SlideOutRootContext);
+    const handleClick = react.useCallback(
+      (e) => {
+        onClick == null ? void 0 : onClick(e);
+        if (e.defaultPrevented) return;
+        setOpen(false);
+      },
+      [onClick, setOpen]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, onClick: handleClick, "data-disabled": disabled ?? false, ...rest });
+  });
+  SlideOutClose.displayName = "SlideOutClose";
+  const TIMEOUT_DURATION = 200;
   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 };
@@ -2477,336 +2338,401 @@
     }
   }
   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 {
-      ref,
-      children,
-      className,
-      style,
-      open,
-      hide = false,
-      modal = false,
-      overlayComponent,
-      resizeable = true,
-      side,
-      position = "relative",
-      initialWidth,
-      minWidth,
-      maxWidth,
-      onDismiss,
-      onOpening,
-      onClosed,
-      content,
-      ...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 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(() => {
-      if (modal && onDismiss) {
-        onDismiss();
-      }
-    }, [modal, onDismiss]);
-    const handleAssignParentContainer = React.useCallback((element) => {
-      if (element) {
-        setParentContainer(element);
+  const SlideOutContent = react.memo((props) => {
+    const { ref, children, style, side, type, resizeable = false, initialSize, minSize, maxSize, ...rest } = props;
+    const internalRef = react.useRef(null);
+    const { open, setOpen, parentElement, modal, hide } = react.use(SlideOutRootContext);
+    const [computedSize, setComputedSize] = react.useState(null);
+    const handleClose = react.useCallback(() => {
+      if (modal) setOpen(false);
+    }, [modal, setOpen]);
+    const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(
+      handleClose,
+      parentElement ?? void 0
+    );
+    react.useLayoutEffect(() => {
+      if (!open || !internalRef.current) return;
+      const { offsetWidth, offsetHeight } = internalRef.current;
+      switch (side) {
+        case "left":
+        case "right":
+          setComputedSize(offsetWidth);
+          break;
+        case "top":
+        case "bottom":
+          setComputedSize(offsetHeight);
+      }
+    }, [open, side]);
+    const computedStyle = react.useMemo(() => {
+      switch (side) {
+        case "left":
+          return {
+            ...style,
+            left: 0,
+            width: computedSize ?? initialSize,
+            maxWidth: maxSize,
+            minWidth: minSize,
+            position: type === "inline" ? "relative" : "absolute",
+            "--slide-out-size": `${computedSize}px`
+          };
+        case "right":
+          return {
+            ...style,
+            right: 0,
+            width: computedSize ?? initialSize,
+            maxWidth: maxSize,
+            minWidth: minSize,
+            position: type === "inline" ? "relative" : "absolute",
+            "--slide-out-size": `${computedSize}px`
+          };
+        case "top":
+          return {
+            ...style,
+            top: 0,
+            height: computedSize ?? initialSize,
+            maxHeight: maxSize,
+            minHeight: minSize,
+            position: type === "inline" ? "relative" : "absolute",
+            "--slide-out-size": `${computedSize}px`
+          };
+        case "bottom":
+          return {
+            ...style,
+            bottom: 0,
+            height: computedSize ?? initialSize,
+            maxHeight: maxSize,
+            minHeight: minSize,
+            position: type === "inline" ? "relative" : "absolute",
+            "--slide-out-size": `${computedSize}px`
+          };
       }
-    }, []);
-    React.useEffect(() => {
-      if (!childrenContainerRef.current) return;
-      const originalParentPointerEvents = childrenContainerRef.current.style.pointerEvents;
-      if (open && modal) {
-        childrenContainerRef.current.style.pointerEvents = "none";
+    }, [computedSize, initialSize, maxSize, minSize, side, style, type]);
+    const transitionClassNames = react.useMemo(() => {
+      switch (side) {
+        case "left":
+          return {
+            enter: "-ml-(--slide-out-size)",
+            enterActive: "ease-linear duration-200 transition-[margin-left] ml-0",
+            enterDone: "ml-0",
+            exitActive: "ease-linear duration-200 transition-[margin-left] -ml-(--slide-out-size)",
+            exitDone: "-ml-(--slide-out-size)"
+          };
+        case "right":
+          return {
+            enter: "-mr-(--slide-out-size)",
+            enterActive: "ease-linear duration-200 transition-[margin-right] mr-0",
+            enterDone: "mr-0",
+            exitActive: "ease-linear duration-200 transition-[margin-right] -mr-(--slide-out-size)",
+            exitDone: "-mr-(--slide-out-size)"
+          };
+        case "top":
+          return {
+            enter: "-mt-(--slide-out-size)",
+            enterActive: "ease-linear duration-200 transition-[margin-top] mt-0",
+            enterDone: "mt-0",
+            exitActive: "ease-linear duration-200 transition-[margin-top] -mt-(--slide-out-size)",
+            exitDone: "-mt-(--slide-out-size)"
+          };
+        case "bottom":
+          return {
+            enter: "-mb-(--slide-out-size)",
+            enterActive: "ease-linear duration-200 transition-[margin-bottom] mb-0",
+            enterDone: "mb-0",
+            exitActive: "ease-linear duration-200 transition-[margin-bottom] -mb-(--slide-out-size)",
+            exitDone: "-mb-(--slide-out-size)"
+          };
       }
-      return () => {
-        if (childrenContainerRef.current) {
-          childrenContainerRef.current.style.pointerEvents = originalParentPointerEvents;
-        }
-      };
-    }, [modal, open, parentContainer.style]);
-    const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(handleDismiss, parentContainer);
-    const CSSTransitionClassNames = React.useMemo(
+    }, [side]);
+    const contextValue = 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",
-        enterDone: isLeft ? "ml-0" : "mr-0",
-        exitActive: isLeft ? "ease-linear duration-200 transition-[margin-left] -ml-(--slide-out-width)" : "ease-linear duration-200 transition-[margin-right] -mr-(--slide-out-width)",
-        exitDone: isLeft ? "-ml-(--slide-out-width)" : "-mr-(--slide-out-width)"
+        side,
+        type,
+        resizeable,
+        computedSize,
+        setComputedSize
       }),
-      [isLeft]
+      [computedSize, resizeable, side, type]
     );
-    const handleMouseDown = React.useCallback((e) => {
-      const { clientX } = e;
-      prevClientX.current = clientX;
-      setIsResizing(true);
-    }, []);
-    const handleMouseMove = React.useCallback(
+    return !hide ? (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactTransitionGroup.CSSTransition,
+        {
+          classNames: transitionClassNames,
+          in: open,
+          timeout: TIMEOUT_DURATION,
+          unmountOnExit: true,
+          mountOnEnter: true,
+          nodeRef: internalRef,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: mergeRefs([ref, internalRef]),
+              onPointerDownCapture: handlePointerDownCapture,
+              "data-open": open,
+              "data-side": side,
+              "data-type": type,
+              style: computedStyle,
+              ...rest,
+              children: /* @__PURE__ */ jsxRuntime.jsx(SlideOutContextContext, { value: contextValue, children })
+            }
+          )
+        }
+      )
+    ) : null;
+  });
+  SlideOutContent.displayName = "SlideOutContent";
+  const SlideOutHandle = react.memo((props) => {
+    const { ref, onMouseDown, disabled, ...rest } = props;
+    const prevClientCoord = react.useRef(null);
+    const [isResizing, setIsResizing] = react.useState(false);
+    const { side, resizeable, computedSize, setComputedSize } = react.use(SlideOutContextContext);
+    const computedDisabled = disabled ?? !resizeable;
+    const setPrevClientCoord = react.useCallback(
+      (clientX, clientY) => {
+        switch (side) {
+          case "left":
+            prevClientCoord.current = clientX;
+            break;
+          case "right":
+            prevClientCoord.current = clientX;
+            break;
+          case "top":
+            prevClientCoord.current = clientY;
+            break;
+          case "bottom":
+            prevClientCoord.current = clientY;
+            break;
+        }
+      },
+      [side]
+    );
+    const handlePointerDown = react.useCallback(
+      (e) => {
+        onMouseDown == null ? void 0 : onMouseDown(e);
+        if (e.defaultPrevented || computedDisabled) return;
+        e.preventDefault();
+        setPrevClientCoord(e.clientX, e.clientY);
+        setIsResizing(true);
+      },
+      [computedDisabled, onMouseDown, setPrevClientCoord]
+    );
+    const handlePointerMove = react.useCallback(
       (e) => {
-        if (!isResizing) return;
-        const { clientX } = e;
-        const deltaX = (clientX - prevClientX.current) * (isLeft ? 1 : -1);
-        prevClientX.current = clientX;
-        setComputedWidth((prevWidth) => prevWidth + deltaX);
+        if (!isResizing || !prevClientCoord.current || computedDisabled) return;
+        e.preventDefault();
+        const { clientX, clientY } = e;
+        let delta = 0;
+        switch (side) {
+          case "left":
+            delta = clientX - prevClientCoord.current;
+            break;
+          case "right":
+            delta = (clientX - prevClientCoord.current) * -1;
+            break;
+          case "top":
+            delta = clientY - prevClientCoord.current;
+            break;
+          case "bottom":
+            delta = (clientY - prevClientCoord.current) * -1;
+            break;
+        }
+        setPrevClientCoord(clientX, clientY);
+        setComputedSize(computedSize + delta);
       },
-      [isLeft, isResizing]
+      [computedDisabled, computedSize, isResizing, setComputedSize, setPrevClientCoord, side]
     );
-    const handleMouseUp = React.useCallback(() => {
-      if (!isResizing) return;
-      prevClientX.current = null;
+    const handlePointerUp = react.useCallback(() => {
+      if (!isResizing || computedDisabled) return;
+      prevClientCoord.current = null;
       setIsResizing(false);
-    }, [isResizing]);
-    React.useEffect(() => {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
+    }, [computedDisabled, isResizing]);
+    react.useEffect(() => {
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
       return () => {
-        window.removeEventListener("mousemove", handleMouseMove);
-        window.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("pointermove", handlePointerMove);
+        document.removeEventListener("pointerup", handlePointerUp);
       };
-    }, [handleMouseMove, handleMouseUp]);
-    React.useLayoutEffect(() => {
-      if (!open) return;
-      setComputedWidth(localRef.current.offsetWidth);
-    }, [open]);
-    const resizableStyle = React.useMemo(
-      () => ({
-        ...style,
-        width: computedWidth ?? initialWidth,
-        maxWidth,
-        minWidth,
-        position,
-        "--slide-out-width": `${computedWidth}${typeof computedWidth === "number" ? "px" : ""}`
-      }),
-      [computedWidth, initialWidth, maxWidth, minWidth, position, style]
-    );
-    const resizableEnable = React.useMemo(
-      () => ({ left: resizeable && !isLeft, right: resizeable && isLeft }),
-      [isLeft, resizeable]
-    );
-    const SlideOut2 = React.useMemo(
-      () => (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactTransitionGroup.CSSTransition,
-          {
-            classNames: CSSTransitionClassNames,
-            in: open,
-            timeout: TIMEOUT_DURATION,
-            unmountOnExit: true,
-            mountOnEnter: true,
-            onEntering: onOpening,
-            onExited: onClosed,
-            nodeRef,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: classVarianceAuthority.cx(
-                  "top-0",
-                  "bottom-0",
-                  {
-                    "left-0": isLeft,
-                    "right-0": !isLeft,
-                    absolute: position === "absolute",
-                    relative: position === "relative"
-                  },
-                  className
-                ),
-                ref: mergedRefs,
-                onPointerDownCapture: handlePointerDownCapture,
-                "data-side": side,
-                style: resizableStyle,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: classVarianceAuthority.cx("absolute top-0 bottom-0 w-[3px]", {
-                        "right-0": isLeft,
-                        "left-0": !isLeft,
-                        "pointer-events-none": !resizableEnable
-                      }),
-                      onMouseDown: handleMouseDown,
-                      "data-resizing": isResizing ? "" : void 0
-                    }
-                  ),
-                  content
-                ]
-              }
-            )
-          }
-        )
-      ),
-      [
-        CSSTransitionClassNames,
-        open,
-        onOpening,
-        onClosed,
-        className,
-        isLeft,
-        position,
-        mergedRefs,
-        handlePointerDownCapture,
-        side,
-        resizableStyle,
-        handleMouseDown,
-        isResizing,
-        resizableEnable,
-        content
-      ]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    }, [handlePointerMove, handlePointerUp]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "relative flex h-full max-h-full w-full max-w-full overflow-hidden",
-        ref: handleAssignParentContainer,
-        ...otherProps,
-        children: [
-          side === "left" && !hide && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            open && overlayComponent,
-            " ",
-            content && SlideOut2
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full max-w-full grow overflow-hidden", ref: childrenContainerRef, children }),
-          side === "right" && !hide && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            open && overlayComponent,
-            " ",
-            content && SlideOut2
-          ] })
-        ]
+        ref,
+        onPointerDown: handlePointerDown,
+        "data-resizing": isResizing,
+        "data-side": side,
+        "data-disabled": computedDisabled,
+        ...rest
       }
     );
   });
-  SlideOut.displayName = "SlideOut";
-  const DEFAULT_INITIAL_WIDTH = "30%";
-  const LayoutSlideOut = React.memo((props) => {
-    const { small, hideLayout, isOpen, setOpen } = useLayoutContext();
+  SlideOutHandle.displayName = "SlideOutHandle";
+  const SlideOutOverlay = react.memo((props) => {
+    const { ref, ...rest } = props;
+    const { open, hide } = react.use(SlideOutRootContext);
+    return open && !hide ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-open": open, ...rest }) : null;
+  });
+  SlideOutOverlay.displayName = "SlideOutOverlay";
+  const SlideOutRoot = react.memo((props) => {
     const {
       ref,
-      id,
       children,
-      className,
-      defaultOpen,
-      side,
-      initialWidth = DEFAULT_INITIAL_WIDTH,
-      onDismiss,
+      defaultOpen = false,
+      open: controlledOpen,
+      onOpenChange,
+      modal = false,
+      hide = false,
       ...rest
     } = props;
-    const open = isOpen(id);
-    React.useEffect(() => {
+    const [parentElement, setParentElement] = react.useState(null);
+    const [open, setOpen] = useControlledState(defaultOpen, controlledOpen, onOpenChange);
+    const contextValue = react.useMemo(
+      () => ({
+        parentElement,
+        open,
+        setOpen,
+        modal,
+        hide
+      }),
+      [hide, modal, open, parentElement, setOpen]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mergeRefs([ref, setParentElement]), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(SlideOutRootContext, { value: contextValue, children }) });
+  });
+  SlideOutRoot.displayName = "SlideOutRoot";
+  const SlideOutTrigger = react.memo((props) => {
+    const { ref, onClick, ...rest } = props;
+    const { open, setOpen } = react.use(SlideOutRootContext);
+    const handleClick = react.useCallback(
+      (e) => {
+        onClick == null ? void 0 : onClick(e);
+        if (e.defaultPrevented) return;
+        setOpen(!open);
+      },
+      [onClick, open, setOpen]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, onClick: handleClick, "data-disabled": props.disabled ?? false, ...rest });
+  });
+  SlideOutTrigger.displayName = "SlideOutTrigger";
+  const SlideOutViewport = react.memo((props) => {
+    const { ref, ...rest } = props;
+    const internalRef = react.useRef(null);
+    const { open, modal, parentElement } = react.use(SlideOutRootContext);
+    react.useEffect(() => {
+      if (!internalRef.current) return;
+      const internalElement = internalRef.current;
+      const originalParentPointerEvents = internalElement.style.pointerEvents;
+      if (open && modal) {
+        internalElement.style.pointerEvents = "none";
+      }
+      return () => {
+        internalElement.style.pointerEvents = originalParentPointerEvents;
+      };
+    }, [modal, open, parentElement == null ? void 0 : parentElement.style]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mergeRefs([ref, internalRef]), ...rest });
+  });
+  SlideOutViewport.displayName = "SlideOutViewport";
+  const SlideOut = {
+    Close: SlideOutClose,
+    Content: SlideOutContent,
+    Handle: SlideOutHandle,
+    Overlay: SlideOutOverlay,
+    Root: SlideOutRoot,
+    Trigger: SlideOutTrigger,
+    Viewport: SlideOutViewport
+  };
+  const LayoutSlideOutClose = react.memo((props) => {
+    const { ref, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(SlideOutClose, { ref, ...rest });
+  });
+  LayoutSlideOutClose.displayName = "LayoutSlideOutClose";
+  const LayoutSlideOutContent = react.memo((props) => {
+    const { ref, type, ...rest } = props;
+    const { small } = react.use(LayoutContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(SlideOutContent, { ref, type: type ?? (small ? "overlay" : "inline"), ...rest });
+  });
+  LayoutSlideOutContent.displayName = "LayoutSlideOutContent";
+  const LayoutSlideOutHandle = react.memo((props) => {
+    const { ref, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(SlideOutHandle, { ref, ...rest });
+  });
+  LayoutSlideOutHandle.displayName = "LayoutSlideOutHandle";
+  const LayoutSlideOutOverlay = react.memo((props) => {
+    const { ref, smallModeOnly = false, ...rest } = props;
+    const { small, hideLayout } = useLayoutContext();
+    const showOverlay = react.useMemo(() => {
+      if (hideLayout) return false;
+      if (smallModeOnly && !small) return false;
+      return true;
+    }, [hideLayout, small, smallModeOnly]);
+    return showOverlay ? /* @__PURE__ */ jsxRuntime.jsx(SlideOutOverlay, { ref, ...rest }) : null;
+  });
+  LayoutSlideOutOverlay.displayName = "SlideOutOverlay";
+  const LayoutSlideOutRoot = react.memo((props) => {
+    const { ref, slideOutId, defaultOpen, hide, ...rest } = props;
+    const { isOpen, setOpen, small, hideLayout } = react.use(LayoutContext);
+    const open = isOpen(slideOutId);
+    const handleOpenChange = react.useCallback(
+      (open2) => {
+        if (!open2) setOpen(slideOutId, false);
+      },
+      [setOpen, slideOutId]
+    );
+    react.useEffect(() => {
       if (small && (defaultOpen == null ? void 0 : defaultOpen.small) !== void 0) {
-        setOpen(id, defaultOpen == null ? void 0 : defaultOpen.small);
+        setOpen(slideOutId, 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(() => {
-      setOpen(id, false);
-      onDismiss == null ? void 0 : onDismiss();
-    }, [id, onDismiss, setOpen]);
-    return !hideLayout && /* @__PURE__ */ jsxRuntime.jsx(
-      SlideOut,
+        setOpen(slideOutId, defaultOpen == null ? void 0 : defaultOpen.large);
+      }
+    }, [defaultOpen, slideOutId, setOpen, small]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SlideOutRoot,
       {
-        className: classVarianceAuthority.cx(`overmap-layout-slideOut-${side}`, className),
-        side,
         ref,
         open,
-        initialWidth,
+        onOpenChange: handleOpenChange,
         modal: small,
-        onDismiss: handleDismiss,
-        position: small ? "absolute" : "relative",
-        ...rest,
-        children
+        hide: hide ?? hideLayout,
+        ...rest
       }
     );
   });
-  LayoutSlideOut.displayName = "LayoutSlideOut";
-  const LayoutSlideOutOverlay = React.memo((props) => {
-    const { ref, children, className, active, slideOutId, smallModeOnly = false, ...rest } = props;
-    const { small, hideLayout, isOpen } = useLayoutContext();
-    const showOverlay = React.useMemo(() => {
-      if (active !== void 0) return active;
-      if (hideLayout) return false;
-      if (smallModeOnly && !small) return false;
-      return isOpen(slideOutId);
-    }, [active, hideLayout, isOpen, slideOutId, small, smallModeOnly]);
-    return showOverlay && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classVarianceAuthority.cx("overmap-layout-overlay", "fixed inset-0", className), ref, ...rest, children });
+  LayoutSlideOutRoot.displayName = "LayoutSlideOutRoot";
+  const LayoutSlideOutTrigger = react.memo((props) => {
+    const { ref, slideOutId, children, ...rest } = props;
+    const { isOpen, setOpen } = useLayoutContext();
+    const open = isOpen(slideOutId);
+    const handleClick = react.useCallback(() => {
+      setOpen(slideOutId, !open);
+    }, [open, setOpen, slideOutId]);
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { "data-state": getOpenState(open), ref, onClick: handleClick, ...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":
-        return !open;
-      case "open":
-        return true;
-      case "close":
-        return false;
-    }
-  }
-  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(() => {
-      setOpen(slideOutId, nextStateBasedOnType(open, type));
-    }, [open, setOpen, slideOutId, type]);
-    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { "data-state": getOpenState(open), ref, onClick: handleClick, ...rest, children });
-  });
-  LayoutSlideOutTrigger.displayName = "SlideOutTrigger";
-  const Layout = {
-    Root: LayoutRoot,
-    Container: LayoutContainer,
-    SlideOutOverlay: LayoutSlideOutOverlay,
-    SlideOut: LayoutSlideOut,
-    SlideOutTrigger: LayoutSlideOutTrigger
+  LayoutSlideOutTrigger.displayName = "LayoutSlideOutTrigger";
+  const LayoutSlideOutViewport = react.memo((props) => {
+    const { ref, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(SlideOutViewport, { ref, ...rest });
+  });
+  LayoutSlideOutViewport.displayName = "LayoutSlideOutViewport";
+  const Layout = {
+    Root: LayoutRoot,
+    Container: LayoutContainer,
+    SlideOutClose: LayoutSlideOutClose,
+    SlideOutContent: LayoutSlideOutContent,
+    SlideOutHandle: LayoutSlideOutHandle,
+    SlideOutOverlay: LayoutSlideOutOverlay,
+    SlideOutRoot: LayoutSlideOutRoot,
+    SlideOutTrigger: LayoutSlideOutTrigger,
+    SlideOutViewport: LayoutSlideOutViewport
   };
   const linkCva = classVarianceAuthority.cva(["cursor-pointer"], {
     variants: {
@@ -2844,7 +2770,7 @@
       align: "left"
     }
   });
-  const Link = React.memo((props) => {
+  const Link = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -2876,27 +2802,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(
-          {
-            invisible: checked === false
-          },
-          className
-        ),
-        "data-state": getCheckedState$1(checked),
-        ...rest,
-        children: computedChildren
-      }
-    );
-  };
   const menuItem = classVarianceAuthority.cva(
     [
       "select-none",
@@ -2906,16 +2811,17 @@
       "rounded",
       "outline-none",
       "data-[disabled=true]:text-(--base-a8)",
-      "shrink-0"
+      "shrink-0",
+      "py-1"
     ],
     {
       variants: {
         size: {
-          xs: ["h-6", "gap-1.5", "px-3"],
-          sm: ["h-7", "gap-1.75", "px-3.5"],
-          md: ["h-8", "gap-2", "px-4"],
-          lg: ["h-9", "gap-2.25", "px-4.5"],
-          xl: ["h-10", "gap-2.5", "px-5"]
+          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: [
@@ -2937,14 +2843,14 @@
       }
     }
   );
-  const menuLabelCva = classVarianceAuthority.cva(["text-(--base-a10)", "flex", "items-center", "select-none"], {
+  const menuLabelCva = classVarianceAuthority.cva(["text-(--base-a10)", "flex", "items-center", "select-none", "py-1"], {
     variants: {
       size: {
-        xs: ["h-6", "gap-1.5", "px-3", "text-xs"],
-        sm: ["h-7", "gap-1.75", "px-3.5", "text-xs"],
-        md: ["h-8", "gap-2", "px-4", "text-sm"],
-        lg: ["h-9", "gap-2.25", "px-4.5", "text-base"],
-        xl: ["h-10", "gap-2.5", "px-5", "text-lg"]
+        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"]
       }
     },
     defaultVariants: {
@@ -3041,101 +2947,116 @@
       }
     }
   );
-  const MenuContext = React.createContext({});
-  const useMenuContext = () => React.useContext(MenuContext);
-  const DEFAULT_OFFSET = 5;
-  const MenuRoot = React.memo((props) => {
+  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,
-      side = "bottom",
-      align = "center",
-      offset,
-      loop = false,
-      modal = false,
-      // open state related props
-      open: controlledOpen,
-      onOpenChange,
-      defaultOpen
+      onSelect,
+      onClick,
+      onKeyDown,
+      closeOnSelect = true,
+      disabled = false,
+      ...rest
     } = props;
-    const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-    const [activeIndex, setActiveIndex] = 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
+    const { ref, index } = react$1.useListItem();
+    const mergeRefs2 = react$1.useMergeRefs([ref, forwardedRef]);
+    const handleClick = react.useCallback(
+      (e) => {
+        e.stopPropagation();
+        if (disabled) return;
+        onClick == null ? void 0 : onClick(e);
+        onSelect == null ? void 0 : onSelect();
+        if (closeOnSelect) setOpen(false);
+        if (closeRoot) rootMenuContext.setOpen(false);
+      },
+      [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
+    );
+    const handleKeyDown = react.useCallback(
+      (e) => {
+        if (disabled) return;
+        onKeyDown == null ? void 0 : onKeyDown(e);
+        if (TRIGGER_SELECT_KEYS.includes(e.key)) {
+          onSelect == null ? void 0 : onSelect();
+          if (closeOnSelect) setOpen(false);
+        }
+      },
+      [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
+    );
+    const isActive = 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(
+      "li",
+      {
+        className: classVarianceAuthority.cx(menuItem({ size, variant }), radiusCva({ radius, maxLarge: true }), className),
+        ref: mergeRefs2,
+        role: "menuitem",
+        "data-disabled": getBooleanState(disabled),
+        "aria-disabled": disabled,
+        "data-highlighted": isActive ? "" : void 0,
+        ...getItemProps({
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          tabIndex: isActive ? 0 : -1,
+          ...rest
         }),
-        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,
+        children: computedChildren
+      }
+    );
+  });
+  MenuItem.displayName = "MenuItem";
+  const MenuCheckboxItem = react.memo((props) => {
+    const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
+    const handleSelect = react.useCallback(() => {
+      onSelect == null ? void 0 : onSelect();
+      switch (checked) {
+        case true:
+          onCheckedChange(false);
+          break;
+        case "indeterminate":
+        case false:
+          onCheckedChange(true);
+          break;
+      }
+    }, [checked, onCheckedChange, onSelect]);
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { ref, onSelect: handleSelect, ...rest }) });
+  });
+  MenuCheckboxItem.displayName = "MenuCheckboxItem";
+  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 { ref: forwardedRef, children, disabled = false } = props;
+    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(
+      reactSlot.Slot,
       {
-        value: {
-          open,
-          setOpen,
-          refs,
-          context,
-          floatingStyles,
-          elementsRef,
-          getFloatingProps,
-          getItemProps,
-          getReferenceProps,
-          nodeId,
-          activeIndex,
-          setActiveIndex,
-          middlewareData,
-          side,
-          modal,
-          setTriggerType
-        },
+        ref: mergedRefs,
+        "aria-disabled": disabled,
+        "data-disabled": getBooleanState(disabled),
+        "data-state": getOpenState(open),
+        ...getReferenceProps({ disabled }),
         children
       }
-    ) });
+    );
   });
-  MenuRoot.displayName = "Root";
-  const MenuContentContext = React.createContext({});
-  const useMenuContentContext = () => React.useContext(MenuContentContext);
-  const MenuContent = React.memo((props) => {
+  MenuClickTrigger.displayName = "MenuClickTrigger";
+  const MenuContent = react.memo((props) => {
     var _a;
     const providerContext = useProvider();
     const {
@@ -3163,28 +3084,28 @@
       floatingStyles,
       modal,
       side
-    } = useMenuContext();
-    const computedFloatingStyles = React.useMemo(() => {
+    } = 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(
+    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,
+    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.FloatingFocusManager, { context, children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingList, { elementsRef, children: /* @__PURE__ */ jsxRuntime.jsx(
           MenuContentContext.Provider,
           {
             value: {
@@ -3235,242 +3156,36 @@
     ) }) });
   });
   MenuContent.displayName = "Menu.Content";
-  const SubContext = React.createContext({});
-  const useSubContext = () => React.useContext(SubContext);
-  const MenuSub = React.memo((props) => {
-    const {
-      children,
-      disabled = false,
-      side = "right",
-      align = "start",
-      closeRoot = false,
-      loop = false,
-      modal = false,
-      // open state related props
-      open: controlledOpen,
-      onOpenChange,
-      defaultOpen
-    } = props;
-    const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-    const nodeId = react.useFloatingNodeId();
-    const { refs, floatingStyles, context } = react.useFloating({
-      nodeId,
-      strategy: "fixed",
-      whileElementsMounted: react.autoUpdate,
-      open,
-      onOpenChange: (open2, _event, reason) => {
-        if (reason) setOpen(open2);
-      },
-      placement: side + (align !== "center" ? "-" + align : ""),
-      middleware: [
-        react.offset({ ...computeOffsets(side, align) }),
-        react.size({
-          padding: MENU_OVERFLOW_PADDING,
-          apply({ availableHeight, elements }) {
-            elements.floating.style.setProperty(
-              "--overmap-menu-available-height",
-              `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
-            );
-          }
-        }),
-        react.flip(),
-        react.shift({ padding: MENU_OVERFLOW_PADDING }),
-        react.hide()
-      ]
-    });
-    const dismiss = react.useDismiss(context, {
-      bubbles: closeRoot,
-      outsidePress: closeRoot
-    });
-    const hover = react.useHover(context, {
-      restMs: 50,
-      handleClose: react.safePolygon({
-        blockPointerEvents: true,
-        requireIntent: false
-      }),
-      enabled: !disabled
-    });
-    const click = react.useClick(context, {
-      enabled: !disabled
-    });
-    const elementsRef = React.useRef([]);
-    const [activeIndex, setActiveIndex] = React.useState(null);
-    const listNavigation = react.useListNavigation(context, {
-      listRef: elementsRef,
-      nested: true,
-      activeIndex,
-      onNavigate: setActiveIndex,
-      loop,
-      rtl: side === "left"
-    });
-    const { getFloatingProps, getItemProps, getReferenceProps } = react.useInteractions([
-      listNavigation,
-      dismiss,
-      hover,
-      click
-    ]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SubContext.Provider,
-      {
-        value: {
-          open,
-          setOpen,
-          nodeId,
-          refs,
-          floatingStyles,
-          context,
-          elementsRef,
-          activeIndex,
-          setActiveIndex,
-          getFloatingProps,
-          getItemProps,
-          getReferenceProps,
-          disabled,
-          side,
-          closeRoot,
-          modal
-        },
-        children
-      }
-    );
-  });
-  MenuSub.displayName = "SubMenu";
-  const TRIGGER_SELECT_KEYS = ["Enter", " "];
-  const MenuItem = React.memo((props) => {
-    const rootMenuContext = useMenuContext();
-    const { getItemProps, activeIndex, setOpen, size, variant, radius } = useMenuContentContext();
-    const { closeRoot } = useSubContext();
-    const {
-      ref: forwardedRef,
-      className,
-      children,
-      onSelect,
-      onClick,
-      onKeyDown,
-      closeOnSelect = true,
-      disabled = false,
-      ...rest
-    } = props;
-    const { ref, index } = react.useListItem();
-    const mergeRefs2 = react.useMergeRefs([ref, forwardedRef]);
-    const handleClick = React.useCallback(
-      (e) => {
-        e.stopPropagation();
-        if (disabled) return;
-        onClick == null ? void 0 : onClick(e);
-        onSelect == null ? void 0 : onSelect();
-        if (closeOnSelect) setOpen(false);
-        if (closeRoot) rootMenuContext.setOpen(false);
-      },
-      [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
-    );
-    const handleKeyDown = React.useCallback(
-      (e) => {
-        if (disabled) return;
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        if (TRIGGER_SELECT_KEYS.includes(e.key)) {
-          onSelect == null ? void 0 : onSelect();
-          if (closeOnSelect) setOpen(false);
-        }
-      },
-      [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
-    );
-    const isActive = 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(
-      "li",
-      {
-        className: classVarianceAuthority.cx(menuItem({ size, variant }), radiusCva({ radius, maxLarge: true }), className),
-        ref: mergeRefs2,
-        role: "menuitem",
-        "data-disabled": getBooleanState(disabled),
-        "aria-disabled": disabled,
-        "data-highlighted": isActive ? "" : void 0,
-        ...getItemProps({
-          onClick: handleClick,
-          onKeyDown: handleKeyDown,
-          tabIndex: isActive ? 0 : -1,
-          ...rest
-        }),
-        children: computedChildren
-      }
-    );
-  });
-  MenuItem.displayName = "MenuItem";
-  const MenuCheckboxItem = React.memo((props) => {
-    const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
-    const handleSelect = React.useCallback(() => {
-      onSelect == null ? void 0 : onSelect();
-      switch (checked) {
-        case true:
-          onCheckedChange(false);
-          break;
-        case "indeterminate":
-        case false:
-          onCheckedChange(true);
-          break;
-      }
-    }, [checked, onCheckedChange, onSelect]);
-    return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { ref, onSelect: handleSelect, ...rest }) });
-  });
-  MenuCheckboxItem.displayName = "MenuCheckboxItem";
-  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 { ref: forwardedRef, children, disabled = false } = props;
-    const { getReferenceProps, refs, setTriggerType, open } = useMenuContext();
-    const mergedRefs = react.useMergeRefs([refs.setReference, forwardedRef]);
-    React.useEffect(() => {
-      setTriggerType("click");
-    }, [setTriggerType]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactSlot.Slot,
-      {
-        ref: mergedRefs,
-        "aria-disabled": disabled,
-        "data-disabled": getBooleanState(disabled),
-        "data-state": getOpenState(open),
-        ...getReferenceProps({ disabled }),
-        children
-      }
-    );
-  });
-  MenuClickTrigger.displayName = "MenuClickTrigger";
-  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(() => {
-      setTriggerType("context");
-    }, [setTriggerType]);
-    const handleContextMenu = React.useCallback(
-      (e) => {
-        const { clientY, clientX } = e;
-        if (!disabled && ref.current) {
-          e.preventDefault();
-          refs.setPositionReference({
-            getBoundingClientRect() {
-              return {
-                x: clientX,
-                y: clientY,
-                top: clientY,
-                left: clientX,
-                height: 0,
-                width: 0,
-                bottom: clientY,
-                right: clientX
-              };
-            },
-            contextElement: ref.current
-          });
-          setOpen(true);
-        }
+  const MenuContextTrigger = react.memo((props) => {
+    const { ref: forwardedRef, children, disabled = false } = props;
+    const ref = react.useRef(null);
+    const { setOpen, refs, setTriggerType, open } = react.use(MenuContext);
+    const mergedRefs = react$1.useMergeRefs([forwardedRef, ref]);
+    react.useEffect(() => {
+      setTriggerType("context");
+    }, [setTriggerType]);
+    const handleContextMenu = react.useCallback(
+      (e) => {
+        const { clientY, clientX } = e;
+        if (!disabled && ref.current) {
+          e.preventDefault();
+          refs.setPositionReference({
+            getBoundingClientRect() {
+              return {
+                x: clientX,
+                y: clientY,
+                top: clientY,
+                left: clientX,
+                height: 0,
+                width: 0,
+                bottom: clientY,
+                right: clientX
+              };
+            },
+            contextElement: ref.current
+          });
+          setOpen(true);
+        }
       },
       [disabled, refs, setOpen]
     );
@@ -3488,24 +3203,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("");
       };
@@ -3526,20 +3241,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";
@@ -3547,40 +3262,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(
-          {
-            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(
@@ -3596,26 +3289,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);
@@ -3625,7 +3317,101 @@
     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",
@@ -3642,13 +3428,13 @@
   MenuScroll.displayName = "MenuScroll";
   const MenuSelectAllItem = genericMemo((props) => {
     const { ref, children, onSelect, closeOnSelect = false, ...rest } = props;
-    const { allSelected, someSelected, toggleSelectAll } = React.use(MultiSelectContext);
+    const { allSelected, someSelected, toggleSelectAll } = react.use(MultiSelectContext);
     const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
-    const handleSelect = React.useCallback(() => {
+    const handleSelect = react.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
       toggleSelectAll();
     }, [onSelect, toggleSelectAll]);
-    const computedChildren = React.useMemo(() => {
+    const computedChildren = react.useMemo(() => {
       return typeof children === "function" ? ({ active }) => children({ selected: selectedState, active }) : children;
     }, [children, selectedState]);
     return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3663,6 +3449,11 @@
       }
     ) });
   });
+  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(
@@ -3677,13 +3468,13 @@
   });
   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(() => {
+    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(() => {
+    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(
@@ -3699,23 +3490,140 @@
       }
     ) });
   });
-  const MenuSeparator = React.memo((props) => {
+  const MenuSeparator = react.memo((props) => {
     const { ref, className, ...rest } = props;
-    const { size } = useMenuContentContext();
+    const { size } = react.use(MenuContentContext);
     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,
+  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,
@@ -3723,17 +3631,17 @@
       floatingStyles,
       setOpen,
       side
-    } = useSubContext();
-    const wrapperRef = React.useRef(null);
-    const mergeRefs2 = react.useMergeRefs([refs.setFloating, wrapperRef]);
-    const computedFloatingStyles = React.useMemo(() => {
+    } = 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.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(
+    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: {
@@ -3749,158 +3657,843 @@
           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
-              }
-            )
-          }
-        )
+        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: mergeRefs([ref, internalRef]),
+        className: classVarianceAuthority.cx(menuRootCva({ size }), radiusCva({ radius, maxLarge: true }), className),
+        role: "menu",
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        "aria-activedescendant": activeItemId ?? void 0,
+        "data-accent-color": accentColor,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(MenuRootContext, { value: contextValue, children })
+      }
+    );
+  });
+  MenuV2Root.displayName = "MenuRoot";
+  const MenuV2SelectedIndicator = react.memo((props) => {
+    const { ref, children, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, { ref, ...rest, children });
+  });
+  MenuV2SelectedIndicator.displayName = "MenuCheckboxItemIndicator";
+  const MenuV2SelectGroup = genericMemo(function MenuSelectGroup2(props) {
+    const { ref, children, required, defaultValue, value, onValueChange, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(MenuV2Group, { ref, ...rest, children: required ? /* @__PURE__ */ jsxRuntime.jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsxRuntime.jsx(
+      SingleSelectNotRequiredProvider,
+      {
+        defaultValue,
+        value,
+        onValueChange,
+        children
+      }
+    ) });
+  });
+  const MenuV2SelectItem = genericMemo(function(props) {
+    const { ref, value, onSelect, children, ...rest } = props;
+    const { selected, selectValue } = react.use(SelectContext);
+    const isSelected = selected(value);
+    const handleSelect = react.useCallback(
+      (e) => {
+        onSelect == null ? void 0 : onSelect(e);
+        if (e.defaultPrevented) return;
+        selectValue(value);
+      },
+      [onSelect, selectValue, value]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MenuV2Item,
+      {
+        ref,
+        role: "menuitemcheckbox",
+        onSelect: handleSelect,
+        "data-state": getSelectedState(isSelected),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext, { value: isSelected, children })
+      }
+    );
+  });
+  const MenuV2Separator = react.memo((props) => {
+    const { ref, className, ...rest } = props;
+    const { size } = react.use(MenuRootContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixSeparator__namespace.Root, { className: classVarianceAuthority.cx(menuSeparatorCva({ size }), className), ref, ...rest });
+  });
+  MenuV2Separator.displayName = "MenuSeparator";
+  const MenuV2 = {
+    Root: MenuV2Root,
+    Group: MenuV2Group,
+    GroupLabel: MenuV2GroupLabel,
+    Item: MenuV2Item,
+    Separator: MenuV2Separator,
+    SelectGroup: MenuV2SelectGroup,
+    SelectItem: MenuV2SelectItem,
+    MultiSelectGroup: MenuV2MultiSelectGroup,
+    MultiSelectItem: MenuV2MultiSelectItem,
+    SelectAllItem: MenuV2SelectAllItem,
+    SelectedIndicator: MenuV2SelectedIndicator,
+    CheckboxItem: MenuV2CheckboxItem,
+    CheckedIndicator: MenuV2CheckedIndicator,
+    Pages: MenuV2Pages,
+    Page: MenuV2Page,
+    PageTriggerItem: MenuV2PageTriggerItem
+  };
+  const OneTimePasswordFieldHiddenInput = react.memo((props) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixOneTimePasswordField__namespace.HiddenInput, { ...props });
+  });
+  OneTimePasswordFieldHiddenInput.displayName = "OneTimePasswordFieldHiddenInput";
+  const OneTimePasswordFieldContext = react.createContext({});
+  const onetimePasswordFieldInput = classVarianceAuthority.cva(
+    [
+      "flex",
+      "items-center",
+      "justify-center",
+      "text-center",
+      "focus-visible:outline-2",
+      "focus-visible:outline-(--accent-8)",
+      "focus-visible:-outline-offset-1",
+      "disabled:opacity-50",
+      "disabled:pointer-events-none",
+      "transition-[background,color,box-shadow]"
+    ],
+    {
+      variants: {
+        variant: {
+          surface: [
+            "inset-ring",
+            "inset-ring-(--accent-a7)",
+            "bg-(--accent-surface)",
+            "text-(--accent-a12)",
+            "placeholder-(--accent-12)",
+            "placeholder:opacity-60",
+            "selection:bg-(--accent-a5)"
+          ],
+          soft: [
+            "bg-(--accent-a3)",
+            "text-(--accent-12)",
+            "placeholder-(--accent-12)",
+            "placeholder:opacity-60",
+            "selection:bg-(--accent-a5)"
+          ],
+          outline: [
+            "inset-ring",
+            "inset-ring-(--base-a7)",
+            "bg-transparent",
+            "text-(--base-12)",
+            "placeholder-(--base-a9)",
+            "selection:bg-(--accent-a5)"
+          ],
+          ghost: ["bg-transparent", "text-(--base-12)", 'placeholder-(--base-a9)", "selection:bg-(--accent-a5)']
+        },
+        size: {
+          xs: ["size-6 w-6", "text-xs"],
+          sm: ["size-7 w-7", "text-sm"],
+          md: ["size-8 w-8", "text-base"],
+          lg: ["size-9 w-9", "text-lg"],
+          xl: ["size-10 w-10", "text-xl"]
+        }
+      },
+      defaultVariants: {
+        size: "md",
+        variant: "surface"
       }
-    ) }) }) }) });
-  });
-  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]);
+    }
+  );
+  const OneTimePasswordFieldInput = react.memo((props) => {
+    const { ref, className, ...rest } = props;
+    const { variant, size, radius, accentColor } = react.use(OneTimePasswordFieldContext);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      MenuItem,
+      RadixOneTimePasswordField__namespace.Input,
       {
-        ref: mergedRefs,
-        closeOnSelect: false,
-        "aria-haspopup": "menu",
-        "data-state": getOpenState(open),
-        disabled,
-        ...getReferenceProps(rest),
-        children
+        ref,
+        className: classVarianceAuthority.cx(
+          onetimePasswordFieldInput({ variant, size }),
+          radiusCva({ radius, maxLarge: true }),
+          className
+        ),
+        "data-accent-color": accentColor,
+        ...rest
       }
     );
   });
-  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
+  OneTimePasswordFieldInput.displayName = "OneTimePasswordFieldInput";
+  const OneTimePasswordFieldRoot = react.memo((props) => {
+    const providerContext = useProvider();
+    const {
+      ref,
+      children,
+      variant = "surface",
+      size = "md",
+      radius = providerContext.radius,
+      accentColor = providerContext.accentColor,
+      ...rest
+    } = props;
+    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";
+  const OneTimePasswordField = {
+    HiddenInput: OneTimePasswordFieldHiddenInput,
+    Input: OneTimePasswordFieldInput,
+    Root: OneTimePasswordFieldRoot
   };
-  const RiIcon = React.memo((props) => {
-    const { ref, icon, size, title, color, className, ...rest } = props;
-    const Icon = RiIcons__namespace[icon];
-    if (!Icon) console.error(`Icon ${icon} not found`);
-    return Icon ? (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: classVarianceAuthority.cx("shrink-0", className), ref, title, size, color, ...rest })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      RiIcons.RiQuestionMark,
+  const OverlayClose = react.memo((props) => {
+    const { ref, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { ref, ...rest });
+  });
+  OverlayClose.displayName = "OverlayClose";
+  const overlayContentCva = classVarianceAuthority.cva([
+    "fixed",
+    "inset-0",
+    "bg-(--color-background)",
+    "data-[state='closed']:animate-out",
+    "data-[state='closed']:fade-out-0",
+    "data-[state='closed']:zoom-out-95",
+    "data-[state='open']:animate-in",
+    "data-[state='open']:fade-in-0",
+    "data-[state='open']:zoom-in-95"
+  ]);
+  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,
       {
-        className: classVarianceAuthority.cx("shrink-0", className),
+        className: classVarianceAuthority.cx(overlayContentCva(), className),
         ref,
-        title,
-        size,
-        color,
+        "data-floating-content": "",
         ...rest
       }
-    );
+    ) });
   });
-  RiIcon.displayName = "RiIcon";
+  OverlayContent.displayName = "OverlayContent";
+  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) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Root, { ...props });
+  });
+  OverlayRoot.displayName = "OverlayRoot";
+  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 { ref, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { ref, ...rest });
+  });
+  OverlayTrigger.displayName = "OverlayTrigger";
+  const Overlay = {
+    Root: OverlayRoot,
+    Content: OverlayContent,
+    Title: OverlayTitle,
+    Description: OverlayDescription,
+    Trigger: OverlayTrigger,
+    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]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full gap-2", style: outerFlexStyles, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiAlertLine", size: height, style: centerStyles }),
+      /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.AlertTriangle, size: height, style: centerStyles }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { lineHeight: height, ...centerStyles }, children: message }),
-      /* @__PURE__ */ jsxRuntime.jsx(IconButton, { "aria-label": "Try again", variant: "soft", onClick: handleRetry, style: centerStyles, children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiLoopLeftLine", size: height }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconButton, { "aria-label": "Try again", variant: "soft", onClick: handleRetry, style: centerStyles, children: /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.RotateCcw, size: height }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexGrow: 1 } })
     ] });
   });
   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) => {
-      console.error("Error in OvermapErrorBoundary:", error, info);
+    const [attempt, setAttempt] = react.useState(0);
+    const logError = react.useCallback((error2, info2) => {
+      console.error("Error in OvermapErrorBoundary:", error2, info2);
       setAttempt((prev) => prev + 1);
     }, []);
-    const handleRetry = React.useCallback(() => {
+    const handleRetry = react.useCallback(() => {
       setAttempt((prev) => prev + 1);
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3914,7 +4507,7 @@
     );
   });
   OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
-  const PopoverArrow = React.memo((props) => {
+  const PopoverArrow = react.memo((props) => {
     const { ref, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Arrow, { className: classVarianceAuthority.cx("fill-(--base-6)", className), ref, ...rest, children });
   });
@@ -3933,7 +4526,7 @@
       size: "md"
     }
   });
-  const PopoverContent = React.memo((props) => {
+  const PopoverContent = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4008,7 +4601,7 @@
       }
     }
   );
-  const Progress = React.memo((props) => {
+  const Progress = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4020,7 +4613,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const computedStyle = React.useMemo(
+    const computedStyle = react.useMemo(
       () => ({
         ...style,
         "--progress-value": rest.value ?? 0,
@@ -4041,7 +4634,7 @@
     );
   });
   Progress.displayName = "Progress";
-  const RadioCardsContext = React.createContext({});
+  const RadioCardsContext = react.createContext({});
   const radioCardsRootCva = classVarianceAuthority.cva([], {
     variants: {
       size: {
@@ -4101,8 +4694,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,
@@ -4114,7 +4707,7 @@
     );
   });
   RadioCardsItem.displayName = "RadioCardsItem";
-  const RadioCardsRoot = React.memo((props) => {
+  const RadioCardsRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       className,
@@ -4125,7 +4718,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const contextValue = React.useMemo(
+    const contextValue = react.useMemo(
       () => ({
         variant,
         size,
@@ -4148,7 +4741,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,
@@ -4161,7 +4754,7 @@
     );
   });
   RadioGroupIndicator.displayName = "RadioGroupIndicator";
-  const RadioGroupContext = React.createContext({});
+  const RadioGroupContext = react.createContext({});
   const radioGroupItem = classVarianceAuthority.cva(
     [
       "inline-flex",
@@ -4205,8 +4798,8 @@
       }
     }
   );
-  const RadioGroupItem = React.memo((props) => {
-    const radioGroupContext = React.useContext(RadioGroupContext);
+  const RadioGroupItem = react.memo((props) => {
+    const radioGroupContext = react.useContext(RadioGroupContext);
     const {
       ref,
       children,
@@ -4218,7 +4811,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,
@@ -4237,6 +4830,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"],
     {
@@ -4380,15 +5032,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(
@@ -4401,7 +5053,7 @@
     );
   });
   SegmentedControlItem.displayName = "SegmentedControlItem";
-  const SegmentedControlRoot = React.memo((props) => {
+  const SegmentedControlRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4435,7 +5087,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"],
     {
@@ -4583,7 +5235,7 @@
       }
     }
   );
-  const SegmentedTabsList = React.memo((props) => {
+  const SegmentedTabsList = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -4595,7 +5247,7 @@
       accentColor = providerContext.accentColor,
       ...rest
     } = props;
-    const contextValue = React.useMemo(
+    const contextValue = react.useMemo(
       () => ({
         size,
         variant,
@@ -4615,14 +5267,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,
       {
@@ -4722,7 +5374,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,
@@ -4944,7 +5596,7 @@
       }
     }
   );
-  const Slider = React.memo((props) => {
+  const Slider = react.memo((props) => {
     const providerContext = useProvider();
     const {
       className,
@@ -4982,11 +5634,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",
@@ -5046,7 +5698,7 @@
       }
     }
   );
-  const SwitchRoot = React.memo((props) => {
+  const SwitchRoot = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -5069,9 +5721,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,
       {
@@ -5086,12 +5738,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: {
@@ -5107,7 +5759,7 @@
       }
     }
   });
-  const tableCellCva = classVarianceAuthority.cva([], {
+  const tableHeaderCellCva = classVarianceAuthority.cva([], {
     variants: {
       variant: {
         surface: [],
@@ -5132,29 +5784,54 @@
       }
     }
   });
-  const TableCell = React.memo((props) => {
+  const tableCellCva = classVarianceAuthority.cva([], {
+    variants: {
+      variant: {
+        surface: [],
+        ghost: []
+      },
+      cell: {
+        true: [],
+        false: []
+      },
+      size: {
+        xs: ["p-1"],
+        sm: ["p-2"],
+        md: ["p-3"],
+        lg: ["p-4"],
+        xl: ["p-5"]
+      },
+      border: {
+        grid: ["box-border", "border", "border-(--accent-a6)"],
+        row: ["box-border", "border-b", "border-(--accent-a6)"],
+        col: ["box-border", "border-x", "border-(--accent-a6)"],
+        none: []
+      }
+    }
+  });
+  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);
-    return /* @__PURE__ */ jsxRuntime.jsx("th", { ref, className: classVarianceAuthority.cx(tableCellCva({ size, border, cell: false, variant }), className), ...rest });
+    const { size, border, variant } = react.useContext(TableContext);
+    return /* @__PURE__ */ jsxRuntime.jsx("th", { ref, className: classVarianceAuthority.cx(tableHeaderCellCva({ 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,
@@ -5182,17 +5859,17 @@
     );
   });
   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";
+  TableRowHeaderCell.displayName = "TableRowHeaderCell";
   const Table = {
     Root: TableRoot,
     Header: TableHeader,
@@ -5203,7 +5880,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: {
@@ -5253,7 +5930,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(
@@ -5268,19 +5945,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 });
@@ -5322,7 +5999,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",
@@ -5403,7 +6080,7 @@
       }
     }
   );
-  const TextArea = React.memo((props) => {
+  const TextArea = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -5425,170 +6102,98 @@
     );
   });
   TextArea.displayName = "TextArea";
-  const toastCva = classVarianceAuthority.cva(
-    [
-      "shadow-md",
-      "duration-200",
-      "data-[state='open']:animate-in",
-      "data-[state='open']:fade-in-0",
-      "data-[state='open']:zoom-in-95",
-      "data-[state='closed']:animate-out",
-      "data-[state='closed']:fade-out-0",
-      "data-[state='closed']:zoom-out-95"
-    ],
-    {
-      variants: {
-        variant: {
-          surface: ["bg-(--accent-1)", "text-(--accent-11)", "ring-1", "ring-inset", "ring-(--accent-6)"],
-          soft: ["bg-(--accent-1)", "text-(--accent-11)"]
-        },
-        size: {
-          xs: ["text-xs", "p-2"],
-          sm: ["text-sm", "p-3"],
-          md: ["text-base", "p-4"],
-          lg: ["text-lg", "p-5"],
-          xl: ["text-xl", "p-6"]
-        }
-      },
-      defaultVariants: {
-        variant: "surface",
-        size: "md"
-      }
-    }
-  );
-  const _Toast = function Toast2(props) {
-    const { radius, ...restProviderContext } = useProvider();
-    const {
-      ref,
-      title,
-      description,
-      icon,
-      size = "md",
-      accentColor = restProviderContext.accentColor,
-      variant,
-      onClose,
-      sensitivity,
-      action,
-      ...rest
-    } = props;
-    const [open, setOpen] = React.useState(true);
-    const handleOpenChange = React.useCallback(
-      (open2) => {
-        if (!open2 && onClose) onClose();
-        setOpen(open2);
-      },
-      [onClose]
-    );
+  const CustomToast = react.memo((props) => {
+    const { toastId, title, description, icon, accentColor } = props;
+    const { radius } = useProvider();
+    const handleClose = react.useCallback(() => {
+      sonner.toast.dismiss(toastId);
+    }, [toastId]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixToast__namespace.Root,
+      "div",
       {
         className: classVarianceAuthority.cx(
-          "flex w-max max-w-full items-center gap-4",
-          toastCva({ size, variant }),
+          "flex items-center gap-2  bg-(--base-2) p-4 ring ring-(--base-6) shadow-md max-w-full max-h-full",
           radiusCva({ radius, maxLarge: true })
         ),
-        ref,
-        open,
-        type: sensitivity,
-        onOpenChange: handleOpenChange,
         "data-accent-color": accentColor,
-        "data-floating-content": "",
-        ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex grow items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 grow min-w-0", children: [
             icon,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Title, { className: "font-medium", children: title }),
-                /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Description, { children: description })
-              ] }),
-              action && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { className: "w-max", altText: action.altText, asChild: true, children: action.content })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 select-none", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "truncate", children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(Text, { accentColor: "base", size: "sm", weight: "regular", children: description })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { size, "aria-label": "Close", variant: "ghost", accentColor, children: /* @__PURE__ */ jsxRuntime.jsx(hi.HiX, {}) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              type: "button",
+              onClick: handleClose,
+              "aria-label": "Close",
+              accentColor: "base",
+              variant: "ghost",
+              size: "sm",
+              children: /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.X })
+            }
+          )
         ]
       }
     );
+  });
+  const basic = (options) => {
+    const { icon, description, title, ...rest } = options;
+    return sonner.toast.custom(
+      (id) => /* @__PURE__ */ jsxRuntime.jsx(CustomToast, { toastId: id, icon, description, title }),
+      rest
+    );
   };
-  const Toast = React.memo(_Toast);
-  Toast.displayName = "Toast";
-  const ToastContext = React.createContext({});
-  const useToast = () => {
-    const context = React.useContext(ToastContext);
-    if (!context) {
-      throw new Error("useToast must be used within a ToastProvider");
-    }
-    return context;
+  const success = (options) => {
+    const { icon = /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.Check, color: "var(--accent-9)" }), description, title, ...rest } = options;
+    return sonner.toast.custom(
+      (id) => /* @__PURE__ */ jsxRuntime.jsx(CustomToast, { accentColor: "success", toastId: id, icon, description, title }),
+      rest
+    );
   };
-  const WORDS_PER_SECOND = 240 / 60;
-  const MIN_DURATION = 5e3;
-  const calculatedDuration = (toast) => {
-    if (toast.duration && toast.duration >= MIN_DURATION) return toast.duration;
-    const words = toast.description.split(" ").length + toast.title.split(" ").length;
-    return MIN_DURATION + words / WORDS_PER_SECOND;
+  const info = (options) => {
+    const { icon = /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.InfoIcon, color: "var(--base-11)" }), description, title, ...rest } = options;
+    return sonner.toast.custom(
+      (id) => /* @__PURE__ */ jsxRuntime.jsx(CustomToast, { toastId: id, icon, description, title }),
+      rest
+    );
   };
-  exports2.unsafeShowToast = void 0;
-  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) => {
-      setToasts((prevToasts) => {
-        const toast = prevToasts.find((toast2) => toast2.id === id);
-        if (toast && reason === 0) clearTimeout(toast.timeout);
-        return prevToasts.filter((toast2) => toast2.id !== id);
-      });
-      if (callback) callback();
-    }, []);
-    const toastContextValue = React.useMemo(() => {
-      let counter = 0;
-      const showToast = (toastProps) => {
-        const duration = calculatedDuration(toastProps);
-        const id = counter.toString();
-        counter += 1;
-        const pending = setTimeout(() => handleCloseToast(id, 1, toastProps.onClose), duration);
-        setToasts((prevToasts) => [...prevToasts, { ...toastProps, timeout: pending, duration, id }]);
-      };
-      const showPrimary = (toastProps) => showToast(toastProps);
-      const showSuccess = (toastProps) => showToast({ ...toastProps, accentColor: "success" });
-      const showError = (toastProps) => showToast({ ...toastProps, accentColor: "danger" });
-      const showInfo = (toastProps) => showToast({ ...toastProps, accentColor: "base" });
-      const showWarning = (toastProps) => showToast({ ...toastProps, accentColor: "warning" });
-      exports2.unsafeShowToast = showToast;
-      return {
-        showToast,
-        showPrimary,
-        showSuccess,
-        showError,
-        showInfo,
-        showWarning
-      };
-    }, [handleCloseToast]);
-    React.useEffect(() => {
-      return () => {
-        for (const { timeout } of toasts) clearTimeout(timeout);
-      };
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Provider, { value: toastContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixToast.ToastProvider, { ...rest, children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        RadixToast.ToastViewport,
-        {
-          className: classVarianceAuthority.cx(
-            "fixed top-0 right-0 z-[2147483647] flex w-full max-w-md list-none flex-col items-end gap-3 overflow-x-hidden overflow-y-auto p-5 outline-none",
-            className
-          ),
-          hotkey
-        }
-      ),
-      toasts.map(({ id, onClose, ...toastProps }) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toastProps, onClose: () => handleCloseToast(id, 0, onClose) }, id))
-    ] }) });
+  const warning = (options) => {
+    const { icon = /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.TriangleAlertIcon, color: "var(--accent-9)" }), description, title, ...rest } = options;
+    return sonner.toast.custom(
+      (id) => /* @__PURE__ */ jsxRuntime.jsx(CustomToast, { accentColor: "warning", toastId: id, icon, description, title }),
+      rest
+    );
+  };
+  const error = (options) => {
+    const { icon = /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.CircleAlertIcon, color: "var(--accent-9)" }), description, title, ...rest } = options;
+    return sonner.toast.custom(
+      (id) => /* @__PURE__ */ jsxRuntime.jsx(CustomToast, { accentColor: "danger", toastId: id, icon, description, title }),
+      rest
+    );
+  };
+  const toast = Object.assign(
+    basic,
+    {
+      success,
+      info,
+      warning,
+      error,
+      custom: sonner.toast.custom,
+      dismiss: sonner.toast.dismiss
+    },
+    { getHistory: sonner.toast.getHistory, getToasts: sonner.toast.getToasts }
+  );
+  const TOAST_OPTIONS = {
+    unstyled: true
+  };
+  const Toaster = react.memo((props) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(sonner.Toaster, { toastOptions: TOAST_OPTIONS, richColors: false, closeButton: false, theme: "system", ...props });
   });
-  ToastProvider.displayName = "ToastProvider";
+  Toaster.displayName = "Toaster";
   const toggleButtonCva = classVarianceAuthority.cva(
     [
       "flex",
@@ -5709,7 +6314,7 @@
       }
     }
   );
-  const BaseToggleButton = React.memo((props) => {
+  const BaseToggleButton = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -5732,15 +6337,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",
@@ -5856,8 +6461,8 @@
       ]
     }
   );
-  const ToggleGroupBaseItem = React.memo((props) => {
-    const toggleGroupContext = React.use(ToggleGroupContext);
+  const ToggleGroupBaseItem = react.memo((props) => {
+    const toggleGroupContext = react.use(ToggleGroupContext);
     const {
       ref,
       className,
@@ -5883,15 +6488,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,
@@ -5902,7 +6507,7 @@
       size = "md",
       ...rest
     } = props;
-    const contextValue = React.useMemo(
+    const contextValue = react.useMemo(
       () => ({
         variant,
         size,
@@ -5919,7 +6524,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 });
   });
@@ -5961,7 +6566,7 @@
       }
     }
   );
-  const TooltipContent = React.memo((props) => {
+  const TooltipContent = react.memo((props) => {
     const providerContext = useProvider();
     const {
       ref,
@@ -6013,7 +6618,6 @@
   exports2.CheckboxGroupSelectAllItem = CheckboxGroupSelectAllItem;
   exports2.CheckboxIndicator = CheckboxIndicator;
   exports2.CheckboxRoot = CheckboxRoot;
-  exports2.CollapsibleTree = CollapsibleTree;
   exports2.CommandMenu = CommandMenu;
   exports2.CommandMenuCheckboxIndicator = CommandMenuCheckboxIndicator;
   exports2.CommandMenuCheckboxItem = CommandMenuCheckboxItem;
@@ -6054,12 +6658,15 @@
   exports2.InputSlot = InputSlot;
   exports2.Layout = Layout;
   exports2.LayoutContainer = LayoutContainer;
-  exports2.LayoutContext = LayoutContext;
   exports2.LayoutRoot = LayoutRoot;
-  exports2.LayoutSlideOut = LayoutSlideOut;
+  exports2.LayoutSlideOutClose = LayoutSlideOutClose;
+  exports2.LayoutSlideOutContent = LayoutSlideOutContent;
+  exports2.LayoutSlideOutHandle = LayoutSlideOutHandle;
   exports2.LayoutSlideOutOverlay = LayoutSlideOutOverlay;
+  exports2.LayoutSlideOutRoot = LayoutSlideOutRoot;
   exports2.LayoutSlideOutTrigger = LayoutSlideOutTrigger;
   exports2.Link = Link;
+  exports2.LuIcon = LuIcon;
   exports2.Menu = Menu;
   exports2.MenuCheckboxItem = MenuCheckboxItem;
   exports2.MenuCheckboxItemIndicator = MenuCheckboxItemIndicator;
@@ -6087,7 +6694,35 @@
   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;
+  exports2.OneTimePasswordFieldInput = OneTimePasswordFieldInput;
+  exports2.OneTimePasswordFieldRoot = OneTimePasswordFieldRoot;
+  exports2.Overlay = Overlay;
+  exports2.OverlayClose = OverlayClose;
+  exports2.OverlayContent = OverlayContent;
+  exports2.OverlayDescription = OverlayDescription;
+  exports2.OverlayRoot = OverlayRoot;
+  exports2.OverlayTitle = OverlayTitle;
+  exports2.OverlayTrigger = OverlayTrigger;
   exports2.OvermapErrorBoundary = OvermapErrorBoundary;
   exports2.Popover = Popover;
   exports2.PopoverArrow = PopoverArrow;
@@ -6101,7 +6736,10 @@
   exports2.RadioGroupIndicator = RadioGroupIndicator;
   exports2.RadioGroupItem = RadioGroupItem;
   exports2.RadioGroupRoot = RadioGroupRoot;
-  exports2.RiIcon = RiIcon;
+  exports2.Rating = Rating;
+  exports2.RatingItem = RatingItem;
+  exports2.RatingItemIndicator = RatingItemIndicator;
+  exports2.RatingRoot = RatingRoot;
   exports2.SegmentedControl = SegmentedControl;
   exports2.SegmentedControlItem = SegmentedControlItem;
   exports2.SegmentedControlRoot = SegmentedControlRoot;
@@ -6109,9 +6747,15 @@
   exports2.SegmentedTabsList = SegmentedTabsList;
   exports2.SegmentedTabsRoot = SegmentedTabsRoot;
   exports2.SegmentedTabsTrigger = SegmentedTabsTrigger;
-  exports2.SelectedIndicatorContext = SelectedIndicatorContext;
   exports2.Separator = Separator;
   exports2.SlideOut = SlideOut;
+  exports2.SlideOutClose = SlideOutClose;
+  exports2.SlideOutContent = SlideOutContent;
+  exports2.SlideOutHandle = SlideOutHandle;
+  exports2.SlideOutOverlay = SlideOutOverlay;
+  exports2.SlideOutRoot = SlideOutRoot;
+  exports2.SlideOutTrigger = SlideOutTrigger;
+  exports2.SlideOutViewport = SlideOutViewport;
   exports2.Slider = Slider;
   exports2.Spinner = Spinner;
   exports2.Switch = Switch;
@@ -6132,9 +6776,7 @@
   exports2.TabsTrigger = TabsTrigger;
   exports2.Text = Text;
   exports2.TextArea = TextArea;
-  exports2.Toast = Toast;
-  exports2.ToastContext = ToastContext;
-  exports2.ToastProvider = ToastProvider;
+  exports2.Toaster = Toaster;
   exports2.ToggleButton = ToggleButton;
   exports2.ToggleGroup = ToggleGroup;
   exports2.ToggleGroupIconItem = ToggleGroupIconItem;
@@ -6146,23 +6788,23 @@
   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.toast = toast;
   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;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });