@overmap-ai/blocks 1.0.27 → 1.0.28

package/dist/blocks.js

@@ -1,24 +1,31 @@
 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$1, AlertDialog as AlertDialog$1, Kbd, ContextMenu as ContextMenu$1, DropdownMenu as DropdownMenu$1, 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, Theme, Separator as Separator$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$1, AlertDialog as AlertDialog$1, Theme, Grid, Separator as Separator$2, ScrollArea, Kbd, ContextMenu as ContextMenu$1, DropdownMenu as DropdownMenu$1, 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 { Theme as Theme2, updateThemeAppearanceClass, useThemeContext as useThemeContext2 } from "@radix-ui/themes";
-import React, { useMemo, useState, useLayoutEffect, useCallback, useEffect, Children, isValidElement, forwardRef, memo, createContext, useContext, cloneElement, createElement, useRef, useReducer } from "react";
+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 { Cross1Icon, MagnifyingGlassIcon, CheckIcon, DragHandleDots2Icon, Cross2Icon, DividerHorizontalIcon, CaretSortIcon, ArrowUpIcon, ArrowDownIcon, MixerHorizontalIcon, Pencil1Icon, TrashIcon, DoubleArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, DoubleArrowRightIcon } from "@radix-ui/react-icons";
+import useResizeObserver from "@react-hook/resize-observer";
+import * as RiIcons from "react-icons/ri";
+import * as RadixDialogPrimitive from "@radix-ui/react-dialog";
+import * as RadixPrimitiveCollapsible from "@radix-ui/react-collapsible";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
+import { Slot } from "@radix-ui/react-slot";
 import { isMobile } from "react-device-detect";
-import * as RadixDialogPrimitive from "@radix-ui/react-dialog";
 import { Resizable } from "re-resizable";
 import { CSSTransition, Transition } from "react-transition-group";
 import ReactDOM, { flushSync } from "react-dom";
-import { Slot } from "@radix-ui/react-slot";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
-import { Root as Root$3, Item as Item$1 } from "@radix-ui/react-toggle-group";
-import { Root as Root$4 } from "@radix-ui/react-toolbar";
+import { Root as Root$4, Item as Item$2 } from "@radix-ui/react-toggle-group";
+import { Root as Root$5 } 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";
 import { useErrorBoundary, ErrorBoundary } from "react-error-boundary";
-import FeatherIcon from "feather-icons-react";
+import { HeaderCell, Table as Table$1, Header, HeaderRow, Body, Cell, Row } from "@table-library/react-table-library/table.js";
+import { useTheme } from "@table-library/react-table-library/theme.js";
+import { useSort, HeaderCellSort } from "@table-library/react-table-library/sort.js";
+import { useRowSelect, SelectTypes, SelectClickTypes, HeaderCellSelect, CellSelect } from "@table-library/react-table-library/select.js";
+import { usePagination } from "@table-library/react-table-library/pagination.js";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -92,11 +99,11 @@ const nonThemeSeverityMapping = {
   info: "gray"
 };
 const useSeverityColor = (severity) => {
-  const theme2 = useThemeContext();
+  const theme = useThemeContext();
   if (!severity)
     return void 0;
   if (severity === "primary")
-    return theme2.accentColor;
+    return theme.accentColor;
   return nonThemeSeverityMapping[severity];
 };
 const useViewportSize = () => {
@@ -186,12 +193,39 @@ function useTextFilter(values, filterFunction) {
   }, [filterFunction, filterValue, values]);
   return [filteredOptions, filterValue, setFilterValue];
 }
+const useSize = (target) => {
+  const [size, setSize] = useState();
+  useLayoutEffect(() => {
+    var _a;
+    setSize((_a = target.current) == null ? void 0 : _a.getBoundingClientRect());
+  }, [target]);
+  const handleResize = useCallback((entry) => {
+    const rect = entry.contentRect;
+    setSize(rect);
+  }, []);
+  useResizeObserver(target, handleResize);
+  return size;
+};
 const splitTextForEllipsisAndExpansion = (text, numChars) => {
   const indexOfSpace = text.indexOf(" ", numChars);
   const firstLine = indexOfSpace === -1 ? text : text.substring(0, indexOfSpace);
   const secondLine = indexOfSpace === -1 ? "" : text.substring(indexOfSpace);
   return [firstLine, secondLine];
 };
+const genericMemo = memo;
+function useOvermapResponsiveValue(value) {
+  const { size } = useViewportSize();
+  if (value === null || value === void 0)
+    return value;
+  if (typeof value === "object") {
+    if (!("initial" in value)) {
+      throw new Error("Expected initial property to be set in Responsive object");
+    } else {
+      return value[size];
+    }
+  }
+  return value;
+}
 const _Badge = forwardRef(function Badge2({ className, severity = "primary", color, children, ...rest }, ref) {
   const severityColor = useSeverityColor(severity);
   return /* @__PURE__ */ jsx(
@@ -209,7 +243,7 @@ const Badge = memo(_Badge);
 const zeroMinWidth = "_zeroMinWidth_curjh_1";
 const zeroMinHeight = "_zeroMinHeight_curjh_5";
 const radius = "_radius_curjh_9";
-const styles$n = {
+const styles$t = {
   zeroMinWidth,
   zeroMinHeight,
   radius
@@ -221,9 +255,9 @@ const Flex = memo(
         Flex$1,
         {
           className: classNames(className, {
-            [styles$n.radius]: radius2,
-            [styles$n.zeroMinWidth]: zeroMinWidth2,
-            [styles$n.zeroMinHeight]: zeroMinHeight2
+            [styles$t.radius]: radius2,
+            [styles$t.zeroMinWidth]: zeroMinWidth2,
+            [styles$t.zeroMinHeight]: zeroMinHeight2
           }),
           ref,
           ...rest,
@@ -235,14 +269,14 @@ const Flex = memo(
 );
 const BreadcrumbContext = createContext({});
 const useBreadcrumbContext = () => useContext(BreadcrumbContext);
-const Item = memo(
+const Item$1 = memo(
   forwardRef(({ className, children, ...rest }, ref) => {
     const { size, 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, color: severityColor, ...rest, children: /* @__PURE__ */ jsx(Flex, { height: "100%", width: "100%", align: "center", gap: "1", children }) }) });
   })
 );
-const Group = memo(
+const Group$1 = memo(
   forwardRef(
     ({ className, children, separator, severity = "info", size, gap = "2", ...rest }, ref) => {
       const severityColor = useSeverityColor(severity);
@@ -269,23 +303,23 @@ const Group = memo(
   )
 );
 const Breadcrumb = {
-  Group,
-  Item
+  Group: Group$1,
+  Item: Item$1
 };
 const fluid$1 = "_fluid_r73gr_1";
 const hoverSpin90Clockwise = "_hoverSpin90Clockwise_r73gr_15";
 const hoverSpin180Clockwise = "_hoverSpin180Clockwise_r73gr_25";
 const hoverSpin360Clockwise = "_hoverSpin360Clockwise_r73gr_35";
-const styles$m = {
+const styles$s = {
   fluid: fluid$1,
   hoverSpin90Clockwise,
   hoverSpin180Clockwise,
   hoverSpin360Clockwise
 };
 const hoverEffectClassNameMapping = {
-  spin90Clockwise: styles$m.hoverSpin90Clockwise,
-  spin180Clockwise: styles$m.hoverSpin180Clockwise,
-  spin360Clockwise: styles$m.hoverSpin360Clockwise
+  spin90Clockwise: styles$s.hoverSpin90Clockwise,
+  spin180Clockwise: styles$s.hoverSpin180Clockwise,
+  spin360Clockwise: styles$s.hoverSpin360Clockwise
 };
 const clickOnEnterOrSpace = (e) => {
   if (e.key === "Enter" || e.key === " ") {
@@ -302,16 +336,17 @@ const SizeMapping = {
   medium: "2",
   large: "3"
 };
+const DEFAULT_ICON_SIZE = "15px";
 const ButtonGroupContext = createContext({});
 const useButtonGroupContext = () => useContext(ButtonGroupContext);
-const spinner = "_spinner_isifr_9";
-const spin = "_spin_isifr_9";
-const styles$l = {
+const spinner = "_spinner_1oknc_9";
+const spin = "_spin_1oknc_9";
+const styles$r = {
   spinner,
   spin
 };
 const Spinner = memo(() => {
-  return /* @__PURE__ */ jsx("div", { className: styles$l.spinner });
+  return /* @__PURE__ */ jsx("div", { className: styles$r.spinner });
 });
 Spinner.displayName = "Spinner";
 const _Button$1 = forwardRef(function Button$1(props, ref) {
@@ -347,7 +382,7 @@ const _Button$1 = forwardRef(function Button$1(props, ref) {
       ref,
       type,
       className: classNames(className, hoverEffectClasses, {
-        [styles$m.fluid]: fluid2
+        [styles$s.fluid]: fluid2
       }),
       color,
       size: useResponsiveMapping(size, SizeMapping),
@@ -389,7 +424,7 @@ const _Button = forwardRef(function Button3(props, ref) {
     IconButton$1,
     {
       className: classNames(className, hoverEffectClasses, {
-        [styles$m.fluid]: fluid2
+        [styles$s.fluid]: fluid2
       }),
       ref,
       color,
@@ -404,7 +439,7 @@ const _Button = forwardRef(function Button3(props, ref) {
 });
 const IconButton = React.memo(_Button);
 const merged = "_merged_wdgxo_1";
-const styles$k = {
+const styles$q = {
   merged
 };
 const GhostVariantSizeToGapMapping = {
@@ -431,7 +466,7 @@ const _ButtonGroup = forwardRef(function ButtonGroup2({
     Flex$1,
     {
       className: classNames("overmap-button-group", className, {
-        [styles$k.merged]: merged2
+        [styles$q.merged]: merged2
       }),
       ref,
       gap: merged2 ? gap ?? mergedAutoGap : gap ?? "2",
@@ -444,7 +479,7 @@ const _ButtonGroup = forwardRef(function ButtonGroup2({
 });
 const ButtonGroup = memo(_ButtonGroup);
 const separators = "_separators_1f7v1_1";
-const styles$j = {
+const styles$p = {
   separators
 };
 const ButtonListBorder = memo(
@@ -475,7 +510,7 @@ const ButtonListRoot = memo(
         size,
         severity: "info",
         variant: buttonVariant,
-        className: classNames(className, styles$j.separators),
+        className: classNames(className, styles$p.separators),
         merged: true,
         gap: "0",
         direction: "column",
@@ -499,13 +534,22 @@ const ButtonList = {
   Root: ButtonListRoot,
   Item: ButtonListItem
 };
+const RiIcon = memo((props) => {
+  const { icon, size = 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, color, ...rest });
+});
+RiIcon.displayName = "IconComponent";
 const DialogContent = memo(function DialogContent2(props) {
   const { title, description, content, closeDialog } = props;
-  return /* @__PURE__ */ jsxs(Flex$1, { direction: "column", gap: "2", children: [
+  return /* @__PURE__ */ jsxs(Flex$1, { direction: "column", gap: "2", grow: "1", children: [
     /* @__PURE__ */ jsxs(Flex$1, { direction: "column", gap: "1", children: [
       /* @__PURE__ */ jsxs(Flex$1, { justify: "between", children: [
         /* @__PURE__ */ jsx(Dialog$1.Title, { mb: "0", children: title }),
-        /* @__PURE__ */ jsx(Dialog$1.Close, { children: /* @__PURE__ */ jsx(IconButton$1, { color: "gray", variant: "ghost", "aria-label": "Close", children: /* @__PURE__ */ jsx(Cross1Icon, {}) }) })
+        /* @__PURE__ */ jsx(Dialog$1.Close, { children: /* @__PURE__ */ jsx(IconButton$1, { color: "gray", variant: "ghost", "aria-label": "Close", children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiCloseLargeLine" }) }) })
       ] }),
       description && /* @__PURE__ */ jsx(Dialog$1.Description, { children: description })
     ] }),
@@ -657,6 +701,696 @@ const useDiscardAlertDialog = () => {
     [openAlertDialog]
   );
 };
+const BaseDialog = memo(
+  forwardRef((props, ref) => {
+    const {
+      children,
+      defaultOpen = false,
+      onInterruptClose,
+      content,
+      onClose,
+      open: controlledOpen,
+      onOpenChange: controlledOpenChange,
+      className,
+      style,
+      overlay: overlay2 = false,
+      overlayClass,
+      overlayStyle
+    } = props;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+    const open = useMemo(
+      () => controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen,
+      [controlledOpen, uncontrolledOpen]
+    );
+    const handleOpenChange = useCallback(
+      (nextOpen) => {
+        if (controlledOpenChange) {
+          controlledOpenChange(nextOpen);
+        } else if (!nextOpen && onInterruptClose) {
+          const closeInner = () => {
+            setUncontrolledOpen(false);
+            if (onClose)
+              onClose();
+          };
+          onInterruptClose(closeInner);
+        } else if (!nextOpen) {
+          setUncontrolledOpen(false);
+          if (onClose)
+            onClose();
+        } else {
+          setUncontrolledOpen(nextOpen);
+        }
+      },
+      [controlledOpenChange, onClose, onInterruptClose]
+    );
+    const close = useCallback(
+      (closeOptions) => {
+        if (closeOptions == null ? void 0 : closeOptions.force) {
+          setUncontrolledOpen(false);
+        } else {
+          handleOpenChange(false);
+        }
+      },
+      [handleOpenChange]
+    );
+    return /* @__PURE__ */ jsxs(RadixDialogPrimitive.Root, { open, onOpenChange: handleOpenChange, modal: overlay2, children: [
+      children !== void 0 && /* @__PURE__ */ jsx(RadixDialogPrimitive.Trigger, { children }),
+      /* @__PURE__ */ jsx(RadixDialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        overlay2 && /* @__PURE__ */ jsx(Theme, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialogPrimitive.Overlay, { className: overlayClass, style: overlayStyle }) }),
+        /* @__PURE__ */ jsx(Theme, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialogPrimitive.Content, { className, style, ref, children: content(close) }) })
+      ] }) })
+    ] });
+  })
+);
+const OverlayContent = "_OverlayContent_1nr9w_1";
+const OverlayOverlay = "_OverlayOverlay_1nr9w_6";
+const styles$o = {
+  OverlayContent,
+  OverlayOverlay
+};
+const Overlay$2 = memo(
+  forwardRef((props, ref) => {
+    const { className, overlayClass, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      BaseDialog,
+      {
+        ref,
+        overlayClass: classNames("overmap-overlay-overlay", styles$o.OverlayOverlay, overlayClass),
+        className: classNames("overmap-overlay-content", styles$o.OverlayContent, className),
+        ...rest
+      }
+    );
+  })
+);
+const OvermapItemSizeDependantProps = {
+  "1": {
+    gap: "1",
+    px: "1",
+    height: "5",
+    fontSize: "var(--font-size-2)"
+  },
+  "2": {
+    gap: "2",
+    px: "2",
+    height: "6",
+    fontSize: "var(--font-size-2)"
+  },
+  "3": {
+    gap: "2",
+    px: "3",
+    height: "7",
+    fontSize: "var(--font-size-3)"
+  },
+  "4": {
+    gap: "2",
+    px: "4",
+    height: "8",
+    fontSize: "var(--font-size-3)"
+  },
+  "5": {
+    gap: "3",
+    px: "5",
+    height: "9",
+    fontSize: "var(--font-size-4)"
+  }
+};
+const OvermapItemGroupContext = createContext({});
+const useOvermapItemGroupContext = () => useContext(OvermapItemGroupContext);
+const OvermapItemGroup = memo(
+  forwardRef(function(props, ref) {
+    const { size, compact = false, children, ...rest } = props;
+    return /* @__PURE__ */ jsx(OvermapItemGroupContext.Provider, { value: { size, compact }, children: /* @__PURE__ */ jsx(Grid, { ref, columns: "1", width: "100%", height: "max-content", ...rest, children }) });
+  })
+);
+const OvermapItem = memo(
+  forwardRef((props, ref) => {
+    const overmapItemGroupContext = useOvermapItemGroupContext();
+    const {
+      leftSlot,
+      compact = overmapItemGroupContext.compact,
+      rightSlot,
+      children,
+      size = overmapItemGroupContext.size,
+      style,
+      ...rest
+    } = props;
+    const computedSize = useOvermapResponsiveValue(size);
+    const { fontSize, ...restSizeProps } = OvermapItemSizeDependantProps[computedSize ?? "2"];
+    return /* @__PURE__ */ jsxs(
+      Flex$1,
+      {
+        ref,
+        align: "center",
+        shrink: "0",
+        style: { fontSize, ...style },
+        ...restSizeProps,
+        ...rest,
+        width: compact ? restSizeProps.height : void 0,
+        children: [
+          !compact && leftSlot && /* @__PURE__ */ jsx(Flex$1, { width: "max-content", height: "max-content", align: "center", children: leftSlot }),
+          /* @__PURE__ */ jsx(Flex$1, { height: "max-content", align: "center", grow: "1", justify: compact ? "center" : void 0, children }),
+          !compact && rightSlot && /* @__PURE__ */ jsx(Flex$1, { width: "max-content", height: "max-content", align: "center", children: rightSlot })
+        ]
+      }
+    );
+  })
+);
+const DialogMenuContext = createContext({});
+const useDialogMenuContext = () => useContext(DialogMenuContext);
+const DialogMenuItem = "_DialogMenuItem_1ojd2_1";
+const styles$n = {
+  DialogMenuItem
+};
+const Item = memo(
+  forwardRef((props, ref) => {
+    const dialogMenuContext = useDialogMenuContext();
+    const {
+      className,
+      children,
+      onSelect,
+      onClick,
+      closeOnSelect = dialogMenuContext.closeOnSelect,
+      size = 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$n.DialogMenuItem),
+        onClick: handleClick,
+        ref,
+        leftSlot,
+        rightSlot,
+        size,
+        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 = 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,
+      {
+        ref,
+        onSelect: handleSelect,
+        role: "menuitemradio",
+        rightSlot: /* @__PURE__ */ jsxs(Fragment, { children: [
+          currentValue === value && selectedIndicator,
+          " ",
+          rightSlot
+        ] }),
+        ...rest
+      }
+    );
+  })
+);
+const MultiSelectItem$1 = 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,
+      {
+        onSelect: handleSelect,
+        ref,
+        role: "menuitemcheckbox",
+        rightSlot: /* @__PURE__ */ jsxs(Fragment, { children: [
+          currentValues.includes(value) && selectedIndicator,
+          rightSlot
+        ] }),
+        ...rest
+      }
+    );
+  })
+);
+const SubTrigger = 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, { 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$m = {
+  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,
+  weight = "medium",
+  ...rest
+}, ref) {
+  const computedSizing = useResponsiveMapping(size, SeparatorSizeMapping);
+  const severityColor = useSeverityColor(severity);
+  return /* @__PURE__ */ jsxs(
+    Flex$1,
+    {
+      className: classNames("overmap-separator", className, {
+        [styles$m.light]: weight === "light",
+        [styles$m.bold]: weight === "bold",
+        [styles$m.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, orientation, color: severityColor, ...rest }),
+        text && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text$2, { className: styles$m.Text, as: "span", size: "1", weight: textWeight, color: severityColor, children: text }),
+          /* @__PURE__ */ jsx(Separator$2, { size, orientation, color: severityColor, ...rest })
+        ] })
+      ]
+    }
+  );
+});
+const Separator$1 = memo(_Separator);
+const Separator = memo(
+  forwardRef((props, ref) => {
+    return /* @__PURE__ */ jsx(Flex$1, { ref, py: "2", children: /* @__PURE__ */ jsx(Separator$1, { size: "4", weight: "light", ...props }) });
+  })
+);
+const DEFAULT_DIALOG_MENU_SIZE = "3";
+const DEFAULT_SELECTED_INDICATOR = /* @__PURE__ */ jsx(RiIcon, { icon: "RiCheckLine" });
+const Group = memo(
+  forwardRef((props, ref) => {
+    const dialogMenuContext = useDialogMenuContext();
+    const { size = dialogMenuContext.size, grid = false, children } = props;
+    const computedSize = useOvermapResponsiveValue(size);
+    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,
+        ref,
+        columns: grid ? computedColumns : void 0,
+        flow: "dense",
+        children
+      }
+    );
+  })
+);
+const SelectGroup = memo(
+  forwardRef((props, ref) => {
+    const { value, onValueChange, ...rest } = props;
+    return /* @__PURE__ */ jsx(SelectContextProvider, { type: "single", value, onValueChange, children: /* @__PURE__ */ jsx(Group, { ref, ...rest }) });
+  })
+);
+const MultiSelectGroup = memo(
+  forwardRef((props, ref) => {
+    const { values, onValuesChange, ...rest } = props;
+    return /* @__PURE__ */ jsx(SelectContextProvider, { type: "multi", values, onValuesChange, children: /* @__PURE__ */ jsx(Group, { ref, ...rest }) });
+  })
+);
+const OvermapInputItem$1 = "_OvermapInputItem_1jgzv_1";
+const styles$l = {
+  OvermapInputItem: OvermapInputItem$1
+};
+const OvermapInputItem = memo(
+  forwardRef((props, ref) => {
+    const { size, className, style, leftSlot, rightSlot, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      OvermapItem,
+      {
+        className,
+        style,
+        size,
+        leftSlot,
+        rightSlot,
+        compact: false,
+        children: /* @__PURE__ */ jsx("input", { className: styles$l.OvermapInputItem, ref, ...rest })
+      }
+    );
+  })
+);
+OvermapInputItem.displayName = "OvermapInputItem";
+const DialogContentScrollArea = "_DialogContentScrollArea_i3a60_1";
+const styles$k = {
+  DialogContentScrollArea
+};
+const ContentImpl = memo(
+  forwardRef((props, ref) => {
+    const { size } = 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, children: topSlot }),
+        filterValue !== void 0 && /* @__PURE__ */ jsx(
+          OvermapInputItem,
+          {
+            size,
+            leftSlot: leftFilterSlot,
+            rightSlot: rightFilterSlot,
+            value: filterValue,
+            onChange: handleChange,
+            placeholder
+          }
+        )
+      ] }),
+      (topSlot || filterValue !== void 0) && numberOfItems > 0 && /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx(ScrollArea, { className: styles$k.DialogContentScrollArea, scrollbars: "vertical", type: "hover", children: /* @__PURE__ */ jsx(Flex$1, { px: "2", children }) }),
+      bottomSlot && /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx(Flex$1, { direction: "column", width: "100%", px: "2", children: bottomSlot && /* @__PURE__ */ jsx(OvermapItem, { size, children: bottomSlot }) })
+    ] });
+  })
+);
+const Content = memo(
+  forwardRef((props, ref) => {
+    const { subContentId } = useDialogMenuContext();
+    return !subContentId && /* @__PURE__ */ jsx(ContentImpl, { ref, ...props });
+  })
+);
+const SubContent = 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, closeOnSelect, close, selectedIndicator, children } = props;
+  const [subContentId, setSubContentId] = useState(null);
+  const value = useMemo(
+    () => ({ size, close, closeOnSelect, subContentId, setSubContentId, selectedIndicator }),
+    [close, closeOnSelect, selectedIndicator, size, subContentId]
+  );
+  return /* @__PURE__ */ jsx(DialogMenuContext.Provider, { value, children });
+});
+DialogMenuContextProvider.displayName = "DialogMenuContextProvider";
+const DialogMenuWrapper = "_DialogMenuWrapper_16hy0_1";
+const DialogMenu$1 = "_DialogMenu_16hy0_1";
+const styles$j = {
+  DialogMenuWrapper,
+  DialogMenu: DialogMenu$1
+};
+const Root$3 = memo(
+  forwardRef((props, ref) => {
+    const {
+      className,
+      content: contentFromProps,
+      selectedIndicator = DEFAULT_SELECTED_INDICATOR,
+      size = DEFAULT_DIALOG_MENU_SIZE,
+      closeOnSelect = false,
+      ...rest
+    } = props;
+    const content = useCallback(
+      (close) => {
+        return /* @__PURE__ */ jsx(Flex$1, { className: classNames(styles$j.DialogMenu, className), children: /* @__PURE__ */ jsx(
+          DialogMenuContextProvider,
+          {
+            size,
+            close,
+            closeOnSelect,
+            selectedIndicator,
+            children: contentFromProps
+          }
+        ) });
+      },
+      [className, closeOnSelect, contentFromProps, selectedIndicator, size]
+    );
+    return /* @__PURE__ */ jsx(BaseDialog, { className: styles$j.DialogMenuWrapper, ref, content, ...rest });
+  })
+);
+const DialogCommandMenu = memo(
+  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__ */ jsx(
+      Root$3,
+      {
+        ref,
+        size,
+        content: /* @__PURE__ */ jsx(
+          Content,
+          {
+            filterValue,
+            onFilterValueChange,
+            placeholder,
+            leftFilterSlot,
+            rightFilterSlot,
+            numberOfItems: items.length,
+            topSlot,
+            bottomSlot,
+            children: /* @__PURE__ */ jsx(Group, { size, children: items.map((item, index) => /* @__PURE__ */ jsx(Item, { ...item }, index)) })
+          }
+        ),
+        closeOnSelect,
+        ...rest
+      }
+    );
+  })
+);
+const DialogSelectMenu = memo(
+  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__ */ jsx(
+      Root$3,
+      {
+        ref,
+        size,
+        content: /* @__PURE__ */ jsx(
+          Content,
+          {
+            filterValue,
+            onFilterValueChange,
+            placeholder,
+            leftFilterSlot,
+            rightFilterSlot,
+            numberOfItems: items.length,
+            topSlot,
+            bottomSlot,
+            children: /* @__PURE__ */ jsx(SelectGroup, { size, value, onValueChange, children: items.map((item, index) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                selectedIndicator,
+                ...item
+              },
+              `${item.value}-${index}`
+            )) })
+          }
+        ),
+        ...rest
+      }
+    );
+  })
+);
+const DialogMultiSelectMenu = memo(
+  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__ */ jsx(
+      Root$3,
+      {
+        ref,
+        size,
+        content: /* @__PURE__ */ jsx(
+          Content,
+          {
+            filterValue,
+            onFilterValueChange,
+            placeholder,
+            leftFilterSlot,
+            rightFilterSlot,
+            numberOfItems: items.length,
+            topSlot,
+            bottomSlot,
+            children: /* @__PURE__ */ jsx(MultiSelectGroup, { size, values, onValuesChange, children: items.map((item, index) => /* @__PURE__ */ jsx(
+              MultiSelectItem$1,
+              {
+                ...item,
+                selectedIndicator
+              },
+              `${item.value}-${index}`
+            )) })
+          }
+        ),
+        ...rest
+      }
+    );
+  })
+);
+const DialogMenu = {
+  Root: Root$3,
+  Item,
+  SelectItem,
+  MultiSelectItem: MultiSelectItem$1,
+  Separator,
+  Content,
+  Group,
+  SelectGroup,
+  MultiSelectGroup,
+  SubTrigger,
+  SubContent
+};
 const BaseMenuItem$1 = "_BaseMenuItem_5r3et_1";
 const RemoveOutline = "_RemoveOutline_5r3et_15";
 const BaseMenuSeparator$1 = "_BaseMenuSeparator_5r3et_19";
@@ -810,7 +1544,7 @@ const BaseSelectGroup = memo(function BaseSelectGroup2({
             onChange: textFilterChangeHandler(onFilterValueChange),
             placeholder,
             leftSlot: icons == null ? void 0 : icons.left,
-            rightSlot: (icons == null ? void 0 : icons.right) || /* @__PURE__ */ jsx(MagnifyingGlassIcon, {})
+            rightSlot: (icons == null ? void 0 : icons.right) || /* @__PURE__ */ jsx(RiIcon, { icon: "RiSearchLine" })
           }
         ),
         items.length !== 0 && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
@@ -828,7 +1562,7 @@ const BaseSelectGroup = memo(function BaseSelectGroup2({
           children: /* @__PURE__ */ jsx(
             BaseMenuItem,
             {
-              rightSlot: /* @__PURE__ */ jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsx(CheckIcon, {}) }),
+              rightSlot: /* @__PURE__ */ jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsx(RiIcon, { icon: "RiCheckLine" }) }),
               children: content
             }
           )
@@ -907,7 +1641,7 @@ const BaseMultiSelectGroup = memo(function BaseMultiSelectGroup2({
           children: /* @__PURE__ */ jsx(
             BaseMenuItem,
             {
-              rightSlot: /* @__PURE__ */ jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsx(CheckIcon, {}) }),
+              rightSlot: /* @__PURE__ */ jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsx(RiIcon, { icon: "RiCheckLine" }) }),
               children: content
             }
           )
@@ -935,6 +1669,123 @@ const BaseSubMenuGroup = memo(function BaseSubMenuGroup2({
     separator && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
   ] });
 });
+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);
+  const {
+    nodeRenderer,
+    disabled: disabledFromContext,
+    nodeGap,
+    onNodeOpen,
+    onNodeClose,
+    onNodeClick,
+    nodeStyles,
+    nodeClassName,
+    levelGap
+  } = useCollapsibleTreeContext();
+  const isDisabled = disabled2 ?? disabledFromContext;
+  const handleClick = useCallback(() => {
+    if (onNodeClick)
+      onNodeClick(meta);
+  }, [meta, onNodeClick]);
+  const toggleOpenState = useCallback(() => {
+    setControlledOpenState(!controlledOpenState);
+    if (!controlledOpenState && onNodeOpen)
+      onNodeOpen(meta);
+    if (controlledOpenState && onNodeClose)
+      onNodeClose(meta);
+  }, [meta, onNodeClose, onNodeOpen, controlledOpenState]);
+  const { children, leftSlot, rightSlot, style, className } = useMemo(() => {
+    return nodeRenderer({
+      meta,
+      toggleOpen: toggleOpenState,
+      open: controlledOpenState,
+      disabled: isDisabled
+    });
+  }, [isDisabled, meta, nodeRenderer, toggleOpenState, controlledOpenState]);
+  const combinedStyles = useMemo(
+    () => ({
+      // want node specific styles to overwrite and global node styles
+      ...nodeStyles,
+      ...style
+    }),
+    [nodeStyles, style]
+  );
+  return /* @__PURE__ */ jsx(RadixPrimitiveCollapsible.Root, { asChild: true, open: controlledOpenState, disabled: isDisabled, children: /* @__PURE__ */ jsxs(Flex$1, { width: "100%", direction: "column", children: [
+    /* @__PURE__ */ jsx(
+      OvermapItem,
+      {
+        onClick: handleClick,
+        disabled: disabled2 ?? disabledFromContext,
+        className: classNames(nodeClassName, className),
+        style: combinedStyles,
+        leftSlot,
+        rightSlot,
+        "data-state": controlledOpenState ? "open" : "closed",
+        "data-disabled": isDisabled,
+        children
+      }
+    ),
+    nodes && nodes.length > 0 && /* @__PURE__ */ jsx(RadixPrimitiveCollapsible.Content, { asChild: true, children: /* @__PURE__ */ jsx(
+      Flex$1,
+      {
+        width: "100%",
+        pl: levelGap,
+        height: "max-content",
+        direction: "column",
+        gap: nodeGap,
+        pt: nodeGap,
+        children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsx(
+          CollapsibleNode,
+          {
+            level: level + 1,
+            ...treeNodeProps
+          },
+          `${level},${index}`
+        ))
+      }
+    ) })
+  ] }) });
+});
+const CollapsibleTree = genericMemo(function(props) {
+  const {
+    nodes,
+    disabled: disabled2 = false,
+    nodeClassName,
+    nodeStyles,
+    size = "2",
+    nodeGap = "0",
+    levelGap = "2",
+    onNodeClick,
+    onNodeClose,
+    onNodeOpen,
+    nodeRenderer,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    CollapsibleTreeContext.Provider,
+    {
+      value: {
+        nodeRenderer,
+        nodeGap,
+        levelGap,
+        nodeClassName,
+        nodeStyles,
+        disabled: disabled2,
+        onNodeClick,
+        onNodeClose,
+        onNodeOpen
+      },
+      children: /* @__PURE__ */ jsx(OvermapItemGroup, { width: "100%", height: "max-content", size, ...rest, gapY: nodeGap, children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsx(CollapsibleNode, { ...treeNodeProps }, `${0},${index}`)) })
+    }
+  );
+});
 const ActionItemGroup = memo((props) => {
   return /* @__PURE__ */ jsx(BaseItemGroup, { ...props, groupElement: RadixContextMenu.Group, itemElement: RadixContextMenu.Item });
 });
@@ -977,11 +1828,20 @@ const SubItemGroup = memo((props) => {
 });
 SubItemGroup.displayName = "SubItemGroup";
 const Root$2 = memo((props) => {
-  const { disabled: disabled2 = false, children, modal = false, content, ...rest } = props;
+  const { disabled: disabled2 = false, children, modal = false, content, className, ...rest } = props;
   const infoColor = useSeverityColor("info");
   return /* @__PURE__ */ jsxs(ContextMenu$1.Root, { modal, children: [
     /* @__PURE__ */ jsx(ContextMenu$1.Trigger, { disabled: disabled2, children }),
-    /* @__PURE__ */ jsx(ContextMenu$1.Content, { variant: "soft", color: infoColor, ...rest, children: content })
+    /* @__PURE__ */ jsx(
+      ContextMenu$1.Content,
+      {
+        className: classNames("overmap-context-menu", className),
+        variant: "soft",
+        color: infoColor,
+        ...rest,
+        children: content
+      }
+    )
   ] });
 });
 Root$2.displayName = "ContextMenuRoot";
@@ -1215,6 +2075,20 @@ const DropdownMultiSelect = memo(
     }
   )
 );
+const DownloadButtonUtility = memo((props) => {
+  const { children, file } = props;
+  const anchorRef = useRef(null);
+  const objectURL = useMemo(() => URL.createObjectURL(file), [file]);
+  const handleClick = useCallback(() => {
+    if (anchorRef.current)
+      anchorRef.current.click();
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Slot, { onClick: handleClick, children }),
+    /* @__PURE__ */ jsx("a", { style: { display: "none" }, href: objectURL, target: "_blank", rel: "noreferrer", ref: anchorRef })
+  ] });
+});
+DownloadButtonUtility.displayName = "DownloadButtonUtility";
 const HoverUtility = memo(function Root({ children }) {
   const [isHovered, setIsHovered] = useState(isMobile);
   const handlePointerEnter = useCallback(() => {
@@ -1478,8 +2352,8 @@ const _Sidebar = forwardRef(function Sidebar2({
             enable: { right: resizable2 && isLeft, left: resizable2 && isRight },
             handleClasses: { left: styles$f.resizeHandle, right: styles$f.resizeHandle },
             handleComponent: {
-              right: /* @__PURE__ */ jsx(DragHandleDots2Icon, {}),
-              left: /* @__PURE__ */ jsx(DragHandleDots2Icon, {})
+              right: /* @__PURE__ */ jsx(RiIcon, { icon: "RiDraggable" }),
+              left: /* @__PURE__ */ jsx(RiIcon, { icon: "RiDraggable" })
             },
             children
           }
@@ -2403,7 +3277,7 @@ const LeftAndRightPanels = memo(function Panels({
                     maxWidth: leftPanelMaxWidth,
                     handleClasses: { right: classNames(styles$a.resizeHandle, styles$a.left) },
                     handleComponent: {
-                      right: /* @__PURE__ */ jsx(DragHandleDots2Icon, { height: "14px", width: "14px" })
+                      right: /* @__PURE__ */ jsx(RiIcon, { icon: "RiDraggable", height: "14px", width: "14px" })
                     },
                     children: leftPanel
                   }
@@ -2442,7 +3316,7 @@ const LeftAndRightPanels = memo(function Panels({
                     minWidth: rightMinWidth,
                     maxWidth: rightPanelMaxWidth,
                     handleClasses: { left: classNames(styles$a.resizeHandle, styles$a.right) },
-                    handleComponent: { left: /* @__PURE__ */ jsx(DragHandleDots2Icon, { height: "14px", width: "14px" }) },
+                    handleComponent: { left: /* @__PURE__ */ jsx(RiIcon, { icon: "RiDraggable", height: "14px", width: "14px" }) },
                     children: rightPanel
                   }
                 )
@@ -2590,7 +3464,7 @@ const _ToggleGroup = forwardRef(function ToggleGroup2({
   ...rest
 }, ref) {
   return /* @__PURE__ */ jsx(
-    Root$3,
+    Root$4,
     {
       type,
       className: classNames("overmap-toggle-group", className),
@@ -2603,7 +3477,7 @@ const _ToggleGroup = forwardRef(function ToggleGroup2({
       rovingFocus,
       defaultValue,
       asChild: true,
-      children: /* @__PURE__ */ jsx(ButtonGroup, { direction, ...rest, children: items.map(({ children, ...rest2 }) => /* @__PURE__ */ createElement(Item$1, { asChild: true, ...rest2, key: rest2.value }, /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(ButtonGroup, { direction, ...rest, children: items.map(({ children, ...rest2 }) => /* @__PURE__ */ createElement(Item$2, { asChild: true, ...rest2, key: rest2.value }, /* @__PURE__ */ jsx(
         IconButton,
         {
           className: classNames("overmap-toggle-group-button"),
@@ -2622,7 +3496,7 @@ const styles$7 = {
 const Root2 = memo(
   forwardRef(({ className, minContentGap = "2", children, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(
-      Root$4,
+      Root$5,
       {
         className: classNames(className, "overmap-toolbar", styles$7.default),
         ref,
@@ -2694,7 +3568,7 @@ const _Toast = forwardRef(function Toast2({ title, description, icon, severity =
         action && /* @__PURE__ */ jsx(RadixToast.Action, { className: styles$6.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(Cross2Icon, {}) }) })
+    /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "Close", variant: "ghost", severity, children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiCloseLine" }) }) })
   ] }) }) });
 });
 const Toast = memo(_Toast);
@@ -2788,11 +3662,34 @@ const Tooltip = memo(
     );
   })
 );
-const noWrap = "_noWrap_1wpa5_1";
+const ToggleButton$1 = "_ToggleButton_13aus_1";
 const styles$4 = {
+  ToggleButton: ToggleButton$1
+};
+const ToggleButton = memo(
+  forwardRef((props, ref) => {
+    const { children, className, severity, fluid: fluid2, variant = "solid", size, hoverEffects, ...rest } = props;
+    return /* @__PURE__ */ jsx(Toggle.Root, { ref, asChild: true, ...rest, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: classNames(className, styles$4.ToggleButton),
+        "aria-label": props["aria-label"],
+        severity,
+        fluid: fluid2,
+        variant,
+        hoverEffects,
+        size,
+        "data-variant": variant,
+        children
+      }
+    ) });
+  })
+);
+const noWrap = "_noWrap_1wpa5_1";
+const styles$3 = {
   noWrap
 };
-const Text$1 = memo(
+const Text = memo(
   forwardRef(({ className, noWrap: noWrap2, severity, as, ...props }, ref) => {
     const color = useSeverityColor(severity);
     return /* @__PURE__ */ jsx(
@@ -2800,7 +3697,7 @@ const Text$1 = memo(
       {
         ref,
         as,
-        className: classNames(className, { [styles$4.noWrap]: noWrap2 }),
+        className: classNames(className, { [styles$3.noWrap]: noWrap2 }),
         color,
         ...props
       }
@@ -2814,60 +3711,6 @@ 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$3 = {
-  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,
-  weight = "medium",
-  ...rest
-}, ref) {
-  const computedSizing = useResponsiveMapping(size, SeparatorSizeMapping);
-  const severityColor = useSeverityColor(severity);
-  return /* @__PURE__ */ jsxs(
-    Flex$1,
-    {
-      className: classNames("overmap-separator", className, {
-        [styles$3.light]: weight === "light",
-        [styles$3.bold]: weight === "bold",
-        [styles$3.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$1, { size, orientation, color: severityColor, ...rest }),
-        text && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Text$2, { className: styles$3.Text, as: "span", size: "1", weight: textWeight, color: severityColor, children: text }),
-          /* @__PURE__ */ jsx(Separator$1, { size, orientation, color: severityColor, ...rest })
-        ] })
-      ]
-    }
-  );
-});
-const Separator = memo(_Separator);
 const centerStyles = { placeSelf: "center" };
 const ErrorFallback = memo((props) => {
   const { absoluteCentering } = props;
@@ -2876,8 +3719,8 @@ const ErrorFallback = memo((props) => {
   const outerFlexStyles = absoluteCentering ? { position: "absolute", top: "50%", transform: "translateY(-50%)" } : void 0;
   return /* @__PURE__ */ jsxs(Flex, { gap: "2", direction: "row", width: "100%", style: outerFlexStyles, children: [
     /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
-    /* @__PURE__ */ jsx(FeatherIcon, { icon: "alert-triangle", size: height, style: centerStyles }),
-    /* @__PURE__ */ jsx(Text$1, { style: { lineHeight: height, ...centerStyles }, children: "Something went wrong" }),
+    /* @__PURE__ */ jsx(RiIcon, { icon: "RiAlertLine", size: height, style: centerStyles }),
+    /* @__PURE__ */ jsx(Text, { style: { lineHeight: height, ...centerStyles }, children: "Something went wrong" }),
     /* @__PURE__ */ jsx(
       IconButton,
       {
@@ -2886,7 +3729,7 @@ const ErrorFallback = memo((props) => {
         onClick: resetBoundary,
         style: centerStyles,
         hoverEffects: ["spin180Clockwise"],
-        children: /* @__PURE__ */ jsx(FeatherIcon, { icon: "refresh-ccw", size: height })
+        children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiLoopLeftLine", size: height })
       }
     ),
     /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } })
@@ -3467,7 +4310,7 @@ const _Checkbox = forwardRef(function Checkbox2({
         },
         ref,
         ...rest,
-        children: /* @__PURE__ */ jsx($e698a72e93240346$export$adb584737d712b70, { className: styles$2.checkboxIndicator, children: checked === "indeterminate" ? /* @__PURE__ */ jsx(DividerHorizontalIcon, { width: "13px" }) : /* @__PURE__ */ jsx(CheckIcon, {}) })
+        children: /* @__PURE__ */ jsx($e698a72e93240346$export$adb584737d712b70, { className: styles$2.checkboxIndicator, children: checked === "indeterminate" ? /* @__PURE__ */ jsx(RiIcon, { icon: "RiSubtractLine" }) : /* @__PURE__ */ jsx(RiIcon, { icon: "RiCheckLine" }) })
       }
     ),
     label && /* @__PURE__ */ jsx(
@@ -3557,7 +4400,7 @@ const tableTopContainer = "_tableTopContainer_5i91d_21";
 const tableContainer = "_tableContainer_5i91d_25";
 const searchContainer = "_searchContainer_5i91d_30";
 const columnFilterSelect = "_columnFilterSelect_5i91d_40";
-const table$1 = "_table_5i91d_21";
+const table = "_table_5i91d_21";
 const tableHeaderCell = "_tableHeaderCell_5i91d_58";
 const showSortIcon = "_showSortIcon_5i91d_74";
 const tableRow = "_tableRow_5i91d_78";
@@ -3576,7 +4419,7 @@ const styles$1 = {
   tableContainer,
   searchContainer,
   columnFilterSelect,
-  table: table$1,
+  table,
   tableHeaderCell,
   showSortIcon,
   tableRow,
@@ -3588,16 +4431,6 @@ const styles$1 = {
   pageText,
   descriptionSecondLine
 };
-const table = import("@overmap-ai/react-table-library/table.js");
-const { Body, Cell, Header, HeaderCell, HeaderRow, Row, Table: ReactLibraryTable } = table;
-const theme = import("@overmap-ai/react-table-library/theme.js");
-const { useTheme } = theme;
-const sort = import("@overmap-ai/react-table-library/sort.js");
-const { HeaderCellSort, useSort } = sort;
-const select = import("@overmap-ai/react-table-library/select.js");
-const { CellSelect, HeaderCellSelect, SelectClickTypes, SelectTypes, useRowSelect } = select;
-const pagination = import("@overmap-ai/react-table-library/pagination.js");
-const { usePagination } = pagination;
 const _Table = forwardRef(function Table2(props, ref) {
   var _a;
   const {
@@ -3621,6 +4454,7 @@ const _Table = forwardRef(function Table2(props, ref) {
     emptyMessage = "There is no data",
     topBarComponents,
     children,
+    containerClassName,
     className,
     columnClassName,
     rowClassName,
@@ -3760,7 +4594,7 @@ const _Table = forwardRef(function Table2(props, ref) {
       isCarryForward: false
     }
   );
-  const pagination2 = usePagination(
+  const pagination = usePagination(
     tableData,
     {
       state: {
@@ -3772,7 +4606,7 @@ const _Table = forwardRef(function Table2(props, ref) {
       isServer: false
     }
   );
-  const sort2 = useSort(
+  const sort = useSort(
     tableData,
     {
       onChange: (_action, state) => {
@@ -3783,9 +4617,9 @@ const _Table = forwardRef(function Table2(props, ref) {
       sortIcon: {
         margin: "10px",
         size: "15px",
-        iconDefault: /* @__PURE__ */ jsx(CaretSortIcon, { width: "20px" }),
-        iconUp: /* @__PURE__ */ jsx(ArrowUpIcon, {}),
-        iconDown: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+        iconDefault: /* @__PURE__ */ jsx(RiIcon, { icon: "RiExpandUpDownLine" }),
+        iconUp: /* @__PURE__ */ jsx(RiIcon, { icon: "RiArrowUpLine" }),
+        iconDown: /* @__PURE__ */ jsx(RiIcon, { icon: "RiArrowUpLine" })
       },
       sortFns: Object.assign(
         {},
@@ -3889,7 +4723,7 @@ const _Table = forwardRef(function Table2(props, ref) {
   });
   const SelectedModeButton = isMobile ? IconButton : Button2;
   const layout = useMemo(() => ({ custom: true, ...fixHeader && { fixedHeader: true } }), [fixHeader]);
-  const theme2 = useTheme({
+  const theme = useTheme({
     Table: `
 			 --data-table-library_grid-template-columns: ${gridTemplateColumns} !important;
 		`,
@@ -3912,18 +4746,18 @@ const _Table = forwardRef(function Table2(props, ref) {
     if (showPageNavigation) {
       const numTotalPages = Math.ceil(rows.length / numRowsPerPage);
       setTotalPages(numTotalPages);
-      if (pagination2.state.page < 0) {
-        pagination2.fns.onSetPage(0);
+      if (pagination.state.page < 0) {
+        pagination.fns.onSetPage(0);
       }
-      if (pagination2.state.page > numTotalPages - 1) {
-        pagination2.fns.onSetPage(numTotalPages - 1);
+      if (pagination.state.page > numTotalPages - 1) {
+        pagination.fns.onSetPage(numTotalPages - 1);
       }
     }
-  }, [rowsPerPage, rows.length, numRowsPerPage, pagination2, showPageNavigation]);
+  }, [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$1, { weight: "bold", size: "5", children: title }),
-      !!description && /* @__PURE__ */ jsx(Text$1, { as: "div", children: description })
+      !!title && /* @__PURE__ */ jsx(Text, { weight: "bold", size: "5", children: title }),
+      !!description && /* @__PURE__ */ jsx(Text, { 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: [
@@ -3932,7 +4766,7 @@ const _Table = forwardRef(function Table2(props, ref) {
           {
             value: search,
             onChange: handleSearch,
-            leftSlot: /* @__PURE__ */ jsx(MagnifyingGlassIcon, {}),
+            leftSlot: /* @__PURE__ */ jsx(RiIcon, { icon: "RiSearchLine" }),
             placeholder: searchBarPlaceholder || "Filter tasks..."
           }
         ) }) }),
@@ -3941,7 +4775,7 @@ const _Table = forwardRef(function Table2(props, ref) {
           {
             color,
             page: columnFilterPopoverContent,
-            trigger: /* @__PURE__ */ jsx(IconButton, { variant: "surface", "aria-label": "Filter columns", children: /* @__PURE__ */ jsx(MixerHorizontalIcon, {}) }),
+            trigger: /* @__PURE__ */ jsx(IconButton, { variant: "surface", "aria-label": "Filter columns", children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiEqualizerLine" }) }),
             children: (_Close) => ""
           }
         ),
@@ -3952,34 +4786,34 @@ const _Table = forwardRef(function Table2(props, ref) {
             color: "crimson",
             onClick: () => {
               setColumnFilterValues(defaultColumnFilterValues);
-              pagination2.fns.onSetPage(0);
+              pagination.fns.onSetPage(0);
             },
             "aria-label": "Clear filters",
-            children: /* @__PURE__ */ jsx(Cross2Icon, {})
+            children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiCloseLine" })
           }
         )
       ] }),
       topBarComponents,
       showSelect && selected.length !== 0 && /* @__PURE__ */ jsxs(Flex$1, { gap: "2", children: [
         /* @__PURE__ */ jsxs(SelectedModeButton, { variant: "soft", "aria-label": "Edit rows", children: [
-          /* @__PURE__ */ jsx(Pencil1Icon, {}),
+          /* @__PURE__ */ jsx(RiIcon, { icon: "RiPencilLine" }),
           !isMobile && "Edit"
         ] }),
         /* @__PURE__ */ jsxs(SelectedModeButton, { color: "red", "aria-label": "Delete rows", children: [
-          /* @__PURE__ */ jsx(TrashIcon, {}),
+          /* @__PURE__ */ jsx(RiIcon, { icon: "RiDeleteBin2Line" }),
           !isMobile && "Delete"
         ] })
       ] })
     ] }),
     children,
-    /* @__PURE__ */ jsx("div", { className: styles$1.tableContainer, children: /* @__PURE__ */ jsx(
-      ReactLibraryTable,
+    /* @__PURE__ */ jsx("div", { className: classNames(styles$1.tableContainer, containerClassName), children: /* @__PURE__ */ jsx(
+      Table$1,
       {
         className: classNames(styles$1.table, className),
         data: tableData,
-        theme: theme2,
-        sort: sort2,
-        pagination: showPageNavigation && pagination2,
+        theme,
+        sort,
+        pagination: showPageNavigation && pagination,
         select: tableSelect,
         layout,
         ref,
@@ -4038,14 +4872,14 @@ 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$1, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
+        /* @__PURE__ */ jsx(Text, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
         /* @__PURE__ */ jsx(
           Select,
           {
             items: rowsPerPageOptions,
             defaultValue: (_a = rowsPerPageOptions.find((rowPerPage) => rowPerPage.value === defaultRowsPerPage.toString())) == null ? void 0 : _a.value.toString(),
             onValueChange: (v) => {
-              pagination2.fns.onSetSize(Number(v));
+              pagination.fns.onSetSize(Number(v));
               setNumRowsPerPage(Number(v));
             },
             placeholder: rowsPerPageOptions[0].itemContent,
@@ -4053,46 +4887,46 @@ const _Table = forwardRef(function Table2(props, ref) {
           }
         )
       ] }),
-      showPageNumber && /* @__PURE__ */ jsx(Flex$1, { justify: "center", children: /* @__PURE__ */ jsx(Text$1, { className: styles$1.pageText, size: "2", children: totalPages > 0 && `Page ${pagination2.state.page + 1} of ${totalPages}` }) }),
+      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}` }) }),
       showPageNavigation && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.rowsPerPageContainer, gap: "2", justify: "end", children: [
         /* @__PURE__ */ jsx(
           IconButton,
           {
             variant: "surface",
-            onClick: () => pagination2.fns.onSetPage(0),
-            disabled: pagination2.state.page === 0 || totalPages === 0,
+            onClick: () => pagination.fns.onSetPage(0),
+            disabled: pagination.state.page === 0 || totalPages === 0,
             "aria-label": "Go to first page",
-            children: /* @__PURE__ */ jsx(DoubleArrowLeftIcon, {})
+            children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiArrowLeftDoubleLine" })
           }
         ),
         /* @__PURE__ */ jsx(
           IconButton,
           {
             variant: "surface",
-            disabled: pagination2.state.page === 0 || totalPages === 0,
-            onClick: () => pagination2.fns.onSetPage(pagination2.state.page - 1),
+            disabled: pagination.state.page === 0 || totalPages === 0,
+            onClick: () => pagination.fns.onSetPage(pagination.state.page - 1),
             "aria-label": "Previous page",
-            children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+            children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiArrowLeftSLine" })
           }
         ),
         /* @__PURE__ */ jsx(
           IconButton,
           {
             variant: "surface",
-            disabled: pagination2.state.page + 1 === totalPages || totalPages === 0,
-            onClick: () => pagination2.fns.onSetPage(pagination2.state.page + 1),
+            disabled: pagination.state.page + 1 === totalPages || totalPages === 0,
+            onClick: () => pagination.fns.onSetPage(pagination.state.page + 1),
             "aria-label": "Next page",
-            children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+            children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiArrowRightSLine" })
           }
         ),
         /* @__PURE__ */ jsx(
           IconButton,
           {
             variant: "surface",
-            disabled: pagination2.state.page + 1 === totalPages || totalPages === 0,
-            onClick: () => pagination2.fns.onSetPage(totalPages - 1),
+            disabled: pagination.state.page + 1 === totalPages || totalPages === 0,
+            onClick: () => pagination.fns.onSetPage(totalPages - 1),
             "aria-label": "Go to last page",
-            children: /* @__PURE__ */ jsx(DoubleArrowRightIcon, {})
+            children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiArrowRightDoubleLine" })
           }
         )
       ] })
@@ -4218,7 +5052,7 @@ const _ConfirmEditInput = forwardRef(function ConfirmEditInput2({
           disabled: isConfirmDisabled,
           onClick: onCheckClick,
           "aria-label": "Confirm edit",
-          children: /* @__PURE__ */ jsx(CheckIcon, {})
+          children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiCheckLine" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -4235,7 +5069,7 @@ const _ConfirmEditInput = forwardRef(function ConfirmEditInput2({
           severity,
           onClick: onCancelClick,
           "aria-label": "Cancel edit",
-          children: /* @__PURE__ */ jsx(Cross1Icon, {})
+          children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiCloseLargeLine" })
         }
       )
     ] }) : /* @__PURE__ */ jsx(
@@ -4252,7 +5086,7 @@ const _ConfirmEditInput = forwardRef(function ConfirmEditInput2({
         severity,
         onClick: onPencilClick,
         "aria-label": "Edit text",
-        children: /* @__PURE__ */ jsx(Pencil1Icon, {})
+        children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiPencilLine" })
       }
     ))
   ] }) });
@@ -4272,6 +5106,7 @@ export {
   ButtonGroup,
   ButtonList,
   Checkbox,
+  CollapsibleTree,
   ConfirmEditInput,
   ContextActionMenu,
   ContextMenu,
@@ -4279,6 +5114,11 @@ export {
   ContextSelectMenu,
   DefaultTheme,
   Dialog,
+  DialogCommandMenu,
+  DialogMenu,
+  DialogMultiSelectMenu,
+  DialogSelectMenu,
+  DownloadButtonUtility,
   DropdownItemMenu,
   DropdownMenu,
   DropdownMenuItemGroup,
@@ -4297,23 +5137,29 @@ export {
   LeftAndRightPanels,
   MultiPagePopover,
   MultiSelect,
+  Overlay$2 as Overlay,
   OvermapErrorBoundary,
+  OvermapInputItem,
+  OvermapItem,
+  OvermapItemGroup,
   Popover,
+  RiIcon,
   Select,
   SelectAllCheckbox,
-  Separator,
+  Separator$1 as Separator,
   Sidebar,
   SlideOutV2,
   SlideOutV3,
   Spinner,
   Switch,
   Table,
-  Text$1 as Text,
+  Text,
   TextArea,
   Theme2 as Theme,
   Toast,
   ToastContext,
   ToastProvider,
+  ToggleButton,
   ToggleGroup,
   Toolbar,
   Tooltip,
@@ -4325,7 +5171,9 @@ export {
   useDiscardAlertDialog,
   useKeyboardShortcut,
   useLayoutContext,
+  useOvermapItemGroupContext,
   useSeverityColor,
+  useSize,
   useStopEventPropagation,
   useTextFilter,
   useThemeContext2 as useThemeContext,