@overmap-ai/blocks 1.0.27 → 1.0.28

package/dist/blocks.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@radix-ui/themes"), require("react"), require("react-responsive"), require("@radix-ui/react-icons"), require("@radix-ui/react-context-menu"), require("@radix-ui/react-dropdown-menu"), require("react-device-detect"), require("@radix-ui/react-dialog"), require("re-resizable"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-slot"), require("@radix-ui/react-dismissable-layer"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("react-error-boundary"), require("feather-icons-react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@radix-ui/themes", "react", "react-responsive", "@radix-ui/react-icons", "@radix-ui/react-context-menu", "@radix-ui/react-dropdown-menu", "react-device-detect", "@radix-ui/react-dialog", "re-resizable", "react-transition-group", "react-dom", "@radix-ui/react-slot", "@radix-ui/react-dismissable-layer", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "react-error-boundary", "feather-icons-react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.jsxRuntime, global.themes, global.React, global.reactResponsive, global.reactIcons, global.RadixContextMenu, global.RadixDropdownMenu, global.reactDeviceDetect, global.RadixDialogPrimitive, global.reResizable, global.reactTransitionGroup, global.ReactDOM, global.reactSlot, global.reactDismissableLayer, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.reactErrorBoundary, global.FeatherIcon));
-})(this, function(exports2, jsxRuntime, themes, React, reactResponsive, reactIcons, RadixContextMenu, RadixDropdownMenu, reactDeviceDetect, RadixDialogPrimitive, reResizable, reactTransitionGroup, ReactDOM, reactSlot, reactDismissableLayer, reactToggleGroup, reactToolbar, RadixToast, reactErrorBoundary, FeatherIcon) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@radix-ui/themes"), require("react"), require("react-responsive"), require("@react-hook/resize-observer"), require("react-icons/ri"), require("@radix-ui/react-dialog"), require("@radix-ui/react-collapsible"), require("@radix-ui/react-context-menu"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-slot"), require("react-device-detect"), require("re-resizable"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-dismissable-layer"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("@radix-ui/react-toggle"), require("react-error-boundary"), require("@table-library/react-table-library/table.js"), require("@table-library/react-table-library/theme.js"), require("@table-library/react-table-library/sort.js"), require("@table-library/react-table-library/select.js"), require("@table-library/react-table-library/pagination.js")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@radix-ui/themes", "react", "react-responsive", "@react-hook/resize-observer", "react-icons/ri", "@radix-ui/react-dialog", "@radix-ui/react-collapsible", "@radix-ui/react-context-menu", "@radix-ui/react-dropdown-menu", "@radix-ui/react-slot", "react-device-detect", "re-resizable", "react-transition-group", "react-dom", "@radix-ui/react-dismissable-layer", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "@radix-ui/react-toggle", "react-error-boundary", "@table-library/react-table-library/table.js", "@table-library/react-table-library/theme.js", "@table-library/react-table-library/sort.js", "@table-library/react-table-library/select.js", "@table-library/react-table-library/pagination.js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.jsxRuntime, global.themes, global.React, global.reactResponsive, global.useResizeObserver, global.RiIcons, global.RadixDialogPrimitive, global.RadixPrimitiveCollapsible, global.RadixContextMenu, global.RadixDropdownMenu, global.reactSlot, global.reactDeviceDetect, global.reResizable, global.reactTransitionGroup, global.ReactDOM, global.reactDismissableLayer, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.Toggle, global.reactErrorBoundary, global.table_js, global.theme_js, global.sort_js, global.select_js, global.pagination_js));
+})(this, function(exports2, jsxRuntime, themes, React, reactResponsive, useResizeObserver, RiIcons, RadixDialogPrimitive, RadixPrimitiveCollapsible, RadixContextMenu, RadixDropdownMenu, reactSlot, reactDeviceDetect, reResizable, reactTransitionGroup, ReactDOM, reactDismissableLayer, reactToggleGroup, reactToolbar, RadixToast, Toggle, reactErrorBoundary, table_js, theme_js, sort_js, select_js, pagination_js) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -18,10 +18,13 @@
     n.default = e;
     return Object.freeze(n);
   }
+  const RiIcons__namespace = /* @__PURE__ */ _interopNamespaceDefault(RiIcons);
+  const RadixDialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixDialogPrimitive);
+  const RadixPrimitiveCollapsible__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixPrimitiveCollapsible);
   const RadixContextMenu__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixContextMenu);
   const RadixDropdownMenu__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixDropdownMenu);
-  const RadixDialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixDialogPrimitive);
   const RadixToast__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixToast);
+  const Toggle__namespace = /* @__PURE__ */ _interopNamespaceDefault(Toggle);
   function getDefaultExportFromCjs(x) {
     return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
   }
@@ -95,11 +98,11 @@
     info: "gray"
   };
   const useSeverityColor = (severity) => {
-    const theme2 = themes.useThemeContext();
+    const theme = themes.useThemeContext();
     if (!severity)
       return void 0;
     if (severity === "primary")
-      return theme2.accentColor;
+      return theme.accentColor;
     return nonThemeSeverityMapping[severity];
   };
   const useViewportSize = () => {
@@ -189,12 +192,39 @@
     }, [filterFunction, filterValue, values]);
     return [filteredOptions, filterValue, setFilterValue];
   }
+  const useSize = (target) => {
+    const [size, setSize] = React.useState();
+    React.useLayoutEffect(() => {
+      var _a;
+      setSize((_a = target.current) == null ? void 0 : _a.getBoundingClientRect());
+    }, [target]);
+    const handleResize = React.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 = React.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 = React.forwardRef(function Badge2({ className, severity = "primary", color, children, ...rest }, ref) {
     const severityColor = useSeverityColor(severity);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -212,7 +242,7 @@
   const zeroMinWidth = "_zeroMinWidth_curjh_1";
   const zeroMinHeight = "_zeroMinHeight_curjh_5";
   const radius = "_radius_curjh_9";
-  const styles$n = {
+  const styles$t = {
     zeroMinWidth,
     zeroMinHeight,
     radius
@@ -224,9 +254,9 @@
           themes.Flex,
           {
             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,
@@ -238,14 +268,14 @@
   );
   const BreadcrumbContext = React.createContext({});
   const useBreadcrumbContext = () => React.useContext(BreadcrumbContext);
-  const Item = React.memo(
+  const Item$1 = 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 = React.memo(
+  const Group$1 = React.memo(
     React.forwardRef(
       ({ className, children, separator, severity = "info", size, gap = "2", ...rest }, ref) => {
         const severityColor = useSeverityColor(severity);
@@ -272,23 +302,23 @@
     )
   );
   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 === " ") {
@@ -305,16 +335,17 @@
     medium: "2",
     large: "3"
   };
+  const DEFAULT_ICON_SIZE = "15px";
   const ButtonGroupContext = React.createContext({});
   const useButtonGroupContext = () => React.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 = React.memo(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$l.spinner });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$r.spinner });
   });
   Spinner.displayName = "Spinner";
   const _Button$1 = React.forwardRef(function Button(props, ref) {
@@ -350,7 +381,7 @@
         ref,
         type,
         className: classNames(className, hoverEffectClasses, {
-          [styles$m.fluid]: fluid2
+          [styles$s.fluid]: fluid2
         }),
         color,
         size: useResponsiveMapping(size, SizeMapping),
@@ -392,7 +423,7 @@
       themes.IconButton,
       {
         className: classNames(className, hoverEffectClasses, {
-          [styles$m.fluid]: fluid2
+          [styles$s.fluid]: fluid2
         }),
         ref,
         color,
@@ -407,7 +438,7 @@
   });
   const IconButton = React.memo(_Button);
   const merged = "_merged_wdgxo_1";
-  const styles$k = {
+  const styles$q = {
     merged
   };
   const GhostVariantSizeToGapMapping = {
@@ -434,7 +465,7 @@
       themes.Flex,
       {
         className: classNames("overmap-button-group", className, {
-          [styles$k.merged]: merged2
+          [styles$q.merged]: merged2
         }),
         ref,
         gap: merged2 ? gap ?? mergedAutoGap : gap ?? "2",
@@ -447,7 +478,7 @@
   });
   const ButtonGroup = React.memo(_ButtonGroup);
   const separators = "_separators_1f7v1_1";
-  const styles$j = {
+  const styles$p = {
     separators
   };
   const ButtonListBorder = React.memo(
@@ -478,7 +509,7 @@
           size,
           severity: "info",
           variant: buttonVariant,
-          className: classNames(className, styles$j.separators),
+          className: classNames(className, styles$p.separators),
           merged: true,
           gap: "0",
           direction: "column",
@@ -502,13 +533,22 @@
     Root: ButtonListRoot,
     Item: ButtonListItem
   };
+  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 });
+  });
+  RiIcon.displayName = "IconComponent";
   const DialogContent = React.memo(function DialogContent2(props) {
     const { title, description, content, closeDialog } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "2", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "2", grow: "1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { justify: "between", children: [
           /* @__PURE__ */ jsxRuntime.jsx(themes.Dialog.Title, { mb: "0", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx(themes.Dialog.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(themes.IconButton, { color: "gray", variant: "ghost", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross1Icon, {}) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(themes.Dialog.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(themes.IconButton, { color: "gray", variant: "ghost", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiCloseLargeLine" }) }) })
         ] }),
         description && /* @__PURE__ */ jsxRuntime.jsx(themes.Dialog.Description, { children: description })
       ] }),
@@ -660,6 +700,696 @@
       [openAlertDialog]
     );
   };
+  const BaseDialog = React.memo(
+    React.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] = React.useState(defaultOpen ?? false);
+      const open = React.useMemo(
+        () => controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen,
+        [controlledOpen, uncontrolledOpen]
+      );
+      const handleOpenChange = React.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 = React.useCallback(
+        (closeOptions) => {
+          if (closeOptions == null ? void 0 : closeOptions.force) {
+            setUncontrolledOpen(false);
+          } else {
+            handleOpenChange(false);
+          }
+        },
+        [handleOpenChange]
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(RadixDialogPrimitive__namespace.Root, { open, onOpenChange: handleOpenChange, modal: overlay2, children: [
+        children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Trigger, { children }),
+        /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          overlay2 && /* @__PURE__ */ jsxRuntime.jsx(themes.Theme, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Overlay, { className: overlayClass, style: overlayStyle }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(themes.Theme, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.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 = React.memo(
+    React.forwardRef((props, ref) => {
+      const { className, overlayClass, ...rest } = props;
+      return /* @__PURE__ */ jsxRuntime.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 = 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 OvermapItem = React.memo(
+    React.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__ */ jsxRuntime.jsxs(
+        themes.Flex,
+        {
+          ref,
+          align: "center",
+          shrink: "0",
+          style: { fontSize, ...style },
+          ...restSizeProps,
+          ...rest,
+          width: compact ? restSizeProps.height : void 0,
+          children: [
+            !compact && leftSlot && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { width: "max-content", height: "max-content", align: "center", children: leftSlot }),
+            /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { height: "max-content", align: "center", grow: "1", justify: compact ? "center" : void 0, children }),
+            !compact && rightSlot && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { width: "max-content", height: "max-content", align: "center", children: rightSlot })
+          ]
+        }
+      );
+    })
+  );
+  const DialogMenuContext = React.createContext({});
+  const useDialogMenuContext = () => React.useContext(DialogMenuContext);
+  const DialogMenuItem = "_DialogMenuItem_1ojd2_1";
+  const styles$n = {
+    DialogMenuItem
+  };
+  const Item = 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$n.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 = 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,
+        {
+          ref,
+          onSelect: handleSelect,
+          role: "menuitemradio",
+          rightSlot: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            currentValue === value && selectedIndicator,
+            " ",
+            rightSlot
+          ] }),
+          ...rest
+        }
+      );
+    })
+  );
+  const MultiSelectItem$1 = 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,
+        {
+          onSelect: handleSelect,
+          ref,
+          role: "menuitemcheckbox",
+          rightSlot: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            currentValues.includes(value) && selectedIndicator,
+            rightSlot
+          ] }),
+          ...rest
+        }
+      );
+    })
+  );
+  const SubTrigger = 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, { 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 = 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$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__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest }),
+          text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { className: styles$m.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 Separator = React.memo(
+    React.forwardRef((props, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { ref, py: "2", children: /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "4", weight: "light", ...props }) });
+    })
+  );
+  const DEFAULT_DIALOG_MENU_SIZE = "3";
+  const DEFAULT_SELECTED_INDICATOR = /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiCheckLine" });
+  const Group = 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 = 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, { ref, ...rest }) });
+    })
+  );
+  const MultiSelectGroup = 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, { ref, ...rest }) });
+    })
+  );
+  const OvermapInputItem$1 = "_OvermapInputItem_1jgzv_1";
+  const styles$l = {
+    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$l.OvermapInputItem, ref, ...rest })
+        }
+      );
+    })
+  );
+  OvermapInputItem.displayName = "OvermapInputItem";
+  const DialogContentScrollArea = "_DialogContentScrollArea_i3a60_1";
+  const styles$k = {
+    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, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(themes.ScrollArea, { className: styles$k.DialogContentScrollArea, scrollbars: "vertical", type: "hover", children: /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { px: "2", children }) }),
+        bottomSlot && /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { direction: "column", width: "100%", px: "2", children: bottomSlot && /* @__PURE__ */ jsxRuntime.jsx(OvermapItem, { size, children: bottomSlot }) })
+      ] });
+    })
+  );
+  const Content = React.memo(
+    React.forwardRef((props, ref) => {
+      const { subContentId } = useDialogMenuContext();
+      return !subContentId && /* @__PURE__ */ jsxRuntime.jsx(ContentImpl, { ref, ...props });
+    })
+  );
+  const SubContent = 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$j = {
+    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$j.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$j.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,
+            {
+              filterValue,
+              onFilterValueChange,
+              placeholder,
+              leftFilterSlot,
+              rightFilterSlot,
+              numberOfItems: items.length,
+              topSlot,
+              bottomSlot,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Group, { size, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(Item, { ...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,
+            {
+              filterValue,
+              onFilterValueChange,
+              placeholder,
+              leftFilterSlot,
+              rightFilterSlot,
+              numberOfItems: items.length,
+              topSlot,
+              bottomSlot,
+              children: /* @__PURE__ */ jsxRuntime.jsx(SelectGroup, { size, value, onValueChange, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                SelectItem,
+                {
+                  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,
+            {
+              filterValue,
+              onFilterValueChange,
+              placeholder,
+              leftFilterSlot,
+              rightFilterSlot,
+              numberOfItems: items.length,
+              topSlot,
+              bottomSlot,
+              children: /* @__PURE__ */ jsxRuntime.jsx(MultiSelectGroup, { size, values, onValuesChange, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.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";
@@ -813,7 +1543,7 @@
               onChange: textFilterChangeHandler(onFilterValueChange),
               placeholder,
               leftSlot: icons == null ? void 0 : icons.left,
-              rightSlot: (icons == null ? void 0 : icons.right) || /* @__PURE__ */ jsxRuntime.jsx(reactIcons.MagnifyingGlassIcon, {})
+              rightSlot: (icons == null ? void 0 : icons.right) || /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiSearchLine" })
             }
           ),
           items.length !== 0 && /* @__PURE__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
@@ -831,7 +1561,7 @@
             children: /* @__PURE__ */ jsxRuntime.jsx(
               BaseMenuItem,
               {
-                rightSlot: /* @__PURE__ */ jsxRuntime.jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) }),
+                rightSlot: /* @__PURE__ */ jsxRuntime.jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiCheckLine" }) }),
                 children: content
               }
             )
@@ -910,7 +1640,7 @@
             children: /* @__PURE__ */ jsxRuntime.jsx(
               BaseMenuItem,
               {
-                rightSlot: /* @__PURE__ */ jsxRuntime.jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) }),
+                rightSlot: /* @__PURE__ */ jsxRuntime.jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiCheckLine" }) }),
                 children: content
               }
             )
@@ -938,6 +1668,123 @@
       separator && /* @__PURE__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
     ] });
   });
+  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);
+    const {
+      nodeRenderer,
+      disabled: disabledFromContext,
+      nodeGap,
+      onNodeOpen,
+      onNodeClose,
+      onNodeClick,
+      nodeStyles,
+      nodeClassName,
+      levelGap
+    } = useCollapsibleTreeContext();
+    const isDisabled = disabled2 ?? disabledFromContext;
+    const handleClick = React.useCallback(() => {
+      if (onNodeClick)
+        onNodeClick(meta);
+    }, [meta, onNodeClick]);
+    const toggleOpenState = React.useCallback(() => {
+      setControlledOpenState(!controlledOpenState);
+      if (!controlledOpenState && onNodeOpen)
+        onNodeOpen(meta);
+      if (controlledOpenState && onNodeClose)
+        onNodeClose(meta);
+    }, [meta, onNodeClose, onNodeOpen, controlledOpenState]);
+    const { children, leftSlot, rightSlot, style, className } = React.useMemo(() => {
+      return nodeRenderer({
+        meta,
+        toggleOpen: toggleOpenState,
+        open: controlledOpenState,
+        disabled: isDisabled
+      });
+    }, [isDisabled, meta, nodeRenderer, toggleOpenState, controlledOpenState]);
+    const combinedStyles = React.useMemo(
+      () => ({
+        // want node specific styles to overwrite and global node styles
+        ...nodeStyles,
+        ...style
+      }),
+      [nodeStyles, style]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixPrimitiveCollapsible__namespace.Root, { asChild: true, open: controlledOpenState, disabled: isDisabled, children: /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { width: "100%", direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(RadixPrimitiveCollapsible__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        themes.Flex,
+        {
+          width: "100%",
+          pl: levelGap,
+          height: "max-content",
+          direction: "column",
+          gap: nodeGap,
+          pt: nodeGap,
+          children: nodes.map((treeNodeProps, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      CollapsibleTreeContext.Provider,
+      {
+        value: {
+          nodeRenderer,
+          nodeGap,
+          levelGap,
+          nodeClassName,
+          nodeStyles,
+          disabled: disabled2,
+          onNodeClick,
+          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}`)) })
+      }
+    );
+  });
   const ActionItemGroup = React.memo((props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(BaseItemGroup, { ...props, groupElement: RadixContextMenu__namespace.Group, itemElement: RadixContextMenu__namespace.Item });
   });
@@ -980,11 +1827,20 @@
   });
   SubItemGroup.displayName = "SubItemGroup";
   const Root$2 = React.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__ */ jsxRuntime.jsxs(themes.ContextMenu.Root, { modal, children: [
       /* @__PURE__ */ jsxRuntime.jsx(themes.ContextMenu.Trigger, { disabled: disabled2, children }),
-      /* @__PURE__ */ jsxRuntime.jsx(themes.ContextMenu.Content, { variant: "soft", color: infoColor, ...rest, children: content })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        themes.ContextMenu.Content,
+        {
+          className: classNames("overmap-context-menu", className),
+          variant: "soft",
+          color: infoColor,
+          ...rest,
+          children: content
+        }
+      )
     ] });
   });
   Root$2.displayName = "ContextMenuRoot";
@@ -1218,6 +2074,20 @@
       }
     )
   );
+  const DownloadButtonUtility = React.memo((props) => {
+    const { children, file } = props;
+    const anchorRef = React.useRef(null);
+    const objectURL = React.useMemo(() => URL.createObjectURL(file), [file]);
+    const handleClick = React.useCallback(() => {
+      if (anchorRef.current)
+        anchorRef.current.click();
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { onClick: handleClick, children }),
+      /* @__PURE__ */ jsxRuntime.jsx("a", { style: { display: "none" }, href: objectURL, target: "_blank", rel: "noreferrer", ref: anchorRef })
+    ] });
+  });
+  DownloadButtonUtility.displayName = "DownloadButtonUtility";
   const HoverUtility = React.memo(function Root2({ children }) {
     const [isHovered, setIsHovered] = React.useState(reactDeviceDetect.isMobile);
     const handlePointerEnter = React.useCallback(() => {
@@ -1481,8 +2351,8 @@
               enable: { right: resizable2 && isLeft, left: resizable2 && isRight },
               handleClasses: { left: styles$f.resizeHandle, right: styles$f.resizeHandle },
               handleComponent: {
-                right: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, {}),
-                left: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, {})
+                right: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiDraggable" }),
+                left: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiDraggable" })
               },
               children
             }
@@ -2406,7 +3276,7 @@
                       maxWidth: leftPanelMaxWidth,
                       handleClasses: { right: classNames(styles$a.resizeHandle, styles$a.left) },
                       handleComponent: {
-                        right: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, { height: "14px", width: "14px" })
+                        right: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiDraggable", height: "14px", width: "14px" })
                       },
                       children: leftPanel
                     }
@@ -2445,7 +3315,7 @@
                       minWidth: rightMinWidth,
                       maxWidth: rightPanelMaxWidth,
                       handleClasses: { left: classNames(styles$a.resizeHandle, styles$a.right) },
-                      handleComponent: { left: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, { height: "14px", width: "14px" }) },
+                      handleComponent: { left: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiDraggable", height: "14px", width: "14px" }) },
                       children: rightPanel
                     }
                   )
@@ -2697,7 +3567,7 @@
           action && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { className: styles$6.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(reactIcons.Cross2Icon, {}) }) })
+      /* @__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" }) }) })
     ] }) }) });
   });
   const Toast = React.memo(_Toast);
@@ -2791,11 +3661,34 @@
       );
     })
   );
-  const noWrap = "_noWrap_1wpa5_1";
+  const ToggleButton$1 = "_ToggleButton_13aus_1";
   const styles$4 = {
+    ToggleButton: ToggleButton$1
+  };
+  const ToggleButton = React.memo(
+    React.forwardRef((props, ref) => {
+      const { children, className, severity, fluid: fluid2, variant = "solid", size, hoverEffects, ...rest } = props;
+      return /* @__PURE__ */ jsxRuntime.jsx(Toggle__namespace.Root, { ref, asChild: true, ...rest, children: /* @__PURE__ */ jsxRuntime.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 = React.memo(
+  const Text = React.memo(
     React.forwardRef(({ className, noWrap: noWrap2, severity, as, ...props }, ref) => {
       const color = useSeverityColor(severity);
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2803,7 +3696,7 @@
         {
           ref,
           as,
-          className: classNames(className, { [styles$4.noWrap]: noWrap2 }),
+          className: classNames(className, { [styles$3.noWrap]: noWrap2 }),
           color,
           ...props
         }
@@ -2817,60 +3710,6 @@
       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$3 = {
-    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$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__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest }),
-          text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { className: styles$3.Text, as: "span", size: "1", weight: textWeight, color: severityColor, children: text }),
-            /* @__PURE__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest })
-          ] })
-        ]
-      }
-    );
-  });
-  const Separator = React.memo(_Separator);
   const centerStyles = { placeSelf: "center" };
   const ErrorFallback = React.memo((props) => {
     const { absoluteCentering } = props;
@@ -2879,8 +3718,8 @@
     const outerFlexStyles = absoluteCentering ? { position: "absolute", top: "50%", transform: "translateY(-50%)" } : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "2", direction: "row", width: "100%", style: outerFlexStyles, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsxRuntime.jsx(FeatherIcon, { icon: "alert-triangle", size: height, style: centerStyles }),
-      /* @__PURE__ */ jsxRuntime.jsx(Text$1, { style: { lineHeight: height, ...centerStyles }, children: "Something went wrong" }),
+      /* @__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(
         IconButton,
         {
@@ -2889,7 +3728,7 @@
           onClick: resetBoundary,
           style: centerStyles,
           hoverEffects: ["spin180Clockwise"],
-          children: /* @__PURE__ */ jsxRuntime.jsx(FeatherIcon, { icon: "refresh-ccw", size: height })
+          children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiLoopLeftLine", size: height })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexGrow: 1 } })
@@ -3470,7 +4309,7 @@
           },
           ref,
           ...rest,
-          children: /* @__PURE__ */ jsxRuntime.jsx($e698a72e93240346$export$adb584737d712b70, { className: styles$2.checkboxIndicator, children: checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DividerHorizontalIcon, { width: "13px" }) : /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) })
+          children: /* @__PURE__ */ jsxRuntime.jsx($e698a72e93240346$export$adb584737d712b70, { className: styles$2.checkboxIndicator, children: checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiSubtractLine" }) : /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiCheckLine" }) })
         }
       ),
       label && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3560,7 +4399,7 @@
   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";
@@ -3579,7 +4418,7 @@
     tableContainer,
     searchContainer,
     columnFilterSelect,
-    table: table$1,
+    table,
     tableHeaderCell,
     showSortIcon,
     tableRow,
@@ -3591,16 +4430,6 @@
     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 = React.forwardRef(function Table2(props, ref) {
     var _a;
     const {
@@ -3624,6 +4453,7 @@
       emptyMessage = "There is no data",
       topBarComponents,
       children,
+      containerClassName,
       className,
       columnClassName,
       rowClassName,
@@ -3749,7 +4579,7 @@
       setSearch(e.target.value);
     }, []);
     const tableData = { nodes: rows };
-    const tableSelect = useRowSelect(
+    const tableSelect = select_js.useRowSelect(
       tableData,
       {
         onChange: (_action, state) => {
@@ -3757,13 +4587,13 @@
         }
       },
       {
-        rowSelect: SelectTypes.MultiSelect,
-        buttonSelect: SelectTypes.MultiSelect,
-        clickType: SelectClickTypes.ButtonClick,
+        rowSelect: select_js.SelectTypes.MultiSelect,
+        buttonSelect: select_js.SelectTypes.MultiSelect,
+        clickType: select_js.SelectClickTypes.ButtonClick,
         isCarryForward: false
       }
     );
-    const pagination2 = usePagination(
+    const pagination = pagination_js.usePagination(
       tableData,
       {
         state: {
@@ -3775,7 +4605,7 @@
         isServer: false
       }
     );
-    const sort2 = useSort(
+    const sort = sort_js.useSort(
       tableData,
       {
         onChange: (_action, state) => {
@@ -3786,9 +4616,9 @@
         sortIcon: {
           margin: "10px",
           size: "15px",
-          iconDefault: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CaretSortIcon, { width: "20px" }),
-          iconUp: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowUpIcon, {}),
-          iconDown: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowDownIcon, {})
+          iconDefault: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiExpandUpDownLine" }),
+          iconUp: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiArrowUpLine" }),
+          iconDown: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiArrowUpLine" })
         },
         sortFns: Object.assign(
           {},
@@ -3860,7 +4690,7 @@
       [columnFilterValues, columns, getFilterValues]
     );
     const columnCells = columnsData.map((column) => {
-      const Component = column.sort ? HeaderCellSort : HeaderCell;
+      const Component = column.sort ? sort_js.HeaderCellSort : table_js.HeaderCell;
       let firstLine = column.label;
       let secondLine = void 0;
       if (column.label && typeof column.label === "string") {
@@ -3892,7 +4722,7 @@
     });
     const SelectedModeButton = reactDeviceDetect.isMobile ? IconButton : Button2;
     const layout = React.useMemo(() => ({ custom: true, ...fixHeader && { fixedHeader: true } }), [fixHeader]);
-    const theme2 = useTheme({
+    const theme = theme_js.useTheme({
       Table: `
 			 --data-table-library_grid-template-columns: ${gridTemplateColumns} !important;
 		`,
@@ -3915,18 +4745,18 @@
       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__ */ 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$1, { weight: "bold", size: "5", children: title }),
-        !!description && /* @__PURE__ */ jsxRuntime.jsx(Text$1, { as: "div", children: description })
+        !!title && /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "bold", size: "5", children: title }),
+        !!description && /* @__PURE__ */ jsxRuntime.jsx(Text, { 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: [
@@ -3935,7 +4765,7 @@
             {
               value: search,
               onChange: handleSearch,
-              leftSlot: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.MagnifyingGlassIcon, {}),
+              leftSlot: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiSearchLine" }),
               placeholder: searchBarPlaceholder || "Filter tasks..."
             }
           ) }) }),
@@ -3944,7 +4774,7 @@
             {
               color,
               page: columnFilterPopoverContent,
-              trigger: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "surface", "aria-label": "Filter columns", children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.MixerHorizontalIcon, {}) }),
+              trigger: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "surface", "aria-label": "Filter columns", children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiEqualizerLine" }) }),
               children: (_Close) => ""
             }
           ),
@@ -3955,46 +4785,46 @@
               color: "crimson",
               onClick: () => {
                 setColumnFilterValues(defaultColumnFilterValues);
-                pagination2.fns.onSetPage(0);
+                pagination.fns.onSetPage(0);
               },
               "aria-label": "Clear filters",
-              children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross2Icon, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiCloseLine" })
             }
           )
         ] }),
         topBarComponents,
         showSelect && selected.length !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { gap: "2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(SelectedModeButton, { variant: "soft", "aria-label": "Edit rows", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Pencil1Icon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiPencilLine" }),
             !reactDeviceDetect.isMobile && "Edit"
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(SelectedModeButton, { color: "red", "aria-label": "Delete rows", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactIcons.TrashIcon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiDeleteBin2Line" }),
             !reactDeviceDetect.isMobile && "Delete"
           ] })
         ] })
       ] }),
       children,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.tableContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-        ReactLibraryTable,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$1.tableContainer, containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+        table_js.Table,
         {
           className: classNames(styles$1.table, className),
           data: tableData,
-          theme: theme2,
-          sort: sort2,
-          pagination: showPageNavigation && pagination2,
+          theme,
+          sort,
+          pagination: showPageNavigation && pagination,
           select: tableSelect,
           layout,
           ref,
           children: (tableList) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
-              showSelect && /* @__PURE__ */ jsxRuntime.jsx(HeaderCellSelect, { className: styles$1.tableHeaderCell }),
+            /* @__PURE__ */ jsxRuntime.jsx(table_js.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(table_js.HeaderRow, { children: [
+              showSelect && /* @__PURE__ */ jsxRuntime.jsx(select_js.HeaderCellSelect, { className: styles$1.tableHeaderCell }),
               ...columnCells
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
-              tableList.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(themes.TableRow, { className: styles$1.noDataTextContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: emptyMessage }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(table_js.Body, { children: [
+              tableList.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(themes.TableRow, { className: styles$1.noDataTextContainer, children: /* @__PURE__ */ jsxRuntime.jsx(table_js.Cell, { children: emptyMessage }) }),
               tableList.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
-                Row,
+                table_js.Row,
                 {
                   item: row,
                   className: classNames(styles$1.tableRow, rowClassName, row.className, {
@@ -4002,7 +4832,7 @@
                   }),
                   onClick: !row.disabled && row.onClick,
                   children: row.loading ? /* @__PURE__ */ jsxRuntime.jsx(
-                    Cell,
+                    table_js.Cell,
                     {
                       style: {
                         gridColumn: `1 / span ${columns.length}`
@@ -4011,11 +4841,11 @@
                     },
                     `loading-${row.id}`
                   ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    showSelect && /* @__PURE__ */ jsxRuntime.jsx(CellSelect, { item: row }, row.id),
+                    showSelect && /* @__PURE__ */ jsxRuntime.jsx(select_js.CellSelect, { item: row }, row.id),
                     columns.map((column, i) => {
                       const cell = row[column.id];
                       return /* @__PURE__ */ jsxRuntime.jsx(
-                        Cell,
+                        table_js.Cell,
                         {
                           className: classNames(
                             styles$1.tableCell,
@@ -4041,14 +4871,14 @@
       ) }),
       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$1, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { className: styles$1.rowsPerPageText, size: "2", children: "Rows per page:" }),
           /* @__PURE__ */ jsxRuntime.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,
@@ -4056,46 +4886,46 @@
             }
           )
         ] }),
-        showPageNumber && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Text$1, { className: styles$1.pageText, size: "2", children: totalPages > 0 && `Page ${pagination2.state.page + 1} of ${totalPages}` }) }),
+        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}` }) }),
         showPageNavigation && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.rowsPerPageContainer, gap: "2", justify: "end", children: [
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactIcons.DoubleArrowLeftIcon, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiArrowLeftDoubleLine" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactIcons.ChevronLeftIcon, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiArrowLeftSLine" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactIcons.ChevronRightIcon, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiArrowRightSLine" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactIcons.DoubleArrowRightIcon, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiArrowRightDoubleLine" })
             }
           )
         ] })
@@ -4221,7 +5051,7 @@
             disabled: isConfirmDisabled,
             onClick: onCheckClick,
             "aria-label": "Confirm edit",
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {})
+            children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiCheckLine" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4238,7 +5068,7 @@
             severity,
             onClick: onCancelClick,
             "aria-label": "Cancel edit",
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross1Icon, {})
+            children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiCloseLargeLine" })
           }
         )
       ] }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -4255,7 +5085,7 @@
           severity,
           onClick: onPencilClick,
           "aria-label": "Edit text",
-          children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Pencil1Icon, {})
+          children: /* @__PURE__ */ jsxRuntime.jsx(RiIcon, { icon: "RiPencilLine" })
         }
       ))
     ] }) });
@@ -4286,6 +5116,7 @@
   exports2.ButtonGroup = ButtonGroup;
   exports2.ButtonList = ButtonList;
   exports2.Checkbox = Checkbox;
+  exports2.CollapsibleTree = CollapsibleTree;
   exports2.ConfirmEditInput = ConfirmEditInput;
   exports2.ContextActionMenu = ContextActionMenu;
   exports2.ContextMenu = ContextMenu;
@@ -4293,6 +5124,11 @@
   exports2.ContextSelectMenu = ContextSelectMenu;
   exports2.DefaultTheme = DefaultTheme;
   exports2.Dialog = Dialog;
+  exports2.DialogCommandMenu = DialogCommandMenu;
+  exports2.DialogMenu = DialogMenu;
+  exports2.DialogMultiSelectMenu = DialogMultiSelectMenu;
+  exports2.DialogSelectMenu = DialogSelectMenu;
+  exports2.DownloadButtonUtility = DownloadButtonUtility;
   exports2.DropdownItemMenu = DropdownItemMenu;
   exports2.DropdownMenu = DropdownMenu;
   exports2.DropdownMenuItemGroup = DropdownMenuItemGroup;
@@ -4311,22 +5147,28 @@
   exports2.LeftAndRightPanels = LeftAndRightPanels;
   exports2.MultiPagePopover = MultiPagePopover;
   exports2.MultiSelect = MultiSelect;
+  exports2.Overlay = Overlay$2;
   exports2.OvermapErrorBoundary = OvermapErrorBoundary;
+  exports2.OvermapInputItem = OvermapInputItem;
+  exports2.OvermapItem = OvermapItem;
+  exports2.OvermapItemGroup = OvermapItemGroup;
   exports2.Popover = Popover;
+  exports2.RiIcon = RiIcon;
   exports2.Select = Select;
   exports2.SelectAllCheckbox = SelectAllCheckbox;
-  exports2.Separator = Separator;
+  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$1;
+  exports2.Text = Text;
   exports2.TextArea = TextArea;
   exports2.Toast = Toast;
   exports2.ToastContext = ToastContext;
   exports2.ToastProvider = ToastProvider;
+  exports2.ToggleButton = ToggleButton;
   exports2.ToggleGroup = ToggleGroup;
   exports2.Toolbar = Toolbar;
   exports2.Tooltip = Tooltip;
@@ -4336,7 +5178,9 @@
   exports2.useDiscardAlertDialog = useDiscardAlertDialog;
   exports2.useKeyboardShortcut = useKeyboardShortcut;
   exports2.useLayoutContext = useLayoutContext;
+  exports2.useOvermapItemGroupContext = useOvermapItemGroupContext;
   exports2.useSeverityColor = useSeverityColor;
+  exports2.useSize = useSize;
   exports2.useStopEventPropagation = useStopEventPropagation;
   exports2.useTextFilter = useTextFilter;
   exports2.useToast = useToast;