@overmap-ai/blocks 1.0.5 → 1.0.6

package/dist/blocks.umd.cjs

@@ -191,7 +191,7 @@
   const zeroMinWidth = "_zeroMinWidth_curjh_1";
   const zeroMinHeight = "_zeroMinHeight_curjh_5";
   const radius = "_radius_curjh_9";
-  const styles$l = {
+  const styles$m = {
     zeroMinWidth,
     zeroMinHeight,
     radius
@@ -203,9 +203,9 @@
           themes.Flex,
           {
             className: classNames(className, {
-              [styles$l.radius]: radius2,
-              [styles$l.zeroMinWidth]: zeroMinWidth2,
-              [styles$l.zeroMinHeight]: zeroMinHeight2
+              [styles$m.radius]: radius2,
+              [styles$m.zeroMinWidth]: zeroMinWidth2,
+              [styles$m.zeroMinHeight]: zeroMinHeight2
             }),
             ref,
             ...rest,
@@ -258,16 +258,16 @@
   const hoverSpin90Clockwise = "_hoverSpin90Clockwise_r73gr_15";
   const hoverSpin180Clockwise = "_hoverSpin180Clockwise_r73gr_25";
   const hoverSpin360Clockwise = "_hoverSpin360Clockwise_r73gr_35";
-  const styles$k = {
+  const styles$l = {
     fluid: fluid$1,
     hoverSpin90Clockwise,
     hoverSpin180Clockwise,
     hoverSpin360Clockwise
   };
   const hoverEffectClassNameMapping = {
-    spin90Clockwise: styles$k.hoverSpin90Clockwise,
-    spin180Clockwise: styles$k.hoverSpin180Clockwise,
-    spin360Clockwise: styles$k.hoverSpin360Clockwise
+    spin90Clockwise: styles$l.hoverSpin90Clockwise,
+    spin180Clockwise: styles$l.hoverSpin180Clockwise,
+    spin360Clockwise: styles$l.hoverSpin360Clockwise
   };
   const clickOnEnterOrSpace = (e) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -288,12 +288,12 @@
   const useButtonGroupContext = () => React.useContext(ButtonGroupContext);
   const spinner = "_spinner_isifr_9";
   const spin = "_spin_isifr_9";
-  const styles$j = {
+  const styles$k = {
     spinner,
     spin
   };
   const Spinner = React.memo(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$j.spinner });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$k.spinner });
   });
   Spinner.displayName = "Spinner";
   const _Button$1 = React.forwardRef(function Button(props, ref) {
@@ -328,7 +328,7 @@
         ref,
         type,
         className: classNames(className, hoverEffectClasses, {
-          [styles$k.fluid]: fluid2
+          [styles$l.fluid]: fluid2
         }),
         color,
         size: useResponsiveMapping(size, SizeMapping),
@@ -368,7 +368,7 @@
       themes.IconButton,
       {
         className: classNames(className, hoverEffectClasses, {
-          [styles$k.fluid]: fluid2
+          [styles$l.fluid]: fluid2
         }),
         ref,
         color,
@@ -382,7 +382,7 @@
   });
   const IconButton = React.memo(_Button);
   const merged = "_merged_wdgxo_1";
-  const styles$i = {
+  const styles$j = {
     merged
   };
   const GhostVariantSizeToGapMapping = {
@@ -408,7 +408,7 @@
       themes.Flex,
       {
         className: classNames("overmap-button-group", className, {
-          [styles$i.merged]: merged2
+          [styles$j.merged]: merged2
         }),
         ref,
         gap: merged2 ? gap ?? mergedAutoGap : gap ?? "2",
@@ -421,7 +421,7 @@
   });
   const ButtonGroup = React.memo(_ButtonGroup);
   const separators = "_separators_1f7v1_1";
-  const styles$h = {
+  const styles$i = {
     separators
   };
   const ButtonListBorder = React.memo(
@@ -452,7 +452,7 @@
           size,
           severity: "info",
           variant: buttonVariant,
-          className: classNames(className, styles$h.separators),
+          className: classNames(className, styles$i.separators),
           merged: true,
           gap: "0",
           direction: "column",
@@ -629,7 +629,7 @@
   const DropdownMenuItemWrapper = "_DropdownMenuItemWrapper_hj4sz_8";
   const DropdownMenuSeparatorWrapper = "_DropdownMenuSeparatorWrapper_hj4sz_13";
   const DropdownMenuItem$1 = "_DropdownMenuItem_hj4sz_8";
-  const styles$g = {
+  const styles$h = {
     DropdownMenu: DropdownMenu$1,
     DropdownMenuItemWrapper,
     DropdownMenuSeparatorWrapper,
@@ -679,7 +679,7 @@
       },
       [closeOnSelect, onSelect]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Item, { className: styles$g.DropdownMenuItem, textValue: "", onSelect: handleSelect, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { align: "center", gap: "1", children: content }) });
+    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 }) });
   });
   const DropdownMenu = React.memo(
     React.forwardRef(
@@ -708,14 +708,14 @@
               children: /* @__PURE__ */ jsxRuntime.jsxs(
                 themes.Flex,
                 {
-                  className: styles$g.DropdownMenu,
+                  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$g.DropdownMenuItemWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$h.DropdownMenuItemWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
                         DropdownMenuItem,
                         {
                           closeOnSelect: itemCloseOnSelect ?? closeOnSelect,
@@ -723,7 +723,7 @@
                         },
                         index
                       ) }),
-                      !!separator && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$g.DropdownMenuSeparatorWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "4" }) })
+                      !!separator && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$h.DropdownMenuSeparatorWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "4" }) })
                     ] }, index))
                   ]
                 }
@@ -739,7 +739,7 @@
   const DropdownSelectInputWrapper = "_DropdownSelectInputWrapper_k517z_12";
   const DropdownSelectInput = "_DropdownSelectInput_k517z_12";
   const DropdownSelectItem = "_DropdownSelectItem_k517z_27";
-  const styles$f = {
+  const styles$g = {
     DropdownSelect: DropdownSelect$1,
     BorderBottom,
     DropdownSelectInputWrapper,
@@ -790,11 +790,11 @@
         );
         return /* @__PURE__ */ jsxRuntime.jsxs(themes.DropdownMenu.Root, { onOpenChange: handleOnOpenChange, children: [
           /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Trigger, { disabled, children: trigger }),
-          /* @__PURE__ */ jsxRuntime.jsx(themes.DropdownMenu.Content, { ref, variant: "soft", color: infoColor, className: styles$f.Test, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { className: styles$f.DropdownSelect, direction: "column", children: [
-            filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { px: "1", className: classNames({ [styles$f.BorderBottom]: items.length !== 0 }), children: /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__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$f.DropdownSelectInputWrapper,
+                className: styles$g.DropdownSelectInputWrapper,
                 size: "2",
                 variant: "soft",
                 children: [
@@ -802,7 +802,7 @@
                   /* @__PURE__ */ jsxRuntime.jsx(
                     themes.TextField.Input,
                     {
-                      className: styles$f.DropdownSelectInput,
+                      className: styles$g.DropdownSelectInput,
                       value: filterValue,
                       placeholder,
                       onChange: handleOnInputValueChange
@@ -816,7 +816,7 @@
               return /* @__PURE__ */ jsxRuntime.jsx(
                 themes.DropdownMenu.Item,
                 {
-                  className: styles$f.DropdownSelectItem,
+                  className: styles$g.DropdownSelectItem,
                   onSelect: handleOnSelect(itemValue),
                   textValue: "",
                   asChild: true,
@@ -857,7 +857,7 @@
     });
   });
   const fluid = "_fluid_7n1wr_1";
-  const styles$e = {
+  const styles$f = {
     fluid
   };
   const _Select = React.forwardRef(function Select2({
@@ -881,7 +881,7 @@
       themes.Select.Trigger,
       {
         className: classNames(className, {
-          [styles$e.fluid]: fluid2
+          [styles$f.fluid]: fluid2
         }),
         id,
         ref,
@@ -893,7 +893,7 @@
       themes.Select.Content,
       {
         side,
-        className: styles$e.contentDefault,
+        className: styles$f.contentDefault,
         position: "popper",
         variant: variant !== "surface" ? "soft" : "solid",
         color: itemSeverityColor,
@@ -1006,7 +1006,7 @@
       );
     })
   );
-  const styles$d = {
+  const styles$e = {
     "default": "_default_u936h_1"
   };
   const _Switch = React.forwardRef(function Switch2({ className, severity = "primary", icon, defaultChecked = false, onCheckedChange, ...rest }, ref) {
@@ -1034,7 +1034,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         themes.Switch,
         {
-          className: classNames("overmap-switch", className, styles$d.default),
+          className: classNames("overmap-switch", className, styles$e.default),
           ref: ref ? ref : fallbackRef,
           color: severityColor,
           radius: "full",
@@ -1052,7 +1052,7 @@
   const resizeHandle$1 = "_resizeHandle_1onyo_10";
   const left$2 = "_left_1onyo_13";
   const overlay = "_overlay_1onyo_33";
-  const styles$c = {
+  const styles$d = {
     sidebarContent,
     right: right$2,
     resizeHandle: resizeHandle$1,
@@ -1085,13 +1085,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$c.overlay) }),
+      overlay2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Overlay, { className: classNames(styles$d.overlay) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         RadixDialogPrimitive__namespace.Content,
         {
-          className: classNames("overmap-sidebar", "rt-DialogContent", styles$c.sidebarContent, {
-            [styles$c.left]: isLeft,
-            [styles$c.right]: isRight
+          className: classNames("overmap-sidebar", "rt-DialogContent", styles$d.sidebarContent, {
+            [styles$d.left]: isLeft,
+            [styles$d.right]: isRight
           }),
           ref,
           asChild: true,
@@ -1103,7 +1103,7 @@
               maxWidth,
               defaultSize: defaultSidebarSize,
               enable: { right: resizable2 && isLeft, left: resizable2 && isRight },
-              handleClasses: { left: styles$c.resizeHandle, right: styles$c.resizeHandle },
+              handleClasses: { left: styles$d.resizeHandle, right: styles$d.resizeHandle },
               handleComponent: {
                 right: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, {}),
                 left: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, {})
@@ -1125,7 +1125,7 @@
   const exitDone = "_exitDone_1iy9c_32";
   const resizable$1 = "_resizable_1iy9c_41";
   const slideOutOverlay = "_slideOutOverlay_1iy9c_47";
-  const styles$b = {
+  const styles$c = {
     outerContent,
     enter,
     right: right$1,
@@ -1169,23 +1169,23 @@
       {
         in: open,
         classNames: {
-          enter: styles$b.enter,
-          enterActive: styles$b.enterActive,
-          exitActive: styles$b.exitActive,
-          exitDone: styles$b.exitDone
+          enter: styles$c.enter,
+          enterActive: styles$c.enterActive,
+          exitActive: styles$c.exitActive,
+          exitDone: styles$c.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$b.slideOutOverlay) }),
+          overlay2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames("overamp-slide-out-overlay", styles$c.slideOutOverlay) }),
           /* @__PURE__ */ jsxRuntime.jsx(reactDismissableLayer.DismissableLayer, { disableOutsidePointerEvents: modal, asChild: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
             themes.Flex,
             {
-              className: classNames("overmap-slide-out", className, styles$b.outerContent, {
-                [styles$b.left]: isSideLeft,
-                [styles$b.right]: isSideRight
+              className: classNames("overmap-slide-out", className, styles$c.outerContent, {
+                [styles$c.left]: isSideLeft,
+                [styles$c.right]: isSideRight
               }),
               style: { "--slide-out-width": `${slideOutWidth}px` },
               height: "100%",
@@ -1199,7 +1199,7 @@
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 reResizable.Resizable,
                 {
-                  className: styles$b.resizable,
+                  className: styles$c.resizable,
                   defaultSize: { width: slideOutWidth, height: "100%" },
                   onResize: handleResize,
                   enable: { right: resizable2 && isSideLeft, left: resizable2 && isSideRight },
@@ -1221,7 +1221,7 @@
   const noRightIcon = "_noRightIcon_1octa_18";
   const ghost$1 = "_ghost_1octa_22";
   const charCount$1 = "_charCount_1octa_40";
-  const styles$a = {
+  const styles$b = {
     accommodateCharCount,
     wrapper: wrapper$2,
     "default": "_default_1octa_10",
@@ -1248,9 +1248,9 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       themes.TextField.Root,
       {
-        className: classNames(styles$a.wrapper, className, {
-          [styles$a.ghost]: variant === "ghost",
-          [styles$a.accommodateCharCount]: displayInputLength
+        className: classNames(styles$b.wrapper, className, {
+          [styles$b.ghost]: variant === "ghost",
+          [styles$b.accommodateCharCount]: displayInputLength
         }),
         size: computedSize,
         variant: variant !== "ghost" ? variant : void 0,
@@ -1260,9 +1260,9 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             themes.TextField.Input,
             {
-              className: classNames(styles$a.default, {
-                [styles$a.noLeftIcon]: !leftSlot,
-                [styles$a.noRightIcon]: !rightSlot
+              className: classNames(styles$b.default, {
+                [styles$b.noLeftIcon]: !leftSlot,
+                [styles$b.noRightIcon]: !rightSlot
               }),
               ref,
               value,
@@ -1273,7 +1273,7 @@
             }
           ),
           rightSlot && /* @__PURE__ */ jsxRuntime.jsx(themes.TextField.Slot, { children: rightSlot }),
-          displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$a.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$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}` })
         ]
       }
     );
@@ -1297,7 +1297,7 @@
     return React.cloneElement(children, { ...childProps });
   });
   const wrapper$1 = "_wrapper_tmtz0_1";
-  const styles$9 = {
+  const styles$a = {
     wrapper: wrapper$1
   };
   const _Popover = React.forwardRef(function Popover2({ className, trigger, open, onOpenChange, defaultOpen = false, modal = false, children, ...rest }, ref) {
@@ -1307,7 +1307,7 @@
         themes.Popover.Content,
         {
           ref,
-          className: classNames("overmap-popover", className, styles$9.wrapper),
+          className: classNames("overmap-popover", className, styles$a.wrapper),
           ...rest,
           children: children(themes.Popover.Close)
         }
@@ -1322,7 +1322,7 @@
   const resizable = "_resizable_1ssf2_23";
   const resizeHandle = "_resizeHandle_1ssf2_28";
   const panelMainContent = "_panelMainContent_1ssf2_48";
-  const styles$8 = {
+  const styles$9 = {
     wrapper,
     panelContent,
     left,
@@ -1508,7 +1508,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       themes.Flex,
       {
-        className: styles$8.wrapper,
+        className: styles$9.wrapper,
         style: { minWidth: `${leftMinWidth + rightMinWidth}px` },
         ref: wrapperRef,
         width: "100%",
@@ -1530,7 +1530,7 @@
                 themes.Box,
                 {
                   ref: leftPanelRef,
-                  className: classNames(styles$8.panelContent, styles$8.left),
+                  className: classNames(styles$9.panelContent, styles$9.left),
                   style: leftPanelTransitionStyles[state],
                   width: "auto",
                   height: "100%",
@@ -1539,7 +1539,7 @@
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     reResizable.Resizable,
                     {
-                      className: styles$8.resizable,
+                      className: styles$9.resizable,
                       size: {
                         width: leftPanelWidth,
                         height: "100%"
@@ -1548,7 +1548,7 @@
                       enable: { right: (resizeable == null ? void 0 : resizeable.left) !== void 0 ? resizeable.left : true },
                       minWidth: leftMinWidth,
                       maxWidth: leftPanelMaxWidth,
-                      handleClasses: { right: classNames(styles$8.resizeHandle, styles$8.left) },
+                      handleClasses: { right: classNames(styles$9.resizeHandle, styles$9.left) },
                       handleComponent: {
                         right: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, { height: "14px", width: "14px" })
                       },
@@ -1559,7 +1559,7 @@
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$8.panelMainContent, children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$9.panelMainContent, children }),
           /* @__PURE__ */ jsxRuntime.jsx(
             reactTransitionGroup.Transition,
             {
@@ -1573,7 +1573,7 @@
                 themes.Box,
                 {
                   ref: rightPanelRef,
-                  className: classNames(styles$8.panelContent, styles$8.right),
+                  className: classNames(styles$9.panelContent, styles$9.right),
                   style: rightPanelTransitionStyles[state],
                   width: "auto",
                   height: "100%",
@@ -1582,13 +1582,13 @@
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     reResizable.Resizable,
                     {
-                      className: styles$8.resizable,
+                      className: styles$9.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$8.resizeHandle, styles$8.right) },
+                      handleClasses: { left: classNames(styles$9.resizeHandle, styles$9.right) },
                       handleComponent: { left: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, { height: "14px", width: "14px" }) },
                       children: rightPanel
                     }
@@ -1606,7 +1606,7 @@
   const buttonContainer = "_buttonContainer_spfw7_17";
   const optionsButtonContainer = "_optionsButtonContainer_spfw7_22";
   const optionsButton = "_optionsButton_spfw7_22";
-  const styles$7 = {
+  const styles$8 = {
     multiPagePopover,
     pageTitle,
     buttonContainer,
@@ -1620,7 +1620,7 @@
     const optionButtons = popoverOption.options.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
       Button2,
       {
-        className: classNames(styles$7.optionsButton, option.buttonClassName),
+        className: classNames(styles$8.optionsButton, option.buttonClassName),
         variant: "ghost",
         radius: "large",
         style: {
@@ -1636,12 +1636,12 @@
       `${option.value}-page-${page}-button-${i}`
     ));
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      popoverOption.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$7.pageTitle, children: popoverOption.title }),
+      popoverOption.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$8.pageTitle, children: popoverOption.title }),
       popoverOption.content,
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames(styles$7.optionsButtonContainer, popoverOption.buttonsContainerClassName),
+          className: classNames(styles$8.optionsButtonContainer, popoverOption.buttonsContainerClassName),
           style: {
             flexDirection: direction === "vertical" ? "column" : "row"
           },
@@ -1659,7 +1659,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
-        className: classNames(styles$7.multiPagePopover, className),
+        className: classNames(styles$8.multiPagePopover, className),
         ref,
         onOpenAutoFocus: resetPopoverContent,
         onCloseAutoFocus: resetPopoverContent,
@@ -1671,7 +1671,7 @@
   const MultiPagePopover = React.memo(_MultiPagePopover);
   const charCount = "_charCount_1lz28_1";
   const ghost = "_ghost_1lz28_5";
-  const styles$6 = {
+  const styles$7 = {
     charCount,
     ghost
   };
@@ -1707,7 +1707,7 @@
         themes.TextArea,
         {
           className: classNames("overmap-textarea", className, {
-            [styles$6.ghost]: variant === "ghost"
+            [styles$7.ghost]: variant === "ghost"
           }),
           style: { resize },
           variant: variant !== "ghost" ? variant : void 0,
@@ -1717,7 +1717,7 @@
           ...rest
         }
       ),
-      displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$6.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
+      displayInputLength && /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { as: "p", className: styles$7.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
     ] });
   });
   const TextArea = React.memo(_TextArea);
@@ -1763,7 +1763,7 @@
     );
   });
   const ToggleGroup = React.memo(_ToggleGroup);
-  const styles$5 = {
+  const styles$6 = {
     "default": "_default_xqvoc_1"
   };
   const Root = React.memo(
@@ -1771,7 +1771,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         reactToolbar.Root,
         {
-          className: classNames(className, "overmap-toolbar", styles$5.default),
+          className: classNames(className, "overmap-toolbar", styles$6.default),
           ref,
           asChild: true,
           ...rest,
@@ -1812,7 +1812,7 @@
   const ToastRoot = "_ToastRoot_1i6bp_24";
   const slideIn = "_slideIn_1i6bp_1";
   const swipeOut = "_swipeOut_1i6bp_1";
-  const styles$4 = {
+  const styles$5 = {
     ToastViewport,
     actionButton,
     ToastRoot,
@@ -1830,7 +1830,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$4.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$5.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 +1838,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$4.actionButton, altText: action.altText, asChild: true, children: action.content })
+          action && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { className: styles$5.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 +1914,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$4.ToastViewport), hotkey }),
+      /* @__PURE__ */ jsxRuntime.jsx(RadixToast.ToastViewport, { className: classNames(className, styles$5.ToastViewport), hotkey }),
       toasts.map(({ id, onClose, ...toastProps }) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toastProps, onClose: () => handleCloseToast(id, 0, onClose) }, id))
     ] }) });
   });
-  const styles$3 = {
+  const styles$4 = {
     "default": "_default_1odpt_1"
   };
   const Tooltip = React.memo(
@@ -1926,7 +1926,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         themes.Tooltip,
         {
-          className: classNames("overmap-tooltip", className, styles$3.default),
+          className: classNames("overmap-tooltip", className, styles$4.default),
           ref,
           content: /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { align: "center", gap: "1", width: "max-content", height: "max-content", justify: "center", children: content }),
           ...rest,
@@ -1936,7 +1936,7 @@
     })
   );
   const noWrap = "_noWrap_1wpa5_1";
-  const styles$2 = {
+  const styles$3 = {
     noWrap
   };
   const Text = React.memo(
@@ -1947,7 +1947,7 @@
         {
           ref,
           as,
-          className: classNames(className, { [styles$2.noWrap]: noWrap2 }),
+          className: classNames(className, { [styles$3.noWrap]: noWrap2 }),
           color,
           ...props
         }
@@ -2565,7 +2565,7 @@
   const checkboxLabel = "_checkboxLabel_pb9za_38";
   const noTextHighlight = "_noTextHighlight_pb9za_42";
   const checkboxHidden = "_checkboxHidden_pb9za_51";
-  const styles$1 = {
+  const styles$2 = {
     checkboxContainer,
     checkbox,
     checkboxIndicator,
@@ -2574,13 +2574,13 @@
     checkboxHidden
   };
   const _Checkbox = React.forwardRef(function Checkbox2({ className, labelClassName, label, checked, onCheckedChange, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(HoverUtility, { children: ({ isHovered, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.checkboxContainer, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(HoverUtility, { children: ({ isHovered, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$2.checkboxContainer, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         $e698a72e93240346$export$be92b6f5f03c0fe9,
         {
           className: classNames(
-            styles$1.checkbox,
-            !isHovered && !checked && styles$1.checkboxHidden,
+            styles$2.checkbox,
+            !isHovered && !checked && styles$2.checkboxHidden,
             className
           ),
           checked,
@@ -2591,13 +2591,13 @@
           },
           ref,
           ...rest,
-          children: /* @__PURE__ */ jsxRuntime.jsx($e698a72e93240346$export$adb584737d712b70, { className: styles$1.checkboxIndicator, children: checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DividerHorizontalIcon, { width: "13px" }) : /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) })
+          children: /* @__PURE__ */ jsxRuntime.jsx($e698a72e93240346$export$adb584737d712b70, { className: styles$2.checkboxIndicator, children: checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DividerHorizontalIcon, { width: "13px" }) : /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) })
         }
       ),
       label && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames(styles$1.checkboxLabel, labelClassName, styles$1.noTextHighlight),
+          className: classNames(styles$2.checkboxLabel, labelClassName, styles$2.noTextHighlight),
           onClick: () => {
             if (onCheckedChange) {
               onCheckedChange(!checked);
@@ -2687,7 +2687,7 @@
   const tableBottomContainer = "_tableBottomContainer_go3yk_84";
   const rowsPerPageContainer = "_rowsPerPageContainer_go3yk_88";
   const rowsPerPageText = "_rowsPerPageText_go3yk_98";
-  const styles = {
+  const styles$1 = {
     tableContainer,
     headerContainer,
     tableTopContainer,
@@ -2949,7 +2949,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         Component,
         {
-          className: classNames(styles.tableHeaderCell, columnClassName, column.className),
+          className: classNames(styles$1.tableHeaderCell, columnClassName, column.className),
           sortKey: column.sort ? column.id.toString().toUpperCase() : "",
           children: column.label
         },
@@ -2989,14 +2989,14 @@
         }
       }
     }, [rowsPerPage, rows.length, numRowsPerPage, pagination$1, showPageNavigation]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames({ [styles.tableContainer]: showContainer }), children: [
-      (!!title || !!description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
+    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 })
       ] }),
-      showTopBar && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { justify: "between", className: styles.tableTopContainer, children: [
+      showTopBar && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { justify: "between", className: styles$1.tableTopContainer, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { gap: "2", children: [
-          showSearchBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.searchContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          showSearchBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.searchContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
               value: search,
@@ -3045,7 +3045,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         table$1.Table,
         {
-          className: classNames(styles.table, className),
+          className: classNames(styles$1.table, className),
           data: tableData,
           theme: theme$1,
           sort: sort$1,
@@ -3055,16 +3055,16 @@
           ref,
           children: (tableList) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(table$1.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(table$1.HeaderRow, { children: [
-              showSelect && /* @__PURE__ */ jsxRuntime.jsx(select.HeaderCellSelect, { className: styles.tableHeaderCell }),
+              showSelect && /* @__PURE__ */ jsxRuntime.jsx(select.HeaderCellSelect, { className: styles$1.tableHeaderCell }),
               ...columnCells
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsxs(table$1.Body, { children: [
-              tableList.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(themes.TableRow, { className: styles.noDataTextContainer, children: /* @__PURE__ */ jsxRuntime.jsx(table$1.Cell, { children: emptyMessage }) }),
+              tableList.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(themes.TableRow, { className: styles$1.noDataTextContainer, children: /* @__PURE__ */ jsxRuntime.jsx(table$1.Cell, { children: emptyMessage }) }),
               tableList.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
                 table$1.Row,
                 {
                   item: row,
-                  className: classNames(styles.tableRow, rowClassName, row.className),
+                  className: classNames(styles$1.tableRow, rowClassName, row.className),
                   onClick: row.onClick,
                   children: [
                     showSelect && /* @__PURE__ */ jsxRuntime.jsx(select.CellSelect, { item: row }, row.id),
@@ -3072,7 +3072,7 @@
                       table$1.Cell,
                       {
                         className: classNames(
-                          styles.tableCell,
+                          styles$1.tableCell,
                           cellClassName,
                           row[column.id].className
                         ),
@@ -3088,9 +3088,9 @@
           ] })
         }
       ),
-      showBottomBar && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles.tableBottomContainer, wrap: "wrap", direction: reactDeviceDetect.isMobile ? "column" : "row", children: [
-        showRowsPerPage && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles.rowsPerPageContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.rowsPerPageText, children: "Rows per page:" }),
+      showBottomBar && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.tableBottomContainer, wrap: "wrap", direction: reactDeviceDetect.isMobile ? "column" : "row", children: [
+        showRowsPerPage && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.rowsPerPageContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.rowsPerPageText, children: "Rows per page:" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Select,
             {
@@ -3106,7 +3106,7 @@
           )
         ] }),
         showPageNumber && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", children: totalPages > 0 && `Page ${pagination$1.state.page + 1} of ${totalPages}` }),
-        showPageNavigation && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles.rowsPerPageContainer, gap: "2", justify: "end", children: [
+        showPageNavigation && /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$1.rowsPerPageContainer, gap: "2", justify: "end", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             IconButton,
             {
@@ -3152,6 +3152,155 @@
     ] });
   });
   const Table = React.memo(_Table);
+  const editableTextContainer = "_editableTextContainer_174g6_1";
+  const editableTextText = "_editableTextText_174g6_5";
+  const editableTextInput = "_editableTextInput_174g6_19";
+  const iconHidden = "_iconHidden_174g6_23";
+  const styles = {
+    editableTextContainer,
+    editableTextText,
+    editableTextInput,
+    iconHidden
+  };
+  const _ConfirmEditInput = React.forwardRef(function ConfirmEditInput2({
+    value,
+    onChange,
+    onEditActivate,
+    onEditConfirm,
+    onEditCancel,
+    textClassName,
+    inputClassName,
+    iconClassName,
+    buttonVariant,
+    variant,
+    severity,
+    size,
+    mode = "buttons",
+    ...rest
+  }, ref) {
+    const [text, setText] = React.useState(value == null ? void 0 : value.toString());
+    const [input, setInput] = React.useState(value == null ? void 0 : value.toString());
+    const [isEditMode, setIsEditMode] = React.useState(false);
+    const isConfirmDisabled = !input || text === input;
+    const onInputChange = React.useCallback(
+      (e) => {
+        var _a;
+        setInput((_a = e.target.value) == null ? void 0 : _a.toString());
+        if (onChange) {
+          onChange(e);
+        }
+      },
+      [onChange]
+    );
+    const onPencilClick = React.useCallback(() => {
+      setIsEditMode(true);
+      if (onEditActivate) {
+        onEditActivate(text);
+      }
+    }, [onEditActivate, text]);
+    const onCheckClick = React.useCallback(() => {
+      setText(input);
+      setIsEditMode(false);
+      if (onEditConfirm) {
+        onEditConfirm(input);
+      }
+    }, [onEditConfirm, input]);
+    const onCancelClick = React.useCallback(() => {
+      setIsEditMode(false);
+      const prevInput = input;
+      setInput(text);
+      if (onEditCancel) {
+        onEditCancel(prevInput);
+      }
+    }, [text, input, onEditCancel]);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (mode !== "keys") {
+          return;
+        }
+        switch (e.key) {
+          case "Enter":
+            if (!isConfirmDisabled)
+              onCheckClick();
+            break;
+          case "Escape":
+            onCancelClick();
+            break;
+        }
+      },
+      [onCheckClick, onCancelClick, isConfirmDisabled, mode]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(HoverUtility, { children: ({ isHovered, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(Flex, { className: styles.editableTextContainer, gap: "3", ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          className: classNames(
+            isEditMode ? styles.editableTextInput : styles.editableTextText,
+            isEditMode ? inputClassName : textClassName
+          ),
+          onClick: () => !isEditMode && mode === "keys" && onPencilClick(),
+          value: isEditMode ? input : text,
+          onChange: onInputChange,
+          ref,
+          onKeyDown: handleKeyDown,
+          autoFocus: true,
+          size,
+          variant,
+          severity,
+          readOnly: !isEditMode,
+          style: isEditMode ? void 0 : {
+            cursor: mode === "keys" ? "text" : "unset"
+          },
+          ...rest
+        }
+      ),
+      mode === "buttons" && (isEditMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            className: classNames(iconClassName, styles.icon, !isHovered && styles.iconHidden),
+            size,
+            variant: buttonVariant,
+            severity,
+            disabled: isConfirmDisabled,
+            onClick: onCheckClick,
+            "aria-label": "Confirm edit",
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            className: classNames(iconClassName, styles.icon, !isHovered && styles.iconHidden),
+            color: "red",
+            size,
+            variant: buttonVariant,
+            severity,
+            onClick: onCancelClick,
+            "aria-label": "Cancel edit",
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross1Icon, {})
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton,
+        {
+          className: classNames(
+            iconClassName,
+            styles.editIcon,
+            styles.icon,
+            !isHovered && styles.iconHidden
+          ),
+          size,
+          variant: buttonVariant,
+          severity,
+          onClick: onPencilClick,
+          "aria-label": "Edit text",
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Pencil1Icon, {})
+        }
+      ))
+    ] }) });
+  });
+  const ConfirmEditInput = React.memo(_ConfirmEditInput);
   Object.defineProperty(exports2, "AccessibleIcon", {
     enumerable: true,
     get: () => themes.AccessibleIcon
@@ -3285,6 +3434,7 @@
   exports2.ButtonGroup = ButtonGroup;
   exports2.ButtonList = ButtonList;
   exports2.Checkbox = Checkbox;
+  exports2.ConfirmEditInput = ConfirmEditInput;
   exports2.DefaultTheme = DefaultTheme;
   exports2.Dialog = Dialog;
   exports2.DropdownMenu = DropdownMenu;