@overmap-ai/blocks 1.0.29-overmap-table.0 → 1.0.29

package/dist/blocks.umd.cjs

@@ -263,7 +263,7 @@
   const zeroMinWidth = "_zeroMinWidth_curjh_1";
   const zeroMinHeight = "_zeroMinHeight_curjh_5";
   const radius = "_radius_curjh_9";
-  const styles$u = {
+  const styles$r = {
     zeroMinWidth,
     zeroMinHeight,
     radius
@@ -275,9 +275,9 @@
           themes.Flex,
           {
             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,
@@ -289,14 +289,14 @@
   );
   const BreadcrumbContext = React.createContext({});
   const useBreadcrumbContext = () => React.useContext(BreadcrumbContext);
-  const Item$3 = React.memo(
+  const Item$2 = React.memo(
     React.forwardRef(({ className, children, ...rest }, ref) => {
       const { size, severity } = useBreadcrumbContext();
       const severityColor = useSeverityColor(severity);
       return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: classNames("overmap-breadcrumb-item", className), height: "max-content", width: "max-content", children: /* @__PURE__ */ jsxRuntime.jsx(themes.Link, { ref, size, color: severityColor, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { height: "100%", width: "100%", align: "center", gap: "1", children }) }) });
     })
   );
-  const Group$3 = React.memo(
+  const Group$2 = React.memo(
     React.forwardRef(
       ({ className, children, separator, severity = "info", size, gap = "2", ...rest }, ref) => {
         const severityColor = useSeverityColor(severity);
@@ -323,23 +323,23 @@
     )
   );
   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 === " ") {
@@ -361,12 +361,12 @@
   const useButtonGroupContext = () => React.useContext(ButtonGroupContext);
   const spinner = "_spinner_1oknc_9";
   const spin = "_spin_1oknc_9";
-  const styles$s = {
+  const styles$p = {
     spinner,
     spin
   };
   const Spinner = React.memo(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$s.spinner });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$p.spinner });
   });
   Spinner.displayName = "Spinner";
   const _Button$1 = React.forwardRef(function Button(props, ref) {
@@ -402,7 +402,7 @@
         ref,
         type,
         className: classNames(className, hoverEffectClasses, {
-          [styles$t.fluid]: fluid2
+          [styles$q.fluid]: fluid2
         }),
         color,
         size: useResponsiveMapping(size, SizeMapping),
@@ -444,7 +444,7 @@
       themes.IconButton,
       {
         className: classNames(className, hoverEffectClasses, {
-          [styles$t.fluid]: fluid2
+          [styles$q.fluid]: fluid2
         }),
         ref,
         color,
@@ -459,7 +459,7 @@
   });
   const IconButton = React.memo(_Button);
   const merged = "_merged_wdgxo_1";
-  const styles$r = {
+  const styles$o = {
     merged
   };
   const GhostVariantSizeToGapMapping = {
@@ -486,7 +486,7 @@
       themes.Flex,
       {
         className: classNames("overmap-button-group", className, {
-          [styles$r.merged]: merged2
+          [styles$o.merged]: merged2
         }),
         ref,
         gap: merged2 ? gap ?? mergedAutoGap : gap ?? "2",
@@ -499,7 +499,7 @@
   });
   const ButtonGroup = React.memo(_ButtonGroup);
   const separators = "_separators_1f7v1_1";
-  const styles$q = {
+  const styles$n = {
     separators
   };
   const ButtonListBorder = React.memo(
@@ -530,7 +530,7 @@
           size,
           severity: "info",
           variant: buttonVariant,
-          className: classNames(className, styles$q.separators),
+          className: classNames(className, styles$n.separators),
           merged: true,
           gap: "0",
           direction: "column",
@@ -557,10 +557,9 @@
   const RiIcon = React.memo((props) => {
     const { icon, size = DEFAULT_ICON_SIZE, color, ...rest } = props;
     const Icon = RiIcons__namespace[icon];
-    if (!Icon) {
-      throw new Error(`no icon with the name ${icon} exists.`);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size, color, ...rest });
+    if (!Icon)
+      console.error(`Icon ${icon} not found`);
+    return Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size, color, ...rest }) : /* @__PURE__ */ jsxRuntime.jsx(RiIcons.RiQuestionMark, {});
   });
   RiIcon.displayName = "IconComponent";
   const DialogContent = React.memo(function DialogContent2(props) {
@@ -784,7 +783,7 @@
   );
   const OverlayContent = "_OverlayContent_1nr9w_1";
   const OverlayOverlay = "_OverlayOverlay_1nr9w_6";
-  const styles$p = {
+  const styles$m = {
     OverlayContent,
     OverlayOverlay
   };
@@ -795,13 +794,19 @@
         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 = React.createContext(
+    {}
+  );
+  function useCollapsibleTreeContext() {
+    return React.useContext(CollapsibleTreeContext);
+  }
   const OvermapItemSizeDependantProps = {
     "1": {
       gap: "1",
@@ -836,12 +841,11 @@
   };
   const OvermapItemGroupContext = React.createContext({});
   const useOvermapItemGroupContext = () => React.useContext(OvermapItemGroupContext);
-  const OvermapItemGroup = React.memo(
-    React.forwardRef(function(props, ref) {
-      const { size, compact = false, children, ...rest } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(OvermapItemGroupContext.Provider, { value: { size, compact }, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Grid, { ref, columns: "1", width: "100%", height: "max-content", ...rest, children }) });
-    })
-  );
+  const OvermapItemGroup = React.memo((props) => {
+    const { size, children, compact = false } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(OvermapItemGroupContext.Provider, { value: { size, compact }, children });
+  });
+  OvermapItemGroup.displayName = "OvermapItemGroup";
   const OvermapItem = React.memo(
     React.forwardRef((props, ref) => {
       const overmapItemGroupContext = useOvermapItemGroupContext();
@@ -875,548 +879,6 @@
       );
     })
   );
-  const DialogMenuContext = React.createContext({});
-  const useDialogMenuContext = () => React.useContext(DialogMenuContext);
-  const DialogMenuItem = "_DialogMenuItem_1ojd2_1";
-  const styles$o = {
-    DialogMenuItem
-  };
-  const Item$2 = React.memo(
-    React.forwardRef((props, ref) => {
-      const dialogMenuContext = useDialogMenuContext();
-      const {
-        className,
-        children,
-        onSelect,
-        onClick,
-        closeOnSelect = dialogMenuContext.closeOnSelect,
-        size = dialogMenuContext.size,
-        leftSlot,
-        rightSlot,
-        ...rest
-      } = props;
-      const handleClick = React.useCallback(
-        (e) => {
-          if (onClick)
-            onClick(e);
-          if (onSelect)
-            onSelect();
-          if (closeOnSelect)
-            dialogMenuContext.close();
-        },
-        [closeOnSelect, dialogMenuContext, onClick, onSelect]
-      );
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        OvermapItem,
-        {
-          className: classNames(className, styles$o.DialogMenuItem),
-          onClick: handleClick,
-          ref,
-          leftSlot,
-          rightSlot,
-          size,
-          role: "menuitem",
-          tabIndex: 0,
-          ...rest,
-          children
-        }
-      );
-    })
-  );
-  const SelectContext = React.createContext({});
-  function useSelectContext() {
-    return React.useContext(SelectContext);
-  }
-  const SelectContextProvider = React.memo((props) => {
-    const { type, children } = props;
-    const [controlledValue, setControlledValue] = React.useState(
-      type === "single" ? (props == null ? void 0 : props.defaultValue) ?? null : null
-    );
-    const [controlledValues, setControlledValues] = React.useState(
-      type === "multi" ? (props == null ? void 0 : props.defaultValues) ?? [] : []
-    );
-    const onValuesChange = React.useCallback(
-      (values) => {
-        setControlledValues(values);
-        if (type === "multi" && (props == null ? void 0 : props.onValuesChange))
-          props.onValuesChange(values);
-      },
-      [props, type]
-    );
-    const onValueChange = React.useCallback(
-      (value2) => {
-        setControlledValue(value2);
-        if (type === "single" && (props == null ? void 0 : props.onValueChange))
-          props.onValueChange(value2);
-      },
-      [props, type]
-    );
-    const value = React.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__ */ jsxRuntime.jsx(SelectContext.Provider, { value, children });
-  });
-  SelectContextProvider.displayName = "SelectContextProvider";
-  const SelectItem$1 = React.memo(
-    React.forwardRef((props, ref) => {
-      const dialogMenuContext = useDialogMenuContext();
-      const { value, rightSlot, selectedIndicator = dialogMenuContext.selectedIndicator, onSelect, ...rest } = props;
-      const { value: currentValue, handleValueChange } = useSelectContext();
-      const handleSelect = React.useCallback(() => {
-        handleValueChange(value !== currentValue ? value : null);
-        if (onSelect)
-          onSelect();
-      }, [currentValue, handleValueChange, onSelect, value]);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Item$2,
-        {
-          ref,
-          onSelect: handleSelect,
-          role: "menuitemradio",
-          rightSlot: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            currentValue === value && selectedIndicator,
-            " ",
-            rightSlot
-          ] }),
-          ...rest
-        }
-      );
-    })
-  );
-  const MultiSelectItem$2 = React.memo(
-    React.forwardRef((props, ref) => {
-      const dialogMenuContext = useDialogMenuContext();
-      const { value, rightSlot, selectedIndicator = dialogMenuContext.selectedIndicator, onSelect, ...rest } = props;
-      const { values: currentValues, handleValuesChange } = useSelectContext();
-      const handleSelect = React.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__ */ jsxRuntime.jsx(
-        Item$2,
-        {
-          onSelect: handleSelect,
-          ref,
-          role: "menuitemcheckbox",
-          rightSlot: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            currentValues.includes(value) && selectedIndicator,
-            rightSlot
-          ] }),
-          ...rest
-        }
-      );
-    })
-  );
-  const SubTrigger$1 = React.memo(
-    React.forwardRef((props, ref) => {
-      const { subContentId, onSelect, ...rest } = props;
-      const { setSubContentId } = useDialogMenuContext();
-      const handleSelect = React.useCallback(() => {
-        setSubContentId(subContentId);
-        if (onSelect)
-          onSelect();
-      }, [subContentId, onSelect, setSubContentId]);
-      return /* @__PURE__ */ jsxRuntime.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 = React.forwardRef(function Separator2({
-    className,
-    severity = "info",
-    textWeight = "light",
-    gap = "1",
-    text,
-    orientation = "horizontal",
-    size,
-    weight = "medium",
-    ...rest
-  }, ref) {
-    const computedSizing = useResponsiveMapping(size, SeparatorSizeMapping);
-    const severityColor = useSeverityColor(severity);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      themes.Flex,
-      {
-        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__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest }),
-          text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { className: styles$n.Text, as: "span", size: "1", weight: textWeight, color: severityColor, children: text }),
-            /* @__PURE__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest })
-          ] })
-        ]
-      }
-    );
-  });
-  const Separator$2 = React.memo(_Separator);
-  const Separator$1 = React.memo(
-    React.forwardRef((props, ref) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { ref, py: "2", children: /* @__PURE__ */ jsxRuntime.jsx(Separator$2, { size: "4", weight: "light", ...props }) });
-    })
-  );
-  const DEFAULT_DIALOG_MENU_SIZE = "3";
-  const DEFAULT_SELECTED_INDICATOR = /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiCheckLine" });
-  const Group$2 = React.memo(
-    React.forwardRef((props, ref) => {
-      const dialogMenuContext = useDialogMenuContext();
-      const { size = dialogMenuContext.size, grid = false, children } = props;
-      const computedSize = useOvermapResponsiveValue(size);
-      const computedColumns = React.useMemo(() => {
-        const { height } = OvermapItemSizeDependantProps[computedSize ?? DEFAULT_DIALOG_MENU_SIZE];
-        return `repeat(auto-fit,var(--space-${height})`;
-      }, [computedSize]);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        OvermapItemGroup,
-        {
-          role: "group",
-          compact: grid,
-          size,
-          ref,
-          columns: grid ? computedColumns : void 0,
-          flow: "dense",
-          children
-        }
-      );
-    })
-  );
-  const SelectGroup$1 = React.memo(
-    React.forwardRef((props, ref) => {
-      const { value, onValueChange, ...rest } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(SelectContextProvider, { type: "single", value, onValueChange, children: /* @__PURE__ */ jsxRuntime.jsx(Group$2, { ref, ...rest }) });
-    })
-  );
-  const MultiSelectGroup$1 = React.memo(
-    React.forwardRef((props, ref) => {
-      const { values, onValuesChange, ...rest } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(SelectContextProvider, { type: "multi", values, onValuesChange, children: /* @__PURE__ */ jsxRuntime.jsx(Group$2, { ref, ...rest }) });
-    })
-  );
-  const OvermapInputItem$1 = "_OvermapInputItem_1jgzv_1";
-  const styles$m = {
-    OvermapInputItem: OvermapInputItem$1
-  };
-  const OvermapInputItem = React.memo(
-    React.forwardRef((props, ref) => {
-      const { size, className, style, leftSlot, rightSlot, ...rest } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        OvermapItem,
-        {
-          className,
-          style,
-          size,
-          leftSlot,
-          rightSlot,
-          compact: false,
-          children: /* @__PURE__ */ jsxRuntime.jsx("input", { className: styles$m.OvermapInputItem, ref, ...rest })
-        }
-      );
-    })
-  );
-  OvermapInputItem.displayName = "OvermapInputItem";
-  const DialogContentScrollArea = "_DialogContentScrollArea_i3a60_1";
-  const styles$l = {
-    DialogContentScrollArea
-  };
-  const ContentImpl = React.memo(
-    React.forwardRef((props, ref) => {
-      const { size } = useDialogMenuContext();
-      const {
-        topSlot,
-        bottomSlot,
-        numberOfItems,
-        filterValue,
-        onFilterValueChange,
-        placeholder,
-        leftFilterSlot,
-        rightFilterSlot,
-        children
-      } = props;
-      const handleChange = React.useCallback(
-        (e) => {
-          if (onFilterValueChange)
-            onFilterValueChange(e.target.value);
-        },
-        [onFilterValueChange]
-      );
-      return /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", width: "100%", ref, py: "2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", width: "100%", px: "2", children: [
-          topSlot && /* @__PURE__ */ jsxRuntime.jsx(OvermapItem, { size, children: topSlot }),
-          filterValue !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            OvermapInputItem,
-            {
-              size,
-              leftSlot: leftFilterSlot,
-              rightSlot: rightFilterSlot,
-              value: filterValue,
-              onChange: handleChange,
-              placeholder
-            }
-          )
-        ] }),
-        (topSlot || filterValue !== void 0) && numberOfItems > 0 && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(themes.ScrollArea, { className: styles$l.DialogContentScrollArea, scrollbars: "vertical", type: "hover", children: /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { px: "2", children }) }),
-        bottomSlot && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { direction: "column", width: "100%", px: "2", children: bottomSlot && /* @__PURE__ */ jsxRuntime.jsx(OvermapItem, { size, children: bottomSlot }) })
-      ] });
-    })
-  );
-  const Content$1 = React.memo(
-    React.forwardRef((props, ref) => {
-      const { subContentId } = useDialogMenuContext();
-      return !subContentId && /* @__PURE__ */ jsxRuntime.jsx(ContentImpl, { ref, ...props });
-    })
-  );
-  const SubContent$1 = React.memo(
-    React.forwardRef((props, ref) => {
-      const { id, ...rest } = props;
-      const { subContentId } = useDialogMenuContext();
-      return subContentId === id && /* @__PURE__ */ jsxRuntime.jsx(ContentImpl, { ref, ...rest });
-    })
-  );
-  const DialogMenuContextProvider = React.memo((props) => {
-    const { size, closeOnSelect, close, selectedIndicator, children } = props;
-    const [subContentId, setSubContentId] = React.useState(null);
-    const value = React.useMemo(
-      () => ({ size, close, closeOnSelect, subContentId, setSubContentId, selectedIndicator }),
-      [close, closeOnSelect, selectedIndicator, size, subContentId]
-    );
-    return /* @__PURE__ */ jsxRuntime.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 = React.memo(
-    React.forwardRef((props, ref) => {
-      const {
-        className,
-        content: contentFromProps,
-        selectedIndicator = DEFAULT_SELECTED_INDICATOR,
-        size = DEFAULT_DIALOG_MENU_SIZE,
-        closeOnSelect = false,
-        ...rest
-      } = props;
-      const content = React.useCallback(
-        (close) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { className: classNames(styles$k.DialogMenu, className), children: /* @__PURE__ */ jsxRuntime.jsx(
-            DialogMenuContextProvider,
-            {
-              size,
-              close,
-              closeOnSelect,
-              selectedIndicator,
-              children: contentFromProps
-            }
-          ) });
-        },
-        [className, closeOnSelect, contentFromProps, selectedIndicator, size]
-      );
-      return /* @__PURE__ */ jsxRuntime.jsx(BaseDialog, { className: styles$k.DialogMenuWrapper, ref, content, ...rest });
-    })
-  );
-  const DialogCommandMenu = React.memo(
-    React.forwardRef((props, ref) => {
-      const {
-        // Command menu scoped props
-        size,
-        items,
-        closeOnSelect = true,
-        // Content scoped props
-        filterValue,
-        onFilterValueChange,
-        placeholder,
-        leftFilterSlot,
-        rightFilterSlot,
-        topSlot,
-        bottomSlot,
-        ...rest
-      } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Root$3,
-        {
-          ref,
-          size,
-          content: /* @__PURE__ */ jsxRuntime.jsx(
-            Content$1,
-            {
-              filterValue,
-              onFilterValueChange,
-              placeholder,
-              leftFilterSlot,
-              rightFilterSlot,
-              numberOfItems: items.length,
-              topSlot,
-              bottomSlot,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Group$2, { size, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(Item$2, { ...item }, index)) })
-            }
-          ),
-          closeOnSelect,
-          ...rest
-        }
-      );
-    })
-  );
-  const DialogSelectMenu = React.memo(
-    React.forwardRef((props, ref) => {
-      const {
-        // Select scoped props
-        size,
-        value,
-        onValueChange,
-        items,
-        selectedIndicator,
-        // Content scoped props
-        filterValue,
-        onFilterValueChange,
-        placeholder,
-        leftFilterSlot,
-        rightFilterSlot,
-        topSlot,
-        bottomSlot,
-        ...rest
-      } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Root$3,
-        {
-          ref,
-          size,
-          content: /* @__PURE__ */ jsxRuntime.jsx(
-            Content$1,
-            {
-              filterValue,
-              onFilterValueChange,
-              placeholder,
-              leftFilterSlot,
-              rightFilterSlot,
-              numberOfItems: items.length,
-              topSlot,
-              bottomSlot,
-              children: /* @__PURE__ */ jsxRuntime.jsx(SelectGroup$1, { size, value, onValueChange, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                SelectItem$1,
-                {
-                  selectedIndicator,
-                  ...item
-                },
-                `${item.value}-${index}`
-              )) })
-            }
-          ),
-          ...rest
-        }
-      );
-    })
-  );
-  const DialogMultiSelectMenu = React.memo(
-    React.forwardRef((props, ref) => {
-      const {
-        // Multi select scoped props
-        size,
-        selectedIndicator,
-        values,
-        onValuesChange,
-        items,
-        // Content scoped props
-        filterValue,
-        onFilterValueChange,
-        placeholder,
-        leftFilterSlot,
-        rightFilterSlot,
-        topSlot,
-        bottomSlot,
-        ...rest
-      } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Root$3,
-        {
-          ref,
-          size,
-          content: /* @__PURE__ */ jsxRuntime.jsx(
-            Content$1,
-            {
-              filterValue,
-              onFilterValueChange,
-              placeholder,
-              leftFilterSlot,
-              rightFilterSlot,
-              numberOfItems: items.length,
-              topSlot,
-              bottomSlot,
-              children: /* @__PURE__ */ jsxRuntime.jsx(MultiSelectGroup$1, { size, values, onValuesChange, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.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 = React.createContext(
-    {}
-  );
-  function useCollapsibleTreeContext() {
-    return React.useContext(CollapsibleTreeContext);
-  }
   const CollapsibleNode = genericMemo(function(props) {
     const { meta, nodes, level = 0, disabled: disabled2 } = props;
     const [controlledOpenState, setControlledOpenState] = React.useState(false);
@@ -1524,7 +986,7 @@
           onNodeClose,
           onNodeOpen
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(OvermapItemGroup, { width: "100%", height: "max-content", size, ...rest, gapY: nodeGap, children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsxRuntime.jsx(CollapsibleNode, { ...treeNodeProps }, `${0},${index}`)) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(OvermapItemGroup, { size, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { width: "100%", height: "max-content", direction: "column", gap: nodeGap, ...rest, children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsxRuntime.jsx(CollapsibleNode, { ...treeNodeProps }, `${0},${index}`)) }) })
       }
     );
   });
@@ -1557,7 +1019,7 @@
     });
   });
   const fluid = "_fluid_7n1wr_1";
-  const styles$j = {
+  const styles$l = {
     fluid
   };
   const _Select = React.forwardRef(function Select2({
@@ -1581,7 +1043,7 @@
       themes.Select.Trigger,
       {
         className: classNames(className, {
-          [styles$j.fluid]: fluid2
+          [styles$l.fluid]: fluid2
         }),
         id,
         ref,
@@ -1593,7 +1055,7 @@
       themes.Select.Content,
       {
         side,
-        className: styles$j.contentDefault,
+        className: styles$l.contentDefault,
         position: "popper",
         variant: variant !== "surface" ? "soft" : "solid",
         color: itemSeverityColor,
@@ -1706,7 +1168,7 @@
       );
     })
   );
-  const styles$i = {
+  const styles$k = {
     "default": "_default_u936h_1"
   };
   const _Switch = React.forwardRef(function Switch2({ className, severity = "primary", icon, defaultChecked = false, onCheckedChange, ...rest }, ref) {
@@ -1734,7 +1196,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         themes.Switch,
         {
-          className: classNames("overmap-switch", className, styles$i.default),
+          className: classNames("overmap-switch", className, styles$k.default),
           ref: ref ? ref : fallbackRef,
           color: severityColor,
           radius: "full",
@@ -1752,7 +1214,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,
@@ -1785,13 +1247,13 @@
       setContainer(tempContainer);
     }, [containerSelector]);
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Root, { open, modal, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixDialogPrimitive__namespace.Portal, { container, children: [
-      overlay2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Overlay, { className: classNames(styles$h.overlay) }),
+      overlay2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Overlay, { className: classNames(styles$j.overlay) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         RadixDialogPrimitive__namespace.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,
@@ -1803,7 +1265,7 @@
               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__ */ jsxRuntime.jsx(RiIcon, { icon: "RiDraggable" }),
                 left: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiDraggable" })
@@ -1946,7 +1408,7 @@
   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,
@@ -2022,12 +1484,12 @@
       const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(handleDismiss, parentContainer);
       const CSSTransitionClassNames = React.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]
       );
@@ -2258,7 +1720,7 @@
   const ExitActiveLeft = "_ExitActiveLeft_1jwyv_46";
   const ExitDoneLeft = "_ExitDoneLeft_1jwyv_51";
   const Overlay = "_Overlay_1jwyv_56";
-  const styles$f = {
+  const styles$h = {
     EnterRight,
     EnterActiveRight,
     EnterDoneRight,
@@ -2313,12 +1775,12 @@
       }, [initialWidth]);
       const CSSTransitionClassNames = React.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]
       );
@@ -2401,7 +1863,7 @@
   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",
@@ -2428,9 +1890,9 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       themes.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,
@@ -2440,9 +1902,9 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             themes.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,
@@ -2453,7 +1915,7 @@
             }
           ),
           rightSlot && /* @__PURE__ */ jsxRuntime.jsx(themes.TextField.Slot, { children: rightSlot }),
-          displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { 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__ */ jsxRuntime.jsx(themes.Text, { 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}` })
         ]
       }
     );
@@ -2463,7 +1925,7 @@
   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,
@@ -2472,7 +1934,7 @@
   const Item$1 = React.memo(
     React.forwardRef((props, ref) => {
       const { children } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: styles$d.ItemStackItem, "data-item-stack": "", children });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: styles$f.ItemStackItem, "data-item-stack": "", children });
     })
   );
   const Group$1 = React.memo(
@@ -2482,9 +1944,9 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         themes.Flex,
         {
-          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,
@@ -2519,7 +1981,7 @@
     return React.cloneElement(children, { ...childProps });
   });
   const wrapper$1 = "_wrapper_tmtz0_1";
-  const styles$c = {
+  const styles$e = {
     wrapper: wrapper$1
   };
   const _Popover = React.forwardRef(function Popover2({ className, trigger, open, onOpenChange, defaultOpen = false, modal = false, children, ...rest }, ref) {
@@ -2529,7 +1991,7 @@
         themes.Popover.Content,
         {
           ref,
-          className: classNames("overmap-popover", className, styles$c.wrapper),
+          className: classNames("overmap-popover", className, styles$e.wrapper),
           ...rest,
           children: children(themes.Popover.Close)
         }
@@ -2544,7 +2006,7 @@
   const resizable = "_resizable_1ssf2_23";
   const resizeHandle = "_resizeHandle_1ssf2_28";
   const panelMainContent = "_panelMainContent_1ssf2_48";
-  const styles$b = {
+  const styles$d = {
     wrapper,
     panelContent,
     left,
@@ -2730,7 +2192,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       themes.Flex,
       {
-        className: styles$b.wrapper,
+        className: styles$d.wrapper,
         style: { minWidth: `${leftMinWidth + rightMinWidth}px` },
         ref: wrapperRef,
         width: "100%",
@@ -2752,7 +2214,7 @@
                 themes.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%",
@@ -2761,7 +2223,7 @@
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     reResizable.Resizable,
                     {
-                      className: styles$b.resizable,
+                      className: styles$d.resizable,
                       size: {
                         width: leftPanelWidth,
                         height: "100%"
@@ -2770,7 +2232,7 @@
                       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__ */ jsxRuntime.jsx(RiIcon, { icon: "RiDraggable", height: "14px", width: "14px" })
                       },
@@ -2781,7 +2243,7 @@
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$b.panelMainContent, children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$d.panelMainContent, children }),
           /* @__PURE__ */ jsxRuntime.jsx(
             reactTransitionGroup.Transition,
             {
@@ -2795,7 +2257,7 @@
                 themes.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%",
@@ -2804,13 +2266,13 @@
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     reResizable.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__ */ jsxRuntime.jsx(RiIcon, { icon: "RiDraggable", height: "14px", width: "14px" }) },
                       children: rightPanel
                     }
@@ -2828,7 +2290,7 @@
   const buttonContainer = "_buttonContainer_16xvh_16";
   const optionsButtonContainer = "_optionsButtonContainer_16xvh_21";
   const optionsButton = "_optionsButton_16xvh_21";
-  const styles$a = {
+  const styles$c = {
     multiPagePopover,
     pageTitle,
     buttonContainer,
@@ -2842,7 +2304,7 @@
     const optionButtons = popoverOption.options.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
       Button2,
       {
-        className: classNames(styles$a.optionsButton, option.buttonClassName),
+        className: classNames(styles$c.optionsButton, option.buttonClassName),
         variant: "ghost",
         radius: "large",
         style: {
@@ -2858,12 +2320,12 @@
       `${option.value}-page-${page}-button-${i}`
     ));
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      popoverOption.title && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { className: styles$a.pageTitle, size: "3", children: popoverOption.title }),
+      popoverOption.title && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { className: styles$c.pageTitle, size: "3", children: popoverOption.title }),
       popoverOption.content,
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames(styles$a.optionsButtonContainer, popoverOption.buttonsContainerClassName),
+          className: classNames(styles$c.optionsButtonContainer, popoverOption.buttonsContainerClassName),
           style: {
             flexDirection: direction === "vertical" ? "column" : "row"
           },
@@ -2881,7 +2343,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
-        className: classNames(styles$a.multiPagePopover, className),
+        className: classNames(styles$c.multiPagePopover, className),
         ref,
         onOpenAutoFocus: resetPopoverContent,
         onCloseAutoFocus: resetPopoverContent,
@@ -2893,7 +2355,7 @@
   const MultiPagePopover = React.memo(_MultiPagePopover);
   const charCount = "_charCount_1lz28_1";
   const ghost = "_ghost_1lz28_5";
-  const styles$9 = {
+  const styles$b = {
     charCount,
     ghost
   };
@@ -2929,7 +2391,7 @@
         themes.TextArea,
         {
           className: classNames("overmap-textarea", className, {
-            [styles$9.ghost]: variant === "ghost"
+            [styles$b.ghost]: variant === "ghost"
           }),
           style: { resize },
           variant: variant !== "ghost" ? variant : void 0,
@@ -2939,7 +2401,7 @@
           ...rest
         }
       ),
-      displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$9.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
+      displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$b.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
     ] });
   });
   const TextArea = React.memo(_TextArea);
@@ -2985,7 +2447,7 @@
     );
   });
   const ToggleGroup = React.memo(_ToggleGroup);
-  const styles$8 = {
+  const styles$a = {
     "default": "_default_xqvoc_1"
   };
   const Root$1 = React.memo(
@@ -2993,7 +2455,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         reactToolbar.Root,
         {
-          className: classNames(className, "overmap-toolbar", styles$8.default),
+          className: classNames(className, "overmap-toolbar", styles$a.default),
           ref,
           asChild: true,
           ...rest,
@@ -3034,7 +2496,7 @@
   const ToastRoot = "_ToastRoot_1i6bp_24";
   const slideIn = "_slideIn_1i6bp_1";
   const swipeOut = "_swipeOut_1i6bp_1";
-  const styles$7 = {
+  const styles$9 = {
     ToastViewport,
     actionButton,
     ToastRoot,
@@ -3052,7 +2514,7 @@
       },
       [onClose]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Root, { asChild: true, ref, ...rest, open, type: sensitivity, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Callout.Root, { className: styles$7.ToastRoot, variant: "surface", color, size, children: /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { width: "100%", align: "center", gap: "4", justify: "between", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Root, { asChild: true, ref, ...rest, open, type: sensitivity, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Callout.Root, { className: styles$9.ToastRoot, variant: "surface", color, size, children: /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { width: "100%", align: "center", gap: "4", justify: "between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(themes.Callout.Icon, { children: icon }),
         /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "2", children: [
@@ -3060,7 +2522,7 @@
             /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Callout.Text, { size: "3", weight: "medium", children: title }) }),
             /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Callout.Text, { children: description }) })
           ] }),
-          action && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { className: styles$7.actionButton, altText: action.altText, asChild: true, children: action.content })
+          action && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { className: styles$9.actionButton, altText: action.altText, asChild: true, children: action.content })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { "aria-label": "Close", variant: "ghost", severity, children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiCloseLine" }) }) })
@@ -3136,11 +2598,11 @@
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Provider, { value: toastContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixToast.ToastProvider, { ...rest, children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(RadixToast.ToastViewport, { className: classNames(className, styles$7.ToastViewport), hotkey }),
+      /* @__PURE__ */ jsxRuntime.jsx(RadixToast.ToastViewport, { className: classNames(className, styles$9.ToastViewport), hotkey }),
       toasts.map(({ id, onClose, ...toastProps }) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toastProps, onClose: () => handleCloseToast(id, 0, onClose) }, id))
     ] }) });
   });
-  const styles$6 = {
+  const styles$8 = {
     "default": "_default_1odpt_1"
   };
   const Tooltip = React.memo(
@@ -3148,7 +2610,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         themes.Tooltip,
         {
-          className: classNames("overmap-tooltip", className, styles$6.default),
+          className: classNames("overmap-tooltip", className, styles$8.default),
           ref,
           content: /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { align: "center", gap: "1", width: "max-content", height: "max-content", justify: "center", children: content }),
           ...rest,
@@ -3158,7 +2620,7 @@
     })
   );
   const ToggleButton$1 = "_ToggleButton_13aus_1";
-  const styles$5 = {
+  const styles$7 = {
     ToggleButton: ToggleButton$1
   };
   const ToggleButton = React.memo(
@@ -3167,7 +2629,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(Toggle__namespace.Root, { ref, asChild: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
         IconButton,
         {
-          className: classNames(className, styles$5.ToggleButton),
+          className: classNames(className, styles$7.ToggleButton),
           "aria-label": props["aria-label"],
           severity,
           fluid: fluid2,
@@ -3181,10 +2643,10 @@
     })
   );
   const noWrap = "_noWrap_1wpa5_1";
-  const styles$4 = {
+  const styles$6 = {
     noWrap
   };
-  const Text = React.memo(
+  const Text$1 = React.memo(
     React.forwardRef(({ className, noWrap: noWrap2, severity, as, ...props }, ref) => {
       const color = useSeverityColor(severity);
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3192,7 +2654,7 @@
         {
           ref,
           as,
-          className: classNames(className, { [styles$4.noWrap]: noWrap2 }),
+          className: classNames(className, { [styles$6.noWrap]: noWrap2 }),
           color,
           ...props
         }
@@ -3206,6 +2668,60 @@
       return /* @__PURE__ */ jsxRuntime.jsx(themes.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 = React.forwardRef(function Separator2({
+    className,
+    severity = "info",
+    textWeight = "light",
+    gap = "1",
+    text,
+    orientation = "horizontal",
+    size,
+    weight = "medium",
+    ...rest
+  }, ref) {
+    const computedSizing = useResponsiveMapping(size, SeparatorSizeMapping);
+    const severityColor = useSeverityColor(severity);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      themes.Flex,
+      {
+        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__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest }),
+          text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { className: styles$5.Text, as: "span", size: "1", weight: textWeight, color: severityColor, children: text }),
+            /* @__PURE__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest })
+          ] })
+        ]
+      }
+    );
+  });
+  const Separator$1 = React.memo(_Separator);
   const centerStyles = { placeSelf: "center" };
   const ErrorFallback = React.memo((props) => {
     const { absoluteCentering } = props;
@@ -3215,7 +2731,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "2", direction: "row", width: "100%", style: outerFlexStyles, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexGrow: 1 } }),
       /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiAlertLine", size: height, style: centerStyles }),
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { style: { lineHeight: height, ...centerStyles }, children: "Something went wrong" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text$1, { style: { lineHeight: height, ...centerStyles }, children: "Something went wrong" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         IconButton,
         {
@@ -3239,6 +2755,28 @@
     return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntime.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 = React.memo(
+    React.forwardRef((props, ref) => {
+      const { size, className, style, leftSlot, rightSlot, ...rest } = props;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        OvermapItem,
+        {
+          className,
+          style,
+          size,
+          leftSlot,
+          rightSlot,
+          compact: false,
+          children: /* @__PURE__ */ jsxRuntime.jsx("input", { className: styles$4.OvermapInputItem, ref, ...rest })
+        }
+      );
+    })
+  );
+  OvermapInputItem.displayName = "OvermapInputItem";
   const MenuContext = React.createContext({});
   const useMenuContext = () => React.useContext(MenuContext);
   const MENU_OVERFLOW_PADDING = 20;
@@ -3336,7 +2874,7 @@
           modal,
           setTriggerType
         },
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx(OvermapItemGroup, { size, children })
       }
     ) });
   });
@@ -3850,9 +3388,52 @@
   const Group = React.memo(
     React.forwardRef((props, ref) => {
       const { children } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(OvermapItemGroup, { ref, role: "group", children });
+      return /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { ref, role: "group", width: "100%", height: "max-content", children });
     })
   );
+  const SelectContext = React.createContext({});
+  function useSelectContext() {
+    return React.useContext(SelectContext);
+  }
+  const SelectContextProvider = React.memo((props) => {
+    const { type, children } = props;
+    const [controlledValue, setControlledValue] = React.useState(
+      type === "single" ? (props == null ? void 0 : props.defaultValue) ?? null : null
+    );
+    const [controlledValues, setControlledValues] = React.useState(
+      type === "multi" ? (props == null ? void 0 : props.defaultValues) ?? [] : []
+    );
+    const onValuesChange = React.useCallback(
+      (values) => {
+        setControlledValues(values);
+        if (type === "multi" && (props == null ? void 0 : props.onValuesChange))
+          props.onValuesChange(values);
+      },
+      [props, type]
+    );
+    const onValueChange = React.useCallback(
+      (value2) => {
+        setControlledValue(value2);
+        if (type === "single" && (props == null ? void 0 : props.onValueChange))
+          props.onValueChange(value2);
+      },
+      [props, type]
+    );
+    const value = React.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__ */ jsxRuntime.jsx(SelectContext.Provider, { value, children });
+  });
+  SelectContextProvider.displayName = "SelectContextProvider";
   const SelectGroup = React.memo(
     React.forwardRef((props, ref) => {
       const { children, value, onValueChange } = props;
@@ -3990,7 +3571,7 @@
             [styles$3.paddingTop]: spacingAbove,
             [styles$3.paddingBottom]: spacingBelow
           }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(Separator$2, { ref, size: "4", weight: "light", ...rest })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { ref, size: "4", weight: "light", ...rest })
         }
       );
     })
@@ -5090,8 +4671,8 @@
     }, [rowsPerPage, rows.length, numRowsPerPage, pagination, showPageNavigation]);
     return /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: classNames({ [styles$1.outerTableContainer]: showContainer }), direction: "column", height: "100%", children: [
       (!!title || !!description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$1.headerContainer, children: [
-        !!title && /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "bold", size: "5", children: title }),
-        !!description && /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "div", children: description })
+        !!title && /* @__PURE__ */ jsxRuntime.jsx(Text$1, { weight: "bold", size: "5", children: title }),
+        !!description && /* @__PURE__ */ jsxRuntime.jsx(Text$1, { as: "div", children: description })
       ] }),
       showTopBar && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { justify: "between", gap: "2", className: styles$1.tableTopContainer, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { gap: "2", children: [
@@ -5206,7 +4787,7 @@
       ) }),
       showBottomBar && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.tableBottomContainer, wrap: "wrap", direction: reactDeviceDetect.isMobile ? "column" : "row", children: [
         showRowsPerPage && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.rowsPerPageContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text$1, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Select,
             {
@@ -5221,7 +4802,7 @@
             }
           )
         ] }),
-        showPageNumber && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { className: styles$1.pageText, size: "2", children: totalPages > 0 && `Page ${pagination.state.page + 1} of ${totalPages}` }) }),
+        showPageNumber && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Text$1, { className: styles$1.pageText, size: "2", children: totalPages > 0 && `Page ${pagination.state.page + 1} of ${totalPages}` }) }),
         showPageNavigation && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.rowsPerPageContainer, gap: "2", justify: "end", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             IconButton,
@@ -5451,10 +5032,6 @@
   exports2.ConfirmEditInput = ConfirmEditInput;
   exports2.DefaultTheme = DefaultTheme;
   exports2.Dialog = Dialog$1;
-  exports2.DialogCommandMenu = DialogCommandMenu;
-  exports2.DialogMenu = DialogMenu;
-  exports2.DialogMultiSelectMenu = DialogMultiSelectMenu;
-  exports2.DialogSelectMenu = DialogSelectMenu;
   exports2.DownloadButtonUtility = DownloadButtonUtility;
   exports2.Flex = Flex;
   exports2.HoverUtility = HoverUtility;
@@ -5480,14 +5057,14 @@
   exports2.RiIcon = RiIcon;
   exports2.Select = Select;
   exports2.SelectAllCheckbox = SelectAllCheckbox;
-  exports2.Separator = Separator$2;
+  exports2.Separator = Separator$1;
   exports2.Sidebar = Sidebar;
   exports2.SlideOutV2 = SlideOutV2;
   exports2.SlideOutV3 = SlideOutV3;
   exports2.Spinner = Spinner;
   exports2.Switch = Switch;
   exports2.Table = Table;
-  exports2.Text = Text;
+  exports2.Text = Text$1;
   exports2.TextArea = TextArea;
   exports2.Toast = Toast;
   exports2.ToastContext = ToastContext;