@overmap-ai/blocks 1.0.40-overlay.1 → 1.0.40-slide-out-resize-handle.0

package/dist/blocks.js

@@ -1,22 +1,21 @@
 import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cva, cx } from "class-variance-authority";
-import * as React from "react";
-import React__default, { createContext, useContext, memo, useMemo, useState, useCallback, useEffect, useLayoutEffect, use, useRef } from "react";
+import { createContext, useContext, memo, useMemo, useState, useCallback, useEffect, useId, useLayoutEffect, use, useRef } from "react";
 import * as RadixAvatar from "@radix-ui/react-avatar";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
 import { useMediaQuery } from "react-responsive";
-import * as RadixPrimitiveCollapsible from "@radix-ui/react-collapsible";
 import { CommandItem, CommandRoot, CommandEmpty, CommandGroup, CommandInput, useCommandState, CommandList, CommandSeparator } from "cmdk";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import { DialogPortal, DialogContent as DialogContent$1, DialogTitle, DialogDescription, DialogOverlay as DialogOverlay$1, DialogTrigger } from "@radix-ui/react-dialog";
 import { DayPicker as DayPicker$1 } from "react-day-picker";
-import { DynamicIcon } from "lucide-react/dynamic";
+import { ChevronRight, ChevronLeft, ChevronDown, ChevronUp, AlertTriangle, RotateCcw, X } from "lucide-react";
 import * as RadixHoverCard from "@radix-ui/react-hover-card";
+import { Slot } from "@radix-ui/react-slot";
 import { CSSTransition } from "react-transition-group";
+import "react-transition-group/CSSTransition";
 import ReactDOM from "react-dom";
-import { Slot } from "@radix-ui/react-slot";
-import { useFloatingNodeId, useFloating, offset, size, flip, shift, hide, autoUpdate, useRole, useDismiss, useClick, useListNavigation, useInteractions, FloatingTree, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList, useHover, safePolygon, useListItem, useMergeRefs } from "@floating-ui/react";
+import { useListItem, useMergeRefs, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList, useFloatingNodeId, useFloating, offset, size, flip, shift, hide, autoUpdate, useRole, useDismiss, useClick, useListNavigation, useInteractions, FloatingTree, useHover, safePolygon } from "@floating-ui/react";
 import * as RadixSeparator from "@radix-ui/react-separator";
 import * as RadixOneTimePasswordField from "@radix-ui/react-one-time-password-field";
 import { useErrorBoundary, ErrorBoundary } from "react-error-boundary";
@@ -788,82 +787,6 @@ const Checkbox = {
 };
 const SelectContext = createContext({});
 const MultiSelectContext = createContext({});
-const usePassiveLayoutEffect = React__default[typeof document !== "undefined" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"];
-const useLatest = (current) => {
-  const storedValue = React.useRef(current);
-  React.useEffect(() => {
-    storedValue.current = current;
-  });
-  return storedValue;
-};
-function _ref() {
-}
-function useResizeObserver(target, callback, options = {}) {
-  const resizeObserver = getResizeObserver(options.polyfill);
-  const storedCallback = useLatest(callback);
-  usePassiveLayoutEffect(() => {
-    let didUnsubscribe = false;
-    const targetEl = target && "current" in target ? target.current : target;
-    if (!targetEl) return _ref;
-    function cb(entry, observer) {
-      if (didUnsubscribe) return;
-      storedCallback.current(entry, observer);
-    }
-    resizeObserver.subscribe(targetEl, cb);
-    return () => {
-      didUnsubscribe = true;
-      resizeObserver.unsubscribe(targetEl, cb);
-    };
-  }, [target, resizeObserver, storedCallback]);
-  return resizeObserver.observer;
-}
-function createResizeObserver(polyfill) {
-  let ticking = false;
-  let allEntries = [];
-  const callbacks = /* @__PURE__ */ new Map();
-  const observer = new (polyfill || window.ResizeObserver)((entries, obs) => {
-    allEntries = allEntries.concat(entries);
-    function _ref2() {
-      const triggered = /* @__PURE__ */ new Set();
-      for (let i = 0; i < allEntries.length; i++) {
-        if (triggered.has(allEntries[i].target)) continue;
-        triggered.add(allEntries[i].target);
-        const cbs = callbacks.get(allEntries[i].target);
-        cbs === null || cbs === void 0 ? void 0 : cbs.forEach((cb) => cb(allEntries[i], obs));
-      }
-      allEntries = [];
-      ticking = false;
-    }
-    if (!ticking) {
-      window.requestAnimationFrame(_ref2);
-    }
-    ticking = true;
-  });
-  return {
-    observer,
-    subscribe(target, callback) {
-      var _callbacks$get;
-      observer.observe(target);
-      const cbs = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
-      cbs.push(callback);
-      callbacks.set(target, cbs);
-    },
-    unsubscribe(target, callback) {
-      var _callbacks$get2;
-      const cbs = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
-      if (cbs.length === 1) {
-        observer.unobserve(target);
-        callbacks.delete(target);
-        return;
-      }
-      const cbIndex = cbs.indexOf(callback);
-      if (cbIndex !== -1) cbs.splice(cbIndex, 1);
-      callbacks.set(target, cbs);
-    }
-  };
-}
-let _resizeObserver;
-const getResizeObserver = (polyfill) => !_resizeObserver ? _resizeObserver = createResizeObserver(polyfill) : _resizeObserver;
 const useViewportSize = (props) => {
   const { xs: xsProps, sm: smProps, md: mdProps, lg: lgProps, xl: xlProps } = props;
   const [prevSize, setPrevSize] = useState("initial");
@@ -881,33 +804,14 @@ const useViewportSize = (props) => {
   }, [lg, md, sm, xl, xs]);
   return { size: size2, prevSize, xs, sm, md, lg, xl };
 };
-const useStopEventPropagation = () => {
-  return useCallback((event) => {
-    event.stopPropagation();
-  }, []);
-};
-function useTextFilter(values, filterFunction) {
+function useTextFilter(items, filterFunction) {
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [filterValue, setFilterValue] = useState("");
   useEffect(() => {
-    setFilteredOptions(values.filter((value) => filterFunction(value, filterValue)));
-  }, [filterFunction, filterValue, values]);
+    setFilteredOptions(items.filter((value) => filterFunction(value, filterValue)));
+  }, [filterFunction, filterValue, items]);
   return [filteredOptions, filterValue, setFilterValue];
 }
-const useSize = (target) => {
-  const [size2, setSize] = useState();
-  useLayoutEffect(() => {
-    var _a;
-    setSize((_a = target.current) == null ? void 0 : _a.getBoundingClientRect());
-  }, [target]);
-  const handleResize = useCallback((entry) => {
-    const rect = entry.contentRect;
-    setSize(rect);
-  }, []);
-  useResizeObserver(target, handleResize);
-  return size2;
-};
-const genericMemo = memo;
 function useControlledState(initialState, state, setState) {
   const [uncontrolledState, setUncontrolledState] = useState(initialState);
   const handleStateChange = useCallback(
@@ -924,26 +828,34 @@ function useControlledState(initialState, state, setState) {
   }, [state]);
   return [state ?? uncontrolledState, handleStateChange];
 }
+function useFallbackId(id) {
+  const fallbackId = useId();
+  return id ?? fallbackId;
+}
+const genericMemo = memo;
 function mergeRefs(refs) {
   return (value) => {
-    const cleanups = refs.reduce((cleanups2, ref) => {
-      if (typeof ref === "function") {
-        const cleanup = ref(value);
-        if (typeof cleanup === "function") {
-          cleanups2.push(cleanup);
-        } else {
+    const cleanups = refs.reduce(
+      (cleanups2, ref) => {
+        if (typeof ref === "function") {
+          const cleanup = ref(value);
+          if (typeof cleanup === "function") {
+            cleanups2.push(cleanup);
+          } else {
+            cleanups2.push(() => {
+              ref(null);
+            });
+          }
+        } else if (ref != null) {
+          ref.current = value;
           cleanups2.push(() => {
-            ref(null);
+            ref.current = null;
           });
         }
-      } else if (ref != null) {
-        ref.current = value;
-        cleanups2.push(() => {
-          ref.current = null;
-        });
-      }
-      return cleanups2;
-    }, []);
+        return cleanups2;
+      },
+      []
+    );
     return () => {
       cleanups.forEach((cleanup) => {
         cleanup();
@@ -954,6 +866,21 @@ function mergeRefs(refs) {
 const stopPropagation = (e) => {
   e.stopPropagation();
 };
+function getSelectedState(selected) {
+  return selected ? "selected" : "unselected";
+}
+function getCheckedState(checked) {
+  return checked === true ? "checked" : checked === false ? "unchecked" : "indeterminate";
+}
+function getActiveState(active) {
+  return active ? "active" : "inactive";
+}
+function getBooleanState(value) {
+  return value ? "true" : "false";
+}
+function getOpenState(open) {
+  return open ? "open" : "closed";
+}
 const MultiSelectProvider = genericMemo(function MultiSelectProvider2(props) {
   const { children, defaultValues, values: controlledValues, onValuesChange } = props;
   const [itemValueMapping, setItemValueMapping] = useState(/* @__PURE__ */ new Set());
@@ -1036,8 +963,8 @@ const CheckboxGroupItem = memo((props) => {
     ref,
     className,
     value,
-    accentColor,
     disabled,
+    accentColor = groupContext.accentColor,
     variant = groupContext.variant,
     size: size2 = groupContext.size,
     radius = groupContext.radius,
@@ -1074,9 +1001,6 @@ const CheckboxGroupItemIndicator = memo((props) => {
   return /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: cx("flex items-center justify-center", className), ref, ...rest });
 });
 CheckboxGroupItemIndicator.displayName = "CheckboxGroupItemIndicator";
-function getBooleanState$1(value) {
-  return value ? "true" : "false";
-}
 const CheckboxGroupRoot = memo((props) => {
   const providerContext = useProvider();
   const {
@@ -1099,20 +1023,22 @@ const CheckboxGroupRoot = memo((props) => {
       name,
       required,
       disabled,
+      // style props
+      accentColor,
       size: size2,
       variant,
       radius
     }),
-    [disabled, name, radius, required, size2, variant]
+    [accentColor, disabled, name, radius, required, size2, variant]
   );
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       role: "group",
-      "data-disabled": getBooleanState$1(!!disabled),
+      "data-disabled": getBooleanState(!!disabled),
       "data-accent-color": accentColor,
-      "aria-disabled": getBooleanState$1(!!disabled),
+      "aria-disabled": getBooleanState(!!disabled),
       ...rest,
       children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
         MultiSelectProvider,
@@ -1132,8 +1058,8 @@ const CheckboxGroupSelectAllItem = memo((props) => {
   const {
     ref,
     className,
-    accentColor,
     disabled,
+    accentColor = groupContext.accentColor,
     variant = groupContext.variant,
     size: size2 = groupContext.size,
     radius = groupContext.radius,
@@ -1164,137 +1090,39 @@ const CheckboxGroup = {
   SelectAllItem: CheckboxGroupSelectAllItem,
   ItemIndicator: CheckboxGroupItemIndicator
 };
-const CollapsibleTreeContext = createContext(
-  {}
-);
-function useCollapsibleTreeContext() {
-  return useContext(CollapsibleTreeContext);
-}
-const CollapsibleNode = genericMemo(function(props) {
-  const { meta, nodes, level = 0, disabled } = props;
-  const [controlledOpenState, setControlledOpenState] = useState(false);
-  const {
-    nodeRenderer,
-    disabled: disabledFromContext,
-    onNodeOpen,
-    onNodeClose,
-    onNodeClick,
-    nodeStyles,
-    nodeClassName
-  } = useCollapsibleTreeContext();
-  const isDisabled = disabled ?? disabledFromContext;
-  const handleClick = useCallback(() => {
-    if (onNodeClick) onNodeClick(meta);
-  }, [meta, onNodeClick]);
-  const toggleOpenState = useCallback(() => {
-    setControlledOpenState(!controlledOpenState);
-    if (!controlledOpenState && onNodeOpen) onNodeOpen(meta);
-    if (controlledOpenState && onNodeClose) onNodeClose(meta);
-  }, [meta, onNodeClose, onNodeOpen, controlledOpenState]);
-  const { children, style, className } = useMemo(() => {
-    return nodeRenderer({
-      meta,
-      toggleOpen: toggleOpenState,
-      open: controlledOpenState,
-      disabled: isDisabled
-    });
-  }, [isDisabled, meta, nodeRenderer, toggleOpenState, controlledOpenState]);
-  const combinedStyles = useMemo(
-    () => ({
-      // want node specific styles to overwrite and global node styles
-      ...nodeStyles,
-      ...style
-    }),
-    [nodeStyles, style]
-  );
-  return /* @__PURE__ */ jsx(RadixPrimitiveCollapsible.Root, { asChild: true, open: controlledOpenState, disabled: isDisabled, children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        onClick: handleClick,
-        className: cx(nodeClassName, "flex w-full shrink-0 items-center", className),
-        style: combinedStyles,
-        "data-state": controlledOpenState ? "open" : "closed",
-        "data-disabled": isDisabled,
-        children
-      }
-    ),
-    nodes && nodes.length > 0 && /* @__PURE__ */ jsx(RadixPrimitiveCollapsible.Content, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "flex h-max w-full flex-col pl-2", children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsx(
-      CollapsibleNode,
-      {
-        level: level + 1,
-        ...treeNodeProps
-      },
-      `${level},${index}`
-    )) }) })
-  ] }) });
-});
-const CollapsibleTree = genericMemo(function(props) {
-  const {
-    nodes,
-    disabled = false,
-    nodeClassName,
-    nodeStyles,
-    onNodeClick,
-    onNodeClose,
-    onNodeOpen,
-    nodeRenderer,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsx(
-    CollapsibleTreeContext.Provider,
-    {
-      value: {
-        nodeRenderer,
-        nodeClassName,
-        nodeStyles,
-        disabled,
-        onNodeClick,
-        onNodeClose,
-        onNodeOpen
-      },
-      children: /* @__PURE__ */ jsx("div", { className: "flex h-max w-full flex-col", ...rest, children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsx(CollapsibleNode, { ...treeNodeProps }, `${0},${index}`)) })
-    }
-  );
-});
-const CommandMenuContext = createContext({});
-const SelectedIndicatorContext$1 = createContext(false);
-const CheckboxIndicatorContext = createContext(false);
-const CommandMenuPageContext = createContext({});
-const CommandMenuDialogContext = createContext({});
-function getSelectedState$1(selected) {
-  return selected ? "selected" : "unselected";
-}
-function getCheckedState$1(checked) {
-  return checked === true ? "checked" : checked === false ? "unchecked" : "indeterminate";
-}
-function getActiveState(active) {
-  return active ? "active" : "inactive";
-}
-const CommandMenuCheckboxIndicator = memo((props) => {
-  const { ref, className, children, ...rest } = props;
-  const checkedState = use(CheckboxIndicatorContext);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? children(checkedState) : children;
-  }, [checkedState, children]);
+const CheckedIndicatorContext = createContext({});
+const CheckedIndicator = memo((props) => {
+  const { children, ref, className, ...rest } = props;
+  const checked = useContext(CheckedIndicatorContext);
+  const computedChildren = typeof children === "function" ? children(checked) : children;
   return /* @__PURE__ */ jsx(
     "span",
     {
       ref,
-      "data-state": getCheckedState$1(checkedState),
       className: cx(
-        "inline-block size-max",
+        "flex size-max items-center",
         {
-          invisible: checkedState === false
+          invisible: checked === false
         },
         className
       ),
+      "data-state": getCheckedState(checked),
       ...rest,
       children: computedChildren
     }
   );
 });
+CheckedIndicator.displayName = "CheckedIndicator";
+const CommandMenuCheckboxIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
+});
 CommandMenuCheckboxIndicator.displayName = "CommandMenuCheckboxIndicator";
+const CommandMenuContext = createContext({});
+const SelectedIndicatorContext$1 = createContext(false);
+const CheckboxIndicatorContext = createContext(false);
+const CommandMenuPageContext = createContext({});
+const CommandMenuDialogContext = createContext({});
 const commandMenuContentCva = cva(
   [
     "ring",
@@ -1531,7 +1359,7 @@ const CommandMenuCheckboxItem = memo((props) => {
     onSelect == null ? void 0 : onSelect();
     onCheckedChange(checked !== true);
   }, [checked, onCheckedChange, onSelect]);
-  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState$1(checked), ...rest, children }) });
+  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState(checked), ...rest, children }) });
 });
 CommandMenuCheckboxItem.displayName = "CommandMenuCheckboxItem";
 const CommandMenuContent = memo((props) => {
@@ -1558,9 +1386,10 @@ const CommandMenuContent = memo((props) => {
     return {
       variant,
       size: size2,
-      radius
+      radius,
+      accentColor
     };
-  }, [radius, size2, variant]);
+  }, [accentColor, radius, size2, variant]);
   return /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsx(
     DialogContent$1,
     {
@@ -1647,7 +1476,7 @@ const CommandMenuMultiSelectItem = genericMemo(function(props) {
     {
       ref,
       onSelect: handleSelect,
-      "data-state": getSelectedState$1(isSelected),
+      "data-state": getSelectedState(isSelected),
       "aria-selected": isSelected,
       closeOnSelect,
       ...rest,
@@ -1721,7 +1550,7 @@ const CommandMenuRadioItem = genericMemo(function(props) {
     selectValue(value);
   }, [onSelect, selectValue, value]);
   const isSelected = selected(value);
-  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState$1(isSelected), ...rest, children }) });
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState(isSelected), ...rest, children }) });
 });
 const CommandMenuRoot = memo((props) => {
   const { children, defaultOpen, open: controlledOpen, onOpenChange, modal } = props;
@@ -1749,35 +1578,39 @@ const CommandMenuSelectAllItem = genericMemo(function(props) {
       ref,
       role: "menuitemcheckbox",
       onSelect: handleSelect,
-      "data-state": getCheckedState$1(selectedState),
+      "data-state": getCheckedState(selectedState),
       closeOnSelect,
       ...rest
     }
   ) });
 });
-const CommandMenuSelectedIndicator = memo((props) => {
-  const { ref, className, children, ...rest } = props;
-  const isSelected = use(SelectedIndicatorContext$1);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? children(isSelected) : children;
-  }, [isSelected, children]);
+const SelectedIndicatorContext = createContext(false);
+const SelectedIndicator = memo((props) => {
+  const { ref, children, className, ...rest } = props;
+  const isSelected = use(SelectedIndicatorContext);
+  const computedChildren = typeof children === "function" ? children(isSelected) : children;
   return /* @__PURE__ */ jsx(
     "span",
     {
       ref,
-      "data-state": getSelectedState$1(isSelected),
       className: cx(
-        "inline-block size-max",
+        "flex size-max items-center",
         {
           invisible: !isSelected
         },
         className
       ),
+      "data-state": getSelectedState(isSelected),
       ...rest,
       children: computedChildren
     }
   );
 });
+SelectedIndicator.displayName = "SelectedIndicator";
+const CommandMenuSelectedIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(SelectedIndicator, { ref, ...rest, children });
+});
 CommandMenuSelectedIndicator.displayName = "CommandMenuSelectedIndicator";
 const CommandMenuSeparator = memo((props) => {
   const { className, ref, spacing = false, ...rest } = props;
@@ -1817,21 +1650,21 @@ const CommandMenu = {
   PageTriggerItem: CommandMenuPageTriggerItem
 };
 const LuIcon = memo((props) => {
-  const { ref, icon, className, size: size2 = "1em", ...rest } = props;
-  return /* @__PURE__ */ jsx(DynamicIcon, { ref, className: cx("shrink-0", className), size: size2, name: icon, ...rest });
+  const { ref, icon: Icon, className, size: size2 = "1em", ...rest } = props;
+  return /* @__PURE__ */ jsx(Icon, { ref, className: cx("shrink-0", className), size: size2, ...rest });
 });
 LuIcon.displayName = "LuIcon";
 const Chevron = (props) => {
   const { orientation, ...rest } = props;
   switch (orientation) {
     case "up":
-      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-up", ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: ChevronUp, ...rest });
     case "down":
-      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-down", ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: ChevronDown, ...rest });
     case "left":
-      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-left", ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: ChevronLeft, ...rest });
     default:
-      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-right", ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: ChevronRight, ...rest });
   }
 };
 const rootCva = cva(["relative", "size-max"], {
@@ -2254,7 +2087,7 @@ const HoverCard = {
   Root: RadixHoverCard.Root,
   Trigger: RadixHoverCard.Trigger
 };
-const HoverUtility = memo(function Root({ children, forceHover }) {
+const HoverUtility = memo(({ children, forceHover }) => {
   const [isHovered, setIsHovered] = useState(false);
   const handlePointerEnter = useCallback(() => {
     setIsHovered(true);
@@ -2268,6 +2101,7 @@ const HoverUtility = memo(function Root({ children, forceHover }) {
     onPointerLeave: handlePointerLeave
   });
 });
+HoverUtility.displayName = "HoverUtility";
 const InputContext = createContext({});
 const inputRoot$1 = cva(
   [
@@ -2395,9 +2229,9 @@ const Input = {
 const LayoutContext = createContext({});
 const useLayoutContext = () => useContext(LayoutContext);
 const LayoutContainer = memo((props) => {
-  const { ref, children, className, ...rest } = props;
+  const { ref, children, ...rest } = props;
   const { hideLayout = false } = useLayoutContext();
-  return !hideLayout && /* @__PURE__ */ jsx("div", { className: cx("flex h-full grow", className), ref, ...rest, children });
+  return !hideLayout && /* @__PURE__ */ jsx("div", { ref, ...rest, children });
 });
 LayoutContainer.displayName = "LayoutContainer";
 const LayoutRoot = memo((props) => {
@@ -2424,6 +2258,23 @@ const LayoutRoot = memo((props) => {
   return /* @__PURE__ */ jsx(LayoutContext.Provider, { value: contextValue, children });
 });
 LayoutRoot.displayName = "LayoutRoot";
+const SlideOutRootContext = createContext({});
+const SlideOutContextContext = createContext({});
+const SlideOutClose = memo((props) => {
+  const { ref, onClick, disabled, ...rest } = props;
+  const { setOpen } = use(SlideOutRootContext);
+  const handleClick = useCallback(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (e.defaultPrevented) return;
+      setOpen(false);
+    },
+    [onClick, setOpen]
+  );
+  return /* @__PURE__ */ jsx(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 = useRef(false);
@@ -2485,327 +2336,372 @@ function useCallbackRef(callback) {
     return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
   }, []);
 }
-const TIMEOUT_DURATION = 200;
-const SlideOut = memo((props) => {
-  const {
-    ref,
-    children,
-    className,
-    style,
-    open,
-    hide: hide2 = 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] = useState(document.body);
-  const childrenContainerRef = useRef(null);
-  const localRef = useRef(null);
-  const nodeRef = useRef(null);
-  const mergedRefs = mergeRefs([ref, localRef, nodeRef]);
-  const [isResizing, setIsResizing] = useState(false);
-  const [computedWidth, setComputedWidth] = useState(null);
-  const prevClientX = useRef(null);
-  const handleDismiss = useCallback(() => {
-    if (modal && onDismiss) {
-      onDismiss();
-    }
-  }, [modal, onDismiss]);
-  const handleAssignParentContainer = useCallback((element) => {
-    if (element) {
-      setParentContainer(element);
+const SlideOutContent = memo((props) => {
+  const { ref, children, style, side, type, resizeable = false, initialSize, minSize, maxSize, hide: hide2, ...rest } = props;
+  const internalRef = useRef(null);
+  const { open, setOpen, parentElement, modal } = use(SlideOutRootContext);
+  const [computedSize, setComputedSize] = useState(null);
+  const handleClose = useCallback(() => {
+    if (modal) setOpen(false);
+  }, [modal, setOpen]);
+  const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(
+    handleClose,
+    parentElement ?? void 0
+  );
+  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 = 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`
+        };
     }
-  }, []);
-  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 = 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 = useMemo(
+  }, [side]);
+  const contextValue = 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 = useCallback((e) => {
-    const { clientX } = e;
-    prevClientX.current = clientX;
-    setIsResizing(true);
-  }, []);
-  const handleMouseMove = useCallback(
+  return !hide2 ? (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    /* @__PURE__ */ jsx(
+      CSSTransition,
+      {
+        classNames: transitionClassNames,
+        in: open,
+        timeout: TIMEOUT_DURATION,
+        unmountOnExit: true,
+        mountOnEnter: true,
+        nodeRef: internalRef,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: mergeRefs([ref, internalRef]),
+            onPointerDownCapture: handlePointerDownCapture,
+            "data-open": open,
+            "data-side": side,
+            "data-type": type,
+            style: computedStyle,
+            ...rest,
+            children: /* @__PURE__ */ jsx(SlideOutContextContext, { value: contextValue, children })
+          }
+        )
+      }
+    )
+  ) : null;
+});
+SlideOutContent.displayName = "SlideOutContent";
+const SlideOutHandle = memo((props) => {
+  const { ref, onMouseDown, disabled, ...rest } = props;
+  const prevClientCoord = useRef(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const { side, resizeable, computedSize, setComputedSize } = use(SlideOutContextContext);
+  const computedDisabled = disabled ?? !resizeable;
+  const setPrevClientCoord = 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 = 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 = 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 = useCallback(() => {
-    if (!isResizing) return;
-    prevClientX.current = null;
+  const handlePointerUp = useCallback(() => {
+    if (!isResizing || computedDisabled) return;
+    prevClientCoord.current = null;
     setIsResizing(false);
-  }, [isResizing]);
+  }, [computedDisabled, isResizing]);
   useEffect(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
+    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]);
-  useLayoutEffect(() => {
-    if (!open) return;
-    setComputedWidth(localRef.current.offsetWidth);
-  }, [open]);
-  const resizableStyle = useMemo(
-    () => ({
-      ...style,
-      width: computedWidth ?? initialWidth,
-      maxWidth,
-      minWidth,
-      position,
-      "--slide-out-width": `${computedWidth}${typeof computedWidth === "number" ? "px" : ""}`
-    }),
-    [computedWidth, initialWidth, maxWidth, minWidth, position, style]
-  );
-  const resizableEnable = useMemo(
-    () => ({ left: resizeable && !isLeft, right: resizeable && isLeft }),
-    [isLeft, resizeable]
-  );
-  const SlideOut2 = useMemo(
-    () => (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      /* @__PURE__ */ jsx(
-        CSSTransition,
-        {
-          classNames: CSSTransitionClassNames,
-          in: open,
-          timeout: TIMEOUT_DURATION,
-          unmountOnExit: true,
-          mountOnEnter: true,
-          onEntering: onOpening,
-          onExited: onClosed,
-          nodeRef,
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: 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__ */ jsx(
-                  "div",
-                  {
-                    className: 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__ */ jsxs(
+  }, [handlePointerMove, handlePointerUp]);
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "relative flex h-full max-h-full w-full max-w-full overflow-hidden",
-      ref: handleAssignParentContainer,
-      ...otherProps,
-      children: [
-        side === "left" && !hide2 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          open && overlayComponent,
-          " ",
-          content && SlideOut2
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex h-full max-w-full grow overflow-hidden", ref: childrenContainerRef, children }),
-        side === "right" && !hide2 && /* @__PURE__ */ jsxs(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 = memo((props) => {
-  const { small, hideLayout, isOpen, setOpen } = useLayoutContext();
-  const {
-    ref,
-    id,
-    children,
-    className,
-    defaultOpen,
-    side,
-    initialWidth = DEFAULT_INITIAL_WIDTH,
-    onDismiss,
-    ...rest
-  } = props;
-  const open = isOpen(id);
-  useEffect(() => {
-    if (small && (defaultOpen == null ? void 0 : defaultOpen.small) !== void 0) {
-      setOpen(id, defaultOpen == null ? void 0 : defaultOpen.small);
-    } else if (!small && (defaultOpen == null ? void 0 : defaultOpen.large) !== void 0) {
-      setOpen(id, defaultOpen == null ? void 0 : defaultOpen.large);
-    }
-  }, [defaultOpen, id, setOpen, small]);
-  const handleDismiss = useCallback(() => {
-    setOpen(id, false);
-    onDismiss == null ? void 0 : onDismiss();
-  }, [id, onDismiss, setOpen]);
-  return !hideLayout && /* @__PURE__ */ jsx(
-    SlideOut,
-    {
-      className: cx(`overmap-layout-slideOut-${side}`, className),
-      side,
-      ref,
+SlideOutHandle.displayName = "SlideOutHandle";
+const SlideOutOverlay = memo((props) => {
+  const { ref, ...rest } = props;
+  const { open } = use(SlideOutRootContext);
+  return open ? /* @__PURE__ */ jsx("div", { ref, "data-open": open, ...rest }) : null;
+});
+SlideOutOverlay.displayName = "SlideOutOverlay";
+const SlideOutRoot = memo((props) => {
+  const { ref, children, defaultOpen = false, open: controlledOpen, onOpenChange, modal = false, ...rest } = props;
+  const [parentElement, setParentElement] = useState(null);
+  const [open, setOpen] = useControlledState(defaultOpen, controlledOpen, onOpenChange);
+  const contextValue = useMemo(
+    () => ({
+      parentElement,
       open,
-      initialWidth,
-      modal: small,
-      onDismiss: handleDismiss,
-      position: small ? "absolute" : "relative",
-      ...rest,
-      children
-    }
+      setOpen,
+      modal
+    }),
+    [modal, open, parentElement, setOpen]
+  );
+  return /* @__PURE__ */ jsx("div", { ref: mergeRefs([ref, setParentElement]), ...rest, children: /* @__PURE__ */ jsx(SlideOutRootContext, { value: contextValue, children }) });
+});
+SlideOutRoot.displayName = "SlideOutRoot";
+const SlideOutTrigger = memo((props) => {
+  const { ref, onClick, ...rest } = props;
+  const { open, setOpen } = use(SlideOutRootContext);
+  const handleClick = useCallback(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (e.defaultPrevented) return;
+      setOpen(!open);
+    },
+    [onClick, open, setOpen]
   );
+  return /* @__PURE__ */ jsx(Slot, { ref, onClick: handleClick, "data-disabled": props.disabled ?? false, ...rest });
+});
+SlideOutTrigger.displayName = "SlideOutTrigger";
+const SlideOutViewport = memo((props) => {
+  const { ref, ...rest } = props;
+  const internalRef = useRef(null);
+  const { open, modal, parentElement } = use(SlideOutRootContext);
+  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__ */ 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 = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ jsx(SlideOutClose, { ref, ...rest });
 });
-LayoutSlideOut.displayName = "LayoutSlideOut";
+LayoutSlideOutClose.displayName = "LayoutSlideOutClose";
+const LayoutSlideOutContent = memo((props) => {
+  const { ref, type, hide: hide2, ...rest } = props;
+  const { small, hideLayout } = use(LayoutContext);
+  return /* @__PURE__ */ jsx(SlideOutContent, { ref, type: type ?? (small ? "overlay" : "inline"), hide: hide2 ?? hideLayout, ...rest });
+});
+LayoutSlideOutContent.displayName = "LayoutSlideOutContent";
+const LayoutSlideOutHandle = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ jsx(SlideOutHandle, { ref, ...rest });
+});
+LayoutSlideOutHandle.displayName = "LayoutSlideOutHandle";
 const LayoutSlideOutOverlay = memo((props) => {
-  const { ref, children, className, active, slideOutId, smallModeOnly = false, ...rest } = props;
-  const { small, hideLayout, isOpen } = useLayoutContext();
+  const { ref, smallModeOnly = false, ...rest } = props;
+  const { small, hideLayout } = useLayoutContext();
   const showOverlay = 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__ */ jsx("div", { className: cx("overmap-layout-overlay", "fixed inset-0", className), ref, ...rest, children });
+    return true;
+  }, [hideLayout, small, smallModeOnly]);
+  return showOverlay ? /* @__PURE__ */ jsx(SlideOutOverlay, { ref, ...rest }) : null;
 });
 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 LayoutSlideOutRoot = memo((props) => {
+  const { ref, slideOutId, defaultOpen, ...rest } = props;
+  const { isOpen, setOpen, small } = use(LayoutContext);
+  const open = isOpen(slideOutId);
+  const handleOpenChange = useCallback(
+    (open2) => {
+      if (!open2) setOpen(slideOutId, false);
+    },
+    [setOpen, slideOutId]
+  );
+  useEffect(() => {
+    if (small && (defaultOpen == null ? void 0 : defaultOpen.small) !== void 0) {
+      setOpen(slideOutId, defaultOpen == null ? void 0 : defaultOpen.small);
+    } else if (!small && (defaultOpen == null ? void 0 : defaultOpen.large) !== void 0) {
+      setOpen(slideOutId, defaultOpen == null ? void 0 : defaultOpen.large);
+    }
+  }, [defaultOpen, slideOutId, setOpen, small]);
+  return /* @__PURE__ */ jsx(SlideOutRoot, { ref, open, onOpenChange: handleOpenChange, modal: small, ...rest });
+});
+LayoutSlideOutRoot.displayName = "LayoutSlideOutRoot";
 const LayoutSlideOutTrigger = memo((props) => {
-  const { ref, slideOutId, type = "toggle", children, ...rest } = props;
+  const { ref, slideOutId, children, ...rest } = props;
   const { isOpen, setOpen } = useLayoutContext();
   const open = isOpen(slideOutId);
   const handleClick = useCallback(() => {
-    setOpen(slideOutId, nextStateBasedOnType(open, type));
-  }, [open, setOpen, slideOutId, type]);
+    setOpen(slideOutId, !open);
+  }, [open, setOpen, slideOutId]);
   return /* @__PURE__ */ jsx(Slot, { "data-state": getOpenState(open), ref, onClick: handleClick, ...rest, children });
 });
-LayoutSlideOutTrigger.displayName = "SlideOutTrigger";
+LayoutSlideOutTrigger.displayName = "LayoutSlideOutTrigger";
+const LayoutSlideOutViewport = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ jsx(SlideOutViewport, { ref, ...rest });
+});
+LayoutSlideOutViewport.displayName = "LayoutSlideOutViewport";
 const Layout = {
   Root: LayoutRoot,
   Container: LayoutContainer,
+  SlideOutClose: LayoutSlideOutClose,
+  SlideOutContent: LayoutSlideOutContent,
+  SlideOutHandle: LayoutSlideOutHandle,
   SlideOutOverlay: LayoutSlideOutOverlay,
-  SlideOut: LayoutSlideOut,
-  SlideOutTrigger: LayoutSlideOutTrigger
+  SlideOutRoot: LayoutSlideOutRoot,
+  SlideOutTrigger: LayoutSlideOutTrigger,
+  SlideOutViewport: LayoutSlideOutViewport
 };
 const linkCva = cva(["cursor-pointer"], {
   variants: {
@@ -2875,28 +2771,6 @@ const Link = memo((props) => {
   );
 });
 Link.displayName = "Link";
-const CheckedIndicatorContext = createContext({});
-const CheckedIndicator = (props) => {
-  const { children, ref, className, ...rest } = props;
-  const checked = useContext(CheckedIndicatorContext);
-  const computedChildren = typeof children === "function" ? children(checked === "indeterminate") : children;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref,
-      className: cx(
-        "flex size-max items-center",
-        {
-          invisible: checked === false
-        },
-        className
-      ),
-      "data-state": getCheckedState$1(checked),
-      ...rest,
-      children: computedChildren
-    }
-  );
-};
 const menuItem = cva(
   [
     "select-none",
@@ -3042,100 +2916,115 @@ const inputRoot = cva(
     }
   }
 );
+const MenuContentContext = createContext({});
 const MenuContext = createContext({});
-const useMenuContext = () => useContext(MenuContext);
-const DEFAULT_OFFSET = 5;
-const MenuRoot = memo((props) => {
+const SubContext = createContext({});
+const TRIGGER_SELECT_KEYS = ["Enter", " "];
+const MenuItem = memo((props) => {
+  const rootMenuContext = use(MenuContext);
+  const { getItemProps, activeIndex, setOpen, size: size2, variant, radius } = use(MenuContentContext);
+  const { closeRoot } = use(SubContext);
   const {
+    ref: forwardedRef,
+    className,
     children,
-    side = "bottom",
-    align = "center",
-    offset: offset$1,
-    loop = false,
-    modal = false,
-    // open state related props
-    open: controlledOpen,
-    onOpenChange,
-    defaultOpen
+    onSelect,
+    onClick,
+    onKeyDown,
+    closeOnSelect = true,
+    disabled = false,
+    ...rest
   } = props;
-  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-  const [activeIndex, setActiveIndex] = useState(null);
-  const [triggerType, setTriggerType] = useState(null);
-  const elementsRef = useRef([]);
-  const nodeId = useFloatingNodeId();
-  const { refs, floatingStyles, context, middlewareData } = useFloating({
-    nodeId,
-    strategy: "fixed",
-    placement: side + (align !== "center" ? "-" + align : ""),
-    whileElementsMounted: autoUpdate,
-    open,
-    onOpenChange: setOpen,
-    middleware: [
-      offset({ mainAxis: offset$1 ?? DEFAULT_OFFSET }),
-      size({
-        apply({ availableHeight, elements }) {
-          elements.floating.style.setProperty(
-            "--overmap-menu-available-height",
-            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
-          );
-        },
-        padding: MENU_OVERFLOW_PADDING
+  const { ref, index } = useListItem();
+  const mergeRefs2 = useMergeRefs([ref, forwardedRef]);
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (disabled) return;
+      onClick == null ? void 0 : onClick(e);
+      onSelect == null ? void 0 : onSelect();
+      if (closeOnSelect) setOpen(false);
+      if (closeRoot) rootMenuContext.setOpen(false);
+    },
+    [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      onKeyDown == null ? void 0 : onKeyDown(e);
+      if (TRIGGER_SELECT_KEYS.includes(e.key)) {
+        onSelect == null ? void 0 : onSelect();
+        if (closeOnSelect) setOpen(false);
+      }
+    },
+    [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
+  );
+  const isActive = useMemo(() => index === activeIndex, [activeIndex, index]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
+  }, [children, isActive]);
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: cx(menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
+      ref: mergeRefs2,
+      role: "menuitem",
+      "data-disabled": getBooleanState(disabled),
+      "aria-disabled": disabled,
+      "data-highlighted": isActive ? "" : void 0,
+      ...getItemProps({
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: isActive ? 0 : -1,
+        ...rest
       }),
-      flip({ fallbackStrategy: "initialPlacement" }),
-      shift({ padding: MENU_OVERFLOW_PADDING }),
-      hide()
-    ]
-  });
-  const role = useRole(context, {
-    role: "menu"
-  });
-  const dismiss = useDismiss(context, {
-    capture: true,
-    ancestorScroll: triggerType === "context" || triggerType === "virtual"
-  });
-  const click = useClick(context, {
-    enabled: triggerType === "click"
-  });
-  const listNavigation = useListNavigation(context, {
-    listRef: elementsRef,
-    activeIndex,
-    onNavigate: setActiveIndex,
-    loop
-  });
-  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
-    dismiss,
-    listNavigation,
-    click,
-    role
-  ]);
-  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(
-    MenuContext.Provider,
+      children: computedChildren
+    }
+  );
+});
+MenuItem.displayName = "MenuItem";
+const MenuCheckboxItem = memo((props) => {
+  const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    switch (checked) {
+      case true:
+        onCheckedChange(false);
+        break;
+      case "indeterminate":
+      case false:
+        onCheckedChange(true);
+        break;
+    }
+  }, [checked, onCheckedChange, onSelect]);
+  return /* @__PURE__ */ jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, ...rest }) });
+});
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+const MenuCheckboxItemIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
+});
+MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
+const MenuClickTrigger = memo((props) => {
+  const { ref: forwardedRef, children, disabled = false } = props;
+  const { getReferenceProps, refs, setTriggerType, open } = use(MenuContext);
+  const mergedRefs = useMergeRefs([refs.setReference, forwardedRef]);
+  useEffect(() => {
+    setTriggerType("click");
+  }, [setTriggerType]);
+  return /* @__PURE__ */ jsx(
+    Slot,
     {
-      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 = createContext({});
-const useMenuContentContext = () => useContext(MenuContentContext);
+MenuClickTrigger.displayName = "MenuClickTrigger";
 const MenuContent = memo((props) => {
   var _a;
   const providerContext = useProvider();
@@ -3164,7 +3053,7 @@ const MenuContent = memo((props) => {
     floatingStyles,
     modal,
     side
-  } = useMenuContext();
+  } = use(MenuContext);
   const computedFloatingStyles = useMemo(() => {
     var _a2;
     return {
@@ -3236,216 +3125,10 @@ const MenuContent = memo((props) => {
   ) }) });
 });
 MenuContent.displayName = "Menu.Content";
-const SubContext = createContext({});
-const useSubContext = () => useContext(SubContext);
-const MenuSub = memo((props) => {
-  const {
-    children,
-    disabled = false,
-    side = "right",
-    align = "start",
-    closeRoot = false,
-    loop = false,
-    modal = false,
-    // open state related props
-    open: controlledOpen,
-    onOpenChange,
-    defaultOpen
-  } = props;
-  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
-  const nodeId = useFloatingNodeId();
-  const { refs, floatingStyles, context } = useFloating({
-    nodeId,
-    strategy: "fixed",
-    whileElementsMounted: autoUpdate,
-    open,
-    onOpenChange: (open2, _event, reason) => {
-      if (reason) setOpen(open2);
-    },
-    placement: side + (align !== "center" ? "-" + align : ""),
-    middleware: [
-      offset({ ...computeOffsets(side, align) }),
-      size({
-        padding: MENU_OVERFLOW_PADDING,
-        apply({ availableHeight, elements }) {
-          elements.floating.style.setProperty(
-            "--overmap-menu-available-height",
-            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
-          );
-        }
-      }),
-      flip(),
-      shift({ padding: MENU_OVERFLOW_PADDING }),
-      hide()
-    ]
-  });
-  const dismiss = useDismiss(context, {
-    bubbles: closeRoot,
-    outsidePress: closeRoot
-  });
-  const hover = useHover(context, {
-    restMs: 50,
-    handleClose: safePolygon({
-      blockPointerEvents: true,
-      requireIntent: false
-    }),
-    enabled: !disabled
-  });
-  const click = useClick(context, {
-    enabled: !disabled
-  });
-  const elementsRef = useRef([]);
-  const [activeIndex, setActiveIndex] = useState(null);
-  const listNavigation = useListNavigation(context, {
-    listRef: elementsRef,
-    nested: true,
-    activeIndex,
-    onNavigate: setActiveIndex,
-    loop,
-    rtl: side === "left"
-  });
-  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
-    listNavigation,
-    dismiss,
-    hover,
-    click
-  ]);
-  return /* @__PURE__ */ jsx(
-    SubContext.Provider,
-    {
-      value: {
-        open,
-        setOpen,
-        nodeId,
-        refs,
-        floatingStyles,
-        context,
-        elementsRef,
-        activeIndex,
-        setActiveIndex,
-        getFloatingProps,
-        getItemProps,
-        getReferenceProps,
-        disabled,
-        side,
-        closeRoot,
-        modal
-      },
-      children
-    }
-  );
-});
-MenuSub.displayName = "SubMenu";
-const TRIGGER_SELECT_KEYS = ["Enter", " "];
-const MenuItem = memo((props) => {
-  const rootMenuContext = useMenuContext();
-  const { getItemProps, activeIndex, setOpen, size: size2, variant, radius } = useMenuContentContext();
-  const { closeRoot } = useSubContext();
-  const {
-    ref: forwardedRef,
-    className,
-    children,
-    onSelect,
-    onClick,
-    onKeyDown,
-    closeOnSelect = true,
-    disabled = false,
-    ...rest
-  } = props;
-  const { ref, index } = useListItem();
-  const mergeRefs2 = useMergeRefs([ref, forwardedRef]);
-  const handleClick = useCallback(
-    (e) => {
-      e.stopPropagation();
-      if (disabled) return;
-      onClick == null ? void 0 : onClick(e);
-      onSelect == null ? void 0 : onSelect();
-      if (closeOnSelect) setOpen(false);
-      if (closeRoot) rootMenuContext.setOpen(false);
-    },
-    [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (disabled) return;
-      onKeyDown == null ? void 0 : onKeyDown(e);
-      if (TRIGGER_SELECT_KEYS.includes(e.key)) {
-        onSelect == null ? void 0 : onSelect();
-        if (closeOnSelect) setOpen(false);
-      }
-    },
-    [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
-  );
-  const isActive = useMemo(() => index === activeIndex, [activeIndex, index]);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
-  }, [children, isActive]);
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      className: cx(menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
-      ref: mergeRefs2,
-      role: "menuitem",
-      "data-disabled": getBooleanState(disabled),
-      "aria-disabled": disabled,
-      "data-highlighted": isActive ? "" : void 0,
-      ...getItemProps({
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        tabIndex: isActive ? 0 : -1,
-        ...rest
-      }),
-      children: computedChildren
-    }
-  );
-});
-MenuItem.displayName = "MenuItem";
-const MenuCheckboxItem = memo((props) => {
-  const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
-  const handleSelect = useCallback(() => {
-    onSelect == null ? void 0 : onSelect();
-    switch (checked) {
-      case true:
-        onCheckedChange(false);
-        break;
-      case "indeterminate":
-      case false:
-        onCheckedChange(true);
-        break;
-    }
-  }, [checked, onCheckedChange, onSelect]);
-  return /* @__PURE__ */ jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, ...rest }) });
-});
-MenuCheckboxItem.displayName = "MenuCheckboxItem";
-const MenuCheckboxItemIndicator = memo((props) => {
-  const { ref, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
-});
-MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
-const MenuClickTrigger = memo((props) => {
-  const { ref: forwardedRef, children, disabled = false } = props;
-  const { getReferenceProps, refs, setTriggerType, open } = useMenuContext();
-  const mergedRefs = useMergeRefs([refs.setReference, forwardedRef]);
-  useEffect(() => {
-    setTriggerType("click");
-  }, [setTriggerType]);
-  return /* @__PURE__ */ jsx(
-    Slot,
-    {
-      ref: mergedRefs,
-      "aria-disabled": disabled,
-      "data-disabled": getBooleanState(disabled),
-      "data-state": getOpenState(open),
-      ...getReferenceProps({ disabled }),
-      children
-    }
-  );
-});
-MenuClickTrigger.displayName = "MenuClickTrigger";
 const MenuContextTrigger = memo((props) => {
   const { ref: forwardedRef, children, disabled = false } = props;
   const ref = useRef(null);
-  const { setOpen, refs, setTriggerType, open } = useMenuContext();
+  const { setOpen, refs, setTriggerType, open } = use(MenuContext);
   const mergedRefs = useMergeRefs([forwardedRef, ref]);
   useEffect(() => {
     setTriggerType("context");
@@ -3496,7 +3179,7 @@ const MenuGroup = memo((props) => {
 MenuGroup.displayName = "MenuGroup";
 const MenuInputField = memo((props) => {
   const { ref: forwardedRef, className, onValueChange, onChange, disabled = false, ...rest } = props;
-  const { activeIndex, getItemProps } = useMenuContentContext();
+  const { activeIndex, getItemProps } = use(MenuContentContext);
   const { index, ref } = useListItem();
   const mergedRefs = useMergeRefs([ref, forwardedRef]);
   const handleChange = useCallback(
@@ -3529,7 +3212,7 @@ const MenuInputField = memo((props) => {
 MenuInputField.displayName = "MenuInputField";
 const MenuInputRoot = memo((props) => {
   const { ref, className, ...rest } = props;
-  const { size: size2 } = useMenuContentContext();
+  const { size: size2 } = use(MenuContentContext);
   return /* @__PURE__ */ jsx("div", { className: cx(inputRoot({ size: size2 }), className), ref, ...rest });
 });
 MenuInputRoot.displayName = "MenuInputRoot";
@@ -3540,7 +3223,7 @@ const MenuInputSlot = memo((props) => {
 MenuInputSlot.displayName = "MenuInputSlot";
 const MenuLabel = memo((props) => {
   const { ref, className, ...rest } = props;
-  const { size: size2 } = useMenuContentContext();
+  const { size: size2 } = use(MenuContentContext);
   return /* @__PURE__ */ jsx("div", { ref, className: cx(menuLabelCva({ size: size2 }), className), ...rest });
 });
 MenuLabel.displayName = "MenuLabel";
@@ -3548,29 +3231,6 @@ const MenuMultiSelectGroup = genericMemo(function MenuMultiSelectGroup2(props) {
   const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
   return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: /* @__PURE__ */ jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
 });
-const SelectedIndicatorContext = createContext(false);
-const useSelectedIndicatorContext = () => useContext(SelectedIndicatorContext);
-const MenuSelectedIndicator = memo((props) => {
-  const { ref, children, className, ...rest } = props;
-  const isSelected = useSelectedIndicatorContext();
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref,
-      className: cx(
-        "flex size-max items-center",
-        {
-          invisible: !isSelected
-        },
-        className
-      ),
-      "data-state": getSelectedState(isSelected),
-      ...rest,
-      children
-    }
-  );
-});
-MenuSelectedIndicator.displayName = "SelectedIndicator";
 const MenuMultiSelectItem = genericMemo(function(props) {
   const { ref, onSelect, children, closeOnSelect = false, value, ...rest } = props;
   const { selected, selectValue, registerValue } = use(MultiSelectContext);
@@ -3599,7 +3259,12 @@ const MenuMultiSelectItem = genericMemo(function(props) {
   ) });
 });
 const PagesContext = createContext({});
-const usePagesContext = () => useContext(PagesContext);
+const MenuPageContent = memo((props) => {
+  const { page, children } = props;
+  const { activePage } = use(PagesContext);
+  return activePage === page ? children : null;
+});
+MenuPageContent.displayName = "PageContent";
 const MenuPages = memo((props) => {
   const { children, defaultPage, page, onPageChange } = props;
   const [activePage, setActivePage] = useControlledState(defaultPage ?? "", page, onPageChange);
@@ -3607,67 +3272,958 @@ const MenuPages = memo((props) => {
   return /* @__PURE__ */ jsx(PagesContext.Provider, { value: contextValue, children });
 });
 MenuPages.displayName = "MenuPages";
-const MenuPageContent = (props) => {
-  const { page, children } = props;
-  const { activePage } = usePagesContext();
-  return activePage === page ? children : null;
-};
-MenuPageContent.displayName = "PageContent";
 const MenuPageTrigger = memo((props) => {
   const { ref, onSelect, page, ...rest } = props;
-  const { refs, setActiveIndex } = useMenuContentContext();
-  const { setActivePage } = usePagesContext();
+  const { refs, setActiveIndex } = use(MenuContentContext);
+  const { setActivePage } = use(PagesContext);
   const handleSelect = useCallback(() => {
     var _a;
-    onSelect == null ? void 0 : onSelect();
-    setActivePage(page);
-    (_a = refs.floating.current) == null ? void 0 : _a.focus();
-    setActiveIndex(null);
-  }, [onSelect, page, refs.floating, setActiveIndex, setActivePage]);
-  return /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, closeOnSelect: false, ...rest });
-});
-MenuPageTrigger.displayName = "MenuPageTrigger";
-const MenuScroll = memo((props) => {
-  const { ref, className, ...rest } = props;
+    onSelect == null ? void 0 : onSelect();
+    setActivePage(page);
+    (_a = refs.floating.current) == null ? void 0 : _a.focus();
+    setActiveIndex(null);
+  }, [onSelect, page, refs.floating, setActiveIndex, setActivePage]);
+  return /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, closeOnSelect: false, ...rest });
+});
+MenuPageTrigger.displayName = "MenuPageTrigger";
+const MENU_OVERFLOW_PADDING = 20;
+const MENU_CONTENT_PADDING = 8;
+const MENU_MINIMUM_MAX_HEIGHT = 250;
+const DEFAULT_OFFSET = 5;
+const MenuRoot = memo((props) => {
+  const {
+    children,
+    side = "bottom",
+    align = "center",
+    offset: offset$1,
+    loop = false,
+    modal = false,
+    // open state related props
+    open: controlledOpen,
+    onOpenChange,
+    defaultOpen
+  } = props;
+  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [triggerType, setTriggerType] = useState(null);
+  const elementsRef = useRef([]);
+  const nodeId = useFloatingNodeId();
+  const { refs, floatingStyles, context, middlewareData } = useFloating({
+    nodeId,
+    strategy: "fixed",
+    // TODO: probably some way with template string types to not need the "as Placement"
+    placement: side + (align !== "center" ? "-" + align : ""),
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: setOpen,
+    middleware: [
+      offset({ mainAxis: offset$1 ?? DEFAULT_OFFSET }),
+      size({
+        apply({ availableHeight, elements }) {
+          elements.floating.style.setProperty(
+            "--overmap-menu-available-height",
+            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
+          );
+        },
+        padding: MENU_OVERFLOW_PADDING
+      }),
+      flip({ fallbackStrategy: "initialPlacement" }),
+      shift({ padding: MENU_OVERFLOW_PADDING }),
+      hide()
+    ]
+  });
+  const role = useRole(context, {
+    role: "menu"
+  });
+  const dismiss = useDismiss(context, {
+    capture: true,
+    ancestorScroll: triggerType === "context" || triggerType === "virtual"
+  });
+  const click = useClick(context, {
+    enabled: triggerType === "click"
+  });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop
+  });
+  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
+    dismiss,
+    listNavigation,
+    click,
+    role
+  ]);
+  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(
+    MenuContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        refs,
+        context,
+        floatingStyles,
+        elementsRef,
+        getFloatingProps,
+        getItemProps,
+        getReferenceProps,
+        nodeId,
+        activeIndex,
+        setActiveIndex,
+        middlewareData,
+        side,
+        modal,
+        setTriggerType
+      },
+      children
+    }
+  ) });
+});
+MenuRoot.displayName = "Root";
+const MenuScroll = memo((props) => {
+  const { ref, className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cx(
+        "h-full overflow-x-hidden overflow-y-auto [scrollbar-color:var(--base-6)_transparent] [scrollbar-width:thin]",
+        className
+      ),
+      ...rest
+    }
+  );
+});
+MenuScroll.displayName = "MenuScroll";
+const MenuSelectAllItem = genericMemo((props) => {
+  const { ref, children, onSelect, closeOnSelect = false, ...rest } = props;
+  const { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
+  const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    toggleSelectAll();
+  }, [onSelect, toggleSelectAll]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? ({ active }) => children({ selected: selectedState, active }) : children;
+  }, [children, selectedState]);
+  return /* @__PURE__ */ jsx(CheckedIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      onSelect: handleSelect,
+      ref,
+      "data-state": getCheckedState(selectedState),
+      closeOnSelect,
+      ...rest,
+      children: computedChildren
+    }
+  ) });
+});
+const MenuSelectedIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(SelectedIndicator, { ref, ...rest, children });
+});
+MenuSelectedIndicator.displayName = "MenuSelectedIndicator";
+const MenuSelectGroup = genericMemo(function MenuSelectGroup2(props) {
+  const { ref, children, required, defaultValue, value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
+    SingleSelectNotRequiredProvider,
+    {
+      defaultValue,
+      value,
+      onValueChange,
+      children
+    }
+  ) });
+});
+const MenuSelectItem = genericMemo(function(props) {
+  const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
+  const { selected, selectValue } = use(SelectContext);
+  const isSelected = selected(value);
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    selectValue(value);
+  }, [onSelect, selectValue, value]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
+  }, [children, isSelected]);
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ref,
+      role: "menuitemcheckbox",
+      onSelect: handleSelect,
+      closeOnSelect,
+      "data-state": getSelectedState(isSelected),
+      ...rest,
+      children: computedChildren
+    }
+  ) });
+});
+const MenuSeparator = memo((props) => {
+  const { ref, className, ...rest } = props;
+  const { size: size2 } = use(MenuContentContext);
+  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(menuSeparator({ size: size2 }), className), ref, ...rest });
+});
+MenuSeparator.displayName = "MenuSeparator";
+const computeOffsets = (side, alignment) => {
+  switch (side) {
+    case "right":
+      if (alignment === "start") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -MENU_CONTENT_PADDING };
+      } else if (alignment === "end") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
+      }
+      break;
+    case "left":
+      if (alignment === "start") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -MENU_CONTENT_PADDING };
+      } else if (alignment === "end") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
+      }
+      break;
+  }
+  return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: 0 };
+};
+const MenuSub = memo((props) => {
+  const {
+    children,
+    disabled = false,
+    side = "right",
+    align = "start",
+    closeRoot = false,
+    loop = false,
+    modal = false,
+    // open state related props
+    open: controlledOpen,
+    onOpenChange,
+    defaultOpen
+  } = props;
+  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
+  const nodeId = useFloatingNodeId();
+  const { refs, floatingStyles, context } = useFloating({
+    nodeId,
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: (open2, _event, reason) => {
+      if (reason) setOpen(open2);
+    },
+    placement: side + (align !== "center" ? "-" + align : ""),
+    middleware: [
+      offset({ ...computeOffsets(side, align) }),
+      size({
+        padding: MENU_OVERFLOW_PADDING,
+        apply({ availableHeight, elements }) {
+          elements.floating.style.setProperty(
+            "--overmap-menu-available-height",
+            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
+          );
+        }
+      }),
+      flip(),
+      shift({ padding: MENU_OVERFLOW_PADDING }),
+      hide()
+    ]
+  });
+  const dismiss = useDismiss(context, {
+    bubbles: closeRoot,
+    outsidePress: closeRoot
+  });
+  const hover = useHover(context, {
+    restMs: 50,
+    handleClose: safePolygon({
+      blockPointerEvents: true,
+      requireIntent: false
+    }),
+    enabled: !disabled
+  });
+  const click = useClick(context, {
+    enabled: !disabled
+  });
+  const elementsRef = useRef([]);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    nested: true,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop,
+    rtl: side === "left"
+  });
+  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
+    listNavigation,
+    dismiss,
+    hover,
+    click
+  ]);
+  return /* @__PURE__ */ jsx(
+    SubContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        nodeId,
+        refs,
+        floatingStyles,
+        context,
+        elementsRef,
+        activeIndex,
+        setActiveIndex,
+        getFloatingProps,
+        getItemProps,
+        getReferenceProps,
+        disabled,
+        side,
+        closeRoot,
+        modal
+      },
+      children
+    }
+  );
+});
+MenuSub.displayName = "SubMenu";
+const MenuSubContent = memo((props) => {
+  var _a;
+  const { ref: forwardedRef, children, ...rest } = props;
+  const { middlewareData } = use(MenuContext);
+  const { accentColor, radius, variant, size: size2 } = use(MenuContentContext);
+  const {
+    open,
+    nodeId,
+    refs,
+    context,
+    getFloatingProps,
+    getItemProps,
+    activeIndex,
+    setActiveIndex,
+    elementsRef,
+    floatingStyles,
+    setOpen,
+    side
+  } = use(SubContext);
+  const wrapperRef = useRef(null);
+  const mergeRefs2 = useMergeRefs([refs.setFloating, wrapperRef]);
+  const computedFloatingStyles = useMemo(() => {
+    var _a2;
+    return {
+      ...floatingStyles,
+      visibility: ((_a2 = middlewareData.hide) == null ? void 0 : _a2.referenceHidden) ? "hidden" : "visible"
+    };
+  }, [floatingStyles, (_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden]);
+  return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, initialFocus: wrapperRef, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
+    MenuContentContext.Provider,
+    {
+      value: {
+        getItemProps,
+        activeIndex,
+        setActiveIndex,
+        elementsRef,
+        open,
+        setOpen,
+        refs,
+        size: size2,
+        radius,
+        accentColor,
+        variant
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "outline-none",
+          ref: mergeRefs2,
+          style: computedFloatingStyles,
+          ...getFloatingProps(),
+          children: /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: cx(
+                "overmap-menu-sub-content",
+                menuContent({ size: size2 }),
+                floating({ side, shadow: "3" }),
+                radiusCva({ radius, maxLarge: true }),
+                "max-h-(--overmap-menu-available-height)"
+              ),
+              ref: forwardedRef,
+              "data-state": getOpenState(open),
+              "data-side": side,
+              "data-accent-color": accentColor,
+              ...rest,
+              children
+            }
+          )
+        }
+      )
+    }
+  ) }) }) }) });
+});
+MenuSubContent.displayName = "MenuSubContent";
+const MenuSubTrigger = memo((props) => {
+  const { ref: forwardedRef, children, ...rest } = props;
+  const { refs, getReferenceProps, open, disabled } = use(SubContext);
+  const mergedRefs = useMergeRefs([forwardedRef, refs.setReference]);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ref: mergedRefs,
+      closeOnSelect: false,
+      "aria-haspopup": "menu",
+      "data-state": getOpenState(open),
+      disabled,
+      ...getReferenceProps(rest),
+      children
+    }
+  );
+});
+MenuSubTrigger.displayName = "MenuSubTrigger";
+const MenuVirtualTrigger = memo((props) => {
+  const { virtualElement, disabled } = props;
+  const { refs, setTriggerType, setOpen } = use(MenuContext);
+  useEffect(() => {
+    setTriggerType("virtual");
+  }, [setTriggerType]);
+  useEffect(() => {
+    if (!disabled && virtualElement) {
+      refs.setPositionReference(virtualElement);
+      setOpen(true);
+    } else {
+      refs.setPositionReference(null);
+      setOpen(false);
+    }
+  }, [disabled, refs, setOpen, virtualElement]);
+  return null;
+});
+MenuVirtualTrigger.displayName = "VirtualTrigger";
+const Menu = {
+  Root: MenuRoot,
+  Content: MenuContent,
+  // sub
+  Sub: MenuSub,
+  SubContent: MenuSubContent,
+  SubTrigger: MenuSubTrigger,
+  // pages
+  Pages: MenuPages,
+  PageContent: MenuPageContent,
+  PageTrigger: MenuPageTrigger,
+  // triggers
+  ClickTrigger: MenuClickTrigger,
+  ContextTrigger: MenuContextTrigger,
+  VirtualTrigger: MenuVirtualTrigger,
+  // groups
+  Group: MenuGroup,
+  SelectGroup: MenuSelectGroup,
+  MultiSelectGroup: MenuMultiSelectGroup,
+  // items
+  Item: MenuItem,
+  SelectItem: MenuSelectItem,
+  MultiSelectItem: MenuMultiSelectItem,
+  SelectAllItem: MenuSelectAllItem,
+  CheckboxItem: MenuCheckboxItem,
+  // indicators
+  SelectedIndicator: MenuSelectedIndicator,
+  CheckboxItemIndicator: MenuCheckboxItemIndicator,
+  // input
+  InputRoot: MenuInputRoot,
+  InputField: MenuInputField,
+  InputSlot: MenuInputSlot,
+  // others
+  Label: MenuLabel,
+  Separator: MenuSeparator,
+  Scroll: MenuScroll
+};
+const KEY_MAPPING = {
+  next: "ArrowDown",
+  prev: "ArrowUp",
+  first: "PageUp",
+  last: "PageDown",
+  selectItem: "Enter"
+};
+const ITEM_SELECTOR = "menu-item";
+const GROUP_SELECTOR = "menu-group";
+const MenuRootContext = createContext({});
+const MenuGroupContext = createContext({});
+const MenuPageContext = createContext({});
+const menuRootCva = cva(["w-full", "outline-none"], {
+  variants: {
+    size: {
+      xs: ["p-0.5", "text-xs", "min-w-30"],
+      sm: ["p-0.75", "text-sm", "min-w-35"],
+      md: ["p-1", "text-md", "min-w-40"],
+      lg: ["p-1.25", "text-lg", "min-w-45"],
+      xl: ["p-1.5", "text-xl", "min-w-50"]
+    },
+    radius: {
+      none: ["rounded-none"],
+      xs: ["rounded-xs"],
+      sm: ["rounded-sm"],
+      md: ["rounded-md"],
+      lg: ["rounded-lg"],
+      xl: ["rounded-lg"],
+      full: ["rounded-lg"]
+    }
+  }
+});
+const menuItemCva = cva(
+  [
+    "select-none",
+    "relative",
+    "flex",
+    "items-center",
+    "outline-none",
+    "data-[disabled=true]:text-(--base-a8)",
+    "data-[disabled=true]:pointer-events-none",
+    "shrink-0",
+    "py-1",
+    "text-(--base-12)"
+  ],
+  {
+    variants: {
+      size: {
+        xs: ["gap-1.5", "px-3"],
+        sm: ["gap-1.75", "px-3.5"],
+        md: ["gap-2", "px-4"],
+        lg: ["gap-2.25", "px-4.5"],
+        xl: ["gap-2.5", "px-5"]
+      },
+      variant: {
+        solid: [
+          "data-[active=true]:not-[data-[disabled=true]]:text-(--accent-contrast)",
+          "data-[active=true]:not-[data-[disabled=true]]:bg-(--accent-a9)",
+          "data-[active=true]:not-[data-[disabled=true]]:active:brightness-110"
+        ],
+        soft: [
+          "data-[active=true]:not-[data-[disabled=true]]:bg-(--accent-a3)",
+          "data-[active=true]:not-[data-[disabled=true]]:active:bg-(--accent-a4)"
+        ]
+      }
+    }
+  }
+);
+const menuGroupLabelCva = cva(["text-(--base-a11)", "flex", "items-center", "select-none", "py-1"], {
+  variants: {
+    size: {
+      xs: ["gap-1.5", "px-3", "text-xs"],
+      sm: ["gap-1.75", "px-3.5", "text-xs"],
+      md: ["gap-2", "px-4", "text-sm"],
+      lg: ["gap-2.25", "px-4.5", "text-base"],
+      xl: ["gap-2.5", "px-5", "text-lg"]
+    }
+  }
+});
+const menuSeparatorCva = cva(["h-px", "bg-(--base-a6)", "w-auto", "shrink-0"], {
+  variants: {
+    size: {
+      xs: ["-mx-0.5", "my-0.5"],
+      sm: ["-mx-0.75", "my-0.75"],
+      md: ["-mx-1", "my-1"],
+      lg: ["-mx-1.25", "my-1.25"],
+      xl: ["-mx-1.5", "my-1.5"]
+    }
+  }
+});
+const MenuV2Item = memo((props) => {
+  const {
+    ref,
+    children,
+    className,
+    disabled = false,
+    onClick,
+    onSelect,
+    onPointerEnter,
+    onPointerLeave,
+    onPointerMove,
+    ...rest
+  } = props;
+  const internalRef = useRef(null);
+  const itemId = useId();
+  const { activeItemId, setActiveItemId, size: size2, variant, radius } = use(MenuRootContext);
+  const isActive = itemId === activeItemId;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+    },
+    [onSelect]
+  );
+  const handleClick = useCallback(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      handleSelect(new Event("menu-select"));
+    },
+    [handleSelect, onClick]
+  );
+  const handlePointerEnter = useCallback(
+    (e) => {
+      onPointerEnter == null ? void 0 : onPointerEnter(e);
+      if (e.defaultPrevented) return;
+      setActiveItemId(itemId);
+    },
+    [onPointerEnter, setActiveItemId, itemId]
+  );
+  const handlePointerLeave = useCallback(
+    (e) => {
+      onPointerLeave == null ? void 0 : onPointerLeave(e);
+      if (e.defaultPrevented) return;
+      setActiveItemId(null);
+    },
+    [onPointerLeave, setActiveItemId]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      onPointerMove == null ? void 0 : onPointerMove(e);
+      if (e.defaultPrevented) return;
+      setActiveItemId(itemId);
+    },
+    [onPointerMove, itemId, setActiveItemId]
+  );
+  useEffect(() => {
+    if (!internalRef.current) return;
+    const element = internalRef.current;
+    element.addEventListener("menu-select", handleSelect);
+    return () => {
+      element.removeEventListener("menu-select", handleSelect);
+    };
+  }, [handleSelect]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: mergeRefs([ref, internalRef]),
+      className: cx(menuItemCva({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
+      role: "menuitem",
+      onClick: handleClick,
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onPointerMove: handlePointerMove,
+      ...{ [ITEM_SELECTOR]: itemId },
+      "data-active": getBooleanState(isActive),
+      "data-disabled": getBooleanState(disabled),
+      "aria-disabled": getBooleanState(disabled),
+      ...rest,
+      children
+    }
+  );
+});
+MenuV2Item.displayName = "MenuItem";
+const MenuV2CheckboxItem = memo((props) => {
+  const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      switch (checked) {
+        case true:
+          onCheckedChange(false);
+          break;
+        case "indeterminate":
+          onCheckedChange(true);
+          break;
+        case false:
+          onCheckedChange(true);
+          break;
+      }
+    },
+    [checked, onCheckedChange, onSelect]
+  );
+  return /* @__PURE__ */ jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(MenuV2Item, { ref, onSelect: handleSelect, ...rest }) });
+});
+MenuV2CheckboxItem.displayName = "MenuCheckboxItem";
+const MenuV2CheckedIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
+});
+MenuV2CheckedIndicator.displayName = "MenuCheckboxItemIndicator";
+const MenuV2Group = memo((props) => {
+  const { ref, children, ...rest } = props;
+  const groupId = useId();
+  const [labelId, setLabelId] = useState(null);
+  const contextValue = useMemo(
+    () => ({
+      labelId,
+      setLabelId
+    }),
+    [labelId]
+  );
+  return /* @__PURE__ */ jsx("div", { ref, role: "group", ...{ [GROUP_SELECTOR]: groupId }, "aria-labelledby": labelId ?? void 0, ...rest, children: /* @__PURE__ */ jsx(MenuGroupContext, { value: contextValue, children }) });
+});
+MenuV2Group.displayName = "MenuGroup";
+const MenuV2GroupLabel = memo((props) => {
+  const { ref, children, id, className, ...rest } = props;
+  const labelId = useFallbackId(id);
+  const { size: size2 } = use(MenuRootContext);
+  const { setLabelId } = use(MenuGroupContext);
+  useEffect(() => {
+    setLabelId(labelId);
+  }, [labelId, setLabelId]);
+  return /* @__PURE__ */ jsx("div", { ref, id: labelId, className: cx(menuGroupLabelCva({ size: size2 }), className), ...rest, children });
+});
+MenuV2GroupLabel.displayName = "MenuGroupLabel";
+const MenuV2SelectAllItem = genericMemo((props) => {
+  const { ref, children, onSelect, ...rest } = props;
+  const { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
+  const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      toggleSelectAll();
+    },
+    [onSelect, toggleSelectAll]
+  );
+  return /* @__PURE__ */ jsx(MenuV2Item, { onSelect: handleSelect, ref, "data-state": getCheckedState(selectedState), ...rest, children: /* @__PURE__ */ jsx(CheckedIndicatorContext, { value: selectedState, children }) });
+});
+const MenuV2MultiSelectGroup = genericMemo(function MenuMultiSelectGroup3(props) {
+  const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(MenuV2Group, { ref, ...rest, children: /* @__PURE__ */ jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
+});
+const MenuV2MultiSelectItem = genericMemo(function(props) {
+  const { ref, onSelect, children, value, ...rest } = props;
+  const { selected, selectValue, registerValue } = use(MultiSelectContext);
+  useLayoutEffect(() => {
+    return registerValue(value);
+  }, [registerValue, value]);
+  const isSelected = selected(value);
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      selectValue(value);
+    },
+    [onSelect, selectValue, value]
+  );
+  return /* @__PURE__ */ jsx(
+    MenuV2Item,
+    {
+      ref,
+      role: "menuitemcheckbox",
+      onSelect: handleSelect,
+      "data-state": getSelectedState(isSelected),
+      ...rest,
+      children: /* @__PURE__ */ jsx(SelectedIndicatorContext, { value: isSelected, children })
+    }
+  );
+});
+const MenuV2Page = memo((props) => {
+  const { children, ref, page, ...rest } = props;
+  const { page: activePage } = use(MenuPageContext);
+  const isActive = page === activePage;
+  return /* @__PURE__ */ jsx("div", { ref, "data-active": getActiveState(isActive), hidden: !isActive, ...rest, children: isActive ? children : null });
+});
+MenuV2Page.displayName = "MenuPage";
+const MenuV2Pages = memo((props) => {
+  const { children, defaultPage = "", page: controlledPage, onPageChange } = props;
+  const [page, setPage] = useControlledState(defaultPage, controlledPage, onPageChange);
+  const contextValue = useMemo(
+    () => ({
+      page,
+      setPage
+    }),
+    [page, setPage]
+  );
+  return /* @__PURE__ */ jsx(MenuPageContext, { value: contextValue, children });
+});
+MenuV2Pages.displayName = "MenuPages";
+const MenuV2PageTriggerItem = memo((props) => {
+  const { ref, children, page, onSelect, ...rest } = props;
+  const { page: activePage, setPage } = use(MenuPageContext);
+  const isActive = page === activePage;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      setPage(page);
+    },
+    [onSelect, page, setPage]
+  );
+  return /* @__PURE__ */ jsx(MenuV2Item, { ref, onSelect: handleSelect, "data-state": getActiveState(isActive), ...rest, children: /* @__PURE__ */ jsx(SelectedIndicatorContext, { value: isActive, children }) });
+});
+MenuV2PageTriggerItem.displayName = "CommandMenuPageTriggerItem";
+const computeNextIndex = (index, length, direction, loop) => {
+  switch (direction) {
+    case "next":
+      return index === length - 1 ? loop ? 0 : index : index + 1;
+    case "prev":
+      return index === 0 ? loop ? length - 1 : index : index - 1;
+  }
+};
+const MenuV2Root = memo((props) => {
+  const providerContext = useProvider();
+  const {
+    ref,
+    children,
+    className,
+    onKeyDown,
+    loop = false,
+    // style props
+    radius = providerContext.radius,
+    accentColor = "base",
+    size: size2 = "md",
+    variant = "soft",
+    ...rest
+  } = props;
+  const internalRef = useRef(null);
+  const [activeItemId, setActiveItemId] = useState(null);
+  const getItems = useCallback((element) => {
+    return Array.from(element.querySelectorAll(`[${ITEM_SELECTOR}]:not([data-disabled=true]`));
+  }, []);
+  const getFirstItem = useCallback(
+    (element) => {
+      return getItems(element).at(0);
+    },
+    [getItems]
+  );
+  const getLastItem = useCallback(
+    (element) => {
+      return getItems(element).at(-1);
+    },
+    [getItems]
+  );
+  const getActiveItem = useCallback(
+    (element) => {
+      return getItems(element).find((itemEle) => itemEle.getAttribute(ITEM_SELECTOR) === activeItemId);
+    },
+    [activeItemId, getItems]
+  );
+  const getNextItem = useCallback(
+    (element, direction) => {
+      const items = getItems(element);
+      const activeItem = getActiveItem(element);
+      const activeItemIndex = items.findIndex((itemEle) => itemEle === activeItem);
+      const nextItemIndex = computeNextIndex(activeItemIndex, items.length, direction, loop);
+      return items[nextItemIndex];
+    },
+    [getActiveItem, getItems, loop]
+  );
+  const getGroups = useCallback(() => {
+    if (!internalRef.current) return [];
+    return Array.from(internalRef.current.querySelectorAll(`[${GROUP_SELECTOR}]`));
+  }, []);
+  const getActiveGroup = useCallback(() => {
+    var _a;
+    return ((_a = getActiveItem(internalRef.current)) == null ? void 0 : _a.closest(`[${GROUP_SELECTOR}]`)) ?? void 0;
+  }, [getActiveItem]);
+  const getNextGroup = useCallback(
+    (direction) => {
+      const groups = getGroups();
+      const activeGroup = getActiveGroup();
+      const activeGroupIndex = groups.findIndex((groupEle) => groupEle === activeGroup);
+      const nextGroupIndex = computeNextIndex(activeGroupIndex, groups.length, direction, loop);
+      return groups[nextGroupIndex];
+    },
+    [getActiveGroup, getGroups, loop]
+  );
+  const getFirstGroup = useCallback(() => {
+    return getGroups().at(0);
+  }, [getGroups]);
+  const getLastGroup = useCallback(() => {
+    return getGroups().at(-1);
+  }, [getGroups]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      onKeyDown == null ? void 0 : onKeyDown(e);
+      if (e.defaultPrevented) return;
+      switch (e.code) {
+        case KEY_MAPPING.selectItem: {
+          const activeItem = getActiveItem(internalRef.current);
+          if (activeItem) activeItem.dispatchEvent(new Event("menu-select"));
+          break;
+        }
+        case KEY_MAPPING.next: {
+          let nextItem;
+          if (e.shiftKey) {
+            const nextGroup = getNextGroup("next");
+            if (!nextGroup) return;
+            nextItem = getFirstItem(nextGroup);
+          } else {
+            nextItem = getNextItem(internalRef.current, "next");
+          }
+          if (!nextItem) return;
+          setActiveItemId(nextItem.getAttribute(ITEM_SELECTOR));
+          break;
+        }
+        case KEY_MAPPING.prev: {
+          let prevItem;
+          if (e.shiftKey) {
+            const prevGroup = getNextGroup("prev");
+            if (!prevGroup) return;
+            prevItem = getFirstItem(prevGroup);
+          } else {
+            prevItem = getNextItem(internalRef.current, "prev");
+          }
+          if (!prevItem) return;
+          setActiveItemId(prevItem.getAttribute(ITEM_SELECTOR));
+          break;
+        }
+        case KEY_MAPPING.first: {
+          let firstItem;
+          if (e.shiftKey) {
+            const firstGroup = getFirstGroup();
+            if (!firstGroup) return;
+            firstItem = getFirstItem(firstGroup);
+          } else {
+            firstItem = getFirstItem(internalRef.current);
+          }
+          if (!firstItem) return;
+          setActiveItemId(firstItem.getAttribute(ITEM_SELECTOR));
+          break;
+        }
+        case KEY_MAPPING.last: {
+          let lastItem;
+          if (e.shiftKey) {
+            const lastGroup = getLastGroup();
+            if (!lastGroup) return;
+            lastItem = getFirstItem(lastGroup);
+          } else {
+            lastItem = getLastItem(internalRef.current);
+          }
+          if (!lastItem) return;
+          setActiveItemId(lastItem.getAttribute(ITEM_SELECTOR));
+          break;
+        }
+      }
+    },
+    [getActiveItem, getFirstGroup, getFirstItem, getLastGroup, getLastItem, getNextGroup, getNextItem, onKeyDown]
+  );
+  useEffect(() => {
+    var _a;
+    const firstItem = getFirstItem(internalRef.current);
+    if (!firstItem) return;
+    (_a = internalRef.current) == null ? void 0 : _a.focus();
+    setActiveItemId(firstItem.getAttribute(ITEM_SELECTOR));
+  }, [getFirstItem]);
+  const contextValue = useMemo(
+    () => ({
+      activeItemId,
+      setActiveItemId,
+      // style props
+      accentColor,
+      radius,
+      variant,
+      size: size2
+    }),
+    [accentColor, activeItemId, radius, size2, variant]
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
-      className: cx(
-        "h-full overflow-x-hidden overflow-y-auto [scrollbar-color:var(--base-6)_transparent] [scrollbar-width:thin]",
-        className
-      ),
-      ...rest
+      ref: mergeRefs([ref, internalRef]),
+      className: cx(menuRootCva({ size: size2 }), radiusCva({ radius, maxLarge: true }), className),
+      role: "menu",
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      "aria-activedescendant": activeItemId ?? void 0,
+      "data-accent-color": accentColor,
+      ...rest,
+      children: /* @__PURE__ */ jsx(MenuRootContext, { value: contextValue, children })
     }
   );
 });
-MenuScroll.displayName = "MenuScroll";
-const MenuSelectAllItem = genericMemo((props) => {
-  const { ref, children, onSelect, closeOnSelect = false, ...rest } = props;
-  const { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
-  const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
-  const handleSelect = useCallback(() => {
-    onSelect == null ? void 0 : onSelect();
-    toggleSelectAll();
-  }, [onSelect, toggleSelectAll]);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? ({ active }) => children({ selected: selectedState, active }) : children;
-  }, [children, selectedState]);
-  return /* @__PURE__ */ jsx(CheckedIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsx(
-    MenuItem,
-    {
-      onSelect: handleSelect,
-      ref,
-      "data-state": getCheckedState(selectedState),
-      closeOnSelect,
-      ...rest,
-      children: computedChildren
-    }
-  ) });
+MenuV2Root.displayName = "MenuRoot";
+const MenuV2SelectedIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(SelectedIndicator, { ref, ...rest, children });
 });
-const MenuSelectGroup = genericMemo(function MenuSelectGroup2(props) {
+MenuV2SelectedIndicator.displayName = "MenuCheckboxItemIndicator";
+const MenuV2SelectGroup = genericMemo(function MenuSelectGroup3(props) {
   const { ref, children, required, defaultValue, value, onValueChange, ...rest } = props;
-  return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(MenuV2Group, { ref, ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
     SingleSelectNotRequiredProvider,
     {
       defaultValue,
@@ -3677,183 +4233,53 @@ const MenuSelectGroup = genericMemo(function MenuSelectGroup2(props) {
     }
   ) });
 });
-const MenuSelectItem = genericMemo(function(props) {
-  const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
+const MenuV2SelectItem = genericMemo(function(props) {
+  const { ref, value, onSelect, children, ...rest } = props;
   const { selected, selectValue } = use(SelectContext);
-  const isSelected = useMemo(() => selected(value), [selected, value]);
-  const handleSelect = useCallback(() => {
-    onSelect == null ? void 0 : onSelect();
-    selectValue(value);
-  }, [onSelect, selectValue, value]);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
-  }, [children, isSelected]);
-  return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
-    MenuItem,
+  const isSelected = selected(value);
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      selectValue(value);
+    },
+    [onSelect, selectValue, value]
+  );
+  return /* @__PURE__ */ jsx(
+    MenuV2Item,
     {
       ref,
       role: "menuitemcheckbox",
       onSelect: handleSelect,
-      closeOnSelect,
       "data-state": getSelectedState(isSelected),
       ...rest,
-      children: computedChildren
-    }
-  ) });
-});
-const MenuSeparator = memo((props) => {
-  const { ref, className, ...rest } = props;
-  const { size: size2 } = useMenuContentContext();
-  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(menuSeparator({ size: size2 }), className), ref, ...rest });
-});
-MenuSeparator.displayName = "MenuSeparator";
-const MenuSubContent = memo((props) => {
-  var _a;
-  const { ref: forwardedRef, children, ...rest } = props;
-  const { middlewareData } = useMenuContext();
-  const { accentColor, radius, variant, size: size2 } = useMenuContentContext();
-  const {
-    open,
-    nodeId,
-    refs,
-    context,
-    getFloatingProps,
-    getItemProps,
-    activeIndex,
-    setActiveIndex,
-    elementsRef,
-    floatingStyles,
-    setOpen,
-    side
-  } = useSubContext();
-  const wrapperRef = useRef(null);
-  const mergeRefs2 = useMergeRefs([refs.setFloating, wrapperRef]);
-  const computedFloatingStyles = useMemo(() => {
-    var _a2;
-    return {
-      ...floatingStyles,
-      visibility: ((_a2 = middlewareData.hide) == null ? void 0 : _a2.referenceHidden) ? "hidden" : "visible"
-    };
-  }, [floatingStyles, (_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden]);
-  return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, initialFocus: wrapperRef, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
-    MenuContentContext.Provider,
-    {
-      value: {
-        getItemProps,
-        activeIndex,
-        setActiveIndex,
-        elementsRef,
-        open,
-        setOpen,
-        refs,
-        size: size2,
-        radius,
-        accentColor,
-        variant
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "outline-none",
-          ref: mergeRefs2,
-          style: computedFloatingStyles,
-          ...getFloatingProps(),
-          children: /* @__PURE__ */ jsx(
-            "ul",
-            {
-              className: cx(
-                "overmap-menu-sub-content",
-                menuContent({ size: size2 }),
-                floating({ side, shadow: "3" }),
-                radiusCva({ radius, maxLarge: true }),
-                "max-h-(--overmap-menu-available-height)"
-              ),
-              ref: forwardedRef,
-              "data-state": getOpenState(open),
-              "data-side": side,
-              "data-accent-color": accentColor,
-              ...rest,
-              children
-            }
-          )
-        }
-      )
-    }
-  ) }) }) }) });
-});
-MenuSubContent.displayName = "MenuSubContent";
-const MenuSubTrigger = memo((props) => {
-  const { ref: forwardedRef, children, ...rest } = props;
-  const { refs, getReferenceProps, open, disabled } = useSubContext();
-  const mergedRefs = useMergeRefs([forwardedRef, refs.setReference]);
-  return /* @__PURE__ */ jsx(
-    MenuItem,
-    {
-      ref: mergedRefs,
-      closeOnSelect: false,
-      "aria-haspopup": "menu",
-      "data-state": getOpenState(open),
-      disabled,
-      ...getReferenceProps(rest),
-      children
+      children: /* @__PURE__ */ jsx(SelectedIndicatorContext, { value: isSelected, children })
     }
   );
 });
-MenuSubTrigger.displayName = "MenuSubTrigger";
-const MenuVirtualTrigger = memo((props) => {
-  const { virtualElement, disabled } = props;
-  const { refs, setTriggerType, setOpen } = useMenuContext();
-  useEffect(() => {
-    setTriggerType("virtual");
-  }, [setTriggerType]);
-  useEffect(() => {
-    if (!disabled && virtualElement) {
-      refs.setPositionReference(virtualElement);
-      setOpen(true);
-    } else {
-      refs.setPositionReference(null);
-      setOpen(false);
-    }
-  }, [disabled, refs, setOpen, virtualElement]);
-  return null;
-});
-MenuVirtualTrigger.displayName = "VirtualTrigger";
-const Menu = {
-  Root: MenuRoot,
-  Content: MenuContent,
-  // sub
-  Sub: MenuSub,
-  SubContent: MenuSubContent,
-  SubTrigger: MenuSubTrigger,
-  // pages
-  Pages: MenuPages,
-  PageContent: MenuPageContent,
-  PageTrigger: MenuPageTrigger,
-  // triggers
-  ClickTrigger: MenuClickTrigger,
-  ContextTrigger: MenuContextTrigger,
-  VirtualTrigger: MenuVirtualTrigger,
-  // groups
-  Group: MenuGroup,
-  SelectGroup: MenuSelectGroup,
-  MultiSelectGroup: MenuMultiSelectGroup,
-  // items
-  Item: MenuItem,
-  SelectItem: MenuSelectItem,
-  MultiSelectItem: MenuMultiSelectItem,
-  SelectAllItem: MenuSelectAllItem,
-  CheckboxItem: MenuCheckboxItem,
-  // indicators
-  SelectedIndicator: MenuSelectedIndicator,
-  CheckboxItemIndicator: MenuCheckboxItemIndicator,
-  // input
-  InputRoot: MenuInputRoot,
-  InputField: MenuInputField,
-  InputSlot: MenuInputSlot,
-  // others
-  Label: MenuLabel,
-  Separator: MenuSeparator,
-  Scroll: MenuScroll
+const MenuV2Separator = memo((props) => {
+  const { ref, className, ...rest } = props;
+  const { size: size2 } = use(MenuRootContext);
+  return /* @__PURE__ */ jsx(RadixSeparator.Root, { className: cx(menuSeparatorCva({ size: size2 }), className), ref, ...rest });
+});
+MenuV2Separator.displayName = "MenuSeparator";
+const MenuV2 = {
+  Root: MenuV2Root,
+  Group: MenuV2Group,
+  GroupLabel: MenuV2GroupLabel,
+  Item: MenuV2Item,
+  Separator: MenuV2Separator,
+  SelectGroup: MenuV2SelectGroup,
+  SelectItem: MenuV2SelectItem,
+  MultiSelectGroup: MenuV2MultiSelectGroup,
+  MultiSelectItem: MenuV2MultiSelectItem,
+  SelectAllItem: MenuV2SelectAllItem,
+  SelectedIndicator: MenuV2SelectedIndicator,
+  CheckboxItem: MenuV2CheckboxItem,
+  CheckedIndicator: MenuV2CheckedIndicator,
+  Pages: MenuV2Pages,
+  Page: MenuV2Page,
+  PageTriggerItem: MenuV2PageTriggerItem
 };
 const OneTimePasswordFieldHiddenInput = memo((props) => {
   return /* @__PURE__ */ jsx(RadixOneTimePasswordField.HiddenInput, { ...props });
@@ -4022,9 +4448,9 @@ const ErrorFallback = memo((props) => {
   }, [onRetry, resetBoundary]);
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full gap-2", style: outerFlexStyles, children: [
     /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
-    /* @__PURE__ */ jsx(LuIcon, { icon: "alert-triangle", size: height, style: centerStyles }),
+    /* @__PURE__ */ jsx(LuIcon, { icon: AlertTriangle, size: height, style: centerStyles }),
     /* @__PURE__ */ jsx("span", { style: { lineHeight: height, ...centerStyles }, children: message }),
-    /* @__PURE__ */ jsx(IconButton, { "aria-label": "Try again", variant: "soft", onClick: handleRetry, style: centerStyles, children: /* @__PURE__ */ jsx(LuIcon, { icon: "rotate-ccw", size: height }) }),
+    /* @__PURE__ */ jsx(IconButton, { "aria-label": "Try again", variant: "soft", onClick: handleRetry, style: centerStyles, children: /* @__PURE__ */ jsx(LuIcon, { icon: RotateCcw, size: height }) }),
     /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } })
   ] });
 });
@@ -4373,6 +4799,65 @@ const RadioGroup = {
   Item: RadioGroupItem,
   Root: RadioGroupRoot
 };
+const RatingRootContext = createContext({});
+const RatingItemContext = createContext({});
+const RatingItem = memo((props) => {
+  const { ref, children, value, ...rest } = props;
+  const { value: activeValue } = use(RatingRootContext);
+  const active = !!activeValue && value <= activeValue;
+  const contextValue = useMemo(() => ({ value }), [value]);
+  return /* @__PURE__ */ jsx(RadixRadioGroup.Item, { ref, value: value.toString(), "data-active": active, ...rest, children: /* @__PURE__ */ jsx(RatingItemContext, { value: contextValue, children }) });
+});
+RatingItem.displayName = "RatingItem";
+const RatingItemIndicator = memo((props) => {
+  const { ref, children, forceMount, ...rest } = props;
+  const { value: activeValue } = use(RatingRootContext);
+  const { value } = use(RatingItemContext);
+  const active = !!activeValue && value <= activeValue;
+  return /* @__PURE__ */ jsx(
+    RadixRadioGroup.Indicator,
+    {
+      ref,
+      forceMount: forceMount ?? (active || void 0),
+      "data-active": active,
+      ...rest,
+      children
+    }
+  );
+});
+RatingItemIndicator.displayName = "RatingItemIndicator";
+const RatingRoot = memo((props) => {
+  const { ref, children, defaultValue, value: controlledValue, onValueChange, ...rest } = props;
+  const [value, setValue] = useControlledState(defaultValue ?? null, controlledValue, onValueChange);
+  const handleValueChange = useCallback(
+    (value2) => {
+      setValue(parseInt(value2));
+    },
+    [setValue]
+  );
+  const contextValue = useMemo(
+    () => ({
+      value
+    }),
+    [value]
+  );
+  return /* @__PURE__ */ jsx(
+    RadixRadioGroup.Root,
+    {
+      ref,
+      value: value ? value.toString() : null,
+      onValueChange: handleValueChange,
+      ...rest,
+      children: /* @__PURE__ */ jsx(RatingRootContext, { value: contextValue, children })
+    }
+  );
+});
+RatingRoot.displayName = "RatingRoot";
+const Rating = {
+  Item: RatingItem,
+  ItemIndicator: RatingItemIndicator,
+  Root: RatingRoot
+};
 const segmentedControlRootCva = cva(
   ["shrink-0", "transition-colors", "inline-flex", "box-border", "min-w-max", "text-center"],
   {
@@ -5641,7 +6126,7 @@ const _Toast = function Toast2(props) {
             action && /* @__PURE__ */ jsx(RadixToast.Action, { className: "w-max", altText: action.altText, asChild: true, children: action.content })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: size2, "aria-label": "Close", variant: "ghost", accentColor, children: /* @__PURE__ */ jsx(LuIcon, { icon: "x" }) }) })
+        /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: size2, "aria-label": "Close", variant: "ghost", accentColor, children: /* @__PURE__ */ jsx(LuIcon, { icon: X }) }) })
       ]
     }
   );
@@ -6150,7 +6635,6 @@ export {
   CheckboxGroupSelectAllItem,
   CheckboxIndicator,
   CheckboxRoot,
-  CollapsibleTree,
   CommandMenu,
   CommandMenuCheckboxIndicator,
   CommandMenuCheckboxItem,
@@ -6191,10 +6675,12 @@ export {
   InputSlot,
   Layout,
   LayoutContainer,
-  LayoutContext,
   LayoutRoot,
-  LayoutSlideOut,
+  LayoutSlideOutClose,
+  LayoutSlideOutContent,
+  LayoutSlideOutHandle,
   LayoutSlideOutOverlay,
+  LayoutSlideOutRoot,
   LayoutSlideOutTrigger,
   Link,
   LuIcon,
@@ -6225,6 +6711,23 @@ export {
   MenuSub,
   MenuSubContent,
   MenuSubTrigger,
+  MenuV2,
+  MenuV2CheckboxItem,
+  MenuV2CheckedIndicator,
+  MenuV2Group,
+  MenuV2GroupLabel,
+  MenuV2Item,
+  MenuV2MultiSelectGroup,
+  MenuV2MultiSelectItem,
+  MenuV2Page,
+  MenuV2PageTriggerItem,
+  MenuV2Pages,
+  MenuV2Root,
+  MenuV2SelectAllItem,
+  MenuV2SelectGroup,
+  MenuV2SelectItem,
+  MenuV2SelectedIndicator,
+  MenuV2Separator,
   MenuVirtualTrigger,
   OneTimePasswordField,
   OneTimePasswordFieldHiddenInput,
@@ -6250,6 +6753,10 @@ export {
   RadioGroupIndicator,
   RadioGroupItem,
   RadioGroupRoot,
+  Rating,
+  RatingItem,
+  RatingItemIndicator,
+  RatingRoot,
   SegmentedControl,
   SegmentedControlItem,
   SegmentedControlRoot,
@@ -6257,9 +6764,15 @@ export {
   SegmentedTabsList,
   SegmentedTabsRoot,
   SegmentedTabsTrigger,
-  SelectedIndicatorContext,
   Separator,
   SlideOut,
+  SlideOutClose,
+  SlideOutContent,
+  SlideOutHandle,
+  SlideOutOverlay,
+  SlideOutRoot,
+  SlideOutTrigger,
+  SlideOutViewport,
   Slider,
   Spinner,
   Switch,
@@ -6294,6 +6807,12 @@ export {
   badge,
   buttonCva,
   floating,
+  genericMemo,
+  getActiveState,
+  getBooleanState,
+  getCheckedState,
+  getOpenState,
+  getSelectedState,
   mergeRefs,
   radiusCva,
   stopPropagation,
@@ -6301,15 +6820,9 @@ export {
   useAlertDialog,
   useButtonGroup,
   useControlledState,
+  useFallbackId,
   useLayoutContext,
-  useMenuContentContext,
-  useMenuContext,
-  usePagesContext,
   useProvider,
-  useSelectedIndicatorContext,
-  useSize,
-  useStopEventPropagation,
-  useSubContext,
   useTextFilter,
   useToast,
   useViewportSize