@overmap-ai/blocks 1.0.6 → 1.0.7

package/dist/blocks.js

@@ -1,11 +1,12 @@
 export * from "@radix-ui/colors";
-import { Cross1Icon, CheckIcon, DragHandleDots2Icon, Cross2Icon, DividerHorizontalIcon, CaretSortIcon, ArrowUpIcon, ArrowDownIcon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, TrashIcon, DoubleArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, DoubleArrowRightIcon } from "@radix-ui/react-icons";
+import { Cross1Icon, MagnifyingGlassIcon, CheckIcon, DragHandleDots2Icon, Cross2Icon, DividerHorizontalIcon, CaretSortIcon, ArrowUpIcon, ArrowDownIcon, MixerHorizontalIcon, Pencil1Icon, TrashIcon, DoubleArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, DoubleArrowRightIcon } from "@radix-ui/react-icons";
 export * from "@radix-ui/react-icons";
-import { useThemeContext, Badge as Badge$1, Flex as Flex$1, Box, Link, Text as Text$1, Button, IconButton as IconButton$1, Card, Inset, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Separator as Separator$1, DropdownMenu as DropdownMenu$2, TextField, Select as Select$1, Checkbox as Checkbox$1, Switch as Switch$1, Portal, Popover as Popover$1, TextArea as TextArea$1, Callout, Tooltip as Tooltip$1, Theme, TableRow } from "@radix-ui/themes";
-import { AccessibleIcon, AspectRatio, Avatar, Blockquote, Box as Box2, Callout as Callout2, Card as Card2, Code, Container, ContextMenu, Em, Grid, Heading, HoverCard, Inset as Inset2, Kbd, Link as Link2, Portal as Portal2, Quote, RadioGroup, ScrollArea, Section, Slider, Slot, Strong, Tabs, TextField as TextField2, Theme as Theme2, VisuallyHidden, updateThemeAppearanceClass, useThemeContext as useThemeContext2 } 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, DropdownMenu as DropdownMenu$1, Kbd, 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 { AccessibleIcon, AspectRatio, Avatar, Blockquote, Box as Box2, Callout as Callout2, Card as Card2, Code, Container, Em, Grid, Heading, HoverCard, Inset as Inset2, Kbd as Kbd2, Link as Link2, Portal as Portal2, Quote, RadioGroup, ScrollArea, Section, Slider, Slot, Strong, Tabs, TextField as TextField2, Theme as Theme2, VisuallyHidden, updateThemeAppearanceClass, useThemeContext as useThemeContext2 } from "@radix-ui/themes";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useMemo, useState, useLayoutEffect, useCallback, useEffect, Children, isValidElement, forwardRef, memo, createContext, useContext, cloneElement, createElement, useRef, useReducer, Fragment as Fragment$1 } from "react";
 import { useMediaQuery } from "react-responsive";
+import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as RadixDialogPrimitive from "@radix-ui/react-dialog";
 import { Resizable } from "re-resizable";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
@@ -175,6 +176,19 @@ const childrenToArray = (children) => {
   }
   return tempChildrenToArray;
 };
+const useStopEventPropagation = () => {
+  return useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+};
+function useTextFilter(values, filterFunction) {
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [filterValue, setFilterValue] = useState("");
+  useEffect(() => {
+    setFilteredOptions(values.filter((value) => filterFunction(value, filterValue)));
+  }, [filterFunction, filterValue, values]);
+  return [filteredOptions, filterValue, setFilterValue];
+}
 const _Badge = forwardRef(function Badge2({ className, severity = "primary", color, children, ...rest }, ref) {
   const severityColor = useSeverityColor(severity);
   return /* @__PURE__ */ jsx(
@@ -243,7 +257,7 @@ const Group = memo(
           children: childrenAsArray.map((child, index) => {
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               cloneElement(child, { key: index }),
-              childrenAsArray.length - 1 !== index && /* @__PURE__ */ jsx(Text$1, { color: severityColor, children: /* @__PURE__ */ jsx(Flex, { height: "100%", width: "100%", align: "center", children: separator }) })
+              childrenAsArray.length - 1 !== index && /* @__PURE__ */ jsx(Text$2, { color: severityColor, children: /* @__PURE__ */ jsx(Flex, { height: "100%", width: "100%", align: "center", children: separator }) })
             ] });
           })
         }
@@ -561,6 +575,15 @@ const Dialog = memo(
     ] });
   })
 );
+const useWrapCallbackInDialogClose = (callback, closeOptions) => {
+  return useCallback(
+    (...arg) => (closeDialog) => {
+      callback(...arg);
+      closeDialog(closeOptions);
+    },
+    [callback, closeOptions]
+  );
+};
 const Title = (props) => /* @__PURE__ */ jsx(AlertDialog$1.Title, { mb: "0", ...props });
 const AlertDialogContent$1 = (props) => {
   const { title, description, actionText = "Confirm", cancelText = "Cancel", onAction, onCancel, severity } = props;
@@ -626,128 +649,341 @@ const useDiscardAlertDialog = () => {
     [openAlertDialog]
   );
 };
-const DropdownMenu$1 = "_DropdownMenu_hj4sz_1";
-const DropdownMenuItemWrapper = "_DropdownMenuItemWrapper_hj4sz_8";
-const DropdownMenuSeparatorWrapper = "_DropdownMenuSeparatorWrapper_hj4sz_13";
-const DropdownMenuItem$1 = "_DropdownMenuItem_hj4sz_8";
+const DropdownMenu = memo(
+  forwardRef(({ trigger, disabled, children, ...rest }) => {
+    const infoColor = useSeverityColor("info");
+    return /* @__PURE__ */ jsxs(DropdownMenu$1.Root, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { disabled, children: trigger }),
+      /* @__PURE__ */ jsx(DropdownMenu$1.Content, { variant: "soft", color: infoColor, ...rest, children })
+    ] });
+  })
+);
+const BaseMenuItem$1 = "_BaseMenuItem_1s610_1";
+const RemoveOutline = "_RemoveOutline_1s610_15";
+const BaseMenuSeparator$1 = "_BaseMenuSeparator_1s610_19";
+const BaseMenuInput$1 = "_BaseMenuInput_1s610_27";
 const styles$h = {
-  DropdownMenu: DropdownMenu$1,
-  DropdownMenuItemWrapper,
-  DropdownMenuSeparatorWrapper,
-  DropdownMenuItem: DropdownMenuItem$1
+  BaseMenuItem: BaseMenuItem$1,
+  RemoveOutline,
+  BaseMenuSeparator: BaseMenuSeparator$1,
+  BaseMenuInput: BaseMenuInput$1
 };
-const SeparatorSizeMapping = {
-  "1": "max-content",
-  "2": "max-content",
-  "3": "max-content",
-  "4": "100%"
+const BaseMenuItem = memo(
+  forwardRef(({ children, rightSlot }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { className: styles$h.BaseMenuItem, ref, position: "relative", px: "2", height: "6", children: /* @__PURE__ */ jsxs(Flex, { gap: "6", height: "100%", align: "center", children: [
+      /* @__PURE__ */ jsx(Flex, { grow: "1", height: "100%", align: "center", gap: "1", children }),
+      /* @__PURE__ */ jsx(Flex, { height: "100%", width: "4", align: "center", justify: "end", children: rightSlot })
+    ] }) });
+  })
+);
+const BaseMenuInput = memo(
+  forwardRef((props) => {
+    return /* @__PURE__ */ jsx(Box, { className: styles$h.BaseMenuInput, px: "2", height: "6", width: "max-content", children: /* @__PURE__ */ jsx(Input, { ...props, variant: "ghost" }) });
+  })
+);
+const BaseMenuSeparator = memo(function BaseMenuSeparator2() {
+  return /* @__PURE__ */ jsx(Box, { className: styles$h.BaseMenuSeparator, width: "100%", py: "1", children: /* @__PURE__ */ jsx(Box, { height: "0", width: "100%" }) });
+});
+const useCloseOnSelectHandler = (closeOnSelect) => {
+  return useCallback(
+    (onSelect) => (event) => {
+      if (!closeOnSelect) {
+        event.preventDefault();
+      }
+      if (onSelect)
+        onSelect(event);
+    },
+    [closeOnSelect]
+  );
 };
-const _Separator = forwardRef(function Separator2({ severity = "info", weight = "light", gap = "1", text, orientation = "horizontal", size, ...rest }, ref) {
-  const computedSizing = useResponsiveMapping(size, SeparatorSizeMapping);
-  const severityColor = useSeverityColor(severity);
-  return /* @__PURE__ */ jsxs(
-    Flex$1,
-    {
-      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$1, { as: "span", size: "1", weight, color: severityColor, children: text }),
-          /* @__PURE__ */ jsx(Separator$1, { size, orientation, color: severityColor, ...rest })
-        ] })
-      ]
-    }
+const useTextFilterChangeHandler = () => {
+  return useCallback(
+    (onTextFilterChange) => (event) => {
+      if (onTextFilterChange)
+        onTextFilterChange(event.target.value);
+    },
+    []
   );
-});
-const Separator = memo(_Separator);
-const DropdownMenuItem = memo(function DropdownMenuItem2({
-  content,
-  onSelect,
-  closeOnSelect,
+};
+const BaseItemGroup = memo(function BaseItemGroup2({
+  items,
+  closeOnSelect = true,
+  groupElement: GroupElement,
+  itemElement: ItemElement,
+  filterValue,
+  onFilterValueChange,
+  placeholder,
+  icons,
+  separator,
   ...rest
 }) {
-  const handleSelect = useCallback(
-    (event) => {
-      if (onSelect)
-        onSelect(event);
-      if (!closeOnSelect)
-        event.preventDefault();
+  const closeOnSelectHandler = useCloseOnSelectHandler(closeOnSelect);
+  const textFilterChangeHandler = useTextFilterChangeHandler();
+  useEffect(() => {
+    return () => {
+      if (onFilterValueChange) {
+        onFilterValueChange("");
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GroupElement, { ...rest, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+      filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          BaseMenuInput,
+          {
+            value: filterValue,
+            onChange: textFilterChangeHandler(onFilterValueChange),
+            placeholder,
+            leftSlot: icons == null ? void 0 : icons.left,
+            rightSlot: icons == null ? void 0 : icons.right
+          }
+        ),
+        items.length !== 0 && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
+      ] }),
+      items.map(({ content, shortcut, className, onSelect, ...rest2 }, index) => /* @__PURE__ */ jsx(
+        ItemElement,
+        {
+          className: classNames(className, styles$h.RemoveOutline),
+          onSelect: closeOnSelectHandler(onSelect),
+          ...rest2,
+          children: /* @__PURE__ */ jsx(BaseMenuItem, { rightSlot: shortcut == null ? void 0 : shortcut.map((key, index2) => /* @__PURE__ */ jsx(Kbd, { children: key }, index2)), children: content })
+        },
+        index
+      ))
+    ] }) }),
+    separator && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
+  ] });
+});
+const BaseSelectGroup = memo(function BaseSelectGroup2({
+  items,
+  value,
+  closeOnSelect = false,
+  onValueChange,
+  groupElement: GroupElement,
+  selectedIndicator,
+  itemElement: ItemElement,
+  itemIndicatorElement: ItemIndicatorElement,
+  filterValue,
+  onFilterValueChange,
+  placeholder,
+  icons,
+  separator
+}) {
+  const textFilterChangeHandler = useTextFilterChangeHandler();
+  const closeOnSelectHandler = useCloseOnSelectHandler(closeOnSelect);
+  useEffect(() => {
+    return () => {
+      if (onFilterValueChange) {
+        onFilterValueChange("");
+      }
+    };
+  }, []);
+  const handleCheckedChange = useCallback(
+    (value2) => (checked) => {
+      onValueChange(checked ? value2 : null);
     },
-    [closeOnSelect, onSelect]
+    [onValueChange]
   );
-  return /* @__PURE__ */ jsx(DropdownMenu$2.Item, { className: styles$h.DropdownMenuItem, textValue: "", onSelect: handleSelect, ...rest, children: /* @__PURE__ */ jsx(Flex$1, { align: "center", gap: "1", children: content }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GroupElement, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+      filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          BaseMenuInput,
+          {
+            value: filterValue,
+            onChange: textFilterChangeHandler(onFilterValueChange),
+            placeholder,
+            leftSlot: icons == null ? void 0 : icons.left,
+            rightSlot: (icons == null ? void 0 : icons.right) || /* @__PURE__ */ jsx(MagnifyingGlassIcon, {})
+          }
+        ),
+        items.length !== 0 && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
+      ] }),
+      items.map(({ content, value: itemValue, onSelect, ...rest }, index) => /* @__PURE__ */ jsx(
+        ItemElement,
+        {
+          className: styles$h.RemoveOutline,
+          checked: itemValue === value,
+          onCheckedChange: handleCheckedChange(itemValue),
+          onSelect: closeOnSelectHandler(onSelect),
+          textValue: "",
+          ...rest,
+          children: /* @__PURE__ */ jsx(
+            BaseMenuItem,
+            {
+              rightSlot: /* @__PURE__ */ jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsx(CheckIcon, {}) }),
+              children: content
+            }
+          )
+        },
+        index
+      ))
+    ] }) }),
+    separator && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
+  ] });
 });
-const DropdownMenu = memo(
+const BaseMultiSelectGroup = memo(function BaseMultiSelectGroup2({
+  items,
+  values,
+  onValueChange,
+  closeOnSelect = false,
+  groupElement: GroupElement,
+  selectedIndicator,
+  itemElement: ItemElement,
+  itemIndicatorElement: ItemIndicatorElement,
+  filterValue,
+  onFilterValueChange,
+  placeholder,
+  icons,
+  separator = false
+}) {
+  const closeOnSelectHandler = useCloseOnSelectHandler(closeOnSelect);
+  const textFilterChangeHandler = useTextFilterChangeHandler();
+  useEffect(() => {
+    return () => {
+      if (onFilterValueChange) {
+        onFilterValueChange("");
+      }
+    };
+  }, []);
+  const handleCheckedChange = useCallback(
+    (value) => (checked) => {
+      if (checked) {
+        onValueChange([...values, value]);
+      } else {
+        const valueIndex = values.indexOf(value);
+        if (valueIndex < 0) {
+          throw new Error("unexpected value not found within values array");
+        }
+        const tempValues = [...values];
+        tempValues.splice(valueIndex, 1);
+        onValueChange(tempValues);
+      }
+    },
+    [onValueChange, values]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GroupElement, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+      filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          BaseMenuInput,
+          {
+            value: filterValue,
+            onChange: textFilterChangeHandler(onFilterValueChange),
+            placeholder,
+            leftSlot: icons == null ? void 0 : icons.left,
+            rightSlot: icons == null ? void 0 : icons.right
+          }
+        ),
+        items.length !== 0 && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
+      ] }),
+      items.map(({ value, content, className, onSelect, ...rest }, index) => /* @__PURE__ */ jsx(
+        ItemElement,
+        {
+          className: classNames(className, styles$h.RemoveOutline),
+          onSelect: closeOnSelectHandler(onSelect),
+          onCheckedChange: handleCheckedChange(value),
+          checked: values.includes(value),
+          textValue: "",
+          ...rest,
+          children: /* @__PURE__ */ jsx(
+            BaseMenuItem,
+            {
+              rightSlot: /* @__PURE__ */ jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsx(CheckIcon, {}) }),
+              children: content
+            }
+          )
+        },
+        index
+      ))
+    ] }) }),
+    separator && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
+  ] });
+});
+const BaseSubMenuGroup = memo(function BaseSubMenuGroup2({
+  subTriggerElement: SubTriggerElement,
+  groupElement: GroupElement,
+  subContentElement: SubContentElement,
+  subElement: SubElement,
+  items,
+  separator = false,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GroupElement, { ...rest, children: items.map(({ triggerIndicator, content, subContent, className, ...rest2 }, index) => /* @__PURE__ */ jsxs(SubElement, { children: [
+      /* @__PURE__ */ jsx(SubTriggerElement, { className: classNames(className, styles$h.RemoveOutline), ...rest2, children: /* @__PURE__ */ jsx(BaseMenuItem, { rightSlot: triggerIndicator, children: content }) }),
+      /* @__PURE__ */ jsx(SubContentElement, { sideOffset: 10, children: subContent })
+    ] }, index)) }),
+    separator && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
+  ] });
+});
+const DropdownMenuItemGroup = memo(function DropdownMenuItemGroup2(props) {
+  return /* @__PURE__ */ jsx(BaseItemGroup, { ...props, itemElement: RadixDropdownMenu.Item, groupElement: RadixDropdownMenu.Group });
+});
+const DropdownMenuSelectGroup = memo(function DropdownMenuSelectGroup2(props) {
+  return /* @__PURE__ */ jsx(
+    BaseSelectGroup,
+    {
+      ...props,
+      itemElement: RadixDropdownMenu.CheckboxItem,
+      groupElement: RadixDropdownMenu.Group,
+      itemIndicatorElement: RadixDropdownMenu.ItemIndicator
+    }
+  );
+});
+const DropdownMenuMultiSelectGroup = memo(function DropdownMenuMultiSelectGroup2(props) {
+  return /* @__PURE__ */ jsx(
+    BaseMultiSelectGroup,
+    {
+      ...props,
+      itemElement: RadixDropdownMenu.CheckboxItem,
+      groupElement: RadixDropdownMenu.Group,
+      itemIndicatorElement: RadixDropdownMenu.ItemIndicator
+    }
+  );
+});
+const DropdownMenuSubMenuGroup = memo(function DropdownMenuSubMenuGroup2(props) {
+  return /* @__PURE__ */ jsx(
+    BaseSubMenuGroup,
+    {
+      ...props,
+      groupElement: RadixDropdownMenu.Group,
+      subElement: DropdownMenu$1.Sub,
+      subTriggerElement: RadixDropdownMenu.SubTrigger,
+      subContentElement: DropdownMenu$1.SubContent
+    }
+  );
+});
+const DropdownItemMenu = memo(
   forwardRef(
     ({
-      className,
       trigger,
       items,
-      label,
       disabled,
-      severity = "info",
-      modal = false,
       closeOnSelect = true,
+      filterValue,
+      onFilterValueChange,
+      placeholder,
       ...rest
-    }, ref) => {
-      const severityColor = useSeverityColor(severity);
-      return /* @__PURE__ */ jsxs(DropdownMenu$2.Root, { modal, children: [
-        /* @__PURE__ */ jsx(DropdownMenu$2.Trigger, { disabled, children: trigger }),
-        /* @__PURE__ */ jsx(
-          DropdownMenu$2.Content,
+    }) => {
+      const infoColor = useSeverityColor("info");
+      return /* @__PURE__ */ jsxs(DropdownMenu$1.Root, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { disabled, children: trigger }),
+        /* @__PURE__ */ jsx(DropdownMenu$1.Content, { variant: "soft", ...rest, color: infoColor, children: /* @__PURE__ */ jsx(
+          DropdownMenuItemGroup,
           {
-            className: classNames("overmap-dropdown", className),
-            color: severityColor,
-            variant: "soft",
-            ref,
-            ...rest,
-            children: /* @__PURE__ */ jsxs(
-              Flex$1,
-              {
-                className: styles$h.DropdownMenu,
-                direction: "column",
-                height: "max-content",
-                width: "max-content",
-                children: [
-                  !!label && /* @__PURE__ */ jsx(DropdownMenu$2.Label, { children: label }),
-                  items.map(({ closeOnSelect: itemCloseOnSelect, separator, ...rest2 }, index) => /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Box, { className: styles$h.DropdownMenuItemWrapper, children: /* @__PURE__ */ jsx(
-                      DropdownMenuItem,
-                      {
-                        closeOnSelect: itemCloseOnSelect ?? closeOnSelect,
-                        ...rest2
-                      },
-                      index
-                    ) }),
-                    !!separator && /* @__PURE__ */ jsx(Box, { className: styles$h.DropdownMenuSeparatorWrapper, children: /* @__PURE__ */ jsx(Separator, { size: "4" }) })
-                  ] }, index))
-                ]
-              }
-            )
+            items,
+            filterValue,
+            onFilterValueChange,
+            placeholder,
+            closeOnSelect
           }
-        )
+        ) })
       ] });
     }
   )
 );
-const DropdownSelect$1 = "_DropdownSelect_k517z_1";
-const BorderBottom = "_BorderBottom_k517z_8";
-const DropdownSelectInputWrapper = "_DropdownSelectInputWrapper_k517z_12";
-const DropdownSelectInput = "_DropdownSelectInput_k517z_12";
-const DropdownSelectItem = "_DropdownSelectItem_k517z_27";
-const styles$g = {
-  DropdownSelect: DropdownSelect$1,
-  BorderBottom,
-  DropdownSelectInputWrapper,
-  DropdownSelectInput,
-  DropdownSelectItem
-};
-const TIMEOUT = 150;
 const DropdownSelect = memo(
   forwardRef(
     ({
@@ -761,84 +997,59 @@ const DropdownSelect = memo(
       onFilterValueChange,
       closeOnSelect = true,
       icons,
-      severity = "info"
+      side
     }, ref) => {
-      const infoColor = useSeverityColor(severity);
-      const handleOnSelect = useCallback(
-        (itemValue) => (event) => {
-          onValueChange(value !== itemValue ? itemValue : void 0);
-          if (!closeOnSelect)
-            event.preventDefault();
-        },
-        [value, closeOnSelect, onValueChange]
-      );
-      const handleOnInputValueChange = useCallback(
-        (event) => {
-          if (onFilterValueChange)
-            onFilterValueChange(event.target.value);
-        },
-        [onFilterValueChange]
-      );
-      const handleOnOpenChange = useCallback(
-        (open) => {
-          if (!open && onFilterValueChange) {
-            setTimeout(() => {
-              onFilterValueChange("");
-            }, TIMEOUT);
+      const infoColor = useSeverityColor("info");
+      return /* @__PURE__ */ jsxs(DropdownMenu$1.Root, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { disabled, children: trigger }),
+        /* @__PURE__ */ jsx(DropdownMenu$1.Content, { ref, variant: "soft", color: infoColor, side, children: /* @__PURE__ */ jsx(
+          DropdownMenuSelectGroup,
+          {
+            value,
+            onValueChange,
+            items,
+            closeOnSelect,
+            filterValue,
+            onFilterValueChange,
+            placeholder,
+            icons
           }
-        },
-        [onFilterValueChange]
-      );
-      return /* @__PURE__ */ jsxs(DropdownMenu$2.Root, { onOpenChange: handleOnOpenChange, children: [
-        /* @__PURE__ */ jsx(DropdownMenu$2.Trigger, { disabled, children: trigger }),
-        /* @__PURE__ */ jsx(DropdownMenu$2.Content, { ref, variant: "soft", color: infoColor, className: styles$g.Test, children: /* @__PURE__ */ jsxs(Flex, { className: styles$g.DropdownSelect, direction: "column", children: [
-          filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsx(Box, { px: "1", className: classNames({ [styles$g.BorderBottom]: items.length !== 0 }), children: /* @__PURE__ */ jsxs(
-            TextField.Root,
-            {
-              className: styles$g.DropdownSelectInputWrapper,
-              size: "2",
-              variant: "soft",
-              children: [
-                !!icons && !!icons.leftInputIcon && /* @__PURE__ */ jsx(TextField.Slot, { children: icons.leftInputIcon }),
-                /* @__PURE__ */ jsx(
-                  TextField.Input,
-                  {
-                    className: styles$g.DropdownSelectInput,
-                    value: filterValue,
-                    placeholder,
-                    onChange: handleOnInputValueChange
-                  }
-                ),
-                !!icons && !!icons.rightInputIcon && /* @__PURE__ */ jsx(TextField.Slot, { children: icons.rightInputIcon })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Box, { p: items.length !== 0 ? "1" : "0", children: /* @__PURE__ */ jsx(Flex, { direction: "column", children: items.map(({ content, value: itemValue }, index) => {
-            return /* @__PURE__ */ jsx(
-              DropdownMenu$2.Item,
-              {
-                className: styles$g.DropdownSelectItem,
-                onSelect: handleOnSelect(itemValue),
-                textValue: "",
-                asChild: true,
-                children: /* @__PURE__ */ jsxs(Flex, { align: "center", height: "max-content", width: "100%", gap: "5", children: [
-                  /* @__PURE__ */ jsx(Box, { grow: "1", children: content }),
-                  /* @__PURE__ */ jsx(
-                    Flex,
-                    {
-                      justify: "center",
-                      align: "center",
-                      height: "max-content",
-                      width: "4",
-                      children: value === itemValue && (icons && (icons == null ? void 0 : icons.selectedItemIcon) ? icons.selectedItemIcon : /* @__PURE__ */ jsx(CheckIcon, {}))
-                    }
-                  )
-                ] })
-              },
-              index
-            );
-          }) }) })
-        ] }) })
+        ) })
+      ] });
+    }
+  )
+);
+const DropdownMultiSelect = memo(
+  forwardRef(
+    ({
+      trigger,
+      items,
+      disabled = false,
+      values,
+      onValueChange,
+      placeholder,
+      filterValue,
+      onFilterValueChange,
+      closeOnSelect = false,
+      icons,
+      side
+    }, ref) => {
+      const infoColor = useSeverityColor("info");
+      return /* @__PURE__ */ jsxs(DropdownMenu$1.Root, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { disabled, children: trigger }),
+        /* @__PURE__ */ jsx(DropdownMenu$1.Content, { ref, variant: "soft", color: infoColor, side, children: /* @__PURE__ */ jsx(
+          DropdownMenuMultiSelectGroup,
+          {
+            values,
+            onValueChange,
+            items,
+            closeOnSelect,
+            filterValue,
+            onFilterValueChange,
+            placeholder,
+            icons
+          }
+        ) })
       ] });
     }
   )
@@ -858,7 +1069,7 @@ const HoverUtility = memo(function Root({ children }) {
   });
 });
 const fluid = "_fluid_7n1wr_1";
-const styles$f = {
+const styles$g = {
   fluid
 };
 const _Select = forwardRef(function Select2({
@@ -882,7 +1093,7 @@ const _Select = forwardRef(function Select2({
     Select$1.Trigger,
     {
       className: classNames(className, {
-        [styles$f.fluid]: fluid2
+        [styles$g.fluid]: fluid2
       }),
       id,
       ref,
@@ -894,7 +1105,7 @@ const _Select = forwardRef(function Select2({
     Select$1.Content,
     {
       side,
-      className: styles$f.contentDefault,
+      className: styles$g.contentDefault,
       position: "popper",
       variant: variant !== "surface" ? "soft" : "solid",
       color: itemSeverityColor,
@@ -1007,7 +1218,7 @@ const MultiSelect = memo(
     );
   })
 );
-const styles$e = {
+const styles$f = {
   "default": "_default_u936h_1"
 };
 const _Switch = forwardRef(function Switch2({ className, severity = "primary", icon, defaultChecked = false, onCheckedChange, ...rest }, ref) {
@@ -1035,7 +1246,7 @@ const _Switch = forwardRef(function Switch2({ className, severity = "primary", i
     /* @__PURE__ */ jsx(
       Switch$1,
       {
-        className: classNames("overmap-switch", className, styles$e.default),
+        className: classNames("overmap-switch", className, styles$f.default),
         ref: ref ? ref : fallbackRef,
         color: severityColor,
         radius: "full",
@@ -1053,7 +1264,7 @@ const right$2 = "_right_1onyo_7";
 const resizeHandle$1 = "_resizeHandle_1onyo_10";
 const left$2 = "_left_1onyo_13";
 const overlay = "_overlay_1onyo_33";
-const styles$d = {
+const styles$e = {
   sidebarContent,
   right: right$2,
   resizeHandle: resizeHandle$1,
@@ -1086,13 +1297,13 @@ const _Sidebar = forwardRef(function Sidebar2({
     setContainer(tempContainer);
   }, [containerSelector]);
   return /* @__PURE__ */ jsx(RadixDialogPrimitive.Root, { open, modal, children: /* @__PURE__ */ jsxs(RadixDialogPrimitive.Portal, { container, children: [
-    overlay2 && /* @__PURE__ */ jsx(RadixDialogPrimitive.Overlay, { className: classNames(styles$d.overlay) }),
+    overlay2 && /* @__PURE__ */ jsx(RadixDialogPrimitive.Overlay, { className: classNames(styles$e.overlay) }),
     /* @__PURE__ */ jsx(
       RadixDialogPrimitive.Content,
       {
-        className: classNames("overmap-sidebar", "rt-DialogContent", styles$d.sidebarContent, {
-          [styles$d.left]: isLeft,
-          [styles$d.right]: isRight
+        className: classNames("overmap-sidebar", "rt-DialogContent", styles$e.sidebarContent, {
+          [styles$e.left]: isLeft,
+          [styles$e.right]: isRight
         }),
         ref,
         asChild: true,
@@ -1104,7 +1315,7 @@ const _Sidebar = forwardRef(function Sidebar2({
             maxWidth,
             defaultSize: defaultSidebarSize,
             enable: { right: resizable2 && isLeft, left: resizable2 && isRight },
-            handleClasses: { left: styles$d.resizeHandle, right: styles$d.resizeHandle },
+            handleClasses: { left: styles$e.resizeHandle, right: styles$e.resizeHandle },
             handleComponent: {
               right: /* @__PURE__ */ jsx(DragHandleDots2Icon, {}),
               left: /* @__PURE__ */ jsx(DragHandleDots2Icon, {})
@@ -1126,7 +1337,7 @@ const exitActive = "_exitActive_1iy9c_22";
 const exitDone = "_exitDone_1iy9c_32";
 const resizable$1 = "_resizable_1iy9c_41";
 const slideOutOverlay = "_slideOutOverlay_1iy9c_47";
-const styles$c = {
+const styles$d = {
   outerContent,
   enter,
   right: right$1,
@@ -1170,23 +1381,23 @@ const SlideOut = memo(function SlideOut2({
     {
       in: open,
       classNames: {
-        enter: styles$c.enter,
-        enterActive: styles$c.enterActive,
-        exitActive: styles$c.exitActive,
-        exitDone: styles$c.exitDone
+        enter: styles$d.enter,
+        enterActive: styles$d.enterActive,
+        exitActive: styles$d.exitActive,
+        exitDone: styles$d.exitDone
       },
       timeout: TRANSITION_DURATION$1,
       nodeRef: contentRef,
       unmountOnExit: true,
       mountOnEnter: true,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        overlay2 && /* @__PURE__ */ jsx("div", { className: classNames("overamp-slide-out-overlay", styles$c.slideOutOverlay) }),
+        overlay2 && /* @__PURE__ */ jsx("div", { className: classNames("overamp-slide-out-overlay", styles$d.slideOutOverlay) }),
         /* @__PURE__ */ jsx(DismissableLayer, { disableOutsidePointerEvents: modal, asChild: true, ...rest, children: /* @__PURE__ */ jsx(
           Flex$1,
           {
-            className: classNames("overmap-slide-out", className, styles$c.outerContent, {
-              [styles$c.left]: isSideLeft,
-              [styles$c.right]: isSideRight
+            className: classNames("overmap-slide-out", className, styles$d.outerContent, {
+              [styles$d.left]: isSideLeft,
+              [styles$d.right]: isSideRight
             }),
             style: { "--slide-out-width": `${slideOutWidth}px` },
             height: "100%",
@@ -1200,7 +1411,7 @@ const SlideOut = memo(function SlideOut2({
             children: /* @__PURE__ */ jsx(
               Resizable,
               {
-                className: styles$c.resizable,
+                className: styles$d.resizable,
                 defaultSize: { width: slideOutWidth, height: "100%" },
                 onResize: handleResize,
                 enable: { right: resizable2 && isSideLeft, left: resizable2 && isSideRight },
@@ -1222,7 +1433,7 @@ const noLeftIcon = "_noLeftIcon_1octa_14";
 const noRightIcon = "_noRightIcon_1octa_18";
 const ghost$1 = "_ghost_1octa_22";
 const charCount$1 = "_charCount_1octa_40";
-const styles$b = {
+const styles$c = {
   accommodateCharCount,
   wrapper: wrapper$2,
   "default": "_default_1octa_10",
@@ -1249,9 +1460,9 @@ const _Input = forwardRef(function Input2({
   return /* @__PURE__ */ jsxs(
     TextField.Root,
     {
-      className: classNames(styles$b.wrapper, className, {
-        [styles$b.ghost]: variant === "ghost",
-        [styles$b.accommodateCharCount]: displayInputLength
+      className: classNames(styles$c.wrapper, className, {
+        [styles$c.ghost]: variant === "ghost",
+        [styles$c.accommodateCharCount]: displayInputLength
       }),
       size: computedSize,
       variant: variant !== "ghost" ? variant : void 0,
@@ -1261,9 +1472,9 @@ const _Input = forwardRef(function Input2({
         /* @__PURE__ */ jsx(
           TextField.Input,
           {
-            className: classNames(styles$b.default, {
-              [styles$b.noLeftIcon]: !leftSlot,
-              [styles$b.noRightIcon]: !rightSlot
+            className: classNames(styles$c.default, {
+              [styles$c.noLeftIcon]: !leftSlot,
+              [styles$c.noRightIcon]: !rightSlot
             }),
             ref,
             value,
@@ -1274,7 +1485,7 @@ const _Input = forwardRef(function Input2({
           }
         ),
         rightSlot && /* @__PURE__ */ jsx(TextField.Slot, { children: rightSlot }),
-        displayInputLength && /* @__PURE__ */ jsx(Text$1, { as: "p", className: styles$b.charCount, size: "1", color: "gray", children: rest.maxLength !== void 0 ? `${valueAsString == null ? void 0 : valueAsString.length}/${rest.maxLength}` : `${valueAsString == null ? void 0 : valueAsString.length}` })
+        displayInputLength && /* @__PURE__ */ jsx(Text$2, { as: "p", className: styles$c.charCount, size: "1", color: "gray", children: rest.maxLength !== void 0 ? `${valueAsString == null ? void 0 : valueAsString.length}/${rest.maxLength}` : `${valueAsString == null ? void 0 : valueAsString.length}` })
       ]
     }
   );
@@ -1290,7 +1501,7 @@ const IconColorUtility = memo(function IconColorUtility2({
     () => ({
       "data-accent-color": severity && severityColor ? severityColor : color ? color : "gray",
       style: {
-        color: "var(--accent-a11)"
+        color: "var(--accent-a9)"
       }
     }),
     [color, severity, severityColor]
@@ -1298,7 +1509,7 @@ const IconColorUtility = memo(function IconColorUtility2({
   return cloneElement(children, { ...childProps });
 });
 const wrapper$1 = "_wrapper_tmtz0_1";
-const styles$a = {
+const styles$b = {
   wrapper: wrapper$1
 };
 const _Popover = forwardRef(function Popover2({ className, trigger, open, onOpenChange, defaultOpen = false, modal = false, children, ...rest }, ref) {
@@ -1308,7 +1519,7 @@ const _Popover = forwardRef(function Popover2({ className, trigger, open, onOpen
       Popover$1.Content,
       {
         ref,
-        className: classNames("overmap-popover", className, styles$a.wrapper),
+        className: classNames("overmap-popover", className, styles$b.wrapper),
         ...rest,
         children: children(Popover$1.Close)
       }
@@ -1323,7 +1534,7 @@ const right = "_right_1ssf2_18";
 const resizable = "_resizable_1ssf2_23";
 const resizeHandle = "_resizeHandle_1ssf2_28";
 const panelMainContent = "_panelMainContent_1ssf2_48";
-const styles$9 = {
+const styles$a = {
   wrapper,
   panelContent,
   left,
@@ -1509,7 +1720,7 @@ const LeftAndRightPanels = memo(function Panels({
   return /* @__PURE__ */ jsxs(
     Flex$1,
     {
-      className: styles$9.wrapper,
+      className: styles$a.wrapper,
       style: { minWidth: `${leftMinWidth + rightMinWidth}px` },
       ref: wrapperRef,
       width: "100%",
@@ -1531,7 +1742,7 @@ const LeftAndRightPanels = memo(function Panels({
               Box,
               {
                 ref: leftPanelRef,
-                className: classNames(styles$9.panelContent, styles$9.left),
+                className: classNames(styles$a.panelContent, styles$a.left),
                 style: leftPanelTransitionStyles[state],
                 width: "auto",
                 height: "100%",
@@ -1540,7 +1751,7 @@ const LeftAndRightPanels = memo(function Panels({
                 children: /* @__PURE__ */ jsx(
                   Resizable,
                   {
-                    className: styles$9.resizable,
+                    className: styles$a.resizable,
                     size: {
                       width: leftPanelWidth,
                       height: "100%"
@@ -1549,7 +1760,7 @@ const LeftAndRightPanels = memo(function Panels({
                     enable: { right: (resizeable == null ? void 0 : resizeable.left) !== void 0 ? resizeable.left : true },
                     minWidth: leftMinWidth,
                     maxWidth: leftPanelMaxWidth,
-                    handleClasses: { right: classNames(styles$9.resizeHandle, styles$9.left) },
+                    handleClasses: { right: classNames(styles$a.resizeHandle, styles$a.left) },
                     handleComponent: {
                       right: /* @__PURE__ */ jsx(DragHandleDots2Icon, { height: "14px", width: "14px" })
                     },
@@ -1560,7 +1771,7 @@ const LeftAndRightPanels = memo(function Panels({
             )
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$9.panelMainContent, children }),
+        /* @__PURE__ */ jsx("div", { className: styles$a.panelMainContent, children }),
         /* @__PURE__ */ jsx(
           Transition,
           {
@@ -1574,7 +1785,7 @@ const LeftAndRightPanels = memo(function Panels({
               Box,
               {
                 ref: rightPanelRef,
-                className: classNames(styles$9.panelContent, styles$9.right),
+                className: classNames(styles$a.panelContent, styles$a.right),
                 style: rightPanelTransitionStyles[state],
                 width: "auto",
                 height: "100%",
@@ -1583,13 +1794,13 @@ const LeftAndRightPanels = memo(function Panels({
                 children: /* @__PURE__ */ jsx(
                   Resizable,
                   {
-                    className: styles$9.resizable,
+                    className: styles$a.resizable,
                     size: { width: rightPanelWidth, height: "100%" },
                     onResizeStop: handleResizeRightPanel,
                     enable: { left: (resizeable == null ? void 0 : resizeable.right) !== void 0 ? resizeable.right : true },
                     minWidth: rightMinWidth,
                     maxWidth: rightPanelMaxWidth,
-                    handleClasses: { left: classNames(styles$9.resizeHandle, styles$9.right) },
+                    handleClasses: { left: classNames(styles$a.resizeHandle, styles$a.right) },
                     handleComponent: { left: /* @__PURE__ */ jsx(DragHandleDots2Icon, { height: "14px", width: "14px" }) },
                     children: rightPanel
                   }
@@ -1607,7 +1818,7 @@ const pageTitle = "_pageTitle_spfw7_12";
 const buttonContainer = "_buttonContainer_spfw7_17";
 const optionsButtonContainer = "_optionsButtonContainer_spfw7_22";
 const optionsButton = "_optionsButton_spfw7_22";
-const styles$8 = {
+const styles$9 = {
   multiPagePopover,
   pageTitle,
   buttonContainer,
@@ -1621,7 +1832,7 @@ function getMultiPagePopoverContent(popoverOption, setMultiPagePopoverContent, d
   const optionButtons = popoverOption.options.map((option, i) => /* @__PURE__ */ jsx(
     Button2,
     {
-      className: classNames(styles$8.optionsButton, option.buttonClassName),
+      className: classNames(styles$9.optionsButton, option.buttonClassName),
       variant: "ghost",
       radius: "large",
       style: {
@@ -1637,12 +1848,12 @@ function getMultiPagePopoverContent(popoverOption, setMultiPagePopoverContent, d
     `${option.value}-page-${page}-button-${i}`
   ));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    popoverOption.title && /* @__PURE__ */ jsx("div", { className: styles$8.pageTitle, children: popoverOption.title }),
+    popoverOption.title && /* @__PURE__ */ jsx("div", { className: styles$9.pageTitle, children: popoverOption.title }),
     popoverOption.content,
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames(styles$8.optionsButtonContainer, popoverOption.buttonsContainerClassName),
+        className: classNames(styles$9.optionsButtonContainer, popoverOption.buttonsContainerClassName),
         style: {
           flexDirection: direction === "vertical" ? "column" : "row"
         },
@@ -1660,7 +1871,7 @@ const _MultiPagePopover = forwardRef(function MultiPagePopover2({ page, classNam
   return /* @__PURE__ */ jsx(
     Popover,
     {
-      className: classNames(styles$8.multiPagePopover, className),
+      className: classNames(styles$9.multiPagePopover, className),
       ref,
       onOpenAutoFocus: resetPopoverContent,
       onCloseAutoFocus: resetPopoverContent,
@@ -1672,7 +1883,7 @@ const _MultiPagePopover = forwardRef(function MultiPagePopover2({ page, classNam
 const MultiPagePopover = React.memo(_MultiPagePopover);
 const charCount = "_charCount_1lz28_1";
 const ghost = "_ghost_1lz28_5";
-const styles$7 = {
+const styles$8 = {
   charCount,
   ghost
 };
@@ -1708,7 +1919,7 @@ const _TextArea = forwardRef(function TextArea2({
       TextArea$1,
       {
         className: classNames("overmap-textarea", className, {
-          [styles$7.ghost]: variant === "ghost"
+          [styles$8.ghost]: variant === "ghost"
         }),
         style: { resize },
         variant: variant !== "ghost" ? variant : void 0,
@@ -1718,7 +1929,7 @@ const _TextArea = forwardRef(function TextArea2({
         ...rest
       }
     ),
-    displayInputLength && /* @__PURE__ */ jsx(Text$1, { as: "p", className: styles$7.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
+    displayInputLength && /* @__PURE__ */ jsx(Text$2, { as: "p", className: styles$8.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
   ] });
 });
 const TextArea = memo(_TextArea);
@@ -1764,7 +1975,7 @@ const _ToggleGroup = forwardRef(function ToggleGroup2({
   );
 });
 const ToggleGroup = memo(_ToggleGroup);
-const styles$6 = {
+const styles$7 = {
   "default": "_default_xqvoc_1"
 };
 const Root2 = memo(
@@ -1772,7 +1983,7 @@ const Root2 = memo(
     return /* @__PURE__ */ jsx(
       Root$2,
       {
-        className: classNames(className, "overmap-toolbar", styles$6.default),
+        className: classNames(className, "overmap-toolbar", styles$7.default),
         ref,
         asChild: true,
         ...rest,
@@ -1813,7 +2024,7 @@ const actionButton = "_actionButton_1i6bp_20";
 const ToastRoot = "_ToastRoot_1i6bp_24";
 const slideIn = "_slideIn_1i6bp_1";
 const swipeOut = "_swipeOut_1i6bp_1";
-const styles$5 = {
+const styles$6 = {
   ToastViewport,
   actionButton,
   ToastRoot,
@@ -1831,7 +2042,7 @@ const _Toast = forwardRef(function Toast2({ title, description, icon, severity =
     },
     [onClose]
   );
-  return /* @__PURE__ */ jsx(RadixToast.Root, { asChild: true, ref, ...rest, open, type: sensitivity, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(Callout.Root, { className: styles$5.ToastRoot, variant: "surface", color, size, children: /* @__PURE__ */ jsxs(Flex$1, { width: "100%", align: "center", gap: "4", justify: "between", children: [
+  return /* @__PURE__ */ jsx(RadixToast.Root, { asChild: true, ref, ...rest, open, type: sensitivity, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(Callout.Root, { className: styles$6.ToastRoot, variant: "surface", color, size, children: /* @__PURE__ */ jsxs(Flex$1, { width: "100%", align: "center", gap: "4", justify: "between", children: [
     /* @__PURE__ */ jsxs(Flex$1, { align: "center", gap: "3", children: [
       /* @__PURE__ */ jsx(Callout.Icon, { children: icon }),
       /* @__PURE__ */ jsxs(Flex$1, { direction: "column", gap: "2", children: [
@@ -1839,7 +2050,7 @@ const _Toast = forwardRef(function Toast2({ title, description, icon, severity =
           /* @__PURE__ */ jsx(RadixToast.Title, { asChild: true, children: /* @__PURE__ */ jsx(Callout.Text, { size: "3", weight: "medium", children: title }) }),
           /* @__PURE__ */ jsx(RadixToast.Description, { asChild: true, children: /* @__PURE__ */ jsx(Callout.Text, { children: description }) })
         ] }),
-        action && /* @__PURE__ */ jsx(RadixToast.Action, { className: styles$5.actionButton, altText: action.altText, asChild: true, children: action.content })
+        action && /* @__PURE__ */ jsx(RadixToast.Action, { className: styles$6.actionButton, altText: action.altText, asChild: true, children: action.content })
       ] })
     ] }),
     /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "Close", variant: "ghost", severity, children: /* @__PURE__ */ jsx(Cross2Icon, {}) }) })
@@ -1915,11 +2126,11 @@ const ToastProvider = memo(function ToastContextProvider({
   }, []);
   return /* @__PURE__ */ jsx(ToastContext.Provider, { value: toastContextValue, children: /* @__PURE__ */ jsxs(ToastProvider$1, { ...rest, children: [
     children,
-    /* @__PURE__ */ jsx(ToastViewport$1, { className: classNames(className, styles$5.ToastViewport), hotkey }),
+    /* @__PURE__ */ jsx(ToastViewport$1, { className: classNames(className, styles$6.ToastViewport), hotkey }),
     toasts.map(({ id, onClose, ...toastProps }) => /* @__PURE__ */ jsx(Toast, { ...toastProps, onClose: () => handleCloseToast(id, 0, onClose) }, id))
   ] }) });
 });
-const styles$4 = {
+const styles$5 = {
   "default": "_default_1odpt_1"
 };
 const Tooltip = memo(
@@ -1927,7 +2138,7 @@ const Tooltip = memo(
     return /* @__PURE__ */ jsx(
       Tooltip$1,
       {
-        className: classNames("overmap-tooltip", className, styles$4.default),
+        className: classNames("overmap-tooltip", className, styles$5.default),
         ref,
         content: /* @__PURE__ */ jsx(Flex$1, { align: "center", gap: "1", width: "max-content", height: "max-content", justify: "center", children: content }),
         ...rest,
@@ -1937,18 +2148,18 @@ const Tooltip = memo(
   })
 );
 const noWrap = "_noWrap_1wpa5_1";
-const styles$3 = {
+const styles$4 = {
   noWrap
 };
-const Text = memo(
+const Text$1 = memo(
   forwardRef(({ className, noWrap: noWrap2, severity, as, ...props }, ref) => {
     const color = useSeverityColor(severity);
     return /* @__PURE__ */ jsx(
-      Text$1,
+      Text$2,
       {
         ref,
         as,
-        className: classNames(className, { [styles$3.noWrap]: noWrap2 }),
+        className: classNames(className, { [styles$4.noWrap]: noWrap2 }),
         color,
         ...props
       }
@@ -1962,6 +2173,60 @@ const DefaultTheme = memo(
     return /* @__PURE__ */ jsx(Theme, { panelBackground, radius: radius2, ref, ...rest });
   })
 );
+const light = "_light_1u8fs_1";
+const bold = "_bold_1u8fs_8";
+const full = "_full_1u8fs_15";
+const Text = "_Text_1u8fs_22";
+const styles$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);
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -2840,9 +3105,6 @@ const _Table = forwardRef(function Table2(props, ref) {
   const tableSelect = useRowSelect(
     tableData,
     {
-      // Don't know what the type is for these parameters. Not specified in the React Table Library docs
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
       onChange: (_action, state) => {
         setSelected(state.ids);
       }
@@ -2992,8 +3254,8 @@ const _Table = forwardRef(function Table2(props, ref) {
   }, [rowsPerPage, rows.length, numRowsPerPage, pagination, showPageNavigation]);
   return /* @__PURE__ */ jsxs("div", { className: classNames({ [styles$1.tableContainer]: showContainer }), children: [
     (!!title || !!description) && /* @__PURE__ */ jsxs("div", { className: styles$1.headerContainer, children: [
-      !!title && /* @__PURE__ */ jsx(Text, { weight: "bold", size: "7", children: title }),
-      !!description && /* @__PURE__ */ jsx(Text, { as: "div", children: description })
+      !!title && /* @__PURE__ */ jsx(Text$1, { weight: "bold", size: "7", children: title }),
+      !!description && /* @__PURE__ */ jsx(Text$1, { as: "div", children: description })
     ] }),
     showTopBar && /* @__PURE__ */ jsxs(Flex$1, { justify: "between", className: styles$1.tableTopContainer, children: [
       /* @__PURE__ */ jsxs(Flex$1, { gap: "2", children: [
@@ -3077,7 +3339,7 @@ const _Table = forwardRef(function Table2(props, ref) {
                         cellClassName,
                         row[column.id].className
                       ),
-                      children: /* @__PURE__ */ jsx(Text, { children: row[column.id].label })
+                      children: /* @__PURE__ */ jsx(Text$1, { children: row[column.id].label })
                     },
                     i
                   ))
@@ -3322,10 +3584,15 @@ export {
   Code,
   ConfirmEditInput,
   Container,
-  ContextMenu,
   DefaultTheme,
   Dialog,
+  DropdownItemMenu,
   DropdownMenu,
+  DropdownMenuItemGroup,
+  DropdownMenuMultiSelectGroup,
+  DropdownMenuSelectGroup,
+  DropdownMenuSubMenuGroup,
+  DropdownMultiSelect,
   DropdownSelect,
   Em,
   Flex,
@@ -3337,7 +3604,7 @@ export {
   IconColorUtility,
   Input,
   Inset2 as Inset,
-  Kbd,
+  Kbd2 as Kbd,
   LeftAndRightPanels,
   Link2 as Link,
   MultiPagePopover,
@@ -3361,7 +3628,7 @@ export {
   Switch,
   Table,
   Tabs,
-  Text,
+  Text$1 as Text,
   TextArea,
   TextField2 as TextField,
   Theme2 as Theme,
@@ -3377,9 +3644,13 @@ export {
   updateThemeAppearanceClass,
   useAlertDialog,
   useDiscardAlertDialog,
+  useKeyboardShortcut,
   useSeverityColor,
+  useStopEventPropagation,
+  useTextFilter,
   useThemeContext2 as useThemeContext,
   useToast,
-  useViewportSize
+  useViewportSize,
+  useWrapCallbackInDialogClose
 };
 //# sourceMappingURL=blocks.js.map