@overmap-ai/blocks 1.0.6 → 1.0.7

package/dist/blocks.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@radix-ui/colors"), require("@radix-ui/react-icons"), require("@radix-ui/themes"), require("react/jsx-runtime"), require("react"), require("react-responsive"), require("@radix-ui/react-dialog"), require("re-resizable"), require("@radix-ui/react-dismissable-layer"), require("react-transition-group"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("react-dom"), require("@table-library/react-table-library/table"), require("@table-library/react-table-library/theme"), require("@table-library/react-table-library/sort"), require("@table-library/react-table-library/select"), require("@table-library/react-table-library/pagination"), require("react-device-detect")) : typeof define === "function" && define.amd ? define(["exports", "@radix-ui/colors", "@radix-ui/react-icons", "@radix-ui/themes", "react/jsx-runtime", "react", "react-responsive", "@radix-ui/react-dialog", "re-resizable", "@radix-ui/react-dismissable-layer", "react-transition-group", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "react-dom", "@table-library/react-table-library/table", "@table-library/react-table-library/theme", "@table-library/react-table-library/sort", "@table-library/react-table-library/select", "@table-library/react-table-library/pagination", "react-device-detect"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.colors, global.reactIcons, global.themes, global.jsxRuntime, global.React, global.reactResponsive, global.RadixDialogPrimitive, global.reResizable, global.reactDismissableLayer, global.reactTransitionGroup, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.reactDom, global.table$1, global.theme, global.sort, global.select, global.pagination, global.reactDeviceDetect));
-})(this, function(exports2, colors, reactIcons, themes, jsxRuntime, React, reactResponsive, RadixDialogPrimitive, reResizable, reactDismissableLayer, reactTransitionGroup, reactToggleGroup, reactToolbar, RadixToast, reactDom, table$1, theme, sort, select, pagination, reactDeviceDetect) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@radix-ui/colors"), require("@radix-ui/react-icons"), require("@radix-ui/themes"), require("react/jsx-runtime"), require("react"), require("react-responsive"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-dialog"), require("re-resizable"), require("@radix-ui/react-dismissable-layer"), require("react-transition-group"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("react-dom"), require("@table-library/react-table-library/table"), require("@table-library/react-table-library/theme"), require("@table-library/react-table-library/sort"), require("@table-library/react-table-library/select"), require("@table-library/react-table-library/pagination"), require("react-device-detect")) : typeof define === "function" && define.amd ? define(["exports", "@radix-ui/colors", "@radix-ui/react-icons", "@radix-ui/themes", "react/jsx-runtime", "react", "react-responsive", "@radix-ui/react-dropdown-menu", "@radix-ui/react-dialog", "re-resizable", "@radix-ui/react-dismissable-layer", "react-transition-group", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "react-dom", "@table-library/react-table-library/table", "@table-library/react-table-library/theme", "@table-library/react-table-library/sort", "@table-library/react-table-library/select", "@table-library/react-table-library/pagination", "react-device-detect"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.colors, global.reactIcons, global.themes, global.jsxRuntime, global.React, global.reactResponsive, global.RadixDropdownMenu, global.RadixDialogPrimitive, global.reResizable, global.reactDismissableLayer, global.reactTransitionGroup, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.reactDom, global.table$1, global.theme, global.sort, global.select, global.pagination, global.reactDeviceDetect));
+})(this, function(exports2, colors, reactIcons, themes, jsxRuntime, React, reactResponsive, RadixDropdownMenu, RadixDialogPrimitive, reResizable, reactDismissableLayer, reactTransitionGroup, reactToggleGroup, reactToolbar, RadixToast, reactDom, table$1, theme, sort, select, pagination, reactDeviceDetect) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -18,6 +18,7 @@
     n.default = e;
     return Object.freeze(n);
   }
+  const RadixDropdownMenu__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixDropdownMenu);
   const RadixDialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixDialogPrimitive);
   const RadixToast__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixToast);
   function getDefaultExportFromCjs(x) {
@@ -174,6 +175,19 @@
     }
     return tempChildrenToArray;
   };
+  const useStopEventPropagation = () => {
+    return React.useCallback((event) => {
+      event.stopPropagation();
+    }, []);
+  };
+  function useTextFilter(values, filterFunction) {
+    const [filteredOptions, setFilteredOptions] = React.useState([]);
+    const [filterValue, setFilterValue] = React.useState("");
+    React.useEffect(() => {
+      setFilteredOptions(values.filter((value) => filterFunction(value, filterValue)));
+    }, [filterFunction, filterValue, values]);
+    return [filteredOptions, filterValue, setFilterValue];
+  }
   const _Badge = React.forwardRef(function Badge2({ className, severity = "primary", color, children, ...rest }, ref) {
     const severityColor = useSeverityColor(severity);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -560,6 +574,15 @@
       ] });
     })
   );
+  const useWrapCallbackInDialogClose = (callback, closeOptions) => {
+    return React.useCallback(
+      (...arg) => (closeDialog) => {
+        callback(...arg);
+        closeDialog(closeOptions);
+      },
+      [callback, closeOptions]
+    );
+  };
   const Title = (props) => /* @__PURE__ */ jsxRuntime.jsx(themes.AlertDialog.Title, { mb: "0", ...props });
   const AlertDialogContent$1 = (props) => {
     const { title, description, actionText = "Confirm", cancelText = "Cancel", onAction, onCancel, severity } = props;
@@ -625,128 +648,341 @@
       [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 = React.memo(
+    React.forwardRef(({ trigger, disabled, children, ...rest }) => {
+      const infoColor = useSeverityColor("info");
+      return /* @__PURE__ */ jsxRuntime.jsxs(themes.DropdownMenu.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Trigger, { disabled, children: trigger }),
+        /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.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 = React.memo(
+    React.forwardRef(({ children, rightSlot }, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$h.BaseMenuItem, ref, position: "relative", px: "2", height: "6", children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "6", height: "100%", align: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Flex, { grow: "1", height: "100%", align: "center", gap: "1", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(Flex, { height: "100%", width: "4", align: "center", justify: "end", children: rightSlot })
+      ] }) });
+    })
+  );
+  const BaseMenuInput = React.memo(
+    React.forwardRef((props) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$h.BaseMenuInput, px: "2", height: "6", width: "max-content", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { ...props, variant: "ghost" }) });
+    })
+  );
+  const BaseMenuSeparator = React.memo(function BaseMenuSeparator2() {
+    return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$h.BaseMenuSeparator, width: "100%", py: "1", children: /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { height: "0", width: "100%" }) });
+  });
+  const useCloseOnSelectHandler = (closeOnSelect) => {
+    return React.useCallback(
+      (onSelect) => (event) => {
+        if (!closeOnSelect) {
+          event.preventDefault();
+        }
+        if (onSelect)
+          onSelect(event);
+      },
+      [closeOnSelect]
+    );
   };
-  const _Separator = React.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__ */ jsxRuntime.jsxs(
-      themes.Flex,
-      {
-        ref,
-        width: orientation === "horizontal" ? computedSizing : "max-content",
-        height: orientation === "vertical" ? computedSizing : "max-content",
-        direction: orientation === "vertical" ? "column" : "row",
-        align: "center",
-        gap,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest }),
-          text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "span", size: "1", weight, color: severityColor, children: text }),
-            /* @__PURE__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest })
-          ] })
-        ]
-      }
+  const useTextFilterChangeHandler = () => {
+    return React.useCallback(
+      (onTextFilterChange) => (event) => {
+        if (onTextFilterChange)
+          onTextFilterChange(event.target.value);
+      },
+      []
     );
-  });
-  const Separator = React.memo(_Separator);
-  const DropdownMenuItem = React.memo(function DropdownMenuItem2({
-    content,
-    onSelect,
-    closeOnSelect,
+  };
+  const BaseItemGroup = React.memo(function BaseItemGroup2({
+    items,
+    closeOnSelect = true,
+    groupElement: GroupElement,
+    itemElement: ItemElement,
+    filterValue,
+    onFilterValueChange,
+    placeholder,
+    icons,
+    separator,
     ...rest
   }) {
-    const handleSelect = React.useCallback(
-      (event) => {
-        if (onSelect)
-          onSelect(event);
-        if (!closeOnSelect)
-          event.preventDefault();
+    const closeOnSelectHandler = useCloseOnSelectHandler(closeOnSelect);
+    const textFilterChangeHandler = useTextFilterChangeHandler();
+    React.useEffect(() => {
+      return () => {
+        if (onFilterValueChange) {
+          onFilterValueChange("");
+        }
+      };
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(GroupElement, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", children: [
+        filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
+        ] }),
+        items.map(({ content, shortcut, className, onSelect, ...rest2 }, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          ItemElement,
+          {
+            className: classNames(className, styles$h.RemoveOutline),
+            onSelect: closeOnSelectHandler(onSelect),
+            ...rest2,
+            children: /* @__PURE__ */ jsxRuntime.jsx(BaseMenuItem, { rightSlot: shortcut == null ? void 0 : shortcut.map((key, index2) => /* @__PURE__ */ jsxRuntime.jsx(themes.Kbd, { children: key }, index2)), children: content })
+          },
+          index
+        ))
+      ] }) }),
+      separator && /* @__PURE__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
+    ] });
+  });
+  const BaseSelectGroup = React.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);
+    React.useEffect(() => {
+      return () => {
+        if (onFilterValueChange) {
+          onFilterValueChange("");
+        }
+      };
+    }, []);
+    const handleCheckedChange = React.useCallback(
+      (value2) => (checked) => {
+        onValueChange(checked ? value2 : null);
       },
-      [closeOnSelect, onSelect]
+      [onValueChange]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Item, { className: styles$h.DropdownMenuItem, textValue: "", onSelect: handleSelect, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { align: "center", gap: "1", children: content }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(GroupElement, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", children: [
+        filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BaseMenuInput,
+            {
+              value: filterValue,
+              onChange: textFilterChangeHandler(onFilterValueChange),
+              placeholder,
+              leftSlot: icons == null ? void 0 : icons.left,
+              rightSlot: (icons == null ? void 0 : icons.right) || /* @__PURE__ */ jsxRuntime.jsx(reactIcons.MagnifyingGlassIcon, {})
+            }
+          ),
+          items.length !== 0 && /* @__PURE__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
+        ] }),
+        items.map(({ content, value: itemValue, onSelect, ...rest }, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          ItemElement,
+          {
+            className: styles$h.RemoveOutline,
+            checked: itemValue === value,
+            onCheckedChange: handleCheckedChange(itemValue),
+            onSelect: closeOnSelectHandler(onSelect),
+            textValue: "",
+            ...rest,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              BaseMenuItem,
+              {
+                rightSlot: /* @__PURE__ */ jsxRuntime.jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) }),
+                children: content
+              }
+            )
+          },
+          index
+        ))
+      ] }) }),
+      separator && /* @__PURE__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
+    ] });
   });
-  const DropdownMenu = React.memo(
+  const BaseMultiSelectGroup = React.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();
+    React.useEffect(() => {
+      return () => {
+        if (onFilterValueChange) {
+          onFilterValueChange("");
+        }
+      };
+    }, []);
+    const handleCheckedChange = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(GroupElement, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", children: [
+        filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
+        ] }),
+        items.map(({ value, content, className, onSelect, ...rest }, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          ItemElement,
+          {
+            className: classNames(className, styles$h.RemoveOutline),
+            onSelect: closeOnSelectHandler(onSelect),
+            onCheckedChange: handleCheckedChange(value),
+            checked: values.includes(value),
+            textValue: "",
+            ...rest,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              BaseMenuItem,
+              {
+                rightSlot: /* @__PURE__ */ jsxRuntime.jsx(ItemIndicatorElement, { asChild: true, children: selectedIndicator || /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) }),
+                children: content
+              }
+            )
+          },
+          index
+        ))
+      ] }) }),
+      separator && /* @__PURE__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
+    ] });
+  });
+  const BaseSubMenuGroup = React.memo(function BaseSubMenuGroup2({
+    subTriggerElement: SubTriggerElement,
+    groupElement: GroupElement,
+    subContentElement: SubContentElement,
+    subElement: SubElement,
+    items,
+    separator = false,
+    ...rest
+  }) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(GroupElement, { ...rest, children: items.map(({ triggerIndicator, content, subContent, className, ...rest2 }, index) => /* @__PURE__ */ jsxRuntime.jsxs(SubElement, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SubTriggerElement, { className: classNames(className, styles$h.RemoveOutline), ...rest2, children: /* @__PURE__ */ jsxRuntime.jsx(BaseMenuItem, { rightSlot: triggerIndicator, children: content }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SubContentElement, { sideOffset: 10, children: subContent })
+      ] }, index)) }),
+      separator && /* @__PURE__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
+    ] });
+  });
+  const DropdownMenuItemGroup = React.memo(function DropdownMenuItemGroup2(props) {
+    return /* @__PURE__ */ jsxRuntime.jsx(BaseItemGroup, { ...props, itemElement: RadixDropdownMenu__namespace.Item, groupElement: RadixDropdownMenu__namespace.Group });
+  });
+  const DropdownMenuSelectGroup = React.memo(function DropdownMenuSelectGroup2(props) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseSelectGroup,
+      {
+        ...props,
+        itemElement: RadixDropdownMenu__namespace.CheckboxItem,
+        groupElement: RadixDropdownMenu__namespace.Group,
+        itemIndicatorElement: RadixDropdownMenu__namespace.ItemIndicator
+      }
+    );
+  });
+  const DropdownMenuMultiSelectGroup = React.memo(function DropdownMenuMultiSelectGroup2(props) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseMultiSelectGroup,
+      {
+        ...props,
+        itemElement: RadixDropdownMenu__namespace.CheckboxItem,
+        groupElement: RadixDropdownMenu__namespace.Group,
+        itemIndicatorElement: RadixDropdownMenu__namespace.ItemIndicator
+      }
+    );
+  });
+  const DropdownMenuSubMenuGroup = React.memo(function DropdownMenuSubMenuGroup2(props) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseSubMenuGroup,
+      {
+        ...props,
+        groupElement: RadixDropdownMenu__namespace.Group,
+        subElement: themes.DropdownMenu.Sub,
+        subTriggerElement: RadixDropdownMenu__namespace.SubTrigger,
+        subContentElement: themes.DropdownMenu.SubContent
+      }
+    );
+  });
+  const DropdownItemMenu = React.memo(
     React.forwardRef(
       ({
-        className,
         trigger,
         items,
-        label,
         disabled,
-        severity = "info",
-        modal = false,
         closeOnSelect = true,
+        filterValue,
+        onFilterValueChange,
+        placeholder,
         ...rest
-      }, ref) => {
-        const severityColor = useSeverityColor(severity);
-        return /* @__PURE__ */ jsxRuntime.jsxs(themes.DropdownMenu.Root, { modal, children: [
+      }) => {
+        const infoColor = useSeverityColor("info");
+        return /* @__PURE__ */ jsxRuntime.jsxs(themes.DropdownMenu.Root, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Trigger, { disabled, children: trigger }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            themes.DropdownMenu.Content,
+          /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Content, { variant: "soft", ...rest, color: infoColor, children: /* @__PURE__ */ jsxRuntime.jsx(
+            DropdownMenuItemGroup,
             {
-              className: classNames("overmap-dropdown", className),
-              color: severityColor,
-              variant: "soft",
-              ref,
-              ...rest,
-              children: /* @__PURE__ */ jsxRuntime.jsxs(
-                themes.Flex,
-                {
-                  className: styles$h.DropdownMenu,
-                  direction: "column",
-                  height: "max-content",
-                  width: "max-content",
-                  children: [
-                    !!label && /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Label, { children: label }),
-                    items.map(({ closeOnSelect: itemCloseOnSelect, separator, ...rest2 }, index) => /* @__PURE__ */ jsxRuntime.jsxs(themes.Box, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$h.DropdownMenuItemWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
-                        DropdownMenuItem,
-                        {
-                          closeOnSelect: itemCloseOnSelect ?? closeOnSelect,
-                          ...rest2
-                        },
-                        index
-                      ) }),
-                      !!separator && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$h.DropdownMenuSeparatorWrapper, children: /* @__PURE__ */ jsxRuntime.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 = React.memo(
     React.forwardRef(
       ({
@@ -760,84 +996,59 @@
         onFilterValueChange,
         closeOnSelect = true,
         icons,
-        severity = "info"
+        side
       }, ref) => {
-        const infoColor = useSeverityColor(severity);
-        const handleOnSelect = React.useCallback(
-          (itemValue) => (event) => {
-            onValueChange(value !== itemValue ? itemValue : void 0);
-            if (!closeOnSelect)
-              event.preventDefault();
-          },
-          [value, closeOnSelect, onValueChange]
-        );
-        const handleOnInputValueChange = React.useCallback(
-          (event) => {
-            if (onFilterValueChange)
-              onFilterValueChange(event.target.value);
-          },
-          [onFilterValueChange]
-        );
-        const handleOnOpenChange = React.useCallback(
-          (open) => {
-            if (!open && onFilterValueChange) {
-              setTimeout(() => {
-                onFilterValueChange("");
-              }, TIMEOUT);
+        const infoColor = useSeverityColor("info");
+        return /* @__PURE__ */ jsxRuntime.jsxs(themes.DropdownMenu.Root, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Trigger, { disabled, children: trigger }),
+          /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Content, { ref, variant: "soft", color: infoColor, side, children: /* @__PURE__ */ jsxRuntime.jsx(
+            DropdownMenuSelectGroup,
+            {
+              value,
+              onValueChange,
+              items,
+              closeOnSelect,
+              filterValue,
+              onFilterValueChange,
+              placeholder,
+              icons
             }
-          },
-          [onFilterValueChange]
-        );
-        return /* @__PURE__ */ jsxRuntime.jsxs(themes.DropdownMenu.Root, { onOpenChange: handleOnOpenChange, children: [
+          ) })
+        ] });
+      }
+    )
+  );
+  const DropdownMultiSelect = React.memo(
+    React.forwardRef(
+      ({
+        trigger,
+        items,
+        disabled = false,
+        values,
+        onValueChange,
+        placeholder,
+        filterValue,
+        onFilterValueChange,
+        closeOnSelect = false,
+        icons,
+        side
+      }, ref) => {
+        const infoColor = useSeverityColor("info");
+        return /* @__PURE__ */ jsxRuntime.jsxs(themes.DropdownMenu.Root, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Trigger, { disabled, children: trigger }),
-          /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Content, { ref, variant: "soft", color: infoColor, className: styles$g.Test, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { className: styles$g.DropdownSelect, direction: "column", children: [
-            filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { px: "1", className: classNames({ [styles$g.BorderBottom]: items.length !== 0 }), children: /* @__PURE__ */ jsxRuntime.jsxs(
-              themes.TextField.Root,
-              {
-                className: styles$g.DropdownSelectInputWrapper,
-                size: "2",
-                variant: "soft",
-                children: [
-                  !!icons && !!icons.leftInputIcon && /* @__PURE__ */ jsxRuntime.jsx(themes.TextField.Slot, { children: icons.leftInputIcon }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    themes.TextField.Input,
-                    {
-                      className: styles$g.DropdownSelectInput,
-                      value: filterValue,
-                      placeholder,
-                      onChange: handleOnInputValueChange
-                    }
-                  ),
-                  !!icons && !!icons.rightInputIcon && /* @__PURE__ */ jsxRuntime.jsx(themes.TextField.Slot, { children: icons.rightInputIcon })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { p: items.length !== 0 ? "1" : "0", children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", children: items.map(({ content, value: itemValue }, index) => {
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                themes.DropdownMenu.Item,
-                {
-                  className: styles$g.DropdownSelectItem,
-                  onSelect: handleOnSelect(itemValue),
-                  textValue: "",
-                  asChild: true,
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", height: "max-content", width: "100%", gap: "5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { grow: "1", children: content }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Flex,
-                      {
-                        justify: "center",
-                        align: "center",
-                        height: "max-content",
-                        width: "4",
-                        children: value === itemValue && (icons && (icons == null ? void 0 : icons.selectedItemIcon) ? icons.selectedItemIcon : /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}))
-                      }
-                    )
-                  ] })
-                },
-                index
-              );
-            }) }) })
-          ] }) })
+          /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Content, { ref, variant: "soft", color: infoColor, side, children: /* @__PURE__ */ jsxRuntime.jsx(
+            DropdownMenuMultiSelectGroup,
+            {
+              values,
+              onValueChange,
+              items,
+              closeOnSelect,
+              filterValue,
+              onFilterValueChange,
+              placeholder,
+              icons
+            }
+          ) })
         ] });
       }
     )
@@ -857,7 +1068,7 @@
     });
   });
   const fluid = "_fluid_7n1wr_1";
-  const styles$f = {
+  const styles$g = {
     fluid
   };
   const _Select = React.forwardRef(function Select2({
@@ -881,7 +1092,7 @@
       themes.Select.Trigger,
       {
         className: classNames(className, {
-          [styles$f.fluid]: fluid2
+          [styles$g.fluid]: fluid2
         }),
         id,
         ref,
@@ -893,7 +1104,7 @@
       themes.Select.Content,
       {
         side,
-        className: styles$f.contentDefault,
+        className: styles$g.contentDefault,
         position: "popper",
         variant: variant !== "surface" ? "soft" : "solid",
         color: itemSeverityColor,
@@ -1006,7 +1217,7 @@
       );
     })
   );
-  const styles$e = {
+  const styles$f = {
     "default": "_default_u936h_1"
   };
   const _Switch = React.forwardRef(function Switch2({ className, severity = "primary", icon, defaultChecked = false, onCheckedChange, ...rest }, ref) {
@@ -1034,7 +1245,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         themes.Switch,
         {
-          className: classNames("overmap-switch", className, styles$e.default),
+          className: classNames("overmap-switch", className, styles$f.default),
           ref: ref ? ref : fallbackRef,
           color: severityColor,
           radius: "full",
@@ -1052,7 +1263,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,
@@ -1085,13 +1296,13 @@
       setContainer(tempContainer);
     }, [containerSelector]);
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Root, { open, modal, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixDialogPrimitive__namespace.Portal, { container, children: [
-      overlay2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Overlay, { className: classNames(styles$d.overlay) }),
+      overlay2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Overlay, { className: classNames(styles$e.overlay) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         RadixDialogPrimitive__namespace.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,
@@ -1103,7 +1314,7 @@
               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__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, {}),
                 left: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, {})
@@ -1125,7 +1336,7 @@
   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,
@@ -1169,23 +1380,23 @@
       {
         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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          overlay2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames("overamp-slide-out-overlay", styles$c.slideOutOverlay) }),
+          overlay2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames("overamp-slide-out-overlay", styles$d.slideOutOverlay) }),
           /* @__PURE__ */ jsxRuntime.jsx(reactDismissableLayer.DismissableLayer, { disableOutsidePointerEvents: modal, asChild: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
             themes.Flex,
             {
-              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%",
@@ -1199,7 +1410,7 @@
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 reResizable.Resizable,
                 {
-                  className: styles$c.resizable,
+                  className: styles$d.resizable,
                   defaultSize: { width: slideOutWidth, height: "100%" },
                   onResize: handleResize,
                   enable: { right: resizable2 && isSideLeft, left: resizable2 && isSideRight },
@@ -1221,7 +1432,7 @@
   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",
@@ -1248,9 +1459,9 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       themes.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,
@@ -1260,9 +1471,9 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             themes.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,
@@ -1273,7 +1484,7 @@
             }
           ),
           rightSlot && /* @__PURE__ */ jsxRuntime.jsx(themes.TextField.Slot, { children: rightSlot }),
-          displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { 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__ */ jsxRuntime.jsx(themes.Text, { 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}` })
         ]
       }
     );
@@ -1289,7 +1500,7 @@
       () => ({
         "data-accent-color": severity && severityColor ? severityColor : color ? color : "gray",
         style: {
-          color: "var(--accent-a11)"
+          color: "var(--accent-a9)"
         }
       }),
       [color, severity, severityColor]
@@ -1297,7 +1508,7 @@
     return React.cloneElement(children, { ...childProps });
   });
   const wrapper$1 = "_wrapper_tmtz0_1";
-  const styles$a = {
+  const styles$b = {
     wrapper: wrapper$1
   };
   const _Popover = React.forwardRef(function Popover2({ className, trigger, open, onOpenChange, defaultOpen = false, modal = false, children, ...rest }, ref) {
@@ -1307,7 +1518,7 @@
         themes.Popover.Content,
         {
           ref,
-          className: classNames("overmap-popover", className, styles$a.wrapper),
+          className: classNames("overmap-popover", className, styles$b.wrapper),
           ...rest,
           children: children(themes.Popover.Close)
         }
@@ -1322,7 +1533,7 @@
   const resizable = "_resizable_1ssf2_23";
   const resizeHandle = "_resizeHandle_1ssf2_28";
   const panelMainContent = "_panelMainContent_1ssf2_48";
-  const styles$9 = {
+  const styles$a = {
     wrapper,
     panelContent,
     left,
@@ -1508,7 +1719,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       themes.Flex,
       {
-        className: styles$9.wrapper,
+        className: styles$a.wrapper,
         style: { minWidth: `${leftMinWidth + rightMinWidth}px` },
         ref: wrapperRef,
         width: "100%",
@@ -1530,7 +1741,7 @@
                 themes.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%",
@@ -1539,7 +1750,7 @@
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     reResizable.Resizable,
                     {
-                      className: styles$9.resizable,
+                      className: styles$a.resizable,
                       size: {
                         width: leftPanelWidth,
                         height: "100%"
@@ -1548,7 +1759,7 @@
                       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__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, { height: "14px", width: "14px" })
                       },
@@ -1559,7 +1770,7 @@
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$9.panelMainContent, children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$a.panelMainContent, children }),
           /* @__PURE__ */ jsxRuntime.jsx(
             reactTransitionGroup.Transition,
             {
@@ -1573,7 +1784,7 @@
                 themes.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%",
@@ -1582,13 +1793,13 @@
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     reResizable.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__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, { height: "14px", width: "14px" }) },
                       children: rightPanel
                     }
@@ -1606,7 +1817,7 @@
   const buttonContainer = "_buttonContainer_spfw7_17";
   const optionsButtonContainer = "_optionsButtonContainer_spfw7_22";
   const optionsButton = "_optionsButton_spfw7_22";
-  const styles$8 = {
+  const styles$9 = {
     multiPagePopover,
     pageTitle,
     buttonContainer,
@@ -1620,7 +1831,7 @@
     const optionButtons = popoverOption.options.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
       Button2,
       {
-        className: classNames(styles$8.optionsButton, option.buttonClassName),
+        className: classNames(styles$9.optionsButton, option.buttonClassName),
         variant: "ghost",
         radius: "large",
         style: {
@@ -1636,12 +1847,12 @@
       `${option.value}-page-${page}-button-${i}`
     ));
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      popoverOption.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$8.pageTitle, children: popoverOption.title }),
+      popoverOption.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$9.pageTitle, children: popoverOption.title }),
       popoverOption.content,
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames(styles$8.optionsButtonContainer, popoverOption.buttonsContainerClassName),
+          className: classNames(styles$9.optionsButtonContainer, popoverOption.buttonsContainerClassName),
           style: {
             flexDirection: direction === "vertical" ? "column" : "row"
           },
@@ -1659,7 +1870,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
-        className: classNames(styles$8.multiPagePopover, className),
+        className: classNames(styles$9.multiPagePopover, className),
         ref,
         onOpenAutoFocus: resetPopoverContent,
         onCloseAutoFocus: resetPopoverContent,
@@ -1671,7 +1882,7 @@
   const MultiPagePopover = React.memo(_MultiPagePopover);
   const charCount = "_charCount_1lz28_1";
   const ghost = "_ghost_1lz28_5";
-  const styles$7 = {
+  const styles$8 = {
     charCount,
     ghost
   };
@@ -1707,7 +1918,7 @@
         themes.TextArea,
         {
           className: classNames("overmap-textarea", className, {
-            [styles$7.ghost]: variant === "ghost"
+            [styles$8.ghost]: variant === "ghost"
           }),
           style: { resize },
           variant: variant !== "ghost" ? variant : void 0,
@@ -1717,7 +1928,7 @@
           ...rest
         }
       ),
-      displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$7.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
+      displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$8.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
     ] });
   });
   const TextArea = React.memo(_TextArea);
@@ -1763,7 +1974,7 @@
     );
   });
   const ToggleGroup = React.memo(_ToggleGroup);
-  const styles$6 = {
+  const styles$7 = {
     "default": "_default_xqvoc_1"
   };
   const Root = React.memo(
@@ -1771,7 +1982,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         reactToolbar.Root,
         {
-          className: classNames(className, "overmap-toolbar", styles$6.default),
+          className: classNames(className, "overmap-toolbar", styles$7.default),
           ref,
           asChild: true,
           ...rest,
@@ -1812,7 +2023,7 @@
   const ToastRoot = "_ToastRoot_1i6bp_24";
   const slideIn = "_slideIn_1i6bp_1";
   const swipeOut = "_swipeOut_1i6bp_1";
-  const styles$5 = {
+  const styles$6 = {
     ToastViewport,
     actionButton,
     ToastRoot,
@@ -1830,7 +2041,7 @@
       },
       [onClose]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Root, { asChild: true, ref, ...rest, open, type: sensitivity, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Callout.Root, { className: styles$5.ToastRoot, variant: "surface", color, size, children: /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { width: "100%", align: "center", gap: "4", justify: "between", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Root, { asChild: true, ref, ...rest, open, type: sensitivity, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Callout.Root, { className: styles$6.ToastRoot, variant: "surface", color, size, children: /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { width: "100%", align: "center", gap: "4", justify: "between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(themes.Callout.Icon, { children: icon }),
         /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "2", children: [
@@ -1838,7 +2049,7 @@
             /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Callout.Text, { size: "3", weight: "medium", children: title }) }),
             /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Callout.Text, { children: description }) })
           ] }),
-          action && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { className: styles$5.actionButton, altText: action.altText, asChild: true, children: action.content })
+          action && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { className: styles$6.actionButton, altText: action.altText, asChild: true, children: action.content })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { "aria-label": "Close", variant: "ghost", severity, children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross2Icon, {}) }) })
@@ -1914,11 +2125,11 @@
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Provider, { value: toastContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixToast.ToastProvider, { ...rest, children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(RadixToast.ToastViewport, { className: classNames(className, styles$5.ToastViewport), hotkey }),
+      /* @__PURE__ */ jsxRuntime.jsx(RadixToast.ToastViewport, { className: classNames(className, styles$6.ToastViewport), hotkey }),
       toasts.map(({ id, onClose, ...toastProps }) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toastProps, onClose: () => handleCloseToast(id, 0, onClose) }, id))
     ] }) });
   });
-  const styles$4 = {
+  const styles$5 = {
     "default": "_default_1odpt_1"
   };
   const Tooltip = React.memo(
@@ -1926,7 +2137,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         themes.Tooltip,
         {
-          className: classNames("overmap-tooltip", className, styles$4.default),
+          className: classNames("overmap-tooltip", className, styles$5.default),
           ref,
           content: /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { align: "center", gap: "1", width: "max-content", height: "max-content", justify: "center", children: content }),
           ...rest,
@@ -1936,10 +2147,10 @@
     })
   );
   const noWrap = "_noWrap_1wpa5_1";
-  const styles$3 = {
+  const styles$4 = {
     noWrap
   };
-  const Text = React.memo(
+  const Text$1 = React.memo(
     React.forwardRef(({ className, noWrap: noWrap2, severity, as, ...props }, ref) => {
       const color = useSeverityColor(severity);
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1947,7 +2158,7 @@
         {
           ref,
           as,
-          className: classNames(className, { [styles$3.noWrap]: noWrap2 }),
+          className: classNames(className, { [styles$4.noWrap]: noWrap2 }),
           color,
           ...props
         }
@@ -1961,6 +2172,60 @@
       return /* @__PURE__ */ jsxRuntime.jsx(themes.Theme, { panelBackground, radius: radius2, ref, ...rest });
     })
   );
+  const light = "_light_1u8fs_1";
+  const bold = "_bold_1u8fs_8";
+  const full = "_full_1u8fs_15";
+  const Text = "_Text_1u8fs_22";
+  const styles$3 = {
+    light,
+    bold,
+    full,
+    Text
+  };
+  const SeparatorSizeMapping = {
+    "1": "max-content",
+    "2": "max-content",
+    "3": "max-content",
+    "4": "100%"
+  };
+  const _Separator = React.forwardRef(function Separator2({
+    className,
+    severity = "info",
+    textWeight = "light",
+    gap = "1",
+    text,
+    orientation = "horizontal",
+    size,
+    weight = "medium",
+    ...rest
+  }, ref) {
+    const computedSizing = useResponsiveMapping(size, SeparatorSizeMapping);
+    const severityColor = useSeverityColor(severity);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      themes.Flex,
+      {
+        className: classNames("overmap-separator", className, {
+          [styles$3.light]: weight === "light",
+          [styles$3.bold]: weight === "bold",
+          [styles$3.full]: weight === "full"
+        }),
+        ref,
+        width: orientation === "horizontal" ? computedSizing : "max-content",
+        height: orientation === "vertical" ? computedSizing : "max-content",
+        direction: orientation === "vertical" ? "column" : "row",
+        align: "center",
+        gap,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest }),
+          text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { className: styles$3.Text, as: "span", size: "1", weight: textWeight, color: severityColor, children: text }),
+            /* @__PURE__ */ jsxRuntime.jsx(themes.Separator, { size, orientation, color: severityColor, ...rest })
+          ] })
+        ]
+      }
+    );
+  });
+  const Separator = React.memo(_Separator);
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function(target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -2839,9 +3104,6 @@
     const tableSelect = select.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);
         }
@@ -2991,8 +3253,8 @@
     }, [rowsPerPage, rows.length, numRowsPerPage, pagination$1, showPageNavigation]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames({ [styles$1.tableContainer]: showContainer }), children: [
       (!!title || !!description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$1.headerContainer, children: [
-        !!title && /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "bold", size: "7", children: title }),
-        !!description && /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "div", children: description })
+        !!title && /* @__PURE__ */ jsxRuntime.jsx(Text$1, { weight: "bold", size: "7", children: title }),
+        !!description && /* @__PURE__ */ jsxRuntime.jsx(Text$1, { as: "div", children: description })
       ] }),
       showTopBar && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { justify: "between", className: styles$1.tableTopContainer, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { gap: "2", children: [
@@ -3076,7 +3338,7 @@
                           cellClassName,
                           row[column.id].className
                         ),
-                        children: /* @__PURE__ */ jsxRuntime.jsx(Text, { children: row[column.id].label })
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Text$1, { children: row[column.id].label })
                       },
                       i
                     ))
@@ -3337,10 +3599,6 @@
     enumerable: true,
     get: () => themes.Container
   });
-  Object.defineProperty(exports2, "ContextMenu", {
-    enumerable: true,
-    get: () => themes.ContextMenu
-  });
   Object.defineProperty(exports2, "Em", {
     enumerable: true,
     get: () => themes.Em
@@ -3437,7 +3695,13 @@
   exports2.ConfirmEditInput = ConfirmEditInput;
   exports2.DefaultTheme = DefaultTheme;
   exports2.Dialog = Dialog;
+  exports2.DropdownItemMenu = DropdownItemMenu;
   exports2.DropdownMenu = DropdownMenu;
+  exports2.DropdownMenuItemGroup = DropdownMenuItemGroup;
+  exports2.DropdownMenuMultiSelectGroup = DropdownMenuMultiSelectGroup;
+  exports2.DropdownMenuSelectGroup = DropdownMenuSelectGroup;
+  exports2.DropdownMenuSubMenuGroup = DropdownMenuSubMenuGroup;
+  exports2.DropdownMultiSelect = DropdownMultiSelect;
   exports2.DropdownSelect = DropdownSelect;
   exports2.Flex = Flex;
   exports2.HoverUtility = HoverUtility;
@@ -3457,7 +3721,7 @@
   exports2.Spinner = Spinner;
   exports2.Switch = Switch;
   exports2.Table = Table;
-  exports2.Text = Text;
+  exports2.Text = Text$1;
   exports2.TextArea = TextArea;
   exports2.Toast = Toast;
   exports2.ToastContext = ToastContext;
@@ -3468,9 +3732,13 @@
   exports2.divButtonProps = divButtonProps;
   exports2.useAlertDialog = useAlertDialog;
   exports2.useDiscardAlertDialog = useDiscardAlertDialog;
+  exports2.useKeyboardShortcut = useKeyboardShortcut;
   exports2.useSeverityColor = useSeverityColor;
+  exports2.useStopEventPropagation = useStopEventPropagation;
+  exports2.useTextFilter = useTextFilter;
   exports2.useToast = useToast;
   exports2.useViewportSize = useViewportSize;
+  exports2.useWrapCallbackInDialogClose = useWrapCallbackInDialogClose;
   Object.keys(colors).forEach((k) => {
     if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k))
       Object.defineProperty(exports2, k, {