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

package/dist/blocks.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@radix-ui/themes"), require("react"), require("react-responsive"), require("@radix-ui/react-icons"), require("@radix-ui/react-context-menu"), require("@radix-ui/react-dropdown-menu"), require("react-device-detect"), require("@radix-ui/react-dialog"), require("re-resizable"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-slot"), require("@radix-ui/react-dismissable-layer"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("react-error-boundary"), require("feather-icons-react"), require("@table-library/react-table-library/table.js"), require("@table-library/react-table-library/theme.js"), require("@table-library/react-table-library/sort.js"), require("@table-library/react-table-library/select.js"), require("@table-library/react-table-library/pagination.js")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@radix-ui/themes", "react", "react-responsive", "@radix-ui/react-icons", "@radix-ui/react-context-menu", "@radix-ui/react-dropdown-menu", "react-device-detect", "@radix-ui/react-dialog", "re-resizable", "react-transition-group", "react-dom", "@radix-ui/react-slot", "@radix-ui/react-dismissable-layer", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "react-error-boundary", "feather-icons-react", "@table-library/react-table-library/table.js", "@table-library/react-table-library/theme.js", "@table-library/react-table-library/sort.js", "@table-library/react-table-library/select.js", "@table-library/react-table-library/pagination.js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.jsxRuntime, global.themes, global.React, global.reactResponsive, global.reactIcons, global.RadixContextMenu, global.RadixDropdownMenu, global.reactDeviceDetect, global.RadixDialogPrimitive, global.reResizable, global.reactTransitionGroup, global.ReactDOM, global.reactSlot, global.reactDismissableLayer, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.reactErrorBoundary, global.FeatherIcon, global.table_js, global.theme_js, global.sort_js, global.select_js, global.pagination_js));
-})(this, function(exports2, jsxRuntime, themes, React, reactResponsive, reactIcons, RadixContextMenu, RadixDropdownMenu, reactDeviceDetect, RadixDialogPrimitive, reResizable, reactTransitionGroup, ReactDOM, reactSlot, reactDismissableLayer, reactToggleGroup, reactToolbar, RadixToast, reactErrorBoundary, FeatherIcon, table_js, theme_js, sort_js, select_js, pagination_js) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@radix-ui/themes"), require("react"), require("react-responsive"), require("@react-hook/resize-observer"), require("@radix-ui/react-icons"), require("@radix-ui/react-dialog"), require("@radix-ui/react-context-menu"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-slot"), require("react-device-detect"), require("re-resizable"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-dismissable-layer"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("@radix-ui/react-toggle"), require("react-error-boundary"), require("feather-icons-react"), require("@table-library/react-table-library/table.js"), require("@table-library/react-table-library/theme.js"), require("@table-library/react-table-library/sort.js"), require("@table-library/react-table-library/select.js"), require("@table-library/react-table-library/pagination.js")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@radix-ui/themes", "react", "react-responsive", "@react-hook/resize-observer", "@radix-ui/react-icons", "@radix-ui/react-dialog", "@radix-ui/react-context-menu", "@radix-ui/react-dropdown-menu", "@radix-ui/react-slot", "react-device-detect", "re-resizable", "react-transition-group", "react-dom", "@radix-ui/react-dismissable-layer", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "@radix-ui/react-toggle", "react-error-boundary", "feather-icons-react", "@table-library/react-table-library/table.js", "@table-library/react-table-library/theme.js", "@table-library/react-table-library/sort.js", "@table-library/react-table-library/select.js", "@table-library/react-table-library/pagination.js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.jsxRuntime, global.themes, global.React, global.reactResponsive, global.useResizeObserver, global.reactIcons, global.RadixDialogPrimitive, global.RadixContextMenu, global.RadixDropdownMenu, global.reactSlot, global.reactDeviceDetect, global.reResizable, global.reactTransitionGroup, global.ReactDOM, global.reactDismissableLayer, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.Toggle, global.reactErrorBoundary, global.FeatherIcon, global.table_js, global.theme_js, global.sort_js, global.select_js, global.pagination_js));
+})(this, function(exports2, jsxRuntime, themes, React, reactResponsive, useResizeObserver, reactIcons, RadixDialogPrimitive, RadixContextMenu, RadixDropdownMenu, reactSlot, reactDeviceDetect, reResizable, reactTransitionGroup, ReactDOM, reactDismissableLayer, reactToggleGroup, reactToolbar, RadixToast, Toggle, reactErrorBoundary, FeatherIcon, table_js, theme_js, sort_js, select_js, pagination_js) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -18,10 +18,11 @@
     n.default = e;
     return Object.freeze(n);
   }
+  const RadixDialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixDialogPrimitive);
   const RadixContextMenu__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixContextMenu);
   const RadixDropdownMenu__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixDropdownMenu);
-  const RadixDialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixDialogPrimitive);
   const RadixToast__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadixToast);
+  const Toggle__namespace = /* @__PURE__ */ _interopNamespaceDefault(Toggle);
   function getDefaultExportFromCjs(x) {
     return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
   }
@@ -189,12 +190,38 @@
     }, [filterFunction, filterValue, values]);
     return [filteredOptions, filterValue, setFilterValue];
   }
+  const useSize = (target) => {
+    const [size, setSize] = React.useState();
+    React.useLayoutEffect(() => {
+      var _a;
+      setSize((_a = target.current) == null ? void 0 : _a.getBoundingClientRect());
+    }, [target]);
+    const handleResize = React.useCallback((entry) => {
+      const rect = entry.contentRect;
+      setSize(rect);
+    }, []);
+    useResizeObserver(target, handleResize);
+    return size;
+  };
   const splitTextForEllipsisAndExpansion = (text, numChars) => {
     const indexOfSpace = text.indexOf(" ", numChars);
     const firstLine = indexOfSpace === -1 ? text : text.substring(0, indexOfSpace);
     const secondLine = indexOfSpace === -1 ? "" : text.substring(indexOfSpace);
     return [firstLine, secondLine];
   };
+  function useOvermapResponsiveValue(value) {
+    const { size } = useViewportSize();
+    if (value === null || value === void 0)
+      return value;
+    if (typeof value === "object") {
+      if (!("initial" in value)) {
+        throw new Error("Expected initial property to be set in Responsive object");
+      } else {
+        return value[size];
+      }
+    }
+    return value;
+  }
   const _Badge = React.forwardRef(function Badge2({ className, severity = "primary", color, children, ...rest }, ref) {
     const severityColor = useSeverityColor(severity);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -212,7 +239,7 @@
   const zeroMinWidth = "_zeroMinWidth_curjh_1";
   const zeroMinHeight = "_zeroMinHeight_curjh_5";
   const radius = "_radius_curjh_9";
-  const styles$n = {
+  const styles$p = {
     zeroMinWidth,
     zeroMinHeight,
     radius
@@ -224,9 +251,9 @@
           themes.Flex,
           {
             className: classNames(className, {
-              [styles$n.radius]: radius2,
-              [styles$n.zeroMinWidth]: zeroMinWidth2,
-              [styles$n.zeroMinHeight]: zeroMinHeight2
+              [styles$p.radius]: radius2,
+              [styles$p.zeroMinWidth]: zeroMinWidth2,
+              [styles$p.zeroMinHeight]: zeroMinHeight2
             }),
             ref,
             ...rest,
@@ -279,16 +306,16 @@
   const hoverSpin90Clockwise = "_hoverSpin90Clockwise_r73gr_15";
   const hoverSpin180Clockwise = "_hoverSpin180Clockwise_r73gr_25";
   const hoverSpin360Clockwise = "_hoverSpin360Clockwise_r73gr_35";
-  const styles$m = {
+  const styles$o = {
     fluid: fluid$1,
     hoverSpin90Clockwise,
     hoverSpin180Clockwise,
     hoverSpin360Clockwise
   };
   const hoverEffectClassNameMapping = {
-    spin90Clockwise: styles$m.hoverSpin90Clockwise,
-    spin180Clockwise: styles$m.hoverSpin180Clockwise,
-    spin360Clockwise: styles$m.hoverSpin360Clockwise
+    spin90Clockwise: styles$o.hoverSpin90Clockwise,
+    spin180Clockwise: styles$o.hoverSpin180Clockwise,
+    spin360Clockwise: styles$o.hoverSpin360Clockwise
   };
   const clickOnEnterOrSpace = (e) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -309,12 +336,12 @@
   const useButtonGroupContext = () => React.useContext(ButtonGroupContext);
   const spinner = "_spinner_isifr_9";
   const spin = "_spin_isifr_9";
-  const styles$l = {
+  const styles$n = {
     spinner,
     spin
   };
   const Spinner = React.memo(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$l.spinner });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$n.spinner });
   });
   Spinner.displayName = "Spinner";
   const _Button$1 = React.forwardRef(function Button(props, ref) {
@@ -350,7 +377,7 @@
         ref,
         type,
         className: classNames(className, hoverEffectClasses, {
-          [styles$m.fluid]: fluid2
+          [styles$o.fluid]: fluid2
         }),
         color,
         size: useResponsiveMapping(size, SizeMapping),
@@ -392,7 +419,7 @@
       themes.IconButton,
       {
         className: classNames(className, hoverEffectClasses, {
-          [styles$m.fluid]: fluid2
+          [styles$o.fluid]: fluid2
         }),
         ref,
         color,
@@ -407,7 +434,7 @@
   });
   const IconButton = React.memo(_Button);
   const merged = "_merged_wdgxo_1";
-  const styles$k = {
+  const styles$m = {
     merged
   };
   const GhostVariantSizeToGapMapping = {
@@ -434,7 +461,7 @@
       themes.Flex,
       {
         className: classNames("overmap-button-group", className, {
-          [styles$k.merged]: merged2
+          [styles$m.merged]: merged2
         }),
         ref,
         gap: merged2 ? gap ?? mergedAutoGap : gap ?? "2",
@@ -447,7 +474,7 @@
   });
   const ButtonGroup = React.memo(_ButtonGroup);
   const separators = "_separators_1f7v1_1";
-  const styles$j = {
+  const styles$l = {
     separators
   };
   const ButtonListBorder = React.memo(
@@ -478,7 +505,7 @@
           size,
           severity: "info",
           variant: buttonVariant,
-          className: classNames(className, styles$j.separators),
+          className: classNames(className, styles$l.separators),
           merged: true,
           gap: "0",
           direction: "column",
@@ -660,11 +687,96 @@
       [openAlertDialog]
     );
   };
+  const OverlayContent = "_OverlayContent_1nr9w_1";
+  const OverlayOverlay = "_OverlayOverlay_1nr9w_6";
+  const styles$k = {
+    OverlayContent,
+    OverlayOverlay
+  };
+  const Overlay$2 = React.memo(
+    React.forwardRef((props, ref) => {
+      const {
+        children,
+        defaultOpen = false,
+        onInterruptClose,
+        content,
+        onClose,
+        open: controlledOpen,
+        onOpenChange: controlledOpenChange,
+        className,
+        style,
+        overlay: overlay2 = false,
+        overlayClass,
+        overlayStyle
+      } = props;
+      const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+      const open = React.useMemo(
+        () => controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen,
+        [controlledOpen, uncontrolledOpen]
+      );
+      const handleOpenChange = React.useCallback(
+        (nextOpen) => {
+          if (controlledOpenChange) {
+            controlledOpenChange(nextOpen);
+          } else if (!nextOpen && onInterruptClose) {
+            const closeInner = () => {
+              setUncontrolledOpen(false);
+              if (onClose)
+                onClose();
+            };
+            onInterruptClose(closeInner);
+          } else if (!nextOpen) {
+            setUncontrolledOpen(false);
+            if (onClose)
+              onClose();
+          } else {
+            setUncontrolledOpen(nextOpen);
+          }
+        },
+        [controlledOpenChange, onClose, onInterruptClose]
+      );
+      const close = React.useCallback(
+        (closeOptions) => {
+          if (closeOptions == null ? void 0 : closeOptions.force) {
+            setUncontrolledOpen(false);
+          } else {
+            handleOpenChange(false);
+          }
+        },
+        [handleOpenChange]
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(RadixDialogPrimitive__namespace.Root, { open, onOpenChange: handleOpenChange, modal: overlay2, children: [
+        children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Trigger, { children }),
+        /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          overlay2 && /* @__PURE__ */ jsxRuntime.jsx(themes.Theme, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RadixDialogPrimitive__namespace.Overlay,
+            {
+              className: classNames(
+                "overmap-overlay-overlay",
+                styles$k.OverlayOverlay,
+                overlayClass
+              ),
+              style: overlayStyle
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(themes.Theme, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RadixDialogPrimitive__namespace.Content,
+            {
+              className: classNames("overmap-overlay-content", styles$k.OverlayContent, className),
+              style,
+              ref,
+              children: content(close)
+            }
+          ) })
+        ] }) })
+      ] });
+    })
+  );
   const BaseMenuItem$1 = "_BaseMenuItem_5r3et_1";
   const RemoveOutline = "_RemoveOutline_5r3et_15";
   const BaseMenuSeparator$1 = "_BaseMenuSeparator_5r3et_19";
   const BaseMenuInput$1 = "_BaseMenuInput_5r3et_27";
-  const styles$i = {
+  const styles$j = {
     BaseMenuItem: BaseMenuItem$1,
     RemoveOutline,
     BaseMenuSeparator: BaseMenuSeparator$1,
@@ -675,7 +787,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         themes.Box,
         {
-          className: classNames(styles$i.BaseMenuItem, className),
+          className: classNames(styles$j.BaseMenuItem, className),
           ref,
           position: "relative",
           px: "2",
@@ -691,11 +803,11 @@
   );
   const BaseMenuInput = React.memo(
     React.forwardRef((props) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$i.BaseMenuInput, px: "2", height: "6", width: "max-content", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { ...props, variant: "ghost" }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$j.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$i.BaseMenuSeparator, width: "100%", py: "1", children: /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { height: "0", width: "100%" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$j.BaseMenuSeparator, width: "100%", py: "1", children: /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { height: "0", width: "100%" }) });
   });
   const useCloseOnSelectHandler = (closeOnSelect) => {
     return React.useCallback(
@@ -758,7 +870,7 @@
           const itemContent = /* @__PURE__ */ jsxRuntime.jsx(
             ItemElement,
             {
-              className: classNames(className, styles$i.RemoveOutline),
+              className: classNames(className, styles$j.RemoveOutline),
               onSelect: closeOnSelectHandler(onSelect),
               textValue: "",
               asChild: true,
@@ -821,7 +933,7 @@
         items.map(({ content, value: itemValue, onSelect, ...rest }, index) => /* @__PURE__ */ jsxRuntime.jsx(
           ItemElement,
           {
-            className: styles$i.RemoveOutline,
+            className: styles$j.RemoveOutline,
             checked: itemValue === value,
             onCheckedChange: handleCheckedChange(itemValue),
             onSelect: closeOnSelectHandler(onSelect),
@@ -900,7 +1012,7 @@
         items.map(({ value, content, className, onSelect, ...rest }, index) => /* @__PURE__ */ jsxRuntime.jsx(
           ItemElement,
           {
-            className: classNames(className, styles$i.RemoveOutline),
+            className: classNames(className, styles$j.RemoveOutline),
             onSelect: closeOnSelectHandler(onSelect),
             onCheckedChange: handleCheckedChange(value),
             checked: values.includes(value),
@@ -932,7 +1044,7 @@
   }) {
     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$i.RemoveOutline), asChild: true, ...rest2, children: /* @__PURE__ */ jsxRuntime.jsx(BaseMenuItem, { rightSlot: triggerIndicator, children: content }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SubTriggerElement, { className: classNames(className, styles$j.RemoveOutline), asChild: true, ...rest2, children: /* @__PURE__ */ jsxRuntime.jsx(BaseMenuItem, { rightSlot: triggerIndicator, children: content }) }),
         /* @__PURE__ */ jsxRuntime.jsx(SubContentElement, { sideOffset: 10, children: subContent })
       ] }, index)) }),
       separator && /* @__PURE__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
@@ -980,11 +1092,20 @@
   });
   SubItemGroup.displayName = "SubItemGroup";
   const Root$2 = React.memo((props) => {
-    const { disabled: disabled2 = false, children, modal = false, content, ...rest } = props;
+    const { disabled: disabled2 = false, children, modal = false, content, className, ...rest } = props;
     const infoColor = useSeverityColor("info");
     return /* @__PURE__ */ jsxRuntime.jsxs(themes.ContextMenu.Root, { modal, children: [
       /* @__PURE__ */ jsxRuntime.jsx(themes.ContextMenu.Trigger, { disabled: disabled2, children }),
-      /* @__PURE__ */ jsxRuntime.jsx(themes.ContextMenu.Content, { variant: "soft", color: infoColor, ...rest, children: content })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        themes.ContextMenu.Content,
+        {
+          className: classNames("overmap-context-menu", className),
+          variant: "soft",
+          color: infoColor,
+          ...rest,
+          children: content
+        }
+      )
     ] });
   });
   Root$2.displayName = "ContextMenuRoot";
@@ -1218,6 +1339,20 @@
       }
     )
   );
+  const DownloadButtonUtility = React.memo((props) => {
+    const { children, file } = props;
+    const anchorRef = React.useRef(null);
+    const objectURL = React.useMemo(() => URL.createObjectURL(file), [file]);
+    const handleClick = React.useCallback(() => {
+      if (anchorRef.current)
+        anchorRef.current.click();
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { onClick: handleClick, children }),
+      /* @__PURE__ */ jsxRuntime.jsx("a", { style: { display: "none" }, href: objectURL, target: "_blank", rel: "noreferrer", ref: anchorRef })
+    ] });
+  });
+  DownloadButtonUtility.displayName = "DownloadButtonUtility";
   const HoverUtility = React.memo(function Root2({ children }) {
     const [isHovered, setIsHovered] = React.useState(reactDeviceDetect.isMobile);
     const handlePointerEnter = React.useCallback(() => {
@@ -1233,7 +1368,7 @@
     });
   });
   const fluid = "_fluid_7n1wr_1";
-  const styles$h = {
+  const styles$i = {
     fluid
   };
   const _Select = React.forwardRef(function Select2({
@@ -1257,7 +1392,7 @@
       themes.Select.Trigger,
       {
         className: classNames(className, {
-          [styles$h.fluid]: fluid2
+          [styles$i.fluid]: fluid2
         }),
         id,
         ref,
@@ -1269,7 +1404,7 @@
       themes.Select.Content,
       {
         side,
-        className: styles$h.contentDefault,
+        className: styles$i.contentDefault,
         position: "popper",
         variant: variant !== "surface" ? "soft" : "solid",
         color: itemSeverityColor,
@@ -1382,7 +1517,7 @@
       );
     })
   );
-  const styles$g = {
+  const styles$h = {
     "default": "_default_u936h_1"
   };
   const _Switch = React.forwardRef(function Switch2({ className, severity = "primary", icon, defaultChecked = false, onCheckedChange, ...rest }, ref) {
@@ -1410,7 +1545,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         themes.Switch,
         {
-          className: classNames("overmap-switch", className, styles$g.default),
+          className: classNames("overmap-switch", className, styles$h.default),
           ref: ref ? ref : fallbackRef,
           color: severityColor,
           radius: "full",
@@ -1428,7 +1563,7 @@
   const resizeHandle$1 = "_resizeHandle_1onyo_10";
   const left$1 = "_left_1onyo_13";
   const overlay = "_overlay_1onyo_33";
-  const styles$f = {
+  const styles$g = {
     sidebarContent,
     right: right$1,
     resizeHandle: resizeHandle$1,
@@ -1461,13 +1596,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$f.overlay) }),
+      overlay2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Overlay, { className: classNames(styles$g.overlay) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         RadixDialogPrimitive__namespace.Content,
         {
-          className: classNames("overmap-sidebar", "rt-DialogContent", styles$f.sidebarContent, {
-            [styles$f.left]: isLeft,
-            [styles$f.right]: isRight
+          className: classNames("overmap-sidebar", "rt-DialogContent", styles$g.sidebarContent, {
+            [styles$g.left]: isLeft,
+            [styles$g.right]: isRight
           }),
           ref,
           asChild: true,
@@ -1479,7 +1614,7 @@
               maxWidth,
               defaultSize: defaultSidebarSize,
               enable: { right: resizable2 && isLeft, left: resizable2 && isRight },
-              handleClasses: { left: styles$f.resizeHandle, right: styles$f.resizeHandle },
+              handleClasses: { left: styles$g.resizeHandle, right: styles$g.resizeHandle },
               handleComponent: {
                 right: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, {}),
                 left: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, {})
@@ -1622,7 +1757,7 @@
   const ExitActiveLeft$1 = "_ExitActiveLeft_1jwyv_46";
   const ExitDoneLeft$1 = "_ExitDoneLeft_1jwyv_51";
   const Overlay$1 = "_Overlay_1jwyv_56";
-  const styles$e = {
+  const styles$f = {
     EnterRight: EnterRight$1,
     EnterActiveRight: EnterActiveRight$1,
     EnterDoneRight: EnterDoneRight$1,
@@ -1698,12 +1833,12 @@
       const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(handleDismiss, parentContainer);
       const CSSTransitionClassNames = React.useMemo(
         () => ({
-          enter: isLeft ? styles$e.EnterLeft : styles$e.EnterRight,
-          enterActive: isLeft ? styles$e.EnterActiveLeft : styles$e.EnterActiveRight,
-          enterDone: isLeft ? styles$e.EnterDoneLeft : styles$e.EnterDoneRight,
-          exit: isLeft ? styles$e.ExitLeft : styles$e.ExitRight,
-          exitActive: isLeft ? styles$e.ExitActiveLeft : styles$e.ExitActiveRight,
-          exitDone: isLeft ? styles$e.ExitDoneLeft : styles$e.ExitDoneRight
+          enter: isLeft ? styles$f.EnterLeft : styles$f.EnterRight,
+          enterActive: isLeft ? styles$f.EnterActiveLeft : styles$f.EnterActiveRight,
+          enterDone: isLeft ? styles$f.EnterDoneLeft : styles$f.EnterDoneRight,
+          exit: isLeft ? styles$f.ExitLeft : styles$f.ExitRight,
+          exitActive: isLeft ? styles$f.ExitActiveLeft : styles$f.ExitActiveRight,
+          exitDone: isLeft ? styles$f.ExitDoneLeft : styles$f.ExitDoneRight
         }),
         [isLeft]
       );
@@ -1934,7 +2069,7 @@
   const ExitActiveLeft = "_ExitActiveLeft_1jwyv_46";
   const ExitDoneLeft = "_ExitDoneLeft_1jwyv_51";
   const Overlay = "_Overlay_1jwyv_56";
-  const styles$d = {
+  const styles$e = {
     EnterRight,
     EnterActiveRight,
     EnterDoneRight,
@@ -1989,12 +2124,12 @@
       }, [initialWidth]);
       const CSSTransitionClassNames = React.useMemo(
         () => ({
-          enter: isLeft ? styles$d.EnterLeft : styles$d.EnterRight,
-          enterActive: isLeft ? styles$d.EnterActiveLeft : styles$d.EnterActiveRight,
-          enterDone: isLeft ? styles$d.EnterDoneLeft : styles$d.EnterDoneRight,
-          exit: isLeft ? styles$d.ExitLeft : styles$d.ExitRight,
-          exitActive: isLeft ? styles$d.ExitActiveLeft : styles$d.ExitActiveRight,
-          exitDone: isLeft ? styles$d.ExitDoneLeft : styles$d.ExitDoneRight
+          enter: isLeft ? styles$e.EnterLeft : styles$e.EnterRight,
+          enterActive: isLeft ? styles$e.EnterActiveLeft : styles$e.EnterActiveRight,
+          enterDone: isLeft ? styles$e.EnterDoneLeft : styles$e.EnterDoneRight,
+          exit: isLeft ? styles$e.ExitLeft : styles$e.ExitRight,
+          exitActive: isLeft ? styles$e.ExitActiveLeft : styles$e.ExitActiveRight,
+          exitDone: isLeft ? styles$e.ExitDoneLeft : styles$e.ExitDoneRight
         }),
         [isLeft]
       );
@@ -2077,7 +2212,7 @@
   const noRightIcon = "_noRightIcon_1octa_18";
   const ghost$1 = "_ghost_1octa_22";
   const charCount$1 = "_charCount_1octa_40";
-  const styles$c = {
+  const styles$d = {
     accommodateCharCount,
     wrapper: wrapper$2,
     "default": "_default_1octa_10",
@@ -2104,9 +2239,9 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       themes.TextField.Root,
       {
-        className: classNames(styles$c.wrapper, className, {
-          [styles$c.ghost]: variant === "ghost",
-          [styles$c.accommodateCharCount]: displayInputLength
+        className: classNames(styles$d.wrapper, className, {
+          [styles$d.ghost]: variant === "ghost",
+          [styles$d.accommodateCharCount]: displayInputLength
         }),
         size: computedSize,
         variant: variant !== "ghost" ? variant : void 0,
@@ -2116,9 +2251,9 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             themes.TextField.Input,
             {
-              className: classNames(styles$c.default, {
-                [styles$c.noLeftIcon]: !leftSlot,
-                [styles$c.noRightIcon]: !rightSlot
+              className: classNames(styles$d.default, {
+                [styles$d.noLeftIcon]: !leftSlot,
+                [styles$d.noRightIcon]: !rightSlot
               }),
               ref,
               value,
@@ -2129,7 +2264,7 @@
             }
           ),
           rightSlot && /* @__PURE__ */ jsxRuntime.jsx(themes.TextField.Slot, { children: rightSlot }),
-          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}` })
+          displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$d.charCount, size: "1", color: "gray", children: rest.maxLength !== void 0 ? `${valueAsString == null ? void 0 : valueAsString.length}/${rest.maxLength}` : `${valueAsString == null ? void 0 : valueAsString.length}` })
         ]
       }
     );
@@ -2153,7 +2288,7 @@
     return React.cloneElement(children, { ...childProps });
   });
   const wrapper$1 = "_wrapper_tmtz0_1";
-  const styles$b = {
+  const styles$c = {
     wrapper: wrapper$1
   };
   const _Popover = React.forwardRef(function Popover2({ className, trigger, open, onOpenChange, defaultOpen = false, modal = false, children, ...rest }, ref) {
@@ -2163,7 +2298,7 @@
         themes.Popover.Content,
         {
           ref,
-          className: classNames("overmap-popover", className, styles$b.wrapper),
+          className: classNames("overmap-popover", className, styles$c.wrapper),
           ...rest,
           children: children(themes.Popover.Close)
         }
@@ -2178,7 +2313,7 @@
   const resizable = "_resizable_1ssf2_23";
   const resizeHandle = "_resizeHandle_1ssf2_28";
   const panelMainContent = "_panelMainContent_1ssf2_48";
-  const styles$a = {
+  const styles$b = {
     wrapper,
     panelContent,
     left,
@@ -2364,7 +2499,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       themes.Flex,
       {
-        className: styles$a.wrapper,
+        className: styles$b.wrapper,
         style: { minWidth: `${leftMinWidth + rightMinWidth}px` },
         ref: wrapperRef,
         width: "100%",
@@ -2386,7 +2521,7 @@
                 themes.Box,
                 {
                   ref: leftPanelRef,
-                  className: classNames(styles$a.panelContent, styles$a.left),
+                  className: classNames(styles$b.panelContent, styles$b.left),
                   style: leftPanelTransitionStyles[state],
                   width: "auto",
                   height: "100%",
@@ -2395,7 +2530,7 @@
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     reResizable.Resizable,
                     {
-                      className: styles$a.resizable,
+                      className: styles$b.resizable,
                       size: {
                         width: leftPanelWidth,
                         height: "100%"
@@ -2404,7 +2539,7 @@
                       enable: { right: (resizeable == null ? void 0 : resizeable.left) !== void 0 ? resizeable.left : true },
                       minWidth: leftMinWidth,
                       maxWidth: leftPanelMaxWidth,
-                      handleClasses: { right: classNames(styles$a.resizeHandle, styles$a.left) },
+                      handleClasses: { right: classNames(styles$b.resizeHandle, styles$b.left) },
                       handleComponent: {
                         right: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, { height: "14px", width: "14px" })
                       },
@@ -2415,7 +2550,7 @@
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$a.panelMainContent, children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$b.panelMainContent, children }),
           /* @__PURE__ */ jsxRuntime.jsx(
             reactTransitionGroup.Transition,
             {
@@ -2429,7 +2564,7 @@
                 themes.Box,
                 {
                   ref: rightPanelRef,
-                  className: classNames(styles$a.panelContent, styles$a.right),
+                  className: classNames(styles$b.panelContent, styles$b.right),
                   style: rightPanelTransitionStyles[state],
                   width: "auto",
                   height: "100%",
@@ -2438,13 +2573,13 @@
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     reResizable.Resizable,
                     {
-                      className: styles$a.resizable,
+                      className: styles$b.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$a.resizeHandle, styles$a.right) },
+                      handleClasses: { left: classNames(styles$b.resizeHandle, styles$b.right) },
                       handleComponent: { left: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, { height: "14px", width: "14px" }) },
                       children: rightPanel
                     }
@@ -2462,7 +2597,7 @@
   const buttonContainer = "_buttonContainer_16xvh_16";
   const optionsButtonContainer = "_optionsButtonContainer_16xvh_21";
   const optionsButton = "_optionsButton_16xvh_21";
-  const styles$9 = {
+  const styles$a = {
     multiPagePopover,
     pageTitle,
     buttonContainer,
@@ -2476,7 +2611,7 @@
     const optionButtons = popoverOption.options.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
       Button2,
       {
-        className: classNames(styles$9.optionsButton, option.buttonClassName),
+        className: classNames(styles$a.optionsButton, option.buttonClassName),
         variant: "ghost",
         radius: "large",
         style: {
@@ -2492,12 +2627,12 @@
       `${option.value}-page-${page}-button-${i}`
     ));
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      popoverOption.title && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { className: styles$9.pageTitle, size: "3", children: popoverOption.title }),
+      popoverOption.title && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { className: styles$a.pageTitle, size: "3", children: popoverOption.title }),
       popoverOption.content,
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames(styles$9.optionsButtonContainer, popoverOption.buttonsContainerClassName),
+          className: classNames(styles$a.optionsButtonContainer, popoverOption.buttonsContainerClassName),
           style: {
             flexDirection: direction === "vertical" ? "column" : "row"
           },
@@ -2515,7 +2650,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
-        className: classNames(styles$9.multiPagePopover, className),
+        className: classNames(styles$a.multiPagePopover, className),
         ref,
         onOpenAutoFocus: resetPopoverContent,
         onCloseAutoFocus: resetPopoverContent,
@@ -2527,7 +2662,7 @@
   const MultiPagePopover = React.memo(_MultiPagePopover);
   const charCount = "_charCount_1lz28_1";
   const ghost = "_ghost_1lz28_5";
-  const styles$8 = {
+  const styles$9 = {
     charCount,
     ghost
   };
@@ -2563,7 +2698,7 @@
         themes.TextArea,
         {
           className: classNames("overmap-textarea", className, {
-            [styles$8.ghost]: variant === "ghost"
+            [styles$9.ghost]: variant === "ghost"
           }),
           style: { resize },
           variant: variant !== "ghost" ? variant : void 0,
@@ -2573,7 +2708,7 @@
           ...rest
         }
       ),
-      displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$8.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
+      displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$9.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
     ] });
   });
   const TextArea = React.memo(_TextArea);
@@ -2619,7 +2754,7 @@
     );
   });
   const ToggleGroup = React.memo(_ToggleGroup);
-  const styles$7 = {
+  const styles$8 = {
     "default": "_default_xqvoc_1"
   };
   const Root = React.memo(
@@ -2627,7 +2762,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         reactToolbar.Root,
         {
-          className: classNames(className, "overmap-toolbar", styles$7.default),
+          className: classNames(className, "overmap-toolbar", styles$8.default),
           ref,
           asChild: true,
           ...rest,
@@ -2668,7 +2803,7 @@
   const ToastRoot = "_ToastRoot_1i6bp_24";
   const slideIn = "_slideIn_1i6bp_1";
   const swipeOut = "_swipeOut_1i6bp_1";
-  const styles$6 = {
+  const styles$7 = {
     ToastViewport,
     actionButton,
     ToastRoot,
@@ -2686,7 +2821,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$6.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$7.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: [
@@ -2694,7 +2829,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$6.actionButton, altText: action.altText, asChild: true, children: action.content })
+          action && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { className: styles$7.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, {}) }) })
@@ -2770,11 +2905,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$6.ToastViewport), hotkey }),
+      /* @__PURE__ */ jsxRuntime.jsx(RadixToast.ToastViewport, { className: classNames(className, styles$7.ToastViewport), hotkey }),
       toasts.map(({ id, onClose, ...toastProps }) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toastProps, onClose: () => handleCloseToast(id, 0, onClose) }, id))
     ] }) });
   });
-  const styles$5 = {
+  const styles$6 = {
     "default": "_default_1odpt_1"
   };
   const Tooltip = React.memo(
@@ -2782,7 +2917,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         themes.Tooltip,
         {
-          className: classNames("overmap-tooltip", className, styles$5.default),
+          className: classNames("overmap-tooltip", className, styles$6.default),
           ref,
           content: /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { align: "center", gap: "1", width: "max-content", height: "max-content", justify: "center", children: content }),
           ...rest,
@@ -2791,6 +2926,29 @@
       );
     })
   );
+  const ToggleButton$1 = "_ToggleButton_13aus_1";
+  const styles$5 = {
+    ToggleButton: ToggleButton$1
+  };
+  const ToggleButton = React.memo(
+    React.forwardRef((props, ref) => {
+      const { children, className, severity, fluid: fluid2, variant = "solid", size, hoverEffects, ...rest } = props;
+      return /* @__PURE__ */ jsxRuntime.jsx(Toggle__namespace.Root, { ref, asChild: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton,
+        {
+          className: classNames(className, styles$5.ToggleButton),
+          "aria-label": props["aria-label"],
+          severity,
+          fluid: fluid2,
+          variant,
+          hoverEffects,
+          size,
+          "data-variant": variant,
+          children
+        }
+      ) });
+    })
+  );
   const noWrap = "_noWrap_1wpa5_1";
   const styles$4 = {
     noWrap
@@ -2904,6 +3062,50 @@
     return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ErrorFallback, { absoluteCentering }), onError: logError, children: props.children });
   });
   OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
+  const OvermapItemSizeDependantProps = {
+    "1": {
+      gap: "1",
+      px: "1",
+      height: "5",
+      fontSize: "var(--font-size-1)"
+    },
+    "2": {
+      gap: "2",
+      px: "2",
+      height: "6",
+      fontSize: "var(--font-size-2)"
+    },
+    "3": {
+      gap: "2",
+      px: "3",
+      height: "7",
+      fontSize: "var(--font-size-3)"
+    },
+    "4": {
+      gap: "2",
+      px: "4",
+      height: "8",
+      fontSize: "var(--font-size-4)"
+    },
+    "5": {
+      gap: "3",
+      px: "5",
+      height: "9",
+      fontSize: "var(--font-size-5)"
+    }
+  };
+  const OvermapItem = React.memo(
+    React.forwardRef((props, ref) => {
+      const { leftSlot, rightSlot, children, size, style, ...rest } = props;
+      const computedSize = useOvermapResponsiveValue(size);
+      const { fontSize, ...restSizeProps } = OvermapItemSizeDependantProps[computedSize ?? "2"];
+      return /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { ref, align: "center", style: { fontSize, ...style }, ...restSizeProps, ...rest, children: [
+        leftSlot && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { width: "max-content", height: "max-content", align: "center", children: leftSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { height: "max-content", align: "center", grow: "1", children }),
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { width: "max-content", height: "max-content", align: "center", children: rightSlot })
+      ] });
+    })
+  );
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function(target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -4283,6 +4485,7 @@
   exports2.ContextSelectMenu = ContextSelectMenu;
   exports2.DefaultTheme = DefaultTheme;
   exports2.Dialog = Dialog;
+  exports2.DownloadButtonUtility = DownloadButtonUtility;
   exports2.DropdownItemMenu = DropdownItemMenu;
   exports2.DropdownMenu = DropdownMenu;
   exports2.DropdownMenuItemGroup = DropdownMenuItemGroup;
@@ -4301,7 +4504,9 @@
   exports2.LeftAndRightPanels = LeftAndRightPanels;
   exports2.MultiPagePopover = MultiPagePopover;
   exports2.MultiSelect = MultiSelect;
+  exports2.Overlay = Overlay$2;
   exports2.OvermapErrorBoundary = OvermapErrorBoundary;
+  exports2.OvermapItem = OvermapItem;
   exports2.Popover = Popover;
   exports2.Select = Select;
   exports2.SelectAllCheckbox = SelectAllCheckbox;
@@ -4317,6 +4522,7 @@
   exports2.Toast = Toast;
   exports2.ToastContext = ToastContext;
   exports2.ToastProvider = ToastProvider;
+  exports2.ToggleButton = ToggleButton;
   exports2.ToggleGroup = ToggleGroup;
   exports2.Toolbar = Toolbar;
   exports2.Tooltip = Tooltip;
@@ -4327,6 +4533,7 @@
   exports2.useKeyboardShortcut = useKeyboardShortcut;
   exports2.useLayoutContext = useLayoutContext;
   exports2.useSeverityColor = useSeverityColor;
+  exports2.useSize = useSize;
   exports2.useStopEventPropagation = useStopEventPropagation;
   exports2.useTextFilter = useTextFilter;
   exports2.useToast = useToast;