@overmap-ai/blocks 1.0.23 → 1.0.25-component-forms.0

package/dist/blocks.js

@@ -1,22 +1,23 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useThemeContext, Badge as Badge$1, Flex as Flex$1, Box, Link, Text as Text$2, Button, IconButton as IconButton$1, Card, Inset, Dialog as Dialog$1, AlertDialog as AlertDialog$1, DropdownMenu as DropdownMenu$1, Kbd, Select as Select$1, Checkbox as Checkbox$1, Switch as Switch$1, Portal, TextField, Popover as Popover$1, TextArea as TextArea$1, Callout, Tooltip as Tooltip$1, Theme, Separator as Separator$1, TableRow } from "@radix-ui/themes";
 import { Theme as Theme2, updateThemeAppearanceClass, useThemeContext as useThemeContext2 } from "@radix-ui/themes";
-import React, { useMemo, useState, useLayoutEffect, useCallback, useEffect, Children, isValidElement, forwardRef, memo, createContext, useContext, cloneElement, createElement, useRef, useReducer, Fragment as Fragment$1 } from "react";
+import React, { useMemo, useState, useLayoutEffect, useCallback, useEffect, Children, isValidElement, forwardRef, memo, createContext, useContext, cloneElement, createElement, useRef, useReducer } from "react";
 import { useMediaQuery } from "react-responsive";
 import { Cross1Icon, MagnifyingGlassIcon, CheckIcon, DragHandleDots2Icon, Cross2Icon, DividerHorizontalIcon, CaretSortIcon, ArrowUpIcon, ArrowDownIcon, MixerHorizontalIcon, Pencil1Icon, TrashIcon, DoubleArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, DoubleArrowRightIcon } from "@radix-ui/react-icons";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import { isMobile } from "react-device-detect";
 import * as RadixDialogPrimitive from "@radix-ui/react-dialog";
 import { Resizable } from "re-resizable";
-import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
 import { CSSTransition, Transition } from "react-transition-group";
-import { Root as Root$1, Item as Item$1 } from "@radix-ui/react-toggle-group";
-import { Root as Root$2 } from "@radix-ui/react-toolbar";
+import ReactDOM, { flushSync } from "react-dom";
+import { Slot } from "@radix-ui/react-slot";
+import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
+import { Root as Root$2, Item as Item$1 } from "@radix-ui/react-toggle-group";
+import { Root as Root$3 } from "@radix-ui/react-toolbar";
 import * as RadixToast from "@radix-ui/react-toast";
 import { ToastProvider as ToastProvider$1, ToastViewport as ToastViewport$1 } from "@radix-ui/react-toast";
 import { useErrorBoundary, ErrorBoundary } from "react-error-boundary";
 import FeatherIcon from "feather-icons-react";
-import { flushSync } from "react-dom";
 import { HeaderCell, Table as Table$1, Header, HeaderRow, Body, Cell, Row } from "@table-library/react-table-library/table.js";
 import { useTheme } from "@table-library/react-table-library/theme.js";
 import { useSort, HeaderCellSort } from "@table-library/react-table-library/sort.js";
@@ -212,7 +213,7 @@ const Badge = memo(_Badge);
 const zeroMinWidth = "_zeroMinWidth_curjh_1";
 const zeroMinHeight = "_zeroMinHeight_curjh_5";
 const radius = "_radius_curjh_9";
-const styles$m = {
+const styles$n = {
   zeroMinWidth,
   zeroMinHeight,
   radius
@@ -224,9 +225,9 @@ const Flex = memo(
         Flex$1,
         {
           className: classNames(className, {
-            [styles$m.radius]: radius2,
-            [styles$m.zeroMinWidth]: zeroMinWidth2,
-            [styles$m.zeroMinHeight]: zeroMinHeight2
+            [styles$n.radius]: radius2,
+            [styles$n.zeroMinWidth]: zeroMinWidth2,
+            [styles$n.zeroMinHeight]: zeroMinHeight2
           }),
           ref,
           ...rest,
@@ -279,16 +280,16 @@ const fluid$1 = "_fluid_r73gr_1";
 const hoverSpin90Clockwise = "_hoverSpin90Clockwise_r73gr_15";
 const hoverSpin180Clockwise = "_hoverSpin180Clockwise_r73gr_25";
 const hoverSpin360Clockwise = "_hoverSpin360Clockwise_r73gr_35";
-const styles$l = {
+const styles$m = {
   fluid: fluid$1,
   hoverSpin90Clockwise,
   hoverSpin180Clockwise,
   hoverSpin360Clockwise
 };
 const hoverEffectClassNameMapping = {
-  spin90Clockwise: styles$l.hoverSpin90Clockwise,
-  spin180Clockwise: styles$l.hoverSpin180Clockwise,
-  spin360Clockwise: styles$l.hoverSpin360Clockwise
+  spin90Clockwise: styles$m.hoverSpin90Clockwise,
+  spin180Clockwise: styles$m.hoverSpin180Clockwise,
+  spin360Clockwise: styles$m.hoverSpin360Clockwise
 };
 const clickOnEnterOrSpace = (e) => {
   if (e.key === "Enter" || e.key === " ") {
@@ -309,12 +310,12 @@ const ButtonGroupContext = createContext({});
 const useButtonGroupContext = () => useContext(ButtonGroupContext);
 const spinner = "_spinner_isifr_9";
 const spin = "_spin_isifr_9";
-const styles$k = {
+const styles$l = {
   spinner,
   spin
 };
 const Spinner = memo(() => {
-  return /* @__PURE__ */ jsx("div", { className: styles$k.spinner });
+  return /* @__PURE__ */ jsx("div", { className: styles$l.spinner });
 });
 Spinner.displayName = "Spinner";
 const _Button$1 = forwardRef(function Button$1(props, ref) {
@@ -350,7 +351,7 @@ const _Button$1 = forwardRef(function Button$1(props, ref) {
       ref,
       type,
       className: classNames(className, hoverEffectClasses, {
-        [styles$l.fluid]: fluid2
+        [styles$m.fluid]: fluid2
       }),
       color,
       size: useResponsiveMapping(size, SizeMapping),
@@ -392,7 +393,7 @@ const _Button = forwardRef(function Button3(props, ref) {
     IconButton$1,
     {
       className: classNames(className, hoverEffectClasses, {
-        [styles$l.fluid]: fluid2
+        [styles$m.fluid]: fluid2
       }),
       ref,
       color,
@@ -407,7 +408,7 @@ const _Button = forwardRef(function Button3(props, ref) {
 });
 const IconButton = React.memo(_Button);
 const merged = "_merged_wdgxo_1";
-const styles$j = {
+const styles$k = {
   merged
 };
 const GhostVariantSizeToGapMapping = {
@@ -434,7 +435,7 @@ const _ButtonGroup = forwardRef(function ButtonGroup2({
     Flex$1,
     {
       className: classNames("overmap-button-group", className, {
-        [styles$j.merged]: merged2
+        [styles$k.merged]: merged2
       }),
       ref,
       gap: merged2 ? gap ?? mergedAutoGap : gap ?? "2",
@@ -447,7 +448,7 @@ const _ButtonGroup = forwardRef(function ButtonGroup2({
 });
 const ButtonGroup = memo(_ButtonGroup);
 const separators = "_separators_1f7v1_1";
-const styles$i = {
+const styles$j = {
   separators
 };
 const ButtonListBorder = memo(
@@ -478,7 +479,7 @@ const ButtonListRoot = memo(
         size,
         severity: "info",
         variant: buttonVariant,
-        className: classNames(className, styles$i.separators),
+        className: classNames(className, styles$j.separators),
         merged: true,
         gap: "0",
         direction: "column",
@@ -673,7 +674,7 @@ 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$h = {
+const styles$i = {
   BaseMenuItem: BaseMenuItem$1,
   RemoveOutline,
   BaseMenuSeparator: BaseMenuSeparator$1,
@@ -684,7 +685,7 @@ const BaseMenuItem = memo(
     return /* @__PURE__ */ jsx(
       Box,
       {
-        className: classNames(styles$h.BaseMenuItem, className),
+        className: classNames(styles$i.BaseMenuItem, className),
         ref,
         position: "relative",
         px: "2",
@@ -700,11 +701,11 @@ const BaseMenuItem = memo(
 );
 const BaseMenuInput = memo(
   forwardRef((props) => {
-    return /* @__PURE__ */ jsx(Box, { className: styles$h.BaseMenuInput, px: "2", height: "6", width: "max-content", children: /* @__PURE__ */ jsx(Input, { ...props, variant: "ghost" }) });
+    return /* @__PURE__ */ jsx(Box, { className: styles$i.BaseMenuInput, px: "2", height: "6", width: "max-content", children: /* @__PURE__ */ jsx(Input, { ...props, variant: "ghost" }) });
   })
 );
 const BaseMenuSeparator = memo(function BaseMenuSeparator2() {
-  return /* @__PURE__ */ jsx(Box, { className: styles$h.BaseMenuSeparator, width: "100%", py: "1", children: /* @__PURE__ */ jsx(Box, { height: "0", width: "100%" }) });
+  return /* @__PURE__ */ jsx(Box, { className: styles$i.BaseMenuSeparator, width: "100%", py: "1", children: /* @__PURE__ */ jsx(Box, { height: "0", width: "100%" }) });
 });
 const useCloseOnSelectHandler = (closeOnSelect) => {
   return useCallback(
@@ -767,7 +768,7 @@ const BaseItemGroup = memo(function BaseItemGroup2({
         const itemContent = /* @__PURE__ */ jsx(
           ItemElement,
           {
-            className: classNames(className, styles$h.RemoveOutline),
+            className: classNames(className, styles$i.RemoveOutline),
             onSelect: closeOnSelectHandler(onSelect),
             textValue: "",
             asChild: true,
@@ -830,7 +831,7 @@ const BaseSelectGroup = memo(function BaseSelectGroup2({
       items.map(({ content, value: itemValue, onSelect, ...rest }, index) => /* @__PURE__ */ jsx(
         ItemElement,
         {
-          className: styles$h.RemoveOutline,
+          className: styles$i.RemoveOutline,
           checked: itemValue === value,
           onCheckedChange: handleCheckedChange(itemValue),
           onSelect: closeOnSelectHandler(onSelect),
@@ -909,7 +910,7 @@ const BaseMultiSelectGroup = memo(function BaseMultiSelectGroup2({
       items.map(({ value, content, className, onSelect, ...rest }, index) => /* @__PURE__ */ jsx(
         ItemElement,
         {
-          className: classNames(className, styles$h.RemoveOutline),
+          className: classNames(className, styles$i.RemoveOutline),
           onSelect: closeOnSelectHandler(onSelect),
           onCheckedChange: handleCheckedChange(value),
           checked: values.includes(value),
@@ -941,7 +942,7 @@ const BaseSubMenuGroup = memo(function BaseSubMenuGroup2({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GroupElement, { ...rest, children: items.map(({ triggerIndicator, content, subContent, className, ...rest2 }, index) => /* @__PURE__ */ jsxs(SubElement, { children: [
-      /* @__PURE__ */ jsx(SubTriggerElement, { className: classNames(className, styles$h.RemoveOutline), asChild: true, ...rest2, children: /* @__PURE__ */ jsx(BaseMenuItem, { rightSlot: triggerIndicator, children: content }) }),
+      /* @__PURE__ */ jsx(SubTriggerElement, { className: classNames(className, styles$i.RemoveOutline), asChild: true, ...rest2, children: /* @__PURE__ */ jsx(BaseMenuItem, { rightSlot: triggerIndicator, children: content }) }),
       /* @__PURE__ */ jsx(SubContentElement, { sideOffset: 10, children: subContent })
     ] }, index)) }),
     separator && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
@@ -1098,7 +1099,7 @@ const HoverUtility = memo(function Root({ children }) {
   });
 });
 const fluid = "_fluid_7n1wr_1";
-const styles$g = {
+const styles$h = {
   fluid
 };
 const _Select = forwardRef(function Select2({
@@ -1122,7 +1123,7 @@ const _Select = forwardRef(function Select2({
     Select$1.Trigger,
     {
       className: classNames(className, {
-        [styles$g.fluid]: fluid2
+        [styles$h.fluid]: fluid2
       }),
       id,
       ref,
@@ -1134,7 +1135,7 @@ const _Select = forwardRef(function Select2({
     Select$1.Content,
     {
       side,
-      className: styles$g.contentDefault,
+      className: styles$h.contentDefault,
       position: "popper",
       variant: variant !== "surface" ? "soft" : "solid",
       color: itemSeverityColor,
@@ -1247,7 +1248,7 @@ const MultiSelect = memo(
     );
   })
 );
-const styles$f = {
+const styles$g = {
   "default": "_default_u936h_1"
 };
 const _Switch = forwardRef(function Switch2({ className, severity = "primary", icon, defaultChecked = false, onCheckedChange, ...rest }, ref) {
@@ -1275,7 +1276,7 @@ const _Switch = forwardRef(function Switch2({ className, severity = "primary", i
     /* @__PURE__ */ jsx(
       Switch$1,
       {
-        className: classNames("overmap-switch", className, styles$f.default),
+        className: classNames("overmap-switch", className, styles$g.default),
         ref: ref ? ref : fallbackRef,
         color: severityColor,
         radius: "full",
@@ -1289,15 +1290,15 @@ const _Switch = forwardRef(function Switch2({ className, severity = "primary", i
 });
 const Switch = memo(_Switch);
 const sidebarContent = "_sidebarContent_1onyo_1";
-const right$2 = "_right_1onyo_7";
+const right$1 = "_right_1onyo_7";
 const resizeHandle$1 = "_resizeHandle_1onyo_10";
-const left$2 = "_left_1onyo_13";
+const left$1 = "_left_1onyo_13";
 const overlay = "_overlay_1onyo_33";
-const styles$e = {
+const styles$f = {
   sidebarContent,
-  right: right$2,
+  right: right$1,
   resizeHandle: resizeHandle$1,
-  left: left$2,
+  left: left$1,
   overlay
 };
 const defaultSidebarSize = { width: "auto", height: "100%" };
@@ -1326,13 +1327,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$e.overlay) }),
+    overlay2 && /* @__PURE__ */ jsx(RadixDialogPrimitive.Overlay, { className: classNames(styles$f.overlay) }),
     /* @__PURE__ */ jsx(
       RadixDialogPrimitive.Content,
       {
-        className: classNames("overmap-sidebar", "rt-DialogContent", styles$e.sidebarContent, {
-          [styles$e.left]: isLeft,
-          [styles$e.right]: isRight
+        className: classNames("overmap-sidebar", "rt-DialogContent", styles$f.sidebarContent, {
+          [styles$f.left]: isLeft,
+          [styles$f.right]: isRight
         }),
         ref,
         asChild: true,
@@ -1344,7 +1345,7 @@ const _Sidebar = forwardRef(function Sidebar2({
             maxWidth,
             defaultSize: defaultSidebarSize,
             enable: { right: resizable2 && isLeft, left: resizable2 && isRight },
-            handleClasses: { left: styles$e.resizeHandle, right: styles$e.resizeHandle },
+            handleClasses: { left: styles$f.resizeHandle, right: styles$f.resizeHandle },
             handleComponent: {
               right: /* @__PURE__ */ jsx(DragHandleDots2Icon, {}),
               left: /* @__PURE__ */ jsx(DragHandleDots2Icon, {})
@@ -1357,111 +1358,568 @@ const _Sidebar = forwardRef(function Sidebar2({
   ] }) });
 });
 const Sidebar = memo(_Sidebar);
-const outerContent = "_outerContent_n84eo_1";
-const enter = "_enter_n84eo_4";
-const right$1 = "_right_n84eo_7";
-const left$1 = "_left_n84eo_11";
-const enterActive = "_enterActive_n84eo_15";
-const exitActive = "_exitActive_n84eo_28";
-const exitDone = "_exitDone_n84eo_41";
-const resizable$1 = "_resizable_n84eo_53";
-const slideOutOverlay = "_slideOutOverlay_n84eo_59";
-const styles$d = {
-  outerContent,
-  enter,
-  right: right$1,
-  left: left$1,
-  enterActive,
-  exitActive,
-  exitDone,
-  resizable: resizable$1,
-  slideOutOverlay
+const LayoutContext = createContext({});
+const Root$1 = memo((props) => {
+  const { children, small = false, hideLayout = false } = props;
+  const [showLeftSlideOut, setShowLeftSlideOut] = useState(false);
+  const [showRightSlideOut, setShowRightSlideOut] = useState(false);
+  const contextValue = useMemo(
+    () => ({
+      small,
+      hideLayout,
+      showLeftSlideOut,
+      setShowLeftSlideOut,
+      showRightSlideOut,
+      setShowRightSlideOut
+    }),
+    [hideLayout, showLeftSlideOut, showRightSlideOut, small]
+  );
+  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value: contextValue, children });
+});
+Root$1.displayName = "Layout.Root";
+const useLayoutContext = () => useContext(LayoutContext);
+const Container = memo(
+  forwardRef((props, ref) => {
+    const { children, style, grow = "1", height = "100%", position, ...rest } = props;
+    const { hideLayout = false } = useLayoutContext();
+    return !hideLayout && /* @__PURE__ */ jsx(Flex$1, { ref, grow, height, position, style, ...rest, children });
+  })
+);
+const SlideOutOverlay = memo(
+  forwardRef((props, ref) => {
+    const { className, style, active, side, smallModeOnly = false } = props;
+    const { small, hideLayout, showLeftSlideOut, showRightSlideOut } = useLayoutContext();
+    const showOverlay = useMemo(() => {
+      if (active !== void 0)
+        return active;
+      if (hideLayout)
+        return false;
+      if (smallModeOnly && !small)
+        return false;
+      return side === "left" ? showLeftSlideOut : showRightSlideOut;
+    }, [active, hideLayout, showLeftSlideOut, showRightSlideOut, side, small, smallModeOnly]);
+    return showOverlay && /* @__PURE__ */ jsx(
+      Flex$1,
+      {
+        className: classNames("overmap-layout-overlay", className),
+        style: { ...style },
+        ref,
+        position: "absolute",
+        inset: "0"
+      }
+    );
+  })
+);
+function usePointerDownOutside(onPointerDownOutside, ownerElement = globalThis == null ? void 0 : globalThis.document.body) {
+  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = useRef(false);
+  const handleClickRef = useRef(() => {
+  });
+  useEffect(() => {
+    const handlePointerDown = (event) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        const handleAndDispatchPointerDownOutsideEvent = () => {
+          handleAndDispatchCustomEvent("pointerDownOutside", handlePointerDownOutside, eventDetail, {
+            discrete: true
+          });
+        };
+        if (event.pointerType === "touch") {
+          ownerElement.removeEventListener("click", handleClickRef.current);
+          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
+          ownerElement.addEventListener("click", handleClickRef.current, { once: true });
+        } else {
+          handleAndDispatchPointerDownOutsideEvent();
+        }
+      } else {
+        ownerElement.removeEventListener("click", handleClickRef.current);
+      }
+      isPointerInsideReactTreeRef.current = false;
+    };
+    const timerId = window.setTimeout(() => {
+      ownerElement.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
+    return () => {
+      window.clearTimeout(timerId);
+      ownerElement.removeEventListener("pointerdown", handlePointerDown);
+      ownerElement.removeEventListener("click", handleClickRef.current);
+    };
+  }, [ownerElement, handlePointerDownOutside]);
+  return {
+    // ensures we check React component tree (not just DOM tree)
+    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
+  };
+}
+function dispatchDiscreteCustomEvent(target, event) {
+  if (target)
+    ReactDOM.flushSync(() => target.dispatchEvent(event));
+}
+function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+  const target = detail.originalEvent.target;
+  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
+  if (handler)
+    target.addEventListener(name, handler, { once: true });
+  if (discrete) {
+    dispatchDiscreteCustomEvent(target, event);
+  } else {
+    target.dispatchEvent(event);
+  }
+}
+function useCallbackRef(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return useMemo(() => (...args) => {
+    var _a;
+    return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
+  }, []);
+}
+const EnterRight$1 = "_EnterRight_1jwyv_2";
+const EnterActiveRight$1 = "_EnterActiveRight_1jwyv_6";
+const EnterDoneRight$1 = "_EnterDoneRight_1jwyv_11";
+const ExitRight$1 = "_ExitRight_1jwyv_15";
+const ExitActiveRight$1 = "_ExitActiveRight_1jwyv_19";
+const ExitDoneRight$1 = "_ExitDoneRight_1jwyv_24";
+const EnterLeft$1 = "_EnterLeft_1jwyv_29";
+const EnterActiveLeft$1 = "_EnterActiveLeft_1jwyv_33";
+const EnterDoneLeft$1 = "_EnterDoneLeft_1jwyv_38";
+const ExitLeft$1 = "_ExitLeft_1jwyv_42";
+const ExitActiveLeft$1 = "_ExitActiveLeft_1jwyv_46";
+const ExitDoneLeft$1 = "_ExitDoneLeft_1jwyv_51";
+const Overlay$1 = "_Overlay_1jwyv_56";
+const styles$e = {
+  EnterRight: EnterRight$1,
+  EnterActiveRight: EnterActiveRight$1,
+  EnterDoneRight: EnterDoneRight$1,
+  ExitRight: ExitRight$1,
+  ExitActiveRight: ExitActiveRight$1,
+  ExitDoneRight: ExitDoneRight$1,
+  EnterLeft: EnterLeft$1,
+  EnterActiveLeft: EnterActiveLeft$1,
+  EnterDoneLeft: EnterDoneLeft$1,
+  ExitLeft: ExitLeft$1,
+  ExitActiveLeft: ExitActiveLeft$1,
+  ExitDoneLeft: ExitDoneLeft$1,
+  Overlay: Overlay$1
 };
-const TRANSITION_DURATION$1 = 200;
-const SlideOut = memo(function SlideOut2({
-  className,
-  open,
-  side = "left",
-  children,
-  minWidth,
-  maxWidth,
-  resizable: resizable2 = true,
-  overlay: overlay2 = false,
-  modal = false,
-  resizeHandle: resizeHandle2,
-  position = "absolute",
-  overlayClassName,
-  ...rest
-}) {
-  const contentRef = useRef(null);
-  const [slideOutWidth, setSideBarWith] = useState(minWidth);
-  const isSideLeft = side === "left";
-  const isSideRight = side === "right";
-  const handleResize = useCallback(
-    (_event, _dir, ref, _delta) => {
-      setSideBarWith(ref.clientWidth);
-      if (contentRef.current) {
-        contentRef.current.style.width = `${ref.clientWidth}px`;
+const TIMEOUT_DURATION$1 = 200;
+const SlideOutV3 = memo(
+  forwardRef((props, ref) => {
+    const {
+      className,
+      style,
+      children,
+      open,
+      modal = false,
+      overlayComponent,
+      resizeable = true,
+      side,
+      position = "relative",
+      initialWidth,
+      minWidth,
+      maxWidth,
+      onDismiss,
+      onOpening,
+      onClosed,
+      content
+    } = props;
+    const isLeft = side === "left";
+    const [parentContainer, setParentContainer] = useState(document.body);
+    const childrenContainerRef = useRef(null);
+    const [slideOutWidth, setSlideOutWidth] = useState(initialWidth);
+    const handleResize = useCallback(
+      (_event, _dir, ref2, _delta) => {
+        setSlideOutWidth(ref2.clientWidth);
+      },
+      []
+    );
+    const handleDismiss = useCallback(() => {
+      if (modal && onDismiss) {
+        onDismiss();
       }
-    },
-    []
-  );
-  return /* @__PURE__ */ jsx(
-    CSSTransition,
-    {
-      in: open,
-      classNames: {
-        enter: styles$d.enter,
-        enterActive: styles$d.enterActive,
-        exitActive: styles$d.exitActive,
-        exitDone: styles$d.exitDone
+    }, [modal, onDismiss]);
+    const handleAssignParentContainer = useCallback((element) => {
+      if (element) {
+        setParentContainer(element);
+      }
+    }, []);
+    useEffect(() => {
+      setSlideOutWidth(initialWidth);
+    }, [initialWidth]);
+    useEffect(() => {
+      if (!childrenContainerRef.current)
+        return;
+      const originalParentPointerEvents = childrenContainerRef.current.style.pointerEvents;
+      if (open && modal) {
+        childrenContainerRef.current.style.pointerEvents = "none";
+      }
+      return () => {
+        if (childrenContainerRef.current) {
+          childrenContainerRef.current.style.pointerEvents = originalParentPointerEvents;
+        }
+      };
+    }, [modal, open, parentContainer.style]);
+    const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(handleDismiss, parentContainer);
+    const CSSTransitionClassNames = 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
+      }),
+      [isLeft]
+    );
+    const resizableSize = useMemo(
+      () => (
+        // prettier-ignore
+        { width: slideOutWidth, height: "100%" }
+      ),
+      [slideOutWidth]
+    );
+    const resizableStyle = useMemo(
+      () => ({
+        position,
+        "--slide-out-width": `${slideOutWidth}${typeof slideOutWidth === "number" ? "px" : ""}`
+      }),
+      [position, slideOutWidth]
+    );
+    const resizableEnable = useMemo(
+      () => ({ left: resizeable && !isLeft, right: resizeable && isLeft }),
+      [isLeft, resizeable]
+    );
+    const SlideOut2 = useMemo(
+      () => /* @__PURE__ */ jsx(
+        CSSTransition,
+        {
+          classNames: CSSTransitionClassNames,
+          in: open,
+          timeout: TIMEOUT_DURATION$1,
+          unmountOnExit: true,
+          mountOnEnter: true,
+          onEntering: onOpening,
+          onExited: onClosed,
+          children: /* @__PURE__ */ jsx(
+            Flex$1,
+            {
+              className,
+              top: "0",
+              bottom: "0",
+              left: isLeft ? "0" : void 0,
+              right: !isLeft ? "0" : void 0,
+              position,
+              asChild: true,
+              style,
+              onPointerDownCapture: handlePointerDownCapture,
+              ref,
+              children: /* @__PURE__ */ jsx(
+                Resizable,
+                {
+                  as: "div",
+                  onResize: handleResize,
+                  size: resizableSize,
+                  style: resizableStyle,
+                  minWidth,
+                  maxWidth,
+                  enable: resizableEnable,
+                  children: content
+                }
+              )
+            }
+          )
+        }
+      ),
+      [
+        CSSTransitionClassNames,
+        open,
+        onOpening,
+        onClosed,
+        className,
+        isLeft,
+        position,
+        style,
+        handlePointerDownCapture,
+        ref,
+        handleResize,
+        resizableSize,
+        resizableStyle,
+        minWidth,
+        maxWidth,
+        resizableEnable,
+        content
+      ]
+    );
+    return /* @__PURE__ */ jsxs(
+      Flex$1,
+      {
+        ref: handleAssignParentContainer,
+        width: "100%",
+        height: "100%",
+        direction: "row",
+        position: "relative",
+        style: { overflow: "hidden" },
+        children: [
+          side === "left" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            open && overlayComponent,
+            " ",
+            SlideOut2
+          ] }),
+          /* @__PURE__ */ jsx(Flex$1, { ref: childrenContainerRef, grow: "1", height: "100%", children }),
+          side === "right" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            open && overlayComponent,
+            " ",
+            SlideOut2
+          ] })
+        ]
+      }
+    );
+  })
+);
+const DEFAULT_INITIAL_WIDTH = "30%";
+const SlideOut = memo(
+  forwardRef((props, ref) => {
+    const { small, hideLayout } = useLayoutContext();
+    const { className, showSlideOut, setShowSlideOut, defaultOpen, side, ...rest } = props;
+    useEffect(() => {
+      if (small && (defaultOpen == null ? void 0 : defaultOpen.small) !== void 0) {
+        setShowSlideOut(defaultOpen == null ? void 0 : defaultOpen.small);
+      } else if (!small && (defaultOpen == null ? void 0 : defaultOpen.large) !== void 0) {
+        setShowSlideOut(defaultOpen == null ? void 0 : defaultOpen.large);
+      }
+    }, [defaultOpen, setShowSlideOut, small]);
+    const handleDismiss = useCallback(() => {
+      setShowSlideOut(false);
+    }, [setShowSlideOut]);
+    const mergedProps = useMemo(
+      () => ({
+        // controlled props
+        ...{
+          open: showSlideOut,
+          initialWidth: DEFAULT_INITIAL_WIDTH,
+          modal: small,
+          onDismiss: handleDismiss,
+          position: small ? "absolute" : "relative"
+        },
+        // uncontrolled props
+        ...rest
+      }),
+      [handleDismiss, rest, showSlideOut, small]
+    );
+    return !hideLayout && /* @__PURE__ */ jsx(
+      SlideOutV3,
+      {
+        className: classNames(`overmap-layout-slideOut-${side}`, className),
+        side,
+        ref,
+        ...mergedProps
+      }
+    );
+  })
+);
+const LeftSlideOut = memo(
+  forwardRef((props, ref) => {
+    const { showLeftSlideOut, setShowLeftSlideOut } = useLayoutContext();
+    return /* @__PURE__ */ jsx(
+      SlideOut,
+      {
+        side: "left",
+        showSlideOut: showLeftSlideOut,
+        setShowSlideOut: setShowLeftSlideOut,
+        ref,
+        ...props
+      }
+    );
+  })
+);
+const RightSlideOut = memo(
+  forwardRef((props, ref) => {
+    const { showRightSlideOut, setShowRightSlideOut } = useLayoutContext();
+    return /* @__PURE__ */ jsx(
+      SlideOut,
+      {
+        side: "right",
+        showSlideOut: showRightSlideOut,
+        setShowSlideOut: setShowRightSlideOut,
+        ref,
+        ...props
+      }
+    );
+  })
+);
+const SlideOutTrigger = memo(
+  forwardRef((props, ref) => {
+    const { side, children } = props;
+    const { setShowLeftSlideOut, setShowRightSlideOut } = useLayoutContext();
+    const handleClick = useCallback(() => {
+      if (side === "left") {
+        setShowLeftSlideOut((prevState) => !prevState);
+      } else {
+        setShowRightSlideOut((prevState) => !prevState);
+      }
+    }, [setShowLeftSlideOut, setShowRightSlideOut, side]);
+    return /* @__PURE__ */ jsx(Slot, { ref, onClick: handleClick, children });
+  })
+);
+const Layout = {
+  Root: Root$1,
+  Container,
+  SlideOutOverlay,
+  LeftSlideOut,
+  RightSlideOut,
+  SlideOutTrigger
+};
+const EnterRight = "_EnterRight_1jwyv_2";
+const EnterActiveRight = "_EnterActiveRight_1jwyv_6";
+const EnterDoneRight = "_EnterDoneRight_1jwyv_11";
+const ExitRight = "_ExitRight_1jwyv_15";
+const ExitActiveRight = "_ExitActiveRight_1jwyv_19";
+const ExitDoneRight = "_ExitDoneRight_1jwyv_24";
+const EnterLeft = "_EnterLeft_1jwyv_29";
+const EnterActiveLeft = "_EnterActiveLeft_1jwyv_33";
+const EnterDoneLeft = "_EnterDoneLeft_1jwyv_38";
+const ExitLeft = "_ExitLeft_1jwyv_42";
+const ExitActiveLeft = "_ExitActiveLeft_1jwyv_46";
+const ExitDoneLeft = "_ExitDoneLeft_1jwyv_51";
+const Overlay = "_Overlay_1jwyv_56";
+const styles$d = {
+  EnterRight,
+  EnterActiveRight,
+  EnterDoneRight,
+  ExitRight,
+  ExitActiveRight,
+  ExitDoneRight,
+  EnterLeft,
+  EnterActiveLeft,
+  EnterDoneLeft,
+  ExitLeft,
+  ExitActiveLeft,
+  ExitDoneLeft,
+  Overlay
+};
+const TIMEOUT_DURATION = 200;
+const SlideOutV2 = memo(
+  forwardRef((props, ref) => {
+    const {
+      className,
+      style,
+      children,
+      open,
+      modal = false,
+      resizeable = true,
+      side,
+      position = "relative",
+      initialWidth,
+      minWidth,
+      maxWidth,
+      onDismiss,
+      onOpening,
+      onClosed
+    } = props;
+    const isLeft = side === "left";
+    const [slideOutWidth, setSlideOutWidth] = useState(initialWidth);
+    const handleResize = useCallback(
+      (_event, _dir, ref2, _delta) => {
+        setSlideOutWidth(ref2.clientWidth);
       },
-      timeout: TRANSITION_DURATION$1,
-      nodeRef: contentRef,
-      unmountOnExit: true,
-      mountOnEnter: true,
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        overlay2 && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classNames("overmap-slide-out-overlay", styles$d.slideOutOverlay, overlayClassName)
-          }
-        ),
-        /* @__PURE__ */ jsx(DismissableLayer, { disableOutsidePointerEvents: modal, asChild: true, ...rest, children: /* @__PURE__ */ jsx(
-          Flex$1,
-          {
-            className: classNames("overmap-slide-out", className, styles$d.outerContent, {
-              [styles$d.left]: isSideLeft,
-              [styles$d.right]: isSideRight
-            }),
-            style: { "--slide-out-width": `${slideOutWidth}px` },
-            height: "100%",
-            width: "auto",
-            position,
-            top: "0",
-            bottom: "0",
-            left: isSideLeft ? "0" : void 0,
-            right: isSideRight ? "0" : void 0,
-            ref: contentRef,
-            children: /* @__PURE__ */ jsx(
-              Resizable,
-              {
-                className: styles$d.resizable,
-                defaultSize: { width: slideOutWidth, height: "100%" },
-                onResize: handleResize,
-                enable: { right: resizable2 && isSideLeft, left: resizable2 && isSideRight },
-                handleComponent: { left: resizeHandle2, right: resizeHandle2 },
-                minWidth,
-                maxWidth,
-                children
-              }
-            )
-          }
-        ) })
-      ] })
-    }
-  );
-});
+      []
+    );
+    const handleDismiss = useCallback(
+      (event) => {
+        if (modal && onDismiss) {
+          onDismiss(event);
+        }
+      },
+      [modal, onDismiss]
+    );
+    useEffect(() => {
+      setSlideOutWidth(initialWidth);
+    }, [initialWidth]);
+    const CSSTransitionClassNames = 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
+      }),
+      [isLeft]
+    );
+    return (
+      /** The DismissableLayer Component is strictly a functionality-based component for emulating an overlay. Its main use is for
+       * detecting interactions OUTSIDE whatever content is placed within it, allowing the developer to decide what to do with that
+       * content when it is 'dismissed' (i.e closed, to be hidden, etc.).
+       *
+       * There are three main events that trigger this 'dismissal' behavior
+       * 1) Focus is given to an element outside the content rendered within the DismissableLayer component
+       * 2) PointerEvent occurs on an element outside the content rendered within the DismissableLayer component
+       * 3) Escape key is pressed
+       *
+       * The 'disableOutsidePointerEvents' prop is used for disabling focus and PointerEvents on outside elements.
+       * The dismissal behavior will still eb trigger, it just won't allow any elements to be interacted with until
+       * the DismissableLayer is removed from the DOM, or 'disableOutsidePointerEvents' is set to false
+       *
+       * In this use case, Overmap's SlideOut will have two specific behaviors
+       * 1) Modal mode - the SlideOut has modal-like behavior where it will dismiss PointerEvents and Focus of
+       * 		outside elements
+       * 2) Non-modal mode - the SlideOut behaves like a side panel the co-exists with content outside of it
+       * 		*/
+      /* @__PURE__ */ jsx(
+        CSSTransition,
+        {
+          classNames: CSSTransitionClassNames,
+          in: open,
+          timeout: TIMEOUT_DURATION,
+          unmountOnExit: true,
+          mountOnEnter: true,
+          onEntering: onOpening,
+          onExited: onClosed,
+          children: /* @__PURE__ */ jsx(
+            DismissableLayer,
+            {
+              disableOutsidePointerEvents: modal,
+              style,
+              onInteractOutside: handleDismiss,
+              onEscapeKeyDown: handleDismiss,
+              asChild: true,
+              children: /* @__PURE__ */ jsx(
+                Flex$1,
+                {
+                  className,
+                  ref,
+                  top: "0",
+                  bottom: "0",
+                  left: isLeft ? "0" : void 0,
+                  right: !isLeft ? "0" : void 0,
+                  position,
+                  asChild: true,
+                  children: /* @__PURE__ */ jsx(
+                    Resizable,
+                    {
+                      onResize: handleResize,
+                      size: { width: slideOutWidth, height: "100%" },
+                      style: {
+                        position,
+                        "--slide-out-width": `${slideOutWidth}${typeof slideOutWidth === "number" ? "px" : ""}`
+                      },
+                      minWidth,
+                      maxWidth,
+                      enable: { left: resizeable && !isLeft, right: resizeable && isLeft },
+                      children
+                    }
+                  )
+                }
+              )
+            },
+            modal ? "1" : "0"
+          )
+        }
+      )
+    );
+  })
+);
 const accommodateCharCount = "_accommodateCharCount_1octa_1";
 const wrapper$2 = "_wrapper_1octa_5";
 const noLeftIcon = "_noLeftIcon_1octa_14";
@@ -1984,7 +2442,7 @@ const _ToggleGroup = forwardRef(function ToggleGroup2({
   ...rest
 }, ref) {
   return /* @__PURE__ */ jsx(
-    Root$1,
+    Root$2,
     {
       type,
       className: classNames("overmap-toggle-group", className),
@@ -2016,7 +2474,7 @@ const styles$7 = {
 const Root2 = memo(
   forwardRef(({ className, minContentGap = "2", children, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(
-      Root$2,
+      Root$3,
       {
         className: classNames(className, "overmap-toolbar", styles$7.default),
         ref,
@@ -2651,77 +3109,6 @@ function $921a889cee6df7e8$var$usePresence(present) {
 function $921a889cee6df7e8$var$getAnimationName(styles2) {
   return (styles2 === null || styles2 === void 0 ? void 0 : styles2.animationName) || "none";
 }
-const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-  const childrenArray = Children.toArray(children);
-  const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
-  if (slottable) {
-    const newElement = slottable.props.children;
-    const newChildren = childrenArray.map((child) => {
-      if (child === slottable) {
-        if (Children.count(newElement) > 1)
-          return Children.only(null);
-        return /* @__PURE__ */ isValidElement(newElement) ? newElement.props.children : null;
-      } else
-        return child;
-    });
-    return /* @__PURE__ */ createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
-      ref: forwardedRef
-    }), /* @__PURE__ */ isValidElement(newElement) ? /* @__PURE__ */ cloneElement(newElement, void 0, newChildren) : null);
-  }
-  return /* @__PURE__ */ createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
-    ref: forwardedRef
-  }), children);
-});
-$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = "Slot";
-const $5e63c961fc1ce211$var$SlotClone = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-  if (/* @__PURE__ */ isValidElement(children))
-    return /* @__PURE__ */ cloneElement(children, {
-      ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
-      ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) : children.ref
-    });
-  return Children.count(children) > 1 ? Children.only(null) : null;
-});
-$5e63c961fc1ce211$var$SlotClone.displayName = "SlotClone";
-const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children }) => {
-  return /* @__PURE__ */ createElement(Fragment$1, null, children);
-};
-function $5e63c961fc1ce211$var$isSlottable(child) {
-  return /* @__PURE__ */ isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
-}
-function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
-  const overrideProps = {
-    ...childProps
-  };
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue)
-        overrideProps[propName] = (...args) => {
-          childPropValue(...args);
-          slotPropValue(...args);
-        };
-      else if (slotPropValue)
-        overrideProps[propName] = slotPropValue;
-    } else if (propName === "style")
-      overrideProps[propName] = {
-        ...slotPropValue,
-        ...childPropValue
-      };
-    else if (propName === "className")
-      overrideProps[propName] = [
-        slotPropValue,
-        childPropValue
-      ].filter(Boolean).join(" ");
-  }
-  return {
-    ...slotProps,
-    ...overrideProps
-  };
-}
 const $8927f6f2acc4f386$var$NODES = [
   "a",
   "button",
@@ -2743,7 +3130,7 @@ const $8927f6f2acc4f386$var$NODES = [
 const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node) => {
   const Node = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
+    const Comp = asChild ? Slot : node;
     useEffect(() => {
       window[Symbol.for("radix-ui")] = true;
     }, []);
@@ -2893,22 +3280,29 @@ function $e698a72e93240346$var$getState(checked) {
 }
 const $e698a72e93240346$export$be92b6f5f03c0fe9 = $e698a72e93240346$export$48513f6b9f8ce62d;
 const $e698a72e93240346$export$adb584737d712b70 = $e698a72e93240346$export$59aad738f51d1c05;
-const checkboxContainer = "_checkboxContainer_pb9za_5";
-const checkbox = "_checkbox_pb9za_5";
-const checkboxIndicator = "_checkboxIndicator_pb9za_27";
-const checkboxLabel = "_checkboxLabel_pb9za_38";
-const noTextHighlight = "_noTextHighlight_pb9za_42";
-const checkboxHidden = "_checkboxHidden_pb9za_51";
+const checkbox = "_checkbox_yl8iy_5";
+const checkboxIndicator = "_checkboxIndicator_yl8iy_22";
+const checkboxLabel = "_checkboxLabel_yl8iy_33";
+const noTextHighlight = "_noTextHighlight_yl8iy_37";
+const checkboxHidden = "_checkboxHidden_yl8iy_46";
 const styles$2 = {
-  checkboxContainer,
   checkbox,
   checkboxIndicator,
   checkboxLabel,
   noTextHighlight,
   checkboxHidden
 };
-const _Checkbox = forwardRef(function Checkbox2({ className, labelClassName, label, checked, onCheckedChange, alwaysShow = true, ...rest }, ref) {
-  return /* @__PURE__ */ jsx(HoverUtility, { children: ({ isHovered, ...props }) => /* @__PURE__ */ jsxs(Flex$1, { className: styles$2.checkboxContainer, ...props, children: [
+const _Checkbox = forwardRef(function Checkbox2({
+  className,
+  labelClassName,
+  label,
+  checked,
+  onCheckedChange,
+  checkboxPosition = "center",
+  alwaysShow = true,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx(HoverUtility, { children: ({ isHovered, ...props }) => /* @__PURE__ */ jsxs(Flex$1, { align: checkboxPosition, ...props, children: [
     /* @__PURE__ */ jsx(
       $e698a72e93240346$export$be92b6f5f03c0fe9,
       {
@@ -3721,17 +4115,18 @@ export {
   IconButton,
   IconColorUtility,
   Input,
+  Layout,
   LeftAndRightPanels,
   MultiPagePopover,
   MultiSelect,
   OvermapErrorBoundary,
   Popover,
-  Root2 as Root,
   Select,
   SelectAllCheckbox,
   Separator,
   Sidebar,
-  SlideOut,
+  SlideOutV2,
+  SlideOutV3,
   Spinner,
   Switch,
   Table,
@@ -3751,6 +4146,7 @@ export {
   useAlertDialog,
   useDiscardAlertDialog,
   useKeyboardShortcut,
+  useLayoutContext,
   useSeverityColor,
   useStopEventPropagation,
   useTextFilter,