@overmap-ai/blocks 1.0.29-menu-overhaul.12 → 1.0.29

package/dist/blocks.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useThemeContext, Badge as Badge$1, Flex as Flex$1, Box, Link, Text as Text$2, Button, IconButton as IconButton$1, Card, Inset, Dialog as Dialog$2, AlertDialog as AlertDialog$1, Theme, Grid, Separator as Separator$3, ScrollArea, Select as Select$1, Checkbox as Checkbox$1, Switch as Switch$1, Portal, TextField, Popover as Popover$1, TextArea as TextArea$1, Callout, Tooltip as Tooltip$1, TableRow } from "@radix-ui/themes";
+import { useThemeContext, Badge as Badge$1, Flex as Flex$1, Box, Link, Text as Text$2, Button, IconButton as IconButton$1, Card, Inset, Dialog as Dialog$2, AlertDialog as AlertDialog$1, Theme, Select as Select$1, Checkbox as Checkbox$1, Switch as Switch$1, Portal, TextField, Popover as Popover$1, TextArea as TextArea$1, Callout, Tooltip as Tooltip$1, Separator as Separator$2, ScrollArea, TableRow } from "@radix-ui/themes";
 import { Theme as Theme2, updateThemeAppearanceClass, useThemeContext as useThemeContext2 } from "@radix-ui/themes";
 import React, { useMemo, useState, useLayoutEffect, useCallback, useEffect, Children, isValidElement, memo, forwardRef, createContext, useContext, cloneElement, useRef, createElement, useReducer } from "react";
 import { useMediaQuery } from "react-responsive";
 import useResizeObserver from "@react-hook/resize-observer";
 import * as RiIcons from "react-icons/ri";
+import { RiQuestionMark } from "react-icons/ri";
 import * as RadixDialogPrimitive from "@radix-ui/react-dialog";
 import * as RadixPrimitiveCollapsible from "@radix-ui/react-collapsible";
 import { Slot } from "@radix-ui/react-slot";
@@ -13,8 +14,8 @@ import { Resizable } from "re-resizable";
 import { CSSTransition, Transition } from "react-transition-group";
 import ReactDOM, { flushSync } from "react-dom";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
-import { Root as Root$4, Item as Item$4 } from "@radix-ui/react-toggle-group";
-import { Root as Root$5 } from "@radix-ui/react-toolbar";
+import { Root as Root$3, Item as Item$3 } from "@radix-ui/react-toggle-group";
+import { Root as Root$4 } from "@radix-ui/react-toolbar";
 import * as RadixToast from "@radix-ui/react-toast";
 import { ToastProvider as ToastProvider$1, ToastViewport as ToastViewport$1 } from "@radix-ui/react-toast";
 import * as Toggle from "@radix-ui/react-toggle";
@@ -265,7 +266,7 @@ const Badge = memo(_Badge);
 const zeroMinWidth = "_zeroMinWidth_curjh_1";
 const zeroMinHeight = "_zeroMinHeight_curjh_5";
 const radius = "_radius_curjh_9";
-const styles$u = {
+const styles$r = {
   zeroMinWidth,
   zeroMinHeight,
   radius
@@ -277,9 +278,9 @@ const Flex = memo(
         Flex$1,
         {
           className: classNames(className, {
-            [styles$u.radius]: radius2,
-            [styles$u.zeroMinWidth]: zeroMinWidth2,
-            [styles$u.zeroMinHeight]: zeroMinHeight2
+            [styles$r.radius]: radius2,
+            [styles$r.zeroMinWidth]: zeroMinWidth2,
+            [styles$r.zeroMinHeight]: zeroMinHeight2
           }),
           ref,
           ...rest,
@@ -291,14 +292,14 @@ const Flex = memo(
 );
 const BreadcrumbContext = createContext({});
 const useBreadcrumbContext = () => useContext(BreadcrumbContext);
-const Item$3 = memo(
+const Item$2 = memo(
   forwardRef(({ className, children, ...rest }, ref) => {
     const { size: size2, severity } = useBreadcrumbContext();
     const severityColor = useSeverityColor(severity);
     return /* @__PURE__ */ jsx(Box, { className: classNames("overmap-breadcrumb-item", className), height: "max-content", width: "max-content", children: /* @__PURE__ */ jsx(Link, { ref, size: size2, color: severityColor, ...rest, children: /* @__PURE__ */ jsx(Flex, { height: "100%", width: "100%", align: "center", gap: "1", children }) }) });
   })
 );
-const Group$3 = memo(
+const Group$2 = memo(
   forwardRef(
     ({ className, children, separator, severity = "info", size: size2, gap = "2", ...rest }, ref) => {
       const severityColor = useSeverityColor(severity);
@@ -325,23 +326,23 @@ const Group$3 = memo(
   )
 );
 const Breadcrumb = {
-  Group: Group$3,
-  Item: Item$3
+  Group: Group$2,
+  Item: Item$2
 };
 const fluid$1 = "_fluid_r73gr_1";
 const hoverSpin90Clockwise = "_hoverSpin90Clockwise_r73gr_15";
 const hoverSpin180Clockwise = "_hoverSpin180Clockwise_r73gr_25";
 const hoverSpin360Clockwise = "_hoverSpin360Clockwise_r73gr_35";
-const styles$t = {
+const styles$q = {
   fluid: fluid$1,
   hoverSpin90Clockwise,
   hoverSpin180Clockwise,
   hoverSpin360Clockwise
 };
 const hoverEffectClassNameMapping = {
-  spin90Clockwise: styles$t.hoverSpin90Clockwise,
-  spin180Clockwise: styles$t.hoverSpin180Clockwise,
-  spin360Clockwise: styles$t.hoverSpin360Clockwise
+  spin90Clockwise: styles$q.hoverSpin90Clockwise,
+  spin180Clockwise: styles$q.hoverSpin180Clockwise,
+  spin360Clockwise: styles$q.hoverSpin360Clockwise
 };
 const clickOnEnterOrSpace = (e) => {
   if (e.key === "Enter" || e.key === " ") {
@@ -363,12 +364,12 @@ const ButtonGroupContext = createContext({});
 const useButtonGroupContext = () => useContext(ButtonGroupContext);
 const spinner = "_spinner_1oknc_9";
 const spin = "_spin_1oknc_9";
-const styles$s = {
+const styles$p = {
   spinner,
   spin
 };
 const Spinner = memo(() => {
-  return /* @__PURE__ */ jsx("div", { className: styles$s.spinner });
+  return /* @__PURE__ */ jsx("div", { className: styles$p.spinner });
 });
 Spinner.displayName = "Spinner";
 const _Button$1 = forwardRef(function Button$1(props, ref) {
@@ -404,7 +405,7 @@ const _Button$1 = forwardRef(function Button$1(props, ref) {
       ref,
       type,
       className: classNames(className, hoverEffectClasses, {
-        [styles$t.fluid]: fluid2
+        [styles$q.fluid]: fluid2
       }),
       color,
       size: useResponsiveMapping(size2, SizeMapping),
@@ -446,7 +447,7 @@ const _Button = forwardRef(function Button3(props, ref) {
     IconButton$1,
     {
       className: classNames(className, hoverEffectClasses, {
-        [styles$t.fluid]: fluid2
+        [styles$q.fluid]: fluid2
       }),
       ref,
       color,
@@ -461,7 +462,7 @@ const _Button = forwardRef(function Button3(props, ref) {
 });
 const IconButton = React.memo(_Button);
 const merged = "_merged_wdgxo_1";
-const styles$r = {
+const styles$o = {
   merged
 };
 const GhostVariantSizeToGapMapping = {
@@ -488,7 +489,7 @@ const _ButtonGroup = forwardRef(function ButtonGroup2({
     Flex$1,
     {
       className: classNames("overmap-button-group", className, {
-        [styles$r.merged]: merged2
+        [styles$o.merged]: merged2
       }),
       ref,
       gap: merged2 ? gap ?? mergedAutoGap : gap ?? "2",
@@ -501,7 +502,7 @@ const _ButtonGroup = forwardRef(function ButtonGroup2({
 });
 const ButtonGroup = memo(_ButtonGroup);
 const separators = "_separators_1f7v1_1";
-const styles$q = {
+const styles$n = {
   separators
 };
 const ButtonListBorder = memo(
@@ -532,7 +533,7 @@ const ButtonListRoot = memo(
         size: size2,
         severity: "info",
         variant: buttonVariant,
-        className: classNames(className, styles$q.separators),
+        className: classNames(className, styles$n.separators),
         merged: true,
         gap: "0",
         direction: "column",
@@ -559,10 +560,9 @@ const ButtonList = {
 const RiIcon = memo((props) => {
   const { icon, size: size2 = DEFAULT_ICON_SIZE, color, ...rest } = props;
   const Icon = RiIcons[icon];
-  if (!Icon) {
-    throw new Error(`no icon with the name ${icon} exists.`);
-  }
-  return /* @__PURE__ */ jsx(Icon, { size: size2, color, ...rest });
+  if (!Icon)
+    console.error(`Icon ${icon} not found`);
+  return Icon ? /* @__PURE__ */ jsx(Icon, { size: size2, color, ...rest }) : /* @__PURE__ */ jsx(RiQuestionMark, {});
 });
 RiIcon.displayName = "IconComponent";
 const DialogContent = memo(function DialogContent2(props) {
@@ -786,7 +786,7 @@ const BaseDialog = memo(
 );
 const OverlayContent = "_OverlayContent_1nr9w_1";
 const OverlayOverlay = "_OverlayOverlay_1nr9w_6";
-const styles$p = {
+const styles$m = {
   OverlayContent,
   OverlayOverlay
 };
@@ -797,13 +797,19 @@ const Overlay$2 = memo(
       BaseDialog,
       {
         ref,
-        overlayClass: classNames("overmap-overlay-overlay", styles$p.OverlayOverlay, overlayClass),
-        className: classNames("overmap-overlay-content", styles$p.OverlayContent, className),
+        overlayClass: classNames("overmap-overlay-overlay", styles$m.OverlayOverlay, overlayClass),
+        className: classNames("overmap-overlay-content", styles$m.OverlayContent, className),
         ...rest
       }
     );
   })
 );
+const CollapsibleTreeContext = createContext(
+  {}
+);
+function useCollapsibleTreeContext() {
+  return useContext(CollapsibleTreeContext);
+}
 const OvermapItemSizeDependantProps = {
   "1": {
     gap: "1",
@@ -838,12 +844,11 @@ const OvermapItemSizeDependantProps = {
 };
 const OvermapItemGroupContext = createContext({});
 const useOvermapItemGroupContext = () => useContext(OvermapItemGroupContext);
-const OvermapItemGroup = memo(
-  forwardRef(function(props, ref) {
-    const { size: size2, compact = false, children, ...rest } = props;
-    return /* @__PURE__ */ jsx(OvermapItemGroupContext.Provider, { value: { size: size2, compact }, children: /* @__PURE__ */ jsx(Grid, { ref, columns: "1", width: "100%", height: "max-content", ...rest, children }) });
-  })
-);
+const OvermapItemGroup = memo((props) => {
+  const { size: size2, children, compact = false } = props;
+  return /* @__PURE__ */ jsx(OvermapItemGroupContext.Provider, { value: { size: size2, compact }, children });
+});
+OvermapItemGroup.displayName = "OvermapItemGroup";
 const OvermapItem = memo(
   forwardRef((props, ref) => {
     const overmapItemGroupContext = useOvermapItemGroupContext();
@@ -877,548 +882,6 @@ const OvermapItem = memo(
     );
   })
 );
-const DialogMenuContext = createContext({});
-const useDialogMenuContext = () => useContext(DialogMenuContext);
-const DialogMenuItem = "_DialogMenuItem_1ojd2_1";
-const styles$o = {
-  DialogMenuItem
-};
-const Item$2 = memo(
-  forwardRef((props, ref) => {
-    const dialogMenuContext = useDialogMenuContext();
-    const {
-      className,
-      children,
-      onSelect,
-      onClick,
-      closeOnSelect = dialogMenuContext.closeOnSelect,
-      size: size2 = dialogMenuContext.size,
-      leftSlot,
-      rightSlot,
-      ...rest
-    } = props;
-    const handleClick = useCallback(
-      (e) => {
-        if (onClick)
-          onClick(e);
-        if (onSelect)
-          onSelect();
-        if (closeOnSelect)
-          dialogMenuContext.close();
-      },
-      [closeOnSelect, dialogMenuContext, onClick, onSelect]
-    );
-    return /* @__PURE__ */ jsx(
-      OvermapItem,
-      {
-        className: classNames(className, styles$o.DialogMenuItem),
-        onClick: handleClick,
-        ref,
-        leftSlot,
-        rightSlot,
-        size: size2,
-        role: "menuitem",
-        tabIndex: 0,
-        ...rest,
-        children
-      }
-    );
-  })
-);
-const SelectContext = createContext({});
-function useSelectContext() {
-  return useContext(SelectContext);
-}
-const SelectContextProvider = memo((props) => {
-  const { type, children } = props;
-  const [controlledValue, setControlledValue] = useState(
-    type === "single" ? (props == null ? void 0 : props.defaultValue) ?? null : null
-  );
-  const [controlledValues, setControlledValues] = useState(
-    type === "multi" ? (props == null ? void 0 : props.defaultValues) ?? [] : []
-  );
-  const onValuesChange = useCallback(
-    (values) => {
-      setControlledValues(values);
-      if (type === "multi" && (props == null ? void 0 : props.onValuesChange))
-        props.onValuesChange(values);
-    },
-    [props, type]
-  );
-  const onValueChange = useCallback(
-    (value2) => {
-      setControlledValue(value2);
-      if (type === "single" && (props == null ? void 0 : props.onValueChange))
-        props.onValueChange(value2);
-    },
-    [props, type]
-  );
-  const value = useMemo(
-    () => type === "multi" ? {
-      type,
-      values: (props == null ? void 0 : props.values) ?? controlledValues,
-      handleValuesChange: onValuesChange
-    } : {
-      type,
-      value: props.value ?? controlledValue,
-      handleValueChange: onValueChange
-    },
-    [controlledValue, controlledValues, onValueChange, onValuesChange, props, type]
-  );
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { value, children });
-});
-SelectContextProvider.displayName = "SelectContextProvider";
-const SelectItem$1 = memo(
-  forwardRef((props, ref) => {
-    const dialogMenuContext = useDialogMenuContext();
-    const { value, rightSlot, selectedIndicator = dialogMenuContext.selectedIndicator, onSelect, ...rest } = props;
-    const { value: currentValue, handleValueChange } = useSelectContext();
-    const handleSelect = useCallback(() => {
-      handleValueChange(value !== currentValue ? value : null);
-      if (onSelect)
-        onSelect();
-    }, [currentValue, handleValueChange, onSelect, value]);
-    return /* @__PURE__ */ jsx(
-      Item$2,
-      {
-        ref,
-        onSelect: handleSelect,
-        role: "menuitemradio",
-        rightSlot: /* @__PURE__ */ jsxs(Fragment, { children: [
-          currentValue === value && selectedIndicator,
-          " ",
-          rightSlot
-        ] }),
-        ...rest
-      }
-    );
-  })
-);
-const MultiSelectItem$2 = memo(
-  forwardRef((props, ref) => {
-    const dialogMenuContext = useDialogMenuContext();
-    const { value, rightSlot, selectedIndicator = dialogMenuContext.selectedIndicator, onSelect, ...rest } = props;
-    const { values: currentValues, handleValuesChange } = useSelectContext();
-    const handleSelect = useCallback(() => {
-      handleValuesChange(
-        currentValues.includes(value) ? [...currentValues, value] : (
-          // If value currently in selected values, remove it (filter out)
-          currentValues.filter((currentValue) => currentValue !== value)
-        )
-      );
-      if (onSelect)
-        onSelect();
-    }, [currentValues, handleValuesChange, onSelect, value]);
-    return /* @__PURE__ */ jsx(
-      Item$2,
-      {
-        onSelect: handleSelect,
-        ref,
-        role: "menuitemcheckbox",
-        rightSlot: /* @__PURE__ */ jsxs(Fragment, { children: [
-          currentValues.includes(value) && selectedIndicator,
-          rightSlot
-        ] }),
-        ...rest
-      }
-    );
-  })
-);
-const SubTrigger$1 = memo(
-  forwardRef((props, ref) => {
-    const { subContentId, onSelect, ...rest } = props;
-    const { setSubContentId } = useDialogMenuContext();
-    const handleSelect = useCallback(() => {
-      setSubContentId(subContentId);
-      if (onSelect)
-        onSelect();
-    }, [subContentId, onSelect, setSubContentId]);
-    return /* @__PURE__ */ jsx(Item$2, { onSelect: handleSelect, ref, ...rest });
-  })
-);
-const light = "_light_1u8fs_1";
-const bold = "_bold_1u8fs_8";
-const full = "_full_1u8fs_15";
-const Text$1 = "_Text_1u8fs_22";
-const styles$n = {
-  light,
-  bold,
-  full,
-  Text: Text$1
-};
-const SeparatorSizeMapping = {
-  "1": "max-content",
-  "2": "max-content",
-  "3": "max-content",
-  "4": "100%"
-};
-const _Separator = forwardRef(function Separator2({
-  className,
-  severity = "info",
-  textWeight = "light",
-  gap = "1",
-  text,
-  orientation = "horizontal",
-  size: size2,
-  weight = "medium",
-  ...rest
-}, ref) {
-  const computedSizing = useResponsiveMapping(size2, SeparatorSizeMapping);
-  const severityColor = useSeverityColor(severity);
-  return /* @__PURE__ */ jsxs(
-    Flex$1,
-    {
-      className: classNames("overmap-separator", className, {
-        [styles$n.light]: weight === "light",
-        [styles$n.bold]: weight === "bold",
-        [styles$n.full]: weight === "full"
-      }),
-      ref,
-      width: orientation === "horizontal" ? computedSizing : "max-content",
-      height: orientation === "vertical" ? computedSizing : "max-content",
-      direction: orientation === "vertical" ? "column" : "row",
-      align: "center",
-      gap,
-      children: [
-        /* @__PURE__ */ jsx(Separator$3, { size: size2, orientation, color: severityColor, ...rest }),
-        text && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Text$2, { className: styles$n.Text, as: "span", size: "1", weight: textWeight, color: severityColor, children: text }),
-          /* @__PURE__ */ jsx(Separator$3, { size: size2, orientation, color: severityColor, ...rest })
-        ] })
-      ]
-    }
-  );
-});
-const Separator$2 = memo(_Separator);
-const Separator$1 = memo(
-  forwardRef((props, ref) => {
-    return /* @__PURE__ */ jsx(Flex$1, { ref, py: "2", children: /* @__PURE__ */ jsx(Separator$2, { size: "4", weight: "light", ...props }) });
-  })
-);
-const DEFAULT_DIALOG_MENU_SIZE = "3";
-const DEFAULT_SELECTED_INDICATOR = /* @__PURE__ */ jsx(RiIcon, { icon: "RiCheckLine" });
-const Group$2 = memo(
-  forwardRef((props, ref) => {
-    const dialogMenuContext = useDialogMenuContext();
-    const { size: size2 = dialogMenuContext.size, grid = false, children } = props;
-    const computedSize = useOvermapResponsiveValue(size2);
-    const computedColumns = useMemo(() => {
-      const { height } = OvermapItemSizeDependantProps[computedSize ?? DEFAULT_DIALOG_MENU_SIZE];
-      return `repeat(auto-fit,var(--space-${height})`;
-    }, [computedSize]);
-    return /* @__PURE__ */ jsx(
-      OvermapItemGroup,
-      {
-        role: "group",
-        compact: grid,
-        size: size2,
-        ref,
-        columns: grid ? computedColumns : void 0,
-        flow: "dense",
-        children
-      }
-    );
-  })
-);
-const SelectGroup$1 = memo(
-  forwardRef((props, ref) => {
-    const { value, onValueChange, ...rest } = props;
-    return /* @__PURE__ */ jsx(SelectContextProvider, { type: "single", value, onValueChange, children: /* @__PURE__ */ jsx(Group$2, { ref, ...rest }) });
-  })
-);
-const MultiSelectGroup$1 = memo(
-  forwardRef((props, ref) => {
-    const { values, onValuesChange, ...rest } = props;
-    return /* @__PURE__ */ jsx(SelectContextProvider, { type: "multi", values, onValuesChange, children: /* @__PURE__ */ jsx(Group$2, { ref, ...rest }) });
-  })
-);
-const OvermapInputItem$1 = "_OvermapInputItem_1jgzv_1";
-const styles$m = {
-  OvermapInputItem: OvermapInputItem$1
-};
-const OvermapInputItem = memo(
-  forwardRef((props, ref) => {
-    const { size: size2, className, style, leftSlot, rightSlot, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      OvermapItem,
-      {
-        className,
-        style,
-        size: size2,
-        leftSlot,
-        rightSlot,
-        compact: false,
-        children: /* @__PURE__ */ jsx("input", { className: styles$m.OvermapInputItem, ref, ...rest })
-      }
-    );
-  })
-);
-OvermapInputItem.displayName = "OvermapInputItem";
-const DialogContentScrollArea = "_DialogContentScrollArea_i3a60_1";
-const styles$l = {
-  DialogContentScrollArea
-};
-const ContentImpl = memo(
-  forwardRef((props, ref) => {
-    const { size: size2 } = useDialogMenuContext();
-    const {
-      topSlot,
-      bottomSlot,
-      numberOfItems,
-      filterValue,
-      onFilterValueChange,
-      placeholder,
-      leftFilterSlot,
-      rightFilterSlot,
-      children
-    } = props;
-    const handleChange = useCallback(
-      (e) => {
-        if (onFilterValueChange)
-          onFilterValueChange(e.target.value);
-      },
-      [onFilterValueChange]
-    );
-    return /* @__PURE__ */ jsxs(Flex$1, { direction: "column", width: "100%", ref, py: "2", children: [
-      /* @__PURE__ */ jsxs(Flex$1, { direction: "column", width: "100%", px: "2", children: [
-        topSlot && /* @__PURE__ */ jsx(OvermapItem, { size: size2, children: topSlot }),
-        filterValue !== void 0 && /* @__PURE__ */ jsx(
-          OvermapInputItem,
-          {
-            size: size2,
-            leftSlot: leftFilterSlot,
-            rightSlot: rightFilterSlot,
-            value: filterValue,
-            onChange: handleChange,
-            placeholder
-          }
-        )
-      ] }),
-      (topSlot || filterValue !== void 0) && numberOfItems > 0 && /* @__PURE__ */ jsx(Separator$1, {}),
-      /* @__PURE__ */ jsx(ScrollArea, { className: styles$l.DialogContentScrollArea, scrollbars: "vertical", type: "hover", children: /* @__PURE__ */ jsx(Flex$1, { px: "2", children }) }),
-      bottomSlot && /* @__PURE__ */ jsx(Separator$1, {}),
-      /* @__PURE__ */ jsx(Flex$1, { direction: "column", width: "100%", px: "2", children: bottomSlot && /* @__PURE__ */ jsx(OvermapItem, { size: size2, children: bottomSlot }) })
-    ] });
-  })
-);
-const Content$1 = memo(
-  forwardRef((props, ref) => {
-    const { subContentId } = useDialogMenuContext();
-    return !subContentId && /* @__PURE__ */ jsx(ContentImpl, { ref, ...props });
-  })
-);
-const SubContent$1 = memo(
-  forwardRef((props, ref) => {
-    const { id, ...rest } = props;
-    const { subContentId } = useDialogMenuContext();
-    return subContentId === id && /* @__PURE__ */ jsx(ContentImpl, { ref, ...rest });
-  })
-);
-const DialogMenuContextProvider = memo((props) => {
-  const { size: size2, closeOnSelect, close, selectedIndicator, children } = props;
-  const [subContentId, setSubContentId] = useState(null);
-  const value = useMemo(
-    () => ({ size: size2, close, closeOnSelect, subContentId, setSubContentId, selectedIndicator }),
-    [close, closeOnSelect, selectedIndicator, size2, subContentId]
-  );
-  return /* @__PURE__ */ jsx(DialogMenuContext.Provider, { value, children });
-});
-DialogMenuContextProvider.displayName = "DialogMenuContextProvider";
-const DialogMenuWrapper = "_DialogMenuWrapper_16hy0_1";
-const DialogMenu$1 = "_DialogMenu_16hy0_1";
-const styles$k = {
-  DialogMenuWrapper,
-  DialogMenu: DialogMenu$1
-};
-const Root$3 = memo(
-  forwardRef((props, ref) => {
-    const {
-      className,
-      content: contentFromProps,
-      selectedIndicator = DEFAULT_SELECTED_INDICATOR,
-      size: size2 = DEFAULT_DIALOG_MENU_SIZE,
-      closeOnSelect = false,
-      ...rest
-    } = props;
-    const content = useCallback(
-      (close) => {
-        return /* @__PURE__ */ jsx(Flex$1, { className: classNames(styles$k.DialogMenu, className), children: /* @__PURE__ */ jsx(
-          DialogMenuContextProvider,
-          {
-            size: size2,
-            close,
-            closeOnSelect,
-            selectedIndicator,
-            children: contentFromProps
-          }
-        ) });
-      },
-      [className, closeOnSelect, contentFromProps, selectedIndicator, size2]
-    );
-    return /* @__PURE__ */ jsx(BaseDialog, { className: styles$k.DialogMenuWrapper, ref, content, ...rest });
-  })
-);
-const DialogCommandMenu = memo(
-  forwardRef((props, ref) => {
-    const {
-      // Command menu scoped props
-      size: size2,
-      items,
-      closeOnSelect = true,
-      // Content scoped props
-      filterValue,
-      onFilterValueChange,
-      placeholder,
-      leftFilterSlot,
-      rightFilterSlot,
-      topSlot,
-      bottomSlot,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(
-      Root$3,
-      {
-        ref,
-        size: size2,
-        content: /* @__PURE__ */ jsx(
-          Content$1,
-          {
-            filterValue,
-            onFilterValueChange,
-            placeholder,
-            leftFilterSlot,
-            rightFilterSlot,
-            numberOfItems: items.length,
-            topSlot,
-            bottomSlot,
-            children: /* @__PURE__ */ jsx(Group$2, { size: size2, children: items.map((item, index) => /* @__PURE__ */ jsx(Item$2, { ...item }, index)) })
-          }
-        ),
-        closeOnSelect,
-        ...rest
-      }
-    );
-  })
-);
-const DialogSelectMenu = memo(
-  forwardRef((props, ref) => {
-    const {
-      // Select scoped props
-      size: size2,
-      value,
-      onValueChange,
-      items,
-      selectedIndicator,
-      // Content scoped props
-      filterValue,
-      onFilterValueChange,
-      placeholder,
-      leftFilterSlot,
-      rightFilterSlot,
-      topSlot,
-      bottomSlot,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(
-      Root$3,
-      {
-        ref,
-        size: size2,
-        content: /* @__PURE__ */ jsx(
-          Content$1,
-          {
-            filterValue,
-            onFilterValueChange,
-            placeholder,
-            leftFilterSlot,
-            rightFilterSlot,
-            numberOfItems: items.length,
-            topSlot,
-            bottomSlot,
-            children: /* @__PURE__ */ jsx(SelectGroup$1, { size: size2, value, onValueChange, children: items.map((item, index) => /* @__PURE__ */ jsx(
-              SelectItem$1,
-              {
-                selectedIndicator,
-                ...item
-              },
-              `${item.value}-${index}`
-            )) })
-          }
-        ),
-        ...rest
-      }
-    );
-  })
-);
-const DialogMultiSelectMenu = memo(
-  forwardRef((props, ref) => {
-    const {
-      // Multi select scoped props
-      size: size2,
-      selectedIndicator,
-      values,
-      onValuesChange,
-      items,
-      // Content scoped props
-      filterValue,
-      onFilterValueChange,
-      placeholder,
-      leftFilterSlot,
-      rightFilterSlot,
-      topSlot,
-      bottomSlot,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(
-      Root$3,
-      {
-        ref,
-        size: size2,
-        content: /* @__PURE__ */ jsx(
-          Content$1,
-          {
-            filterValue,
-            onFilterValueChange,
-            placeholder,
-            leftFilterSlot,
-            rightFilterSlot,
-            numberOfItems: items.length,
-            topSlot,
-            bottomSlot,
-            children: /* @__PURE__ */ jsx(MultiSelectGroup$1, { size: size2, values, onValuesChange, children: items.map((item, index) => /* @__PURE__ */ jsx(
-              MultiSelectItem$2,
-              {
-                ...item,
-                selectedIndicator
-              },
-              `${item.value}-${index}`
-            )) })
-          }
-        ),
-        ...rest
-      }
-    );
-  })
-);
-const DialogMenu = {
-  Root: Root$3,
-  Item: Item$2,
-  SelectItem: SelectItem$1,
-  MultiSelectItem: MultiSelectItem$2,
-  Separator: Separator$1,
-  Content: Content$1,
-  Group: Group$2,
-  SelectGroup: SelectGroup$1,
-  MultiSelectGroup: MultiSelectGroup$1,
-  SubTrigger: SubTrigger$1,
-  SubContent: SubContent$1
-};
-const CollapsibleTreeContext = createContext(
-  {}
-);
-function useCollapsibleTreeContext() {
-  return useContext(CollapsibleTreeContext);
-}
 const CollapsibleNode = genericMemo(function(props) {
   const { meta, nodes, level = 0, disabled: disabled2 } = props;
   const [controlledOpenState, setControlledOpenState] = useState(false);
@@ -1526,7 +989,7 @@ const CollapsibleTree = genericMemo(function(props) {
         onNodeClose,
         onNodeOpen
       },
-      children: /* @__PURE__ */ jsx(OvermapItemGroup, { width: "100%", height: "max-content", size: size2, ...rest, gapY: nodeGap, children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsx(CollapsibleNode, { ...treeNodeProps }, `${0},${index}`)) })
+      children: /* @__PURE__ */ jsx(OvermapItemGroup, { size: size2, children: /* @__PURE__ */ jsx(Flex$1, { width: "100%", height: "max-content", direction: "column", gap: nodeGap, ...rest, children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsx(CollapsibleNode, { ...treeNodeProps }, `${0},${index}`)) }) })
     }
   );
 });
@@ -1559,7 +1022,7 @@ const HoverUtility = memo(function Root({ children }) {
   });
 });
 const fluid = "_fluid_7n1wr_1";
-const styles$j = {
+const styles$l = {
   fluid
 };
 const _Select = forwardRef(function Select2({
@@ -1583,7 +1046,7 @@ const _Select = forwardRef(function Select2({
     Select$1.Trigger,
     {
       className: classNames(className, {
-        [styles$j.fluid]: fluid2
+        [styles$l.fluid]: fluid2
       }),
       id,
       ref,
@@ -1595,7 +1058,7 @@ const _Select = forwardRef(function Select2({
     Select$1.Content,
     {
       side,
-      className: styles$j.contentDefault,
+      className: styles$l.contentDefault,
       position: "popper",
       variant: variant !== "surface" ? "soft" : "solid",
       color: itemSeverityColor,
@@ -1708,7 +1171,7 @@ const MultiSelect = memo(
     );
   })
 );
-const styles$i = {
+const styles$k = {
   "default": "_default_u936h_1"
 };
 const _Switch = forwardRef(function Switch2({ className, severity = "primary", icon, defaultChecked = false, onCheckedChange, ...rest }, ref) {
@@ -1736,7 +1199,7 @@ const _Switch = forwardRef(function Switch2({ className, severity = "primary", i
     /* @__PURE__ */ jsx(
       Switch$1,
       {
-        className: classNames("overmap-switch", className, styles$i.default),
+        className: classNames("overmap-switch", className, styles$k.default),
         ref: ref ? ref : fallbackRef,
         color: severityColor,
         radius: "full",
@@ -1754,7 +1217,7 @@ const right$1 = "_right_1onyo_7";
 const resizeHandle$1 = "_resizeHandle_1onyo_10";
 const left$1 = "_left_1onyo_13";
 const overlay = "_overlay_1onyo_33";
-const styles$h = {
+const styles$j = {
   sidebarContent,
   right: right$1,
   resizeHandle: resizeHandle$1,
@@ -1787,13 +1250,13 @@ const _Sidebar = forwardRef(function Sidebar2({
     setContainer(tempContainer);
   }, [containerSelector]);
   return /* @__PURE__ */ jsx(RadixDialogPrimitive.Root, { open, modal, children: /* @__PURE__ */ jsxs(RadixDialogPrimitive.Portal, { container, children: [
-    overlay2 && /* @__PURE__ */ jsx(RadixDialogPrimitive.Overlay, { className: classNames(styles$h.overlay) }),
+    overlay2 && /* @__PURE__ */ jsx(RadixDialogPrimitive.Overlay, { className: classNames(styles$j.overlay) }),
     /* @__PURE__ */ jsx(
       RadixDialogPrimitive.Content,
       {
-        className: classNames("overmap-sidebar", "rt-DialogContent", styles$h.sidebarContent, {
-          [styles$h.left]: isLeft,
-          [styles$h.right]: isRight
+        className: classNames("overmap-sidebar", "rt-DialogContent", styles$j.sidebarContent, {
+          [styles$j.left]: isLeft,
+          [styles$j.right]: isRight
         }),
         ref,
         asChild: true,
@@ -1805,7 +1268,7 @@ const _Sidebar = forwardRef(function Sidebar2({
             maxWidth,
             defaultSize: defaultSidebarSize,
             enable: { right: resizable2 && isLeft, left: resizable2 && isRight },
-            handleClasses: { left: styles$h.resizeHandle, right: styles$h.resizeHandle },
+            handleClasses: { left: styles$j.resizeHandle, right: styles$j.resizeHandle },
             handleComponent: {
               right: /* @__PURE__ */ jsx(RiIcon, { icon: "RiDraggable" }),
               left: /* @__PURE__ */ jsx(RiIcon, { icon: "RiDraggable" })
@@ -1948,7 +1411,7 @@ const ExitLeft$1 = "_ExitLeft_1jwyv_42";
 const ExitActiveLeft$1 = "_ExitActiveLeft_1jwyv_46";
 const ExitDoneLeft$1 = "_ExitDoneLeft_1jwyv_51";
 const Overlay$1 = "_Overlay_1jwyv_56";
-const styles$g = {
+const styles$i = {
   EnterRight: EnterRight$1,
   EnterActiveRight: EnterActiveRight$1,
   EnterDoneRight: EnterDoneRight$1,
@@ -2024,12 +1487,12 @@ const SlideOutV3 = memo(
     const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(handleDismiss, parentContainer);
     const CSSTransitionClassNames = useMemo(
       () => ({
-        enter: isLeft ? styles$g.EnterLeft : styles$g.EnterRight,
-        enterActive: isLeft ? styles$g.EnterActiveLeft : styles$g.EnterActiveRight,
-        enterDone: isLeft ? styles$g.EnterDoneLeft : styles$g.EnterDoneRight,
-        exit: isLeft ? styles$g.ExitLeft : styles$g.ExitRight,
-        exitActive: isLeft ? styles$g.ExitActiveLeft : styles$g.ExitActiveRight,
-        exitDone: isLeft ? styles$g.ExitDoneLeft : styles$g.ExitDoneRight
+        enter: isLeft ? styles$i.EnterLeft : styles$i.EnterRight,
+        enterActive: isLeft ? styles$i.EnterActiveLeft : styles$i.EnterActiveRight,
+        enterDone: isLeft ? styles$i.EnterDoneLeft : styles$i.EnterDoneRight,
+        exit: isLeft ? styles$i.ExitLeft : styles$i.ExitRight,
+        exitActive: isLeft ? styles$i.ExitActiveLeft : styles$i.ExitActiveRight,
+        exitDone: isLeft ? styles$i.ExitDoneLeft : styles$i.ExitDoneRight
       }),
       [isLeft]
     );
@@ -2260,7 +1723,7 @@ const ExitLeft = "_ExitLeft_1jwyv_42";
 const ExitActiveLeft = "_ExitActiveLeft_1jwyv_46";
 const ExitDoneLeft = "_ExitDoneLeft_1jwyv_51";
 const Overlay = "_Overlay_1jwyv_56";
-const styles$f = {
+const styles$h = {
   EnterRight,
   EnterActiveRight,
   EnterDoneRight,
@@ -2315,12 +1778,12 @@ const SlideOutV2 = memo(
     }, [initialWidth]);
     const CSSTransitionClassNames = useMemo(
       () => ({
-        enter: isLeft ? styles$f.EnterLeft : styles$f.EnterRight,
-        enterActive: isLeft ? styles$f.EnterActiveLeft : styles$f.EnterActiveRight,
-        enterDone: isLeft ? styles$f.EnterDoneLeft : styles$f.EnterDoneRight,
-        exit: isLeft ? styles$f.ExitLeft : styles$f.ExitRight,
-        exitActive: isLeft ? styles$f.ExitActiveLeft : styles$f.ExitActiveRight,
-        exitDone: isLeft ? styles$f.ExitDoneLeft : styles$f.ExitDoneRight
+        enter: isLeft ? styles$h.EnterLeft : styles$h.EnterRight,
+        enterActive: isLeft ? styles$h.EnterActiveLeft : styles$h.EnterActiveRight,
+        enterDone: isLeft ? styles$h.EnterDoneLeft : styles$h.EnterDoneRight,
+        exit: isLeft ? styles$h.ExitLeft : styles$h.ExitRight,
+        exitActive: isLeft ? styles$h.ExitActiveLeft : styles$h.ExitActiveRight,
+        exitDone: isLeft ? styles$h.ExitDoneLeft : styles$h.ExitDoneRight
       }),
       [isLeft]
     );
@@ -2403,7 +1866,7 @@ const noLeftIcon = "_noLeftIcon_1octa_14";
 const noRightIcon = "_noRightIcon_1octa_18";
 const ghost$1 = "_ghost_1octa_22";
 const charCount$1 = "_charCount_1octa_40";
-const styles$e = {
+const styles$g = {
   accommodateCharCount,
   wrapper: wrapper$2,
   "default": "_default_1octa_10",
@@ -2430,9 +1893,9 @@ const _Input = forwardRef(function Input2({
   return /* @__PURE__ */ jsxs(
     TextField.Root,
     {
-      className: classNames(styles$e.wrapper, className, {
-        [styles$e.ghost]: variant === "ghost",
-        [styles$e.accommodateCharCount]: displayInputLength
+      className: classNames(styles$g.wrapper, className, {
+        [styles$g.ghost]: variant === "ghost",
+        [styles$g.accommodateCharCount]: displayInputLength
       }),
       size: computedSize,
       variant: variant !== "ghost" ? variant : void 0,
@@ -2442,9 +1905,9 @@ const _Input = forwardRef(function Input2({
         /* @__PURE__ */ jsx(
           TextField.Input,
           {
-            className: classNames(styles$e.default, {
-              [styles$e.noLeftIcon]: !leftSlot,
-              [styles$e.noRightIcon]: !rightSlot
+            className: classNames(styles$g.default, {
+              [styles$g.noLeftIcon]: !leftSlot,
+              [styles$g.noRightIcon]: !rightSlot
             }),
             ref,
             value,
@@ -2455,7 +1918,7 @@ const _Input = forwardRef(function Input2({
           }
         ),
         rightSlot && /* @__PURE__ */ jsx(TextField.Slot, { children: rightSlot }),
-        displayInputLength && /* @__PURE__ */ jsx(Text$2, { as: "p", className: styles$e.charCount, size: "1", color: "gray", children: rest.maxLength !== void 0 ? `${valueAsString == null ? void 0 : valueAsString.length}/${rest.maxLength}` : `${valueAsString == null ? void 0 : valueAsString.length}` })
+        displayInputLength && /* @__PURE__ */ jsx(Text$2, { as: "p", className: styles$g.charCount, size: "1", color: "gray", children: rest.maxLength !== void 0 ? `${valueAsString == null ? void 0 : valueAsString.length}/${rest.maxLength}` : `${valueAsString == null ? void 0 : valueAsString.length}` })
       ]
     }
   );
@@ -2465,7 +1928,7 @@ const ItemStack$1 = "_ItemStack_tj494_1";
 const Row = "_Row_tj494_4";
 const Column = "_Column_tj494_7";
 const ItemStackItem = "_ItemStackItem_tj494_11";
-const styles$d = {
+const styles$f = {
   ItemStack: ItemStack$1,
   Row,
   Column,
@@ -2474,7 +1937,7 @@ const styles$d = {
 const Item$1 = memo(
   forwardRef((props, ref) => {
     const { children } = props;
-    return /* @__PURE__ */ jsx("div", { ref, className: styles$d.ItemStackItem, "data-item-stack": "", children });
+    return /* @__PURE__ */ jsx("div", { ref, className: styles$f.ItemStackItem, "data-item-stack": "", children });
   })
 );
 const Group$1 = memo(
@@ -2484,9 +1947,9 @@ const Group$1 = memo(
     return /* @__PURE__ */ jsx(
       Flex$1,
       {
-        className: classNames(styles$d.ItemStack, {
-          [styles$d.Row]: direction === "row",
-          [styles$d.Column]: direction === "column"
+        className: classNames(styles$f.ItemStack, {
+          [styles$f.Row]: direction === "row",
+          [styles$f.Column]: direction === "column"
         }),
         ref,
         direction,
@@ -2521,7 +1984,7 @@ const IconColorUtility = memo(function IconColorUtility2({
   return cloneElement(children, { ...childProps });
 });
 const wrapper$1 = "_wrapper_tmtz0_1";
-const styles$c = {
+const styles$e = {
   wrapper: wrapper$1
 };
 const _Popover = forwardRef(function Popover2({ className, trigger, open, onOpenChange, defaultOpen = false, modal = false, children, ...rest }, ref) {
@@ -2531,7 +1994,7 @@ const _Popover = forwardRef(function Popover2({ className, trigger, open, onOpen
       Popover$1.Content,
       {
         ref,
-        className: classNames("overmap-popover", className, styles$c.wrapper),
+        className: classNames("overmap-popover", className, styles$e.wrapper),
         ...rest,
         children: children(Popover$1.Close)
       }
@@ -2546,7 +2009,7 @@ const right = "_right_1ssf2_18";
 const resizable = "_resizable_1ssf2_23";
 const resizeHandle = "_resizeHandle_1ssf2_28";
 const panelMainContent = "_panelMainContent_1ssf2_48";
-const styles$b = {
+const styles$d = {
   wrapper,
   panelContent,
   left,
@@ -2732,7 +2195,7 @@ const LeftAndRightPanels = memo(function Panels({
   return /* @__PURE__ */ jsxs(
     Flex$1,
     {
-      className: styles$b.wrapper,
+      className: styles$d.wrapper,
       style: { minWidth: `${leftMinWidth + rightMinWidth}px` },
       ref: wrapperRef,
       width: "100%",
@@ -2754,7 +2217,7 @@ const LeftAndRightPanels = memo(function Panels({
               Box,
               {
                 ref: leftPanelRef,
-                className: classNames(styles$b.panelContent, styles$b.left),
+                className: classNames(styles$d.panelContent, styles$d.left),
                 style: leftPanelTransitionStyles[state],
                 width: "auto",
                 height: "100%",
@@ -2763,7 +2226,7 @@ const LeftAndRightPanels = memo(function Panels({
                 children: /* @__PURE__ */ jsx(
                   Resizable,
                   {
-                    className: styles$b.resizable,
+                    className: styles$d.resizable,
                     size: {
                       width: leftPanelWidth,
                       height: "100%"
@@ -2772,7 +2235,7 @@ const LeftAndRightPanels = memo(function Panels({
                     enable: { right: (resizeable == null ? void 0 : resizeable.left) !== void 0 ? resizeable.left : true },
                     minWidth: leftMinWidth,
                     maxWidth: leftPanelMaxWidth,
-                    handleClasses: { right: classNames(styles$b.resizeHandle, styles$b.left) },
+                    handleClasses: { right: classNames(styles$d.resizeHandle, styles$d.left) },
                     handleComponent: {
                       right: /* @__PURE__ */ jsx(RiIcon, { icon: "RiDraggable", height: "14px", width: "14px" })
                     },
@@ -2783,7 +2246,7 @@ const LeftAndRightPanels = memo(function Panels({
             )
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$b.panelMainContent, children }),
+        /* @__PURE__ */ jsx("div", { className: styles$d.panelMainContent, children }),
         /* @__PURE__ */ jsx(
           Transition,
           {
@@ -2797,7 +2260,7 @@ const LeftAndRightPanels = memo(function Panels({
               Box,
               {
                 ref: rightPanelRef,
-                className: classNames(styles$b.panelContent, styles$b.right),
+                className: classNames(styles$d.panelContent, styles$d.right),
                 style: rightPanelTransitionStyles[state],
                 width: "auto",
                 height: "100%",
@@ -2806,13 +2269,13 @@ const LeftAndRightPanels = memo(function Panels({
                 children: /* @__PURE__ */ jsx(
                   Resizable,
                   {
-                    className: styles$b.resizable,
+                    className: styles$d.resizable,
                     size: { width: rightPanelWidth, height: "100%" },
                     onResizeStop: handleResizeRightPanel,
                     enable: { left: (resizeable == null ? void 0 : resizeable.right) !== void 0 ? resizeable.right : true },
                     minWidth: rightMinWidth,
                     maxWidth: rightPanelMaxWidth,
-                    handleClasses: { left: classNames(styles$b.resizeHandle, styles$b.right) },
+                    handleClasses: { left: classNames(styles$d.resizeHandle, styles$d.right) },
                     handleComponent: { left: /* @__PURE__ */ jsx(RiIcon, { icon: "RiDraggable", height: "14px", width: "14px" }) },
                     children: rightPanel
                   }
@@ -2830,7 +2293,7 @@ const pageTitle = "_pageTitle_16xvh_12";
 const buttonContainer = "_buttonContainer_16xvh_16";
 const optionsButtonContainer = "_optionsButtonContainer_16xvh_21";
 const optionsButton = "_optionsButton_16xvh_21";
-const styles$a = {
+const styles$c = {
   multiPagePopover,
   pageTitle,
   buttonContainer,
@@ -2844,7 +2307,7 @@ function getMultiPagePopoverContent(popoverOption, setMultiPagePopoverContent, d
   const optionButtons = popoverOption.options.map((option, i) => /* @__PURE__ */ jsx(
     Button2,
     {
-      className: classNames(styles$a.optionsButton, option.buttonClassName),
+      className: classNames(styles$c.optionsButton, option.buttonClassName),
       variant: "ghost",
       radius: "large",
       style: {
@@ -2860,12 +2323,12 @@ function getMultiPagePopoverContent(popoverOption, setMultiPagePopoverContent, d
     `${option.value}-page-${page}-button-${i}`
   ));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    popoverOption.title && /* @__PURE__ */ jsx(Text$2, { className: styles$a.pageTitle, size: "3", children: popoverOption.title }),
+    popoverOption.title && /* @__PURE__ */ jsx(Text$2, { className: styles$c.pageTitle, size: "3", children: popoverOption.title }),
     popoverOption.content,
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames(styles$a.optionsButtonContainer, popoverOption.buttonsContainerClassName),
+        className: classNames(styles$c.optionsButtonContainer, popoverOption.buttonsContainerClassName),
         style: {
           flexDirection: direction === "vertical" ? "column" : "row"
         },
@@ -2883,7 +2346,7 @@ const _MultiPagePopover = forwardRef(function MultiPagePopover2({ page, classNam
   return /* @__PURE__ */ jsx(
     Popover,
     {
-      className: classNames(styles$a.multiPagePopover, className),
+      className: classNames(styles$c.multiPagePopover, className),
       ref,
       onOpenAutoFocus: resetPopoverContent,
       onCloseAutoFocus: resetPopoverContent,
@@ -2895,7 +2358,7 @@ const _MultiPagePopover = forwardRef(function MultiPagePopover2({ page, classNam
 const MultiPagePopover = React.memo(_MultiPagePopover);
 const charCount = "_charCount_1lz28_1";
 const ghost = "_ghost_1lz28_5";
-const styles$9 = {
+const styles$b = {
   charCount,
   ghost
 };
@@ -2931,7 +2394,7 @@ const _TextArea = forwardRef(function TextArea2({
       TextArea$1,
       {
         className: classNames("overmap-textarea", className, {
-          [styles$9.ghost]: variant === "ghost"
+          [styles$b.ghost]: variant === "ghost"
         }),
         style: { resize },
         variant: variant !== "ghost" ? variant : void 0,
@@ -2941,7 +2404,7 @@ const _TextArea = forwardRef(function TextArea2({
         ...rest
       }
     ),
-    displayInputLength && /* @__PURE__ */ jsx(Text$2, { as: "p", className: styles$9.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
+    displayInputLength && /* @__PURE__ */ jsx(Text$2, { as: "p", className: styles$b.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
   ] });
 });
 const TextArea = memo(_TextArea);
@@ -2961,7 +2424,7 @@ const _ToggleGroup = forwardRef(function ToggleGroup2({
   ...rest
 }, ref) {
   return /* @__PURE__ */ jsx(
-    Root$4,
+    Root$3,
     {
       type,
       className: classNames("overmap-toggle-group", className),
@@ -2974,7 +2437,7 @@ const _ToggleGroup = forwardRef(function ToggleGroup2({
       rovingFocus,
       defaultValue,
       asChild: true,
-      children: /* @__PURE__ */ jsx(ButtonGroup, { direction, ...rest, children: items.map(({ children, ...rest2 }) => /* @__PURE__ */ createElement(Item$4, { asChild: true, ...rest2, key: rest2.value }, /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(ButtonGroup, { direction, ...rest, children: items.map(({ children, ...rest2 }) => /* @__PURE__ */ createElement(Item$3, { asChild: true, ...rest2, key: rest2.value }, /* @__PURE__ */ jsx(
         IconButton,
         {
           className: classNames("overmap-toggle-group-button"),
@@ -2987,15 +2450,15 @@ const _ToggleGroup = forwardRef(function ToggleGroup2({
   );
 });
 const ToggleGroup = memo(_ToggleGroup);
-const styles$8 = {
+const styles$a = {
   "default": "_default_xqvoc_1"
 };
 const Root$1 = memo(
   forwardRef(({ className, minContentGap = "2", children, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(
-      Root$5,
+      Root$4,
       {
-        className: classNames(className, "overmap-toolbar", styles$8.default),
+        className: classNames(className, "overmap-toolbar", styles$a.default),
         ref,
         asChild: true,
         ...rest,
@@ -3036,7 +2499,7 @@ const actionButton = "_actionButton_1i6bp_20";
 const ToastRoot = "_ToastRoot_1i6bp_24";
 const slideIn = "_slideIn_1i6bp_1";
 const swipeOut = "_swipeOut_1i6bp_1";
-const styles$7 = {
+const styles$9 = {
   ToastViewport,
   actionButton,
   ToastRoot,
@@ -3054,7 +2517,7 @@ const _Toast = forwardRef(function Toast2({ title, description, icon, severity =
     },
     [onClose]
   );
-  return /* @__PURE__ */ jsx(RadixToast.Root, { asChild: true, ref, ...rest, open, type: sensitivity, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(Callout.Root, { className: styles$7.ToastRoot, variant: "surface", color, size: size2, children: /* @__PURE__ */ jsxs(Flex$1, { width: "100%", align: "center", gap: "4", justify: "between", children: [
+  return /* @__PURE__ */ jsx(RadixToast.Root, { asChild: true, ref, ...rest, open, type: sensitivity, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(Callout.Root, { className: styles$9.ToastRoot, variant: "surface", color, size: size2, children: /* @__PURE__ */ jsxs(Flex$1, { width: "100%", align: "center", gap: "4", justify: "between", children: [
     /* @__PURE__ */ jsxs(Flex$1, { align: "center", gap: "3", children: [
       /* @__PURE__ */ jsx(Callout.Icon, { children: icon }),
       /* @__PURE__ */ jsxs(Flex$1, { direction: "column", gap: "2", children: [
@@ -3062,7 +2525,7 @@ const _Toast = forwardRef(function Toast2({ title, description, icon, severity =
           /* @__PURE__ */ jsx(RadixToast.Title, { asChild: true, children: /* @__PURE__ */ jsx(Callout.Text, { size: "3", weight: "medium", children: title }) }),
           /* @__PURE__ */ jsx(RadixToast.Description, { asChild: true, children: /* @__PURE__ */ jsx(Callout.Text, { children: description }) })
         ] }),
-        action && /* @__PURE__ */ jsx(RadixToast.Action, { className: styles$7.actionButton, altText: action.altText, asChild: true, children: action.content })
+        action && /* @__PURE__ */ jsx(RadixToast.Action, { className: styles$9.actionButton, altText: action.altText, asChild: true, children: action.content })
       ] })
     ] }),
     /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "Close", variant: "ghost", severity, children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiCloseLine" }) }) })
@@ -3138,11 +2601,11 @@ const ToastProvider = memo(function ToastContextProvider({
   }, []);
   return /* @__PURE__ */ jsx(ToastContext.Provider, { value: toastContextValue, children: /* @__PURE__ */ jsxs(ToastProvider$1, { ...rest, children: [
     children,
-    /* @__PURE__ */ jsx(ToastViewport$1, { className: classNames(className, styles$7.ToastViewport), hotkey }),
+    /* @__PURE__ */ jsx(ToastViewport$1, { className: classNames(className, styles$9.ToastViewport), hotkey }),
     toasts.map(({ id, onClose, ...toastProps }) => /* @__PURE__ */ jsx(Toast, { ...toastProps, onClose: () => handleCloseToast(id, 0, onClose) }, id))
   ] }) });
 });
-const styles$6 = {
+const styles$8 = {
   "default": "_default_1odpt_1"
 };
 const Tooltip = memo(
@@ -3150,7 +2613,7 @@ const Tooltip = memo(
     return /* @__PURE__ */ jsx(
       Tooltip$1,
       {
-        className: classNames("overmap-tooltip", className, styles$6.default),
+        className: classNames("overmap-tooltip", className, styles$8.default),
         ref,
         content: /* @__PURE__ */ jsx(Flex$1, { align: "center", gap: "1", width: "max-content", height: "max-content", justify: "center", children: content }),
         ...rest,
@@ -3160,7 +2623,7 @@ const Tooltip = memo(
   })
 );
 const ToggleButton$1 = "_ToggleButton_13aus_1";
-const styles$5 = {
+const styles$7 = {
   ToggleButton: ToggleButton$1
 };
 const ToggleButton = memo(
@@ -3169,7 +2632,7 @@ const ToggleButton = memo(
     return /* @__PURE__ */ jsx(Toggle.Root, { ref, asChild: true, ...rest, children: /* @__PURE__ */ jsx(
       IconButton,
       {
-        className: classNames(className, styles$5.ToggleButton),
+        className: classNames(className, styles$7.ToggleButton),
         "aria-label": props["aria-label"],
         severity,
         fluid: fluid2,
@@ -3183,10 +2646,10 @@ const ToggleButton = memo(
   })
 );
 const noWrap = "_noWrap_1wpa5_1";
-const styles$4 = {
+const styles$6 = {
   noWrap
 };
-const Text = memo(
+const Text$1 = memo(
   forwardRef(({ className, noWrap: noWrap2, severity, as, ...props }, ref) => {
     const color = useSeverityColor(severity);
     return /* @__PURE__ */ jsx(
@@ -3194,7 +2657,7 @@ const Text = memo(
       {
         ref,
         as,
-        className: classNames(className, { [styles$4.noWrap]: noWrap2 }),
+        className: classNames(className, { [styles$6.noWrap]: noWrap2 }),
         color,
         ...props
       }
@@ -3208,6 +2671,60 @@ const DefaultTheme = memo(
     return /* @__PURE__ */ jsx(Theme, { panelBackground, radius: radius2, ref, ...rest });
   })
 );
+const light = "_light_1u8fs_1";
+const bold = "_bold_1u8fs_8";
+const full = "_full_1u8fs_15";
+const Text = "_Text_1u8fs_22";
+const styles$5 = {
+  light,
+  bold,
+  full,
+  Text
+};
+const SeparatorSizeMapping = {
+  "1": "max-content",
+  "2": "max-content",
+  "3": "max-content",
+  "4": "100%"
+};
+const _Separator = forwardRef(function Separator2({
+  className,
+  severity = "info",
+  textWeight = "light",
+  gap = "1",
+  text,
+  orientation = "horizontal",
+  size: size2,
+  weight = "medium",
+  ...rest
+}, ref) {
+  const computedSizing = useResponsiveMapping(size2, SeparatorSizeMapping);
+  const severityColor = useSeverityColor(severity);
+  return /* @__PURE__ */ jsxs(
+    Flex$1,
+    {
+      className: classNames("overmap-separator", className, {
+        [styles$5.light]: weight === "light",
+        [styles$5.bold]: weight === "bold",
+        [styles$5.full]: weight === "full"
+      }),
+      ref,
+      width: orientation === "horizontal" ? computedSizing : "max-content",
+      height: orientation === "vertical" ? computedSizing : "max-content",
+      direction: orientation === "vertical" ? "column" : "row",
+      align: "center",
+      gap,
+      children: [
+        /* @__PURE__ */ jsx(Separator$2, { size: size2, orientation, color: severityColor, ...rest }),
+        text && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text$2, { className: styles$5.Text, as: "span", size: "1", weight: textWeight, color: severityColor, children: text }),
+          /* @__PURE__ */ jsx(Separator$2, { size: size2, orientation, color: severityColor, ...rest })
+        ] })
+      ]
+    }
+  );
+});
+const Separator$1 = memo(_Separator);
 const centerStyles = { placeSelf: "center" };
 const ErrorFallback = memo((props) => {
   const { absoluteCentering } = props;
@@ -3217,7 +2734,7 @@ const ErrorFallback = memo((props) => {
   return /* @__PURE__ */ jsxs(Flex, { gap: "2", direction: "row", width: "100%", style: outerFlexStyles, children: [
     /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
     /* @__PURE__ */ jsx(RiIcon, { icon: "RiAlertLine", size: height, style: centerStyles }),
-    /* @__PURE__ */ jsx(Text, { style: { lineHeight: height, ...centerStyles }, children: "Something went wrong" }),
+    /* @__PURE__ */ jsx(Text$1, { style: { lineHeight: height, ...centerStyles }, children: "Something went wrong" }),
     /* @__PURE__ */ jsx(
       IconButton,
       {
@@ -3241,6 +2758,28 @@ const OvermapErrorBoundary = memo((props) => {
   return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(ErrorFallback, { absoluteCentering }), onError: logError, children: props.children });
 });
 OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
+const OvermapInputItem$1 = "_OvermapInputItem_1jgzv_1";
+const styles$4 = {
+  OvermapInputItem: OvermapInputItem$1
+};
+const OvermapInputItem = memo(
+  forwardRef((props, ref) => {
+    const { size: size2, className, style, leftSlot, rightSlot, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      OvermapItem,
+      {
+        className,
+        style,
+        size: size2,
+        leftSlot,
+        rightSlot,
+        compact: false,
+        children: /* @__PURE__ */ jsx("input", { className: styles$4.OvermapInputItem, ref, ...rest })
+      }
+    );
+  })
+);
+OvermapInputItem.displayName = "OvermapInputItem";
 const MenuContext = createContext({});
 const useMenuContext = () => useContext(MenuContext);
 const MENU_OVERFLOW_PADDING = 20;
@@ -3338,7 +2877,7 @@ const Root2 = memo((props) => {
         modal,
         setTriggerType
       },
-      children
+      children: /* @__PURE__ */ jsx(OvermapItemGroup, { size: size$1, children })
     }
   ) });
 });
@@ -3852,9 +3391,52 @@ const SubTrigger = memo(
 const Group = memo(
   forwardRef((props, ref) => {
     const { children } = props;
-    return /* @__PURE__ */ jsx(OvermapItemGroup, { ref, role: "group", children });
+    return /* @__PURE__ */ jsx(Flex$1, { ref, role: "group", width: "100%", height: "max-content", children });
   })
 );
+const SelectContext = createContext({});
+function useSelectContext() {
+  return useContext(SelectContext);
+}
+const SelectContextProvider = memo((props) => {
+  const { type, children } = props;
+  const [controlledValue, setControlledValue] = useState(
+    type === "single" ? (props == null ? void 0 : props.defaultValue) ?? null : null
+  );
+  const [controlledValues, setControlledValues] = useState(
+    type === "multi" ? (props == null ? void 0 : props.defaultValues) ?? [] : []
+  );
+  const onValuesChange = useCallback(
+    (values) => {
+      setControlledValues(values);
+      if (type === "multi" && (props == null ? void 0 : props.onValuesChange))
+        props.onValuesChange(values);
+    },
+    [props, type]
+  );
+  const onValueChange = useCallback(
+    (value2) => {
+      setControlledValue(value2);
+      if (type === "single" && (props == null ? void 0 : props.onValueChange))
+        props.onValueChange(value2);
+    },
+    [props, type]
+  );
+  const value = useMemo(
+    () => type === "multi" ? {
+      type,
+      values: (props == null ? void 0 : props.values) ?? controlledValues,
+      handleValuesChange: onValuesChange
+    } : {
+      type,
+      value: props.value ?? controlledValue,
+      handleValueChange: onValueChange
+    },
+    [controlledValue, controlledValues, onValueChange, onValuesChange, props, type]
+  );
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value, children });
+});
+SelectContextProvider.displayName = "SelectContextProvider";
 const SelectGroup = memo(
   forwardRef((props, ref) => {
     const { children, value, onValueChange } = props;
@@ -3992,7 +3574,7 @@ const Separator = memo(
           [styles$3.paddingTop]: spacingAbove,
           [styles$3.paddingBottom]: spacingBelow
         }),
-        children: /* @__PURE__ */ jsx(Separator$2, { ref, size: "4", weight: "light", ...rest })
+        children: /* @__PURE__ */ jsx(Separator$1, { ref, size: "4", weight: "light", ...rest })
       }
     );
   })
@@ -5092,8 +4674,8 @@ const _Table = forwardRef(function Table2(props, ref) {
   }, [rowsPerPage, rows.length, numRowsPerPage, pagination, showPageNavigation]);
   return /* @__PURE__ */ jsxs(Flex$1, { className: classNames({ [styles$1.outerTableContainer]: showContainer }), direction: "column", height: "100%", children: [
     (!!title || !!description) && /* @__PURE__ */ jsxs("div", { className: styles$1.headerContainer, children: [
-      !!title && /* @__PURE__ */ jsx(Text, { weight: "bold", size: "5", children: title }),
-      !!description && /* @__PURE__ */ jsx(Text, { as: "div", children: description })
+      !!title && /* @__PURE__ */ jsx(Text$1, { weight: "bold", size: "5", children: title }),
+      !!description && /* @__PURE__ */ jsx(Text$1, { as: "div", children: description })
     ] }),
     showTopBar && /* @__PURE__ */ jsxs(Flex$1, { justify: "between", gap: "2", className: styles$1.tableTopContainer, children: [
       /* @__PURE__ */ jsxs(Flex$1, { gap: "2", children: [
@@ -5208,7 +4790,7 @@ const _Table = forwardRef(function Table2(props, ref) {
     ) }),
     showBottomBar && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.tableBottomContainer, wrap: "wrap", direction: isMobile ? "column" : "row", children: [
       showRowsPerPage && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.rowsPerPageContainer, children: [
-        /* @__PURE__ */ jsx(Text, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
+        /* @__PURE__ */ jsx(Text$1, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
         /* @__PURE__ */ jsx(
           Select,
           {
@@ -5223,7 +4805,7 @@ const _Table = forwardRef(function Table2(props, ref) {
           }
         )
       ] }),
-      showPageNumber && /* @__PURE__ */ jsx(Flex$1, { justify: "center", children: /* @__PURE__ */ jsx(Text, { className: styles$1.pageText, size: "2", children: totalPages > 0 && `Page ${pagination.state.page + 1} of ${totalPages}` }) }),
+      showPageNumber && /* @__PURE__ */ jsx(Flex$1, { justify: "center", children: /* @__PURE__ */ jsx(Text$1, { className: styles$1.pageText, size: "2", children: totalPages > 0 && `Page ${pagination.state.page + 1} of ${totalPages}` }) }),
       showPageNavigation && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.rowsPerPageContainer, gap: "2", justify: "end", children: [
         /* @__PURE__ */ jsx(
           IconButton,
@@ -5442,10 +5024,6 @@ export {
   ConfirmEditInput,
   DefaultTheme,
   Dialog$1 as Dialog,
-  DialogCommandMenu,
-  DialogMenu,
-  DialogMultiSelectMenu,
-  DialogSelectMenu,
   DownloadButtonUtility,
   Flex,
   HoverUtility,
@@ -5471,14 +5049,14 @@ export {
   RiIcon,
   Select,
   SelectAllCheckbox,
-  Separator$2 as Separator,
+  Separator$1 as Separator,
   Sidebar,
   SlideOutV2,
   SlideOutV3,
   Spinner,
   Switch,
   Table,
-  Text,
+  Text$1 as Text,
   TextArea,
   Theme2 as Theme,
   Toast,