@overmap-ai/blocks 1.0.40 → 1.0.41

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, useRef, useEffect, useId, useLayoutEffect, use } 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, CircleAlertIcon, TriangleAlertIcon, InfoIcon, Check } 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";
@@ -27,8 +26,7 @@ import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import * as RadixTabs from "@radix-ui/react-tabs";
 import * as RadixSlider from "@radix-ui/react-slider";
 import * as RadixSwitch from "@radix-ui/react-switch";
-import * as RadixToast from "@radix-ui/react-toast";
-import { ToastProvider as ToastProvider$1, ToastViewport } from "@radix-ui/react-toast";
+import { toast as toast$1, Toaster as Toaster$1 } from "sonner";
 import * as Toggle from "@radix-ui/react-toggle";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 const floating = cva(
@@ -788,82 +786,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 +803,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 +827,39 @@ function useControlledState(initialState, state, setState) {
   }, [state]);
   return [state ?? uncontrolledState, handleStateChange];
 }
+function useFallbackId(id) {
+  const fallbackId = useId();
+  return id ?? fallbackId;
+}
+function useLatest(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+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,10 +870,30 @@ 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 { children, defaultValues, values: controlledValues, onValuesChange, equalityFn } = props;
+  const equalityFnRef = useLatest(equalityFn);
   const [itemValueMapping, setItemValueMapping] = useState(/* @__PURE__ */ new Set());
   const [values, setValues] = useControlledState(defaultValues ?? [], controlledValues, onValuesChange);
+  const isValueIncluded = useCallback(
+    (value, arr) => equalityFnRef.current ? arr.some((v) => equalityFnRef.current(v, value)) : arr.includes(value),
+    [equalityFnRef]
+  );
   const registerValue = useCallback((value) => {
     setItemValueMapping((prev) => {
       const newSet = new Set(prev);
@@ -972,23 +908,25 @@ const MultiSelectProvider = genericMemo(function MultiSelectProvider2(props) {
       });
     };
   }, []);
-  const selected = useCallback((value) => values.includes(value), [values]);
+  const selected = useCallback((value) => isValueIncluded(value, values), [isValueIncluded, values]);
   const selectValue = useCallback(
     (value) => {
       if (selected(value)) {
-        setValues(values.filter((v) => v !== value));
+        setValues(
+          values.filter((v) => equalityFnRef.current ? !equalityFnRef.current(v, value) : v !== value)
+        );
       } else {
         setValues([...values, value]);
       }
     },
-    [selected, setValues, values]
+    [equalityFnRef, selected, setValues, values]
   );
   const allSelected = useMemo(() => {
-    return Array.from(itemValueMapping.values()).every((value) => values.includes(value));
-  }, [itemValueMapping, values]);
+    return Array.from(itemValueMapping.values()).every((value) => isValueIncluded(value, values));
+  }, [isValueIncluded, itemValueMapping, values]);
   const someSelected = useMemo(() => {
-    return Array.from(itemValueMapping.values()).some((value) => values.includes(value));
-  }, [itemValueMapping, values]);
+    return Array.from(itemValueMapping.values()).some((value) => isValueIncluded(value, values));
+  }, [isValueIncluded, itemValueMapping, values]);
   const toggleSelectAll = useCallback(() => {
     if (allSelected) {
       setValues([]);
@@ -1003,9 +941,13 @@ const MultiSelectProvider = genericMemo(function MultiSelectProvider2(props) {
   return /* @__PURE__ */ jsx(MultiSelectContext, { value: contextValue, children });
 });
 const SingleSelectRequiredProvider = genericMemo(function SingleSelectRequiredProvider2(props) {
-  const { children, defaultValue, value, onValueChange } = props;
+  const { children, defaultValue, value, onValueChange, equalityFn } = props;
+  const equalityFnRef = useLatest(equalityFn);
   const [controlledValue, setControlledValue] = useControlledState(defaultValue, value, onValueChange);
-  const selected = useCallback((v) => v === controlledValue, [controlledValue]);
+  const selected = useCallback(
+    (v) => equalityFnRef.current ? equalityFnRef.current(v, controlledValue) : v === controlledValue,
+    [controlledValue, equalityFnRef]
+  );
   const selectValue = useCallback(
     (v) => {
       if (selected(v)) return;
@@ -1017,9 +959,13 @@ const SingleSelectRequiredProvider = genericMemo(function SingleSelectRequiredPr
   return /* @__PURE__ */ jsx(SelectContext, { value: contextValue, children });
 });
 const SingleSelectNotRequiredProvider = genericMemo(function SingleSelectNotRequiredProvider2(props) {
-  const { children, defaultValue = void 0, value: controlledValue, onValueChange } = props;
+  const { children, defaultValue = void 0, value: controlledValue, onValueChange, equalityFn } = props;
+  const equalityFnRef = useLatest(equalityFn);
   const [value, setValue] = useControlledState(defaultValue, controlledValue, onValueChange);
-  const selected = useCallback((v) => v === value, [value]);
+  const selected = useCallback(
+    (v) => value !== void 0 && (equalityFnRef.current ? equalityFnRef.current(v, value) : v === value),
+    [value, equalityFnRef]
+  );
   const selectValue = useCallback(
     (v) => {
       setValue(selected(v) ? void 0 : v);
@@ -1036,8 +982,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 +1020,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 +1042,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 +1077,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 +1109,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 +1378,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 +1405,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 +1495,7 @@ const CommandMenuMultiSelectItem = genericMemo(function(props) {
     {
       ref,
       onSelect: handleSelect,
-      "data-state": getSelectedState$1(isSelected),
+      "data-state": getSelectedState(isSelected),
       "aria-selected": isSelected,
       closeOnSelect,
       ...rest,
@@ -1721,10 +1569,17 @@ 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;
+  const {
+    children,
+    defaultOpen,
+    open: controlledOpen,
+    // oxlint-disable-next-line typescript/unbound-method
+    onOpenChange,
+    modal
+  } = props;
   const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
   const contextValue = useMemo(() => {
     return {
@@ -1749,35 +1604,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 +1676,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"], {
@@ -2081,6 +1940,7 @@ const DialogRoot = memo((props) => {
     defaultOpen,
     onCloseInterrupt,
     open: externalOpen,
+    // oxlint-disable-next-line typescript/unbound-method
     onOpenChange: externalOpenChange
   } = props;
   const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);
@@ -2254,7 +2114,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 +2128,7 @@ const HoverUtility = memo(function Root({ children, forceHover }) {
     onPointerLeave: handlePointerLeave
   });
 });
+HoverUtility.displayName = "HoverUtility";
 const InputContext = createContext({});
 const inputRoot$1 = cva(
   [
@@ -2344,15 +2205,14 @@ const inputSlot = cva(["peer/slot", "slot"], {
   }
 });
 const InputField = memo((props) => {
-  const { ref, children, className, ...rest } = props;
+  const { ref, className, ...rest } = props;
   const { size: size2, variant } = useContext(InputContext);
   return /* @__PURE__ */ jsx(
     "input",
     {
       className: cx(inputField({ size: size2, variant }), "grow bg-transparent outline-0", className),
       ref,
-      ...rest,
-      children
+      ...rest
     }
   );
 });
@@ -2395,9 +2255,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 +2284,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 +2362,392 @@ 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, ...rest } = props;
+  const internalRef = useRef(null);
+  const { open, setOpen, parentElement, modal, hide: hide2 } = 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();
+SlideOutHandle.displayName = "SlideOutHandle";
+const SlideOutOverlay = memo((props) => {
+  const { ref, ...rest } = props;
+  const { open, hide: hide2 } = use(SlideOutRootContext);
+  return open && !hide2 ? /* @__PURE__ */ jsx("div", { ref, "data-open": open, ...rest }) : null;
+});
+SlideOutOverlay.displayName = "SlideOutOverlay";
+const SlideOutRoot = memo((props) => {
   const {
     ref,
-    id,
     children,
-    className,
-    defaultOpen,
-    side,
-    initialWidth = DEFAULT_INITIAL_WIDTH,
-    onDismiss,
+    defaultOpen = false,
+    open: controlledOpen,
+    onOpenChange,
+    modal = false,
+    hide: hide2 = false,
     ...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,
+  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,
+      hide: hide2
+    }),
+    [hide2, modal, open, parentElement, setOpen]
   );
+  return /* @__PURE__ */ jsx("div", { ref: mergeRefs([ref, setParentElement]), ...rest, children: /* @__PURE__ */ jsx(SlideOutRootContext, { value: contextValue, children }) });
 });
-LayoutSlideOut.displayName = "LayoutSlideOut";
-const LayoutSlideOutOverlay = memo((props) => {
-  const { ref, children, className, active, slideOutId, smallModeOnly = false, ...rest } = props;
-  const { small, hideLayout, isOpen } = 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 });
+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 });
 });
-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 };
+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
 };
-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 LayoutSlideOutClose = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ jsx(SlideOutClose, { ref, ...rest });
+});
+LayoutSlideOutClose.displayName = "LayoutSlideOutClose";
+const LayoutSlideOutContent = memo((props) => {
+  const { ref, type, ...rest } = props;
+  const { small } = use(LayoutContext);
+  return /* @__PURE__ */ jsx(SlideOutContent, { ref, type: type ?? (small ? "overlay" : "inline"), ...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, smallModeOnly = false, ...rest } = props;
+  const { small, hideLayout } = useLayoutContext();
+  const showOverlay = useMemo(() => {
+    if (hideLayout) return false;
+    if (smallModeOnly && !small) return false;
+    return true;
+  }, [hideLayout, small, smallModeOnly]);
+  return showOverlay ? /* @__PURE__ */ jsx(SlideOutOverlay, { ref, ...rest }) : null;
+});
+LayoutSlideOutOverlay.displayName = "SlideOutOverlay";
+const LayoutSlideOutRoot = memo((props) => {
+  const { ref, slideOutId, defaultOpen, hide: hide2, ...rest } = props;
+  const { isOpen, setOpen, small, hideLayout } = 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,
+      hide: hide2 ?? hideLayout,
+      ...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 +2817,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,346 +2962,55 @@ const inputRoot = cva(
     }
   }
 );
-const MenuContext = createContext({});
-const useMenuContext = () => useContext(MenuContext);
-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",
-    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 MenuContentContext = createContext({});
-const useMenuContentContext = () => useContext(MenuContentContext);
-const MenuContent = memo((props) => {
-  var _a;
-  const providerContext = useProvider();
+const MenuContext = createContext({});
+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,
-    size: size2 = "md",
-    variant = "soft",
-    radius = providerContext.radius,
-    accentColor = "base",
+    onSelect,
+    onClick,
+    onKeyDown,
+    closeOnSelect = true,
+    disabled = false,
     ...rest
   } = props;
-  const {
-    refs,
-    getFloatingProps,
-    middlewareData,
-    elementsRef,
-    activeIndex,
-    setActiveIndex,
-    getItemProps,
-    open,
-    setOpen,
-    nodeId,
-    context,
-    floatingStyles,
-    modal,
-    side
-  } = useMenuContext();
-  const computedFloatingStyles = useMemo(() => {
-    var _a2;
-    return {
-      ...floatingStyles,
-      visibility: ((_a2 = middlewareData.hide) == null ? void 0 : _a2.referenceHidden) ? "hidden" : "visible"
-    };
-  }, [floatingStyles, (_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden]);
-  const handleOverlayPointerDown = useCallback(
+  const { ref, index } = useListItem();
+  const mergeRefs2 = useMergeRefs([ref, forwardedRef]);
+  const handleClick = useCallback(
     (e) => {
-      if (modal) stopPropagation(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);
     },
-    [modal]
+    [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
   );
-  return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
-    FloatingOverlay,
-    {
-      className: menuOverlay({ modal }),
-      onClick: handleOverlayPointerDown,
-      lockScroll: true,
-      "data-floating-content": "",
-      children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
-        MenuContentContext.Provider,
-        {
-          value: {
-            getItemProps,
-            activeIndex,
-            elementsRef,
-            open,
-            setOpen,
-            refs,
-            setActiveIndex,
-            size: size2,
-            variant,
-            accentColor,
-            radius
-          },
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "border-box w-max outline-none",
-              ref: refs.setFloating,
-              tabIndex: -1,
-              style: computedFloatingStyles,
-              "data-floating-content": "",
-              ...getFloatingProps(),
-              children: /* @__PURE__ */ jsx(
-                "ul",
-                {
-                  className: cx(
-                    menuContent({ size: size2 }),
-                    floating({ side, shadow: "3" }),
-                    radiusCva({ radius, maxLarge: true }),
-                    "max-h-(--overmap-menu-available-height)",
-                    className
-                  ),
-                  ref: forwardedRef,
-                  "data-state": getOpenState(open),
-                  "data-side": side,
-                  "data-accent-color": accentColor,
-                  ...rest,
-                  children
-                }
-              )
-            }
-          )
-        }
-      ) }) })
-    }
-  ) }) });
-});
-MenuContent.displayName = "Menu.Content";
-const SubContext = 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",
+  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,
@@ -3424,7 +3053,7 @@ const MenuCheckboxItemIndicator = memo((props) => {
 MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
 const MenuClickTrigger = memo((props) => {
   const { ref: forwardedRef, children, disabled = false } = props;
-  const { getReferenceProps, refs, setTriggerType, open } = useMenuContext();
+  const { getReferenceProps, refs, setTriggerType, open } = use(MenuContext);
   const mergedRefs = useMergeRefs([refs.setReference, forwardedRef]);
   useEffect(() => {
     setTriggerType("click");
@@ -3439,13 +3068,113 @@ const MenuClickTrigger = memo((props) => {
       ...getReferenceProps({ disabled }),
       children
     }
-  );
+  );
+});
+MenuClickTrigger.displayName = "MenuClickTrigger";
+const MenuContent = memo((props) => {
+  var _a;
+  const providerContext = useProvider();
+  const {
+    ref: forwardedRef,
+    className,
+    children,
+    size: size2 = "md",
+    variant = "soft",
+    radius = providerContext.radius,
+    accentColor = "base",
+    ...rest
+  } = props;
+  const {
+    refs,
+    getFloatingProps,
+    middlewareData,
+    elementsRef,
+    activeIndex,
+    setActiveIndex,
+    getItemProps,
+    open,
+    setOpen,
+    nodeId,
+    context,
+    floatingStyles,
+    modal,
+    side
+  } = use(MenuContext);
+  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]);
+  const handleOverlayPointerDown = useCallback(
+    (e) => {
+      if (modal) stopPropagation(e);
+    },
+    [modal]
+  );
+  return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    FloatingOverlay,
+    {
+      className: menuOverlay({ modal }),
+      onClick: handleOverlayPointerDown,
+      lockScroll: true,
+      "data-floating-content": "",
+      children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
+        MenuContentContext.Provider,
+        {
+          value: {
+            getItemProps,
+            activeIndex,
+            elementsRef,
+            open,
+            setOpen,
+            refs,
+            setActiveIndex,
+            size: size2,
+            variant,
+            accentColor,
+            radius
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "border-box w-max outline-none",
+              ref: refs.setFloating,
+              tabIndex: -1,
+              style: computedFloatingStyles,
+              "data-floating-content": "",
+              ...getFloatingProps(),
+              children: /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  className: cx(
+                    menuContent({ size: size2 }),
+                    floating({ side, shadow: "3" }),
+                    radiusCva({ radius, maxLarge: true }),
+                    "max-h-(--overmap-menu-available-height)",
+                    className
+                  ),
+                  ref: forwardedRef,
+                  "data-state": getOpenState(open),
+                  "data-side": side,
+                  "data-accent-color": accentColor,
+                  ...rest,
+                  children
+                }
+              )
+            }
+          )
+        }
+      ) }) })
+    }
+  ) }) });
 });
-MenuClickTrigger.displayName = "MenuClickTrigger";
+MenuContent.displayName = "Menu.Content";
 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 +3225,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 +3258,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 +3269,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 +3277,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 +3305,12 @@ const MenuMultiSelectItem = genericMemo(function(props) {
   ) });
 });
 const PagesContext = createContext({});
-const usePagesContext = () => useContext(PagesContext);
+const MenuPageContent = memo((props) => {
+  const { page, children } = props;
+  const { activePage } = use(PagesContext);
+  return activePage === page ? children : null;
+});
+MenuPageContent.displayName = "PageContent";
 const MenuPages = memo((props) => {
   const { children, defaultPage, page, onPageChange } = props;
   const [activePage, setActivePage] = useControlledState(defaultPage ?? "", page, onPageChange);
@@ -3607,16 +3318,10 @@ const MenuPages = memo((props) => {
   return /* @__PURE__ */ jsx(PagesContext.Provider, { value: contextValue, children });
 });
 MenuPages.displayName = "MenuPages";
-const MenuPageContent = (props) => {
-  const { page, children } = props;
-  const { activePage } = usePagesContext();
-  return activePage === page ? children : null;
-};
-MenuPageContent.displayName = "PageContent";
 const MenuPageTrigger = memo((props) => {
   const { ref, onSelect, page, ...rest } = props;
-  const { refs, setActiveIndex } = useMenuContentContext();
-  const { setActivePage } = usePagesContext();
+  const { refs, setActiveIndex } = use(MenuContentContext);
+  const { setActivePage } = use(PagesContext);
   const handleSelect = useCallback(() => {
     var _a;
     onSelect == null ? void 0 : onSelect();
@@ -3627,6 +3332,100 @@ const MenuPageTrigger = memo((props) => {
   return /* @__PURE__ */ jsx(MenuItem, { ref, onSelect: handleSelect, closeOnSelect: false, ...rest });
 });
 MenuPageTrigger.displayName = "MenuPageTrigger";
+const MENU_OVERFLOW_PADDING = 20;
+const MENU_CONTENT_PADDING = 8;
+const MENU_MINIMUM_MAX_HEIGHT = 250;
+const DEFAULT_OFFSET = 5;
+const MenuRoot = memo((props) => {
+  const {
+    children,
+    side = "bottom",
+    align = "center",
+    offset: offset$1,
+    loop = false,
+    modal = false,
+    // open state related props
+    open: controlledOpen,
+    onOpenChange,
+    defaultOpen
+  } = props;
+  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [triggerType, setTriggerType] = useState(null);
+  const elementsRef = useRef([]);
+  const nodeId = useFloatingNodeId();
+  const { refs, floatingStyles, context, middlewareData } = useFloating({
+    nodeId,
+    strategy: "fixed",
+    // TODO: probably some way with template string types to not need the "as Placement"
+    placement: side + (align !== "center" ? "-" + align : ""),
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: setOpen,
+    middleware: [
+      offset({ mainAxis: offset$1 ?? DEFAULT_OFFSET }),
+      size({
+        apply({ availableHeight, elements }) {
+          elements.floating.style.setProperty(
+            "--overmap-menu-available-height",
+            `${Math.max(availableHeight, MENU_MINIMUM_MAX_HEIGHT)}px`
+          );
+        },
+        padding: MENU_OVERFLOW_PADDING
+      }),
+      flip({ fallbackStrategy: "initialPlacement" }),
+      shift({ padding: MENU_OVERFLOW_PADDING }),
+      hide()
+    ]
+  });
+  const role = useRole(context, {
+    role: "menu"
+  });
+  const dismiss = useDismiss(context, {
+    capture: true,
+    ancestorScroll: triggerType === "context" || triggerType === "virtual"
+  });
+  const click = useClick(context, {
+    enabled: triggerType === "click"
+  });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop
+  });
+  const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
+    dismiss,
+    listNavigation,
+    click,
+    role
+  ]);
+  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(
+    MenuContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        refs,
+        context,
+        floatingStyles,
+        elementsRef,
+        getFloatingProps,
+        getItemProps,
+        getReferenceProps,
+        nodeId,
+        activeIndex,
+        setActiveIndex,
+        middlewareData,
+        side,
+        modal,
+        setTriggerType
+      },
+      children
+    }
+  ) });
+});
+MenuRoot.displayName = "Root";
 const MenuScroll = memo((props) => {
   const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx(
@@ -3665,6 +3464,11 @@ const MenuSelectAllItem = genericMemo((props) => {
     }
   ) });
 });
+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(
@@ -3680,7 +3484,7 @@ const MenuSelectGroup = genericMemo(function MenuSelectGroup2(props) {
 const MenuSelectItem = genericMemo(function(props) {
   const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
   const { selected, selectValue } = use(SelectContext);
-  const isSelected = useMemo(() => selected(value), [selected, value]);
+  const isSelected = selected(value);
   const handleSelect = useCallback(() => {
     onSelect == null ? void 0 : onSelect();
     selectValue(value);
@@ -3691,27 +3495,144 @@ const MenuSelectItem = genericMemo(function(props) {
   return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
     MenuItem,
     {
-      ref,
-      role: "menuitemcheckbox",
-      onSelect: handleSelect,
-      closeOnSelect,
-      "data-state": getSelectedState(isSelected),
-      ...rest,
-      children: computedChildren
+      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
     }
-  ) });
-});
-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";
+MenuSub.displayName = "SubMenu";
 const MenuSubContent = memo((props) => {
   var _a;
   const { ref: forwardedRef, children, ...rest } = props;
-  const { middlewareData } = useMenuContext();
-  const { accentColor, radius, variant, size: size2 } = useMenuContentContext();
+  const { middlewareData } = use(MenuContext);
+  const { accentColor, radius, variant, size: size2 } = use(MenuContentContext);
   const {
     open,
     nodeId,
@@ -3725,7 +3646,7 @@ const MenuSubContent = memo((props) => {
     floatingStyles,
     setOpen,
     side
-  } = useSubContext();
+  } = use(SubContext);
   const wrapperRef = useRef(null);
   const mergeRefs2 = useMergeRefs([refs.setFloating, wrapperRef]);
   const computedFloatingStyles = useMemo(() => {
@@ -3777,83 +3698,634 @@ const MenuSubContent = memo((props) => {
             }
           )
         }
-      )
+      )
+    }
+  ) }) }) }) });
+});
+MenuSubContent.displayName = "MenuSubContent";
+const MenuSubTrigger = memo((props) => {
+  const { ref: forwardedRef, children, ...rest } = props;
+  const { refs, getReferenceProps, open, disabled } = use(SubContext);
+  const mergedRefs = useMergeRefs([forwardedRef, refs.setReference]);
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ref: mergedRefs,
+      closeOnSelect: false,
+      "aria-haspopup": "menu",
+      "data-state": getOpenState(open),
+      disabled,
+      ...getReferenceProps(rest),
+      children
+    }
+  );
+});
+MenuSubTrigger.displayName = "MenuSubTrigger";
+const MenuVirtualTrigger = memo((props) => {
+  const { virtualElement, disabled } = props;
+  const { refs, setTriggerType, setOpen } = use(MenuContext);
+  useEffect(() => {
+    setTriggerType("virtual");
+  }, [setTriggerType]);
+  useEffect(() => {
+    if (!disabled && virtualElement) {
+      refs.setPositionReference(virtualElement);
+      setOpen(true);
+    } else {
+      refs.setPositionReference(null);
+      setOpen(false);
+    }
+  }, [disabled, refs, setOpen, virtualElement]);
+  return null;
+});
+MenuVirtualTrigger.displayName = "VirtualTrigger";
+const Menu = {
+  Root: MenuRoot,
+  Content: MenuContent,
+  // sub
+  Sub: MenuSub,
+  SubContent: MenuSubContent,
+  SubTrigger: MenuSubTrigger,
+  // pages
+  Pages: MenuPages,
+  PageContent: MenuPageContent,
+  PageTrigger: MenuPageTrigger,
+  // triggers
+  ClickTrigger: MenuClickTrigger,
+  ContextTrigger: MenuContextTrigger,
+  VirtualTrigger: MenuVirtualTrigger,
+  // groups
+  Group: MenuGroup,
+  SelectGroup: MenuSelectGroup,
+  MultiSelectGroup: MenuMultiSelectGroup,
+  // items
+  Item: MenuItem,
+  SelectItem: MenuSelectItem,
+  MultiSelectItem: MenuMultiSelectItem,
+  SelectAllItem: MenuSelectAllItem,
+  CheckboxItem: MenuCheckboxItem,
+  // indicators
+  SelectedIndicator: MenuSelectedIndicator,
+  CheckboxItemIndicator: MenuCheckboxItemIndicator,
+  // input
+  InputRoot: MenuInputRoot,
+  InputField: MenuInputField,
+  InputSlot: MenuInputSlot,
+  // others
+  Label: MenuLabel,
+  Separator: MenuSeparator,
+  Scroll: MenuScroll
+};
+const KEY_MAPPING = {
+  next: "ArrowDown",
+  prev: "ArrowUp",
+  first: "PageUp",
+  last: "PageDown",
+  selectItem: "Enter"
+};
+const ITEM_SELECTOR = "menu-item";
+const GROUP_SELECTOR = "menu-group";
+const MenuRootContext = createContext({});
+const MenuGroupContext = createContext({});
+const MenuPageContext = createContext({});
+const menuRootCva = cva(["w-full", "outline-none"], {
+  variants: {
+    size: {
+      xs: ["p-0.5", "text-xs", "min-w-30"],
+      sm: ["p-0.75", "text-sm", "min-w-35"],
+      md: ["p-1", "text-md", "min-w-40"],
+      lg: ["p-1.25", "text-lg", "min-w-45"],
+      xl: ["p-1.5", "text-xl", "min-w-50"]
+    },
+    radius: {
+      none: ["rounded-none"],
+      xs: ["rounded-xs"],
+      sm: ["rounded-sm"],
+      md: ["rounded-md"],
+      lg: ["rounded-lg"],
+      xl: ["rounded-lg"],
+      full: ["rounded-lg"]
+    }
+  }
+});
+const menuItemCva = cva(
+  [
+    "select-none",
+    "relative",
+    "flex",
+    "items-center",
+    "outline-none",
+    "data-[disabled=true]:text-(--base-a8)",
+    "data-[disabled=true]:pointer-events-none",
+    "shrink-0",
+    "py-1",
+    "text-(--base-12)"
+  ],
+  {
+    variants: {
+      size: {
+        xs: ["gap-1.5", "px-3"],
+        sm: ["gap-1.75", "px-3.5"],
+        md: ["gap-2", "px-4"],
+        lg: ["gap-2.25", "px-4.5"],
+        xl: ["gap-2.5", "px-5"]
+      },
+      variant: {
+        solid: [
+          "data-[active=true]:not-[data-[disabled=true]]:text-(--accent-contrast)",
+          "data-[active=true]:not-[data-[disabled=true]]:bg-(--accent-a9)",
+          "data-[active=true]:not-[data-[disabled=true]]:active:brightness-110"
+        ],
+        soft: [
+          "data-[active=true]:not-[data-[disabled=true]]:bg-(--accent-a3)",
+          "data-[active=true]:not-[data-[disabled=true]]:active:bg-(--accent-a4)"
+        ]
+      }
+    }
+  }
+);
+const menuGroupLabelCva = cva(["text-(--base-a11)", "flex", "items-center", "select-none", "py-1"], {
+  variants: {
+    size: {
+      xs: ["gap-1.5", "px-3", "text-xs"],
+      sm: ["gap-1.75", "px-3.5", "text-xs"],
+      md: ["gap-2", "px-4", "text-sm"],
+      lg: ["gap-2.25", "px-4.5", "text-base"],
+      xl: ["gap-2.5", "px-5", "text-lg"]
+    }
+  }
+});
+const menuSeparatorCva = cva(["h-px", "bg-(--base-a6)", "w-auto", "shrink-0"], {
+  variants: {
+    size: {
+      xs: ["-mx-0.5", "my-0.5"],
+      sm: ["-mx-0.75", "my-0.75"],
+      md: ["-mx-1", "my-1"],
+      lg: ["-mx-1.25", "my-1.25"],
+      xl: ["-mx-1.5", "my-1.5"]
+    }
+  }
+});
+const MenuV2Item = memo((props) => {
+  const {
+    ref,
+    children,
+    className,
+    disabled = false,
+    onClick,
+    onSelect,
+    onPointerEnter,
+    onPointerLeave,
+    onPointerMove,
+    ...rest
+  } = props;
+  const internalRef = useRef(null);
+  const itemId = useId();
+  const { activeItemId, setActiveItemId, size: size2, variant, radius } = use(MenuRootContext);
+  const isActive = itemId === activeItemId;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+    },
+    [onSelect]
+  );
+  const handleClick = useCallback(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      handleSelect(new Event("menu-select"));
+    },
+    [handleSelect, onClick]
+  );
+  const handlePointerEnter = useCallback(
+    (e) => {
+      onPointerEnter == null ? void 0 : onPointerEnter(e);
+      if (e.defaultPrevented) return;
+      setActiveItemId(itemId);
+    },
+    [onPointerEnter, setActiveItemId, itemId]
+  );
+  const handlePointerLeave = useCallback(
+    (e) => {
+      onPointerLeave == null ? void 0 : onPointerLeave(e);
+      if (e.defaultPrevented) return;
+      setActiveItemId(null);
+    },
+    [onPointerLeave, setActiveItemId]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      onPointerMove == null ? void 0 : onPointerMove(e);
+      if (e.defaultPrevented) return;
+      setActiveItemId(itemId);
+    },
+    [onPointerMove, itemId, setActiveItemId]
+  );
+  useEffect(() => {
+    if (!internalRef.current) return;
+    const element = internalRef.current;
+    element.addEventListener("menu-select", handleSelect);
+    return () => {
+      element.removeEventListener("menu-select", handleSelect);
+    };
+  }, [handleSelect]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: mergeRefs([ref, internalRef]),
+      className: cx(menuItemCva({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
+      role: "menuitem",
+      onClick: handleClick,
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onPointerMove: handlePointerMove,
+      ...{ [ITEM_SELECTOR]: itemId },
+      "data-active": getBooleanState(isActive),
+      "data-disabled": getBooleanState(disabled),
+      "aria-disabled": getBooleanState(disabled),
+      ...rest,
+      children
+    }
+  );
+});
+MenuV2Item.displayName = "MenuItem";
+const MenuV2CheckboxItem = memo((props) => {
+  const { ref, checked, onCheckedChange, onSelect, ...rest } = props;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      switch (checked) {
+        case true:
+          onCheckedChange(false);
+          break;
+        case "indeterminate":
+          onCheckedChange(true);
+          break;
+        case false:
+          onCheckedChange(true);
+          break;
+      }
+    },
+    [checked, onCheckedChange, onSelect]
+  );
+  return /* @__PURE__ */ jsx(CheckedIndicatorContext.Provider, { value: checked, children: /* @__PURE__ */ jsx(MenuV2Item, { ref, onSelect: handleSelect, ...rest }) });
+});
+MenuV2CheckboxItem.displayName = "MenuCheckboxItem";
+const MenuV2CheckedIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
+});
+MenuV2CheckedIndicator.displayName = "MenuCheckboxItemIndicator";
+const MenuV2Group = memo((props) => {
+  const { ref, children, ...rest } = props;
+  const groupId = useId();
+  const [labelId, setLabelId] = useState(null);
+  const contextValue = useMemo(
+    () => ({
+      labelId,
+      setLabelId
+    }),
+    [labelId]
+  );
+  return /* @__PURE__ */ jsx("div", { ref, role: "group", ...{ [GROUP_SELECTOR]: groupId }, "aria-labelledby": labelId ?? void 0, ...rest, children: /* @__PURE__ */ jsx(MenuGroupContext, { value: contextValue, children }) });
+});
+MenuV2Group.displayName = "MenuGroup";
+const MenuV2GroupLabel = memo((props) => {
+  const { ref, children, id, className, ...rest } = props;
+  const labelId = useFallbackId(id);
+  const { size: size2 } = use(MenuRootContext);
+  const { setLabelId } = use(MenuGroupContext);
+  useEffect(() => {
+    setLabelId(labelId);
+  }, [labelId, setLabelId]);
+  return /* @__PURE__ */ jsx("div", { ref, id: labelId, className: cx(menuGroupLabelCva({ size: size2 }), className), ...rest, children });
+});
+MenuV2GroupLabel.displayName = "MenuGroupLabel";
+const MenuV2SelectAllItem = genericMemo((props) => {
+  const { ref, children, onSelect, ...rest } = props;
+  const { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
+  const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      toggleSelectAll();
+    },
+    [onSelect, toggleSelectAll]
+  );
+  return /* @__PURE__ */ jsx(MenuV2Item, { onSelect: handleSelect, ref, "data-state": getCheckedState(selectedState), ...rest, children: /* @__PURE__ */ jsx(CheckedIndicatorContext, { value: selectedState, children }) });
+});
+const MenuV2MultiSelectGroup = genericMemo(function MenuMultiSelectGroup3(props) {
+  const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(MenuV2Group, { ref, ...rest, children: /* @__PURE__ */ jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
+});
+const MenuV2MultiSelectItem = genericMemo(function(props) {
+  const { ref, onSelect, children, value, ...rest } = props;
+  const { selected, selectValue, registerValue } = use(MultiSelectContext);
+  useLayoutEffect(() => {
+    return registerValue(value);
+  }, [registerValue, value]);
+  const isSelected = selected(value);
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      selectValue(value);
+    },
+    [onSelect, selectValue, value]
+  );
+  return /* @__PURE__ */ jsx(
+    MenuV2Item,
+    {
+      ref,
+      role: "menuitemcheckbox",
+      onSelect: handleSelect,
+      "data-state": getSelectedState(isSelected),
+      ...rest,
+      children: /* @__PURE__ */ jsx(SelectedIndicatorContext, { value: isSelected, children })
+    }
+  );
+});
+const MenuV2Page = memo((props) => {
+  const { children, ref, page, ...rest } = props;
+  const { page: activePage } = use(MenuPageContext);
+  const isActive = page === activePage;
+  return /* @__PURE__ */ jsx("div", { ref, "data-active": getActiveState(isActive), hidden: !isActive, ...rest, children: isActive ? children : null });
+});
+MenuV2Page.displayName = "MenuPage";
+const MenuV2Pages = memo((props) => {
+  const { children, defaultPage = "", page: controlledPage, onPageChange } = props;
+  const [page, setPage] = useControlledState(defaultPage, controlledPage, onPageChange);
+  const contextValue = useMemo(
+    () => ({
+      page,
+      setPage
+    }),
+    [page, setPage]
+  );
+  return /* @__PURE__ */ jsx(MenuPageContext, { value: contextValue, children });
+});
+MenuV2Pages.displayName = "MenuPages";
+const MenuV2PageTriggerItem = memo((props) => {
+  const { ref, children, page, onSelect, ...rest } = props;
+  const { page: activePage, setPage } = use(MenuPageContext);
+  const isActive = page === activePage;
+  const handleSelect = useCallback(
+    (e) => {
+      onSelect == null ? void 0 : onSelect(e);
+      if (e.defaultPrevented) return;
+      setPage(page);
+    },
+    [onSelect, page, setPage]
+  );
+  return /* @__PURE__ */ jsx(MenuV2Item, { ref, onSelect: handleSelect, "data-state": getActiveState(isActive), ...rest, children: /* @__PURE__ */ jsx(SelectedIndicatorContext, { value: isActive, children }) });
+});
+MenuV2PageTriggerItem.displayName = "CommandMenuPageTriggerItem";
+const computeNextIndex = (index, length, direction, loop) => {
+  switch (direction) {
+    case "next":
+      return index === length - 1 ? loop ? 0 : index : index + 1;
+    case "prev":
+      return index === 0 ? loop ? length - 1 : index : index - 1;
+  }
+};
+const MenuV2Root = memo((props) => {
+  const providerContext = useProvider();
+  const {
+    ref,
+    children,
+    className,
+    onKeyDown,
+    loop = false,
+    // style props
+    radius = providerContext.radius,
+    accentColor = "base",
+    size: size2 = "md",
+    variant = "soft",
+    ...rest
+  } = props;
+  const internalRef = useRef(null);
+  const [activeItemId, setActiveItemId] = useState(null);
+  const getItems = useCallback((element) => {
+    return Array.from(element.querySelectorAll(`[${ITEM_SELECTOR}]:not([data-disabled=true]`));
+  }, []);
+  const getFirstItem = useCallback(
+    (element) => {
+      return getItems(element).at(0);
+    },
+    [getItems]
+  );
+  const getLastItem = useCallback(
+    (element) => {
+      return getItems(element).at(-1);
+    },
+    [getItems]
+  );
+  const getActiveItem = useCallback(
+    (element) => {
+      return getItems(element).find((itemEle) => itemEle.getAttribute(ITEM_SELECTOR) === activeItemId);
+    },
+    [activeItemId, getItems]
+  );
+  const getNextItem = useCallback(
+    (element, direction) => {
+      const items = getItems(element);
+      const activeItem = getActiveItem(element);
+      const activeItemIndex = items.findIndex((itemEle) => itemEle === activeItem);
+      const nextItemIndex = computeNextIndex(activeItemIndex, items.length, direction, loop);
+      return items[nextItemIndex];
+    },
+    [getActiveItem, getItems, loop]
+  );
+  const getGroups = useCallback(() => {
+    if (!internalRef.current) return [];
+    return Array.from(internalRef.current.querySelectorAll(`[${GROUP_SELECTOR}]`));
+  }, []);
+  const getActiveGroup = useCallback(() => {
+    var _a;
+    return ((_a = getActiveItem(internalRef.current)) == null ? void 0 : _a.closest(`[${GROUP_SELECTOR}]`)) ?? void 0;
+  }, [getActiveItem]);
+  const getNextGroup = useCallback(
+    (direction) => {
+      const groups = getGroups();
+      const activeGroup = getActiveGroup();
+      const activeGroupIndex = groups.findIndex((groupEle) => groupEle === activeGroup);
+      const nextGroupIndex = computeNextIndex(activeGroupIndex, groups.length, direction, loop);
+      return groups[nextGroupIndex];
+    },
+    [getActiveGroup, getGroups, loop]
+  );
+  const getFirstGroup = useCallback(() => {
+    return getGroups().at(0);
+  }, [getGroups]);
+  const getLastGroup = useCallback(() => {
+    return getGroups().at(-1);
+  }, [getGroups]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      onKeyDown == null ? void 0 : onKeyDown(e);
+      if (e.defaultPrevented) return;
+      switch (e.code) {
+        case KEY_MAPPING.selectItem: {
+          const activeItem = getActiveItem(internalRef.current);
+          if (activeItem) activeItem.dispatchEvent(new Event("menu-select"));
+          break;
+        }
+        case KEY_MAPPING.next: {
+          let nextItem;
+          if (e.shiftKey) {
+            const nextGroup = getNextGroup("next");
+            if (!nextGroup) return;
+            nextItem = getFirstItem(nextGroup);
+          } else {
+            nextItem = getNextItem(internalRef.current, "next");
+          }
+          if (!nextItem) return;
+          setActiveItemId(nextItem.getAttribute(ITEM_SELECTOR));
+          break;
+        }
+        case KEY_MAPPING.prev: {
+          let prevItem;
+          if (e.shiftKey) {
+            const prevGroup = getNextGroup("prev");
+            if (!prevGroup) return;
+            prevItem = getFirstItem(prevGroup);
+          } else {
+            prevItem = getNextItem(internalRef.current, "prev");
+          }
+          if (!prevItem) return;
+          setActiveItemId(prevItem.getAttribute(ITEM_SELECTOR));
+          break;
+        }
+        case KEY_MAPPING.first: {
+          let firstItem;
+          if (e.shiftKey) {
+            const firstGroup = getFirstGroup();
+            if (!firstGroup) return;
+            firstItem = getFirstItem(firstGroup);
+          } else {
+            firstItem = getFirstItem(internalRef.current);
+          }
+          if (!firstItem) return;
+          setActiveItemId(firstItem.getAttribute(ITEM_SELECTOR));
+          break;
+        }
+        case KEY_MAPPING.last: {
+          let lastItem;
+          if (e.shiftKey) {
+            const lastGroup = getLastGroup();
+            if (!lastGroup) return;
+            lastItem = getFirstItem(lastGroup);
+          } else {
+            lastItem = getLastItem(internalRef.current);
+          }
+          if (!lastItem) return;
+          setActiveItemId(lastItem.getAttribute(ITEM_SELECTOR));
+          break;
+        }
+      }
+    },
+    [getActiveItem, getFirstGroup, getFirstItem, getLastGroup, getLastItem, getNextGroup, getNextItem, onKeyDown]
+  );
+  useEffect(() => {
+    var _a;
+    const firstItem = getFirstItem(internalRef.current);
+    if (!firstItem) return;
+    (_a = internalRef.current) == null ? void 0 : _a.focus();
+    setActiveItemId(firstItem.getAttribute(ITEM_SELECTOR));
+  }, [getFirstItem]);
+  const contextValue = useMemo(
+    () => ({
+      activeItemId,
+      setActiveItemId,
+      // style props
+      accentColor,
+      radius,
+      variant,
+      size: size2
+    }),
+    [accentColor, activeItemId, radius, size2, variant]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: mergeRefs([ref, internalRef]),
+      className: cx(menuRootCva({ size: size2 }), radiusCva({ radius, maxLarge: true }), className),
+      role: "menu",
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      "aria-activedescendant": activeItemId ?? void 0,
+      "data-accent-color": accentColor,
+      ...rest,
+      children: /* @__PURE__ */ jsx(MenuRootContext, { value: contextValue, 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,
+MenuV2Root.displayName = "MenuRoot";
+const MenuV2SelectedIndicator = memo((props) => {
+  const { ref, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(SelectedIndicator, { ref, ...rest, children });
+});
+MenuV2SelectedIndicator.displayName = "MenuCheckboxItemIndicator";
+const MenuV2SelectGroup = genericMemo(function MenuSelectGroup3(props) {
+  const { ref, children, required, defaultValue, value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(MenuV2Group, { ref, ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
+    SingleSelectNotRequiredProvider,
     {
-      ref: mergedRefs,
-      closeOnSelect: false,
-      "aria-haspopup": "menu",
-      "data-state": getOpenState(open),
-      disabled,
-      ...getReferenceProps(rest),
+      defaultValue,
+      value,
+      onValueChange,
       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);
+const MenuV2SelectItem = genericMemo(function(props) {
+  const { ref, value, onSelect, children, ...rest } = props;
+  const { selected, selectValue } = use(SelectContext);
+  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 })
     }
-  }, [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 +4494,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 } })
   ] });
 });
@@ -4032,8 +4504,8 @@ ErrorFallback.displayName = "ErrorFallback";
 const OvermapErrorBoundary = memo((props) => {
   const { absoluteCentering, message } = props;
   const [attempt, setAttempt] = useState(0);
-  const logError = useCallback((error, info) => {
-    console.error("Error in OvermapErrorBoundary:", error, info);
+  const logError = useCallback((error2, info2) => {
+    console.error("Error in OvermapErrorBoundary:", error2, info2);
     setAttempt((prev) => prev + 1);
   }, []);
   const handleRetry = useCallback(() => {
@@ -5387,7 +5859,7 @@ const TableRowHeaderCell = memo((props) => {
   const { size: size2, border, variant } = useContext(TableContext);
   return /* @__PURE__ */ jsx("th", { ref, className: cx(tableCellCva({ size: size2, border, cell: true, variant }), className), ...rest });
 });
-TableRowHeaderCell.displayName = "TableRow";
+TableRowHeaderCell.displayName = "TableRowHeaderCell";
 const Table = {
   Root: TableRoot,
   Header: TableHeader,
@@ -5620,170 +6092,184 @@ const TextArea = memo((props) => {
   );
 });
 TextArea.displayName = "TextArea";
-const toastCva = cva(
-  [
-    "shadow-md",
-    "duration-200",
-    "data-[state='open']:animate-in",
-    "data-[state='open']:fade-in-0",
-    "data-[state='open']:zoom-in-95",
-    "data-[state='closed']:animate-out",
-    "data-[state='closed']:fade-out-0",
-    "data-[state='closed']:zoom-out-95"
-  ],
-  {
-    variants: {
-      variant: {
-        surface: ["bg-(--accent-1)", "text-(--accent-11)", "ring-1", "ring-inset", "ring-(--accent-6)"],
-        soft: ["bg-(--accent-1)", "text-(--accent-11)"]
-      },
-      size: {
-        xs: ["text-xs", "p-2"],
-        sm: ["text-sm", "p-3"],
-        md: ["text-base", "p-4"],
-        lg: ["text-lg", "p-5"],
-        xl: ["text-xl", "p-6"]
-      }
-    },
-    defaultVariants: {
-      variant: "surface",
-      size: "md"
-    }
-  }
-);
-const _Toast = function Toast2(props) {
-  const { radius, ...restProviderContext } = useProvider();
-  const {
-    ref,
-    title,
-    description,
-    icon,
-    size: size2 = "md",
-    accentColor = restProviderContext.accentColor,
-    variant,
-    onClose,
-    sensitivity,
-    action,
-    ...rest
-  } = props;
-  const [open, setOpen] = useState(true);
-  const handleOpenChange = useCallback(
-    (open2) => {
-      if (!open2 && onClose) onClose();
-      setOpen(open2);
-    },
-    [onClose]
-  );
+const CustomToast = memo((props) => {
+  const { toastId, title, description, icon, accentColor, closeButton, action } = props;
+  const { radius } = useProvider();
+  const handleAction = useCallback(() => {
+    toast$1.dismiss(toastId);
+  }, [toastId]);
+  const handleClose = useCallback(() => {
+    toast$1.dismiss(toastId);
+  }, [toastId]);
   return /* @__PURE__ */ jsxs(
-    RadixToast.Root,
+    "div",
     {
       className: cx(
-        "flex w-max max-w-full items-center gap-4",
-        toastCva({ size: size2, variant }),
+        "flex items-center gap-2 bg-(--base-2) p-4 ring ring-(--base-6) shadow-md max-w-full max-h-full",
         radiusCva({ radius, maxLarge: true })
       ),
-      ref,
-      open,
-      type: sensitivity,
-      onOpenChange: handleOpenChange,
       "data-accent-color": accentColor,
-      "data-floating-content": "",
-      ...rest,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex grow items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 grow min-w-0", children: [
           icon,
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx(RadixToast.Title, { className: "font-medium", children: title }),
-              /* @__PURE__ */ jsx(RadixToast.Description, { children: description })
-            ] }),
-            action && /* @__PURE__ */ jsx(RadixToast.Action, { className: "w-max", altText: action.altText, asChild: true, children: action.content })
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 select-none", children: [
+            /* @__PURE__ */ jsx(Text, { className: "truncate", children: title }),
+            description && /* @__PURE__ */ jsx(Text, { accentColor: "base", size: "sm", weight: "regular", children: description })
           ] })
         ] }),
-        /* @__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(Slot, { onClick: handleAction, children: action }),
+        closeButton && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            onClick: handleClose,
+            "aria-label": "Close",
+            accentColor: "base",
+            variant: "ghost",
+            size: "xs",
+            children: /* @__PURE__ */ jsx(LuIcon, { icon: X })
+          }
+        )
       ]
     }
   );
+});
+const basic = (options) => {
+  const { icon, description, title, closeButton, action, ...rest } = options;
+  return toast$1.custom(
+    (id) => /* @__PURE__ */ jsx(
+      CustomToast,
+      {
+        toastId: id,
+        icon,
+        description,
+        title,
+        closeButton,
+        action
+      }
+    ),
+    rest
+  );
 };
-const Toast = memo(_Toast);
-Toast.displayName = "Toast";
-const ToastContext = createContext({});
-const useToast = () => {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return context;
+const success = (options) => {
+  const {
+    icon = /* @__PURE__ */ jsx(LuIcon, { icon: Check, color: "var(--accent-9)" }),
+    description,
+    title,
+    closeButton,
+    action,
+    ...rest
+  } = options;
+  return toast$1.custom(
+    (id) => /* @__PURE__ */ jsx(
+      CustomToast,
+      {
+        accentColor: "success",
+        toastId: id,
+        icon,
+        description,
+        title,
+        closeButton,
+        action
+      }
+    ),
+    rest
+  );
+};
+const info = (options) => {
+  const {
+    icon = /* @__PURE__ */ jsx(LuIcon, { icon: InfoIcon, color: "var(--base-11)" }),
+    description,
+    title,
+    closeButton,
+    action,
+    ...rest
+  } = options;
+  return toast$1.custom(
+    (id) => /* @__PURE__ */ jsx(
+      CustomToast,
+      {
+        accentColor: "base",
+        toastId: id,
+        icon,
+        description,
+        title,
+        closeButton,
+        action
+      }
+    ),
+    rest
+  );
 };
-const WORDS_PER_SECOND = 240 / 60;
-const MIN_DURATION = 5e3;
-const calculatedDuration = (toast) => {
-  if (toast.duration && toast.duration >= MIN_DURATION) return toast.duration;
-  const words = toast.description.split(" ").length + toast.title.split(" ").length;
-  return MIN_DURATION + words / WORDS_PER_SECOND;
+const warning = (options) => {
+  const {
+    icon = /* @__PURE__ */ jsx(LuIcon, { icon: TriangleAlertIcon, color: "var(--accent-9)" }),
+    description,
+    title,
+    closeButton,
+    action,
+    ...rest
+  } = options;
+  return toast$1.custom(
+    (id) => /* @__PURE__ */ jsx(
+      CustomToast,
+      {
+        accentColor: "warning",
+        toastId: id,
+        icon,
+        description,
+        title,
+        closeButton,
+        action
+      }
+    ),
+    rest
+  );
 };
-let unsafeShowToast = void 0;
-const ToastProvider = memo(function ToastContextProvider({
-  children,
-  // Use this class to change where the viewport for the toasts should be
-  className,
-  hotkey,
-  ...rest
-}) {
-  const [toasts, setToasts] = useState([]);
-  const handleCloseToast = useCallback((id, reason, callback) => {
-    setToasts((prevToasts) => {
-      const toast = prevToasts.find((toast2) => toast2.id === id);
-      if (toast && reason === 0) clearTimeout(toast.timeout);
-      return prevToasts.filter((toast2) => toast2.id !== id);
-    });
-    if (callback) callback();
-  }, []);
-  const toastContextValue = useMemo(() => {
-    let counter = 0;
-    const showToast = (toastProps) => {
-      const duration = calculatedDuration(toastProps);
-      const id = counter.toString();
-      counter += 1;
-      const pending = setTimeout(() => handleCloseToast(id, 1, toastProps.onClose), duration);
-      setToasts((prevToasts) => [...prevToasts, { ...toastProps, timeout: pending, duration, id }]);
-    };
-    const showPrimary = (toastProps) => showToast(toastProps);
-    const showSuccess = (toastProps) => showToast({ ...toastProps, accentColor: "success" });
-    const showError = (toastProps) => showToast({ ...toastProps, accentColor: "danger" });
-    const showInfo = (toastProps) => showToast({ ...toastProps, accentColor: "base" });
-    const showWarning = (toastProps) => showToast({ ...toastProps, accentColor: "warning" });
-    unsafeShowToast = showToast;
-    return {
-      showToast,
-      showPrimary,
-      showSuccess,
-      showError,
-      showInfo,
-      showWarning
-    };
-  }, [handleCloseToast]);
-  useEffect(() => {
-    return () => {
-      for (const { timeout } of toasts) clearTimeout(timeout);
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: toastContextValue, children: /* @__PURE__ */ jsxs(ToastProvider$1, { ...rest, children: [
-    children,
-    /* @__PURE__ */ jsx(
-      ToastViewport,
+const error = (options) => {
+  const {
+    icon = /* @__PURE__ */ jsx(LuIcon, { icon: CircleAlertIcon, color: "var(--accent-9)" }),
+    description,
+    title,
+    closeButton,
+    action,
+    ...rest
+  } = options;
+  return toast$1.custom(
+    (id) => /* @__PURE__ */ jsx(
+      CustomToast,
       {
-        className: cx(
-          "fixed top-0 right-0 z-[2147483647] flex w-full max-w-md list-none flex-col items-end gap-3 overflow-x-hidden overflow-y-auto p-5 outline-none",
-          className
-        ),
-        hotkey
+        accentColor: "danger",
+        toastId: id,
+        icon,
+        description,
+        title,
+        closeButton,
+        action
       }
     ),
-    toasts.map(({ id, onClose, ...toastProps }) => /* @__PURE__ */ jsx(Toast, { ...toastProps, onClose: () => handleCloseToast(id, 0, onClose) }, id))
-  ] }) });
+    rest
+  );
+};
+const toast = Object.assign(
+  basic,
+  {
+    success,
+    info,
+    warning,
+    error,
+    custom: toast$1.custom,
+    dismiss: toast$1.dismiss
+  },
+  { getHistory: toast$1.getHistory, getToasts: toast$1.getToasts }
+);
+const TOAST_OPTIONS = {
+  unstyled: true
+};
+const Toaster = memo((props) => {
+  return /* @__PURE__ */ jsx(Toaster$1, { toastOptions: TOAST_OPTIONS, richColors: false, closeButton: false, theme: "system", ...props });
 });
-ToastProvider.displayName = "ToastProvider";
+Toaster.displayName = "Toaster";
 const toggleButtonCva = cva(
   [
     "flex",
@@ -6209,7 +6695,6 @@ export {
   CheckboxGroupSelectAllItem,
   CheckboxIndicator,
   CheckboxRoot,
-  CollapsibleTree,
   CommandMenu,
   CommandMenuCheckboxIndicator,
   CommandMenuCheckboxItem,
@@ -6250,10 +6735,12 @@ export {
   InputSlot,
   Layout,
   LayoutContainer,
-  LayoutContext,
   LayoutRoot,
-  LayoutSlideOut,
+  LayoutSlideOutClose,
+  LayoutSlideOutContent,
+  LayoutSlideOutHandle,
   LayoutSlideOutOverlay,
+  LayoutSlideOutRoot,
   LayoutSlideOutTrigger,
   Link,
   LuIcon,
@@ -6284,6 +6771,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,
@@ -6320,9 +6824,15 @@ export {
   SegmentedTabsList,
   SegmentedTabsRoot,
   SegmentedTabsTrigger,
-  SelectedIndicatorContext,
   Separator,
   SlideOut,
+  SlideOutClose,
+  SlideOutContent,
+  SlideOutHandle,
+  SlideOutOverlay,
+  SlideOutRoot,
+  SlideOutTrigger,
+  SlideOutViewport,
   Slider,
   Spinner,
   Switch,
@@ -6343,9 +6853,7 @@ export {
   TabsTrigger,
   Text,
   TextArea,
-  Toast,
-  ToastContext,
-  ToastProvider,
+  Toaster,
   ToggleButton,
   ToggleGroup,
   ToggleGroupIconItem,
@@ -6357,24 +6865,24 @@ export {
   badge,
   buttonCva,
   floating,
+  genericMemo,
+  getActiveState,
+  getBooleanState,
+  getCheckedState,
+  getOpenState,
+  getSelectedState,
   mergeRefs,
   radiusCva,
   stopPropagation,
-  unsafeShowToast,
+  toast,
   useAlertDialog,
   useButtonGroup,
   useControlledState,
+  useFallbackId,
+  useLatest,
   useLayoutContext,
-  useMenuContentContext,
-  useMenuContext,
-  usePagesContext,
   useProvider,
-  useSelectedIndicatorContext,
-  useSize,
-  useStopEventPropagation,
-  useSubContext,
   useTextFilter,
-  useToast,
   useViewportSize
 };
 //# sourceMappingURL=blocks.js.map