@overmap-ai/blocks 1.0.26 → 1.0.27-alpha.1

package/dist/blocks.js

@@ -1,22 +1,24 @@
 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, forwardRef, memo, 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 { Cross1Icon, CheckIcon, MagnifyingGlassIcon, DragHandleDots2Icon, Cross2Icon, DividerHorizontalIcon, CaretSortIcon, ArrowUpIcon, ArrowDownIcon, MixerHorizontalIcon, Pencil1Icon, TrashIcon, DoubleArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, DoubleArrowRightIcon } from "@radix-ui/react-icons";
+import * as RadixDialogPrimitive from "@radix-ui/react-dialog";
 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";
@@ -191,12 +193,38 @@ 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];
 };
+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(
@@ -214,7 +242,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
@@ -226,9 +254,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,
@@ -240,14 +268,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);
@@ -274,23 +302,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 === " ") {
@@ -309,14 +337,14 @@ const SizeMapping = {
 };
 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) {
@@ -352,7 +380,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),
@@ -394,7 +422,7 @@ const _Button = forwardRef(function Button3(props, ref) {
     IconButton$1,
     {
       className: classNames(className, hoverEffectClasses, {
-        [styles$m.fluid]: fluid2
+        [styles$s.fluid]: fluid2
       }),
       ref,
       color,
@@ -409,7 +437,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 = {
@@ -436,7 +464,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",
@@ -449,7 +477,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(
@@ -480,7 +508,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",
@@ -506,7 +534,7 @@ const ButtonList = {
 };
 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 }),
@@ -662,6 +690,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(CheckIcon, {});
+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";
@@ -982,11 +1700,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";
@@ -1220,6 +1947,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(() => {
@@ -2595,7 +3336,7 @@ const _ToggleGroup = forwardRef(function ToggleGroup2({
   ...rest
 }, ref) {
   return /* @__PURE__ */ jsx(
-    Root$3,
+    Root$4,
     {
       type,
       className: classNames("overmap-toggle-group", className),
@@ -2608,7 +3349,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"),
@@ -2627,7 +3368,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,
@@ -2793,11 +3534,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(
@@ -2805,7 +3569,7 @@ const Text$1 = memo(
       {
         ref,
         as,
-        className: classNames(className, { [styles$4.noWrap]: noWrap2 }),
+        className: classNames(className, { [styles$3.noWrap]: noWrap2 }),
         color,
         ...props
       }
@@ -2819,60 +3583,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;
@@ -2882,7 +3592,7 @@ const ErrorFallback = memo((props) => {
   return /* @__PURE__ */ jsxs(Flex, { gap: "2", direction: "row", width: "100%", style: outerFlexStyles, children: [
     /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
     /* @__PURE__ */ jsx(FeatherIcon, { icon: "alert-triangle", size: height, style: centerStyles }),
-    /* @__PURE__ */ jsx(Text$1, { style: { lineHeight: height, ...centerStyles }, children: "Something went wrong" }),
+    /* @__PURE__ */ jsx(Text, { style: { lineHeight: height, ...centerStyles }, children: "Something went wrong" }),
     /* @__PURE__ */ jsx(
       IconButton,
       {
@@ -3917,8 +4627,8 @@ const _Table = forwardRef(function Table2(props, ref) {
   }, [rowsPerPage, rows.length, numRowsPerPage, pagination, showPageNavigation]);
   return /* @__PURE__ */ jsxs(Flex$1, { className: classNames({ [styles$1.outerTableContainer]: showContainer }), direction: "column", height: "100%", children: [
     (!!title || !!description) && /* @__PURE__ */ jsxs("div", { className: styles$1.headerContainer, children: [
-      !!title && /* @__PURE__ */ jsx(Text$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: [
@@ -4033,7 +4743,7 @@ const _Table = forwardRef(function Table2(props, ref) {
     ) }),
     showBottomBar && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.tableBottomContainer, wrap: "wrap", direction: isMobile ? "column" : "row", children: [
       showRowsPerPage && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.rowsPerPageContainer, children: [
-        /* @__PURE__ */ jsx(Text$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,
           {
@@ -4048,7 +4758,7 @@ 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 ${pagination.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,
@@ -4274,6 +4984,11 @@ export {
   ContextSelectMenu,
   DefaultTheme,
   Dialog,
+  DialogCommandMenu,
+  DialogMenu,
+  DialogMultiSelectMenu,
+  DialogSelectMenu,
+  DownloadButtonUtility,
   DropdownItemMenu,
   DropdownMenu,
   DropdownMenuItemGroup,
@@ -4292,23 +5007,28 @@ export {
   LeftAndRightPanels,
   MultiPagePopover,
   MultiSelect,
+  Overlay$2 as Overlay,
   OvermapErrorBoundary,
+  OvermapInputItem,
+  OvermapItem,
+  OvermapItemGroup,
   Popover,
   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,
@@ -4320,7 +5040,9 @@ export {
   useDiscardAlertDialog,
   useKeyboardShortcut,
   useLayoutContext,
+  useOvermapItemGroupContext,
   useSeverityColor,
+  useSize,
   useStopEventPropagation,
   useTextFilter,
   useThemeContext2 as useThemeContext,