@overmap-ai/blocks 1.0.5 → 1.0.6

package/dist/blocks.js

@@ -192,7 +192,7 @@ const Badge = memo(_Badge);
 const zeroMinWidth = "_zeroMinWidth_curjh_1";
 const zeroMinHeight = "_zeroMinHeight_curjh_5";
 const radius = "_radius_curjh_9";
-const styles$l = {
+const styles$m = {
   zeroMinWidth,
   zeroMinHeight,
   radius
@@ -204,9 +204,9 @@ const Flex = memo(
         Flex$1,
         {
           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,
@@ -259,16 +259,16 @@ const fluid$1 = "_fluid_r73gr_1";
 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 === " ") {
@@ -289,12 +289,12 @@ const ButtonGroupContext = createContext({});
 const useButtonGroupContext = () => useContext(ButtonGroupContext);
 const spinner = "_spinner_isifr_9";
 const spin = "_spin_isifr_9";
-const styles$j = {
+const styles$k = {
   spinner,
   spin
 };
 const Spinner = memo(() => {
-  return /* @__PURE__ */ jsx("div", { className: styles$j.spinner });
+  return /* @__PURE__ */ jsx("div", { className: styles$k.spinner });
 });
 Spinner.displayName = "Spinner";
 const _Button$1 = forwardRef(function Button$1(props, ref) {
@@ -329,7 +329,7 @@ const _Button$1 = forwardRef(function Button$1(props, ref) {
       ref,
       type,
       className: classNames(className, hoverEffectClasses, {
-        [styles$k.fluid]: fluid2
+        [styles$l.fluid]: fluid2
       }),
       color,
       size: useResponsiveMapping(size, SizeMapping),
@@ -369,7 +369,7 @@ const _Button = forwardRef(function Button3(props, ref) {
     IconButton$1,
     {
       className: classNames(className, hoverEffectClasses, {
-        [styles$k.fluid]: fluid2
+        [styles$l.fluid]: fluid2
       }),
       ref,
       color,
@@ -383,7 +383,7 @@ const _Button = forwardRef(function Button3(props, ref) {
 });
 const IconButton = React.memo(_Button);
 const merged = "_merged_wdgxo_1";
-const styles$i = {
+const styles$j = {
   merged
 };
 const GhostVariantSizeToGapMapping = {
@@ -409,7 +409,7 @@ const _ButtonGroup = forwardRef(function ButtonGroup2({
     Flex$1,
     {
       className: classNames("overmap-button-group", className, {
-        [styles$i.merged]: merged2
+        [styles$j.merged]: merged2
       }),
       ref,
       gap: merged2 ? gap ?? mergedAutoGap : gap ?? "2",
@@ -422,7 +422,7 @@ const _ButtonGroup = forwardRef(function ButtonGroup2({
 });
 const ButtonGroup = memo(_ButtonGroup);
 const separators = "_separators_1f7v1_1";
-const styles$h = {
+const styles$i = {
   separators
 };
 const ButtonListBorder = memo(
@@ -453,7 +453,7 @@ const ButtonListRoot = memo(
         size,
         severity: "info",
         variant: buttonVariant,
-        className: classNames(className, styles$h.separators),
+        className: classNames(className, styles$i.separators),
         merged: true,
         gap: "0",
         direction: "column",
@@ -630,7 +630,7 @@ const DropdownMenu$1 = "_DropdownMenu_hj4sz_1";
 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,
@@ -680,7 +680,7 @@ const DropdownMenuItem = memo(function DropdownMenuItem2({
     },
     [closeOnSelect, onSelect]
   );
-  return /* @__PURE__ */ jsx(DropdownMenu$2.Item, { className: styles$g.DropdownMenuItem, textValue: "", onSelect: handleSelect, ...rest, children: /* @__PURE__ */ jsx(Flex$1, { align: "center", gap: "1", children: content }) });
+  return /* @__PURE__ */ jsx(DropdownMenu$2.Item, { className: styles$h.DropdownMenuItem, textValue: "", onSelect: handleSelect, ...rest, children: /* @__PURE__ */ jsx(Flex$1, { align: "center", gap: "1", children: content }) });
 });
 const DropdownMenu = memo(
   forwardRef(
@@ -709,14 +709,14 @@ const DropdownMenu = memo(
             children: /* @__PURE__ */ jsxs(
               Flex$1,
               {
-                className: styles$g.DropdownMenu,
+                className: styles$h.DropdownMenu,
                 direction: "column",
                 height: "max-content",
                 width: "max-content",
                 children: [
                   !!label && /* @__PURE__ */ jsx(DropdownMenu$2.Label, { children: label }),
                   items.map(({ closeOnSelect: itemCloseOnSelect, separator, ...rest2 }, index) => /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Box, { className: styles$g.DropdownMenuItemWrapper, children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(Box, { className: styles$h.DropdownMenuItemWrapper, children: /* @__PURE__ */ jsx(
                       DropdownMenuItem,
                       {
                         closeOnSelect: itemCloseOnSelect ?? closeOnSelect,
@@ -724,7 +724,7 @@ const DropdownMenu = memo(
                       },
                       index
                     ) }),
-                    !!separator && /* @__PURE__ */ jsx(Box, { className: styles$g.DropdownMenuSeparatorWrapper, children: /* @__PURE__ */ jsx(Separator, { size: "4" }) })
+                    !!separator && /* @__PURE__ */ jsx(Box, { className: styles$h.DropdownMenuSeparatorWrapper, children: /* @__PURE__ */ jsx(Separator, { size: "4" }) })
                   ] }, index))
                 ]
               }
@@ -740,7 +740,7 @@ const BorderBottom = "_BorderBottom_k517z_8";
 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,
@@ -791,11 +791,11 @@ const DropdownSelect = memo(
       );
       return /* @__PURE__ */ jsxs(DropdownMenu$2.Root, { onOpenChange: handleOnOpenChange, children: [
         /* @__PURE__ */ jsx(DropdownMenu$2.Trigger, { disabled, children: trigger }),
-        /* @__PURE__ */ jsx(DropdownMenu$2.Content, { ref, variant: "soft", color: infoColor, className: styles$f.Test, children: /* @__PURE__ */ jsxs(Flex, { className: styles$f.DropdownSelect, direction: "column", children: [
-          filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsx(Box, { px: "1", className: classNames({ [styles$f.BorderBottom]: items.length !== 0 }), children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(DropdownMenu$2.Content, { ref, variant: "soft", color: infoColor, className: styles$g.Test, children: /* @__PURE__ */ jsxs(Flex, { className: styles$g.DropdownSelect, direction: "column", children: [
+          filterValue !== void 0 && !!onFilterValueChange && /* @__PURE__ */ jsx(Box, { px: "1", className: classNames({ [styles$g.BorderBottom]: items.length !== 0 }), children: /* @__PURE__ */ jsxs(
             TextField.Root,
             {
-              className: styles$f.DropdownSelectInputWrapper,
+              className: styles$g.DropdownSelectInputWrapper,
               size: "2",
               variant: "soft",
               children: [
@@ -803,7 +803,7 @@ const DropdownSelect = memo(
                 /* @__PURE__ */ jsx(
                   TextField.Input,
                   {
-                    className: styles$f.DropdownSelectInput,
+                    className: styles$g.DropdownSelectInput,
                     value: filterValue,
                     placeholder,
                     onChange: handleOnInputValueChange
@@ -817,7 +817,7 @@ const DropdownSelect = memo(
             return /* @__PURE__ */ jsx(
               DropdownMenu$2.Item,
               {
-                className: styles$f.DropdownSelectItem,
+                className: styles$g.DropdownSelectItem,
                 onSelect: handleOnSelect(itemValue),
                 textValue: "",
                 asChild: true,
@@ -858,7 +858,7 @@ const HoverUtility = memo(function Root({ children }) {
   });
 });
 const fluid = "_fluid_7n1wr_1";
-const styles$e = {
+const styles$f = {
   fluid
 };
 const _Select = forwardRef(function Select2({
@@ -882,7 +882,7 @@ const _Select = forwardRef(function Select2({
     Select$1.Trigger,
     {
       className: classNames(className, {
-        [styles$e.fluid]: fluid2
+        [styles$f.fluid]: fluid2
       }),
       id,
       ref,
@@ -894,7 +894,7 @@ const _Select = forwardRef(function Select2({
     Select$1.Content,
     {
       side,
-      className: styles$e.contentDefault,
+      className: styles$f.contentDefault,
       position: "popper",
       variant: variant !== "surface" ? "soft" : "solid",
       color: itemSeverityColor,
@@ -1007,7 +1007,7 @@ const MultiSelect = memo(
     );
   })
 );
-const styles$d = {
+const styles$e = {
   "default": "_default_u936h_1"
 };
 const _Switch = forwardRef(function Switch2({ className, severity = "primary", icon, defaultChecked = false, onCheckedChange, ...rest }, ref) {
@@ -1035,7 +1035,7 @@ const _Switch = forwardRef(function Switch2({ className, severity = "primary", i
     /* @__PURE__ */ jsx(
       Switch$1,
       {
-        className: classNames("overmap-switch", className, styles$d.default),
+        className: classNames("overmap-switch", className, styles$e.default),
         ref: ref ? ref : fallbackRef,
         color: severityColor,
         radius: "full",
@@ -1053,7 +1053,7 @@ const right$2 = "_right_1onyo_7";
 const resizeHandle$1 = "_resizeHandle_1onyo_10";
 const left$2 = "_left_1onyo_13";
 const overlay = "_overlay_1onyo_33";
-const styles$c = {
+const styles$d = {
   sidebarContent,
   right: right$2,
   resizeHandle: resizeHandle$1,
@@ -1086,13 +1086,13 @@ const _Sidebar = forwardRef(function Sidebar2({
     setContainer(tempContainer);
   }, [containerSelector]);
   return /* @__PURE__ */ jsx(RadixDialogPrimitive.Root, { open, modal, children: /* @__PURE__ */ jsxs(RadixDialogPrimitive.Portal, { container, children: [
-    overlay2 && /* @__PURE__ */ jsx(RadixDialogPrimitive.Overlay, { className: classNames(styles$c.overlay) }),
+    overlay2 && /* @__PURE__ */ jsx(RadixDialogPrimitive.Overlay, { className: classNames(styles$d.overlay) }),
     /* @__PURE__ */ jsx(
       RadixDialogPrimitive.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,
@@ -1104,7 +1104,7 @@ const _Sidebar = forwardRef(function Sidebar2({
             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__ */ jsx(DragHandleDots2Icon, {}),
               left: /* @__PURE__ */ jsx(DragHandleDots2Icon, {})
@@ -1126,7 +1126,7 @@ const exitActive = "_exitActive_1iy9c_22";
 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,
@@ -1170,23 +1170,23 @@ const SlideOut = memo(function SlideOut2({
     {
       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__ */ jsxs(Fragment, { children: [
-        overlay2 && /* @__PURE__ */ jsx("div", { className: classNames("overamp-slide-out-overlay", styles$b.slideOutOverlay) }),
+        overlay2 && /* @__PURE__ */ jsx("div", { className: classNames("overamp-slide-out-overlay", styles$c.slideOutOverlay) }),
         /* @__PURE__ */ jsx(DismissableLayer, { disableOutsidePointerEvents: modal, asChild: true, ...rest, children: /* @__PURE__ */ jsx(
           Flex$1,
           {
-            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%",
@@ -1200,7 +1200,7 @@ const SlideOut = memo(function SlideOut2({
             children: /* @__PURE__ */ jsx(
               Resizable,
               {
-                className: styles$b.resizable,
+                className: styles$c.resizable,
                 defaultSize: { width: slideOutWidth, height: "100%" },
                 onResize: handleResize,
                 enable: { right: resizable2 && isSideLeft, left: resizable2 && isSideRight },
@@ -1222,7 +1222,7 @@ const noLeftIcon = "_noLeftIcon_1octa_14";
 const noRightIcon = "_noRightIcon_1octa_18";
 const ghost$1 = "_ghost_1octa_22";
 const charCount$1 = "_charCount_1octa_40";
-const styles$a = {
+const styles$b = {
   accommodateCharCount,
   wrapper: wrapper$2,
   "default": "_default_1octa_10",
@@ -1249,9 +1249,9 @@ const _Input = forwardRef(function Input2({
   return /* @__PURE__ */ jsxs(
     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,
@@ -1261,9 +1261,9 @@ const _Input = forwardRef(function Input2({
         /* @__PURE__ */ jsx(
           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,
@@ -1274,7 +1274,7 @@ const _Input = forwardRef(function Input2({
           }
         ),
         rightSlot && /* @__PURE__ */ jsx(TextField.Slot, { children: rightSlot }),
-        displayInputLength && /* @__PURE__ */ jsx(Text$1, { 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__ */ jsx(Text$1, { as: "p", className: styles$b.charCount, size: "1", color: "gray", children: rest.maxLength !== void 0 ? `${valueAsString == null ? void 0 : valueAsString.length}/${rest.maxLength}` : `${valueAsString == null ? void 0 : valueAsString.length}` })
       ]
     }
   );
@@ -1298,7 +1298,7 @@ const IconColorUtility = memo(function IconColorUtility2({
   return cloneElement(children, { ...childProps });
 });
 const wrapper$1 = "_wrapper_tmtz0_1";
-const styles$9 = {
+const styles$a = {
   wrapper: wrapper$1
 };
 const _Popover = forwardRef(function Popover2({ className, trigger, open, onOpenChange, defaultOpen = false, modal = false, children, ...rest }, ref) {
@@ -1308,7 +1308,7 @@ const _Popover = forwardRef(function Popover2({ className, trigger, open, onOpen
       Popover$1.Content,
       {
         ref,
-        className: classNames("overmap-popover", className, styles$9.wrapper),
+        className: classNames("overmap-popover", className, styles$a.wrapper),
         ...rest,
         children: children(Popover$1.Close)
       }
@@ -1323,7 +1323,7 @@ const right = "_right_1ssf2_18";
 const resizable = "_resizable_1ssf2_23";
 const resizeHandle = "_resizeHandle_1ssf2_28";
 const panelMainContent = "_panelMainContent_1ssf2_48";
-const styles$8 = {
+const styles$9 = {
   wrapper,
   panelContent,
   left,
@@ -1509,7 +1509,7 @@ const LeftAndRightPanels = memo(function Panels({
   return /* @__PURE__ */ jsxs(
     Flex$1,
     {
-      className: styles$8.wrapper,
+      className: styles$9.wrapper,
       style: { minWidth: `${leftMinWidth + rightMinWidth}px` },
       ref: wrapperRef,
       width: "100%",
@@ -1531,7 +1531,7 @@ const LeftAndRightPanels = memo(function Panels({
               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%",
@@ -1540,7 +1540,7 @@ const LeftAndRightPanels = memo(function Panels({
                 children: /* @__PURE__ */ jsx(
                   Resizable,
                   {
-                    className: styles$8.resizable,
+                    className: styles$9.resizable,
                     size: {
                       width: leftPanelWidth,
                       height: "100%"
@@ -1549,7 +1549,7 @@ const LeftAndRightPanels = memo(function Panels({
                     enable: { right: (resizeable == null ? void 0 : resizeable.left) !== void 0 ? resizeable.left : true },
                     minWidth: leftMinWidth,
                     maxWidth: leftPanelMaxWidth,
-                    handleClasses: { right: classNames(styles$8.resizeHandle, styles$8.left) },
+                    handleClasses: { right: classNames(styles$9.resizeHandle, styles$9.left) },
                     handleComponent: {
                       right: /* @__PURE__ */ jsx(DragHandleDots2Icon, { height: "14px", width: "14px" })
                     },
@@ -1560,7 +1560,7 @@ const LeftAndRightPanels = memo(function Panels({
             )
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$8.panelMainContent, children }),
+        /* @__PURE__ */ jsx("div", { className: styles$9.panelMainContent, children }),
         /* @__PURE__ */ jsx(
           Transition,
           {
@@ -1574,7 +1574,7 @@ const LeftAndRightPanels = memo(function Panels({
               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%",
@@ -1583,13 +1583,13 @@ const LeftAndRightPanels = memo(function Panels({
                 children: /* @__PURE__ */ jsx(
                   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__ */ jsx(DragHandleDots2Icon, { height: "14px", width: "14px" }) },
                     children: rightPanel
                   }
@@ -1607,7 +1607,7 @@ const pageTitle = "_pageTitle_spfw7_12";
 const buttonContainer = "_buttonContainer_spfw7_17";
 const optionsButtonContainer = "_optionsButtonContainer_spfw7_22";
 const optionsButton = "_optionsButton_spfw7_22";
-const styles$7 = {
+const styles$8 = {
   multiPagePopover,
   pageTitle,
   buttonContainer,
@@ -1621,7 +1621,7 @@ function getMultiPagePopoverContent(popoverOption, setMultiPagePopoverContent, d
   const optionButtons = popoverOption.options.map((option, i) => /* @__PURE__ */ jsx(
     Button2,
     {
-      className: classNames(styles$7.optionsButton, option.buttonClassName),
+      className: classNames(styles$8.optionsButton, option.buttonClassName),
       variant: "ghost",
       radius: "large",
       style: {
@@ -1637,12 +1637,12 @@ function getMultiPagePopoverContent(popoverOption, setMultiPagePopoverContent, d
     `${option.value}-page-${page}-button-${i}`
   ));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    popoverOption.title && /* @__PURE__ */ jsx("div", { className: styles$7.pageTitle, children: popoverOption.title }),
+    popoverOption.title && /* @__PURE__ */ jsx("div", { className: styles$8.pageTitle, children: popoverOption.title }),
     popoverOption.content,
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames(styles$7.optionsButtonContainer, popoverOption.buttonsContainerClassName),
+        className: classNames(styles$8.optionsButtonContainer, popoverOption.buttonsContainerClassName),
         style: {
           flexDirection: direction === "vertical" ? "column" : "row"
         },
@@ -1660,7 +1660,7 @@ const _MultiPagePopover = forwardRef(function MultiPagePopover2({ page, classNam
   return /* @__PURE__ */ jsx(
     Popover,
     {
-      className: classNames(styles$7.multiPagePopover, className),
+      className: classNames(styles$8.multiPagePopover, className),
       ref,
       onOpenAutoFocus: resetPopoverContent,
       onCloseAutoFocus: resetPopoverContent,
@@ -1672,7 +1672,7 @@ const _MultiPagePopover = forwardRef(function MultiPagePopover2({ page, classNam
 const MultiPagePopover = React.memo(_MultiPagePopover);
 const charCount = "_charCount_1lz28_1";
 const ghost = "_ghost_1lz28_5";
-const styles$6 = {
+const styles$7 = {
   charCount,
   ghost
 };
@@ -1708,7 +1708,7 @@ const _TextArea = forwardRef(function TextArea2({
       TextArea$1,
       {
         className: classNames("overmap-textarea", className, {
-          [styles$6.ghost]: variant === "ghost"
+          [styles$7.ghost]: variant === "ghost"
         }),
         style: { resize },
         variant: variant !== "ghost" ? variant : void 0,
@@ -1718,7 +1718,7 @@ const _TextArea = forwardRef(function TextArea2({
         ...rest
       }
     ),
-    displayInputLength && /* @__PURE__ */ jsx(Text$1, { as: "p", className: styles$6.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
+    displayInputLength && /* @__PURE__ */ jsx(Text$1, { as: "p", className: styles$7.charCount, color: infoColor, align: "right", children: displayInputLengthValue })
   ] });
 });
 const TextArea = memo(_TextArea);
@@ -1764,7 +1764,7 @@ const _ToggleGroup = forwardRef(function ToggleGroup2({
   );
 });
 const ToggleGroup = memo(_ToggleGroup);
-const styles$5 = {
+const styles$6 = {
   "default": "_default_xqvoc_1"
 };
 const Root2 = memo(
@@ -1772,7 +1772,7 @@ const Root2 = memo(
     return /* @__PURE__ */ jsx(
       Root$2,
       {
-        className: classNames(className, "overmap-toolbar", styles$5.default),
+        className: classNames(className, "overmap-toolbar", styles$6.default),
         ref,
         asChild: true,
         ...rest,
@@ -1813,7 +1813,7 @@ const actionButton = "_actionButton_1i6bp_20";
 const ToastRoot = "_ToastRoot_1i6bp_24";
 const slideIn = "_slideIn_1i6bp_1";
 const swipeOut = "_swipeOut_1i6bp_1";
-const styles$4 = {
+const styles$5 = {
   ToastViewport,
   actionButton,
   ToastRoot,
@@ -1831,7 +1831,7 @@ const _Toast = forwardRef(function Toast2({ title, description, icon, severity =
     },
     [onClose]
   );
-  return /* @__PURE__ */ jsx(RadixToast.Root, { asChild: true, ref, ...rest, open, type: sensitivity, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(Callout.Root, { className: styles$4.ToastRoot, variant: "surface", color, size, children: /* @__PURE__ */ jsxs(Flex$1, { width: "100%", align: "center", gap: "4", justify: "between", children: [
+  return /* @__PURE__ */ jsx(RadixToast.Root, { asChild: true, ref, ...rest, open, type: sensitivity, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(Callout.Root, { className: styles$5.ToastRoot, variant: "surface", color, size, children: /* @__PURE__ */ jsxs(Flex$1, { width: "100%", align: "center", gap: "4", justify: "between", children: [
     /* @__PURE__ */ jsxs(Flex$1, { align: "center", gap: "3", children: [
       /* @__PURE__ */ jsx(Callout.Icon, { children: icon }),
       /* @__PURE__ */ jsxs(Flex$1, { direction: "column", gap: "2", children: [
@@ -1839,7 +1839,7 @@ const _Toast = forwardRef(function Toast2({ title, description, icon, severity =
           /* @__PURE__ */ jsx(RadixToast.Title, { asChild: true, children: /* @__PURE__ */ jsx(Callout.Text, { size: "3", weight: "medium", children: title }) }),
           /* @__PURE__ */ jsx(RadixToast.Description, { asChild: true, children: /* @__PURE__ */ jsx(Callout.Text, { children: description }) })
         ] }),
-        action && /* @__PURE__ */ jsx(RadixToast.Action, { className: styles$4.actionButton, altText: action.altText, asChild: true, children: action.content })
+        action && /* @__PURE__ */ jsx(RadixToast.Action, { className: styles$5.actionButton, altText: action.altText, asChild: true, children: action.content })
       ] })
     ] }),
     /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "Close", variant: "ghost", severity, children: /* @__PURE__ */ jsx(Cross2Icon, {}) }) })
@@ -1915,11 +1915,11 @@ const ToastProvider = memo(function ToastContextProvider({
   }, []);
   return /* @__PURE__ */ jsx(ToastContext.Provider, { value: toastContextValue, children: /* @__PURE__ */ jsxs(ToastProvider$1, { ...rest, children: [
     children,
-    /* @__PURE__ */ jsx(ToastViewport$1, { className: classNames(className, styles$4.ToastViewport), hotkey }),
+    /* @__PURE__ */ jsx(ToastViewport$1, { className: classNames(className, styles$5.ToastViewport), hotkey }),
     toasts.map(({ id, onClose, ...toastProps }) => /* @__PURE__ */ jsx(Toast, { ...toastProps, onClose: () => handleCloseToast(id, 0, onClose) }, id))
   ] }) });
 });
-const styles$3 = {
+const styles$4 = {
   "default": "_default_1odpt_1"
 };
 const Tooltip = memo(
@@ -1927,7 +1927,7 @@ const Tooltip = memo(
     return /* @__PURE__ */ jsx(
       Tooltip$1,
       {
-        className: classNames("overmap-tooltip", className, styles$3.default),
+        className: classNames("overmap-tooltip", className, styles$4.default),
         ref,
         content: /* @__PURE__ */ jsx(Flex$1, { align: "center", gap: "1", width: "max-content", height: "max-content", justify: "center", children: content }),
         ...rest,
@@ -1937,7 +1937,7 @@ const Tooltip = memo(
   })
 );
 const noWrap = "_noWrap_1wpa5_1";
-const styles$2 = {
+const styles$3 = {
   noWrap
 };
 const Text = memo(
@@ -1948,7 +1948,7 @@ const Text = memo(
       {
         ref,
         as,
-        className: classNames(className, { [styles$2.noWrap]: noWrap2 }),
+        className: classNames(className, { [styles$3.noWrap]: noWrap2 }),
         color,
         ...props
       }
@@ -2566,7 +2566,7 @@ const checkboxIndicator = "_checkboxIndicator_pb9za_27";
 const checkboxLabel = "_checkboxLabel_pb9za_38";
 const noTextHighlight = "_noTextHighlight_pb9za_42";
 const checkboxHidden = "_checkboxHidden_pb9za_51";
-const styles$1 = {
+const styles$2 = {
   checkboxContainer,
   checkbox,
   checkboxIndicator,
@@ -2575,13 +2575,13 @@ const styles$1 = {
   checkboxHidden
 };
 const _Checkbox = forwardRef(function Checkbox2({ className, labelClassName, label, checked, onCheckedChange, ...rest }, ref) {
-  return /* @__PURE__ */ jsx(HoverUtility, { children: ({ isHovered, ...props }) => /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.checkboxContainer, ...props, children: [
+  return /* @__PURE__ */ jsx(HoverUtility, { children: ({ isHovered, ...props }) => /* @__PURE__ */ jsxs(Flex$1, { className: styles$2.checkboxContainer, ...props, children: [
     /* @__PURE__ */ jsx(
       $e698a72e93240346$export$be92b6f5f03c0fe9,
       {
         className: classNames(
-          styles$1.checkbox,
-          !isHovered && !checked && styles$1.checkboxHidden,
+          styles$2.checkbox,
+          !isHovered && !checked && styles$2.checkboxHidden,
           className
         ),
         checked,
@@ -2592,13 +2592,13 @@ const _Checkbox = forwardRef(function Checkbox2({ className, labelClassName, lab
         },
         ref,
         ...rest,
-        children: /* @__PURE__ */ jsx($e698a72e93240346$export$adb584737d712b70, { className: styles$1.checkboxIndicator, children: checked === "indeterminate" ? /* @__PURE__ */ jsx(DividerHorizontalIcon, { width: "13px" }) : /* @__PURE__ */ jsx(CheckIcon, {}) })
+        children: /* @__PURE__ */ jsx($e698a72e93240346$export$adb584737d712b70, { className: styles$2.checkboxIndicator, children: checked === "indeterminate" ? /* @__PURE__ */ jsx(DividerHorizontalIcon, { width: "13px" }) : /* @__PURE__ */ jsx(CheckIcon, {}) })
       }
     ),
     label && /* @__PURE__ */ 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);
@@ -2688,7 +2688,7 @@ const noDataTextContainer = "_noDataTextContainer_go3yk_78";
 const tableBottomContainer = "_tableBottomContainer_go3yk_84";
 const rowsPerPageContainer = "_rowsPerPageContainer_go3yk_88";
 const rowsPerPageText = "_rowsPerPageText_go3yk_98";
-const styles = {
+const styles$1 = {
   tableContainer,
   headerContainer,
   tableTopContainer,
@@ -2950,7 +2950,7 @@ const _Table = forwardRef(function Table2(props, ref) {
     return /* @__PURE__ */ 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
       },
@@ -2990,14 +2990,14 @@ const _Table = forwardRef(function Table2(props, ref) {
       }
     }
   }, [rowsPerPage, rows.length, numRowsPerPage, pagination, showPageNavigation]);
-  return /* @__PURE__ */ jsxs("div", { className: classNames({ [styles.tableContainer]: showContainer }), children: [
-    (!!title || !!description) && /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames({ [styles$1.tableContainer]: showContainer }), children: [
+    (!!title || !!description) && /* @__PURE__ */ jsxs("div", { className: styles$1.headerContainer, children: [
       !!title && /* @__PURE__ */ jsx(Text, { weight: "bold", size: "7", children: title }),
       !!description && /* @__PURE__ */ jsx(Text, { as: "div", children: description })
     ] }),
-    showTopBar && /* @__PURE__ */ jsxs(Flex$1, { justify: "between", className: styles.tableTopContainer, children: [
+    showTopBar && /* @__PURE__ */ jsxs(Flex$1, { justify: "between", className: styles$1.tableTopContainer, children: [
       /* @__PURE__ */ jsxs(Flex$1, { gap: "2", children: [
-        showSearchBar && /* @__PURE__ */ jsx("div", { className: styles.searchContainer, children: /* @__PURE__ */ jsx(
+        showSearchBar && /* @__PURE__ */ jsx("div", { className: styles$1.searchContainer, children: /* @__PURE__ */ jsx(
           Input,
           {
             value: search,
@@ -3046,7 +3046,7 @@ const _Table = forwardRef(function Table2(props, ref) {
     /* @__PURE__ */ jsx(
       Table$1,
       {
-        className: classNames(styles.table, className),
+        className: classNames(styles$1.table, className),
         data: tableData,
         theme,
         sort,
@@ -3056,16 +3056,16 @@ const _Table = forwardRef(function Table2(props, ref) {
         ref,
         children: (tableList) => /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [
-            showSelect && /* @__PURE__ */ jsx(HeaderCellSelect, { className: styles.tableHeaderCell }),
+            showSelect && /* @__PURE__ */ jsx(HeaderCellSelect, { className: styles$1.tableHeaderCell }),
             ...columnCells
           ] }) }),
           /* @__PURE__ */ jsxs(Body, { children: [
-            tableList.length === 0 && /* @__PURE__ */ jsx(TableRow, { className: styles.noDataTextContainer, children: /* @__PURE__ */ jsx(Cell, { children: emptyMessage }) }),
+            tableList.length === 0 && /* @__PURE__ */ jsx(TableRow, { className: styles$1.noDataTextContainer, children: /* @__PURE__ */ jsx(Cell, { children: emptyMessage }) }),
             tableList.map((row) => /* @__PURE__ */ jsxs(
               Row,
               {
                 item: row,
-                className: classNames(styles.tableRow, rowClassName, row.className),
+                className: classNames(styles$1.tableRow, rowClassName, row.className),
                 onClick: row.onClick,
                 children: [
                   showSelect && /* @__PURE__ */ jsx(CellSelect, { item: row }, row.id),
@@ -3073,7 +3073,7 @@ const _Table = forwardRef(function Table2(props, ref) {
                     Cell,
                     {
                       className: classNames(
-                        styles.tableCell,
+                        styles$1.tableCell,
                         cellClassName,
                         row[column.id].className
                       ),
@@ -3089,9 +3089,9 @@ const _Table = forwardRef(function Table2(props, ref) {
         ] })
       }
     ),
-    showBottomBar && /* @__PURE__ */ jsxs(Flex$1, { className: styles.tableBottomContainer, wrap: "wrap", direction: isMobile ? "column" : "row", children: [
-      showRowsPerPage && /* @__PURE__ */ jsxs(Flex$1, { className: styles.rowsPerPageContainer, children: [
-        /* @__PURE__ */ jsx("div", { className: styles.rowsPerPageText, children: "Rows per page:" }),
+    showBottomBar && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.tableBottomContainer, wrap: "wrap", direction: isMobile ? "column" : "row", children: [
+      showRowsPerPage && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.rowsPerPageContainer, children: [
+        /* @__PURE__ */ jsx("div", { className: styles$1.rowsPerPageText, children: "Rows per page:" }),
         /* @__PURE__ */ jsx(
           Select,
           {
@@ -3107,7 +3107,7 @@ const _Table = forwardRef(function Table2(props, ref) {
         )
       ] }),
       showPageNumber && /* @__PURE__ */ jsx(Flex$1, { justify: "center", children: totalPages > 0 && `Page ${pagination.state.page + 1} of ${totalPages}` }),
-      showPageNavigation && /* @__PURE__ */ jsxs(Flex$1, { className: styles.rowsPerPageContainer, gap: "2", justify: "end", children: [
+      showPageNavigation && /* @__PURE__ */ jsxs(Flex$1, { className: styles$1.rowsPerPageContainer, gap: "2", justify: "end", children: [
         /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -3153,6 +3153,155 @@ const _Table = forwardRef(function Table2(props, ref) {
   ] });
 });
 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 = forwardRef(function ConfirmEditInput2({
+  value,
+  onChange,
+  onEditActivate,
+  onEditConfirm,
+  onEditCancel,
+  textClassName,
+  inputClassName,
+  iconClassName,
+  buttonVariant,
+  variant,
+  severity,
+  size,
+  mode = "buttons",
+  ...rest
+}, ref) {
+  const [text, setText] = useState(value == null ? void 0 : value.toString());
+  const [input, setInput] = useState(value == null ? void 0 : value.toString());
+  const [isEditMode, setIsEditMode] = useState(false);
+  const isConfirmDisabled = !input || text === input;
+  const onInputChange = useCallback(
+    (e) => {
+      var _a;
+      setInput((_a = e.target.value) == null ? void 0 : _a.toString());
+      if (onChange) {
+        onChange(e);
+      }
+    },
+    [onChange]
+  );
+  const onPencilClick = useCallback(() => {
+    setIsEditMode(true);
+    if (onEditActivate) {
+      onEditActivate(text);
+    }
+  }, [onEditActivate, text]);
+  const onCheckClick = useCallback(() => {
+    setText(input);
+    setIsEditMode(false);
+    if (onEditConfirm) {
+      onEditConfirm(input);
+    }
+  }, [onEditConfirm, input]);
+  const onCancelClick = useCallback(() => {
+    setIsEditMode(false);
+    const prevInput = input;
+    setInput(text);
+    if (onEditCancel) {
+      onEditCancel(prevInput);
+    }
+  }, [text, input, onEditCancel]);
+  const handleKeyDown = 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__ */ jsx(HoverUtility, { children: ({ isHovered, ...props }) => /* @__PURE__ */ jsxs(Flex, { className: styles.editableTextContainer, gap: "3", ...props, children: [
+    /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: classNames(iconClassName, styles.icon, !isHovered && styles.iconHidden),
+          size,
+          variant: buttonVariant,
+          severity,
+          disabled: isConfirmDisabled,
+          onClick: onCheckClick,
+          "aria-label": "Confirm edit",
+          children: /* @__PURE__ */ jsx(CheckIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: classNames(iconClassName, styles.icon, !isHovered && styles.iconHidden),
+          color: "red",
+          size,
+          variant: buttonVariant,
+          severity,
+          onClick: onCancelClick,
+          "aria-label": "Cancel edit",
+          children: /* @__PURE__ */ jsx(Cross1Icon, {})
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: classNames(
+          iconClassName,
+          styles.editIcon,
+          styles.icon,
+          !isHovered && styles.iconHidden
+        ),
+        size,
+        variant: buttonVariant,
+        severity,
+        onClick: onPencilClick,
+        "aria-label": "Edit text",
+        children: /* @__PURE__ */ jsx(Pencil1Icon, {})
+      }
+    ))
+  ] }) });
+});
+const ConfirmEditInput = React.memo(_ConfirmEditInput);
 export {
   AccessibleIcon,
   AlertDialog,
@@ -3171,6 +3320,7 @@ export {
   Card2 as Card,
   Checkbox,
   Code,
+  ConfirmEditInput,
   Container,
   ContextMenu,
   DefaultTheme,